/* ═══════════ LAYOUT GRID ═══════════ */
    body, html { height: 100vh !important; overflow: hidden !important; margin: 0; }
    body {
        display: grid !important;
        grid-template-rows: 48px 1fr !important;
        grid-template-columns: 52px 1fr !important;
        grid-template-areas: "topbar topbar" "dock map" !important;
    }

    /* ═══════════ TOPBAR ═══════════ */
    .navbar {
        grid-area: topbar !important;
        height: 48px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        border-bottom: 1px solid var(--border-color) !important;
        background: var(--bg-primary) !important;
        z-index: 2000 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }
    .navbar-left { flex: 0 0 auto; }
    .app-name { font-size: 0.9rem !important; }
    .desktop-title { display: none !important; }

    /* Geocoder stretches in topbar */
    .geocoder-wrap {
        position: static !important;
        transform: none !important;
        top: auto !important; left: auto !important;
        flex: 1 1 auto !important;
        max-width: 400px !important;
        margin: 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .geocoder-inner {
        border-radius: 10px !important;
        box-shadow: none !important;
        border: 1px solid var(--border-color) !important;
    }
    .geocoder-input { font-size: 0.84rem !important; padding: 7px 0 !important; }
    .geocoder-dropdown { z-index: 3000 !important; }

    /* ═══════════ DOCK (icon rail) ═══════════ */
    .sidebar { display: none !important; }
    .desktop-sidebar-toggle { display: none !important; }
    .sidebar-toggle { display: none !important; }

    .dock {
        grid-area: dock;
        display: flex; flex-direction: column; align-items: center;
        background: var(--bg-primary);
        border-right: 1px solid var(--border-color);
        z-index: 1200;
        padding: 6px 0; gap: 2px;
    }
    .dock-btn {
        width: 44px; height: 44px;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 3px;
        border: none; border-radius: 10px;
        background: transparent; cursor: pointer;
        color: #94a3b8;
        font-size: 1rem;
        transition: all 0.18s; position: relative;
    }
    .dock-btn span {
        font-size: 0.52rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.05em; line-height: 1;
    }
    .dock-btn:hover { background: var(--bg-panel); color: var(--text-primary); }
    .dock-btn.active { background: rgba(14,165,233,0.1); color: var(--accent-color); }
    .dock-btn.active::after {
        content: '';
        position: absolute; left: 0; top: 22%; bottom: 22%;
        width: 3px; border-radius: 0 3px 3px 0;
        background: var(--accent-color);
    }
    .dock-sep { width: 28px; height: 1px; background: var(--border-color); margin: 4px 0; flex-shrink: 0; }

    /* ═══════════ DOCK PANEL ═══════════ */
    .dock-panel {
        position: fixed;
        top: 48px; left: 52px; bottom: 38px;
        width: 290px;
        background: var(--bg-primary);
        border-right: 1px solid var(--border-color);
        box-shadow: 4px 0 20px rgba(0,0,0,0.07);
        z-index: 1100;
        display: flex; flex-direction: column;
        transform: translateX(0);
        transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
        overflow: hidden;
    }
    body.sidebar-collapsed .dock-panel { transform: translateX(-115%); }

    .dock-panel-hdr {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 14px 10px;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    .dock-panel-title {
        font-size: 0.78rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.07em;
        color: var(--text-primary);
        display: flex; align-items: center; gap: 7px;
    }
    .dock-panel-title i { color: var(--accent-color); }
    .dock-panel-close {
        width: 26px; height: 26px;
        display: flex; align-items: center; justify-content: center;
        border: none; border-radius: 6px;
        background: transparent; cursor: pointer;
        color: var(--text-secondary); font-size: 0.85rem;
        transition: background 0.15s;
    }
    .dock-panel-close:hover { background: var(--bg-panel); }

    .dock-section { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 12px; display: none; }
    .dock-section.active { display: block; }

    /* ═══════════ MAP AREA ═══════════ */
    #map {
        grid-area: map !important;
        position: relative !important;
        height: 100% !important;
        width: 100% !important;
        z-index: 1 !important;
    }
    body:not(.sidebar-collapsed) .leaflet-left { left: 302px !important; }
    body.sidebar-collapsed    .leaflet-left { left: 10px !important; }
    .leaflet-bottom { bottom: 38px !important; }

    /* ═══════════ STATS STRIP ═══════════ */
    .footer-stats { display: none !important; }
    .stats-strip {
        position: fixed; bottom: 0; left: 52px; right: 0;
        height: 38px; z-index: 900;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--border-color);
        display: flex; align-items: center;
        padding: 0 12px; gap: 0; overflow: hidden;
    }
    .ss-item {
        display: flex; align-items: baseline; gap: 4px;
        padding: 0 12px;
        border-right: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    .ss-item:first-child { padding-left: 0; }
    .ss-item:last-child { border-right: none; }
    .ss-lbl {
        font-size: 0.58rem; font-weight: 800;
        text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--text-secondary);
    }
    .ss-val {
        font-size: 0.8rem; font-weight: 700;
        color: var(--accent-color);
        font-variant-numeric: tabular-nums;
    }

    /* ═══════════ BASEMAP GRID in dock ═══════════ */
    .bm-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 2px 0 8px;
    }
    .bm-btn {
        padding: 10px 6px; border: 1px solid var(--border-color);
        border-radius: 10px; background: var(--bg-panel);
        cursor: pointer; text-align: center;
        font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
        transition: all 0.18s;
        display: flex; flex-direction: column; align-items: center; gap: 5px;
    }
    .bm-btn i { font-size: 1rem; }
    .bm-btn:hover { border-color: var(--accent-color); color: var(--accent-color); background: rgba(14,165,233,0.05); }
    .bm-btn.active { border-color: var(--accent-color); background: rgba(14,165,233,0.09); color: var(--accent-color); }
    .bm-section-label {
        font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.06em; color: var(--text-secondary);
        margin: 12px 0 6px;
    }

    /* ═══════════ MAP ACTION BUTTONS ═══════════ */
    .map-actions {
        position: absolute !important;
        right: 12px !important; bottom: 52px !important;
        flex-direction: column !important; gap: 6px !important;
        z-index: 1000 !important;
    }
    .map-action-btn {
        width: 38px !important; height: 38px !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.13) !important;
    }

    /* ═══════════ LAYER PANEL TWEAKS ═══════════ */
    .layer-item { padding: 5px 6px !important; }
    .layer-label { font-size: 0.82rem !important; }
    .group-title { font-size: 0.72rem !important; }
    .layer-search { font-size: 0.82rem !important; }
    .layer-search-wrap { margin-bottom: 10px !important; }
    .layer-group { margin-bottom: 14px !important; }

    /* ═══════════ COMPARE PANEL ═══════════ */
    #compare-panel { top: 10px !important; }
    .compare-sel { min-width: 90px !important; font-size: 0.77rem !important; }

    /* ═══════════ MOBILE ═══════════ */
    @media (max-width: 768px) {
        body {
            grid-template-columns: 1fr !important;
            grid-template-areas: "topbar" "map" !important;
        }
        .dock { display: none !important; }
        .dock-panel { top: 48px; left: 0; width: min(300px, 100vw); bottom: 38px; }
        body:not(.sidebar-collapsed) .dock-panel { transform: translateX(0); }
        body:not(.sidebar-collapsed) .leaflet-left { left: 10px !important; }
        .stats-strip { left: 0; }
        .geocoder-wrap { max-width: calc(100vw - 180px) !important; }
        .mobile-dock-fab {
            display: flex !important;
            position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%);
            gap: 8px; z-index: 2000;
        }
        .mobile-dock-fab button {
            width: 48px; height: 48px; border-radius: 50%;
            border: none; background: var(--accent-color); color: white;
            font-size: 1.1rem; box-shadow: 0 4px 12px rgba(14,165,233,0.4);
            cursor: pointer;
        }
    }
    @media (min-width: 769px) { .mobile-dock-fab { display: none; } }
    .hidden { display: none !important; }
    .nav-actions { display: flex; gap: 8px; align-items: center; }
    .user-menu { position: relative; }
    .nav-btn-login { 
        padding: 6px 12px; border: 1px solid var(--border-color); 
        background: transparent; color: var(--text-primary); 
        font-weight: 600; border-radius: 6px; cursor: pointer; 
        font-size: 0.8rem; transition: all 0.2s;
    }
    .nav-btn-login:hover { background: var(--bg-panel); border-color: var(--accent-color); color: var(--accent-color); }
    
    .nav-btn-signup { 
        padding: 6px 14px; background: var(--accent-color); 
        color: white; border: none; font-weight: 600; 
        border-radius: 6px; cursor: pointer; font-size: 0.8rem;
        transition: all 0.2s;
    }
    .nav-btn-signup:hover { background: #0284c7; box-shadow: 0 2px 6px rgba(14,165,233,0.3); }

    .user-btn { 
        display: flex; align-items: center; gap: 6px; 
        background: white; border: 1px solid var(--border-color);
        padding: 6px 10px; border-radius: 6px; cursor: pointer;
        font-weight: 600; color: var(--text-primary); font-size: 0.85rem;
        transition: all 0.2s;
    }
    .user-btn:hover { border-color: var(--accent-color); background: var(--bg-panel); }
    
    .user-dropdown-content {
        position: absolute; top: 100%; right: 0; margin-top: 8px;
        background: white; border: 1px solid var(--border-color);
        border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        min-width: 160px; z-index: 3000; display: none;
    }
    .user-dropdown-content.show { display: block; }
    .user-dropdown-content a {
        display: flex; align-items: center; gap: 8px;
        padding: 10px 14px; color: var(--text-secondary);
        text-decoration: none; font-size: 0.85rem; transition: background 0.2s;
    }
    .user-dropdown-content a:hover { background: var(--bg-panel); color: var(--text-primary); }

    .nav-btn-modelling {
        background: rgba(139, 92, 246, 0.1);
        color: #8b5cf6;
        border: 1px solid rgba(139, 92, 246, 0.3);
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        font-size: 0.8rem;
        transition: all 0.2s;
    }
    .nav-btn-modelling:hover {
        background: rgba(139, 92, 246, 0.2);
        border-color: #8b5cf6;
        transform: translateY(-1px);
    }
    
    @media (max-width: 768px) {
        .btn-text { display: none; }
    }

    /* Aircraft tracking side panel */
    #aircraft-panel {
        position: fixed;
        top: 90px;
        right: -360px;
        width: 320px;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
        padding: 16px 18px 18px;
        z-index: 1000;
        transition: right 0.25s ease;
        font-size: 0.92em;
        color: #1e293b;
    }
    #aircraft-panel.open { right: 16px; }

    /* --- Alerts panel ---------------------------------------------------- */
    #alerts-panel {
        position: fixed;
        top: 90px;
        right: -400px;
        width: 360px;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
        padding: 16px 18px 18px;
        z-index: 1001;
        transition: right 0.25s ease;
        font-size: 0.92em;
        color: #1e293b;
    }
    #alerts-panel.open { right: 16px; }
    #alerts-panel .panel-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 12px;
    }
    #alerts-panel .panel-title {
        font-weight: 700; color: #b91c1c; letter-spacing: .5px; font-size: .85em;
    }
    #alerts-panel .panel-close {
        background: none; border: none; font-size: 1.1em; cursor: pointer;
        color: #94a3b8; padding: 0 4px; line-height: 1;
    }
    #alerts-panel .panel-close:hover { color: #475569; }
    #alerts-toolbar { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
    #alerts-toolbar button {
        border: 1px solid #e2e8f0; background: #f8fafc; color: #475569;
        border-radius: 6px; padding: 4px 9px; font-size: .74rem; cursor: pointer;
        font-weight: 600;
    }
    #alerts-toolbar button:hover { background: #eef2f7; }
    #alerts-toolbar button.active { background: #1e293b; color: #fff; border-color: #1e293b; }
    #alerts-toolbar button[disabled] { opacity: .55; cursor: default; }
    #alerts-run { background: #b91c1c !important; color: #fff !important; border-color: #b91c1c !important; }
    .alert-item {
        border: 1px solid #e2e8f0; border-left-width: 4px; border-radius: 8px;
        padding: 9px 11px; margin-bottom: 8px; background: #fff;
    }
    .alert-item.sev-high { border-left-color: #dc2626; }
    .alert-item.sev-medium { border-left-color: #f59e0b; }
    .alert-item.sev-low { border-left-color: #64748b; }
    .alert-item.is-ack { opacity: .55; }
    .alert-item .a-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
    .alert-item .a-title { font-weight: 650; color: #0f172a; font-size: .84rem; line-height: 1.3; }
    .alert-item .a-sev {
        font-size: .6rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .4px; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
    }
    .sev-high .a-sev { background: #fee2e2; color: #b91c1c; }
    .sev-medium .a-sev { background: #fef3c7; color: #b45309; }
    .sev-low .a-sev { background: #f1f5f9; color: #475569; }
    .alert-item .a-detail { color: #64748b; font-size: .76rem; margin-top: 4px; line-height: 1.4; }
    .alert-item .a-meta { color: #94a3b8; font-size: .68rem; margin-top: 5px; }
    .alert-item .a-actions { margin-top: 7px; display: flex; gap: 6px; }
    .alert-item .a-actions button {
        border: 1px solid #e2e8f0; background: #fff; color: #475569;
        border-radius: 5px; padding: 3px 8px; font-size: .68rem; cursor: pointer;
    }
    .alert-item .a-actions button:hover { background: #f1f5f9; }
    #alerts-empty { color: #94a3b8; font-size: .8rem; padding: 14px 2px; text-align: center; }
    #alerts-status { font-size: .7rem; color: #94a3b8; margin-top: 8px; }
    /* Bell + unread badge in the topbar */
    #alerts-bell { position: relative; background: none; border: none; cursor: pointer;
        color: #475569; font-size: 1rem; padding: 4px 6px; }
    #alerts-bell:hover { color: #b91c1c; }
    #alerts-badge {
        position: absolute; top: -2px; right: -3px; background: #dc2626; color: #fff;
        border-radius: 9px; min-width: 15px; height: 15px; font-size: .6rem;
        font-weight: 700; display: none; align-items: center; justify-content: center;
        padding: 0 3px; line-height: 1;
    }
    @media (max-width: 640px) {
        #alerts-panel { width: auto; left: 8px; right: -100%; top: 76px; }
        #alerts-panel.open { right: 8px; }
    }
    #aircraft-panel .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    #aircraft-panel .panel-title {
        font-weight: 700;
        color: #b45309;
        letter-spacing: 0.5px;
        font-size: 0.85em;
    }
    #aircraft-panel .panel-close {
        background: none;
        border: none;
        font-size: 1.1em;
        cursor: pointer;
        color: #94a3b8;
        padding: 0 4px;
        line-height: 1;
    }
    #aircraft-panel .panel-close:hover { color: #475569; }
    #aircraft-panel .callsign {
        font-size: 1.4em;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 2px;
    }
    #aircraft-panel .subline {
        color: #64748b;
        font-size: 0.85em;
        margin-bottom: 12px;
    }
    #aircraft-panel .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 14px;
        margin-bottom: 14px;
    }
    #aircraft-panel .grid .lbl {
        color: #94a3b8;
        font-size: 0.72em;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }
    #aircraft-panel .grid .val {
        color: #1e293b;
        font-weight: 600;
        font-size: 0.95em;
    }
    #aircraft-panel .footer {
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8em;
        color: #64748b;
    }
    #aircraft-panel .footer a { color: var(--accent-color); text-decoration: none; }
    #aircraft-panel .footer a:hover { text-decoration: underline; }
    .aircraft-icon.selected svg path {
        fill: #ef4444;
        stroke: #7f1d1d;
        stroke-width: 1.2;
    }
    .aircraft-trail {
        stroke: #ef4444;
        stroke-width: 2;
        stroke-dasharray: 4 4;
        stroke-opacity: 0.75;
        fill: none;
    }

    /* Inline filter row that appears under the Aircraft toggle */
    .aircraft-filters {
        display: none;
        flex-direction: column;
        gap: 5px;
        padding: 8px 12px 10px 28px;
        background: #f8fafc;
        border-radius: 8px;
        margin: 2px 0 6px 0;
        font-size: 0.85em;
    }
    .aircraft-filters.show { display: flex; }
    .aircraft-filters label {
        display: flex; align-items: center; gap: 6px;
        color: #475569; cursor: pointer;
    }
    .aircraft-filters input[type="checkbox"] {
        width: 13px; height: 13px; cursor: pointer;
    }
    .aircraft-filters .filter-divider {
        height: 1px; background: #e2e8f0; margin: 2px 0;
    }
    .aircraft-filters .btn-link {
        align-self: flex-start;
        background: none; border: none; padding: 0;
        color: #2563eb; cursor: pointer; text-decoration: underline;
        font-size: 0.9em;
    }
    .aircraft-filters .btn-link:hover { color: #1e40af; }

    /* Recent flights modal */
    #airport-flights-modal {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 2000;
    }
    #airport-flights-modal.open { display: flex; }
    #airport-flights-modal .mc-card {
        width: min(720px, 92vw);
        max-height: 82vh;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border-radius: 14px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        padding: 22px 24px;
        color: #1e293b;
    }
    #airport-flights-modal .mc-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 12px;
    }
    #airport-flights-modal .mc-title {
        font-weight: 700; color: #b45309;
        font-size: 0.85em; letter-spacing: 0.6px;
    }
    #airport-flights-modal .mc-close {
        background: none; border: none; cursor: pointer;
        font-size: 1.3em; color: #94a3b8; line-height: 1; padding: 0 4px;
    }
    #airport-flights-modal .mc-close:hover { color: #475569; }
    #airport-flights-modal .mc-tabs {
        display: flex; gap: 6px; margin-bottom: 14px;
    }
    #airport-flights-modal .mc-tab {
        padding: 6px 12px; border-radius: 8px;
        background: #f1f5f9; border: none; cursor: pointer;
        font-size: 0.88em; color: #475569; font-weight: 500;
    }
    #airport-flights-modal .mc-tab.active {
        background: #b45309; color: #ffffff;
    }
    #airport-flights-modal .mc-body {
        overflow-y: auto;
        padding-right: 4px;
    }
    #airport-flights-modal .mc-section-title {
        font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.8px;
        color: #94a3b8; margin: 14px 0 6px;
    }
    #airport-flights-modal .mc-row {
        display: grid;
        grid-template-columns: 100px 1fr auto;
        gap: 10px; padding: 8px 4px;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.9em;
        align-items: center;
    }
    #airport-flights-modal .mc-row:hover { background: #f8fafc; }
    #airport-flights-modal .mc-callsign {
        font-weight: 600; color: #0f172a; font-family: ui-monospace, Menlo, monospace;
    }
    #airport-flights-modal .mc-meta { color: #475569; font-size: 0.92em; }
    #airport-flights-modal .mc-time { color: #94a3b8; font-size: 0.82em; }
    #airport-flights-modal .mc-empty {
        padding: 18px; text-align: center; color: #94a3b8; font-size: 0.9em;
    }

    /* Isochrone tool — the launcher FAB is retired; isochrones now live in the
       "Travel-time" dock tool. Kept in the DOM (hidden) so existing JS that
       reads #iso-fab/#iso-fab-label for state doesn't break. */
    #iso-fab { display: none !important; }
    #iso-fab-legacy {
        position: fixed;
        bottom: 60px;
        right: 16px;
        z-index: 900;
        display: flex; align-items: center; gap: 8px;
        padding: 10px 14px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
        cursor: pointer;
        font-size: 0.88em; font-weight: 600;
        color: #1e293b;
        transition: all 0.2s;
    }
    #iso-fab:hover { background: #f8fafc; }
    #iso-fab.active { background: var(--accent-color); color: #ffffff; border-color: var(--accent-hover); }
    #iso-fab .iso-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #94a3b8;
    }
    #iso-fab.active .iso-dot { background: #ffffff; }

    #iso-settings {
        position: fixed;
        bottom: 110px;
        right: 16px;
        z-index: 901;
        display: none;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
        padding: 14px 16px;
        width: 240px;
        font-size: 0.88em;
        color: #1e293b;
    }
    #iso-settings.open { display: block; }
    #iso-settings .iso-row {
        display: flex; flex-direction: column; gap: 6px;
        margin-bottom: 10px;
    }
    #iso-settings label { color: #475569; font-size: 0.85em; }
    #iso-settings select {
        padding: 6px 8px;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        font-size: 0.9em;
        background: #ffffff;
    }
    #iso-settings .iso-ranges {
        display: flex; flex-wrap: wrap; gap: 6px;
    }
    #iso-settings .iso-ranges label {
        display: flex; align-items: center; gap: 4px;
        background: #f1f5f9;
        padding: 4px 8px;
        border-radius: 999px;
        cursor: pointer;
        font-size: 0.82em;
    }
    #iso-settings .iso-ranges input { margin: 0; }
    #iso-settings .iso-hint {
        font-size: 0.78em; color: #64748b;
        margin-top: 6px;
        line-height: 1.4;
    }
    #iso-settings .iso-clear {
        margin-top: 8px;
        background: none; border: 1px solid #e2e8f0;
        border-radius: 6px; padding: 6px 10px;
        font-size: 0.82em; color: #475569; cursor: pointer;
        width: 100%;
    }
    #iso-settings .iso-clear:hover { background: #f8fafc; }
    .leaflet-container.iso-active { cursor: crosshair !important; }
    
/* --- Shared legend panel ------------------------------------------------ */
/* One panel for every analysis layer. Sections stack rather than competing
   for the same corner, and each caveat sits behind a disclosure so the map
   is not permanently covered by a paragraph of methodology. */
.map-legend {
    background: rgba(255, 255, 255, .96);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .16);
    font-size: .74rem;
    color: #334155;
    line-height: 1.45;
    max-width: 250px;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.map-legend-section { padding: 10px 12px; }
.map-legend-section + .map-legend-section { border-top: 1px solid #e8edf3; }
.map-legend-title {
    font-weight: 700;
    font-size: .71rem;
    color: #0f172a;
    letter-spacing: .2px;
    margin-bottom: 6px;
}
.map-legend-row { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
.map-legend-row i {
    width: 13px; height: 13px; flex: none;
    display: inline-block; opacity: .9;
}
.map-legend-sub { margin-top: 6px; color: #94a3b8; font-size: .68rem; }
.map-legend-toggle {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; font-size: .68rem; color: #475569; cursor: pointer;
}
.map-legend-toggle input { margin: 0; cursor: pointer; }
.map-legend-note { margin-top: 7px; }
.map-legend-note summary {
    cursor: pointer; color: #64748b; font-size: .67rem;
    list-style: none; user-select: none;
}
.map-legend-note summary::-webkit-details-marker { display: none; }
.map-legend-note summary::before { content: '\24D8  '; opacity: .7; }
.map-legend-note summary:hover { color: #334155; }
.map-legend-note p {
    margin: 5px 0 0; color: #64748b; font-size: .66rem; line-height: 1.5;
}
@media (max-width: 640px) {
    .map-legend { max-width: 165px; font-size: .68rem; max-height: 45vh; }
    .map-legend-section { padding: 8px 9px; }
}
.alerts-trends-link {
    margin-left: auto; align-self: center;
    font-size: .72rem; font-weight: 600;
    color: #475569; text-decoration: none;
}
.alerts-trends-link:hover { color: #0f172a; }

/* --- Collapsible layer sections ----------------------------------------- */
/* 62 rows in 14 always-open sections meant scrolling past everything to reach
   anything. Closed sections keep the list to its 14 headers. */
.layer-group .group-header {
    cursor: pointer;
    user-select: none;
    gap: 7px;
}
.layer-group .group-header:hover .group-title { color: var(--text-primary, #0f172a); }
.group-chevron {
    font-size: .62rem;
    color: #94a3b8;
    transition: transform .18s ease;
    flex: none;
}
.layer-group.collapsed .group-chevron { transform: rotate(-90deg); }
.group-count {
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent-color, #16a34a);
    border-radius: 9px;
    padding: 1px 6px;
    min-width: 17px;
    text-align: center;
    flex: none;
}
/* Hiding the rows rather than wrapping them keeps the existing markup intact. */
.layer-group.collapsed .layer-item,
.layer-group.collapsed .group-actions,
.layer-group.collapsed > div[id$="-error"] {
    display: none !important;
}
.layer-group .group-header:focus-visible {
    outline: 2px solid var(--accent-color, #16a34a);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --- Icon rail ----------------------------------------------------------- */
/* 44px could not hold "SENTIMENT" at 0.52rem with letter-spacing, so the
   labels overflowed and were cut to "ENTIMENT" / "ODELLING". */
.dock-btn { width: 58px; height: 50px; }
.dock-btn span {
    font-size: .5rem;
    letter-spacing: .02em;
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* An empty strip should not hold space for nothing. */
.stats-strip.stats-empty { opacity: 0; pointer-events: none; }