/*
 * zlms-mobile.css — 2026-11-02 v2
 *
 * Mobile responsiveness strategy: HORIZONTAL SCROLL FIRST.
 *
 * Instead of forcing every page's row layout to stack vertically on
 * narrow screens (fragile, breaks admin workflows that expect certain
 * side-by-side controls), we let content keep its natural width and
 * allow smooth horizontal scrolling.
 *
 * The user swipes/scrolls sideways to reach controls that don't fit.
 * This matches patterns used by major admin apps (Jira, Asana admin,
 * ServiceNow) on phone.
 *
 * This file touches ONLY visual properties:
 *   - smooth-scroll on long rows
 *   - tap target minimum size
 *   - typography sanity on tiny screens
 *   - sidebar + chat widget NOT TOUCHED (owned by other systems)
 *   - NO forced flex-direction changes
 *   - NO overflow: hidden on html/body
 */

/* ============================================================
 * Tablet + Phone — <992px
 * ============================================================ */
@media (max-width: 991.98px) {

    /* ----- Hide the two duplicate theme toggle buttons on mobile.
     * The project's own .zlms-mobile-nav-toggle is the correct one. */
    body .site-navbar .navbar-toggler.hamburger,
    body .site-navbar .navbar-toggler[data-target="#site-navbar-collapse"] {
        display: none !important;
    }

    /* ----- Smooth horizontal scrolling on momentum-touch devices.
     * Applied to common wide containers so a flick swipes cleanly. */
    .page-content,
    .panel-body,
    .card-body,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* ----- Tables: wrap in horizontal scroll instead of overflowing
     * the viewport. Preserves column widths; swipe to see more. */
    .page-content table.table,
    .page-content .panel-body > table,
    .page-content .card-body > table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page-content .table-responsive { overflow-x: auto !important; }

    /* ----- Panel padding: tighten so content gets more width. */
    .panel-body { padding: 12px !important; }

    /* ----- Buttons: bigger tap targets per Apple HIG + Material. */
    .btn, .btn-sm { min-height: 36px; }

    /* ----- Breadcrumb: wrap + shrink so a 4-level crumb doesn't scroll. */
    .breadcrumb { flex-wrap: wrap; font-size: 12px; }
    .breadcrumb-item { white-space: normal; }

    /* ----- Modals: full width minus small gutter. */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }

    /* ----- Elements explicitly marked desktop-only. */
    .d-desktop-only, .zlms-desktop-only { display: none !important; }

    /* ----- Chart canvases: cap at parent width so Chart.js doesn't
     * blow out the layout. */
    canvas { max-width: 100% !important; }
}

/* ============================================================
 * Phone — <576px
 * ============================================================ */
@media (max-width: 575.98px) {

    /* ----- Page header: shrink padding and title. */
    .page-header { padding: 10px 0 !important; }
    h1.page-title, .page-title { font-size: 18px !important; margin: 4px 0 !important; }

    /* ----- Tables: shrink font, no-wrap cells so cell contents don't
     * fragment into vertical slivers. User scrolls horizontally. */
    .page-content table.table,
    .page-content table { font-size: 12px !important; }
    .page-content table.table th,
    .page-content table.table td {
        padding: 6px 8px !important;
        white-space: nowrap;
    }

    /* ----- Export / primary action buttons in page headers get tighter. */
    .page-header .btn,
    .page-header a.btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

/* ============================================================
 * Very narrow — <360px (iPhone SE 1st gen)
 * ============================================================ */
@media (max-width: 359.98px) {
    body { font-size: 13px; }
    .btn, .btn-sm {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
}

/* ============================================================
 * Reduced motion: respect user preference.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .page-content,
    .panel-body,
    .card-body,
    .table-responsive { scroll-behavior: auto !important; }
}