/* ============================================================
   GLOBAL MOBILE FIX — applies to ALL pages, dashboards, sub-pages
   Loaded AFTER style.css so it wins on cascade
   ============================================================ */

/* 1) Universal touch + text wrap baseline (all viewports) */
* { -webkit-tap-highlight-color: rgba(0,0,0,0.1); }
html {
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
}
body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    -webkit-text-size-adjust: 100%;
}
a, button, [role="button"], .btn, input[type="submit"], input[type="button"],
.nav-link, .dropdown-item, .list-group-item, label, select, .form-check-label {
    touch-action: manipulation;
}

/* Prevent any element forcing the page wider than viewport */
img, video, iframe, canvas, svg, embed, object {
    max-width: 100%;
    height: auto;
}

/* Long words / urls / IDs must wrap not blow out width */
p, li, td, th, dd, dt, span, div.text-wrap, .card-text, .breadcrumb-item,
.alert, .badge, .form-text, small, code:not(pre code) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================
   MOBILE (<= 991.98px) — covers phones AND tablets in portrait
   ============================================================ */
@media (max-width: 991.98px) {

    /* a) NEVER let any layout container clip horizontal scrolling */
    html, body, #wrapper, .main-content, .main-content > *,
    .container, .container-fluid, .container-sm, .container-md, .container-lg,
    .row, .col, [class*="col-"], main, section, article,
    .tab-content, .tab-pane, .accordion, .accordion-item, .accordion-body,
    .modal-content, .modal-body, .offcanvas-body {
        overflow-x: visible !important;
        max-width: 100% !important;
    }

    /* Ensure page-level vertical scroll is never blocked */
    html {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }
    body, #wrapper, .main-content {
        overflow-y: visible !important;
    }

    /* b) Body content area must use full available width */
    .main-content,
    .main-content.expanded,
    main {
        margin-left: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* c) Dashboard cards / sub-cards: full width stack */
    .card, .card-deck > *, .card-group > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .card-body { padding: 0.85rem !important; }

    /* d) Tables: wrap in horizontal scroll container */
    .table-responsive,
    .table-wrapper,
    .scrollable-x {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin;
    }
    .table-responsive::-webkit-scrollbar,
    .table-wrapper::-webkit-scrollbar { height: 6px; }
    .table-responsive::-webkit-scrollbar-thumb,
    .table-wrapper::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 3px; }

    table, .table {
        width: max-content !important;
        min-width: 100% !important;
        max-width: none !important;
        margin-bottom: 0.5rem;
    }
    table th, table td, .table th, .table td {
        white-space: nowrap;
        vertical-align: middle;
    }
    /* Force table out of any clipping parent */
    table:not(.table-responsive table):not(.table-wrapper table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* e) Forms: full-width, stacked, large tap targets */
    form, fieldset { width: 100% !important; max-width: 100% !important; }
    .form-control, .form-select, .input-group, textarea, select, input[type="text"],
    input[type="email"], input[type="password"], input[type="number"],
    input[type="search"], input[type="date"], input[type="tel"], input[type="url"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: 42px;
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }
    textarea { min-height: 80px; }
    .row > [class*="col-"] { margin-bottom: 0.75rem; }
    .input-group { flex-wrap: wrap; }
    .input-group > * { flex: 1 1 auto; }

    /* f) Buttons / button groups: wrap and tap-sized */
    .btn { min-height: 40px; padding: 0.45rem 0.85rem; }
    .btn-group, .btn-toolbar { flex-wrap: wrap; gap: 0.35rem; }
    .btn-group > .btn { border-radius: 0.375rem !important; }
    .d-flex.justify-content-end, .d-flex.justify-content-between {
        flex-wrap: wrap; gap: 0.4rem;
    }

    /* g) Nav tabs / pills: scrollable horizontally */
    .nav-tabs, .nav-pills, .nav.nav-underline {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-item, .nav-pills .nav-item { flex: 0 0 auto; }
    .nav-tabs .nav-link, .nav-pills .nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.85rem;
    }

    /* h) Sidebar/offcanvas: ensure ALL menu items are reachable */
    .offcanvas, .offcanvas-body, #sidebar, .sidebar {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: 100vh;
    }
    .offcanvas-body .nav, .sidebar .nav, .offcanvas-body .list-group {
        padding-bottom: 6rem; /* breathing room past last item */
    }
    .offcanvas .nav-link, .sidebar .nav-link, .offcanvas .list-group-item {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
        min-height: 44px;
    }

    /* i) Modals: full-screen-ish on mobile */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
    .modal-content { max-height: 95vh; overflow-y: auto; }

    /* j) Dropdowns: don't overflow viewport */
    .dropdown-menu {
        max-width: calc(100vw - 16px) !important;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* k) Headings + breadcrumbs scale down */
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
    .display-1, .display-2, .display-3, .display-4 { font-size: 1.6rem !important; }
    .breadcrumb {
        flex-wrap: wrap;
        font-size: 0.85rem;
    }

    /* l) Stat / metric cards stack vertically */
    .stat-card, .metric-card, .summary-card { width: 100% !important; }

    /* m) Pagination: scroll if many pages */
    .pagination {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .pagination::-webkit-scrollbar { display: none; }

    /* n) Lists / list-groups: prevent overflow */
    .list-group, .list-group-item {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* o) Pre / code blocks: scroll instead of break */
    pre, code, .hljs {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: pre;
    }

    /* p) DataTables (if used) */
    .dataTables_wrapper, .dataTables_scroll, .dataTables_scrollBody {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* q) Charts (Chart.js / canvas) */
    canvas { max-width: 100% !important; height: auto !important; }
    .chart-container { width: 100% !important; max-width: 100% !important; overflow-x: auto; }

    /* r) Mobile topbar always full-width */
    .mobile-topbar { width: 100% !important; }
    .mobile-topbar > * { width: 100% !important; }

    /* s) Kill any inline width that breaks viewport */
    [style*="width:"][style*="px"]:not(.preserve-width):not(.btn):not(.icon),
    [style*="min-width:"][style*="px"]:not(.preserve-width) {
        max-width: 100% !important;
    }
}

/* ============================================================
   EXTRA SMALL (<= 575.98px) — phones
   ============================================================ */
@media (max-width: 575.98px) {
    .container, .container-fluid { padding-left: 8px !important; padding-right: 8px !important; }
    .card-body { padding: 0.7rem !important; }
    .btn { font-size: 0.9rem; }
    .table { font-size: 0.85rem; }
    .modal-dialog { margin: 0 !important; max-width: 100% !important; }
    .modal-content { border-radius: 0; min-height: 100vh; }
}

/* ============================================================
   PRINT — keep usable
   ============================================================ */
@media print {
    .offcanvas, .mobile-topbar, .sidebar, .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; }
}

/* ============================================================
   PWA STANDALONE MODE — ensure scrolling works without browser chrome
   ============================================================ */
@media (display-mode: standalone) {
    html, body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto;
        height: auto !important;
        min-height: 100vh;
    }
    #wrapper, .main-content {
        overflow-y: visible !important;
        height: auto !important;
        min-height: 100vh;
    }
}