/* =====================================================
   LAYOUT — The Weather Agency  (Full-screen Map + Floating Overlay Sidebar)
   ===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    background: #000;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── FULL-SCREEN MAP BASE ── */
#map {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

#map .mapboxgl-map,
.mapboxgl-map {
    border-radius: 0 !important;
}

/* ── FLOATING SIDEBAR OVERLAY ──
   Positioned absolutely over the map, does NOT affect map size */
#twa-sidebar {
    position: fixed;
    top: var(--canvas-gap);
    left: var(--canvas-gap);
    bottom: var(--canvas-gap);
    width: var(--sidebar-width);
    z-index: 50;

    display: flex;
    flex-direction: column;
    gap: var(--canvas-gap);
    flex-shrink: 0;

    /* Smooth collapse transition */
    transition:
        width var(--dur-slow) var(--ease-snap);

    overflow: visible;
    /* allow dropdowns to escape */
    will-change: width;
    pointer-events: auto;
}

#twa-sidebar.collapsed {
    width: var(--sidebar-collapsed);
    bottom: auto;
}

#twa-sidebar.collapsed .twa-sidebar-layers-card {
    display: none;
}

/* ── Sidebar top card (brand + toggle + inline search) ── */
.twa-sidebar-header-card {
    background: var(--accent);
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;   /* allow geocoder suggestions to overflow */
    position: relative;
}

/* ── Sidebar layers card (grows to fill remaining height) ── */
.twa-sidebar-layers-card {
    background: var(--panel-bg);
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    border: var(--panel-border);
    /* The .custom-layer-list node gets transplanted directly here by the bridge */
}

/* creation-panel positioning is in components.css (it's created by JS) */

/* ── MAPBOX CONTROLS: top-right — native NavigationControl (zoom + compass) ── */
.mapboxgl-ctrl-top-right {
    top: var(--canvas-gap) !important;
    right: var(--canvas-gap) !important;
    position: fixed !important;
    z-index: 50 !important;
}

.mapboxgl-ctrl-top-left {
    position: fixed !important;
    z-index: 20 !important;
}

.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
    position: fixed !important;
    z-index: 10 !important;
}

/* ── LEGACY HIDDEN REFS (required by JS, never shown) ── */
#card-style-toolbar {
    display: none !important;
}

/* card-style-layers-pane is kept off-screen via inline style (position:fixed top:-9999px)
   so LayerPanel can render into it; bridge script moves its children into the visible sidebar */

/* ── Global scrollbar ── */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.14);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.22);
}