/* side-panel.css — layout the bundle doesn't own for the side panel and the filter panel (Panel, SearchField,
   FilterToggle, Tooltip, Select cards). The panels' look (.side-panel, .sp-header, .sp-scroll, .filter-toggle,
   .filter-active-count, .op-search, .op-panel) is design-system.css's; nothing here restyles those classes. */

/* Both panels sit on the map beside the 48px rail and slide in from it */
.side-panel,
.filter-popout {
    position: absolute;
    top: 0;
    left: 48px;   /* the rail's width (NavRail card) */
    bottom: 0;
    z-index: var(--z-panel);
    transition: transform var(--duration-moderate) var(--ease-standard), visibility var(--duration-moderate);   /* visible for the whole slide either way, hidden after the slide-out */
}
.side-panel.hidden,
.filter-popout:not(.visible) {
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
}

/* The filter panel is a Panel the height of the map: header and footer stay, the body scrolls */
.filter-popout {
    width: 280px;
    padding: var(--sp-2);
    box-sizing: border-box;
    display: flex;
}
.filter-popout > op-panel > .op-panel {
    display: flex;
    flex-direction: column;
    max-height: 100%;
}
.filter-popout > op-panel > .op-panel > .op-panel-body {
    min-height: 0;
    overflow-y: auto;
}

/* Toggle rows: the Tooltip anchor is the flex child, so it carries the toggle's share of the row */
.sp-toggles > .op-tip-anchor { flex: 1; }
.sp-toggles > .op-tip-anchor > .filter-toggle { width: 100%; }

/* Eight type toggles don't fit one 248px row at 32px each: two rows of four */
.sp-toggle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
}

/* Toggle colours (FilterToggle card: --_toggle-color, a --type-* token for types, --edge-* for modalities) */
#btn-fav-filter { --_toggle-color: var(--warning); }       /* the favourite star's colour */
#btn-new-filter { --_toggle-color: var(--success); }
#btn-bounds-filter,
#btn-filter-popout { --_toggle-color: var(--primary); }
.filter-toggle[data-type="terminal"], .filter-toggle[data-type="port"] { --_toggle-color: var(--type-terminal); }
.filter-toggle[data-type="refinery"] { --_toggle-color: var(--type-refinery); }
.filter-toggle[data-type="plant"]    { --_toggle-color: var(--type-plant); }
.filter-toggle[data-type="station"]  { --_toggle-color: var(--type-station); }
.filter-toggle[data-type="pipeline"] { --_toggle-color: var(--type-pipeline); }
.filter-toggle[data-type="rail"]     { --_toggle-color: var(--type-rail); }
.filter-toggle[data-type="airport"]  { --_toggle-color: var(--type-airport); }
.filter-toggle[data-modality="road"]     { --_toggle-color: var(--edge-truck); }
.filter-toggle[data-modality="rail"]     { --_toggle-color: var(--edge-rail); }
.filter-toggle[data-modality="vessel"],
.filter-toggle[data-modality="barge"]    { --_toggle-color: var(--edge-marine); }
.filter-toggle[data-modality="pipeline"] { --_toggle-color: var(--edge-pipeline); }

/* The review-queue link under the list */
.sp-footer-link { padding: var(--sp-3) var(--sp-4) 0; }

/* The scope Selects (hide-label Fields: their first option is the label) stack with the field gap */
.sp-fields { display: grid; gap: var(--sp-3); }