/* ═══════════════════════════════════════════════════════════════
   UMWEKA ACADEMY — Responsive System v1.0
   Stage 8: Unified breakpoint normalisation

   CANONICAL BREAKPOINTS (use these everywhere, nothing else):
   --bp-sm:  480px   → small phones
   --bp-md:  768px   → tablets / large phones
   --bp-lg:  1024px  → small laptops
   --bp-xl:  1280px  → desktops
   --bp-2xl: 1440px  → wide screens

   Historical non-standard breakpoints still exist in older CSS
   (800px, 860px, 900px, 960px etc.) and are corrected here
   with override rules where needed.
═══════════════════════════════════════════════════════════════ */

/* ── Global overflow prevention ───────────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── Safe touch target minimum on all interactive elements ─────── */
a, button, [role="button"], input[type="submit"],
input[type="checkbox"], input[type="radio"],
.db-nav-link, .mkt-page-btn, .mkt-type-tab,
.um-btn, .u-btn, .af-submit, .ins-action-btn {
    -webkit-tap-highlight-color: transparent;
}

/* Nav links need enough vertical padding for touch */
.db-nav-link {
    min-height: 40px;
}

/* ── Table overflow — wrap ALL unwrapped tables ────────────────── */
/* Admin tables without explicit wrappers */
.admin-card .admin-table,
.db-card table:not(.um-table),
.admin-card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Subscription page — type tabs horizontal scroll on mobile ─── */
@media (max-width: 768px) {
    /* Horizontal scroll for type tabs on marketplace */
    .mkt-type-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
        flex-wrap: nowrap;
    }
    .mkt-type-tab {
        flex-shrink: 0;
        scroll-snap-align: start;
        min-height: 44px;
    }

    /* Subscription plan cards — always stack on mobile */
    .sp-plans-count-2,
    .sp-plans-count-3,
    .sp-plans-count-4 {
        grid-template-columns: 1fr !important;
    }

    /* Checkout grid — stack on mobile */
    .checkout-grid,
    div[style*="grid-template-columns:1fr 360px"],
    div[style*="grid-template-columns: 1fr 360px"] {
        grid-template-columns: 1fr !important;
    }

    /* Admin 2-col grids — stack */
    .admin-two-col {
        grid-template-columns: 1fr !important;
    }

    /* Course catalog sidebar — hide on mobile by default */
    .cr-layout {
        grid-template-columns: 1fr;
    }
    .cr-sidebar {
        display: none;
    }
    .cr-mobile-filter-btn {
        display: block;
    }

    /* Marketplace sidebar — collapse */
    .mkt-layout {
        grid-template-columns: 1fr;
    }
    .mkt-sidebar {
        display: none;
    }
    .mkt-sidebar.open {
        display: block;
    }
}

/* ── Small phone (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    /* Prevent any fixed-width elements overflowing */
    .um-card, .db-card, .admin-card {
        min-width: 0;
    }

    /* Stack all 2-column grids */
    .um-grid-2, .db-grid-2, .admin-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Auth box full-width padding */
    .auth-form-inner {
        padding: 24px 20px;
    }

    /* Topbar actions — hide non-essential */
    .db-topbar-title {
        display: none;
    }

    /* Exam timer stays visible but compact */
    .ep-timer-value {
        font-size: 15px;
    }

    /* Suggested courses grid: 1 column */
    .db-suggest-grid {
        grid-template-columns: 1fr !important;
    }

    /* Wishlist grid: 1 column */
    .shop-wishlist-grid {
        grid-template-columns: 1fr !important;
    }

    /* Certificate verify search form — stack */
    .cv-search-form {
        flex-direction: column;
    }

    /* Flash messages full-width */
    .um-flash {
        border-radius: var(--radius-sm);
    }
}

/* ── Normalise 900px → 768px for admin layout ─────────────────── */
@media (max-width: 900px) {
    /* Admin sidebar — slide off-screen at 900px not just 768px */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .admin-main {
        margin-left: 0;
    }
}

/* ── Learn player — narrow screen adjustments ──────────────────── */
@media (max-width: 768px) {
    /* Video player 16:9 ratio preserved */
    .lp-video-wrap {
        aspect-ratio: 16/9;
        height: auto !important;
    }

    /* PDF viewer full-width */
    .lp-pdf-wrap iframe {
        width: 100% !important;
        min-height: 60vh;
    }

    /* Lesson nav buttons stack */
    .lp-nav {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── Print layout — ensure it doesn't break on screen ─────────── */
@media screen and (max-width: 768px) {
    .print-body {
        padding: 16px;
    }
    .invoice-container {
        padding: 20px;
    }
}

/* ── Focus styles for keyboard navigation ─────────────────────── */
/* Ensure all interactive elements have visible focus */
.db-nav-link:focus-visible,
.um-btn:focus-visible,
.u-btn:focus-visible,
.mkt-type-tab:focus-visible,
.shop-cart-remove:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Reduced motion for accessibility ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── High contrast mode support ───────────────────────────────── */
@media (prefers-contrast: high) {
    .um-card, .db-card {
        border-color: rgba(255,255,255,0.3);
    }
    .um-badge {
        border-width: 2px;
    }
}

/* ── Dark mode (already dark, but safe for system checks) ──────── */
@media (prefers-color-scheme: light) {
    /* The platform is always dark — no light mode override */
}

/* ── iOS: prevent zoom on input focus (iOS zooms if font < 16px) ─ */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}