/* ===================================================================
   FIGMA RESPONSIVE - Mobile & Tablet Adjustments
   =================================================================== */

/* ===== TABLET (≤ 1200px) ===== */
@media (max-width: 1200px) {
    .figma-hero { min-height: 800px; }
    .figma-hero-title { font-size: 72px; line-height: 88px; }
    .figma-navbar { padding: 8px 32px !important; }
    .figma-section { padding: 32px; }
    .figma-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .figma-footer-content { gap: 48px; }

    /* ── Phase 5: incident chips ── */
    .inc-chips-row { gap: 6px; }

    /* ── Phase 9: performance table ── */
    .member-perf-table th:nth-child(n+7) { display: none; }
    .member-perf-table td:nth-child(n+7) { display: none; }
}

/* ===== TABLET MEDIUM (≤ 1024px) ===== */
@media (max-width: 1024px) {
    /* ── Font size tokens: scale down heading sizes for tablet viewports ── */
    :root {
        --figma-fs-hero: 72px;  --figma-lh-hero: 88px;
        --figma-fs-h1:   52px;  --figma-lh-h1:   64px;
        --figma-fs-h2:   34px;  --figma-lh-h2:   42px;
        --figma-fs-h3:   28px;  --figma-lh-h3:   34px;
        --figma-fs-h4:   24px;  --figma-lh-h4:   30px;
        --figma-fs-h5:   20px;  --figma-lh-h5:   26px;
        --figma-fs-body: 17px;  --figma-lh-body: 22px;
    }

    /* ── Stats grid gap tighten ── */
    .figma-stats-grid { gap: 20px; }
    .figma-stats-container { padding: 24px; gap: 24px; }

    /* ── Card padding reduction ── */
    .figma-card { padding: 24px; gap: 16px; }
    .figma-card-content { padding: 24px; }

    /* ── Button padding: less aggressive than mobile full-width ── */
    .figma-btn { padding: 12px 28px; }

    /* ── Banner: constrain height on portrait tablet ── */
    header.banner-wrap { max-block-size: 180px; }
    .banner-wrap { max-height: 180px !important; }

    /* ── Admin sidebar: collapse to overlay on tablets ── */
    html.admin-mode-on body.figma-theme .content,
    html.admin-mode-on body.figma-theme .content:not(.figma-hero) {
        margin-left: 0 !important;
    }
    html.admin-mode-on .banner-wrap { left: 0 !important; }
    .sidebar-figma {
        z-index: 1040 !important; /* float above content as overlay */
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6) !important;
    }

    /* ── Performance table: keep 5 cols on landscape tablet ── */
    .member-perf-table th:nth-child(n+6) { display: none; }
    .member-perf-table td:nth-child(n+6) { display: none; }
    /* Undo the ≤1200px rule that hid from col 7 ── */
    .member-perf-table th:nth-child(-n+5) { display: table-cell; }
    .member-perf-table td:nth-child(-n+5) { display: table-cell; }
}

/* ===== TABLET SMALL (≤ 992px) ===== */
@media (max-width: 992px) {
    .figma-hero { min-height: 600px; }
    .figma-hero-title { font-size: 56px; line-height: 68px; }
    .figma-hero-content { padding: 32px; }

    /* Navbar collapse */
    .figma-navbar .navbar-collapse {
        background: var(--figma-bg-surface) !important;
        backdrop-filter: var(--figma-backdrop-blur) !important;
        border: 1px solid var(--figma-border) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
        padding: 16px;
        border-radius: var(--figma-radius-md);
        margin-top: 16px;
    }
    .figma-navbar .nav-link {
        padding: 12px !important;
        color: var(--figma-text-primary) !important;
    }

    .figma-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .figma-footer-content { flex-direction: column; gap: 24px; }

    /* ── Card & container padding ── */
    .figma-card { padding: 20px; }
    .figma-card-content { padding: 20px; }

    /* ── Button: compact but not full-width yet ── */
    .figma-btn { padding: 10px 24px; }

    /* ── Phase 4: response time analytics ── */
    #rtMonthlyChart, #rtYoyChart { max-height: 220px !important; }

    /* ── Phase 8: facility details grid ── */
    .facility-details-grid { grid-template-columns: 1fr !important; }

    /* ── Phase 10: admin dashboard attention row ── */
    .dashboard-attention-card .figma-card-content { padding: 1rem 0.5rem; }

    /* ── Performance table: 4 cols on small tablet ── */
    .member-perf-table th:nth-child(n+5) { display: none; }
    .member-perf-table td:nth-child(n+5) { display: none; }
    .member-perf-table th:nth-child(-n+4) { display: table-cell; }
    .member-perf-table td:nth-child(-n+4) { display: table-cell; }
}

/* ===== MOBILE (≤ 768px) ===== */
@media (max-width: 768px) {
    .figma-hero { min-height: 500px; }
    .figma-hero-title { font-size: 40px; line-height: 48px; }
    .figma-hero-content { padding: 24px; gap: 32px; }
    .figma-navbar { padding: 8px 16px !important; }
    .figma-navbar .navbar-brand img { width: 56px !important; height: 56px !important; max-width: none !important; }
    .figma-section { padding: 24px; }
    .figma-section-title { font-size: 32px; line-height: 39px; }
    .figma-card { flex-direction: column; align-items: flex-start; padding: 24px; gap: 16px; }
    .figma-card-title { font-size: 24px; line-height: 29px; }
    .figma-card-description, .figma-card-link { font-size: 16px; line-height: 20px; }
    .figma-stats-container { padding: 24px; gap: 24px; }
    .figma-stats-title { font-size: 24px; line-height: 29px; }
    .figma-stats-grid { grid-template-columns: 1fr; gap: 16px; }
    .figma-stat-tile { padding: 16px; }
    .figma-progress-header { flex-direction: column; align-items: flex-start; }
    .figma-progress-stats { align-items: flex-start; }
    .figma-progress-footer { flex-direction: column; align-items: flex-start; }
    .figma-btn { width: 100%; justify-content: center; }
    .figma-footer { padding: 32px 24px; }
    .figma-footer-brand { font-size: 24px; line-height: 32px; }
    .figma-footer-heading { font-size: 20px; line-height: 24px; }

    /* ── Hero stats banner: stack vertically on mobile ── */
    .hero-stats-banner {
        grid-template-columns: 1fr !important;
        position: relative !important;
        bottom: auto !important;
        margin-top: 16px;
    }
    .hero-stat-item { padding: 16px 24px !important; }
    .hero-stat-number { font-size: 2rem !important; }
    .hero-stat-menu { min-width: 200px; left: 0; transform: none; }

    /* ── Quick links bar: wrap on mobile ── */
    .quick-links-wrapper { flex-wrap: wrap; gap: 6px; }
    .quick-link { font-size: 0.8rem; padding: 6px 10px; }
    .quick-links-label { display: none; }

    /* ── Incident index: hide less-critical columns ── */
    .incidents-table th:nth-child(n+5),
    .incidents-table td:nth-child(n+5) { display: none; }

    /* ── Phase 5: stat bar ── */
    .inc-stats-bar { padding: 8px 12px; }
    .inc-stat { padding: 4px 10px; }
    .inc-stat-value { font-size: 1.1rem; }
    .inc-stat-divider { display: none; }

    /* ── Phase 5: chips ── */
    .inc-chips-row { gap: 4px; }
    .inc-chip { padding: 5px 10px; font-size: 0.75rem; }

    /* ── Phase 6a: LOSAP card ── */
    .losap-card .row.g-2 > .col-6 { flex: 0 0 50%; }

    /* ── Phase 6b: inquiry timeline ── */
    .inquiry-timeline { flex-direction: column; align-items: flex-start; gap: 12px; }
    .inquiry-timeline::before { top: 8px; left: 7px; right: auto; height: calc(100% - 16px); width: 2px; }
    .timeline-step { flex-direction: row; gap: 10px; }
    .timeline-content { text-align: left; }

    /* ── Phase 7: application status result ── */
    .app-status-timeline { flex-direction: column; }

    /* ── Phase 9: performance dashboard ── */
    #leaderboardChart { max-height: 200px !important; }
    .member-perf-table th:nth-child(n+4),
    .member-perf-table td:nth-child(n+4) { display: none; }
    .member-perf-table th:nth-child(-n+3) { display: table-cell; }
    .member-perf-table td:nth-child(-n+3) { display: table-cell; }

    /* ── Phase 10: admin dashboard ── */
    .dashboard-attention-card .figma-card-content { padding: 0.75rem 0.5rem; }
    .dashboard-attention-card .h-100 { min-height: auto; }
}

/* ===== SMALL MOBILE (≤ 480px) ===== */
@media (max-width: 480px) {
    .figma-hero { min-height: 400px; }
    .figma-hero-title { font-size: 28px; line-height: 34px; }
    .figma-hero-content { padding: 16px; }

    /* Dept name */
    .dept-name-title { font-size: 1.75rem !important; }

    /* ── Hero stats: single compact strip ── */
    .hero-stats-banner { gap: 0; }
    .hero-stat-item { padding: 12px 16px !important; border-bottom: 1px solid rgba(255,255,255,.08); }
    .hero-stat-item:last-child { border-bottom: none; }

    /* ── Incident detail grid ── */
    .incident-details-grid { grid-template-columns: 1fr !important; }
    .detail-row { grid-template-columns: 1fr !important; }

    /* ── Facility availability calendar ── */
    #facilityAvailabilityCalendar .fc-toolbar-title { font-size: .9rem; }
    #facilityAvailabilityCalendar .fc-button { padding: .2em .5em; font-size: .8rem; }

    /* ── Member points cards ── */
    .kpi-card { padding: 1rem !important; }
    .kpi-card .display-6 { font-size: 1.5rem; }

    /* ── Admin dashboard: 2-col attention grid ── */
    .col-6.col-md-3 { flex: 0 0 50%; max-width: 50%; }
}