/* ══════════════════════════════════════════
   Elite Creed — Responsive Breakpoints
   Mobile-first approach
   ══════════════════════════════════════════ */

/* ── Small tablets (576px+) ── */
@media (min-width: 576px) {
    /* Already handled in layout.css and components.css */
}

/* ── Tablets / landscape (768px+) ── */
@media (min-width: 768px) {
    .hide-tablet-up { display: none !important; }
}

/* ── Small desktop (992px+) ── */
@media (min-width: 992px) {
    .hide-desktop-up { display: none !important; }
}

/* ── Standard desktop (1200px+) ── */
@media (min-width: 1200px) {
    /* Fine-tune large layouts */
}

/* ── Mobile touch & scroll fixes ── */
@media (max-width: 991.98px) {
    /* Smooth momentum scrolling for scrollable containers */
    .sidebar,
    .modal,
    .topbar__dropdown-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Prevent background scroll bleed on overlays */
    .sidebar-overlay.is-open,
    .mobile-nav.is-open,
    .modal-overlay.is-open {
        overscroll-behavior: contain;
        touch-action: none;
    }

    /* Allow scrolling inside sidebar when open */
    .sidebar.is-open {
        touch-action: pan-y;
        overscroll-behavior-y: contain;
    }

    /*
     * Convert ALL fixed decorative backgrounds to absolute on mobile.
     * position:fixed creates compositing layers on iOS that block/fight
     * native page scroll, causing the "sticky" feel.
     */

    /* Dashboard backgrounds (layout.css + dashboard-illustrations.css) */
    .dashboard::before,
    .dashboard::after {
        position: absolute;
        animation: none !important;
    }
    .dashboard-illustrations {
        position: absolute;
    }

    /* Auth page backgrounds (forms.css) */
    .auth-page {
        overflow-y: visible;
    }
    .auth-page::before,
    .auth-page::after,
    .auth-scene {
        position: absolute;
        animation: none !important;
    }

    /* Landing page backgrounds (landing-illustrations.css) */
    body.landing-page::before,
    body.landing-page::after {
        position: absolute;
        animation: none !important;
    }
}

/* ── Mobile only (below 576px) ── */
@media (max-width: 575.98px) {
    .hide-mobile { display: none !important; }

    .card {
        padding: var(--space-4);
    }

    .card-stat__value {
        font-size: var(--fs-h3);
    }

    .modal__container,
    .modal__content {
        width: 95%;
        padding: var(--space-5);
        margin: var(--space-4);
    }

    .topbar {
        padding: 0 var(--space-4);
    }

    .main-content {
        padding: var(--space-4);
    }

    .auth-form-wrap {
        padding: var(--space-4);
    }
}

/* ── Tablet only (576px - 991px) ── */
@media (min-width: 576px) and (max-width: 991.98px) {
    .hide-tablet { display: none !important; }
}

/* ── Print ── */
@media print {
    .sidebar,
    .topbar,
    .sidebar-overlay,
    .toast-container {
        display: none !important;
    }

    .dashboard {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main";
    }

    .main-content {
        padding: 0;
    }

    body {
        background: #fff;
        color: #000;
    }
}