/* ============================================================================
   App-authored responsive layer (loaded LAST so it wins over the Cuba theme).
   Every rule lives inside a max-width media query, so desktop rendering is
   untouched. Scope: layout chrome + form/dashboard screens. The SmartGrid /
   BlazorDatasheet spreadsheet screens are intentionally left desktop-oriented
   (horizontal scroll) for a later phase.
   ============================================================================ */

/* ---- Tablet / phone: off-canvas sidebar drawer ------------------------------
   Pairs with wwwroot/js/mobile-nav.js which toggles #pageWrapper.spq-nav-open. */
@media (max-width: 991.98px) {

    /* The primary sidebar slides off-screen and floats above content as a drawer. */
    #pageWrapper .sidebar-wrapper {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px !important;
        max-width: 82vw;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1045;
        overflow-y: auto;
    }

    #pageWrapper.spq-nav-open .sidebar-wrapper {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }

    /* Content spans the full width; the drawer overlays it instead of pushing it. */
    #pageWrapper .page-body-wrapper .page-body {
        margin-left: 0 !important;
    }

    /* Dim overlay behind the open drawer. */
    .spq-nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease;
        z-index: 1044;
    }

    .spq-nav-backdrop.show {
        opacity: 1;
        visibility: visible;
    }

    /* Make sure the header toggle is visible and tappable on mobile. */
    .toggle-sidebar {
        display: inline-flex !important;
        align-items: center;
        cursor: pointer;
        padding: 6px;
    }
}

/* ---- Phone: header chrome --------------------------------------------------- */
@media (max-width: 767.98px) {

    /* Reclaim horizontal space: tighten the page gutters. */
    .container-fluid.root-container,
    .page-body .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* De-clutter the header: drop the breadcrumb row but keep the page title. */
    .header-wrapper .left-header nav[aria-label="breadcrumb"] {
        display: none !important;
    }
    .header-wrapper .left-header .breadcrumb {
        display: none !important;
    }
    /* Let the title column shrink so the right-side actions stay on screen. */
    .header-wrapper .left-header {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Header right-side actions wrap instead of overflowing off-screen. */
    .header-wrapper .nav-right ul.nav-menus {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Page title row: allow the header to grow taller rather than clip. */
    .page-header .header-wrapper {
        row-gap: 6px;
    }
}

/* ---- Phone: forms, cards, dashboards ---------------------------------------- */
@media (max-width: 767.98px) {

    /* Cards: less inner padding, full-width stacking. */
    .card > .card-body {
        padding: 14px;
    }

    /* Any horizontally-laid form row collapses to a single column. */
    .row.g-3 > [class*="col-"],
    .form-row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Button groups / toolbars wrap instead of forcing horizontal scroll. */
    .d-flex.justify-content-between,
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Inputs stay comfortably tappable (avoids iOS zoom-on-focus < 16px). */
    .form-control,
    .form-select {
        font-size: 16px;
    }

    /* Bootstrap modals / Fluent dialogs: use the full width on phones. */
    .modal-dialog {
        margin: 8px;
        max-width: calc(100vw - 16px);
    }

    /* Plain data tables get a horizontal-scroll container so they never
       blow out the page width. (SmartGrid spreadsheets are excluded — they
       manage their own scrolling.) */
    .table-responsive-auto {
        overflow-x: auto;
    }
    table.table:not(.sheet):not(.datasheet) {
        min-width: 480px;
    }
}