/* shell.css
   Application shell: layout tokens + topbar/sidebar/collapse chrome.
   Single source of truth for the shell's dimensions -- every other CSS
   file (map.css, timeline.css, weatherPanel.css, infoPanel.css) reads
   these custom properties instead of hardcoding pixel values, and only
   this file positions the topbar/sidebars. Supersedes the old
   topbar.css + sidebar.css, which each defined conflicting rules for
   #leftbar/#rightbar (one used the --panel-bg token, the other
   hardcoded #000 and happened to load second, so the sidebars were
   silently rendering off-token black). */

:root {
    /* Two rows (2026-10-03): search, views and icons; then the status chips across the full width. */
    --topbar-h: 84px;
    --timeline-h: 60px;

    /* 300px: the Layers panel hosts the hazard/advisory panels that used to be 400px+ dropdowns. */
    --leftbar-w: 300px;
    --leftbar-w-collapsed: 56px;

    --rightbar-w: 320px;
    --rightbar-w-collapsed: 56px;

    /* Live offsets the map reads -- ui/shell.js keeps these in sync
       with each bar's collapsed state. Defaulted to each bar's initial
       state in index.html (left open, right collapsed until an airport is
       picked) so the map is positioned correctly even before JS runs. */
    --leftbar-offset: var(--leftbar-w);
    --rightbar-offset: var(--rightbar-w-collapsed);
}

/* ===============================
   Top bar
   =============================== */
#topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);

    background: var(--panel-bg);
    color: var(--text-light);
    border-bottom: 1px solid var(--panel-border);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 4px 12px;
    padding: 4px 12px;

    z-index: 100000;
}
a.topbar-icon-btn { text-decoration: none; display: inline-flex; align-items: center; }

.topbar-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-checkbox-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-light);
    white-space: nowrap;
    cursor: pointer;
}

#topbar-user-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.topbar-icon-btn {
    background: var(--btn-bg);
    color: var(--text-light);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.topbar-icon-btn:hover:not(:disabled) {
    background: var(--btn-hover);
}

.topbar-icon-btn.active {
    border-color: var(--mint);
    color: var(--mint);
    background: rgba(67, 210, 170, 0.12);
}

.topbar-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ===============================
   Left / right side panels
   =============================== */
#leftbar, #rightbar {
    position: fixed;
    top: var(--topbar-h);
    bottom: var(--timeline-h);

    background: var(--panel-bg);
    color: var(--text-light);

    z-index: 9000;
    overflow-y: auto;
    overflow-x: hidden;

    /* Reserves room for the absolutely-positioned .collapse-btn below
       so it doesn't sit on top of the first panel's header -- it was
       overlapping #weather-header / #infoPanelHeader before. */
    padding-top: 44px;

    transition: width 0.2s ease;
}

#leftbar {
    left: 0;
    width: var(--leftbar-w);
    border-right: 1px solid var(--panel-border);
    
}

#rightbar {
    right: 0;
    width: var(--rightbar-w);
    border-left: 1px solid var(--panel-border);
}

#leftbar.collapsed { width: var(--leftbar-w-collapsed); }
#rightbar.collapsed { width: var(--rightbar-w-collapsed); }

/* Panel content fades out (rather than reflowing/wrapping) while its
   bar is collapsed down to a narrow icon rail. */
#leftbar.collapsed #layers-panel,
#rightbar.collapsed #infoPanel {
    opacity: 0;
    pointer-events: none;
    min-width: 40px;
    width: 40px;
}

.collapse-btn {
    position: absolute;
    top: 8px;
    background: var(--btn-hover);
    color: var(--mint);
    border: 1px solid var(--mint);
    border-radius: 4px;
    cursor: pointer;
    width: 32px;
    height: 28px;
    padding: 4px;
    font-size: 14px;
    line-height: 1;
    z-index: 10001;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Inline SVG icons (ui/icons.js) take the button's text color. */
.ui-icon {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
}

/* Keep each control entirely within its bar. The old negative offsets put
   most of a 50px button outside a parent with overflow-x:hidden, leaving a
   clipped sliver that was hard to target. These positions remain centered
   enough to use in the 56px collapsed rails and never cover the map. */
#leftCollapse { right: 12px; }
#rightCollapse { left: 12px; }

/* Overlay mode (ui/shell.js OVERLAY_BREAKPOINT_PX, 2026-09-28): on a window this narrow -- half a
   widescreen, a laptop, a tablet -- an open side panel floats over the map instead of squeezing it; the
   map keeps the width of the collapsed rails (ui/shell.js sets the offsets). */
@media (min-width: 761px) and (max-width: 1100px) {
    #leftbar:not(.collapsed), #rightbar:not(.collapsed) {
        box-shadow: 0 0 28px rgba(0, 0, 0, 0.55);
        z-index: 9500;
    }
}

@media (max-width: 760px) {
    :root {
        --topbar-h: 120px;
        --timeline-h: 96px;
    }

    #topbar {
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        min-width: 0;
        padding: 6px 8px;
    }

    #searchContainer {
        flex: 1 1 180px;
        min-width: 0;
    }

    #topbar #airportSearch,
    #topbar #searchContainer .autocomplete-items {
        width: 100%;
    }

    #topbar-user-controls {
        flex: 0 0 auto;
        gap: 5px;
        margin-left: 0;
        min-width: 0;
        overflow-x: auto;
        padding-bottom: 0;
        scrollbar-width: none;
    }

    #topbar-user-controls::-webkit-scrollbar {
        display: none;
    }

    /* The account button says "Sign in" to a visitor: room for the word, not a 36 px icon square ("S..."). */
    #topbar-user-controls .topbar-icon-btn.topbar-user-btn {
        gap: 5px;
        padding: 0 10px;
        width: auto;
    }

    .topbar-icon-btn {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 5px 8px;
        font-size: 12px;
    }

    #topbar-user-controls .topbar-icon-btn {
        align-items: center;
        display: inline-flex;
        height: 34px;
        justify-content: center;
        padding: 0;
        width: 36px;
    }

    #leftbar,
    #rightbar {
        top: auto;
        bottom: var(--timeline-h);
        left: 0;
        right: 0;
        width: 100%;
        height: min(46vh, 360px);
        border-top: 1px solid var(--panel-border);
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.42);
        transition: transform 0.22s ease;
    }

    #leftbar {
        border-right: none;
        z-index: 9300;
    }

    #rightbar {
        border-left: none;
        z-index: 9400;
    }

    #leftbar.collapsed,
    #rightbar.collapsed {
        transform: translateY(calc(100% - 44px));
    }

    #leftbar.collapsed {
        right: auto;
        width: 76px;
    }

    #rightbar.collapsed {
        left: auto;
        width: 76px;
    }

    #leftbar.collapsed #layers-panel,
    #rightbar.collapsed #infoPanel {
        width: auto;
    }

    #leftCollapse {
        left: 12px;
        right: auto;
    }

    #rightCollapse {
        left: auto;
        right: 12px;
    }
}

@media (max-width: 480px) {
    :root {
        --topbar-h: 120px;
    }
}

/* iOS Safari zooms the whole page in when a text field or dropdown under 16px is tapped, and leaves it zoomed --
   the side panels' expand buttons then sit outside the window (owner 2026-10-10: "the button to expand a sidebar
   goes outside the window"; tapping the 14px search box did it every time). On touch screens every field is 16px.
   !important: several fields set their size by id. Pinch zoom stays allowed (accessibility). */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}