:root{
  --bg:#0a0d1c; --panel:#141a2f; --soft:#1a2040; --muted:#93a0c0; --text:#e8ebf7; --accent:#66a3ff; --border:#26325b;
  --task:#0f1530; --task-hover:#182145; --task-active:#203066; --start:#0c1026;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(120% 120% at 10% 10%,#0f1530 0%,#0a0d1c 60%);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;user-select:none}
.desktop{position:relative;height:100vh;overflow:hidden}
.wallpaper{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%)}

/* Desktop icons */
.icons{position:absolute;left:12px;top:12px;display:grid;grid-template-columns:100px 100px;grid-auto-rows:92px;gap:10px;padding-bottom:60px}
.icon{width:100px;height:92px;border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.02);border:1px solid transparent;cursor:pointer;transition:.15s}
.icon:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.icon .glyph{font-size:28px}
.icon .label{font-size:12px;text-align:center;color:#d0d8f8}

/* Windows */
.window{
  position:absolute;
  min-width:460px; min-height:300px;
  max-width:92vw; max-height:82vh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#121735,#0f1430);
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  will-change:left, top, width, height;
}
.titlebar{height:36px;display:flex;align-items:center;gap:10px;padding:0 8px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#1a2350,#121735);border-top-left-radius:8px;border-top-right-radius:8px}
.titlebar .appicon{font-size:16px;opacity:.9}
.title{font-weight:700;font-size:12px;letter-spacing:.2px;flex:1}
.winbtns{display:flex;gap:6px}
.winbtn{width:28px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--soft);display:grid;place-items:center;cursor:pointer}
.winbtn:hover{filter:brightness(1.1)}

/* Window content: allow scroll when small */
.content{
  flex:1;
  background:#0b1124;
  border-bottom-left-radius:8px;border-bottom-right-radius:8px;
  overflow:auto;
}
.content iframe{border:0;width:100%;height:100%;display:block}

/* Resize handles */
.resizer{position:absolute;background:transparent}
.resizer.e{right:-2px;top:36px;bottom:10px;width:6px;cursor:ew-resize}
.resizer.s{left:10px;right:10px;bottom:-2px;height:6px;cursor:ns-resize}
.resizer.se{right:-2px;bottom:-2px;width:12px;height:12px;cursor:nwse-resize}

/* Taskbar */
.taskbar{position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(180deg,#0f1530,#0a0d1c);border-top:1px solid var(--border);display:grid;grid-template-columns:48px 1fr auto 96px;align-items:center}
.startbtn{width:36px;height:36px;margin-left:6px;border-radius:8px;background:radial-gradient(120% 120% at 10% 10%,#6aa5ff 0%,#3763f0 45%,#1b2140 100%);border:1px solid var(--border);cursor:pointer}
.tasklist{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:0 8px}
.task{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--task);font-size:12px;white-space:nowrap;cursor:pointer}
.task:hover{background:var(--task-hover)}
.task.active{background:var(--task-active);border-color:#345}
.clock{font-size:12px;color:#c8d2f0}

/* Start menu */
.startmenu{position:absolute;left:8px;bottom:56px;width:520px;background:linear-gradient(180deg,#101736,#0c1026);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.55);display:none}
.startmenu.open{display:block}
.startmenu .header{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--border)}
.startmenu .search{flex:1;background:#0b1124;border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text)}
.appgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.tile{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:10px;background:#151a33;cursor:pointer}
.tile:hover{filter:brightness(1.06)}

/* Form controls inside apps */
label{font-size:12px;color:#aab4d8}
input,select,textarea{background:#0c1124;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px;font:inherit}
.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--soft);color:var(--text);font-weight:600;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* App page layout helpers */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:linear-gradient(180deg,#131a2f,#0f1430);border:1px solid var(--border);border-radius:14px;padding:12px}
.title{font-weight:700;font-size:14px;margin-bottom:8px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px;border-bottom:1px solid var(--border)}
th{text-align:left;color:#a9b4d4;font-weight:600}
tr:hover{background:rgba(255,255,255,.02)}
.status{padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border)}
.s-avail{background:rgba(22,163,74,.15)}
.s-busy{background:rgba(245,158,11,.15)}
.s-enrt{background:rgba(59,130,246,.18)}
.s-othr{background:rgba(148,163,184,.15)}

/* Stack nicely on narrow windows */
@media (max-width: 980px){
  .cards{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
}

/* === Classic CAD theme (Police) === */
.cad-wrap{--c-bg:#0b1223;--c-surface:#14325e;--c-deep:#0a1a33;--c-grid:#365c93;--c-hl:#1e4477;--c-text:#e6f0ff;--c-dim:#a8bbd9;--c-good:#26d641;--c-warn:#facc15;--c-bad:#ef4444}
.cad{background:#0a0f1f;color:var(--c-text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;height:100%;display:flex;flex-direction:column}
.cad-toolbar{display:flex;gap:12px;padding:10px;background:linear-gradient(#1a3e78,#173765);border-bottom:2px solid #0d2a52;align-items:center}
.cad-toolbar .tool{display:flex;gap:8px;align-items:center;background:#214b86;border:1px solid #153968;border-radius:8px;padding:8px 10px;cursor:pointer}
.cad-toolbar .tool:hover{filter:brightness(1.08)}
.cad-toolbar .tool .icon{width:20px;text-align:center}

.cad-status-ribbon{display:flex;gap:14px;align-items:center;padding:6px 10px;background:#0f264a;border-bottom:1px solid #0c1e3b}
.cad-status-ribbon .sbtn{font-size:12px;color:#dbe8ff;background:#182d52;border:1px solid #173a73;border-radius:999px;padding:6px 12px;cursor:pointer}
.cad-status-ribbon .sbtn:hover{filter:brightness(1.08)}
.cad-status-ribbon .dot{width:8px;height:8px;border-radius:999px;background:#6b7280;display:inline-block;margin-right:6px}
.cad-status-ribbon .dot.on{background:var(--c-good)}
.cad-spacer{flex:1}

.cad-main{display:grid;grid-template-rows:1fr minmax(160px, 28%);gap:10px;padding:10px;background:linear-gradient(#0b1124,#0a0f1f);}
.cad-card{background:#0a1328;border:1px solid #153968;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.cad-card .head{background:#14325e;color:#e6f0ff;padding:8px 10px;border-bottom:1px solid #0e2c56;font-weight:700}
.datatable{width:100%;border-collapse:separate;border-spacing:0 0}
.datatable thead th{position:sticky;top:0;background:#173a73;color:#dbe8ff;padding:8px 10px;border-bottom:1px solid #0e2c56;font-size:12px}
.datatable tbody tr{background:#0d1b35}
.datatable tbody tr:nth-child(even){background:#0b1730}
.datatable td{padding:8px 10px;border-bottom:1px solid #132853;font-size:13px;color:#e6f0ff}
.datatable tbody tr:hover{background:#1b3566}
.badge-pill{font-size:11px;border:1px solid #2a4c85;border-radius:999px;padding:3px 8px;background:#133061;color:#dbe8ff}

.c-pr1{color:#fff;background:#7f1d1d;border-color:#991b1b}
.c-pr2{color:#fff;background:#92400e;border-color:#b45309}
.c-pr3{background:#0b3b21;border-color:#14532d}

.cad-statusbar{display:flex;gap:16px;align-items:center;padding:6px 10px;background:#0d2a52;border-top:1px solid #0b2245;color:#cfe0ff;font-size:12px}
.cad-statusbar .light{width:8px;height:8px;border-radius:999px;background:#ef4444}
.cad-statusbar .light.ok{background:#22c55e}
.cad-statusbar .right{margin-left:auto;opacity:.85}

/* Context menu for Classic Dispatch */
.ctxmenu{
  position:fixed; z-index:99999; display:none; min-width:220px;
  background:#0a1328; border:1px solid #153968; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35); overflow:hidden;
}
.ctxmenu .item{ padding:10px 12px; cursor:pointer; color:#e6f0ff; }
.ctxmenu .item:hover{ background:#173a73; }
.ctxmenu .item.disabled{ opacity:.45; pointer-events:none; }

/* Simple input look for editor (fits Classic theme) */
.input{
  width:100%; padding:8px 10px; border-radius:8px;
  background:#0b1730; border:1px solid #132853; color:#e6f0ff;
}

/* ===== Responsive layout helpers for Classic CAD ===== */
html, body, .cad-wrap, .cad { height:100%; }

/* Main area never clips; rows are flexible */
.cad-main{
  overflow:hidden;                 /* keep internal scrolls */
  grid-template-rows: minmax(220px, 1fr) minmax(180px, 0.45fr);
}

/* Cards are allowed to shrink inside grid/flex (CRITICAL) */
.cad-card{ min-height:0; }

/* Anything with .scroll will scroll instead of overflow */
.scroll{ min-height:0; overflow:auto; }

/* South row (bottom area with two cards) */
.southRow{ display:flex; gap:10px; min-height:0; overflow:hidden; }
.southRow > .cad-card{ flex:1 1 0; min-width:280px; }

/* Tables: allow horizontal scroll when very narrow */
.table-wrap{ min-height:0; overflow:auto; }
.datatable{ width:100%; min-width:640px; } /* force a horiz scrollbar if container gets narrower */

/* Toolbar & ribbon wrap nicely on small windows */
.cad-toolbar, .cad-status-ribbon{ flex-wrap:wrap; }

/* ===== Compact mode (auto via JS) ===== */
.cad-wrap.compact .cad-main{
  grid-template-rows: minmax(160px, 0.6fr) minmax(160px, 0.4fr);
}
.cad-wrap.compact .southRow{ flex-direction:column; }
.cad-wrap.compact .datatable{ min-width:560px; }
.cad-wrap.compact .cad-toolbar .tool{ padding:6px 8px; }
.cad-wrap.compact .cad-status-ribbon .sbtn{ padding:5px 10px; }


/* ===== Modals (Create Call / Dispatch Units) ===== */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100000;}
.modal.show{display:flex;}
.modal .backdrop{position:absolute;inset:0;background:rgba(2,10,28,.65);backdrop-filter:blur(1px);}
.modal .card{
  position:relative; width:min(840px, 96vw); max-height:90vh; display:flex; flex-direction:column;
  background:#0a1328; border:1px solid #153968; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.modal .card .head{background:#14325e;color:#e6f0ff;padding:10px 12px;border-bottom:1px solid #0e2c56;font-weight:700}
.modal .card .body{padding:12px; overflow:auto}
.modal .card .foot{display:flex;gap:10px;justify-content:flex-end;padding:12px;border-top:1px solid #132853;background:#0b1730}
.modal .x{position:absolute;right:10px;top:8px;cursor:pointer;opacity:.85}
.form-grid{display:grid;grid-template-columns:1fr 140px 150px;gap:10px}
.form-grid-wide{display:grid;gap:10px}
.unit-list{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-height:42vh;overflow:auto;padding:6px;border:1px solid #132853;border-radius:8px;background:#0b1730}
.unit-pill{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #132853;border-radius:10px;background:#0d1b35}
.unit-pill .small{opacity:.75;font-size:12px}
.btn{padding:8px 12px;border:1px solid #173a73;border-radius:8px;background:#214b86;color:#e6f0ff;cursor:pointer}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.secondary{background:#182d52}
.badge{font-size:12px;padding:4px 8px;border:1px solid #2a4c85;border-radius:999px;background:#133061;color:#dbe8ff}

/* ===== Modals (already present from winui-14) kept as-is ===== */
/* Notes thread */
.notes-list{
  display:grid; gap:8px; max-height:42vh; overflow:auto;
  padding:6px; border:1px solid #132853; border-radius:8px; background:#0b1730;
}
.note-row{ display:flex; gap:10px; align-items:flex-start; }
.note-time{ flex:0 0 126px; font-size:12px; opacity:.7; }
.note-body{ white-space:pre-wrap; }
.note-me{ color:#cfe5ff; }

/* Context menu reuse; add a second one for calls */

/* Full-height app pages */
html, body, .cad-wrap, .cad { height: 100%; }

.cad{
  display: flex;
  flex-direction: column;
  min-height: 0;               /* lets inner areas shrink instead of clipping */
}

.cad-main{
  flex: 1 1 auto;              /* takes all remaining space */
  min-height: 0;               /* critical for scrollable children */
  overflow: hidden;            /* internal panes handle their own scroll */
}

/* ===== Messaging window (dispatcher) ===== */
.list{ display:flex; flex-direction:column; gap:6px; padding:6px; }
.list .list-item{
  display:flex; flex-direction:column; gap:3px; padding:8px; text-align:left; cursor:pointer;
  background:#0d1b35; border:1px solid #132853; border-radius:10px;
}
.list .list-item:hover{ background:#112246; }
.list .list-item.active{ outline:2px solid #2e6fff; }
.list .sub{ font-size:12px; opacity:.75; }

.chat{
  display:flex; flex-direction:column; gap:8px; min-height:0;
  padding:8px; background:#0b1730; border:1px solid #132853; border-radius:8px;
}
.msg{ max-width:80%; }
.msg .bubble{ padding:8px 10px; border-radius:12px; background:#142a53; }
.msg.me{ align-self:flex-end; text-align:right; }
.msg.me .bubble{ background:#2b5aa8; }
.msg .time{ font-size:11px; opacity:.6; margin-top:2px; }
.input-row{ display:grid; grid-template-columns:1fr 120px; gap:8px; padding:10px 0; }
#input{ resize:vertical; min-height:38px; max-height:120px; }