/* ════════════════════════════════════════════════════════════════════════
 * Swift Backoffice — Shared Mobile Responsive Stylesheet
 * Version 2 — Comprehensive overhaul
 * ════════════════════════════════════════════════════════════════════════
 *
 * Goals (in order of importance):
 *   1. SCROLL STABILITY — body scroll never gets "stuck", no overscroll
 *      bounce that triggers unwanted reloads, no scroll-jacking, smooth
 *      iOS momentum scrolling everywhere
 *   2. NO HORIZONTAL OVERFLOW — every layout, table, modal, form field
 *      fits within the viewport. Tables become horizontally scrollable
 *      cards instead of bleeding past the right edge.
 *   3. PROPER TOUCH TARGETS — buttons/inputs hit the 44px iOS minimum
 *      without breaking small UI elements (toggles, chips, tabs)
 *   4. MODALS FILL THE SCREEN — every overlay/dialog goes truly full-screen
 *      on phones instead of floating awkwardly
 *   5. SAFE AREA AWARENESS — respect iPhone notch / Android gesture bar
 *      via env(safe-area-inset-*)
 *   6. DESKTOP IS UNTOUCHED — everything inside @media (max-width:768px)
 *
 * All rules are scoped inside @media (max-width: 768px) so desktop layouts
 * are mathematically untouched. If a specific page needs different mobile
 * behaviour, add a page-specific @media block in that page's <style> —
 * it'll override these by being later in the cascade.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Always-on basics (apply at any width) ─────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Account for env safe-area on notched phones in landscape */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

@media (max-width: 768px) {

    /* ════════════════════════════════════════════════════════════════════
       1. SCROLL STABILITY — the "screw loose" fix
       ════════════════════════════════════════════════════════════════════ */

    html, body {
        /* Pages load inside a fixed-height iframe in the shell.
           body must fill the iframe (height:100%) and scroll its own
           content (overflow-y:auto).  This is the ONLY approach that
           works reliably across iOS Safari + Chrome + Firefox.
           The shell's own inline CSS overrides this to overflow:hidden
           for the shell document itself. */
        height: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    /* Kill any aggressive transform on body that flickers during scroll */
    body { transform: none !important; }

    /* ── UNIVERSAL SCROLL / LAYOUT FIX ──────────────────────────────────
       Every backoffice page loads inside a fixed-height iframe in the
       shell.  For scroll to work, the content inside must flow taller
       than the iframe viewport.  That means NO fixed heights and NO
       overflow:hidden on any layout wrapper.  These rules kill the
       five layout patterns that block scroll:
         1. .bo-page { height:100%; overflow:hidden }
         2. .wiz + .sidebar (wizard 2-col)
         3. .panels + .panel-left/.panel-right (paystub 2-col)
         4. .mb-layout + .mb-left (minutebook 2-col)
         5. .sign-layout grid, .doc-layout flex, .rt-layout grid
       ──────────────────────────────────────────────────────────────── */

    /* 1. Page wrapper — kill fixed height + overflow clipping */
    .bo-page {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* 2. Wizard layout — stack vertically */
    .wiz {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        flex-direction: column !important;
    }
    .wiz > .sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        max-height: 140px !important;
        overflow-y: auto !important;
    }
    .wiz > .main,
    .wiz > div:not(.sidebar) {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        overflow: visible !important;
    }

    /* Wizard content padding — 28px desktop padding is too wide at 320px */
    .step-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 3. Panel layout (paystub) — stack vertically */
    .panels {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .panel-left,
    .panel-right {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    /* 4. Minutebook layout */
    .mb-layout {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        flex-direction: column !important;
    }
    .mb-left {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* 5. Grid / flex split layouts — single column */
    .sign-layout,
    .rt-layout {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .doc-layout {
        height: auto !important;
        flex: none !important;
        overflow: visible !important;
    }
    .doc-right,
    .doc-left,
    .sign-panel {
        position: static !important;
        width: 100% !important;
    }

    /* 6. Container overflow — never clip content */
    .container,
    .bo-container {
        overflow: visible !important;
    }

    /* 7. Any header with flex that overflows — wrap it */
    .hdr {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }
    .hdr h1 {
        font-size: 15px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
    .hdr .sub {
        white-space: normal !important;
    }

    /* Sticky elements: ensure they stick correctly on mobile (some browsers
       have issues with sticky inside overflow:hidden ancestors) */
    .sticky, [class*="sticky"] {
        position: sticky;
        top: 0;
    }

    /* ════════════════════════════════════════════════════════════════════
       2. NO HORIZONTAL OVERFLOW — universal guards
       ════════════════════════════════════════════════════════════════════ */

    /* Every element box-sizing: border-box so paddings don't bleed widths */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    /* Media (img/svg/video) never overflow their container */
    img, svg, video, iframe, canvas, picture, embed, object {
        max-width: 100% !important;
        height: auto;
    }
    /* But preserve inline icon sizes — only constrain block media */
    button svg, a svg, .icon svg, [class*="icon"] svg {
        max-width: none !important;
    }

    /* Flex children with content longer than their share will overflow
       unless explicitly told they can shrink to 0. This is the single
       biggest cause of horizontal overflow in flexbox layouts. */
    .flex > *, [class*="flex"] > *, [style*="display:flex"] > *, [style*="display: flex"] > * {
        min-width: 0;
    }

    /* Inputs are notorious for ignoring container width on mobile */
    input, textarea, select {
        max-width: 100% !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       3. INPUTS — no iOS zoom, full-width, proper tap target
       ════════════════════════════════════════════════════════════════════ */

    input, textarea, select {
        font-size: 16px !important;  /* 16px+ prevents iOS auto-zoom */
    }

    /* ════════════════════════════════════════════════════════════════════
       4. CONTAINERS & CARDS — tighter padding for phones
       ════════════════════════════════════════════════════════════════════ */

    .container,
    .bo-container,
    .page-container,
    .main-content {
        padding-left: 14px !important;
        padding-right: 14px !important;
        max-width: 100% !important;
    }

    .card,
    .bo-card,
    .panel,
    .section-card {
        padding: 16px !important;
        border-radius: 8px !important;
        margin-bottom: 14px !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       5. FORMS — single column, full-width controls
       ════════════════════════════════════════════════════════════════════ */

    .form-row,
    .form-grid,
    .form-row.three,
    .form-row.four,
    .form-row.full,
    .field-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .form-group { margin-bottom: 12px !important; }
    .form-group label, .field-label { font-size: 13px !important; }

    .form-control,
    .bo-input,
    select.form-control,
    textarea.form-control {
        font-size: 16px !important;
        padding: 11px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       6. BUTTONS — uniform sizing, 44px tap targets
       Excludes tiny UI bits: toggles, chips, badges, tab buttons, nav items.
       ════════════════════════════════════════════════════════════════════ */

    /* Universal tap-target baseline */
    button:not([class*="toggle"]):not([class*="-tab"]):not(.tab):not(.chip):not(.pill):not(.badge):not(.nav-item):not(.nav-sub-item):not(.nav-sub-sub-item):not(.action-btn):not(.tog-btn):not(.step-item):not(.panel-toggle):not(.ds-btn):not(.dv-tbtn),
    .btn,
    .btn-p,
    .btn-s,
    .btn-ghost,
    .add-btn,
    .radio-btn,
    .chk-item {
        min-height: 40px !important;
        font-size: 13px !important;
        padding: 10px 16px !important;
        border-radius: 8px !important;
        line-height: 1.3 !important;
    }

    /* Action buttons (toolbar icons) — square, icon-only */
    .action-btn {
        min-height: 38px !important;
        width: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        border-radius: 8px !important;
    }
    .action-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Button rows — always wrap, equal spacing */
    .btn-row,
    .button-row,
    .action-row,
    .form-actions,
    .nav-btns,
    .doc-pkg-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Buttons inside header action containers — equal width, uniform */
    .hdr > div[style*="display:flex"] button,
    .hdr > div[style*="display: flex"] button {
        flex: 1 1 calc(50% - 4px) !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 7px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Preview/toolbar action rows — horizontal scroll, no wrap */
    .preview-actions {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        padding: 8px !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       7. TABLES — horizontal scroll instead of breaking layout
       ════════════════════════════════════════════════════════════════════ */

    table {
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        /* Don't let table scroll capture vertical-scroll touches */
        overscroll-behavior-x: contain !important;
    }
    table > thead, table > tbody, table > tfoot { display: table-row-group !important; }
    table > thead { display: table-header-group !important; }
    table > tfoot { display: table-footer-group !important; }
    table tr { display: table-row !important; }
    table td, table th {
        display: table-cell !important;
        padding: 8px 10px !important;
        font-size: 12.5px !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       8. MODALS — true full-screen on mobile, never floating
       ════════════════════════════════════════════════════════════════════ */

    .modal,
    .modal-content,
    .modal-dialog,
    .sign-modal,
    .dialog,
    .ep-box,
    .ar-config-popover {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .modal-overlay,
    .modal-backdrop,
    #ep-modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    /* Sign modal that splits form / preview on desktop stacks on mobile */
    .sign-modal {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .sign-form-col, .sign-preview-col {
        border-right: none !important;
        max-height: none !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       9. STATS / KPI ROWS — 2-column or stack
       ════════════════════════════════════════════════════════════════════ */

    .stats-row,
    .stat-row,
    .kpi-row,
    .metrics-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .stat-card, .kpi-card, .metric-card { padding: 12px 10px !important; }

    /* ════════════════════════════════════════════════════════════════════
       10. TABS — horizontal scroll instead of wrap/overflow
       ════════════════════════════════════════════════════════════════════ */

    .tabs,
    .tab-bar,
    .nav-tabs,
    .inbox-tabs,
    .doc-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
    }
    .tabs::-webkit-scrollbar,
    .tab-bar::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar,
    .inbox-tabs::-webkit-scrollbar,
    .doc-tabs::-webkit-scrollbar { display: none !important; }
    .tab, .nav-tab, .inbox-tab, .doc-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       11. TWO-COLUMN / SPLIT LAYOUTS → single column
       ════════════════════════════════════════════════════════════════════ */

    .two-column,
    .split-pane,
    .doc-layout,
    .app-layout,
    .qb-layout,
    .ft-layout,
    .mb-layout {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       12. TOASTS / NOTIFICATIONS — full-width strip at bottom
       ════════════════════════════════════════════════════════════════════ */

    .toast,
    .notification,
    .snackbar {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important;
        max-width: none !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       13. TYPOGRAPHY — slight tightening
       ════════════════════════════════════════════════════════════════════ */

    h1 { font-size: 22px !important; line-height: 1.2 !important; }
    h2 { font-size: 18px !important; line-height: 1.25 !important; }
    h3 { font-size: 16px !important; line-height: 1.3 !important; }

    /* ════════════════════════════════════════════════════════════════════
       14. LIST/CARD ROWS — readable on mobile
       ════════════════════════════════════════════════════════════════════ */

    .dynamic-row,
    .list-row,
    .data-row {
        padding: 12px !important;
        font-size: 13px !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       15. SECTION DIVIDERS — tighter
       ════════════════════════════════════════════════════════════════════ */

    .section-divider, hr.section-divider, .divider {
        margin: 12px 0 !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       16. PRE / CODE BLOCKS — scrollable
       ════════════════════════════════════════════════════════════════════ */

    pre, code {
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: pre-wrap;
        word-break: break-word;
    }
    pre { padding: 12px !important; font-size: 12px !important; }

    /* ════════════════════════════════════════════════════════════════════
       17. iframes — fit the viewport
       ════════════════════════════════════════════════════════════════════ */

    iframe {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ════════════════════════════════════════════════════════════════════
       18. ANY ABSOLUTE-POSITIONED CONTAINER stays in viewport
       ════════════════════════════════════════════════════════════════════ */

    [style*="position:absolute"]:not(.sub-chevron):not(.spam-score-badge),
    [style*="position: absolute"]:not(.sub-chevron):not(.spam-score-badge) {
        max-width: 100vw;
    }

    /* ════════════════════════════════════════════════════════════════════
       19. SAFE AREA AWARENESS — notched phones
       ════════════════════════════════════════════════════════════════════ */

    /* If a page has a fixed bottom bar, ensure it clears the home indicator */
    [class*="bottom-bar"],
    [class*="footer-fixed"],
    .compose-footer.fixed {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * TABLET (769-1024px) — slight tightening only, no layout changes
 * ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    .container, .bo-container, .page-container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Print — strip mobile-only constraints when printing
 * ════════════════════════════════════════════════════════════════════════ */
@media print {
    html, body { overflow: visible !important; height: auto !important; }
    table { display: table !important; white-space: normal !important; overflow: visible !important; }
    table > thead { display: table-header-group !important; }
    table > tbody { display: table-row-group !important; }
    table > tfoot { display: table-footer-group !important; }
}