/* CivicOps map design. Runtime and feature labels distinguish synthetic geography and shared incident locations. */
.map-console { --map-ink:#e7f1f4; --map-muted:#adc2cd; --map-line:#35505e; color:var(--map-ink); background:#0d1b25; border:1px solid #35505e; border-radius:18px; overflow:hidden; box-shadow:0 24px 60px #0002; color-scheme:dark; }
.map-console [hidden] { display:none !important; }
.map-console h1,.map-console h2,.map-console h3 { color:var(--map-ink); }
.map-console p,.map-console .hint { color:var(--map-muted); }
.map-console .eyebrow { color:#9ae4d0; font-size:9px; letter-spacing:.16em; }
.map-console :where(button,a,input,select,textarea,[tabindex]):focus-visible { outline:3px solid #ffe5a0; outline-offset:3px; }
.map-head { display:flex; justify-content:space-between; gap:20px; padding:25px 27px 21px; border-bottom:1px solid var(--map-line); background:linear-gradient(110deg,#17313a,#10212d 62%); }
.map-head h1 { font-size:32px; margin:7px 0 5px; letter-spacing:-1.1px; }
.map-head p { margin:0; font-size:12px; }
.map-head-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; align-items:center; max-width:460px; }
.map-console button { color:var(--map-ink); background:#19313d; border:1px solid #617c88; border-radius:7px; min-height:36px; font-size:11px; font-weight:650; padding:8px 11px; }
.map-console button:hover { background:#274755; border-color:#9de4d3; }
.map-console button.map-primary { color:#112d29; background:#c5f18e; border-color:#c5f18e; }
.map-console button.map-primary:hover { background:#dbffaa; }
.map-console button:disabled { opacity:.6; }
.map-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; font-size:9px; font-weight:750; letter-spacing:.07em; line-height:1.4; white-space:nowrap; color:#def29f; background:#293c26; border:1px solid #627d3b; border-radius:5px; }
.map-badge.muted { color:#c7dae4; background:#203642; border-color:#506c7b; }
.map-badge.warning { color:#ffe0a0; background:#433b23; border-color:#8c7641; }
.map-toolbar { display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--map-line); background:#142734; }
.map-search { display:flex; gap:7px; flex:1; max-width:440px; }
.map-console input,.map-console select,.map-console textarea { color:#e7f1f4; background:#0f222e; border:1px solid #7b97a4; border-radius:7px; padding:8px 10px; min-height:36px; font-size:11px; }
.map-console input::placeholder,.map-console textarea::placeholder { color:#afc1cc; }
.map-console label { font-size:10px; color:#bdd0d9; margin:0; }
.map-toolbar > label { display:flex; gap:9px; align-items:center; }
.map-toolbar select { width:145px; }
.map-sync { margin-left:auto; color:#b7ced8; font-size:10px; display:flex; gap:7px; align-items:center; }
.map-sync-dot { width:6px; height:6px; border-radius:50%; background:#a9bdc7; }
.map-sync.connected .map-sync-dot { background:#9de4b0; box-shadow:0 0 0 4px #9de4b018; }
.map-grid { height:665px; display:grid; grid-template-columns:220px minmax(0,1fr) 264px; min-height:665px; }
.map-rail { min-height:0; overflow:auto; scrollbar-width:thin; border-right:1px solid var(--map-line); background:#112430; padding:20px 15px; min-width:0; }
.map-rail h2 { font-size:13px; letter-spacing:0; margin:0 0 14px; display:flex; justify-content:space-between; align-items:center; }
.map-count { border:1px solid #456574; border-radius:5px; padding:1px 6px; color:#d5e7ee; font-size:10px; }
.map-layer-options { display:grid; gap:4px; margin-bottom:24px; }
.map-layer { display:flex; align-items:center; gap:9px; padding:6px 0; min-height:32px; }
.map-layer input { width:18px; height:18px; min-height:18px; padding:0; margin:0; flex-shrink:0; accent-color:#a6e1be; }
.map-layer label { font-size:11px; flex:1; cursor:pointer; }
.map-layer .map-count { color:#bed0da; }
.map-layer-key { height:9px; width:9px; border:1px solid #9fd5c9; background:#325953; border-radius:2px; }
.map-layer-key.cases { background:#94c3fc; border-color:#c4ddfd; }
.map-layer-key.crews { background:#c5f18e; border-radius:50%; border-color:#e7ffc3; }
.map-layer-key.hazards { background:#ffb57d; border-color:#ffd2b3; transform:rotate(45deg); }
.map-layer-key.assets { background:#aaa3e2; border-color:#d4cef5; }
.map-priority-head { display:flex; justify-content:space-between; gap:5px; align-items:center; margin:0 0 10px; }
.map-priority-head h2 { margin:0; }
.map-priority-head span { font-size:9px; color:#ffc4b1; }
.map-case-list { display:grid; gap:6px; max-height:295px; overflow:auto; padding:3px 3px 5px; scrollbar-width:thin; }
.map-console .map-case-row { display:block; width:100%; text-align:left; min-height:63px; padding:9px; background:#172e3b; border:1px solid #385462; font-weight:400; }
.map-console .map-case-row.selected { border-color:#bdeaa2; box-shadow:inset 2px 0 #bdeaa2; }
.map-case-row > span:first-child { display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:9px; font-weight:750; color:#c9e2ec; }
.map-case-row strong { display:block; margin:4px 0 2px; color:#e5eef3; font-size:10px; line-height:1.5; font-weight:550; }
.map-case-row small { font-size:9px; color:#a8c3d1; }
.map-priority-word { color:#ffc9b9; }
.map-priority-word.high { color:#ffe0a0; }
.map-priority-word.medium { color:#d9d1ff; }
.map-priority-word.low { color:#b8e6fc; }
.map-rail details { margin-top:18px; }
.map-rail summary { background:transparent; padding:6px 0; color:#cce0e8; font-size:10px; border:none; min-height:30px; }
.map-ward-list { list-style:none; padding:0; margin:6px 0 0; display:grid; gap:5px; }
.map-ward-list button { width:100%; text-align:left; font-size:10px; }
.map-stage { height:665px; position:relative; min-width:0; background:#0d2534; }
.ops-map { height:665px; width:100%; background-color:#102b39; background-image:linear-gradient(90deg,#a5c8dc08 1px,transparent 1px),linear-gradient(#a5c8dc08 1px,transparent 1px),radial-gradient(ellipse at 28% 50%,#204438,#0d293a 75%); background-size:46px 46px,46px 46px,100% 100%; font-family:inherit; }
.map-context { position:absolute; top:18px; left:18px; z-index:650; pointer-events:none; max-width:230px; padding:10px 13px; background:#0d2131e8; border:1px solid #496576; border-radius:7px; }
.map-context strong { display:block; color:#f0f6f7; font-size:11px; letter-spacing:.05em; margin-bottom:3px; }
.map-context span { font-size:9px; color:#b7d0dd; letter-spacing:.06em; }
.map-outline-label { position:absolute; bottom:38px; left:16px; z-index:650; pointer-events:none; color:#c4d8e2; background:#0d2131e8; border:1px solid #486372; border-radius:5px; padding:5px 8px; font-size:9px; }
.map-ward-card { position:absolute; z-index:700; top:96px; left:18px; width:222px; padding:14px; background:#122b39f5; border:1px solid #bdeaa2; border-radius:8px; box-shadow:0 12px 30px #0004; pointer-events:none; }
.map-ward-card h3 { font-size:15px; margin:5px 0 12px; }
.map-ward-card .ward-numbers { display:flex; gap:22px; }
.ward-numbers strong { display:block; font-size:23px; font-weight:650; color:#f0f7f6; }
.ward-numbers span { font-size:9px; color:#b8cfda; }
.map-ward-card p { font-size:9px; margin:12px 0 0; }
.map-inspector { max-height:665px; overflow-y:auto; scrollbar-width:thin; background:#112430; padding:20px 16px; border-left:1px solid var(--map-line); min-width:0; overflow-wrap:anywhere; }
.map-inspector h2 { font-size:17px; margin:8px 0 10px; line-height:1.45; letter-spacing:-.3px; }
.map-inspector h3 { font-size:11px; color:#d1e3eb; margin:20px 0 10px; }
.map-inspector p { font-size:11px; line-height:1.7; }
.map-inspector .map-badge { margin:0 4px 7px 0; }
.map-snapshot { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:16px 0; border-top:1px solid var(--map-line); border-bottom:1px solid var(--map-line); }
.map-snapshot strong { display:block; color:#eef8f4; font-size:26px; font-weight:630; letter-spacing:-.7px; }
.map-snapshot span { color:#bacfda; font-size:9px; }
.map-hazard-list { display:grid; gap:9px; }
.map-hazard-item { border-left:2px solid #d9a071; padding:1px 0 1px 10px; }
.map-hazard-item strong { display:block; font-size:10px; font-weight:600; color:#e5d4c5; }
.map-hazard-item span { display:block; font-size:9px; color:#acc2ce; margin-top:4px; }
.map-detail-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px 0; margin:8px 0 15px; border-block:1px solid var(--map-line); font-size:10px; color:#dceaf0; }
.map-detail-meta span { display:block; color:#aec5d0; font-size:9px; margin-bottom:4px; }
.map-console .map-full-button { width:100%; margin-top:7px; }
.map-nearest { border-top:1px solid var(--map-line); margin-top:18px; padding-top:17px; }
.map-nearest h3 { margin:0 0 8px; }
.map-nearest p { font-size:10px; margin-bottom:8px; }
.map-nearest-card { padding:12px; background:#1b3542; border:1px solid #577a77; border-radius:7px; margin:10px 0; }
.map-nearest-card strong { font-size:11px; display:block; color:#d7f3c8; }
.map-nearest-card span { font-size:10px; color:#c1d5df; display:block; margin-top:5px; }
.map-nearest-card ul { padding-left:15px; color:#afc7d2; font-size:9px; line-height:1.7; margin:8px 0 0; }
.map-nearest select { margin:8px 0; }
.map-nearest label { margin:10px 0 6px; }
.map-nearest textarea { width:100%; min-height:65px; }
.map-nearest .map-decision { font-size:10px; color:#d8edc7; margin-top:10px; }
.map-error { color:#ffd1c4; background:#432c29; border:1px solid #b78778; margin:12px 18px; padding:10px 12px; border-radius:6px; font-size:11px; }
.map-empty { color:#b8ced9; font-size:11px; padding:8px 1px; }
.map-footer { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:12px 18px; background:#142734; border-top:1px solid var(--map-line); font-size:9px; color:#b7ced8; }
.map-legend { display:flex; gap:13px; flex-wrap:wrap; align-items:center; }
.map-legend > span { display:flex; align-items:center; gap:5px; }
.map-legend-icon { width:14px; height:14px; }
.map-footer-note { margin-left:auto; max-width:370px; }
.map-privacy { padding:13px 20px; background:#0d1d28; border-top:1px solid #294655; font-size:9px; line-height:1.65; color:#b4c9d3; }
.map-privacy strong { color:#d6e9ef; }
.map-locked { padding:35px; }
.map-locked h2 { font-size:24px; }
.map-console .leaflet-control-zoom { border:1px solid #658090 !important; box-shadow:0 3px 10px #0002; margin-top:18px; margin-right:18px; }
.map-console .leaflet-control-zoom a { background:#102a39; border-color:#526e7d; color:#e9f2f5; font-size:21px; line-height:34px; height:34px; width:34px; }
.map-console .leaflet-control-zoom a:hover { background:#2b4655; }
.map-console .leaflet-control-attribution { background:#0c2331e8; color:#c6dce6; font-size:8px; max-width:90%; padding:3px 6px; }
.map-console .leaflet-control-attribution a { color:#d6eaf1; }
.map-console .leaflet-control-scale-line { background:#17323cbd; border-color:#bacfd7; color:#d6e9ef; font-size:9px; text-shadow:none; }
.map-console .leaflet-tooltip { background:#142d3df5; border:1px solid #67848e; color:#e4f0f5; font-size:10px; box-shadow:0 3px 12px #0004; }
.map-console .leaflet-tooltip-top:before { border-top-color:#67848e; }
.map-console .leaflet-popup-content-wrapper,.map-console .leaflet-popup-tip { background:#152f3c; color:#e4f0f5; }
.map-case-icon,.map-crew-icon,.map-hazard-icon,.map-asset-icon,.map-ward-label { background:transparent; border:0; }
.map-case-symbol { overflow:visible; filter:drop-shadow(0 2px 3px #0008); }
.map-case-symbol .symbol-fill { stroke:#182e3c; stroke-width:2; fill:#b9ddfa; }
.map-case-symbol.priority-urgent .symbol-fill { fill:#ffb099; }
.map-case-symbol.priority-high .symbol-fill { fill:#f4d28c; }
.map-case-symbol.priority-medium .symbol-fill { fill:#c4b8f4; }
.map-case-symbol.priority-low .symbol-fill { fill:#95d4ed; }
.map-case-symbol text { font-size:11px; font-weight:900; fill:#142d3d; text-anchor:middle; dominant-baseline:central; }
.map-case-status { position:absolute; right:-2px; bottom:-3px; width:14px; height:14px; display:grid; place-items:center; border:1px solid #83a4b7; border-radius:50%; color:#edf7f5; background:#163344; font-size:9px; font-weight:850; box-shadow:0 1px 3px #0005; }
.map-case-icon.status-pendingapproval .map-case-status { border-radius:3px; color:#ffe2ba; border-color:#dca66f; }
.map-case-icon.status-approved .map-case-status,.map-case-icon.status-assigned .map-case-status { color:#d4fbb7; border-color:#9dcc7c; }
.map-case-icon.status-inprogress .map-case-status { border-radius:3px; color:#f7e4a2; border-color:#d4bc6b; }
.map-case-icon.status-resolved,.map-case-icon.status-closed { opacity:.55; }
.map-case-icon.status-resolved .symbol-fill,.map-case-icon.status-closed .symbol-fill { stroke:#e6f2f8; stroke-dasharray:3 2; }
.map-case-icon.selected .map-case-symbol { filter:drop-shadow(0 0 5px #d7ffa7); }
.map-console .marker-cluster { border:2px solid #8abde1; border-radius:50%; background:#234f6bed; box-shadow:0 0 0 5px #8abde11c,0 3px 8px #0005; color:#eef8ff; }
.map-console .marker-cluster div { margin:0; width:38px; height:38px; display:grid; place-items:center; background:transparent; }
.map-console .marker-cluster span { line-height:1; font-size:13px; font-weight:750; }
.map-crew-symbol { width:31px; height:31px; display:grid; place-items:center; color:#e5f6dd; background:#17383c; border:2px solid #c4ed9e; border-radius:50%; font-size:9px; font-weight:850; box-shadow:0 0 0 3px #c4ed9e20,0 3px 8px #0006; }
.map-crew-icon.busy .map-crew-symbol { border-color:#eac88d; color:#fff2d5; box-shadow:0 0 0 3px #eac88d20; }
.map-crew-icon.unavailable .map-crew-symbol { border-color:#aab8c1; color:#dce4e9; }
.map-crew-icon.stale .map-crew-symbol { color:#e8efeb;background:#18303c;border-color:#7c9187;border-style:dashed;box-shadow:none; }
.map-hazard-symbol { width:32px; height:32px; background:#633c29; color:#ffd8b1; border:2px solid #f5b37c; transform:rotate(45deg); border-radius:7px; display:grid; place-items:center; box-shadow:0 3px 8px #0005; }
.map-hazard-symbol span { transform:rotate(-45deg); font-size:13px; font-weight:900; }
.map-asset-symbol { width:24px; height:24px; border:1px solid #b6addd; border-radius:4px; background:#343554; color:#e0dbf4; display:grid; place-items:center; font-size:11px; font-weight:750; }
.map-ward-label { pointer-events:none; }
.map-ward-label span { display:block; text-align:center; color:#c3dccbbf; font-size:10px; font-weight:650; letter-spacing:.09em; line-height:1.6; text-shadow:0 2px 4px #102a34,0 0 6px #102a34; }
.map-ward-label small { display:block; font-size:8px; font-weight:400; letter-spacing:.06em; }
.civic-map-heat { position:absolute; pointer-events:none; opacity:.83; }
.civic-ward:focus { outline:none; stroke:#e8ffaa; stroke-width:3; }
.case-location-context { margin:20px 0; border:1px solid #60827c; border-radius:10px; overflow:hidden; background:#112b37; color:#e7f1f4; }
.case-location-heading { padding:12px 14px; display:flex; gap:10px; justify-content:space-between; align-items:center; }
.case-location-heading strong { font-size:12px; }
.case-location-context .map-badge { font-size:8px; }
.case-location-map { height:240px; background:#102b39; background-image:linear-gradient(90deg,#a5c8dc08 1px,transparent 1px),linear-gradient(#a5c8dc08 1px,transparent 1px); background-size:35px 35px; }
.case-location-context > p { color:#bacfd9; font-size:10px; padding:10px 14px; margin:0; line-height:1.6; }
.case-location-context .leaflet-control-attribution { background:#0c2331e8; color:#c6dce6; font-size:8px; }
@media (max-width:1200px) { .map-grid { grid-template-columns:190px minmax(0,1fr) 235px; } .map-rail { padding-inline:11px; } .map-inspector { padding-inline:13px; } }
@media (max-width:1000px) { .map-grid { height:auto; grid-template-rows:600px auto; grid-template-columns:190px minmax(0,1fr); } .map-stage { height:600px; } .map-inspector { max-height:none; grid-column:1 / -1; border-left:0; border-top:1px solid var(--map-line); } .map-head { padding:20px; } .map-head-actions { max-width:280px; } .map-snapshot { grid-template-columns:repeat(4,minmax(0,1fr)); } .map-hazard-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .ops-map { height:600px; } .map-grid { min-height:600px; } }
@media (max-width:640px) { .map-head { flex-direction:column; gap:14px; padding:18px 16px; } .map-head-actions { max-width:none; justify-content:flex-start; } .map-head h1 { font-size:29px; } .map-toolbar { flex-wrap:wrap; gap:10px; padding:12px; } .map-search { flex-basis:100%; max-width:none; } .map-toolbar > label { flex:1; } .map-toolbar select { flex:1; width:100px; } .map-sync { margin-left:0; } .map-grid { height:auto; display:block; } .map-stage { height:450px; } .map-rail { min-height:0; overflow:auto; scrollbar-width:thin; border-right:none; border-bottom:1px solid var(--map-line); padding:16px; } .map-layer-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 13px; margin-bottom:14px; } .map-rail .map-priority-head,.map-rail .map-case-list { display:none; } .map-rail details { margin-top:8px; } .ops-map { height:450px; } .map-context { max-width:180px; left:12px; top:12px; } .map-context strong { font-size:10px; } .map-context span { font-size:8px; } .map-ward-card { left:12px; top:82px; width:196px; } .map-footer { padding:12px; gap:10px; } .map-footer-note { margin-left:0; } .map-privacy { padding:12px; } .map-snapshot { grid-template-columns:repeat(2,minmax(0,1fr)); } .map-hazard-list { grid-template-columns:1fr; } }
@media (forced-colors:active) { .map-console,.map-console button,.map-console input,.map-console select,.map-console textarea { color:CanvasText; background:Canvas; border-color:CanvasText; } .map-case-symbol .symbol-fill { fill:Canvas; stroke:CanvasText; } .map-case-symbol text { fill:CanvasText; } .map-crew-symbol,.map-hazard-symbol,.map-asset-symbol,.marker-cluster { forced-color-adjust:none; } .civic-ward { stroke:CanvasText; } .map-console :focus-visible { outline-color:Highlight; } }

.map-heat-legend { position:absolute;z-index:650;top:18px;right:68px;width:198px;background:#102636f2;border:1px solid #657f8b;border-radius:7px;padding:11px 12px;pointer-events:none; }
.map-heat-legend strong { color:#e6f0f5;font-size:11px;display:block;margin-bottom:8px; }
.map-heat-ramp { height:7px;border-radius:3px;background:linear-gradient(90deg,#5dc6a1,#f6bc4b,#ff7551);margin-bottom:5px; }
.map-heat-legend > span { display:flex;justify-content:space-between;color:#c3d6df;font-size:8px; }
.map-heat-legend small { display:block;color:#b8cdd8;font-size:8px;line-height:1.6;margin-top:6px; }
@media (max-width:640px) { .map-heat-legend { top:auto;right:auto;left:12px;bottom:80px;width:198px; } }

.map-feature-browser { padding:10px 18px;background:#0f2330;border-top:1px solid #35505e; }
.map-feature-browser summary { min-height:36px;padding:6px 0;background:transparent;color:#cfe4ec;font-size:11px;border:0; }
.map-feature-browser summary .map-count { margin-left:10px; }
.map-feature-browser label { margin:10px 0 6px; }
.map-feature-browser select { width:240px;max-width:100%; }
#map-accessible-items { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:300px;overflow:auto;margin-top:12px;padding:3px;scrollbar-width:thin; }
#map-accessible-items button { min-height:48px;text-align:left;font-size:11px; }
#map-accessible-items button strong { display:block;line-height:1.5;font-weight:650; }
#map-accessible-items button span { display:block;font-size:10px;color:#b7d0dc;margin-top:5px; }
@media (max-width:640px) { #map-accessible-items { grid-template-columns:1fr; } .map-feature-browser { padding-inline:12px; } }