/* CO-SYNE Dispatch: network operations and dispatch console. */
body.dispatch { overflow: hidden; }
.login { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(1100px 700px at 30% 10%, #22262c 0%, #0e1013 60%); }
.login-card { width: min(420px, calc(100% - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.app { position: fixed; inset: 0; display: grid; grid-template-columns: 60px 1fr; grid-template-rows: 54px 1fr; }
.top { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 0 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; min-width: 250px; }
.brand b { display: block; font-size: .98rem; }
.brand span { font-size: .75rem; color: var(--muted); }
.kpis { display: flex; gap: 6px; flex: 1; overflow-x: auto; }
.kpi { display: flex; flex-direction: column; justify-content: center; padding: 3px 12px; border-left: 1px solid var(--line); min-width: 96px; }
.kpi b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.kpi span { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.kpi.alert b { color: var(--danger); } .kpi.ok b { color: var(--ok); } .kpi.warn b { color: var(--warn); }
.top-right { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.rail { background: var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 4px; }
.rail button { width: 44px; height: 44px; border-radius: 10px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; position: relative; }
.rail button .ico { width: 21px; height: 21px; }
.rail button:hover { background: var(--panel-2); color: var(--text); }
.rail button.on { background: var(--panel-3); color: var(--brand-2); }
.rail button.on::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--brand); }
.rail .badge-n { position: absolute; top: 3px; right: 3px; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 3px; }
.main { overflow: hidden; position: relative; min-width: 0; }
.ops { display: grid; height: 100%; grid-template-columns: 340px 1fr 420px; grid-template-rows: 1fr 210px; }
.col { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); }
.col-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); gap: 8px; }
.col-body { flex: 1; overflow: auto; padding: 10px; }
.mapcol { position: relative; border-right: 1px solid var(--line); }
#d-map { position: absolute; inset: 0; }
.detail { grid-row: 1 / span 2; grid-column: 3; border-right: 0; border-left: 1px solid var(--line); }
.feed { grid-column: 1 / span 2; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 380px; min-height: 0; background: var(--panel); }
.feed > div { min-height: 0; display: flex; flex-direction: column; }
.feed .events { border-right: 1px solid var(--line); }
.ev-list { flex: 1; overflow: auto; font-family: var(--mono); font-size: .74rem; padding: 4px 12px; }
.ev-list div { padding: 2px 0; display: flex; gap: 12px; white-space: nowrap; color: var(--muted); }
.ev-list div b { color: var(--text); font-weight: 500; min-width: 190px; }
.ev-list div.new { animation: flashrow 1.2s ease-out; }
@keyframes flashrow { from { background: var(--brand-bg); } }
.q-item { border: 1px solid var(--line); border-left: 4px solid var(--faint); border-radius: 8px; padding: 9px 11px; margin-bottom: 8px; cursor: pointer; background: var(--panel-2); }
.q-item:hover { border-color: var(--line-2); }
.q-item.sel { outline: 2px solid var(--brand); outline-offset: -1px; }
.q-item.p1 { border-left-color: var(--danger); } .q-item.p2 { border-left-color: var(--warn); } .q-item.p3 { border-left-color: var(--info); }
.q-item.stop { border-left-color: var(--brand); } .q-item.stop.failed { border-left-color: var(--danger); } .q-item.done { opacity: .6; }
.q-item header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 3px; }
.q-item .small { color: var(--muted); }
.tabs { display: flex; gap: 2px; }
.tabs button { border: 0; background: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .84rem; }
.tabs button.on { background: var(--panel-3); color: var(--text); }
.drop { background: #000; border-radius: 8px; overflow: hidden; }
.drop .tiles { grid-template-columns: 1fr 1fr; gap: 2px; }
.drop .tile { border-radius: 0; }
.section { margin-top: 14px; }
.legend { position: absolute; z-index: 500; left: 10px; bottom: 10px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; font-size: .74rem; display: flex; gap: 12px; }
.leaflet-container { background: #1a1d22; font-family: var(--font); }
:root:not([data-theme="day"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.35); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); }
.pulse-marker { width: 18px; height: 18px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; animation: pulse 1.4s infinite; }
.unit-marker { padding: 2px 6px; border-radius: 5px; font: 700 10px/1.3 var(--font); color: #111; white-space: nowrap; border: 1px solid rgba(0, 0, 0, .4); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); transform: translate(-50%, -50%); display: inline-block; }
.center-marker { width: 14px; height: 14px; transform: rotate(45deg); background: var(--brand); border: 2px solid #fff; }
.page { height: 100%; overflow: auto; padding: 18px 22px; }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat b { font-size: 1.6rem; display: block; font-variant-numeric: tabular-nums; }
.stat span { font-size: .78rem; color: var(--muted); }
.unmute { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 700; cursor: pointer; }
@media (max-width: 1300px) { .ops { grid-template-columns: 300px 1fr 360px; } .feed { grid-template-columns: 1fr 300px; } }

:root[data-theme="day"] .login { background: linear-gradient(180deg, #eaf3fc 0%, #f3f3f3 100%); }
:root[data-theme="day"] .leaflet-container { background: #f2efe9; }