/* MapLibre critical layout fallback.
   These rules are intentionally bundled locally so markers/canvas remain georeferenced
   even if the CDN-hosted MapLibre stylesheet is blocked by a browser, firewall, or extension. */
.maplibregl-map {
  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
  overflow: hidden;
  position: relative;
  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
}
.maplibregl-canvas {
  position: absolute;
  left: 0;
  top: 0;
}
.maplibregl-canvas-container.maplibregl-interactive,
.maplibregl-ctrl-group button.maplibregl-ctrl-compass {
  cursor: grab;
  user-select: none;
}
.maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
.maplibregl-marker {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
.maplibregl-popup { position: absolute; top: 0; left: 0; display: flex; will-change: transform; pointer-events: none; }
.maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right {
  position: absolute; pointer-events: none; z-index: 2;
}
.maplibregl-ctrl-top-left { top: 0; left: 0; }
.maplibregl-ctrl-top-right { top: 0; right: 0; }
.maplibregl-ctrl-bottom-left { bottom: 0; left: 0; }
.maplibregl-ctrl-bottom-right { right: 0; bottom: 0; }
.maplibregl-ctrl { clear: both; pointer-events: auto; transform: translate(0,0); }
.maplibregl-ctrl-top-left .maplibregl-ctrl { margin: 10px 0 0 10px; float: left; }
.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 10px 10px 0 0; float: right; }
.maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 0 0 10px 10px; float: left; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 10px 10px 0; float: right; }
.maplibregl-ctrl-group { border-radius: 4px; }
.maplibregl-ctrl-group button { width: 29px; height: 29px; display: block; padding: 0; outline: none; border: 0; box-sizing: border-box; background-color: transparent; cursor: pointer; }
.maplibregl-ctrl-group button + button { border-top: 1px solid rgba(0,0,0,.12); }
.maplibregl-ctrl-attrib { padding: 0 5px; }

:root {
  --bg: #0d1117;
  --panel: #121923;
  --panel-2: #172130;
  --panel-3: #1c2838;
  --border: #273447;
  --text: #edf3fb;
  --muted: #91a0b5;
  --accent: #57b7ff;
  --accent-strong: #1796f0;
  --danger: #ef6b73;
  --success: #5bd59f;
  --shadow: 0 18px 45px rgba(0,0,0,.38);
  --topbar-h: 72px;
  --sidebar-w: 304px;
  --detail-w: 390px;
}
* { box-sizing: border-box; }
html, body, #app { width:100%; height:100%; margin:0; overflow:hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
button, input, select { font:inherit; }
#app { display:grid; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:var(--topbar-h) 1fr; }
.topbar { grid-column:1 / -1; grid-row:1; display:flex; align-items:center; gap:24px; padding:0 18px; background:linear-gradient(180deg,#141d29,#101721); border-bottom:1px solid var(--border); z-index:20; }
.brand { display:flex; align-items:center; min-width:310px; gap:12px; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; font-weight:900; letter-spacing:.5px; background:#e7f4ff; color:#0d1a27; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.brand-title { font-size:16px; font-weight:800; letter-spacing:.2px; }
.brand-subtitle { margin-top:2px; font-size:12px; color:var(--muted); }
.top-stats { display:flex; align-items:center; gap:9px; margin-left:auto; }
.stat { min-width:105px; padding:8px 12px; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,.025); }
.stat span { display:block; font-size:17px; line-height:1.05; font-weight:800; }
.stat small { color:var(--muted); font-size:10px; white-space:nowrap; }
.sidebar { grid-column:1; grid-row:2; background:var(--panel); border-right:1px solid var(--border); z-index:10; min-height:0; }
.sidebar-scroll { height:100%; overflow:auto; padding:14px; }
.panel-section { padding:5px 0 17px; margin-bottom:12px; border-bottom:1px solid var(--border); }
.panel-section:last-child { border-bottom:0; }
.section-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:#cad8ea; margin-bottom:10px; }
.field-label { display:block; font-size:11px; font-weight:650; color:var(--muted); margin:9px 0 5px; }
.input, .select { width:100%; min-height:36px; border-radius:8px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); padding:7px 9px; outline:none; }
.input:focus, .select:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(87,183,255,.13); }
.search-wrap { position:relative; }
.search-wrap .input { padding-right:36px; }
.search-wrap .icon-button { position:absolute; right:3px; top:3px; }
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.switch-row { display:flex; align-items:center; gap:9px; font-size:13px; margin:9px 0; cursor:pointer; }
.switch-row input { accent-color:var(--accent-strong); }
.button { border:1px solid transparent; border-radius:8px; padding:8px 11px; cursor:pointer; font-weight:700; font-size:12px; transition:.15s ease; }
.button:hover { transform:translateY(-1px); }
.button-primary { background:var(--accent-strong); color:white; }
.button-secondary { background:var(--panel-2); border-color:var(--border); color:var(--text); }
.button-full { width:100%; text-align:center; margin-top:10px; }
.file-button { display:block; }
.icon-button { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; font-size:20px; }
.icon-button:hover { background:var(--panel-3); color:var(--text); }
.icon-button-large { width:38px; height:38px; font-size:26px; }
.helper { color:var(--muted); font-size:11px; line-height:1.5; margin:0 0 10px; }
.import-status { margin-top:8px; color:var(--muted); font-size:10px; line-height:1.4; }
.date-filters { margin-top:10px; padding:8px 9px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.015); }
.date-filters summary { cursor:pointer; color:#cbd7e8; font-size:11px; font-weight:700; }
.map-wrap { position:relative; grid-column:2; grid-row:2; min-width:0; min-height:0; }
#map { position:absolute; inset:0; }
.maplibregl-ctrl-group { background:#172130 !important; border:1px solid #2b394c; }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter:invert(1); opacity:.85; }
.maplibregl-ctrl-attrib { background:rgba(16,23,33,.82) !important; color:#a7b5c8 !important; }
.maplibregl-ctrl-attrib a { color:#b8dfff !important; }
.map-hint { position:absolute; left:12px; bottom:34px; z-index:3; background:rgba(13,17,23,.86); border:1px solid var(--border); border-radius:7px; color:#b4c2d5; padding:7px 9px; font-size:10px; pointer-events:none; backdrop-filter:blur(6px); }
.map-message { position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:4; background:rgba(13,17,23,.93); border:1px solid var(--border); border-radius:9px; padding:10px 14px; box-shadow:var(--shadow); font-size:12px; }
.hidden { display:none !important; }
.detail-panel { position:absolute; top:var(--topbar-h); right:0; bottom:0; width:var(--detail-w); transform:translateX(102%); transition:transform .22s ease; z-index:30; background:var(--panel); border-left:1px solid var(--border); box-shadow:var(--shadow); display:flex; flex-direction:column; }
.detail-panel.open { transform:translateX(0); }
.detail-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:18px 18px 14px; border-bottom:1px solid var(--border); }
.detail-header h2 { margin:3px 0 0; font-size:19px; line-height:1.25; overflow-wrap:anywhere; }
.detail-eyebrow { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }
.detail-body { overflow:auto; padding:16px 18px 24px; }
.status-heading { display:flex; align-items:center; gap:10px; padding:10px 11px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); margin-bottom:14px; }
.status-heading img { width:34px; height:34px; object-fit:contain; }
.status-heading strong { display:block; font-size:13px; }
.status-heading small { color:var(--muted); }
.detail-section { padding:12px 0; border-bottom:1px solid var(--border); }
.detail-section:last-child { border-bottom:0; }
.detail-section-title { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#a9bad0; margin-bottom:8px; }
.detail-grid { display:grid; grid-template-columns:112px 1fr; gap:7px 10px; font-size:12px; }
.detail-key { color:var(--muted); }
.detail-value { color:#e5edf7; overflow-wrap:anywhere; }
.detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 2px; }
.action-link { display:block; text-align:center; text-decoration:none; border-radius:8px; border:1px solid var(--border); padding:8px; color:#dceeff; background:var(--panel-2); font-size:11px; font-weight:750; }
.action-link:hover { border-color:#4b6788; background:var(--panel-3); }
.problem-box { white-space:pre-wrap; border:1px solid rgba(239,107,115,.35); background:rgba(239,107,115,.08); color:#ffdfe2; border-radius:8px; padding:9px; font-size:11px; line-height:1.45; }
.group-list { display:flex; flex-direction:column; gap:7px; }
.group-item { width:100%; display:flex; align-items:center; gap:9px; text-align:left; padding:8px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); border-radius:9px; cursor:pointer; }
.group-item:hover { border-color:#4c6a8e; background:var(--panel-3); }
.group-item img { width:31px; height:31px; object-fit:contain; flex:0 0 auto; }
.group-item-main { min-width:0; }
.group-item-main strong { display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.group-item-main span { display:block; color:var(--muted); font-size:10px; margin-top:2px; }
.legend { display:grid; grid-template-columns:1fr 1fr; gap:7px 8px; }
.legend-item { display:flex; gap:7px; align-items:center; min-width:0; }
.legend-item img { width:26px; height:26px; object-fit:contain; }
.legend-item span { font-size:10px; color:#c5d1e0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.map-pin { position:absolute; width:34px; height:34px; border:0; background:transparent; padding:0; cursor:pointer; filter:drop-shadow(0 2px 2px rgba(0,0,0,.62)); }
.map-pin img { width:100%; height:100%; object-fit:contain; display:block; transition:transform .12s ease; transform-origin:center; }
.map-pin:hover { z-index:20; }
.map-pin:hover img { transform:scale(1.12); }
.map-pin .count-badge { position:absolute; right:-7px; top:-7px; min-width:19px; height:19px; padding:0 4px; border-radius:10px; display:grid; place-items:center; background:#f0f6ff; color:#0b1520; border:2px solid #0d1117; font-size:9px; font-weight:900; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.map-pin.spider { width:37px; height:37px; z-index:15; }
.cable-card { border:1px solid var(--border); border-radius:9px; padding:10px; background:var(--panel-2); }
.cable-properties { display:grid; grid-template-columns:115px 1fr; gap:7px 9px; font-size:11px; }
@media (max-width: 860px) {
  :root { --sidebar-w: 0px; --detail-w: min(92vw,390px); }
  #app { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .brand { min-width:0; }
  .brand-subtitle, .top-stats .stat:nth-child(2), .top-stats .stat:nth-child(3) { display:none; }
  .top-stats { margin-left:auto; }
  .topbar { gap:8px; padding:0 10px; }
  #refreshBtn { display:none; }
  .map-wrap { grid-column:1; }
}

/* v0.5 — map labels, Google Earth-style spider lines, and basemap switcher */
.map-pin .pin-label {
  position:absolute;
  left:41px;
  top:50%;
  transform:translateY(-50%);
  display:none;
  width:max-content;
  max-width:230px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:11px;
  line-height:1.1;
  font-weight:750;
  letter-spacing:.01em;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px 1px 0 #000, 1px 1px 0 #000,
    0 2px 3px rgba(0,0,0,.9);
  pointer-events:none;
}
.map-pin.show-label .pin-label,
.map-pin.spider .pin-label { display:block; }
.map-pin.spider .pin-label { font-size:12px; }
.basemap-switcher {
  position:absolute;
  right:12px;
  bottom:34px;
  z-index:5;
  display:flex;
  gap:2px;
  padding:3px;
  border:1px solid rgba(28,40,56,.8);
  border-radius:9px;
  background:rgba(13,17,23,.9);
  box-shadow:0 5px 18px rgba(0,0,0,.3);
  backdrop-filter:blur(7px);
}
.basemap-button {
  border:0;
  border-radius:6px;
  padding:7px 10px;
  background:transparent;
  color:#bdcadb;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.basemap-button:hover { color:#fff; background:rgba(255,255,255,.06); }
.basemap-button.active { color:#fff; background:#167fca; }
@media (max-width: 860px) {
  .basemap-switcher { bottom:46px; right:8px; }
  .map-hint { max-width:65vw; }
  .map-pin .pin-label { max-width:170px; }
}

/* v0.6 — native cable styles and WOID-aware cable import */
.helper-tight { margin-top:8px; margin-bottom:8px; }
.inline-link { display:inline-block; margin:0 0 8px; color:#8ecbff; font-size:11px; font-weight:750; text-decoration:none; }
.inline-link:hover { text-decoration:underline; color:#c9e7ff; }
.cable-legend { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
.cable-legend-item { display:flex; align-items:center; gap:8px; min-width:0; }
.cable-line-swatch { width:34px; height:12px; position:relative; flex:0 0 34px; }
.cable-line-swatch::before { content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:var(--cable-width,4px); max-height:6px; border-radius:999px; background:var(--cable-color,#94a3b8); box-shadow:0 0 0 1px rgba(0,0,0,.45); }
.cable-legend-item span { font-size:10px; color:#c5d1e0; white-space:nowrap; }
.cable-style-heading { display:flex; align-items:center; gap:10px; padding:10px 11px; margin-bottom:12px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.cable-style-heading .cable-line-swatch { width:48px; flex-basis:48px; }
.cable-style-heading strong { display:block; font-size:13px; }
.cable-style-heading small { color:var(--muted); display:block; margin-top:2px; }


/* v0.7 — persistent cable datasets by WOID + dynamic status totals */
.status-summary-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.status-summary-title strong { min-width:34px; text-align:center; padding:3px 7px; border:1px solid var(--border); border-radius:999px; background:var(--panel-2); color:#fff; font-size:11px; }
.status-summary { display:flex; flex-direction:column; gap:5px; }
.status-summary-empty { color:var(--muted); font-size:10px; line-height:1.4; padding:5px 0; }
.status-count-row { display:grid; grid-template-columns:25px 1fr auto; gap:8px; align-items:center; min-width:0; padding:5px 6px; border:1px solid transparent; border-radius:7px; background:rgba(255,255,255,.018); }
.status-count-row img { width:25px; height:25px; object-fit:contain; }
.status-count-copy { min-width:0; }
.status-count-code { display:block; font-size:10px; font-weight:850; color:#e7eef8; }
.status-count-label { display:block; margin-top:1px; color:var(--muted); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-count-number { min-width:31px; text-align:right; font-size:13px; font-weight:850; color:#fff; }
.storage-summary { margin-top:9px; padding:8px 9px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); color:#b7c6d8; font-size:10px; line-height:1.45; }
.storage-summary strong { color:#eef5ff; }

/* v0.8 — multi-select operational filters */
.multi-select { position:relative; margin-bottom:10px; }
.multi-select-trigger {
  width:100%; min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); color:#c9d6e6;
  text-align:left; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.multi-select-trigger:hover { border-color:#3c506a; background:#1a2738; }
.multi-select.has-selection .multi-select-trigger { border-color:#2d78ad; background:#15283a; color:#eef7ff; }
.multi-select-summary { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.multi-select-chevron { flex:0 0 auto; color:var(--muted); font-size:11px; transition:transform .15s ease; }
.multi-select.open .multi-select-chevron { transform:rotate(180deg); }
.multi-select-menu {
  display:none; margin-top:5px; border:1px solid #314158; border-radius:9px; background:#111a26;
  box-shadow:0 12px 26px rgba(0,0,0,.32); overflow:hidden;
}
.multi-select.open .multi-select-menu { display:block; }
.multi-select-actions { display:flex; gap:6px; padding:7px; border-bottom:1px solid var(--border); background:#15202e; }
.multi-select-actions button {
  flex:1; border:1px solid var(--border); border-radius:6px; padding:5px 7px; background:#1b2a3b; color:#aebfd3;
  font-size:9px; font-weight:800; cursor:pointer;
}
.multi-select-actions button:hover { background:#22364d; color:#fff; }
.multi-select-options { max-height:210px; overflow:auto; padding:5px; }
.multi-select-option {
  display:flex; align-items:flex-start; gap:8px; padding:6px 7px; border-radius:6px; color:#c7d3e2;
  font-size:10px; line-height:1.25; cursor:pointer; user-select:none;
}
.multi-select-option:hover { background:rgba(87,183,255,.08); color:#fff; }
.multi-select-option input { flex:0 0 auto; margin:1px 0 0; accent-color:#1796f0; }
.multi-select-option span { min-width:0; overflow-wrap:anywhere; }
.filter-grid .multi-select { margin-bottom:0; }
.filter-grid .multi-select-trigger { min-height:40px; padding:7px 8px; }
.filter-grid .multi-select-summary { font-size:10px; }
.filter-grid .multi-select-option { font-size:9px; padding:6px 5px; }
@media (max-width: 860px) {
  .multi-select-options { max-height:180px; }
}

/* v0.9 — role preview, scoped access simulation, and responsive mobile controls */
.mobile-only { display:none; }
.access-preview-banner {
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:7;
  display:flex; align-items:center; gap:10px; max-width:min(82vw,760px);
  padding:8px 10px; border:1px solid rgba(255,193,7,.5); border-radius:9px;
  background:rgba(35,29,11,.93); color:#fff2bd; box-shadow:0 8px 24px rgba(0,0,0,.3);
  font-size:11px; font-weight:700; backdrop-filter:blur(8px);
}
.access-preview-banner button { border:0; border-radius:6px; padding:5px 8px; background:#ffd35c; color:#251b00; font-size:10px; font-weight:850; cursor:pointer; white-space:nowrap; }
.access-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; background:rgba(4,8,13,.72); backdrop-filter:blur(5px); }
.access-modal-card { width:min(620px,96vw); max-height:min(820px,94vh); display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; background:var(--panel); box-shadow:0 28px 80px rgba(0,0,0,.58); overflow:hidden; }
.access-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px; border-bottom:1px solid var(--border); }
.access-modal-header h2 { margin:3px 0 5px; font-size:20px; }
.access-modal-header p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
.access-modal-body { overflow:auto; padding:16px 18px; }
.access-modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:13px 18px; border-top:1px solid var(--border); background:rgba(255,255,255,.015); }
.access-role-description { margin:7px 0 12px; padding:9px 10px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2); color:#c1cfdf; font-size:11px; line-height:1.45; }
.access-multi-select { min-height:160px; padding:6px; }
.access-multi-select option { padding:6px 7px; border-radius:5px; }
.access-capabilities { margin-top:16px; }
.capability-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.capability-pill { display:flex; align-items:center; gap:7px; min-height:34px; padding:7px 9px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.018); color:#cad5e3; font-size:10px; }
.capability-pill.allowed::before { content:'✓'; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:rgba(91,213,159,.16); color:#73e3b4; font-weight:900; }
.capability-pill.blocked { color:#758296; }
.capability-pill.blocked::before { content:'–'; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:rgba(255,255,255,.04); color:#738196; font-weight:900; }
.access-validation { margin-top:12px; padding:9px 10px; border:1px solid rgba(239,107,115,.42); border-radius:8px; background:rgba(239,107,115,.08); color:#ffd8dc; font-size:11px; line-height:1.4; }
.access-restricted-note { margin:0 0 12px; padding:9px 10px; border:1px solid rgba(87,183,255,.28); border-radius:8px; background:rgba(87,183,255,.07); color:#cdeaff; font-size:10px; line-height:1.45; }
.mobile-drawer-header { height:58px; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--border); }
.mobile-backdrop { position:fixed; inset:var(--topbar-h) 0 0 0; z-index:39; background:rgba(3,7,12,.58); backdrop-filter:blur(2px); }

@media (max-width: 860px) {
  :root { --topbar-h:64px; --detail-w:100vw; }
  .mobile-only { display:inline-flex; }
  #app { grid-template-columns:1fr; grid-template-rows:var(--topbar-h) 1fr; }
  .topbar { padding:0 8px; gap:6px; }
  .brand { min-width:0; flex:1 1 auto; gap:8px; }
  .brand-mark { width:36px; height:36px; border-radius:8px; font-size:13px; }
  .brand-title { font-size:13px; white-space:nowrap; }
  .brand-subtitle { display:none; }
  .top-stats { display:none; }
  #refreshBtn { display:none; }
  #accessPreviewBtn { padding:7px 8px; font-size:10px; white-space:nowrap; }
  #mobileFiltersBtn { padding:7px 8px; font-size:10px; }
  .sidebar {
    display:block; position:fixed; top:var(--topbar-h); left:0; bottom:0; width:min(88vw,360px);
    z-index:40; transform:translateX(-105%); transition:transform .2s ease; box-shadow:var(--shadow);
  }
  .sidebar.mobile-open { transform:translateX(0); }
  .mobile-drawer-header { display:flex; }
  .sidebar-scroll { height:calc(100% - 58px); padding:12px 14px 24px; }
  .map-wrap { grid-column:1; grid-row:2; }
  .detail-panel { top:var(--topbar-h); width:100vw; }
  .detail-header { padding:14px; }
  .detail-body { padding:14px 14px 28px; }
  .detail-actions { grid-template-columns:1fr; }
  .filter-grid { grid-template-columns:1fr; gap:0; }
  .access-preview-banner { top:8px; width:calc(100% - 20px); max-width:none; justify-content:space-between; font-size:10px; }
  .access-preview-banner span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .basemap-switcher { bottom:44px; right:8px; }
  .map-hint { display:none; }
  .maplibregl-ctrl-top-right { top:48px; }
  .access-modal { padding:0; align-items:stretch; }
  .access-modal-card { width:100vw; height:100dvh; max-height:none; border-radius:0; border-left:0; border-right:0; }
  .access-modal-header { padding:14px; }
  .access-modal-body { padding:13px 14px; }
  .access-modal-footer { padding:11px 14px calc(11px + env(safe-area-inset-bottom)); }
  .capability-grid { grid-template-columns:1fr; }
  .access-multi-select { min-height:145px; }
}

/* v1.0 — per-user permission overrides + technician quick work view */
.button-active { background:#12395a !important; border-color:#2f89c9 !important; color:#e9f6ff !important; box-shadow:0 0 0 2px rgba(87,183,255,.12) inset; }
.permission-editor-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.permission-editor-heading .section-title { margin-bottom:4px; }
.mini-button { flex:0 0 auto; border:1px solid var(--border); border-radius:7px; padding:6px 8px; background:var(--panel-2); color:#b9c8da; font-size:9px; font-weight:800; cursor:pointer; }
.mini-button:hover { border-color:#456180; color:#fff; background:var(--panel-3); }
.permission-grid { grid-template-columns:1fr 1fr; }
.permission-toggle { display:flex; align-items:flex-start; gap:8px; min-height:44px; padding:8px 9px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.018); color:#cbd6e4; cursor:pointer; }
.permission-toggle:hover { border-color:#3c526d; background:rgba(87,183,255,.04); }
.permission-toggle input { flex:0 0 auto; margin:2px 0 0; accent-color:#1796f0; }
.permission-toggle span { min-width:0; }
.permission-toggle strong { display:block; font-size:10px; line-height:1.25; }
.permission-toggle small { display:block; margin-top:3px; color:var(--muted); font-size:8px; line-height:1.25; }

@media (max-width: 860px) {
  #myOutstandingBtn { padding:7px 8px; font-size:10px; white-space:nowrap; max-width:145px; overflow:hidden; text-overflow:ellipsis; }
  .permission-grid { grid-template-columns:1fr; }
}

/* v1.1 — Firebase / Google Workspace authentication */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 25%, #17283a 0%, #0d1117 48%, #090c10 100%);
}
.auth-card {
  width: min(430px, 100%);
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(18,25,35,.97);
  box-shadow: var(--shadow);
  text-align: center;
}
.auth-brand-mark {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: #e7f4ff;
  color: #0d1a27;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: .6px;
}
.auth-card h1 { margin: 0 0 10px; font-size: 24px; }
.auth-card p { margin: 0 auto 22px; max-width: 330px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.auth-signin-button { min-width: 190px; min-height: 42px; }
.auth-message { margin-top: 14px; min-height: 20px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.auth-message.auth-error { color: #ffd1d5; }
.auth-user { display: flex; align-items: center; gap: 8px; }
.auth-user span { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cbd8e8; font-size: 11px; }
@media (max-width: 1040px) { .auth-user span { display:none; } }

/* v1.2 — persistent Users & Access administration */
.users-access-card { width:min(1080px,97vw); max-height:min(880px,95vh); }
.users-access-body { min-height:0; flex:1; display:grid; grid-template-columns:320px 1fr; overflow:hidden; }
.users-access-list-pane { min-height:0; overflow:auto; padding:14px; border-right:1px solid var(--border); background:rgba(255,255,255,.012); }
.users-access-editor-pane { min-height:0; overflow:auto; padding:16px 18px; }
.user-add-row { display:grid; grid-template-columns:1fr auto; gap:7px; margin-bottom:8px; }
.access-user-list { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.access-user-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; padding:10px; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); color:var(--text); cursor:pointer; }
.access-user-row:hover { border-color:#456180; background:var(--panel-3); }
.access-user-row.selected { border-color:#238dd2; box-shadow:0 0 0 1px rgba(35,141,210,.28) inset; background:#14283a; }
.access-user-row span { min-width:0; }
.access-user-row strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.access-user-row small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
.access-user-row em { flex:0 0 auto; font-style:normal; font-size:8px; font-weight:850; color:#ffd66b; }
.access-user-empty { padding:22px 12px; color:var(--muted); text-align:center; font-size:11px; line-height:1.5; }
.access-user-editor-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:12px; }
.access-user-editor-heading h3 { margin:4px 0 0; font-size:17px; overflow-wrap:anywhere; }
.access-active-toggle { margin:0; flex:0 0 auto; }
.users-access-editor-pane .select { margin-bottom:10px; }
.users-access-editor-pane .access-role-description { margin-bottom:12px; }
.users-access-editor-pane .access-capabilities { margin-top:16px; }
@media (max-width: 860px) {
  .users-access-body { grid-template-columns:1fr; overflow:auto; }
  .users-access-list-pane { max-height:34vh; border-right:0; border-bottom:1px solid var(--border); }
  .users-access-editor-pane { overflow:visible; }
  .users-access-card { height:100dvh; }
  .topbar #usersAccessBtn, .topbar #accessPreviewBtn { padding:7px 8px; font-size:10px; }
}

/* v1.5 — persistent mobile field controls + compact phone layout */
.mobile-map-locate {
  position:absolute;
  left:10px;
  bottom:58px;
  z-index:35;
  width:46px;
  height:46px;
  padding:0;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(43,57,76,.95);
  border-radius:13px;
  background:rgba(18,25,35,.96);
  color:#dbe8f7;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  touch-action:manipulation;
}
.mobile-map-locate:active { transform:scale(.96); }
.mobile-map-locate.active { color:#63c3ff; border-color:#318cca; background:rgba(15,40,59,.97); }
.mobile-map-locate.locating { color:#8ed2ff; }
.mobile-map-locate.locating .mobile-locate-icon { animation:hft-locate-spin 1s linear infinite; }
.mobile-map-locate.error { color:#ff9aa1; border-color:rgba(239,107,115,.7); }
.mobile-locate-icon {
  position:relative;
  display:block;
  width:18px;
  height:18px;
  border:2px solid currentColor;
  border-radius:50%;
}
.mobile-locate-icon::before,
.mobile-locate-icon::after {
  content:"";
  position:absolute;
  background:currentColor;
  border-radius:999px;
}
.mobile-locate-icon::before { width:2px; height:24px; left:6px; top:-5px; }
.mobile-locate-icon::after { width:24px; height:2px; left:-5px; top:6px; }
@keyframes hft-locate-spin { to { transform:rotate(360deg); } }
.mobile-user-location-marker { position:relative; width:26px; height:26px; pointer-events:none; z-index:40; }
.mobile-user-location-pulse {
  position:absolute; inset:0; border-radius:50%;
  background:rgba(40,157,230,.22); border:1px solid rgba(108,200,255,.48);
  animation:hft-location-pulse 2s ease-out infinite;
}
.mobile-user-location-dot {
  position:absolute; left:7px; top:7px; width:12px; height:12px; border-radius:50%;
  background:#32a9f3; border:2px solid #fff; box-shadow:0 2px 7px rgba(0,0,0,.45);
}
@keyframes hft-location-pulse {
  0% { transform:scale(.55); opacity:.9; }
  80%,100% { transform:scale(1.55); opacity:0; }
}

/* Keep native MapLibre controls above marker DOM on desktop. */
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-top-right,
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right { z-index:25; }

@media (max-width: 860px) {
  :root { --topbar-h:58px; }
  html,body,#app { overscroll-behavior:none; }
  .topbar {
    min-width:0;
    gap:4px;
    padding:0 7px;
    overflow:hidden;
    white-space:nowrap;
  }
  .brand { flex:0 0 auto; min-width:0; gap:6px; margin-right:auto; }
  .brand-mark { width:34px; height:34px; border-radius:8px; font-size:12px; }
  .brand-title { font-size:12px; }
  .topbar .button { min-height:38px; padding:0 8px; border-radius:9px; }
  #mobileFiltersBtn { font-size:10px; }
  #usersAccessBtn, #accessPreviewBtn, #myOutstandingBtn, #signOutBtn { font-size:0 !important; }
  #usersAccessBtn::after { content:"Users"; font-size:10px; }
  #accessPreviewBtn::after { content:"Preview"; font-size:10px; }
  #myOutstandingBtn::after { content:"My Work"; font-size:10px; }
  #myOutstandingBtn.button-active::after { content:"All Map"; }
  #signOutBtn::after { content:"Exit"; font-size:10px; }
  .auth-user { gap:0; flex:0 0 auto; }
  .auth-user #signOutBtn { min-width:42px; }

  /* Phone users pinch to zoom; remove the MapLibre +/- stack so field controls stay uncluttered. */
  .maplibregl-ctrl-top-right { display:none; }
  .mobile-map-locate { display:inline-flex; bottom:58px; left:10px; }
  .basemap-switcher {
    left:50%; right:auto; bottom:8px;
    transform:translateX(-50%);
    max-width:calc(100% - 76px);
    z-index:20;
  }
  .basemap-button { min-height:38px; padding:7px 11px; font-size:10px; }
  .map-message { top:8px; width:calc(100% - 20px); max-width:440px; text-align:center; }
  .access-preview-banner { top:8px; }
}

@media (max-width: 600px) {
  .brand-title { display:none; }
  .topbar { padding-left:max(7px, env(safe-area-inset-left)); padding-right:max(7px, env(safe-area-inset-right)); }
  .mobile-map-locate { left:max(10px, env(safe-area-inset-left)); }
  .basemap-switcher { bottom:max(8px, env(safe-area-inset-bottom)); }
}

@media (max-width: 390px) {
  .topbar .button { padding-left:7px; padding-right:7px; }
  #mobileFiltersBtn { font-size:9px; }
  #usersAccessBtn::after, #accessPreviewBtn::after, #myOutstandingBtn::after, #signOutBtn::after { font-size:9px; }
  .basemap-button { padding-left:9px; padding-right:9px; }
}

/* v1.6 — WOID-level regional clustering, technician identity mapping, saved filters */
.woid-cluster-marker {
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:190px;
  min-height:34px;
  padding:6px 8px 6px 10px;
  border:2px solid #0b1119;
  border-radius:18px;
  background:rgba(232,244,255,.97);
  color:#0c1723;
  box-shadow:0 3px 12px rgba(0,0,0,.42);
  cursor:pointer;
  white-space:nowrap;
  transform-origin:center;
  transition:transform .12s ease, box-shadow .12s ease;
}
.woid-cluster-marker:hover { transform:scale(1.04); box-shadow:0 5px 16px rgba(0,0,0,.5); z-index:20; }
.woid-cluster-code { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:10px; font-weight:900; letter-spacing:.01em; }
.woid-cluster-count {
  flex:0 0 auto;
  min-width:22px;
  height:22px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#102235;
  color:#fff;
  font-size:9px;
  font-weight:900;
}
.remember-filters-row { margin-top:12px; margin-bottom:4px; }
.technician-identity-editor {
  margin:10px 0 14px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:rgba(87,183,255,.035);
}
.technician-identity-editor .access-multi-select { min-height:125px; }

@media (max-width: 860px) {
  .woid-cluster-marker { max-width:150px; min-height:32px; padding:5px 7px 5px 9px; }
  .woid-cluster-code { font-size:9px; }
  .woid-cluster-count { min-width:20px; height:20px; font-size:8px; }
}