/* Responsive column layout for the universal slider, using container queries.
   Previously lived only in list.html's inline <style> — see
   server/static/js/universal-containers.js for why that's insufficient once
   HTMX menu navigation is involved (list.html's <style> block doesn't travel
   with it either). Loaded in every shell's <head> alongside that file. */
#universal-slider-container {
    container-type: inline-size;
    container-name: slider;
}

/* Default: single column (<1000px) */
#universal-slider-container .grid {
    grid-template-columns: 1fr !important;
}

/* 2 columns when container is 1000px-1399px */
@container slider (min-width: 1000px) {
    #universal-slider-container .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 3 columns when container is >=1400px (wide slider) */
@container slider (min-width: 1400px) {
    #universal-slider-container .grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================================
   Always-visible scrollbars — GLOBAL.

   Modern Chrome/Edge on Windows use auto-hiding OVERLAY scrollbars by
   default — on pages that scroll in an inner container (main-content,
   dashboard panels, docs content, sidebar, nested drill-down tabs) the
   bar is invisible until you actively scroll, which reads as "the
   scrollbar is gone / content is cut off". Explicitly styling
   ::-webkit-scrollbar opts elements back into classic, permanently
   visible scrollbars.

   Global (*) rather than a selector whitelist: the whitelist approach
   missed containers twice (drill-down levels, then the dashboard's inner
   panels). More specific styles (e.g. .modal-body's thin scrollbar)
   still win on specificity.
   ============================================================ */
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--bg-tertiary, #f1f5f9);
}

*::-webkit-scrollbar-thumb {
    background: var(--border-color, #cbd5e1);
    border-radius: 6px;
    border: 2px solid var(--bg-tertiary, #f1f5f9);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, #94a3b8);
}

/* Firefox equivalent — thin but always visible */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color, #cbd5e1) var(--bg-tertiary, #f1f5f9);
}

/* ============================================================
   Sidebar collapse — hide the inner scrollbar when the menu is closed.

   The sidebar's scroll lives on the nav's inner wrapper
   (.side-menu > div, Tailwind `overflow-y-auto`), not on .side-menu itself.
   When the menu is collapsed the wrapper still overflows, so the always-
   visible 12px scrollbar above lingers as a sliver at the screen edge:
     - desktop: .app-grid.menu-closed shrinks the column to 0 and pulls the
       nav off-screen with a negative margin;
     - mobile (<=768px): the nav is position:fixed, off-canvas by default and
       only slid in when .menu-open is set.
   Dropping the wrapper's overflow removes the scrollbar in those states.
   The nav's `overflow-x: hidden` still clips content; here we clip the scroll.
   ============================================================ */
.menu-closed .side-menu > div {
    overflow: hidden;
}

@media (max-width: 768px) {
    .side-menu > div {
        overflow: hidden;
    }
    .menu-open .side-menu > div {
        overflow-y: auto;
    }
}

/* ============================================================
   Main content area must scroll inside the fixed-height app shell.

   #app-shell is `.app-grid` + `h-screen overflow-hidden`, and `.main-content`
   is its main grid item. Grid/flex items default to `min-height: auto`, so
   without this the main content grows to its full content height instead of the
   1fr track, and the overflow-hidden shell clips everything below the viewport
   with NOTHING scrolling — the intermittent "the page won't scroll to the
   bottom" bug. Which page's inline <style> is active after an HTMX content swap
   decides whether it happens, hence the intermittency.

   `.main-content` is only ever defined in per-page inline <style> blocks
   (grid-area/position/z-index, no overflow), so setting it here — in the shared,
   always-loaded stylesheet — makes the main content the page scroller on every
   page consistently. `min-height:0` lets the 1fr track constrain it; overflow-y
   auto gives it the scrollbar. (report_base.html overrides this with
   `overflow:visible !important` for print, which still wins.)
   ============================================================ */
.main-content {
    min-height: 0;
    overflow-y: auto;
}

/* ============================================================
   Spacing between stacked tables — a parent table and its child-data-tabs
   card (and any nested child tables) sit in one same-coloured slab otherwise.
   Give the child card real breathing room plus a top rule, so each reads as a
   distinct table block even though both cards share the surface colour.
   ============================================================ */
.child-data-tabs {
    margin-top: 1.5rem !important;
    border: 1px solid rgb(var(--c-rule));
}
[id^="child-container-"]:not(:empty) {
    margin-top: 1.5rem;
}
