/* ================================================================
   R E S P O N S I V E   —   Unified breakpoints & touch baseline
   ================================================================
   Breakpoints:
     phone   ≤ 480px   (iPhone, small Android)
     tablet  ≤ 768px   (iPad portrait, small laptops)
     desktop > 768px   (no changes needed)

   Loaded LAST in index.html so it overrides all other CSS.
================================================================ */

/* ================================================================
   1. TOUCH BASELINE  (all screen sizes)
================================================================ */

/* Minimum 44×44px touch targets on interactive elements */
.planner-rail-btn {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
}

.planner-day-tab {
    min-height: var(--touch-min);
}

.nav-link {
    min-height: var(--touch-min);
}

.hub-nav-item {
    min-height: var(--touch-min);
}

.planner-btn,
.planner-drawer-close,
.hub-back-btn,
.hub-sidebar-toggle {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
}

.theme-btn {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
select,
textarea {
    min-height: var(--touch-min);
}

/* :active feedback on all buttons and cards */
button:active,
.module-card:active,
.nav-link:active,
.hub-nav-item:active,
.planner-rail-btn:active,
.planner-day-tab:active,
.planner-btn:active,
.planner-start-card:active,
.hub-tool-card:active,
.game-card:active {
    transform: scale(0.97);
}

/* Don't override specific :hover transforms when active */
.module-card:active {
    transform: translateY(-2px) scale(0.97);
}

/* :focus-visible for keyboard navigation */
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
.module-card:focus-visible,
.nav-link:focus-visible,
.season-btn:focus-visible,
.season-modal-close:focus-visible,
.krea-save-star:focus-visible,
.krea-upcoming-chip:focus-visible,
.krea-season-tab:focus-visible,
.krea-input:focus-visible,
.archive-cat-btn:focus-visible,
.arc-type-btn:focus-visible,
.arc-filter-toggle:focus-visible,
.arc-preset-card:focus-visible,
.tab-btn:focus-visible,
.btn-primary:focus-visible,
.dropdown-content a:focus-visible,
.dropdown-content button:focus-visible {
    outline: 2px solid var(--primary,#2d7a78);
    outline-offset: 2px;
}


/* ================================================================
   2. TABLET  (≤ 768px)
================================================================ */
@media (max-width: 768px) {

    /* ── Top Nav ──────────────────────────────────────── */
    .top-nav {
        padding: 0.5rem 1rem;
        gap: 0.5rem;
        flex-wrap: wrap;
        align-items: center;
    }

    .top-nav-brand {
        order: 1;
    }

    .top-nav-actions {
        order: 2;
        margin-left: auto;
        min-width: 0;
        flex-shrink: 1;
        gap: 0.35rem;
    }

    .top-nav-actions .auth-logout-btn {
        margin-left: 0;
        padding: 4px 8px;
        font-size: 0.68rem;
    }

    .top-nav-links {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-top: 0.15rem;
    }

    .top-nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        flex: 0 0 auto;
    }

    .top-nav-user-chip span {
        display: none;
    }

    #dashboard-view.dashboard-home {
        padding: 1rem 0.85rem 2.25rem;
    }

    #dashboard-view.dashboard-home .dashboard-shell {
        gap: 1rem;
    }

    /* new db-* components mobile */
    .db-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.35rem 1.25rem;
        border-radius: 22px;
    }

    .db-hero-actions {
        width: 100%;
    }

    .db-btn-primary,
    .db-btn-secondary {
        flex: 1;
        justify-content: center;
    }

    .db-section {
        padding: 1.35rem 1.25rem;
        border-radius: 22px;
    }

    .db-tracks {
        grid-template-columns: 1fr;
    }

    .db-rooms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .db-secondary {
        padding: 1rem 1.25rem;
        border-radius: 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* legacy fallback */
    #dashboard-view.dashboard-home .dashboard-hero-panel,
    #dashboard-view.dashboard-home .dashboard-section {
        padding: 1.15rem;
        border-radius: 22px;
    }

    #dashboard-view.dashboard-home .dashboard-primary-grid,
    #dashboard-view.dashboard-home .dashboard-value-grid,
    #dashboard-view.dashboard-home .module-grid {
        grid-template-columns: 1fr;
    }

    #dashboard-view.dashboard-home .module-card {
        min-height: 0;
        padding: 1rem 1rem 1.35rem;
    }

    #dashboard-view.dashboard-home .module-card h3 {
        font-size: 1.1rem;
    }

    #dashboard-view.dashboard-home .module-card-arrow {
        opacity: 1;
        transform: translateX(0);
    }

    /* ── Dashboard ────────────────────────────────────── */
    .dashboard-header {
        padding: 1.5rem 1rem 1rem;
    }

    .dashboard-header h1 {
        font-size: 1.8rem;
    }

    .module-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .module-card {
        padding: 1.25rem 1rem;
    }

    /* ── Planner: drawer as overlay ───────────────────── */
    .planner-drawer {
        position: fixed;
        left: 48px;
        top: 0;
        bottom: 0;
        width: min(280px, calc(100vw - 56px));
        z-index: 1000;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.3);
    }

    /* Backdrop behind drawer */
    .planner-drawer.is-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: -1;
    }

    .planner-content {
        margin-left: 0;
    }

    /* Export preview: 3 columns instead of 5 */
    .exp-week-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Export modal */
    .planner-modal-export {
        max-width: calc(100vw - 16px);
        max-height: 95vh;
    }
}

@media (max-width: 640px) {
    .top-nav-user-chip {
        display: none;
    }

    .top-nav-actions {
        gap: 0.3rem;
    }

    .top-nav-actions .auth-logout-btn {
        padding: 4px 7px;
        font-size: 0.66rem;
    }
}


/* ================================================================
   3. PHONE  (≤ 480px)
================================================================ */
@media (max-width: 480px) {

    /* ── Top Nav: compact ─────────────────────────────── */
    .top-nav {
        padding: 0.4rem 0.75rem;
    }

    .top-nav-brand-label {
        display: none;
    }

    .nav-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .top-nav-user-chip {
        padding-inline: 0.7rem;
    }

    .top-nav-actions {
        gap: 0.35rem;
    }

    #dashboard-view.dashboard-home {
        padding: 0.85rem 0.65rem 2rem;
    }

    #dashboard-view.dashboard-home .dashboard-hero-panel,
    #dashboard-view.dashboard-home .dashboard-section {
        padding: 1rem;
        border-radius: 20px;
    }

    #dashboard-view.dashboard-home .dashboard-header h1 {
        font-size: 2rem;
        max-width: 7ch;
    }

    #dashboard-view.dashboard-home .dashboard-kicker,
    #dashboard-view.dashboard-home .dashboard-section-head p,
    #dashboard-view.dashboard-home .dashboard-card-label {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }

    #dashboard-view.dashboard-home .dashboard-header p:last-of-type,
    #dashboard-view.dashboard-home .dashboard-hero-points li {
        font-size: 0.9rem;
    }

    #dashboard-view.dashboard-home .dashboard-section-head h2 {
        font-size: 1.65rem;
    }

    #dashboard-view.dashboard-home .dashboard-hero-side {
        padding: 0.85rem;
    }

    #dashboard-view.dashboard-home .module-card {
        padding: 0.95rem 0.9rem 1.25rem;
        gap: 0.65rem;
    }

    #dashboard-view.dashboard-home .module-card h3 {
        font-size: 1rem;
    }

    /* ── Dashboard: maximize content ─────────────────── */
    .dashboard-header {
        padding: 1rem 0.75rem 0.75rem;
    }

    .dashboard-header h1 {
        font-size: 1.5rem;
    }

    .dashboard-header p {
        font-size: 0.9rem;
    }

    .hero {
        margin-bottom: 1.5rem;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.9rem;
    }

    .module-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .module-card {
        padding: 1rem 0.75rem;
        min-height: 0;
        gap: 0.5rem;
    }

    .module-card h3 {
        font-size: 0.95rem;
    }

    .module-card p {
        font-size: 0.82rem;
        -webkit-line-clamp: 2;
    }

    /* ── Hub sidebar: icons only ──────────────────────── */
    .hub-sidebar.sidebar-expanded,
    .hub-sidebar.sidebar-collapsed {
        width: 100%;
        height: auto;
    }

    .hub-sidebar-header {
        padding: 0.8rem 0.75rem;
    }

    .hub-sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 0.45rem 0.55rem 0.25rem;
        gap: 0.4rem;
        -webkit-overflow-scrolling: touch;
    }

    .hub-nav-item {
        flex-direction: row;
        gap: 0.45rem;
        padding: 0.68rem 0.82rem;
        font-size: 0.76rem;
        min-width: max-content;
        justify-content: flex-start;
        flex-shrink: 0;
        border-radius: 15px;
    }

    .hub-nav-item .nav-label,
    .sidebar-collapsed .hub-nav-item .nav-label {
        display: block;
        opacity: 1;
        width: auto;
        font-size: 0.76rem;
    }

    .hub-workspace {
        padding: 0.8rem 0.75rem 1rem;
    }

    .hub-tool-grid {
        grid-template-columns: 1fr;
    }

    .hub-tool-card {
        min-height: 0;
    }

    /* ── Planner: full mobile layout ──────────────────── */

    /* Icon rail → horizontal top bar */
    .planner-icon-rail {
        width: 100%;
        height: 48px;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border, #e5e7eb);
        overflow-x: auto;
        padding: 0 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .planner-body {
        flex-direction: column;
    }

    /* Drawer → bottom sheet */
    .planner-drawer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        height: 65vh;
        border-radius: 16px 16px 0 0;
        border-right: none;
        border-top: 1px solid var(--border, #e5e7eb);
        z-index: 1000;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
    }

    .planner-drawer.is-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: -1;
    }

    /* Day tabs: horizontal scroll */
    .planner-day-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 0.5rem;
        scrollbar-width: none;
    }

    .planner-day-tabs::-webkit-scrollbar {
        display: none;
    }

    .planner-day-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    /* Export: single column */
    .exp-week-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cards & grids: stack */
    .games-grid,
    .archive-grid,
    .school-cards-grid,
    .teacher-hub-grid,
    .csl-compact-grid {
        grid-template-columns: 1fr !important;
    }

    /* No horizontal overflow */
    body {
        overflow-x: hidden;
    }

    /* Staff profile overlay — full width on phone */
    .staff-profile-overlay .staff-profile-card {
        width: calc(100vw - 32px);
        max-width: none;
    }

    /* Planner start screen */
    .planner-start-shell {
        padding: 0.75rem;
    }

    .planner-start-hero {
        padding: 1rem;
    }

    .planner-start-hero h1 {
        font-size: 1.3rem;
    }

    .planner-start-grid,
    .planner-start-type-grid,
    .planner-start-base-grid {
        grid-template-columns: 1fr;
    }

    .planner-start-card {
        padding: 0.75rem;
        border-radius: 14px;
    }

    /* Modal: near full width */
    .modal-content {
        width: 96%;
        max-height: 92vh;
    }

    .planner-modal-export {
        max-width: calc(100vw - 12px);
    }
}


/* ================================================================
   4. PRINT  (keep 5-column grid, override responsive)
================================================================ */
@media print {
    .exp-week-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}