/* ==========================================================================
   SHULEVORA PRO — MOBILE APP LAYER
   ==========================================================================
   Loaded LAST so it wins the cascade, and written with !important because the
   modules build their UI with inline style attributes. An inline style beats
   any stylesheet selector no matter how specific, so a desktop grid declared as
   style="grid-template-columns: 380px 1fr" cannot be reflowed from CSS by any
   other means. Roughly 150 such declarations exist across 70 modules; overriding
   them here is what makes the app usable on a phone without rewriting each one.

   Scope is strictly inside phone breakpoints — desktop rendering is untouched.

   Opt-out: add class "mobile-keep-layout" to any element that genuinely must
   keep its multi-column shape on a phone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NATIVE-APP FEEL (all viewports, safe on desktop)
   -------------------------------------------------------------------------- */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 768px) {
    html {
        /* Stop iOS enlarging text in landscape, which silently breaks layouts. */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        /* Momentum scrolling and no grey flash on tap — the two cues that most
           make a web app read as native. */
        -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: transparent;
        overscroll-behavior-y: contain;
    }

    /* Respect the notch and the home indicator. */
    .app-layout,
    .elite-header,
    .app-content-scroll {
        padding-left: max(var(--safe-left), 0px);
        padding-right: max(var(--safe-right), 0px);
    }

    /* Text selection is a desktop affordance; on a phone a long-press on a card
       should not select it. Inputs and content areas keep it. */
    .elite-nav-item,
    .taskbar-action-btn-3d,
    .bottom-nav-item {
        -webkit-user-select: none;
        user-select: none;
    }

    /* --------------------------------------------------------------------
       2. LAYOUT REFLOW — the core fix
       -------------------------------------------------------------------- */

    /* Every multi-column grid collapses to a single column. This is the rule
       that neutralises the inline "380px 1fr" style declarations. */
    [style*="grid-template-columns"]:not(.mobile-keep-layout),
    .premium-card [style*="grid-template-columns"]:not(.mobile-keep-layout) {
        grid-template-columns: 1fr !important;
    }

    /* Fixed pixel widths and minimums are the other half of the same problem. */
    [style*="min-width"]:not(.mobile-keep-layout):not(input):not(select):not(textarea) {
        min-width: 0 !important;
    }
    [style*="width:"]:not(.mobile-keep-layout):not(img):not(svg):not(canvas):not(video):not(.dr-kpi-ic):not([class*="avatar"]):not([class*="icon"]) {
        max-width: 100% !important;
    }

    /* Flex rows must wrap rather than push content off-screen. A row that was
       designed as "label | control | control" becomes a stack. */
    [style*="display: flex"]:not(.mobile-keep-layout):not([style*="flex-wrap: nowrap"]),
    [style*="display:flex"]:not(.mobile-keep-layout):not([style*="flex-wrap:nowrap"]) {
        flex-wrap: wrap !important;
    }

    /* Anything absolutely positioned off the right edge gets pulled back. */
    .app-layout *:not(.mobile-keep-layout) {
        max-width: 100%;
    }

    /* --------------------------------------------------------------------
       3. TABLES — scroll rather than clip
       --------------------------------------------------------------------
       responsive.css hides body overflow, so a wide table was previously cut
       off with no way to reach the rest. Making the table its own scroll
       region keeps every column reachable by swiping, which is the standard
       mobile pattern for dense data. */
    table:not(.mobile-keep-layout) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    table:not(.mobile-keep-layout) thead,
    table:not(.mobile-keep-layout) tbody,
    table:not(.mobile-keep-layout) tr {
        /* Keep table semantics for screen readers while the wrapper scrolls. */
        display: table !important;
        width: 100% !important;
        table-layout: auto;
    }
    table:not(.mobile-keep-layout) th,
    table:not(.mobile-keep-layout) td {
        white-space: normal;
        word-break: break-word;
    }

    /* Any container that already opts into horizontal scrolling keeps it and
       gains momentum + a hint that there is more to the right. */
    [style*="overflow-x: auto"],
    [style*="overflow-x:auto"],
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* --------------------------------------------------------------------
       4. TOUCH TARGETS — 44px is the platform minimum on both iOS and Android
       -------------------------------------------------------------------- */
    button,
    .btn,
    .btn-premium,
    a.btn,
    select,
    input[type="submit"],
    input[type="button"],
    .tab-btn,
    .tab-chip {
        min-height: 44px;
    }

    /* Icon-only controls need width as well as height. */
    button:not([class*="close"]):not(.sqb-close) {
        touch-action: manipulation;   /* removes the 300ms tap delay */
    }

    /* 16px is the threshold below which iOS Safari zooms the page on focus —
       a jarring, layout-breaking effect that looks nothing like a native app. */
    input,
    select,
    textarea {
        font-size: max(16px, 1rem) !important;
        min-height: 44px;
    }
    textarea { min-height: 88px; }

    /* --------------------------------------------------------------------
       5. PANELS, DRAWERS AND MODALS — full-bleed sheets
       -------------------------------------------------------------------- */
    .diff-drawer,
    .dr-drawer,
    [class*="-drawer"]:not(.mobile-keep-layout) {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Dialogs become bottom sheets, which is the native idiom on both
       platforms and puts the primary action within thumb reach. */
    .shulevora-confirm-box,
    .vibrant-modal,
    .conflict-modal-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 22px 22px 0 0 !important;
        margin-top: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: calc(1.5rem + var(--safe-bottom)) !important;
    }
    .shulevora-dialog-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    /* --------------------------------------------------------------------
       6. TYPOGRAPHY AND SPACING — desktop headings are oversized on a phone
       -------------------------------------------------------------------- */
    h1, .dr-head h1 { font-size: clamp(1.5rem, 6vw, 1.9rem) !important; }
    h2 { font-size: clamp(1.25rem, 5vw, 1.5rem) !important; }
    h3 { font-size: clamp(1.05rem, 4.4vw, 1.25rem) !important; }

    .app-content-scroll,
    .container,
    .main-content-flow {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Clear the bottom navigation and the home indicator so the last row of any
       list is reachable rather than sitting under the tab bar. */
    .app-content-scroll,
    #moduleContentPlaceholder {
        padding-bottom: calc(84px + var(--safe-bottom)) !important;
    }

    /* Wide KPI strips become a two-up grid instead of a squeezed row. */
    .dr-kpis,
    .sa-metric-grid,
    [class*="metric-grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
    }

    /* Horizontal tab strips scroll instead of wrapping into a tall block. */
    .dr-tabs,
    .attendance-tabs,
    [class*="-tabs"]:not(.mobile-keep-layout) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    [class*="-tabs"]::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------------------
   6b. SHELL HEADER — one cause behind every tablet/phone screen
   --------------------------------------------------------------------------
   style.css gives .app-topbar-3d `margin: 8px 12px` below 1024px while it is
   still sized at 100% width, so 100% + 24px of margin put it 12px past the
   right edge on EVERY route — 55 of 56 school-admin screens traced to this one
   declaration. Letting the width resolve after margins fixes all of them.
   The breakpoint matches the rule being corrected, not the phone breakpoint. */
@media (max-width: 1024px) {
    .app-topbar-3d {
        width: auto !important;
        max-width: calc(100% - 24px) !important;
        box-sizing: border-box !important;
    }
}

/* --------------------------------------------------------------------------
   7. SMALL PHONES
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .dr-kpis,
    .sa-metric-grid,
    [class*="metric-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Toolbars stack so each control gets a full-width, thumb-friendly hit area. */
    .dr-toolbar > *,
    .dr-head-actions > * {
        flex: 1 1 100% !important;
    }
}

/* --------------------------------------------------------------------------
   8. LANDSCAPE PHONES — reclaim vertical space
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
    .elite-header { position: static !important; }
    .app-content-scroll { padding-bottom: 60px !important; }
}