/**
 * responsive-audit.css — Chunk 461
 * ---------------------------------
 * Cross-view responsive audit hardening layer.
 *
 * This stylesheet provides conservative, low-specificity overrides that
 * improve mobile and tablet behaviour across ALL pages without fighting
 * desktop styles. It is loaded globally via config/assets.php and the
 * Header.php fallback list.
 *
 * Sections:
 *   1. Base safety resets (box-sizing, overflow, fluid media)
 *   2. Tablet breakpoint (≤ 1024 px)
 *   3. Mobile breakpoint (≤ 768 px)
 *   4. Small mobile breakpoint (≤ 576 px)
 *
 * Rules are intentionally generic and use class-based selectors already
 * present in the existing markup so no template changes are needed.
 */

/* ==========================================================================
   1. BASE SAFETY — always active, regardless of viewport
   Ensures fundamental responsive guarantees that many pages rely on.
   ========================================================================== */

/* Inherit border-box everywhere so padding never blows out layouts */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent horizontal scrollbar caused by content wider than the viewport */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fluid media: images, SVGs, video, canvas, and embeds scale down safely */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   2. TABLET BREAKPOINT (≤ 1024 px)
   Reduces oversized horizontal padding and lets toolbars/action rows wrap
   so nothing overflows on mid-size screens.
   ========================================================================== */

@media (max-width: 1024px) {

    /* --- Layout wrapper padding reduction ---
       Many pages use .container / .page-container with large desktop padding.
       Tighten them so content has room on tablets. */
    .container,
    .container-fluid,
    .page-container,
    main,
    .content,
    .card-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* --- Toolbar / action-row wrapping ---
       Flex rows that hold buttons or filters should wrap instead of
       overflowing horizontally. */
    .toolbar,
    .page-actions,
    .btn-toolbar,
    .d-flex.gap-1,
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   3. MOBILE BREAKPOINT (≤ 768 px)
   Stacks multi-column layouts, widens form controls, and makes tables
   horizontally scrollable.
   ========================================================================== */

@media (max-width: 768px) {

    /* --- Stack multi-column rows ---
       Grid/flex rows that sit side-by-side on desktop should stack on phones. */
    .row,
    .form-row,
    .filters,
    .page-header,
    .btn-group {
        display: flex;
        flex-direction: column;
    }

    /* Flex children should take full width when stacked */
    .row > [class*="col-"],
    .form-row > [class*="col-"],
    .filters > * {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* --- Full-width form controls in action/filter rows ---
       Ensures selects, inputs, and buttons inside toolbars stretch to fill. */
    .toolbar select,
    .toolbar input,
    .toolbar .btn,
    .page-actions select,
    .page-actions input,
    .page-actions .btn,
    .filters select,
    .filters input,
    .filters .btn {
        width: 100%;
    }

    /* --- Horizontal-scroll tables ---
       Non-destructive: only at this breakpoint, wrap tables so they can
       scroll without breaking the page layout. */
    .table-responsive,
    .table-container {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tables inside a non-responsive wrapper get the same treatment */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ==========================================================================
   4. SMALL MOBILE BREAKPOINT (≤ 576 px)
   Tightens spacing and font sizes for dense headers/cards, and ensures
   primary action buttons remain reachable at full width.
   ========================================================================== */

@media (max-width: 576px) {

    /* --- Tighter spacing for headers and cards --- */
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.25rem; }
    h3, .h3 { font-size: 1.1rem; }

    .card,
    .card-body {
        padding: 0.75rem;
    }

    /* --- Full-width primary action buttons in stacked contexts ---
       Keeps primary CTAs easy to tap on small screens. */
    .btn-group .btn,
    .page-actions .btn,
    .toolbar .btn,
    .form-actions .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Remove bottom margin on the last button to avoid extra gap */
    .btn-group .btn:last-child,
    .page-actions .btn:last-child,
    .toolbar .btn:last-child,
    .form-actions .btn:last-child {
        margin-bottom: 0;
    }
}