/* ──────────────────────────────────────────────────────────────────
 *  perf-mobile.css
 *  Sitewide mobile-performance overrides.
 *
 *  Why this exists
 *  ───────────────
 *  Every page on ChicaBate uses `backdrop-filter: blur(...)` on the
 *  page header, on stat cards, on section panels, on modals, and on
 *  several other elements. Combined with `transition: all` and
 *  multi-layer `box-shadow` declarations, mobile browsers (especially
 *  iOS Safari) drop scroll FPS from ~60 to ~15-20. The user
 *  experience: "navigation feels heavy / sticky / slow."
 *
 *  The fix
 *  ───────
 *  At narrow viewports (≤860 px, matching the nav-mobile.js breakpoint)
 *  we disable the most expensive effects:
 *
 *    • `backdrop-filter` → removed entirely (the biggest single win)
 *    • `filter: blur(...)` on container backgrounds → removed
 *    • `transition: all` → narrowed to just the safe-cheap properties
 *      (color, background-color, transform, opacity)
 *    • Multi-layer `box-shadow` → simplified to a single drop shadow
 *
 *  Cards and sections get a slightly more opaque solid background to
 *  compensate for the lost blur — the design stays cohesive, just
 *  uses paint instead of compositing.
 *
 *  Specificity
 *  ───────────
 *  We use a high-specificity body selector + `!important` because the
 *  per-page CSS uses normal-specificity rules; `!important` is the
 *  cleanest way to override without modifying every page's stylesheet.
 *  This is a perf-only override — visually it changes nothing on
 *  desktop and keeps the design visually consistent on mobile.
 * ────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
 * UNIVERSAL RESPONSIVE GUARDS — apply on EVERY viewport
 *
 * These rules fix horizontal-overflow bugs that cause:
 *   - Cards / buttons spilling past the right edge of mobile screens
 *   - The viewport-meta becoming useless because content is wider
 *     than the device width
 *   - Responsive `auto-fit` grids computing the wrong column count
 *     because the parent is wider than the viewport
 *
 * The single most impactful rule is `overflow-x: hidden` on html/body.
 * It prevents ANY overflow from causing the page to scroll
 * horizontally. Combined with `max-width: 100%`, it makes the
 * document-level layout always respect the viewport.
 * ══════════════════════════════════════════════════════════════════ */
html, body {
    overflow-x: hidden;
    /* max-width: 100vw breaks on iOS where 100vw can briefly exceed
       the visual viewport during scroll-into-view. 100% (of the
       containing block) is the safer constraint. */
    max-width: 100%;
}

/* Images and videos must never exceed their container. This was
   already in most stylesheets but missing on a few. Belt-and-braces. */
img, video, iframe, canvas, svg, picture {
    max-width: 100%;
    height: auto;
}

/* Tables, especially those with hardcoded content widths, are
   notorious overflow sources. Wrap them in a horizontal-scroll
   container behaviour automatically. */
table { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; }

/* Long URLs / words break to next line instead of overflowing. */
p, span, div, h1, h2, h3, h4, h5, h6, a, li, td, th {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Modals with hardcoded min-width / width values force horizontal
   overflow on narrow screens. The screenshot bug came from the
   logout-modal having `min-width: 400px` while the viewport was
   360px. Override every modal-shaped element to cap at the
   viewport edge instead. */
.logout-modal,
.modal-content,
.modal-box,
.app-modal-box,
.alert-modal-content,
.alert-box,
.preview-content,
.profile-popup-box,
.popup-box,
.confirm-box,
.cookie-modal-container,
.login-modal-content,
.login-container,
.register-container,
.viewer-box,
.compliance-modal,
.logo-confirm-box {
    min-width: 0 !important;
    max-width: min(96vw, 920px) !important;
}

/* Tab / filter / control rows that use `display: flex` without
   `flex-wrap: wrap` overflow horizontally on narrow viewports. The
   "My Photos / My Videos / My Items" tabs in content-manage pages
   and the search/filter row are the most visible offenders (these
   were in the user's screenshot). Force wrapping universally —
   any layout that wanted single-line flex on desktop still gets
   it because the elements still fit there. */
.content-tabs,
.content-controls,
.filter-group,
.search-box,
.action-row,
.toolbar,
.tab-bar,
.tabs-row,
.view-mode-toggle,
.detail-actions,
.upload-actions,
.modal-actions,
.controls-row,
.pagination {
    flex-wrap: wrap !important;
}

/* Inputs and selects must shrink with the row they're in. Many
   pages set `min-width: 300px` on search boxes which keeps them
   stiff at narrow viewports. */
.search-box,
.search-box input,
.filter-group select,
.filter-group input {
    min-width: 0 !important;
}

/* Constrain "stat / quick-action" grids to NEVER demand more
   columns than fit cleanly on a phone. The original `minmax(150px,
   1fr)` would attempt 2-3 columns at 360 px viewport which then
   overflows horizontally if anything else nudges the parent wider.
   Force a hard column count via grid-template-columns. Note: tabs
   already wrap correctly via the `flex-wrap: wrap` rule above. */
@media (max-width: 460px) {
    .stats-grid,
    .quick-actions,
    .my-content-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 360px) {
    .stats-grid,
    .quick-actions {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 860px) {
    /* Kill backdrop-filter on every element. On mobile this is the
       single biggest perf win — it eliminates the per-frame
       composite-and-blur of the entire background behind each
       element. The header, stat cards, sections, and modals all
       use it; all of them get it disabled. */
    body header,
    body .dashboard-header,
    body .stat-card,
    body .section,
    body .action-btn,
    body .modal,
    body .modal-content,
    body .modal-box,
    body .app-modal-box,
    body .logout-modal-overlay,
    body .logout-modal,
    body .logo-confirm-overlay,
    body .alert-modal,
    body .alert-modal-content,
    body .theme-card,
    body .preview-modal,
    body .viewer-modal,
    body .file-item,
    body .upload-area {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Background containers that combine semi-transparent fill +
       backdrop-filter need a slightly more opaque fill so the
       text doesn't bleed through the page background once the
       blur is gone. */
    body .stat-card,
    body .section,
    body .dashboard-header {
        background: rgba(20, 20, 26, 0.92) !important;
    }
    body header {
        background: rgba(15, 15, 20, 0.95) !important;
    }
    body .modal,
    body .logout-modal-overlay,
    body .alert-modal,
    body .preview-modal,
    body .viewer-modal {
        background: rgba(0, 0, 0, 0.78) !important;
    }
    body .modal-content,
    body .modal-box,
    body .app-modal-box,
    body .logout-modal,
    body .alert-modal-content {
        background: rgba(24, 24, 30, 0.98) !important;
    }

    /* Narrow `transition: all` down to only the cheap properties.
       Animating `backdrop-filter`, `box-shadow`, `filter` and
       `border-color` on every hover/state-change costs paint and
       composite work on each frame. Restricting to colour and
       transform keeps interactions visually identical but cheap. */
    body .stat-card,
    body .section,
    body .action-btn,
    body .header-logo,
    body .header-avatar,
    body .file-item,
    body .upload-area,
    body .upload-submit-btn,
    body .cancel-btn,
    body .close-btn,
    body .file-remove,
    body .logout-modal-btn,
    body .visibility-option,
    body .alert-ok-btn,
    body .notif-btn,
    body .theme-card,
    body .logo-card,
    body .logo-card-btn,
    body .logo-confirm-btn,
    body .logo-upload-area {
        transition-property: transform, opacity, background-color, color, border-color !important;
        transition-duration: 0.2s !important;
    }

    /* Simplify multi-layer box-shadows to a single soft drop shadow.
       This catches almost every "stat-card" / "section" / "card" style
       across the site — the visual is nearly identical at ≤860 px
       viewport where shadows are smaller anyway. */
    body .stat-card,
    body .section,
    body .modal-content,
    body .modal-box,
    body .logout-modal,
    body .alert-modal-content,
    body .theme-card,
    body .logo-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    }

    /* Hover scale/lift animations were designed for desktop mouse
       interaction. On a touch device they trigger on tap-and-hold,
       fire a layout/composite, and feel laggy. Disable them. */
    body .stat-card:hover,
    body .section:hover,
    body .action-btn:hover,
    body .theme-card:hover,
    body .logo-card:hover {
        transform: none !important;
    }

    /* `will-change` hints — let the browser promote scrollable
       content to its own layer so the page header (which is
       position:sticky on most pages) doesn't repaint on scroll. */
    body header,
    body .dashboard-header {
        will-change: transform;
    }

    /* Disable INFINITE-LOOP decorative animations on mobile.
       These were designed for desktop where they look pretty and
       the GPU has headroom; on mobile they compete for paint
       cycles every frame, which is exactly what causes
       "navigation feels heavy / sticky / slow."
       
       We're explicit about WHICH selectors get muted — spinners
       and loading indicators DO need to keep animating (they
       communicate state to the user). Decorative glows / shimmers /
       background-position scrolls do not.
       
       Bounded open-once animations (modalSlideIn, fadeIn,
       slideDown) are NOT touched — they fire once and stop on
       their own, so they don't compete with scroll. */
    body {
        animation: none !important;
        background-size: auto !important;
    }
    body .dashboard-header,
    body .dashboard-header::before,
    body .dashboard-header::after,
    body header::before,
    body header::after,
    body .stat-icon,
    body .stat-card .stat-value,
    body .header-avatar,
    body .header-logo,
    body .action-btn:hover,
    body .upload-area,
    body .upload-area::before,
    body .upload-submit-btn,
    body .logo-gradient,
    body .compliance-modal-icon,
    body .agent-icon,
    body .logout-modal-icon,
    body .event-status.live,
    body .story-visual .glyph,
    body .required-asterisk {
        animation: none !important;
    }
    /* ↑ NB: spinners (.spinner, .loading-spinner, .preview-spinner,
       .loading-icon, .page-loading .spinner, etc.) are NOT in the
       list above. They keep spinning so the user knows a fetch is
       in progress. */
}