/* Shared calm dispatch desk styling; client data and workflow rules stay outside CSS. */
/* Keep every section reachable when the menu is taller than the window. */
@media(min-width:761px){
  body.demo3 .side {overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8aaab2 #102f38}
  body.demo3 .side > * {flex-shrink:0}
  body.demo3 .nav button {flex-shrink:0}
}
.demo3 .sync-bar {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;border:1px solid #c8ddd5;border-radius:12px;background:#edf6f1;color:#173e35;margin:0 0 18px}
.demo3 .sync-bar[data-status="pending"],.demo3 .sync-bar[data-status="offline"] {background:#fff5df;border-color:#ead2a5;color:#664916}
.demo3 .sync-bar[data-status="conflict"],.demo3 .sync-bar[data-status="error"] {background:#fff0eb;border-color:#e4b8aa;color:#7c3328}
.demo3 .sync-bar button {min-height:38px}
.demo3 .sync-bar small {flex:1;min-width:150px}
.demo3 .sync-details {font-size:13px}
.demo3 #syncStatus {display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 28px 0;padding:12px 16px;border:1px solid #d8e5de;border-radius:12px;background:#f0f6f2;font-size:12px;line-height:1.5;color:#25463c}
.demo3 #syncStatus>div:first-child {min-width:0}
.demo3 #syncStatus strong {display:block;font-size:12px;font-weight:650}
.demo3 #syncStatus span {display:block;font-size:11px;margin-top:3px;color:#536c61;overflow-wrap:anywhere}
.demo3 #syncStatus[data-state="local"],.demo3 #syncStatus[data-state="offline"] {background:#fff6e6;border-color:#e8d3ad}
.demo3 #syncStatus[data-state="conflict"] {background:#fff0eb;border-color:#dfb9ad}
.demo3 .sync-actions {display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.demo3 .sync-actions button {font-size:11px;min-height:36px;padding:7px 10px;background:#fff}
.demo3 .update-banner {padding:12px 18px;border-radius:12px;background:#e7f1f8;border:1px solid #bed1df;display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo3 #programUpdate {margin:12px 28px 0;background:#fff4d8;border-color:#d4ad54;color:#5e481b}
.demo3 #programUpdate[hidden] {display:none}
.demo3 #programUpdate strong {font-size:14px}
.demo3 #programUpdate p {margin:5px 0 0;font-size:12px;line-height:1.6}
.demo3 #programUpdate button {min-height:44px;flex-shrink:0}
.demo3 button:focus-visible,.demo3 input:focus-visible,.demo3 select:focus-visible,.demo3 textarea:focus-visible {outline:3px solid #bc6d1c;outline-offset:3px}
.demo3 .local-banner summary {line-height:1.6}
@media(max-width:600px){.demo3 .sync-bar {padding:10px 12px;gap:8px}.demo3 .sync-bar button {min-height:44px}.demo3 .update-banner{align-items:stretch;flex-direction:column}}
@media(max-width:900px){.demo3 #syncStatus {margin:12px 16px 0;align-items:flex-start;flex-direction:column}.demo3 .sync-actions {justify-content:flex-start}.demo3 .sync-actions button {min-height:44px}}
@media(max-width:900px){.demo3 #programUpdate{margin:12px 16px 0}}