/* ===================================================================
   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; }
    .banner-wrap { margin-top: calc(var(--navbar-h) + 16px) !important; } /* navbar: logo + 8px top + 8px bottom */
    .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; }

    /* ── 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; background-position: center top; }
    .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; background-position: center top; }
    .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%; }
}

/* ===================================================================
   ███  3-TIER RESPONSIVE SYSTEM (mobile-forward)  ███
   -------------------------------------------------------------------
   Tiers:
     • PHONE   : ≤ 575.98px   → native-app feel, stacked card tables
     • TABLET  : 576–991.98px → compact, scroll-contained tables
     • DESKTOP : ≥ 992px      → unchanged (no rules added here)

   Goals: never force sideways scrolling of the whole page; keep
   wide admin/index content within the viewport; large touch targets.
   =================================================================== */

/* ---- Shared tokens for the small-screen tiers ---- */
:root {
    --m-gutter-phone: 12px;   /* page side padding on phones  */
    --m-gutter-tablet: 20px;  /* page side padding on tablets */
    --m-touch: 44px;          /* minimum touch target        */

    /* Banner height tokens — used in padding-top formulas.
       Desktop default (≥992px): 20vh, matches figma-layout.css.
       Overridden per-tier below so _Layout.cshtml can reference
       a single formula: calc(var(--navbar-h) + var(--banner-h) + 1rem) */
    --banner-h: 20vh;
}

/* Tablet banner: shorter so more page is visible */
@media (min-width: 576px) and (max-width: 991.98px) {
    :root { --banner-h: 130px; }

    /* Override figma-layout.css which uses 20vh !important */
    .banner-wrap {
        height: var(--banner-h) !important;
        max-height: var(--banner-h) !important;
    }
    header.banner-wrap {
        block-size: var(--banner-h) !important;
        max-block-size: var(--banner-h) !important;
    }
}

/* Phone banner: even shorter */
@media (max-width: 575.98px) {
    :root { --banner-h: 100px; }

    .banner-wrap {
        height: var(--banner-h) !important;
        max-height: var(--banner-h) !important;
    }
    header.banner-wrap {
        block-size: var(--banner-h) !important;
        max-block-size: var(--banner-h) !important;
        min-block-size: var(--banner-h) !important;
    }
}

/* ============================================================
   GLOBAL OVERFLOW GUARD (PHONE + TABLET ≤ 991.98px)
   Stops any wide element from pushing the page sideways.
   ============================================================ */
@media (max-width: 991.98px) {
    html, body { max-width: 100%; overflow-x: hidden; }

    /* Content column never exceeds the viewport width */
    .layout > .content,
    main.content {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Bootstrap containers go fluid so they can't overflow */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 100% !important;
        padding-left: var(--m-gutter-tablet);
        padding-right: var(--m-gutter-tablet);
    }

    /* Wide media never overflows its column.
       Tables are excluded here — the tablet/phone tier rules below
       give tables their own scroll-contained block display. */
    img, svg, video, canvas, iframe { max-width: 100%; }

    /* Pre/code blocks scroll internally instead of the page */
    pre, code { overflow-x: auto; max-width: 100%; }
}

/* ============================================================
   TABLET TIER (576px – 991.98px)
   Tables are compact but still tabular; cells wrap text instead
   of forcing the page sideways.
   ============================================================ */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* Explicit Bootstrap wrapper: contain any residual overflow */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        max-width: 100%;
        border-radius: var(--figma-radius-sm, 8px);
    }

    /* Bare tables: shrink to fit, let text wrap — NO page-scroll */
    main.content table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;          /* columns share space evenly   */
        word-break: break-word;       /* long words wrap, not overflow */
        overflow-wrap: anywhere;
        white-space: normal;          /* allow cell text to wrap       */
    }

    /* Compact cells so more columns fit per row */
    main.content table th,
    main.content table td {
        padding: 0.45rem 0.5rem;
        font-size: 0.85rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Comfortable tap targets for in-table action buttons/links */
    main.content table .btn,
    main.content table a.btn {
        min-height: var(--m-touch);
        display: inline-flex;
        align-items: center;
    }

    /* Forms: stack Bootstrap row/col fields so inputs aren't crushed */
    .row > [class*="col-"] { margin-bottom: 0.5rem; }
}

/* ============================================================
   PHONE TIER (≤ 575.98px) — native-app feel
   The page NEVER scrolls sideways. Tables transform into stacked
   cards; every row becomes its own block.
   ============================================================ */
@media (max-width: 575.98px) {
    /* Tighter page gutters on phones */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: var(--m-gutter-phone);
        padding-right: var(--m-gutter-phone);
    }

    /* Suppress horizontal scroll on .table-responsive wrappers */
    .table-responsive {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* ── ALL tables on phone become stacked-card layout ── */
    main.content table:not(.table-no-stack) {
        display: block;
        width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    main.content table:not(.table-no-stack) thead {
        display: none;          /* column headers hidden; labels come from CSS */
    }
    main.content table:not(.table-no-stack) tbody {
        display: block;
    }
    main.content table:not(.table-no-stack) tr {
        display: block;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--figma-border, rgba(255,255,255,0.12));
        border-radius: var(--figma-radius-md, 12px);
        background: var(--figma-bg-surface, rgba(255,255,255,0.03));
    }
    main.content table:not(.table-no-stack) td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        padding: 5px 0;
        border: 0;
        font-size: 0.875rem;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }
    /* data-label attribute powers the left-side column name */
    main.content table:not(.table-no-stack) td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        text-align: left;
        flex-shrink: 0;
        max-width: 45%;
        color: var(--figma-text-secondary, rgba(255,255,255,0.6));
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    /* Empty / decoration cells (checkboxes, images) go full-width */
    main.content table:not(.table-no-stack) td:not([data-label]) {
        justify-content: flex-start;
    }

    /* Primary action buttons span the width like native app CTAs */
    .figma-resource-actions .figma-btn,
    .figma-resource-header .figma-btn,
    .card-body > .btn,
    form .btn[type="submit"] {
        width: 100%;
        justify-content: center;
        min-height: var(--m-touch);
    }

    /* Stack header rows (title + actions) vertically */
    .figma-resource-header { flex-direction: column; align-items: stretch; gap: 12px; }

    /* Inputs/selects full width + larger tap height */
    .form-control, .form-select { min-height: var(--m-touch); }

    /* Keep the admin FAB clear of bottom content */
    main.content { padding-bottom: 5rem; }

    /* ── OPT-IN: explicit table-cards (still supported for custom tables) ── */
    table.table-cards { display: block; white-space: normal; }
    table.table-cards thead { display: none; }
    table.table-cards tbody { display: block; }
    table.table-cards tr {
        display: block;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--figma-border, rgba(255,255,255,0.12));
        border-radius: var(--figma-radius-md, 12px);
        background: var(--figma-bg-surface, rgba(255,255,255,0.03));
    }
    table.table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }
    table.table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--figma-text-secondary, rgba(255,255,255,0.7));
    }
}

/* ============================================================
   PHONE: incidents-table stacked-card labels
   The incidents-table uses semantic td classes instead of
   data-label; map each class to a human-readable column name.
   ============================================================ */
@media (max-width: 575.98px) {
    /* Incidents table: image and checkbox cells take full row */
    .incidents-table td.incident-thumbnail,
    .incidents-table td:has(.no-image-placeholder),
    .incidents-table td:has(input[type="checkbox"]) {
        justify-content: flex-start;
    }

    .incidents-table td.incident-date::before   { content: "When"; }
    .incidents-table td.incident-type::before   { content: "Type"; }
    .incidents-table td.incident-location::before { content: "Location"; }
    .incidents-table td.incident-company::before  { content: "Company"; }
    .incidents-table td.incident-external-id::before { content: "ID"; }
    .incidents-table td.incident-coords::before   { content: "Coords"; }

    /* Keep incident thumbnail image constrained */
    .incident-thumbnail img { max-width: 80px; height: auto; border-radius: 6px; }

    /* Incidents filter bar: stack vertically on phone */
    .incidents-filter-bar { flex-direction: column; gap: 8px; }
    .incidents-filter-dropdown,
    .incidents-filter-search { width: 100%; }
    .incidents-date { width: 100%; }

    /* Incidents quick-date chips: wrap */
    .incidents-quick-dates { flex-wrap: wrap; gap: 4px; }
}

/* ============================================================
   PHONE: figma-table generic label support
   For tables using the .figma-table class (Attendance, LOSAP,
   etc.) that add data-label on each <td>.
   ============================================================ */
@media (max-width: 575.98px) {
    /* figma-table gets the same stacked treatment via the
       generic main.content table rule above; these overrides
       tune sizing for the themed surface. */
    .figma-table tr {
        background: var(--figma-bg-surface, rgba(255,255,255,0.03)) !important;
    }
    .figma-table td { border-bottom: 1px solid var(--figma-border, rgba(255,255,255,0.08)); }
    .figma-table td:last-child { border-bottom: 0; }
}