/*
  IC Command Board v39
  File: css/base.css
  Purpose: Base layout and baseline command-board styling.
  Note: v39 keeps current cascade behavior intact; unused-rule cleanup is deferred.
*/
:root{
  --bg:#0e1419; --panel:#161f29; --panel2:#1d2935; --line:#2b3a48;
  --ink:#e7eef5; --ink-dim:#8aa0b4; --accent:#39c0ed; --accent-d:#1b6e88;
  --ok:#37d67a; --warn:#f5a623; --bad:#ff5b5b; --sel:#ffd24a;
  --font:"Bahnschrift","DIN Alternate","Segoe UI",system-ui,sans-serif;
  --mono:"Cascadia Mono","Consolas","SF Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);}
button{font-family:var(--font);cursor:pointer;}

/* layout */
#app{display:flex;flex-direction:column;height:100%;}
#topbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);
  border-bottom:1px solid var(--line);flex:0 0 auto;flex-wrap:wrap;}
#topbar .brand{font-weight:700;letter-spacing:1px;font-size:15px;}
#topbar .brand small{color:var(--accent);font-weight:400;letter-spacing:2px;}
#evtName{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  padding:6px 8px;border-radius:6px;font-family:var(--font);min-width:160px;}
.spacer{flex:1 1 auto;}
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  padding:7px 12px;border-radius:6px;font-size:13px;letter-spacing:.3px;}
.btn:hover{border-color:var(--accent-d);}
.btn.primary{background:var(--accent-d);border-color:var(--accent);color:#fff;}
.btn.danger:hover{border-color:var(--bad);color:var(--bad);}
.btn:disabled{opacity:.4;cursor:not-allowed;}
#saveDot{font-size:11px;color:var(--ink-dim);min-width:120px;text-align:right;}

#main{flex:1 1 auto;display:flex;min-height:0;}
#viewport{position:relative;flex:1 1 auto;overflow:hidden;background:
  repeating-linear-gradient(45deg,#0c1116 0 14px,#0e1419 14px 28px);touch-action:none;}
#mapImg{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;pointer-events:none;}
#emptyHint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink-dim);font-size:15px;text-align:center;pointer-events:none;}

/* zoom controls */
#zoomctl{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;}
#zoomctl .btn{width:42px;height:42px;font-size:20px;padding:0;display:flex;align-items:center;justify-content:center;}
#modeBadge{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:var(--sel);color:#1a1300;padding:6px 14px;border-radius:20px;font-weight:700;
  font-size:13px;letter-spacing:.5px;display:none;box-shadow:0 4px 16px rgba(0,0,0,.5);}

/* Section Mapper (S2.5) */
#secBar{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:none;
  align-items:center;gap:8px;background:var(--panel);border:1px solid var(--accent-d);
  padding:8px 12px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.55);z-index:20;}
#secBar input{width:90px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  font-family:var(--mono);font-size:14px;padding:6px 8px;border-radius:6px;}
#secBar .hint{font-size:12px;color:var(--ink-dim);}
.secmarker{position:absolute;transform:translate(-50%,-50%);z-index:4;display:flex;flex-direction:column;
  align-items:center;cursor:pointer;}
.secmarker .sdot{min-width:22px;height:18px;padding:0 4px;border-radius:4px;background:#0d1318dd;
  border:1.5px solid var(--accent);color:var(--accent);font-family:var(--mono);font-size:11px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.5);}
.secmarker.sel .sdot{outline:3px solid var(--sel);outline-offset:2px;background:#1a2330;}

/* Dispatch (S4): call markers + recommendation rows */
.callmarker{position:absolute;transform:translate(-50%,-50%);z-index:6;cursor:pointer;display:flex;flex-direction:column;align-items:center;}
.callmarker .cdot{width:34px;height:34px;border-radius:50%;background:#ff2d2d;border:3px solid #fff;
  box-shadow:0 0 0 4px #ff2d2d55, 0 2px 8px #000a;color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;}
.callmarker .ctag{margin-top:2px;background:#ff2d2dcc;color:#fff;font-size:10px;font-weight:700;
  padding:1px 5px;border-radius:4px;white-space:nowrap;}
#dispatch{border-bottom:1px solid var(--line);background:var(--panel2);}
#dispatch .dwrap{padding:10px 12px;}
.recrow{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);
  border-radius:6px;margin-bottom:5px;}
.recrow.top{border-color:var(--accent-d);}
.recrow .rank{font-size:11px;color:var(--ink-dim);width:16px;text-align:center;}
.recrow .cs{font-family:var(--mono);flex:1;}
.recrow .dist{font-size:11px;color:var(--ink-dim);}
.callitem{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);
  border-radius:6px;margin-bottom:6px;cursor:pointer;}
.callitem .badge{background:#ff2d2d;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;}

/* pins (constant screen size; do NOT scale with map) */
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;
  align-items:center;cursor:grab;user-select:none;z-index:5;}
.pin .dot{width:30px;height:30px;border-radius:50%;border:2px solid #0008;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  color:#0a0f14;box-shadow:0 2px 6px rgba(0,0,0,.55);}
.pin .tag{margin-top:2px;background:#0d1318cc;border:1px solid var(--line);color:var(--ink);
  font-family:var(--mono);font-size:11px;padding:1px 5px;border-radius:4px;white-space:nowrap;}
.pin.committed .dot{filter:grayscale(.8) brightness(.7);}
.pin.committed::after{content:"OUT";position:absolute;top:-8px;right:-12px;background:var(--warn);
  color:#231700;font-size:9px;font-weight:700;padding:0 3px;border-radius:3px;}
.pin.selected .dot{outline:3px solid var(--sel);outline-offset:2px;}
.pin.dragging{cursor:grabbing;z-index:50;}

/* right selection panel */
#side{flex:0 0 300px;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;}
#side .hd{padding:10px 12px;border-bottom:1px solid var(--line);font-weight:700;letter-spacing:.5px;}
#side .body{padding:12px;overflow:auto;flex:1 1 auto;}
#side .empty{color:var(--ink-dim);font-size:13px;line-height:1.5;}
.field{margin-bottom:10px;}
.field label{display:block;font-size:11px;color:var(--ink-dim);letter-spacing:.5px;margin-bottom:3px;text-transform:uppercase;}
.field input,.field select,.field textarea{width:100%;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);padding:7px 8px;border-radius:6px;font-family:var(--font);font-size:13px;}
.field textarea{resize:vertical;min-height:48px;}
.row2{display:flex;gap:8px;}.row2>*{flex:1;}
.statusbtns{display:flex;gap:8px;margin:6px 0 12px;}
.statusbtns .btn{flex:1;}
.statusbtns .btn.on-ok{background:var(--ok);border-color:var(--ok);color:#062712;font-weight:700;}
.statusbtns .btn.on-out{background:var(--warn);border-color:var(--warn);color:#231700;font-weight:700;}
.legend{margin-top:8px;font-size:11px;color:var(--ink-dim);line-height:1.7;}
.legend .sw{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:middle;border:1px solid #0006;}
.unitcount{font-size:11px;color:var(--ink-dim);margin-top:4px;}



#leftPane{flex:0 0 330px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;}
#leftPane .paneScroll{overflow:auto;flex:1 1 auto;}
#activeCalls{border-top:1px solid var(--line);}
#activeCallsList{padding:10px 12px;}
.activecallcard{border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:8px;background:var(--panel2);cursor:pointer;}
.activecallcard.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-d) inset;}
.activecallcard .meta{font-size:11px;color:var(--ink-dim);margin-top:3px;}
.activecallcard .units{font-size:12px;margin-top:5px;color:var(--ink);}
.activecallcard .actions{display:flex;gap:6px;margin-top:8px;}
.activecallcard .actions .btn{padding:3px 8px;font-size:12px;}
#side{flex-basis:380px;}
#unitStatusBoard{border-bottom:1px solid var(--line);background:var(--panel);}
#unitStatusList{padding:8px 10px;max-height:38vh;overflow:auto;}
.unitstatusgrid{display:grid;grid-template-columns:minmax(58px,.9fr) minmax(82px,1fr) minmax(70px,1fr) 56px;gap:4px 6px;align-items:center;font-size:12px;}
.unitstatusgrid .ush{font-size:10px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);padding-bottom:4px;}
.unitstatusgrid .usr{display:contents;}
.unitstatusgrid .ucell{padding:5px 3px;border-bottom:1px solid #ffffff10;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.unitstatusgrid .unitname{font-family:var(--mono);cursor:pointer;}

.unitstatusgrid.grouped .ugroup{
  grid-column:1 / -1;
  padding:8px 3px 4px;
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.7px;
  border-top:1px solid var(--line);
}
.unitstatusgrid.grouped .ugroup:first-of-type{border-top:0;}
.statuspill{display:inline-block;border-radius:12px;padding:2px 7px;font-size:11px;font-weight:700;color:#071016;background:var(--ink-dim);}
.status-available{background:var(--ok);}
.status-enroute{background:var(--warn);}
.status-onscene{background:#ff7a1a;color:#231700;}
.status-relocating{background:var(--accent);}
#rightLegend{border-top:1px solid var(--line);padding:10px 12px;flex:0 0 auto;background:var(--panel);}
.statusbtns{flex-wrap:wrap;}
.statusbtns .btn{min-width:47%;}
.statusbtns .btn.on-available{background:var(--ok);border-color:var(--ok);color:#062712;font-weight:700;}
.statusbtns .btn.on-enroute{background:var(--warn);border-color:var(--warn);color:#231700;font-weight:700;}
.statusbtns .btn.on-onscene{background:#ff7a1a;border-color:#ff7a1a;color:#231700;font-weight:700;}
.statusbtns .btn.on-relocating{background:var(--accent-d);border-color:var(--accent);color:#fff;font-weight:700;}

/* modal */
#scrim{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:100;}
#modal{background:var(--panel);border:1px solid var(--line);border-radius:10px;width:360px;max-width:92vw;
  padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);}
#modal h3{margin:0 0 12px;letter-spacing:.5px;}
#modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}
.hidden{display:none!important;}

.leftCallDetail{border-top:1px solid var(--line);padding:10px 12px;background:var(--panel);}
.leftCallDetail .field{margin-bottom:10px;}
.leftCallDetail .row2{margin-top:10px;}
.leftCallDetail .recrow .btn{font-weight:700;}
#activeCallsList.hasDetail{max-height:28vh;overflow:auto;}



#leftPane{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}
#leftPane #dispatch{
  flex:0 0 auto !important;
}
#leftPane .activeCallsWrap,
#leftPane #activeCallsPanel{
  flex:1 1 42% !important;
  min-height:120px !important;
  overflow:auto !important;
  border-bottom:1px solid var(--line);
}
#leftPane #activeCallsList{
  overflow:visible !important;
}
#leftActiveCallDetail{
  flex:1 1 58% !important;
  min-height:230px !important;
  max-height:none !important;
  overflow:auto !important;
  border-top:1px solid var(--line);
}
#leftActiveCallDetail .recrow{
  min-width:0;
}
#leftActiveCallDetail .actions{
  display:flex;
  gap:8px;
}
#leftActiveCallDetail .actions .btn{
  flex:1;
}



.callNotesBox{
  margin-top:10px;
  border-top:1px solid var(--line);
  padding-top:10px;
}
.callNotesBox textarea{
  width:100%;
  min-height:72px;
  background:var(--panel2);
  border:1px solid var(--line);
  color:var(--ink);
  padding:7px 8px;
  border-radius:6px;
  font-family:var(--font);
  font-size:13px;
  resize:vertical;
}
.callNotesBox .noteActions{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.callNotesBox .noteActions .btn{flex:1;}
#leftPane #leftActiveCallDetail{flex:1 1 58% !important;min-height:260px !important;}
#leftPane .activeCallsWrap,#leftPane #activeCallsPanel{flex:1 1 42% !important;min-height:130px !important;}
.log-row{border-bottom:1px solid var(--line);padding:5px 0;}
.log-row:last-child{border-bottom:none;}



#leftPane{
  flex:0 0 330px !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:var(--panel);
  border-right:1px solid var(--line);
}
#leftPane #dispatch{
  flex:0 0 auto !important;
  border-bottom:1px solid var(--line);
}
#activeCallsPanel{
  flex:1 1 44% !important;
  min-height:150px !important;
  overflow:auto !important;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
#activeCallsPanel .hd{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--panel);
}
#activeCallsList{
  padding:10px 12px !important;
  overflow:visible !important;
  max-height:none !important;
}
#activeCallsList.hasDetail{
  max-height:none !important;
  overflow:visible !important;
}
#leftActiveCallDetail{
  flex:1 1 56% !important;
  min-height:260px !important;
  max-height:none !important;
  overflow:auto !important;
  border-top:0 !important;
  background:var(--panel);
  padding:10px 12px !important;
}
#leftActiveCallDetail[style*="display:none"]{
  display:none !important;
}
#leftActiveCallDetail .field{
  margin-bottom:10px;
}
#leftActiveCallDetail .row2,
#leftActiveCallDetail .actions{
  display:flex;
  gap:8px;
}
#leftActiveCallDetail .row2 > *,
#leftActiveCallDetail .actions > *{
  flex:1;
}
#leftActiveCallDetail .recrow{
  min-width:0;
}
#leftActiveCallDetail .callNotesBox{
  margin-top:12px;
  border-top:1px solid var(--line);
  padding-top:10px;
}
#leftActiveCallDetail .callNotesBox textarea{
  width:100%;
  min-height:90px;
}



#leftActiveCallDetail{display:none!important;}
#activeCallsPanel{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;}
#activeCallsList{padding:10px 12px!important;}
.activecallcard{display:block!important;align-items:stretch!important;}
.activecallcard.expanded{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent-d) inset;}
.callCardHeader{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;}
.callTitleLine{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.callNumberInput{width:70px;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:5px;padding:2px 5px;font-family:var(--mono);font-weight:700;}
.callLocation{font-family:var(--mono);color:var(--ink);font-weight:700;}
.callAssignedLine{font-size:12px;margin-top:5px;color:var(--ink);}
.callNoteInput{width:100%;margin-top:6px;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:5px 7px;font-family:var(--font);font-size:12px;}
.callExpandBlock{margin-top:8px;border-top:1px solid var(--line);padding-top:8px;}
.callExpandBlock .recrow{margin-bottom:5px;}
.callExpandBlock .assignedUnitRow{display:flex;align-items:center;gap:7px;padding:4px 0;}
.callExpandBlock .assignedUnitRow select{max-width:108px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:3px;border-radius:5px;}
.callSmallBtn{padding:3px 8px!important;font-size:12px!important;}



#logScrim{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:200;}
#logModal{background:var(--panel);border:1px solid var(--line);border-radius:10px;width:820px;max-width:94vw;max-height:88vh;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;}
#logList{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;overflow:auto;min-height:280px;max-height:60vh;font-family:var(--mono);font-size:12px;white-space:pre-wrap;}
#logModal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}
.log-row{border-bottom:1px solid var(--line);padding:5px 0;}
.log-row:last-child{border-bottom:none;}




#side{display:flex!important;flex-direction:column!important;min-height:0!important;}
#unitStatusBoard{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;}
#unitStatusList{flex:1 1 auto!important;max-height:none!important;overflow:visible!important;padding:7px 10px!important;}
#sideBody{flex:0 0 auto!important;min-height:0!important;overflow:visible!important;padding:10px 12px!important;}
#rightLegend{flex:0 0 auto!important;}
.unitstatusgrid{grid-template-columns:minmax(72px,.9fr) minmax(82px,.8fr) minmax(90px,1.1fr) 48px!important;gap:2px 6px!important;font-size:11.5px!important;}
.unitstatusgrid .ucell{padding:4px 3px!important;}
.unitstatusgrid .ugroup{grid-column:1/-1;color:var(--accent);font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;border-top:1px solid var(--line);padding:7px 0 3px;margin-top:2px;}
.unitstatusgrid .ugroup:first-of-type{border-top:0;margin-top:0;}
.statuspill{padding:2px 7px!important;font-size:10.5px!important;}



#side.unit-detail-open #unitStatusBoard{flex:0 1 auto!important;max-height:46%!important;min-height:92px!important;}
#side.unit-detail-open #unitStatusList{flex:0 1 auto!important;overflow:hidden!important;}
#side.unit-detail-open #sideBody{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;}
#side.unit-detail-open #rightLegend{display:none!important;}
#side:not(.unit-detail-open) #sideBody{flex:0 0 auto!important;}

/* v39_summary: compact structured fields on expanded call cards */
.callSummaryFields{display:grid;grid-template-columns:1.4fr .8fr;gap:6px;margin-top:6px;}
@media (max-width:900px){.callSummaryFields{grid-template-columns:1fr;}}