/* Density on phones and short (landscape) screens — 2026-11-07, UI-DENSITY-01.
   Desktop and tablet-portrait layouts are not touched by anything in this file.
   Loaded after design-system-v3.css. Page-level structure (collapsible filters, «⋯» actions,
   two KPI cards per row) lives in Components/Ui; this file only trims space every page shares. */

/* Phones: the large Bootstrap spacers (1.5rem / 3rem) between page blocks cost a screen per page. */
@media (max-width: 575.98px) {
    .app-shell .page-content .mb-4 { margin-bottom: 1rem !important; }
    .app-shell .page-content .mt-4 { margin-top: 1rem !important; }
    .app-shell .page-content .mb-5 { margin-bottom: 1.5rem !important; }
    .app-shell .page-content .py-5 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
    .app-shell .page-content .form-label { margin-bottom: .25rem; }
    .app-shell .page-content h3,
    .app-shell .page-content .h3 { font-size: 1.125rem; }
}

/* Touch screens scroll the shortcut bar with a finger; its scrollbar only takes a row of height. */
@media (hover: none) and (pointer: coarse), (max-width: 767.98px), (max-height: 500px) {
    /* !important: the bar's own rules are component-scoped and therefore more specific. */
    .quick-access-scroll { scrollbar-width: none !important; }
    .quick-access-scroll::-webkit-scrollbar { display: none !important; }
}

/* Phone held sideways (~375px high): every fixed band of chrome is a big share of the screen. */
@media (max-height: 500px) and (orientation: landscape) {
    .app-shell .page-content { padding: .5rem .75rem; }
    .app-shell .page-content .card-header { min-height: 0; padding: .5rem .75rem; }
    .app-shell .page-content .card-body { padding: .625rem .75rem; }
    .app-shell .page-content .mb-4 { margin-bottom: .75rem !important; }
    .app-shell .page-content .mt-4 { margin-top: .75rem !important; }
    .app-shell .page-content .py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .app-shell .page-content .form-label { margin-bottom: .2rem; }
    .app-shell .page-content h3,
    .app-shell .page-content .h3 { font-size: 1.125rem; }
    .quick-access { min-height: 0 !important; padding-top: .25rem !important; padding-bottom: .25rem !important; }
    .quick-access-item { min-height: 2rem !important; padding-top: .2rem !important; padding-bottom: .2rem !important; }

    /* Summary cards (StatCard) share one row instead of stacking two per row. */
    .app-shell .page-content .row > [class*="col"]:has(> .ui-stat) { flex: 1 1 0; width: auto; max-width: none; }
}