:root {
    --primary: #082e21;
    --secondary: #225A45;
    --primary-light: #e7f1ed;
    --accent: #4EA686;
    --bg: #FFFCF7;
    --panel: #FFFCF7;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --green: #16a34a;
    --amber: #ea580c;
    --red: #b91c1c;
    --lpa: #7c3aed;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: var(--bg); }
  body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
  header { background: var(--primary); color: white; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; }
  header h1 { margin: 0; font-size: 18px; font-weight: 600; }
  header .stats { font-size: 13px; opacity: 0.9; }
  #status-bar { background: var(--primary-light); color: var(--primary); padding: 8px 20px; font-size: 13px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
  #status-bar .progress-wrap { flex: 1; height: 6px; background: rgba(26,68,128,0.15); border-radius: 3px; overflow: hidden; max-width: 300px; }
  #status-bar .progress { height: 100%; background: var(--primary); width: 0%; transition: width 0.3s; }
  #status-bar.hidden { display: none; }
  #status-bar button { background: transparent; border: 1px solid var(--primary); color: var(--primary); padding: 2px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; }
  #status-bar button:hover { background: var(--primary); color: white; }
  main { flex: 1; display: flex; min-height: 0; }
  #sidebar { width: 480px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
  #map { flex: 1; position: relative; }
  #controls { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
  #filter-panel { border:1px solid var(--border); border-radius:8px; background:#f8fafc; overflow:visible; }
  #filter-panel summary {
    cursor:pointer; list-style:none; padding:9px 11px; font-size:13px; font-weight:700;
    color:var(--primary); display:flex; align-items:center; justify-content:space-between; gap:10px;
    user-select:none;
  }
  #filter-panel summary::-webkit-details-marker { display:none; }
  #filter-panel summary::after { content:'+'; font-size:16px; font-weight:900; color:var(--primary); line-height:1; }
  #filter-panel[open] summary { border-bottom:1px solid var(--border); margin-bottom:8px; }
  #filter-panel[open] summary::after { content:'−'; }
  #filter-panel .filter-subtitle { color:var(--muted); font-size:11px; font-weight:600; margin-left:auto; padding-right:8px; }
  .filter-panel-body { display:flex; flex-direction:column; gap:8px; padding:0 10px 10px; }
  #filter-panel:not([open]) { box-shadow:0 1px 3px rgba(15,23,42,0.06); }

  #controls .row { display: flex; gap: 8px; align-items: center; }
  #controls input, #controls select { flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; min-width: 0; }
  #controls label { font-size: 12px; color: var(--muted); white-space: nowrap; }
  #lpa-wrap { position: relative; flex: 1; }
  #lpa-filter { width: 100%; padding: 6px 24px 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; }
  #lpa-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 2px 6px; font-size: 14px; line-height: 1; display: none; }
  #lpa-clear:hover { color: var(--text); }
  #lpa-suggest { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--border); border-radius: 6px; max-height: 240px; overflow-y: auto; z-index: 1100; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-top: 2px; display: none; }
  #lpa-suggest div { padding: 6px 10px; font-size: 13px; cursor: pointer; }
  #lpa-suggest div:hover, #lpa-suggest div.active { background: var(--primary-light); }
  #lpa-selected-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; min-height:0; }
  .lpa-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; background:var(--primary-light); color:var(--primary); font-size:11px; font-weight:500; max-width:100%; }
  .lpa-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
  .lpa-chip button { border:none; background:transparent; color:var(--primary); cursor:pointer; padding:0; font-size:14px; line-height:1; }

  #table-wrap { flex: 1; overflow: auto; min-height: 0; }
  table { width: 100%; border-collapse: collapse; font-size: 12px; }
  th { position: sticky; top: 0; background: var(--panel); border-bottom: 2px solid var(--border); padding: 8px 6px; text-align: left; font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap; z-index: 10; }
  th:hover { background: var(--primary-light); }
  th.sorted-asc::after { content: ' ▲'; color: var(--primary); }
  th.sorted-desc::after { content: ' ▼'; color: var(--primary); }
  td { padding: 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
  tr.row { cursor: pointer; }
  tr.row:hover { background: var(--primary-light); }
  tr.row.selected { background: #fff7ed; }
  .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
  .pill-green { background: #dcfce7; color: var(--green); }
  .pill-amber { background: #ffedd5; color: var(--amber); }
  .pill-red { background: #fee2e2; color: var(--red); }
  .junction-info { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .name-cell { font-weight: 500; }
  .marker-pin { background: var(--primary); width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 4px rgba(0,0,0,0.4); }
  .marker-pin.near { background: var(--green); }
  .marker-pin.medium { background: var(--amber); }
  .marker-pin.far { background: var(--red); }
  .junction-marker { background: #6b7280; width: 10px; height: 10px; border-radius: 2px; border: 1px solid white; transform: rotate(45deg); }
  .leaflet-popup-content { font-size: 12px; min-width: 220px; }
  .leaflet-popup-content strong { color: var(--primary); }
  #legend { position: absolute; top: 322px; right: 20px; background: white; padding: 10px 12px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-size: 12px; z-index: 1000; max-width: 240px; }
  #legend .item { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
  #legend .swatch { width: 12px; height: 12px; border-radius: 50%; }
  .empty { padding: 30px; text-align: center; color: var(--muted); font-size: 13px; }
  @media (max-width: 900px) { #sidebar { width: 100%; } main { flex-direction: column; } #map { height: 50%; min-height: 300px; } }
  .marker-pin.enriched {
    box-shadow: 0 0 0 3px #a855f7, 0 0 4px rgba(0,0,0,0.4);
  }
  .marker-pin.cpbc {
    /* CP BC pins are SQUARE so they're visually distinct from circular Tom Card pins.
       Background colour is set by the .near/.medium/.far distance-band classes
       (which apply to all marker-pins regardless of shape). */
    width: 16px; height: 16px;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    border: 2px solid white;
  }
  .marker-pin.cpbc.approx {
    border-style: dashed;
    opacity: 0.85;
  }
  .enriched-chip {
    display:inline-block; vertical-align:middle; margin-left:6px;
    padding:1px 6px; border-radius:10px; font-size:10px; font-weight:700;
    color:white; background:#a855f7; letter-spacing:0.3px;
  }
  .approx-chip {
    display:inline-block; vertical-align:middle; margin-left:6px;
    padding:1px 6px; border-radius:10px; font-size:10px; font-weight:700;
    color:white; background:#94a3b8; letter-spacing:0.3px;
  }
  .conf-pill {
    display:inline-block; padding:1px 6px; border-radius:10px;
    font-size:10px; font-weight:700; color:white; letter-spacing:0.3px;
  }
  .conf-HIGH   { background:#16a34a; }
  .conf-MEDIUM { background:#d97706; }
  .conf-LOW    { background:#dc2626; }

  /* Tab bar (sub-tab) */
  #tab-bar {
    display:flex; gap:0; padding:0 12px; margin-top:8px;
    border-bottom:1px solid #e5e7eb;
  }
  #tab-bar button {
    background:none; border:none; padding:8px 12px; font-size:12px;
    font-family:inherit; color:var(--muted); cursor:pointer;
    border-bottom:2px solid transparent; margin-bottom:-1px;
  }
  #tab-bar button.active {
    color:var(--primary); border-bottom-color:var(--primary); font-weight:600;
  }

  /* Modal */
  #enriched-modal {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,0.5); align-items:center; justify-content:center;
  }
  #enriched-modal.open { display:flex; }
  #enriched-modal .modal-card {
    background:white; border-radius:8px; max-width:760px; width:92%;
    max-height:90vh; overflow:auto;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
    font-family:inherit;
  }
  #enriched-modal header {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; border-bottom:1px solid #e5e7eb;
  }
  #enriched-modal header h2 { margin:0; font-size:16px; color:var(--primary); }
  #enriched-modal .close-btn {
    background:none; border:none; font-size:22px; cursor:pointer;
    color:var(--muted); line-height:1;
  }
  #enriched-modal .modal-body { padding:16px 18px; }
  #enriched-modal .sat-img-wrap {
    text-align:center; background:#0b1220; border-radius:6px;
    padding:6px; margin-bottom:14px;
  }
  #enriched-modal .sat-img-wrap img {
    max-width:100%; height:auto; border-radius:4px; max-height:380px;
  }
  #enriched-modal .grid {
    display:grid; grid-template-columns:140px 1fr; gap:8px 16px;
    font-size:13px; line-height:1.5;
  }
  #enriched-modal .grid .lbl { color:var(--muted); font-weight:500; }
  #enriched-modal .grid .val { color:#111827; }
  #enriched-modal .constraint-tag {
    display:inline-block; padding:2px 8px; margin:2px 4px 2px 0;
    border-radius:11px; font-size:11px; background:#fef3c7; color:#92400e;
  }
  #enriched-modal .stage-tag {
    display:inline-block; padding:3px 10px; border-radius:11px;
    font-size:11px; background:#dbeafe; color:#1e40af; font-weight:500;
  }
  #enriched-modal .low-banner {
    background:#fee2e2; color:#7f1d1d; padding:8px 12px; border-radius:6px;
    font-size:12px; margin-bottom:14px; border-left:4px solid #dc2626;
  }
  #enriched-modal .med-banner {
    background:#fef3c7; color:#78350f; padding:8px 12px; border-radius:6px;
    font-size:12px; margin-bottom:14px; border-left:4px solid #d97706;
  }
  #enriched-modal .approx-banner {
    background:#f1f5f9; color:#475569; padding:8px 12px; border-radius:6px;
    font-size:12px; margin-bottom:14px; border-left:4px solid #94a3b8;
  }
  #enriched-modal a.searchland-link {
    color:var(--primary); text-decoration:none; font-weight:500;
  }
  #enriched-modal a.searchland-link:hover { text-decoration:underline; }

  /* ── Local Plan panel ── */
  #lp-panel { flex:1; overflow:auto; min-height:0; display:none; flex-direction:column; }
  #lp-panel.active { display:flex; }
  #lp-summary { display:flex; gap:6px; padding:10px 12px 6px; flex-shrink:0; flex-wrap:wrap; }
  .lp-stat { flex:1; min-width:60px; background:var(--primary-light); border-radius:6px; padding:6px 8px; text-align:center; }
  .lp-stat .lp-stat-n { font-size:18px; font-weight:600; color:var(--primary); }
  .lp-stat .lp-stat-l { font-size:10px; color:var(--muted); margin-top:1px; }
  #lp-list { flex:1; overflow:auto; padding:0 10px 10px; }
  .lp-card { background:#fff; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
  .lp-card-head { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; cursor:pointer; gap:8px; }
  .lp-card-head:hover { background:var(--primary-light); }
  .lp-card-name { font-size:12px; font-weight:600; color:var(--text); flex:1; min-width:0; }
  .lp-card-sub { font-size:10px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lp-card-body { display:none; padding:10px 12px; border-top:1px solid var(--border); font-size:12px; }
  .lp-card-body.open { display:block; }
  .lp-grid { display:grid; grid-template-columns:110px 1fr; gap:5px 10px; margin-bottom:8px; }
  .lp-lbl { color:var(--muted); font-size:11px; }
  .lp-val { color:var(--text); font-size:11px; }
  .lp-stagebar { display:flex; gap:3px; margin:8px 0 4px; }
  .lp-stage { flex:1; height:4px; border-radius:2px; background:var(--border); }
  .lp-stage.done { background:var(--green); }
  .lp-stage.current { background:var(--primary); }
  .lp-note { font-size:10px; color:var(--muted); line-height:1.4; margin-top:6px; padding-top:6px; border-top:1px solid var(--border); }
  .lp-pins-link { font-size:10px; color:var(--primary); text-decoration:none; display:inline-flex; align-items:center; gap:3px; margin-top:6px; }
  .lp-pins-link:hover { text-decoration:underline; }
  .lp-no-data { padding:24px; text-align:center; color:var(--muted); font-size:12px; }

  /* badges */
  .lp-badge { display:inline-block; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:600; white-space:nowrap; }
  .lp-adopted  { background:#dcfce7; color:#166534; }
  .lp-reg19    { background:#fef3c7; color:#92400e; }
  .lp-reg18    { background:#dbeafe; color:#1e40af; }
  .lp-gw1      { background:#ede9fe; color:#5b21b6; }
  .lp-none     { background:#fee2e2; color:#991b1b; }
  .lp-unknown  { background:#f3f4f6; color:#6b7280; }

  /* inline district badge in table */
  .lp-inline { display:inline-block; padding:1px 5px; border-radius:6px; font-size:9px; font-weight:600; margin-left:4px; vertical-align:middle; }

  /* popup override */
  .lp-popup-badge { display:inline-block; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:600; }

  /* LP tab filter controls */
  #lp-filters { display:none; padding:8px 12px 4px; border-bottom:1px solid var(--border); flex-shrink:0; gap:6px; flex-direction:column; }
  #lp-filters.active { display:flex; }
  #lp-filters .row { display:flex; gap:8px; align-items:center; }
  #lp-filters label { font-size:12px; color:var(--muted); white-space:nowrap; }
  #lp-filters select, #lp-filters input { flex:1; padding:5px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; font-family:inherit; min-width:0; }

  .lp-export-tools {
    margin-top:4px;
    border:1px solid var(--border);
    border-radius:7px;
    background:#f8fafc;
    overflow:hidden;
  }
  .lp-export-tools summary {
    cursor:pointer;
    list-style:none;
    padding:7px 9px;
    font-size:12px;
    color:var(--muted);
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .lp-export-tools summary::-webkit-details-marker { display:none; }
  .lp-export-tools summary::after { content:'+'; font-weight:800; color:var(--primary); }
  .lp-export-tools[open] summary::after { content:'−'; }
  .lp-export-tools-body { padding:0 9px 9px; display:flex; flex-direction:column; gap:6px; }
  .lp-export-tools-body button {
    align-self:flex-start;
    padding:6px 12px;
    border:1px solid var(--primary);
    background:var(--primary);
    color:white;
    border-radius:6px;
    font-size:12px;
    font-family:inherit;
    cursor:pointer;
    font-weight:600;
  }
  .lp-export-tools-body button:hover { filter:brightness(0.95); }
  .lp-export-note { font-size:11px; color:var(--muted); line-height:1.35; }

  /* type pill in table rows */
  .type-pill { display:inline-block; padding:1px 5px; border-radius:4px; font-size:9px; font-weight:700; margin-right:4px; vertical-align:middle; letter-spacing:0.02em; }
  .type-pill.tom  { background:#e0e7ff; color:#3730a3; }
  .type-pill.cpbc { background:#fce7f3; color:#9d174d; }

  

  /* Mobile sidebar toggle: lets the map take the full screen on phones/tablets */
  #mobile-sidebar-toggle {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1300;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: white;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: pointer;
  }
  #mobile-sidebar-toggle:focus {
    outline: 3px solid rgba(26,68,128,0.25);
    outline-offset: 2px;
  }

  @media (max-width: 900px) {
    main { position: relative; }
    #mobile-sidebar-toggle { display: inline-flex; align-items: center; gap: 4px; }
    #sidebar {
      height: 50%;
      min-height: 260px;
      max-height: 58%;
      border-right: none;
      border-bottom: 1px solid var(--border);
    }
    #map { flex: 1; height: auto; min-height: 260px; }
    body.mobile-sidebar-collapsed #sidebar { display: none; }
    body.mobile-sidebar-collapsed #map { height: 100%; min-height: 0; flex: 1; }
    body.mobile-sidebar-collapsed #mobile-sidebar-toggle {
      background: white;
      color: var(--primary);
      border-color: var(--primary);
    }
  }


  /* ── DNO / electricity network overlays ── */
  :root {
    --dno: #f59e0b;
    --dno-dark: #b45309;
    --dno-light: #fef3c7;
    --dno-station: #0ea5e9;
    --dno-headroom-good: #14b8a6;
    --dno-headroom-mid: #f59e0b;
    --dno-headroom-low: #ef4444;
  }
  .dno-station-marker {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--dno-station);
    border: 2px solid white;
    box-shadow: 0 0 0 2px rgba(249,115,22,0.35), 0 2px 6px rgba(0,0,0,0.35);
    transform: rotate(45deg);
    position: relative;
  }
  .dno-station-marker::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: white;
    opacity: 0.95;
  }
  .dno-station-marker.grid { background:#0ea5e9; box-shadow:0 0 0 2px rgba(14,165,233,0.35), 0 2px 6px rgba(0,0,0,0.35); }
  .dno-station-marker.primary { background:#f97316; }
  .dno-station-marker.good { background:var(--dno-headroom-good); }
  .dno-station-marker.mid { background:var(--dno-headroom-mid); }
  .dno-station-marker.low { background:var(--dno-headroom-low); }
  .dno-station-marker.unknown { background:#94a3b8; box-shadow:0 0 0 2px rgba(148,163,184,0.35), 0 2px 6px rgba(0,0,0,0.35); }
  .dno-station-cluster {
    background: transparent;
  }
  .dno-station-cluster .dno-cluster-inner {
    width: 38px;
    height: 38px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, rgba(14,116,144,0.74), rgba(125,211,252,0.58));
    border: 2px solid rgba(255,255,255,0.92);
    border-radius: 9px;
    box-shadow: 0 2px 7px rgba(15,23,42,0.22), 0 0 0 2px rgba(14,116,144,0.13);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0.88;
  }
  .dno-station-cluster .dno-cluster-inner span {
    transform: rotate(-45deg);
    color:#083344;
    font-size:12px;
    font-weight:800;
    line-height:1;
    text-shadow:0 1px 1px rgba(255,255,255,0.65);
  }
  .dno-station-cluster.medium .dno-cluster-inner { width:44px; height:44px; border-radius:10px; }
  .dno-station-cluster.large .dno-cluster-inner { width:50px; height:50px; border-radius:11px; }
  .dno-cell { font-size:11px; color:var(--muted); margin-top:2px; line-height:1.3; }
  .dno-pill { display:inline-block; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:700; background:var(--dno-light); color:var(--dno-dark); white-space:nowrap; }
  .dno-pill.good { background:#ccfbf1; color:#0f766e; }
  .dno-pill.mid { background:#fef3c7; color:#92400e; }
  .dno-pill.low { background:#fee2e2; color:#991b1b; }
  #dno-control {
    position:absolute;
    /* Stacked with the map key so they do not overlap when open. */
    top:84px;
    right:20px;
    z-index:1000;
    width:235px;
    background:white;
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 2px 10px rgba(0,0,0,0.18);
    padding:9px 10px;
    font-size:12px;
  }
  #dno-control .dno-title { font-weight:700; color:var(--dno-dark); margin-bottom:6px; display:flex; justify-content:space-between; gap:6px; }
  #dno-control label { display:flex; align-items:center; gap:6px; margin:4px 0; cursor:pointer; }
  #dno-control input { margin:0; }
  .dno-subfilters {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px 8px;
    margin:3px 0 6px 18px;
    padding:4px 0 4px 8px;
    border-left:2px solid rgba(8,145,178,0.18);
  }
  .dno-subfilters label { margin:1px 0 !important; font-size:11px; color:#374151; }
  .dno-dot { width:9px; height:9px; border-radius:999px; display:inline-block; box-shadow:0 0 0 1px rgba(0,0,0,0.12); }
  .dno-dot.good { background:var(--dno-headroom-good); }
  .dno-dot.mid { background:var(--dno-headroom-mid); }
  .dno-dot.low { background:var(--dno-headroom-low); }
  .dno-dot.unknown { background:#94a3b8; }
  #dno-status { color:var(--muted); font-size:11px; margin-top:6px; line-height:1.35; }
  #dno-refresh { border:1px solid var(--dno-dark); background:white; color:var(--dno-dark); border-radius:999px; padding:1px 7px; font-size:10px; cursor:pointer; }
  #dno-refresh:hover { background:var(--dno-dark); color:white; }
  .dno-modal-grid { display:grid; grid-template-columns:145px 1fr; gap:7px 14px; font-size:13px; line-height:1.45; }
  .dno-modal-grid .lbl { color:var(--muted); font-weight:600; }
  .dno-modal-grid .val { color:#111827; }
  .dno-source-note { margin-top:12px; color:var(--muted); font-size:11px; line-height:1.4; border-top:1px solid var(--border); padding-top:8px; }
  .dno-area-label {
    background:rgba(255,255,255,0.78);
    border:1px solid rgba(249,115,22,0.45);
    color:#92400e;
    border-radius:999px;
    padding:2px 8px;
    font-size:11px;
    font-weight:700;
    box-shadow:0 1px 4px rgba(0,0,0,0.15);
    pointer-events:none;
  }
  @media (max-width: 900px) {
    #dno-control { top:84px; right:10px; width:210px; font-size:11px; }
    body.mobile-sidebar-collapsed #dno-control { top:84px; }
    #legend { top:260px; right:10px; max-width:210px; }
    #table th:nth-child(5), #table td:nth-child(5) { display:none; }
  }



  /* ── Motorway multi-select + approved sites ── */
  .multi-filter { position:relative; flex:1; min-width:0; }
  .multi-filter-button {
    width:100%; padding:6px 28px 6px 10px; border:1px solid var(--border); border-radius:6px;
    background:white; color:var(--text); font-size:13px; font-family:inherit; text-align:left;
    cursor:pointer; position:relative; min-height:31px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .multi-filter-button::after { content:'▾'; position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:11px; }
  .multi-filter.open .multi-filter-button::after { content:'▴'; }
  .multi-filter-menu {
    display:none; position:absolute; left:0; right:0; top:100%; z-index:1250; margin-top:2px;
    background:white; border:1px solid var(--border); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.16);
    max-height:260px; overflow:auto; padding:6px;
  }
  .multi-filter.open .multi-filter-menu { display:block; }
  .multi-filter-actions { display:flex; gap:6px; padding:4px 4px 6px; border-bottom:1px solid var(--border); margin-bottom:4px; }
  .multi-filter-actions button { flex:1; border:1px solid var(--border); background:#f8fafc; border-radius:5px; padding:4px 6px; font-size:11px; cursor:pointer; }
  .multi-filter-actions button:hover { background:var(--primary-light); color:var(--primary); }
  .multi-filter-option { display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:5px; font-size:12px; cursor:pointer; }
  .multi-filter-option:hover { background:var(--primary-light); }
  .approve-cell { width:46px; text-align:center; }
  .approve-box { transform:scale(1.15); cursor:pointer; accent-color:var(--green); }
  .approved-chip { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px; background:#dcfce7; color:#166534; font-size:10px; font-weight:700; vertical-align:middle; }
  #export-approved-csv {
    padding:6px 12px; border:1px solid var(--green); background:var(--green); color:white; border-radius:6px;
    font-size:12px; font-family:inherit; cursor:pointer; font-weight:600; margin-left:6px;
  }
  #export-approved-csv:hover { filter:brightness(0.95); }

  .approval-json-btn {
    padding:6px 10px;
    border:1px solid #16a34a;
    background:#fff;
    color:#166534;
    border-radius:6px;
    font-size:12px;
    font-family:inherit;
    cursor:pointer;
    font-weight:600;
    margin-left:6px;
  }
  .approval-json-btn:hover { background:#dcfce7; }

  .multi-filter-search {
    width:100%;
    padding:6px 8px;
    border:1px solid var(--border);
    border-radius:5px;
    font-size:12px;
    font-family:inherit;
    margin:2px 0 6px;
  }
  .multi-filter-option.hidden { display:none; }
  .approval-tools {
    margin-top:6px;
    border:1px solid var(--border);
    border-radius:6px;
    background:#f8fafc;
    overflow:hidden;
  }
  .approval-tools summary {
    cursor:pointer;
    list-style:none;
    padding:6px 9px;
    font-size:12px;
    color:var(--muted);
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .approval-tools summary::-webkit-details-marker { display:none; }
  .approval-tools summary::after { content:'+'; font-weight:800; color:var(--primary); }
  .approval-tools[open] summary::after { content:'−'; }
  .approval-tools-body {
    display:flex;
    gap:6px;
    padding:0 8px 8px;
    flex-wrap:wrap;
  }
  .approval-json-btn { margin-left:0 !important; }

  @media (max-width: 900px) {
    .multi-filter-menu { max-height:210px; }
    #table th.approve-cell, #table td.approve-cell { display:table-cell; }
  }



  /* Collapsible map key / DNO controls */
  .panel-collapse-btn {
    border:1px solid var(--border);
    background:#fff;
    color:var(--muted);
    border-radius:999px;
    width:22px;
    height:22px;
    line-height:18px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .panel-collapse-btn:hover { color:var(--primary); border-color:var(--primary); }
  #legend .legend-title { display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600; margin-bottom:4px; }
  #legend.collapsed { padding:8px 10px; min-width:110px; }
  #legend.collapsed .legend-body { display:none; }
  #legend.collapsed .legend-title { margin-bottom:0; }
  #dno-control .dno-title-actions { display:flex; align-items:center; gap:5px; flex-shrink:0; }
  #dno-control.collapsed { width:auto; min-width:150px; padding:8px 10px; }
  #dno-control.collapsed .dno-body { display:none; }
  #dno-control.collapsed .dno-title { margin-bottom:0; }
  #dno-status { display:none !important; }


  /* Final right-side panel spacing: sit below Leaflet road-map layer selector */
  #dno-control {
    top: 128px !important;
    right: 20px !important;
  }
  #legend {
    top: 326px !important;
    right: 20px !important;
  }
  #dno-control.collapsed {
    min-width: 176px;
  }
  #legend.collapsed {
    min-width: 132px;
  }

  @media (max-width: 900px) {
    #dno-control { top: 118px !important; right: 10px !important; }
    body.mobile-sidebar-collapsed #dno-control { top: 118px !important; }
    #legend { top: 306px !important; right: 10px !important; }
  }


  /* Right-side controls stack: sits below Leaflet base-layer selector and keeps DNO + key spaced together */
  #right-control-stack {
    position:absolute;
    top:236px;
    right:20px;
    z-index:1000;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    max-width:250px;
    pointer-events:none;
  }
  #right-control-stack #dno-control,
  #right-control-stack #legend {
    position:static !important;
    top:auto !important;
    right:auto !important;
    width:235px;
    max-width:235px;
    pointer-events:auto;
  }
  #right-control-stack #dno-control.collapsed { width:auto; min-width:176px; max-width:235px; }
  #right-control-stack #legend.collapsed { width:auto; min-width:132px; max-width:235px; }
  @media (max-width: 900px) {
    #right-control-stack { top:214px; right:10px; gap:10px; max-width:220px; }
    #right-control-stack #dno-control,
    #right-control-stack #legend { width:210px; max-width:210px; }
    #right-control-stack #dno-control.collapsed { width:auto; min-width:158px; }
    #right-control-stack #legend.collapsed { width:auto; min-width:118px; }
  }

  


  /* UX controls: sidebar + table column visibility */
  #sidebar-toggle {
    position:absolute;
    top:12px;
    left:12px;
    z-index:1250;
    border:1px solid var(--primary);
    background:var(--primary);
    color:white;
    border-radius:999px;
    padding:7px 11px;
    font-size:12px;
    font-weight:700;
    font-family:inherit;
    box-shadow:0 2px 8px rgba(0,0,0,0.22);
    cursor:pointer;
    display:none;
  }
  #sidebar-toggle:hover { filter:brightness(0.95); }
  body.sidebar-collapsed #sidebar { display:none; }
  body.sidebar-collapsed #sidebar-toggle { display:inline-flex; background:white; color:var(--primary); }
  @media (min-width: 901px) { #sidebar-toggle { display:inline-flex; } }
  @media (max-width: 900px) { #sidebar-toggle { display:none; } }

  .column-tools {
    margin-top:6px;
    border:1px solid var(--border);
    border-radius:6px;
    background:#f8fafc;
    overflow:hidden;
  }
  .column-tools summary {
    cursor:pointer;
    list-style:none;
    padding:6px 9px;
    font-size:12px;
    color:var(--muted);
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .column-tools summary::-webkit-details-marker { display:none; }
  .column-tools summary::after { content:'+'; font-weight:800; color:var(--primary); }
  .column-tools[open] summary::after { content:'−'; }
  .column-tools-body { display:grid; grid-template-columns:1fr; gap:3px; padding:0 8px 8px; }
  .column-tools-body label { display:flex; align-items:center; gap:6px; font-size:12px; color:#374151; }

  body.hide-col-road #table .col-road,
  body.hide-col-dno #table .col-dno,
  body.hide-col-power #table .col-power,
  body.hide-col-gas #table .col-gas,
  body.hide-col-fibre #table .col-fibre,
  body.hide-col-transmission #table .col-transmission { display:none; }

  .dno-subfilter-details {
    margin:2px 0 5px 18px;
    border-left:2px solid rgba(8,145,178,0.18);
  }
  .dno-subfilter-details summary {
    cursor:pointer;
    list-style:none;
    font-size:11px;
    color:#374151;
    font-weight:700;
    padding:2px 0 3px 8px;
  }
  .dno-subfilter-details summary::-webkit-details-marker { display:none; }
  .dno-subfilter-details summary::after { content:' +'; color:var(--dno-dark); font-weight:800; }
  .dno-subfilter-details[open] summary::after { content:' −'; }
  .dno-subfilter-details .dno-subfilters {
    margin:0;
    border-left:none;
    padding:3px 0 4px 8px;
  }

  /* Compact motorway/road filter menu: real road refs first, tidy spacing. */
  #motorway-options { min-width: 265px; }
  #motorway-checkboxes { display:grid; grid-template-columns:repeat(2, minmax(86px, 1fr)); gap:2px 6px; }
  .multi-filter-option { padding:3px 5px; line-height:1.15; min-height:24px; align-items:center; gap:4px; }
  .multi-filter-option input { margin:0 3px 0 0; flex:0 0 auto; }
  .multi-filter-option span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .multi-filter-actions { padding:3px 2px 5px; margin-bottom:4px; }
  .multi-filter-search { margin:2px 0 5px; padding:5px 7px; }

  



  /* Transmission network overlay */
  :root { --trans:#e11d48; --trans-dark:#881337; --trans-light:#ffe4e6; --trans-cable:#7c3aed; --trans-sub:#be123c; --trans-tower:#f43f5e; }
  .transmission-line-tooltip {
    background:rgba(76,5,25,0.92);
    border:1px solid rgba(254,205,211,0.85);
    color:white;
    border-radius:6px;
    padding:3px 7px;
    font-size:11px;
    font-weight:700;
    box-shadow:0 1px 5px rgba(0,0,0,0.28);
  }
  .transmission-substation-marker {
    width:19px; height:19px; border-radius:4px;
    background:var(--trans-sub); border:2px solid white;
    box-shadow:0 0 0 3px rgba(225,29,72,0.22), 0 2px 7px rgba(0,0,0,0.30);
    transform:rotate(45deg); position:relative;
  }
  .transmission-substation-marker::after {
    content:''; position:absolute; inset:5px; background:#fff; border-radius:2px; opacity:0.95;
  }
  .transmission-tower-marker {
    width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
    border-bottom:13px solid var(--trans-tower); filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  }
  .transmission-cluster { background:transparent; }
  .transmission-cluster .transmission-cluster-inner {
    width:38px; height:38px; border-radius:10px; background:rgba(225,29,72,0.74);
    border:2px solid rgba(255,255,255,0.95); color:white; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:12px; box-shadow:0 2px 8px rgba(15,23,42,0.28), 0 0 0 3px rgba(225,29,72,0.14);
  }
  .transmission-cluster.medium .transmission-cluster-inner { width:44px; height:44px; }
  .transmission-cluster.large .transmission-cluster-inner { width:50px; height:50px; }
  .transmission-pill { display:inline-block; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:700; background:var(--trans-light); color:var(--trans-dark); white-space:nowrap; }
  .transmission-filter-details { margin:4px 0 6px 0; border:1px solid rgba(225,29,72,0.18); border-radius:7px; background:#fff7f8; overflow:hidden; }
  .transmission-filter-details summary { cursor:pointer; list-style:none; padding:6px 8px; font-size:12px; color:var(--trans-dark); font-weight:800; display:flex; justify-content:space-between; align-items:center; }
  .transmission-filter-details summary::-webkit-details-marker { display:none; }
  .transmission-filter-details summary::after { content:'+'; font-weight:900; }
  .transmission-filter-details[open] summary::after { content:'−'; }
  .transmission-control-body { padding:0 8px 8px; }
  .transmission-control-body .mini-heading { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#9f1239; font-weight:800; margin:6px 0 3px; }
  .transmission-voltage-grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 7px; }
  .transmission-voltage-grid label { font-size:11px !important; margin:1px 0 !important; }
  body.hide-col-transmission #table .col-transmission { display:none; }

  /* Connection / power-station overlay from uploaded connection workbook */
  :root { --power: #9333ea; --power-dark:#581c87; --power-light:#f3e8ff; --gas:#06b6d4; --gas-dark:#0e7490; --gas-light:#cffafe; --fibre:#eab308; --fibre-dark:#854d0e; --fibre-light:#fef9c3; }
  .power-connection-marker {
    width:22px; height:22px; border-radius:50%; background:var(--power);
    border:2px solid #fff; box-shadow:0 0 0 3px rgba(147,51,234,0.28), 0 2px 7px rgba(0,0,0,0.35);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:900;
  }
  .power-connection-marker::before { content:'⚡'; transform:translateY(-0.5px); }
  .power-connection-cluster { background:transparent; }
  .power-connection-cluster .power-cluster-inner {
    width:40px; height:40px; border-radius:50%; background:rgba(147,51,234,0.78);
    border:2px solid rgba(255,255,255,0.94); color:white; display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:800; box-shadow:0 2px 8px rgba(15,23,42,0.28), 0 0 0 3px rgba(147,51,234,0.16);
  }
  .power-connection-cluster.medium .power-cluster-inner { width:46px; height:46px; }
  .power-connection-cluster.large .power-cluster-inner { width:52px; height:52px; }
  .power-pill { display:inline-block; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:700; background:var(--power-light); color:var(--power-dark); white-space:nowrap; }
  .power-cell { font-size:11px; color:var(--muted); margin-top:2px; line-height:1.3; }

  .gas-pipe-line { pointer-events:auto; }

  .fibre-pop-marker {
    width:18px; height:18px; border-radius:50%; background:var(--fibre);
    border:2px solid #111827; box-shadow:0 0 0 3px rgba(234,179,8,0.28), 0 2px 7px rgba(0,0,0,0.32);
    display:flex; align-items:center; justify-content:center; color:#111827; font-size:12px; font-weight:900;
  }
  .fibre-pop-marker::before { content:'◎'; line-height:1; }
  .fibre-pop-cluster { background:transparent; }
  .fibre-pop-cluster .fibre-cluster-inner {
    width:38px; height:38px; border-radius:50%; background:rgba(234,179,8,0.82);
    border:2px solid rgba(17,24,39,0.9); color:#111827; display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:900; box-shadow:0 2px 8px rgba(15,23,42,0.25), 0 0 0 3px rgba(234,179,8,0.18);
  }
  .fibre-pop-cluster.medium .fibre-cluster-inner { width:44px; height:44px; }
  .fibre-pop-cluster.large .fibre-cluster-inner { width:50px; height:50px; }
  .fibre-pill { display:inline-block; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:700; background:var(--fibre-light); color:var(--fibre-dark); white-space:nowrap; }
  .infra-cell { font-size:11px; color:var(--muted); margin-top:2px; line-height:1.3; }

  .gas-pipe-tooltip {
    background:rgba(8,47,73,0.9);
    border:1px solid rgba(103,232,249,0.75);
    color:white;
    border-radius:6px;
    padding:3px 7px;
    font-size:11px;
    font-weight:700;
    box-shadow:0 1px 5px rgba(0,0,0,0.28);
  }
  .power-score-row { display:flex; gap:4px; flex-wrap:wrap; margin-top:3px; }
  .power-score { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border-radius:999px; font-size:10px; font-weight:800; line-height:1.25; border:1px solid rgba(147,51,234,0.15); background:#f5f3ff; color:#5b21b6; }
  .power-score.good { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
  .power-score.mid { background:#fef3c7; color:#92400e; border-color:#fde68a; }
  .power-score.low { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
  @media (max-width: 900px) { #table th:nth-child(6), #table td:nth-child(6) { display:none; } }


  /* UX fix: unobtrusive sidebar arrow and properly aligned column toggles */
  main { position: relative; }
  #sidebar-toggle {
    position:absolute !important;
    top:50% !important;
    left:480px !important;
    transform:translate(-50%, -50%) !important;
    z-index:1400 !important;
    width:28px !important;
    height:64px !important;
    min-width:0 !important;
    padding:0 !important;
    border-radius:0 18px 18px 0 !important;
    display:none;
    align-items:center;
    justify-content:center;
    font-size:20px !important;
    line-height:1;
    font-weight:900;
    box-shadow:0 2px 8px rgba(0,0,0,0.22);
  }
  body.sidebar-collapsed #sidebar-toggle {
    left:0 !important;
    transform:translateY(-50%) !important;
    border-radius:0 18px 18px 0 !important;
  }
  @media (min-width: 901px) { #sidebar-toggle { display:inline-flex !important; } }
  @media (max-width: 900px) { #sidebar-toggle { display:none !important; } }
  .column-tools-body {
    display:flex !important;
    flex-direction:column;
    gap:6px !important;
    padding:0 10px 10px !important;
  }
  .column-tools-body label {
    display:grid !important;
    grid-template-columns:18px 1fr;
    align-items:center;
    column-gap:8px !important;
    font-size:12px;
    line-height:1.25;
  }
  .column-tools-body input[type="checkbox"] {
    margin:0 !important;
    justify-self:center;
  }


  /* Filter panel grouping for easier scanning */
  .filter-panel-body { gap:10px !important; padding:0 10px 12px !important; }
  .filter-section {
    border:1px solid rgba(229,231,235,0.95);
    border-radius:8px;
    background:#fff;
    padding:9px 10px 10px;
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .filter-section-title {
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:1px;
  }
  .filter-section .row { margin:0; }
  .filter-section-actions { background:#f8fafc; }
  .filter-section-actions .approval-tools,
  .filter-section-actions .column-tools { margin-top:2px; background:white; }
  #filter-panel[open] summary { margin-bottom:10px !important; }

  /* Refined brand palette */
  header { background: linear-gradient(90deg, #082e21, #225A45); }
  #status-bar { background:#e7f1ed; color:#082e21; }
  #status-bar .progress { background:#4EA686; }
  #export-csv, #export-approved-csv { background:#082e21 !important; border-color:#082e21 !important; }
  #export-csv:hover, #export-approved-csv:hover { background:#225A45 !important; border-color:#225A45 !important; }
  #tab-bar button.active { color:#082e21; border-bottom-color:#4EA686; }
  .filter-shell summary { color:#082e21; }
  .filter-section h3 { color:#082e21; }
  .filter-section { border-color:#d7e6df; }


  /* Scrollable filter panel: keep filters navigable without stealing the site-list scroll */
  #controls {
    max-height: min(620px, 58vh);
    overflow: visible;
  }
  #filter-panel[open] {
    display:flex;
    flex-direction:column;
    max-height: min(600px, 56vh);
    overflow:hidden;
  }
  #filter-panel[open] > summary {
    flex:0 0 auto;
    position:sticky;
    top:0;
    z-index:2;
    background:#f8fafc;
  }
  #filter-panel[open] .filter-panel-body {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-right:12px !important;
    scrollbar-gutter:stable;
  }
  #filter-panel[open] .filter-panel-body::-webkit-scrollbar { width:10px; }
  #filter-panel[open] .filter-panel-body::-webkit-scrollbar-thumb {
    background:rgba(34,90,69,0.36);
    border-radius:999px;
    border:2px solid #f8fafc;
  }
  #filter-panel[open] .filter-panel-body::-webkit-scrollbar-thumb:hover { background:rgba(34,90,69,0.55); }
  @media (max-width: 900px) {
    #controls { max-height:46vh; }
    #filter-panel[open] { max-height:44vh; }
  }


  

  /* HARD FIX: make the filter panel itself scroll, not the site table or page. */
  #controls {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #filter-panel {
    display: block !important;
    overflow: hidden !important;
  }
  #filter-panel[open] {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(54vh, 560px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #filter-panel > summary {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 3 !important;
    background: #f8fafc !important;
  }
  #filter-panel[open] > .filter-panel-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable !important;
    padding: 0 10px 12px !important;
  }
  #filter-panel:not([open]) > .filter-panel-body {
    display: none !important;
  }
  /* Keep the site table as the remaining scrolling area below the filters. */
  #table-wrap {
    flex: 1 1 auto !important;
    min-height: 160px !important;
    overflow: auto !important;
  }
  /* When the motorway menu is open inside the scrolling filter body, keep it usable. */
  #filter-panel[open] .multi-filter.open .multi-filter-menu {
    position: static !important;
    margin-top: 6px !important;
    max-height: 190px !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }
  @media (max-width: 900px) {
    #filter-panel[open] { max-height: 44vh !important; }
    #table-wrap { min-height: 130px !important; }
  }

  

  /* FORCE FIX: filters panel has its own real scroll viewport. */
  #controls {
    flex: 0 0 auto !important;
    overflow: visible !important;
    max-height: none !important;
  }
  #filter-panel[open] {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
  }
  #filter-panel[open] > summary {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--border) !important;
  }
  #filter-panel[open] > .filter-panel-body {
    display: block !important;
    height: min(520px, calc(100vh - 315px)) !important;
    max-height: min(520px, calc(100vh - 315px)) !important;
    min-height: 180px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 12px 12px 10px !important;
    scrollbar-gutter: stable both-edges !important;
    touch-action: pan-y !important;
  }
  #filter-panel[open] > .filter-panel-body::-webkit-scrollbar { width: 12px; }
  #filter-panel[open] > .filter-panel-body::-webkit-scrollbar-track { background: #eef4f1; border-radius: 999px; }
  #filter-panel[open] > .filter-panel-body::-webkit-scrollbar-thumb {
    background: rgba(34,90,69,0.55);
    border-radius: 999px;
    border: 2px solid #eef4f1;
  }
  #filter-panel[open] > .filter-panel-body::-webkit-scrollbar-thumb:hover { background: rgba(8,46,33,0.72); }
  #filter-panel[open] .multi-filter-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 6px !important;
    max-height: 210px !important;
    overflow-y: auto !important;
  }
  @media (max-width: 900px) {
    #filter-panel[open] > .filter-panel-body {
      height: min(360px, calc(48vh - 72px)) !important;
      max-height: min(360px, calc(48vh - 72px)) !important;
    }
  }

  

  /* Collapsible filter groups */
  .filter-section-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    cursor:pointer;
    user-select:none;
  }
  .filter-section-title::after {
    content:'−';
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:999px;
    border:1px solid #d7e6df;
    color:#082e21;
    background:#FFFCF7;
    font-size:13px;
    font-weight:900;
    line-height:1;
    flex:0 0 auto;
  }
  .filter-section.collapsed > :not(.filter-section-title) { display:none !important; }
  .filter-section.collapsed .filter-section-title { margin-bottom:0; }
  .filter-section.collapsed .filter-section-title::after { content:'+'; }


  /* Power connection multi-select mirrors the LPA picker, but works on connection stations. */
  .filter-section.no-collapse .filter-section-title {
    cursor: default;
  }
  .filter-section.no-collapse .filter-section-title::after {
    display: none;
  }
  #power-wrap { position: relative; flex: 1; min-width: 0; }
  #power-connection-filter {
    width: 100%;
    padding: 6px 24px 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
  }
  #power-connection-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
    line-height: 1;
    display: none;
  }
  #power-connection-clear:hover { color: var(--text); }
  #power-connection-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 1350;
    box-shadow: 0 4px 12px rgba(0,0,0,0.14);
    margin-top: 2px;
    display: none;
  }
  #power-connection-suggest div {
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.25;
  }
  #power-connection-suggest div:hover, #power-connection-suggest div.active { background: var(--primary-light); }
  #power-selected-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; min-height:0; }
  .power-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; background:var(--power-light); color:var(--power-dark); font-size:11px; font-weight:600; max-width:100%; }
  .power-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }
  .power-chip button { border:none; background:transparent; color:var(--power-dark); cursor:pointer; padding:0; font-size:14px; line-height:1; }

  
  #clear-all-filters:hover { background:#e7f1ed !important; border-color:#4EA686 !important; }

  
  .clear-filters-btn {
    padding:6px 12px;
    border:1px solid #4EA686;
    background:#FFFCF7;
    color:#082e21;
    border-radius:6px;
    font-size:12px;
    font-family:inherit;
    cursor:pointer;
    font-weight:700;
  }
  .clear-filters-btn:hover { background:#e7f1ed; border-color:#225A45; }

  

  /* Approval workflow upgrade */
  .approval-workflow-panel {
    display:none;
    border-bottom:1px solid var(--border);
    padding:8px 12px;
    background:#f8fafc;
    gap:8px;
    flex-direction:column;
  }
  .approval-workflow-panel.active { display:flex; }
  .approval-workflow-panel .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .approval-workflow-panel label { font-size:12px; color:var(--muted); white-space:nowrap; }
  .approval-workflow-panel select, .approval-workflow-panel input {
    padding:5px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; font-family:inherit; min-width:120px;
  }
  .approval-workflow-panel button, .approval-action-btn {
    border:1px solid var(--secondary, #225A45);
    background:#fff;
    color:var(--secondary, #225A45);
    border-radius:6px;
    padding:5px 9px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
  }
  .approval-workflow-panel button.primary, .approval-action-btn.primary { background:var(--secondary, #225A45); color:#fff; }
  .approval-workflow-panel button.danger, .approval-action-btn.danger { border-color:#b91c1c; color:#b91c1c; }
  .approval-workflow-panel button:hover, .approval-action-btn:hover { filter:brightness(0.96); }
  .approval-bulk-actions { display:flex; gap:6px; flex-wrap:wrap; }
  .approval-controls {
    display:grid;
    grid-template-columns: minmax(92px, 1fr) minmax(80px, 0.8fr) auto auto;
    gap:4px;
    margin-top:5px;
    max-width:420px;
  }
  .approval-controls select, .approval-controls input {
    width:100%; border:1px solid var(--border); border-radius:5px; padding:3px 5px; font-size:11px; font-family:inherit;
  }
  .approval-controls .approval-notes { grid-column: 1 / -1; }
  .approval-ready-label { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); white-space:nowrap; }
  .approval-status-chip { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px; font-size:10px; font-weight:800; vertical-align:middle; }
  .approval-status-approved { background:#dcfce7; color:#166534; }
  .approval-status-maybe { background:#fef3c7; color:#92400e; }
  .approval-status-rejected { background:#fee2e2; color:#991b1b; }
  .approval-status-exported { background:#dbeafe; color:#1e40af; }
  .approval-batch-tag { display:inline-block; margin-left:4px; color:var(--muted); font-size:10px; }
  @media (max-width: 900px) { .approval-controls { grid-template-columns: 1fr; } }


  /* Approved workspace LPA multi-select */
  .approval-lpa-wrap { position:relative; flex:1.2; min-width:180px; }
  #approval-lpa-filter { width:100%; padding:5px 25px 5px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; font-family:inherit; }
  #approval-lpa-clear { position:absolute; right:5px; top:5px; border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; line-height:1; padding:2px 5px; display:none; }
  #approval-lpa-clear:hover { color:var(--text); }
  #approval-lpa-suggest { position:absolute; top:30px; left:0; right:0; z-index:1500; background:white; border:1px solid var(--border); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.14); max-height:220px; overflow:auto; display:none; }
  #approval-lpa-suggest div { padding:6px 9px; font-size:12px; cursor:pointer; }
  #approval-lpa-suggest div:hover { background:var(--primary-light); }
  #approval-lpa-chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
  #approval-lpa-chips .lpa-chip { font-size:10px; padding:2px 7px; }


  /* Export & display layout tidy-up */
  .filter-section-actions {
    gap: 10px !important;
  }
  .export-display-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:18px;
  }
  .export-display-header #filter-count {
    font-size:12px;
    color:var(--muted);
    line-height:1.3;
  }
  .export-button-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }
  .export-display-btn,
  #export-csv.export-display-btn,
  #export-approved-csv.export-display-btn,
  .filter-section-actions .approval-action-btn {
    width:100% !important;
    min-height:36px;
    margin:0 !important;
    padding:8px 10px !important;
    border-radius:8px !important;
    font-size:12px !important;
    font-weight:800 !important;
    font-family:inherit !important;
    cursor:pointer;
    white-space:normal !important;
    line-height:1.15;
    text-align:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .export-display-btn.primary,
  #export-csv.export-display-btn.primary,
  #export-approved-csv.export-display-btn.primary {
    background:#082e21 !important;
    border:1px solid #082e21 !important;
    color:#fff !important;
  }
  .export-display-btn.approve,
  .filter-section-actions #bulk-approve-filtered {
    background:#225A45 !important;
    border:1px solid #225A45 !important;
    color:#fff !important;
  }
  .export-display-btn.secondary,
  .filter-section-actions #bulk-unapprove-filtered {
    background:#fff !important;
    border:1px solid #225A45 !important;
    color:#225A45 !important;
  }
  .export-display-btn:hover { filter:brightness(0.96); }
  .filter-section-actions .approval-tools,
  .filter-section-actions .column-tools {
    margin-top:0 !important;
    border-radius:8px;
  }
  .approval-tools-body {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:0 10px 10px !important;
  }
  .approval-tools-body .approval-json-btn {
    width:100%;
    min-height:34px;
    margin:0 !important;
    border-radius:8px;
    font-weight:800;
  }
  @media (max-width: 520px) {
    .export-button-grid { grid-template-columns:1fr; }
  }

  

  /* V11 sidebar structure guard: tabs and site table must stay under filters inside sidebar */
  @media (min-width: 901px) {
    main { display:flex !important; align-items:stretch !important; min-width:0 !important; }
    #sidebar { flex:0 0 480px !important; width:480px !important; min-width:480px !important; max-width:480px !important; overflow:hidden !important; }
    #map { flex:1 1 auto !important; min-width:0 !important; width:auto !important; }
    #sidebar #tab-bar, #sidebar #approval-workflow-panel, #sidebar #lp-filters, #sidebar #lp-panel, #sidebar #table-wrap { width:100% !important; max-width:100% !important; }
    #sidebar #table-wrap { flex:1 1 auto !important; min-height:0 !important; overflow:auto !important; }
  }
  .approval-contacted-label { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); white-space:nowrap; }
  .approval-contacted-label.is-contacted { color:#065f46; font-weight:800; background:#d1fae5; border:1px solid #a7f3d0; border-radius:999px; padding:2px 7px; }
  .contacted-chip { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px; background:#ccfbf1; color:#0f766e; font-size:10px; font-weight:900; vertical-align:middle; letter-spacing:0.02em; }
  tr.row.contacted-row td { background:rgba(204,251,241,0.32); }
  tr.row.contacted-row:hover td { background:rgba(204,251,241,0.52); }
  tr.row.contacted-row .name-cell { color:#064e3b; }