:root { --lw: 380px; --rw: 440px; --bh: 230px; --bg: #0b1119; --p1: #101923; --p2: #162231; --line: #223347; --txt: #d6e2f0; --mut: #7f93a9; --blue: #3b82f6; --green: #22c55e; --amber: #f59e0b; --red: #ef4444; --orange: #f97316; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font: 12.5px/1.35 "Segoe UI", system-ui, sans-serif; overflow: hidden; }
#app { display: grid; height: 100vh; grid-template-columns: var(--lw) 5px 1fr 5px var(--rw); grid-template-rows: 44px 1fr 5px var(--bh);
  grid-template-areas: "top top top top top" "left sl center sr right" "bot bot bot bot bot" "bot bot bot bot bot"; }
#app.swap { grid-template-columns: var(--rw) 5px 1fr 5px var(--lw); }
#top { grid-area: top; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #0a131d; border-bottom: 1px solid var(--line); }
#left { grid-area: left; } #center { grid-area: center; position: relative; min-width: 200px; } #right { grid-area: right; }
#splitL { grid-area: sl; } #splitR { grid-area: sr; }
#splitB { grid-column: 1 / -1; grid-row: 3; } #bottom { grid-column: 1 / -1; grid-row: 4; }
#app { grid-template-areas: none; }
#top { grid-column: 1 / -1; grid-row: 1; } #left { grid-column: 1; grid-row: 2; } #splitL { grid-column: 2; grid-row: 2; } #center { grid-column: 3; grid-row: 2; } #splitR { grid-column: 4; grid-row: 2; } #right { grid-column: 5; grid-row: 2; }
#app.swap #left { grid-column: 5; } #app.swap #right { grid-column: 1; } #app.swap #splitL { grid-column: 4; } #app.swap #splitR { grid-column: 2; }
.split { background: var(--line); } .split.v { cursor: col-resize; } .split.h { cursor: row-resize; } .split:hover { background: var(--blue); }
.panel { background: var(--p1); overflow-y: auto; overflow-x: hidden; min-height: 0; overflow-anchor: none; }
#map { position: absolute; inset: 0; background: #0d1520; }
.map-error { padding: 40px; color: var(--amber); }
h3 { margin: 0; padding: 7px 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); background: var(--p2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 2; }
h3 .cnt { background: #1c3556; color: #9cc6ff; border-radius: 9px; padding: 0 7px; font-size: 11px; }
.sec { padding: 6px 10px; }
button, select, input, textarea { font: inherit; color: var(--txt); background: #0e1824; border: 1px solid var(--line); border-radius: 4px; padding: 4px 7px; }
textarea { width: 100%; resize: vertical; }
button { cursor: pointer; background: #17263a; } button:hover { background: #1f3550; } button:disabled { opacity: .4; cursor: default; }
button.pri { background: #1d5fd1; border-color: #3b82f6; } button.pri:hover { background: #2a6fe5; }
button.go { background: #178a46; border-color: #22c55e; } button.dng { background: #8c2323; border-color: var(--red); }
button.sm { padding: 1px 6px; font-size: 11px; }
table { width: 100%; border-collapse: collapse; } th { text-align: left; color: var(--mut); font-weight: 600; font-size: 11px; padding: 3px 6px; } td { padding: 3px 6px; border-top: 1px solid #172536; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
tr.click { cursor: pointer; } tr.click:hover td { background: #172a40; } tr.sel td { background: #1b3a5f; }
.chip { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 600; background: #243449; }
.s-Available { color: var(--green); } .s-Alerting, .s-Mobilising { color: var(--amber); } .s-Responding { color: #60a5fa; } .s-On\ scene, .s-Committed { color: var(--orange); } .s-Returning { color: #a78bfa; } .s-Out\ of\ service, .s-Unavailable { color: #6b7280; }
.p1 { background: #7f1d1d; color: #fecaca; } .p2 { background: #78350f; color: #fde68a; } .p3 { background: #14532d; color: #bbf7d0; }
.bar { height: 5px; background: #21324a; border-radius: 3px; overflow: hidden; min-width: 60px; } .bar i { display: block; height: 100%; background: var(--amber); }
.row { display: flex; gap: 6px; align-items: center; } .grow { flex: 1; } .mut { color: var(--mut); } .small { font-size: 11px; }
.form label { display: block; margin: 5px 0 2px; color: var(--mut); font-size: 11px; } .form input, .form select, .form textarea { width: 100%; }
.card { background: var(--p2); border: 1px solid var(--line); border-radius: 5px; padding: 8px; margin: 6px 10px; }
.call { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid #172536; } .call.ring { background: #4a1313; animation: pulse 1s infinite; }
@keyframes pulse { 50% { background: #2a0a0a; } }
.transcript { height: 160px; overflow-y: auto; background: #0a111a; border: 1px solid var(--line); border-radius: 4px; padding: 6px; }
.transcript div { margin: 3px 0; } .transcript .you b { color: #60a5fa; } .transcript .caller b { color: #fca5a5; }
.mic { width: 100%; padding: 8px; font-weight: 700; } .mic.live { background: #b91c1c; border-color: #ef4444; animation: pulse 1s infinite; }
.log { max-height: 180px; overflow-y: auto; font-size: 11.5px; } .log div { padding: 1px 0; border-top: 1px solid #142234; } .log .t { color: var(--mut); margin-right: 5px; font-variant-numeric: tabular-nums; }
.banner { background: #5b1a1a; border: 1px solid var(--red); border-radius: 5px; padding: 6px 8px; margin: 6px 10px; }
.banner.warn { background: #5b4a1a; border-color: var(--amber); }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; } .tabs button { border-radius: 4px 4px 0 0; } .tabs button.on { background: #1d5fd1; }
/* top bar */
#top .brand { font-weight: 800; letter-spacing: .04em; } #top .brand small { display: block; font-weight: 400; color: var(--mut); font-size: 10px; letter-spacing: 0; }
#top .clock { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } #top .sp { flex: 1; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 4px; } .dot.bad { background: var(--red); } .dot.warn { background: var(--amber); }
/* map */
.mkw { position: absolute; } .mk { position: relative; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: auto; cursor: pointer; }
.mk span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; border: 2px solid #fff; color: #fff; font-weight: 800; font-size: 11px; background: var(--blue); }
.mk.appliance svg { display: block; filter: drop-shadow(0 1px 3px #000a); } .mk.appliance.moving svg { animation: truckflash 0.9s infinite; } @keyframes truckflash { 50% { filter: drop-shadow(0 0 6px #ef4444); } }
.mk.appliance span { border-radius: 50%; background: var(--green); width: 22px; height: 22px; } .mk.appliance.moving span { background: #eab308; color: #000; } .mk.appliance.scene span { background: var(--orange); } .mk.appliance.out span { background: #6b7280; }
.mk.incident span { background: var(--red); border-radius: 50%; width: 28px; height: 28px; animation: ring 1.4s infinite; } .mk.incident.p2 span { background: var(--amber); } .mk.incident.p3 span { background: #84cc16; }
.mk.station.alert span { background: var(--amber); animation: ring 0.7s infinite; } .mk.station.oos span { background: #6b7280; } .mk.station span { width: 20px; height: 20px; font-size: 10px; }
.mk b { background: rgba(8,14,22,.85); color: #fff; font-size: 10px; padding: 0 4px; border-radius: 3px; margin-top: 1px; white-space: nowrap; }
#map[data-zoom="5"] .mk.station b, #map[data-zoom="6"] .mk.station b, #map[data-zoom="7"] .mk.station b, #map[data-zoom="8"] .mk.station b { display: none; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.7); } 100% { box-shadow: 0 0 0 14px rgba(239,68,68,0); } }
#mapcard { position: absolute; left: 10px; bottom: 28px; width: 310px; max-height: 60%; overflow: auto; background: rgba(11,17,25,.95); border: 1px solid var(--line); border-radius: 6px; z-index: 1000; display: none; padding: 8px; }
#mapcard h4 { margin: 0 0 4px; } #mapcard .kv { display: grid; grid-template-columns: 95px 1fr; gap: 2px 6px; font-size: 12px; } #mapcard .kv span:nth-child(odd) { color: var(--mut); }
#maptools { position: absolute; right: 10px; top: 10px; z-index: 1000; display: flex; flex-direction: column; gap: 4px; }
#alertbanner { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
#alertbanner .al { background: #7c2d12; border: 2px solid var(--amber); color: #fff; padding: 6px 14px; border-radius: 6px; font-weight: 700; animation: pulse 0.8s infinite; box-shadow: 0 0 18px rgba(245,158,11,.5); }
#alertbanner .al small { display: block; font-weight: 400; }
/* radio */
#bottom { display: grid; grid-template-columns: 1fr 340px 290px; } #bottom .rlog { overflow-y: auto; padding: 4px 10px; height: calc(var(--bh) - 36px); } .rline { padding: 3px 0; border-top: 1px solid #142234; font: 11.5px/1.4 Consolas, "Courier New", monospace; text-transform: uppercase; letter-spacing: .02em; } .rline .cs { font-weight: 800; } .rline.me .cs { color: #60a5fa; } .rline.sitrep { background: #14243a; }
.rline .t { color: var(--mut); margin-right: 6px; } .rline .ch { color: #5d7894; font-size: 10px; margin-left: 6px; } .rline.live { background: #2b2410; }
#bottom .ctl { border-left: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
/* modal */
#modal, #start { position: fixed; inset: 0; background: rgba(2,6,12,.82); z-index: 5000; display: flex; align-items: center; justify-content: center; } #modal.hidden, #start.hidden { display: none; }
.dlg { width: min(1100px, 94vw); height: min(780px, 92vh); background: var(--p1); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; } .dlg header { padding: 8px 12px; display: flex; gap: 8px; align-items: center; background: var(--p2); border-bottom: 1px solid var(--line); } .dlg .body { flex: 1; overflow: auto; padding: 10px; }
.start { width: min(860px, 94vw); background: linear-gradient(#0e2236, #0b1826); border: 1px solid #3b82f6; border-radius: 12px; padding: 22px 24px; box-shadow: 0 18px 50px #001428aa; } .start h1 { margin: 0 0 2px; font-size: 22px; letter-spacing: .02em; } .start-brand { display: flex; gap: 14px; align-items: center; } .start-brand img { height: 54px; width: auto; border-radius: 6px; }
.auth-card { width: min(460px, 94vw); } .auth-card .form input { width: 100%; } .auth-card .note { margin: 8px 0 0; } .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 8px; } .comms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; } .mode { padding: 12px; background: var(--p2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; } .mode:hover, .mode.on { border-color: var(--blue); background: #17304f; } .mode b { display: block; margin-bottom: 4px; } .comms .mode { text-align: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.json { width: 100%; height: 520px; font-family: Consolas, monospace; font-size: 12px; white-space: pre; }
#toasts { position: fixed; right: 12px; bottom: 244px; z-index: 6000; display: flex; flex-direction: column; gap: 5px; } .toast { background: #14243a; border-left: 4px solid var(--blue); padding: 6px 10px; border-radius: 4px; max-width: 360px; box-shadow: 0 4px 14px #0008; } .toast.danger { border-color: var(--red); } .toast.warn { border-color: var(--amber); }
.note { font-size: 11px; color: var(--amber); }
.addr-wrap { position: relative; }
.addr-sug { display: none; position: relative; z-index: 30; background: #0e1824; border: 1px solid var(--line); border-radius: 0 0 4px 4px; max-height: 220px; overflow: auto; margin: -2px 0 6px; }
.addr-sug.on { display: block; }
.addr-sug div { padding: 6px 8px; cursor: pointer; border-top: 1px solid #172536; }
.addr-sug div:hover, .addr-sug div.on { background: #1b3a5f; }
.addr-sug .mut { cursor: default; color: var(--mut); }
.pfa-box { margin: 6px 0; padding: 8px; background: #122033; border: 1px solid #1d3a5c; border-radius: 6px; }
.cc-dlg { height: auto; max-height: 92vh; } .cc-dlg .body { overflow: auto; }
.dark-tiles { filter: invert(1) hue-rotate(200deg) brightness(.85) contrast(.9) saturate(.7); } .leaflet-container { background: #0d1520; }

/* ---------- desks: separate calltaking and dispatch workstations ---------- */
#app[data-desk="call"] { grid-template-columns: minmax(440px, 36vw) 5px 1fr 0 0; grid-template-rows: 44px 1fr 0 0; }
#app[data-desk="call"] #right, #app[data-desk="call"] #splitR, #app[data-desk="call"] #bottom, #app[data-desk="call"] #splitB { display: none; }
#app[data-desk="dispatch"] { grid-template-columns: 0 0 1fr 5px var(--rw); }
#app[data-desk="dispatch"] #left, #app[data-desk="dispatch"] #splitL { display: none; }
#app[data-desk] #left { grid-column: 1; } #app[data-desk] #splitL { grid-column: 2; } #app[data-desk] #center { grid-column: 3; } #app[data-desk] #splitR { grid-column: 4; } #app[data-desk] #right { grid-column: 5; }
#left .desk-title, #right .desk-title { padding: 8px 12px; font-weight: 800; letter-spacing: .06em; background: linear-gradient(90deg, #1a3a66, #12263f); border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase; }
#right .desk-title { background: linear-gradient(90deg, #6b1f1f, #3a1414); }
.desks { display: flex; gap: 4px; } .desks button { padding: 6px 12px; font-weight: 700; } .desks button.pri { box-shadow: 0 0 0 1px #93c5fd inset; }
.bdg { font-style: normal; display: none; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; text-align: center; }
.bdg.on { display: inline-block; animation: pulse 1s infinite; }
/* call-up queue (crews pressing Routine / Priority) */
#cuq { overflow-y: auto; border-left: 1px solid var(--line); height: calc(var(--bh)); }
.cu { margin: 6px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--p2); }
.cu.priority { border-color: var(--red); background: #3a1414; animation: pulse 0.9s infinite; } .cu.routine.waiting { border-color: var(--amber); }
.cu .who { font-weight: 800; font-size: 13px; } .cu .tag { font-size: 10px; letter-spacing: .08em; padding: 1px 6px; border-radius: 3px; font-weight: 800; } .cu .tag.priority { background: var(--red); color: #fff; } .cu .tag.routine { background: var(--amber); color: #000; }
.cu .msg { margin-top: 4px; font-size: 11.5px; color: #cfe0f3; max-height: 90px; overflow: auto; white-space: normal; }
.cu .btns { display: flex; gap: 6px; margin-top: 6px; }
.cu.sent { opacity: .95; border-color: #3b82f6; } .cu.acked { opacity: .5; }
.kpal { display: flex; flex-wrap: wrap; gap: 3px; } .kpal button { padding: 2px 7px; font-size: 11px; font-weight: 800; letter-spacing: .03em; } .kpal button:hover { background: #1d5fd1; color: #fff; border-color: #60a5fa; } #bottom.cad .kpal button { background: #d7ebf8; border-color: #7fa6c4; color: #0b3a5a; } #bottom.cad .kpal button:hover { background: #00507d; color: #fff; }
.rline.status { color: #8aa0b8; font-size: 11.5px; } .rline.status .cs { color: #7dd3fc; } .rline.cup .cs { color: #fbbf24; }
.rline.sitrep { border-left: 3px solid #3b82f6; padding-left: 6px; } .rline.sitrep b.sr { color: #93c5fd; }
.interim { color: #93c5fd; font-style: italic; min-height: 16px; font-size: 11.5px; }
.hint { background: #10243c; border: 1px solid #1d4d85; border-radius: 5px; padding: 5px 8px; margin: 6px 10px; font-size: 11.5px; color: #bcd6f4; }
.sitrepbox { background: #0e1a2a; border-left: 3px solid #3b82f6; padding: 6px 8px; margin: 4px 0; border-radius: 0 4px 4px 0; white-space: normal; } .sitrepbox .hd { font-weight: 800; color: #93c5fd; } .sitrepbox .rk { color: var(--mut); font-size: 11px; }
.calllog td { font-size: 11.5px; }#ctxmenu { position: fixed; z-index: 7000; min-width: 200px; background: #101c2b; border: 1px solid var(--blue); border-radius: 6px; padding: 4px; box-shadow: 0 6px 20px #000a; } #ctxmenu.hidden { display: none; } #ctxmenu b { padding: 3px 8px; display: inline-block; } #ctxmenu div { padding: 6px 10px; cursor: pointer; border-radius: 4px; } #ctxmenu div:hover { background: #1d5fd1; }
.rm { border-left: 3px solid #334; padding-left: 5px; } .rm-SITREP { border-color: #3b82f6; } .rm-COMCENCOM { border-color: #22c55e; } .rm-INTERCAD { border-color: #f59e0b; } .rm-MSU { border-color: #7dd3fc; color: #9fb4cc; } .rm-DISPOSITION { border-color: #ef4444; }

/* ---------- Dispatch desk: light "Fire CAD" layout (event details | map | monitors) ---------- */
#dleft { grid-column: 1; grid-row: 2; display: none; }
#app[data-desk="dispatch"] { grid-template-columns: minmax(400px, 29vw) 5px 1fr 5px minmax(520px, 37vw); }
#app[data-desk="dispatch"] #dleft { display: block; }
#app[data-desk="dispatch"] #splitL { display: block; grid-column: 2; pointer-events: none; }
.cad { background: #eef2f5; color: #1d2b3a; font-size: 12px; }
.cad .mut { color: #66788a; } .cad .note { color: #b45309; } .cad .small { font-size: 11px; } .cad .t { color: #66788a; margin-right: 5px; }
.cad .cad-title { background: #00507d; color: #fff; padding: 9px 12px; font-weight: 800; font-size: 15px; letter-spacing: .05em; position: sticky; top: 0; z-index: 5; } .cad .cad-title .mut { color: #9cc4e0; font-weight: 400; margin-left: 8px; font-size: 11px; }
.cad .cad-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #fff; border-bottom: 1px solid #c9d3dc; flex-wrap: wrap; position: sticky; top: 36px; z-index: 6; } .cad .cad-bar label { color: #44566a; font-size: 11.5px; }
.cad .cad-bar #bDisp { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 7px 14px; }
.disp-top { background: #b7d4ec; border-bottom: 2px solid #00507d; position: sticky; top: 76px; z-index: 5; }
.disp-top label { color: #17436b; font-weight: 700; }
.icm { width: min(520px, 94vw) !important; } .icm-body { grid-template-columns: 1fr !important; }
.kcm .pri { background: #1d5fd1; color: #fff; border-color: #3b82f6; }
.cad .cad-h { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-weight: 700; color: #17436b; background: linear-gradient(#f2f9ff, #cfe5f6); border-top: 1px solid #a9c8e0; border-bottom: 1px solid #a9c8e0; }
.cad .evno { background: #17436b; color: #fff; border-radius: 3px; padding: 0 7px; font-size: 11px; }
.cad .cad-sub { font-weight: 700; color: #17436b; margin: 4px 0; } .cad .cad-pad { padding: 6px 10px; }
.cad .cad-form { padding: 8px 10px; background: #fff; } .cad .frow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .cad .frow label { width: 62px; color: #44566a; font-size: 11.5px; flex: none; } .cad .frow input, .cad .frow select { flex: 1; }
.cad .cad-scroll { overflow: auto; background: #fff; border-bottom: 1px solid #c9d3dc; }
.cad button, .cad select, .cad input, .cad textarea { background: #f4f6f8; color: #1d2b3a; border: 1px solid #b3bfca; border-radius: 3px; padding: 3px 7px; } .cad input, .cad textarea { background: #fff; }
.cad input[readonly] { background: #f0f3f6; color: #44566a; } .cad button:hover { background: #e2eaf1; } .cad button:disabled, .cad select:disabled, .cad input:disabled { opacity: .5; }
.cad button.cb { padding: 1px 8px; font-size: 11px; } .cad button.cb.on { background: #17436b; color: #fff; }
.cad button.pri { background: #1d6fd1; color: #fff; border-color: #1558a8; } .cad button.go { background: #1a8a46; color: #fff; border-color: #14703a; } .cad button.dng { background: #b42323; color: #fff; border-color: #8c1a1a; }
.cad table { width: 100%; } .cad th { background: #dde6ee; color: #2c445a; font-size: 11px; position: sticky; top: 0; z-index: 1; border-bottom: 1px solid #b3bfca; } .cad td { border-top: 1px solid #dde3e8; color: #1d2b3a; max-width: 220px; } .cad td.wrap { white-space: normal; overflow: visible; }
.cad .evt td .sub { font-size: 10.5px; color: #44566a; white-space: normal; }
.cad tr.evr.pending td { background: #fdf0c8; } .cad tr.evr.assigned td { background: #dcecf9; } .cad tr.evr.held td { background: #e8e0f5; } .cad tr.evr.closed td { background: #e9ebed; color: #7d8a96; }
.cad tr.click:hover td, .cad tr.evr:hover td { filter: brightness(.96); cursor: pointer; } .cad tr.sel td { outline: none; box-shadow: inset 0 1px 0 #1d6fd1, inset 0 -1px 0 #1d6fd1; background: #bcd9f3 !important; }
.cad td.pri1 { color: #c2410c; font-weight: 700; } .cad td.pri2 { color: #b45309; } .cad td.pri3 { color: #15803d; } .cad td.alr { color: #b91c1c; font-weight: 700; }
.cad tr.calling td { animation: calling 1s infinite; } @keyframes calling { 50% { background: #ffd4a8; } }
.cad .lt { color: #dc2626; animation: pulse 0.8s infinite; }
.cad .s-Available { color: #15803d; } .cad .s-Alerting, .cad .s-Mobilising { color: #b45309; } .cad .s-Responding { color: #1d4ed8; } .cad .s-On\ scene, .cad .s-Committed { color: #c2410c; } .cad .s-Returning { color: #6d28d9; } .cad .s-Out\ of\ service, .cad .s-Unavailable { color: #6b7280; }
.cad .chip { background: #d7e0e8; color: #1d2b3a; } .cad .banner { background: #fde2e2; border: 1px solid #e08a8a; color: #5a1010; margin: 6px 10px; } .cad .banner.warn { background: #fff0c2; border-color: #d9a520; color: #5a4100; }
.cad .log div { border-top: 1px solid #dde3e8; } .cad .bar { background: #cfd9e2; } .cad details summary { cursor: pointer; font-weight: 700; color: #17436b; padding: 4px 0; }
.cad tr.rm-SITREP td { border-left: 3px solid #3b82f6; } .cad tr.rm-COMCENCOM td { border-left: 3px solid #22c55e; } .cad tr.rm-INTERCAD td { border-left: 3px solid #f59e0b; } .cad tr.rm-MSU td { border-left: 3px solid #7dd3fc; color: #52667a; } .cad tr.rm-DISPOSITION td { border-left: 3px solid #ef4444; }
.cad .form label, .cad label { color: #44566a; } .cad .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ---------- blue-tint theme across the whole app ---------- */
body { background: #dfe7ee; }
#top.cadtop { background: #00507d; color: #fff; border-bottom: 1px solid #003c5e; } #top.cadtop .brand small, #top.cadtop .small { color: #b7d6ec; }
#top.cadtop button { background: #e9f1f7; color: #0b3a5a; border-color: #8fb4cf; } #top.cadtop button:hover { background: #fff; } #top.cadtop button.pri { background: #1d8fe0; color: #fff; border-color: #6cc0ff; }
#top.cadtop .chip { background: #0a6aa3; color: #fff; } #top.cadtop .mut { color: #b7d6ec; }
.cad h3 { background: linear-gradient(#f2f9ff, #cfe5f6); color: #17436b; border-color: #a9c8e0; } .cad h3 .cnt { background: #17436b; color: #fff; }
.cad .sec, .cad .card { background: transparent; color: #1d2b3a; } .cad .card { background: #fff; border-color: #b3bfca; }
.cad .call { border-top: 1px solid #dde3e8; } .cad .call.ring { background: #ffd9d0; } .cad .call .chip { background: #d7e0e8; color: #1d2b3a; }
.cad .transcript { background: #fff; border-color: #b3bfca; color: #1d2b3a; } .cad .transcript .you b { color: #1d6fd1; } .cad .transcript .caller b { color: #b42323; }
.cad .form label { color: #44566a; }
#bottom.cad .rlog { background: #fff; } #bottom.cad .rline { border-top: 1px solid #e3e8ed; color: #1d2b3a; text-transform: uppercase; font: 11.5px/1.45 Consolas, "Courier New", monospace; letter-spacing: .02em; } #bottom.cad .rline .cs { color: #0b3a5a; font-weight: 800; } #bottom.cad .rline.me .cs { color: #1d6fd1; } #bottom.cad .rline.status { color: #66788a; }
#bottom.cad .rline.sitrep { background: #eaf3fb; border-left: 3px solid #1d6fd1; } #bottom.cad .rline.sitrep b.sr { color: #0b3a5a; } #bottom.cad .rline .t, #bottom.cad .rline .ch { color: #7a8c9e; }
#bottom.cad .ctl, #bottom.cad #cuq { background: #eef2f5; border-color: #b3bfca; } #bottom.cad .mut { color: #66788a; } #bottom.cad .interim { color: #1d6fd1; }
#bottom.cad .cu { background: #fff; border-color: #b3bfca; color: #1d2b3a; } #bottom.cad .cu.priority { background: #ffe1db; border-color: #dc2626; } #bottom.cad .cu .msg { color: #2c3e50; } #bottom.cad .cu .who { color: #0b3a5a; }
#bottom.cad .hint, #bottom.cad .small.say { color: #17436b; }
#mapcard { background: rgba(241,246,250,.97); color: #1d2b3a; border-color: #a9c8e0; } #mapcard .kv span:nth-child(odd) { color: #66788a; }
#maptools button { background: #e9f1f7; color: #0b3a5a; border-color: #8fb4cf; }

/* ---------- stronger blue tint (no white panels) + remarks tab ---------- */
body, .cad { background: #b9d3e8; } .cad { color: #10283f; }
.cad .cad-bar, .cad .cad-form, .cad .cad-scroll { background: #d3e5f4; border-color: #8fb4cf; }
.cad button, .cad select { background: #e4f0fa; border-color: #7fa6c4; color: #10283f; } .cad button:hover { background: #f2f8fd; }
.cad input, .cad textarea { background: #edf5fb; border-color: #7fa6c4; } .cad input[readonly] { background: #cfe1f0; }
.cad th { background: #a9c9e2; color: #0b3a5a; border-color: #7fa6c4; } .cad td { border-top-color: #aac6dc; }
.cad tr.evr.pending td { background: #f6e7b0; } .cad tr.evr.assigned td { background: #c3dcf0; } .cad tr.evr.held td { background: #d6cdea; } .cad tr.evr.closed td { background: #c4d2de; }
.cad tr.sel td { background: #8fc0ea !important; }
.cad .banner { margin: 6px 10px; } .cad .chip { background: #a9c9e2; color: #0b3a5a; }
#bottom.cad .rlog, #bottom.cad .cu, #mapcard, .cad .transcript { background: #dcebf7; border-color: #8fb4cf; }
#bottom.cad .ctl, #bottom.cad #cuq { background: #c3dbee; border-color: #8fb4cf; } #bottom.cad .rline { border-top-color: #b4cde0; }
#bottom.cad .rline.sitrep { background: #c4def3; } #bottom.cad .cu.priority { background: #f6d2c8; }
#mapcard { background: rgba(207,226,242,.97); } #maptools button { background: #d3e5f4; }
#top.cadtop button { background: #cfe3f3; }
.tabb { background: #b4cfe4; color: #0b3a5a; border: 1px solid #7fa6c4; border-radius: 3px 3px 0 0; padding: 2px 10px; font-weight: 700; text-transform: none; letter-spacing: 0; } .tabb.on { background: #00507d; color: #fff; border-color: #00507d; }
#remlog { overflow-y: auto; } #remlog table { width: 100%; } #remlog td { padding: 3px 6px; border-top: 1px solid #aac6dc; color: #10283f; vertical-align: top; } #remlog td.wrap { white-space: normal; }
.remhead { padding: 5px 8px; background: #a9c9e2; color: #0b3a5a; position: sticky; top: 0; }
#remlog tr.rm-SITREP td { border-left: 3px solid #1d6fd1; } #remlog tr.rm-COMCENCOM td { border-left: 3px solid #22c55e; } #remlog tr.rm-INTERCAD td { border-left: 3px solid #f59e0b; } #remlog tr.rm-MSU td { border-left: 3px solid #5aa8d6; color: #3d5870; } #remlog tr.rm-NOTE td { border-left: 3px solid #8b5cf6; } #remlog tr.rm-DISPOSITION td { border-left: 3px solid #ef4444; }
#remlog.hidden, #rlog.hidden { display: none !important; }
#remlog { display: flex; flex-direction: column; } #remlog .jl { flex: 1; padding: 2px 8px; font: 11.5px/1.45 Consolas, "Courier New", monospace; text-transform: uppercase; color: #10283f; } #remlog .jr { padding: 1px 0; border-bottom: 1px dotted #9dbbd2; white-space: pre-wrap; word-break: break-word; } #remlog .jr .t { color: #00507d; margin-right: 10px; font-weight: 700; }
#remlog .jl-SITREP { background: #c4def3; } #remlog .jl-CALL { font-weight: 700; } #remlog .jl-MSU { color: #3d5870; } #remlog .jl-NOTE, #remlog .jl-DISPOSITION { color: #6b21a8; } #remlog .jl-INTERCAD { color: #a15c00; }
#remlog .jadd { padding: 4px 8px; position: sticky; bottom: 0; background: #b4cfe4; }
.mk .stnimg { display: block; width: 22px; height: 22px; filter: drop-shadow(0 1px 2px #000a); } .mk.station.alert .stnimg { animation: truckflash .7s infinite; } .mk.station.oos .stnimg { filter: grayscale(1) opacity(.6); }
.mk .truckimg { display: block; height: auto; filter: drop-shadow(0 1px 3px #000a); } .mk.appliance.scene .truckimg { filter: drop-shadow(0 0 4px #f97316); } .mk.appliance.out .truckimg { filter: grayscale(1) opacity(.7); } .mk.appliance.moving svg, .mk.appliance.moving .truckimg { animation: none; }

/* icons scale with zoom so they are not huge when zoomed out */
#map { --ks: 1; }
#map[data-zoom="5"] { --ks: 0.35; }
#map[data-zoom="6"] { --ks: 0.4; }
#map[data-zoom="7"] { --ks: 0.5; }
#map[data-zoom="8"] { --ks: 0.6; }
#map[data-zoom="9"] { --ks: 0.7; }
#map[data-zoom="10"] { --ks: 0.85; }
#map[data-zoom="11"] { --ks: 1; }
#map[data-zoom="12"] { --ks: 1.1; }
#map[data-zoom="13"] { --ks: 1.2; }
#map[data-zoom="14"], #map[data-zoom="15"], #map[data-zoom="16"], #map[data-zoom="17"], #map[data-zoom="18"] { --ks: 1.3; }
#map[data-zoom="4"], #map[data-zoom="3"] { --ks: 0.3; }
.mk .stnimg { width: 22px; height: 22px; }
.mk .truckimg { width: calc(54px * var(--ts, 1)) !important; }
.mk b { font-size: 10px; }

#map[data-zoom="3"] { --ts: 0.2; }
#map[data-zoom="4"] { --ts: 0.2; }
#map[data-zoom="5"] { --ts: 0.22; }
#map[data-zoom="6"] { --ts: 0.25; }
#map[data-zoom="7"] { --ts: 0.3; }
#map[data-zoom="8"] { --ts: 0.4; }
#map[data-zoom="9"] { --ts: 0.5; }
#map[data-zoom="10"] { --ts: 0.65; }
#map[data-zoom="11"] { --ts: 0.8; }
#map[data-zoom="12"] { --ts: 1; }
#map[data-zoom="13"] { --ts: 1.1; }
#map[data-zoom="14"] { --ts: 1.2; }
#map[data-zoom="15"], #map[data-zoom="16"], #map[data-zoom="17"], #map[data-zoom="18"] { --ts: 1.3; }

.row.wrap, .utypes { flex-wrap: wrap; }
#kcm { position: fixed; inset: 0; z-index: 6000; background: rgba(0,0,0,.38); display: flex; align-items: center; justify-content: center; }
#kcm.hidden { display: none; }
.kcm { width: min(860px, 96vw); background: #e4e4e4; color: #111; border: 2px solid #5a5a5a; font: 12px Tahoma, "Segoe UI", sans-serif; box-shadow: 6px 6px 18px #0008; }
.kcm-tb { background: linear-gradient(#3a6ea5, #2b5480); color: #fff; padding: 5px 8px; font-weight: 700; display: flex; align-items: center; }
.kcm-tb button { background: #c44; border-color: #922; color: #fff; padding: 0 8px; }
.kcm-body { display: grid; grid-template-columns: 1fr 280px; gap: 10px; padding: 10px; }
.kcm-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.kcm-r { display: inline-flex; gap: 5px; align-items: center; color: #111; }
.kcm select, .kcm input, .kcm textarea, .kcm button { background: #fff; color: #111; border: 1px solid #7a7a7a; }
.kcm textarea { width: 100%; }
.kcm button { background: #dfdfdf; padding: 4px 14px; }
.kcm button:hover { background: #efefef; }
.kcm-desc { color: #444; font-size: 11px; }
.kcm-ev { margin-top: 10px; padding: 6px; background: #d7e6f4; border: 1px solid #8db0cc; }
.kcm-scroll { max-height: 280px; overflow: auto; background: #fff; border: 1px solid #9a9a9a; }
.kcm-tbl { width: 100%; } .kcm-tbl th { color: #333; background: #d0d0d0; } .kcm-tbl td { color: #111; border-top: 1px solid #ccc; }
.kcm-tbl tr.sel td { background: #c5dff3; } .kcm-tbl tr { cursor: pointer; }
.kcm-sel { margin-top: 6px; font-size: 11px; color: #333; }
.kcm-ft { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-top: 1px solid #bbb; background: #dcdcdc; }