/* ============================================================
   WASM app — mobile baseline (max-width: 768px)

   App-wide responsive foundation for EVERY RFS.Client (WASM)
   feature area: RFS Home, GAD / Projects, Change Control, Admin,
   Data Management and Survey. Desktop (> 768px) is untouched.

   Loaded last in App.razor so it layers on top of the per-feature
   stylesheets (gad-projects.css, change-control.css, etc.).
   ============================================================ */

/* --- Single consistent app bar ---
   Hide the shared RFS work-list's own MobileBottomNav (Queue/Support/
   Search) in THIS host app so the one app-wide MobileNavBar is the only
   bottom bar everywhere. Host-only CSS — does not affect TetraWeb. The
   ticket detail keeps its own "Back to List" button for navigation. */
.mobile-bottom-nav {
    display: none !important;
}

@media (max-width: 768px) {

    /* --- Clear the fixed mobile bottom nav on every page --- */
    .rfs-body-no-pad > .rz-body,
    .rz-body.rfs-body-no-pad,
    .rfs-body-no-pad {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- Tighten desktop page padding so content isn't cramped --- */
    .gad-page,
    .cc-page,
    .cc-admin,
    .cc-wizard,
    .admin-hub,
    .rfs-admins,
    .assignee-management,
    .survey-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* --- Page headers: stack title above actions instead of overflowing --- */
    .gad-page-header,
    .page-header,
    .cc-page-header,
    .cc-wizard-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    /* --- Button toolbars / action rows wrap instead of overflowing --- */
    .header-actions,
    .gad-action-bar,
    .cc-wizard-actions,
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-wrap: wrap;
    }

    /* --- Wide HTML tables: scroll horizontally rather than break layout --- */
    .gad-data-table,
    table.table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* --- Radzen DataGrid: keep inside viewport, scroll internally --- */
    .rz-datatable,
    .rz-datagrid,
    .rz-data-grid {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Native selects / inputs go full-width for easier tapping --- */
    .gad-page select.form-select,
    .cc-wizard select.form-select,
    .cc-admin select.form-select,
    .assignee-management select.form-select {
        width: 100% !important;
        max-width: 100%;
    }

    /* --- Admin landing card grid: single column --- */
    .admin-cards {
        grid-template-columns: 1fr !important;
    }

    /* --- Change Control wizard: stack the two-pane layout --- */
    .cc-wizard-layout {
        display: block !important;
    }

    /* --- GAD stat-card rows already use Bootstrap .row; ensure gaps stay sane --- */
    .gad-page .row.g-3 > [class*="col-"] {
        margin-bottom: 0.5rem;
    }
}