/* 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);
}
