:root{
  --brand:#b91c1c;--brand-d:#7f1d1d;--ok:#16a34a;--warn:#d97706;
  --ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--soft:#f1f5f9;--blue:#2563eb;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--soft)}
h1{font-size:17px;margin:0;font-weight:700}
.sub{font-size:12px;opacity:.85;margin-top:2px}
.muted{color:var(--muted);font-weight:600}
.req-star{color:var(--brand);font-weight:700}

/* login */
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#7f1d1d,#b91c1c)}
.loginCard{background:#fff;border-radius:16px;padding:30px 34px;width:340px;box-shadow:0 20px 50px rgba(0,0,0,.3);text-align:center}
.loginCard h1{font-size:22px;margin-top:10px}
.loginCard label{display:block;text-align:left;font-size:12px;color:var(--muted);margin:14px 0 4px;font-weight:600}
.loginCard input{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.loginCard label.rememberRow{display:flex;align-items:center;gap:7px;margin:16px 0 4px;font-weight:500}
.loginCard input[type=checkbox]{width:auto;padding:0;border:0;margin:0}
.logo{width:54px;height:54px;border-radius:14px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:30px;margin:0 auto}
.logo.sm{width:34px;height:34px;font-size:20px;background:#fff;color:var(--brand)}
.err{color:var(--brand);font-size:13px;margin-top:10px;min-height:16px}

/* header */
header{background:var(--brand);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:14px}
header .spacer{flex:1}
.user{font-size:13px;display:flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.3)}
.dot.on{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.3)}

.grid{display:grid;grid-template-columns:390px 1fr;height:calc(100vh - 56px)}
.left{background:#fff;border-right:1px solid var(--line);overflow-y:auto;padding:16px}
.right{position:relative}
#map{position:absolute;inset:0}

h2{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 10px}
.card{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:16px}
label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px;font-weight:600}
input,select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid #bfdbfe;border-color:var(--blue)}
.row{display:flex;gap:8px}.row>*{flex:1}
.note{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}
.scroll{max-height:260px;overflow-y:auto}

.btn{width:100%;padding:11px;border:0;border-radius:9px;background:var(--brand);color:#fff;font-weight:700;font-size:14px;cursor:pointer;margin-top:12px}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid rgba(255,255,255,.6)}
.btn.small{width:auto;padding:7px 12px;margin:0;font-size:12px}

.prio{display:flex;gap:8px;margin-top:4px}
.prio button{flex:1;padding:9px;border:2px solid var(--line);border-radius:9px;background:#fff;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer}
.prio button[data-p=normal].act{border-color:var(--ok);background:#f0fdf4;color:#166534}
.prio button[data-p=urgent].act{border-color:var(--warn);background:#fffbeb;color:#b45309}
.prio button[data-p=critical].act{border-color:var(--brand);background:#fef2f2;color:var(--brand-d)}

.result{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-top:8px;cursor:pointer;font-size:13px}
.result:hover{border-color:var(--blue);background:#f8fbff}
.result.sel{border-color:var(--blue);background:#eff6ff}
.result b{font-size:14px}
.result .meta{color:var(--muted);font-size:12px;margin-top:2px}
.badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;background:#dcfce7;color:#166534}

.item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-top:8px;cursor:pointer}
.item:hover{border-color:var(--brand);background:#fff5f5}
.item.hosp:hover{border-color:var(--blue);background:#eff6ff}
.item.sel{border-color:var(--blue);background:#eff6ff}
.item .pin{width:26px;height:26px;border-radius:6px;background:#fee2e2;color:var(--brand);display:grid;place-items:center;font-size:14px}
.item.hosp .pin{background:#dbeafe;color:var(--blue)}
.item .vh{font-weight:700;font-size:13px}
.item .di{margin-left:auto;font-size:13px;color:var(--blue);font-weight:700}
.item .meta{font-size:11px;color:var(--muted)}

.reqc{border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:9px;padding:10px 12px;margin-top:8px;font-size:13px}
.reqc.p-critical{border-left-color:var(--brand)}
.reqc.p-normal{border-left-color:var(--ok)}
.reqc .top{display:flex;align-items:center;gap:8px}
.reqc .st{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;padding:2px 8px;border-radius:20px;letter-spacing:.3px}
/* one colour per trip stage — lets a dispatcher scan several cards at a
   glance instead of reading each status label */
.st-new{background:#f1f5f9;color:#475569}
.st-assigned{background:#dbeafe;color:#1d4ed8}
.st-en_route_pickup{background:#ffedd5;color:#c2410c}
.st-at_pickup{background:#ede9fe;color:#6d28d9}
.st-on_board{background:#cffafe;color:#0e7490}
.st-en_route_hospital{background:#fce7f3;color:#be185d}
.st-at_hospital{background:#dcfce7;color:#166534}
.reqc .meta{color:var(--muted);font-size:12px;margin-top:3px}
.reqc .cancelReq{margin-top:8px;background:#fff;color:var(--brand);border:1px solid var(--brand)}
.reqc .cancelReq:hover{background:#fef2f2}
.ptag{font-size:10px;font-weight:800;padding:1px 7px;border-radius:20px;text-transform:uppercase}
.ptag.normal{background:#dcfce7;color:#166534}.ptag.urgent{background:#fef3c7;color:#b45309}.ptag.critical{background:#fee2e2;color:#991b1b}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:#0f172a;color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;opacity:0;transition:.3s;z-index:9999;max-width:360px}
.toast.show{opacity:1;transform:translateX(-50%)}

/* hospitals admin modal */
.modalOverlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;z-index:2000;padding:20px}
.modalCard{background:#fff;border-radius:14px;width:min(520px,100%);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modalHead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.modalBody{padding:16px 18px;overflow-y:auto}
.hrow{border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-top:8px}
.hrow .top{display:flex;align-items:center;gap:8px}
.hrow .top b{font-size:13px}
.hrow .meta{font-size:11px;color:var(--muted);margin-top:3px}
.hrow .actions{margin-left:auto;display:flex;gap:6px}
.hrow .actions button{padding:5px 9px;font-size:11px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700}
.hrow .actions button:hover{border-color:var(--blue)}
.hrow .actions button.danger:hover{border-color:var(--brand);color:var(--brand)}
.tagtype{font-size:10px;font-weight:800;padding:1px 7px;border-radius:20px;text-transform:uppercase;background:#dbeafe;color:#1d4ed8}
.tagwarn{font-size:10px;font-weight:800;padding:1px 7px;border-radius:20px;background:#fef3c7;color:#b45309}

/* reports dashboard */
.modalCard.wide{width:min(940px,96vw)}
/* dispatch history — 9-column table needs more room than the standard wide modal */
#historyModal .modalCard.wide{width:min(1320px,97vw)}
.repToolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
#repPeriod{margin-top:0}
.repDateNav{display:flex;align-items:center;gap:6px}
.repDateNav input[type=date]{width:auto;padding:7px 8px}
.repDateNav .btn{margin-top:0}

.dashGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:18px}
.statCard{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff;display:flex;flex-direction:column;gap:8px}
.statCard .statIcon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:14px;background:var(--soft)}
.statCard .n{font-size:24px;font-weight:800;color:var(--ink);line-height:1}
.statCard .l{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}

.dashRow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:760px){.dashRow{grid-template-columns:1fr}}
.dashCard h2{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 12px;font-weight:700}

.chartWrap{display:flex;align-items:flex-end;gap:2px;overflow-x:auto;padding-top:6px}
.chartCol{display:flex;flex-direction:column;align-items:center;flex:1 0 auto;min-width:9px}
.chartBarTrack{height:120px;width:100%;display:flex;align-items:flex-end;border-bottom:1px solid var(--line)}
.chartBar{width:100%;background:var(--blue);border-radius:3px 3px 0 0;min-height:2px}
.chartBar:hover{background:var(--brand)}
.chartLbl{font-size:9px;color:var(--muted);margin-top:4px;white-space:nowrap;height:11px}

.stackBar{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--soft);gap:2px}
.stackSeg{height:100%}
.legendRow{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap;font-size:12px;color:var(--ink)}
.legendDot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}

.rankList{display:flex;flex-direction:column;gap:9px}
.rankRow{display:flex;align-items:center;gap:10px;font-size:13px}
.rankRow .rankName{flex:0 0 44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.rankRow .rankTrack{flex:1;height:10px;background:var(--soft);border-radius:6px;overflow:hidden}
.rankRow .rankFill{height:100%;background:var(--blue);border-radius:6px}
.rankRow .rankN{flex:0 0 auto;font-weight:700;color:var(--ink);width:24px;text-align:right}

/* dispatch history */
.histFilters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.histFilters input,.histFilters select{width:auto;flex:1 1 160px;min-width:120px;margin:0}
.histFilters #hist_q{flex:2 1 260px}
.tableWrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;max-height:52vh}
.histTable{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.histTable td:nth-child(3),.histTable td:nth-child(4){white-space:normal;max-width:220px}
.histTable th{position:sticky;top:0;background:var(--soft);text-align:left;padding:9px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--line)}
.histTable td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.histTable tr:last-child td{border-bottom:0}
.histTable tr:hover td{background:#f8fafc}
.histTable .subMeta{color:var(--muted);font-size:11px;margin-top:2px}
.histPager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.histPager .btn{margin-top:0;width:auto}
.histPager .btn:disabled{opacity:.4;cursor:default}

/* case detail modal */
.caseTabs{display:flex;flex-wrap:wrap;gap:6px}
.caseTabs button{padding:7px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;font-weight:700;font-size:12px;color:var(--muted);cursor:pointer}
.caseTabs button.act{border-color:var(--blue);background:#eff6ff;color:#1d4ed8}
.kvGrid{display:grid;grid-template-columns:170px 1fr;gap:7px 12px;font-size:13px}
.kvGrid .k{color:var(--muted);font-weight:600}
.caseBtn{margin-top:8px}
.histTable .caseRowBtn{padding:5px 9px;font-size:11px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:700}
.histTable .caseRowBtn:hover{border-color:var(--blue)}

/* leaflet marker labels */
.amb-ic{background:#fff;border:2px solid var(--brand);border-radius:8px;width:30px;height:30px;display:grid;place-items:center;font-size:16px}
.amb-ic.busy{border-color:var(--blue)}
.hosp-ic{background:#eff6ff;border:2px solid var(--blue);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:13px;transition:.15s;box-shadow:0 1px 4px rgba(15,23,42,.35)}
.hosp-ic.sel{background:var(--blue);border-color:#1d4ed8;width:34px;height:34px;font-size:17px;box-shadow:0 0 0 5px rgba(37,99,235,.3),0 2px 6px rgba(15,23,42,.4)}

/* caller self-location panel (intake form, section 1) */
.locpanel{margin-top:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5}
.locpanel.wait{border-color:#bfdbfe;background:#eff6ff}
.locpanel.ok{border-color:#bbf7d0;background:#f0fdf4}
.locpanel.bad{border-color:#fecaca;background:#fef2f2}
.locpanel b{font-size:13px}
.locpanel .lp-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.locpanel .lp-link{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locpanel .lp-hint{color:var(--muted);margin-top:6px}
.locpanel .lp-offer{margin-top:8px;border:1px solid #fde68a;background:#fffbeb;border-radius:8px;padding:8px 10px;cursor:pointer}
.locpanel .lp-offer:hover{border-color:var(--warn)}
.locspin{display:inline-block;width:11px;height:11px;border:2px solid #bfdbfe;border-top-color:var(--blue);
  border-radius:50%;animation:locsp .8s linear infinite;vertical-align:-1px;margin-right:6px}
@keyframes locsp{to{transform:rotate(360deg)}}