/*
 * Shared responsive contract for every portal.
 *
 * This file is injected after page styles by server.js so the breakpoints are
 * consistent on localhost and production.  Page-specific styles still own
 * their visual identity; these rules only prevent overflow and make the
 * shared shell/toolbars/grids predictable at the main device widths.
 */
:root {
    --layout-gutter: clamp(0.75rem, 2vw, 2rem);
    --layout-gap: clamp(0.5rem, 1.2vw, 1.25rem);
    --layout-control-height: 2.5rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Shared shells used by School Admin, Teacher, and Parent portals. */
.admin-container,
.driver-container,
.supergov-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.admin-main,
.driver-main,
.supergov-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.admin-main > *,
.driver-main > *,
.supergov-content > * {
    min-width: 0;
    max-width: 100%;
}

/* Headers and action rows must wrap instead of pushing the page wider. */
.admin-main .page-header,
.admin-main .page-control-header,
.admin-main .school-control-header,
.admin-main .directory-heading,
.driver-main .page-control-header,
.supergov-content .supergov-header,
.supergov-content .supergov-actions,
.supergov-content .supergov-filters {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

.admin-main .header-actions,
.admin-main .school-header-actions,
.admin-main .directory-tools,
.admin-main .filter-bar,
.admin-main .filters,
.admin-main .toolbar,
.admin-main .actions,
.driver-main .header-actions,
.driver-main .report-actions,
.supergov-content .supergov-topbar-actions,
.supergov-content .supergov-actions {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

.admin-main .page-header > *,
.admin-main .page-control-header > *,
.admin-main .school-control-header > *,
.admin-main .directory-heading > *,
.admin-main .directory-tools > *,
.admin-main .filter-bar > *,
.admin-main .filters > *,
.admin-main .toolbar > *,
.driver-main .page-control-header > *,
.driver-main .report-actions > *,
.supergov-content .supergov-header > *,
.supergov-content .supergov-actions > *,
.supergov-content .supergov-filters > * {
    min-width: 0;
    max-width: 100%;
}

/* Grid cards keep a readable minimum and never overflow a narrow column. */
.admin-main .stats-grid,
.admin-main .metrics-grid,
.admin-main .school-metrics,
.admin-main .support-metrics,
.admin-main .cards-grid,
.admin-main .actions-grid,
.driver-main .driver-metrics,
.driver-main .attendance-summary,
.supergov-content .supergov-metrics,
.supergov-content .supergov-actions-grid {
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--layout-gap);
}

.admin-main .stat-card,
.admin-main .metric-card,
.admin-main .school-metric-card,
.admin-main .support-metric-card,
.admin-main .cards-grid > *,
.driver-main .metric-card,
.driver-main .attendance-stat,
.supergov-content .supergov-actions-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* Long tables remain usable instead of expanding the whole viewport. */
.admin-main .table-wrap,
.admin-main .table-wrapper,
.admin-main .table-container,
.admin-main .table-responsive,
.driver-main .table-wrap,
.driver-main .table-wrapper,
.supergov-content .table-wrap,
.supergov-content .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.admin-main table,
.driver-main table,
.supergov-content table {
    max-width: 100%;
}

@media (max-width: 1180px) {
    :root {
        --layout-gutter: clamp(0.75rem, 1.8vw, 1.5rem);
    }

    .admin-main,
    .driver-main,
    .supergov-content {
        padding-inline: var(--layout-gutter) !important;
    }

    .admin-main .page-header,
    .driver-main .page-control-header,
    .supergov-content .supergov-header {
        align-items: flex-start;
    }
}

@media (max-width: 1024px) {
    /* Match the existing shell's tablet transition while keeping every
       content area full-width after the sidebar becomes an overlay. */
    body .admin-container,
    body .driver-container,
    body .supergov-shell {
        display: block;
        min-height: 100svh;
    }

    body .admin-main,
    body .driver-main,
    body .supergov-content {
        width: 100%;
        min-height: calc(100svh - 4rem);
    }

    .admin-main .page-header,
    .admin-main .page-control-header,
    .driver-main .page-control-header,
    .supergov-content .supergov-header {
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .admin-main .page-header,
    .admin-main .page-control-header,
    .admin-main .school-control-header,
    .admin-main .directory-heading,
    .driver-main .page-control-header,
    .supergov-content .supergov-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-main .header-actions,
    .admin-main .school-header-actions,
    .admin-main .directory-tools,
    .admin-main .filter-bar,
    .admin-main .filters,
    .admin-main .toolbar,
    .driver-main .header-actions,
    .driver-main .report-actions,
    .supergov-content .supergov-actions,
    .supergov-content .supergov-filters {
        width: 100%;
        justify-content: flex-start;
    }

    .admin-main .directory-tools,
    .admin-main .filter-bar,
    .admin-main .filters,
    .admin-main .toolbar,
    .supergov-content .supergov-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-main .directory-tools > :first-child,
    .admin-main .filter-bar > :first-child,
    .admin-main .filters > :first-child,
    .admin-main .toolbar > :first-child,
    .supergov-content .supergov-filters > :first-child {
        grid-column: 1 / -1;
    }

    .admin-main .directory-tools input,
    .admin-main .directory-tools select,
    .admin-main .filter-bar input,
    .admin-main .filter-bar select,
    .admin-main .filters input,
    .admin-main .filters select,
    .admin-main .toolbar input,
    .admin-main .toolbar select,
    .supergov-content .supergov-filters input,
    .supergov-content .supergov-filters select {
        width: 100%;
        min-width: 0;
    }

    .admin-main .stats-grid,
    .admin-main .metrics-grid,
    .admin-main .school-metrics,
    .admin-main .support-metrics,
    .admin-main .cards-grid,
    .admin-main .actions-grid,
    .driver-main .driver-metrics,
    .driver-main .attendance-summary,
    .supergov-content .supergov-metrics,
    .supergov-content .supergov-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .admin-main .page-header h1,
    .admin-main .page-header h2,
    .admin-main .page-control-header h1,
    .admin-main .page-control-header h2,
    .driver-main .page-control-header h1,
    .driver-main .page-control-header h2,
    .supergov-content .supergov-header h1,
    .supergov-content .supergov-header h2 {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .admin-main,
    .driver-main,
    .supergov-content {
        padding-inline: 0.75rem !important;
    }

    .admin-main .stats-grid,
    .admin-main .metrics-grid,
    .admin-main .school-metrics,
    .admin-main .support-metrics,
    .admin-main .cards-grid,
    .admin-main .actions-grid,
    .driver-main .driver-metrics,
    .driver-main .attendance-summary,
    .supergov-content .supergov-metrics,
    .supergov-content .supergov-actions-grid,
    .admin-main .directory-tools,
    .admin-main .filter-bar,
    .admin-main .filters,
    .admin-main .toolbar,
    .supergov-content .supergov-filters {
        grid-template-columns: 1fr;
    }

    .admin-main .directory-tools > :first-child,
    .admin-main .filter-bar > :first-child,
    .admin-main .filters > :first-child,
    .admin-main .toolbar > :first-child,
    .supergov-content .supergov-filters > :first-child {
        grid-column: auto;
    }

    .admin-main .header-actions,
    .admin-main .school-header-actions,
    .driver-main .header-actions,
    .driver-main .report-actions,
    .supergov-content .supergov-actions {
        gap: 0.4rem;
    }

    .admin-main .header-actions .btn,
    .admin-main .school-header-actions .btn,
    .driver-main .header-actions .btn,
    .driver-main .report-actions .btn,
    .supergov-content .supergov-actions .btn {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

@media print {
    /* Responsive layout must not add a print-only scroll viewport. */
    .admin-main,
    .driver-main,
    .supergov-content,
    .admin-main .table-wrap,
    .admin-main .table-wrapper,
    .driver-main .table-wrap,
    .supergov-content .table-wrap {
        overflow: visible !important;
        max-width: none !important;
    }
}

/*
 * School-admin dashboard metric rows
 *
 * Keep the two summary groups intentional on wide screens: the primary
 * group has five cards and the support/finance group has six.  The generic
 * auto-fit rule above is useful for most pages, but it makes these rows
 * change shape with small viewport differences (and was the reason local
 * and live appeared to have different card widths).  These selectors are
 * deliberately scoped to the dashboard and use !important so they win over
 * the page's legacy inline auto-fit declarations.
 */
@media (min-width: 1181px) {
    .admin-main.school-dashboard .school-metrics[aria-label="Key school metrics"] {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .admin-main.school-dashboard .school-metrics.support-metrics {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .admin-main.school-dashboard .school-metrics[aria-label="Key school metrics"],
    .admin-main.school-dashboard .school-metrics.support-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 769px) {
    .admin-main.school-dashboard .school-metrics {
        gap: 0.45rem;
        margin-bottom: 0.62rem;
    }

    .admin-main.school-dashboard .school-metric-card {
        min-height: 56px;
        gap: 0.45rem;
        padding: 0.48rem 0.55rem;
    }

    .admin-main.school-dashboard .school-metric-icon {
        width: 29px;
        height: 29px;
        border-radius: 7px;
        font-size: 0.7rem;
    }

    .admin-main.school-dashboard .school-metric-value {
        font-size: 1.02rem;
        line-height: 1.05;
    }

    .admin-main.school-dashboard .school-metric-label {
        font-size: 0.61rem;
        line-height: 1.15;
    }

    .admin-main.school-dashboard :is(.school-metric-subline, .support-metric-subline) {
        font-size: 0.53rem;
        line-height: 1.15;
    }
}

@media (max-width: 768px) {
    .admin-main.school-dashboard .school-metrics[aria-label="Key school metrics"],
    .admin-main.school-dashboard .school-metrics.support-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .admin-main.school-dashboard .school-metrics[aria-label="Key school metrics"],
    .admin-main.school-dashboard .school-metrics.support-metrics {
        grid-template-columns: 1fr !important;
    }
}

/* Super Admin legacy dashboard
 *
 * The Super Admin dashboard keeps a fixed navigation rail on laptops.  Its
 * six-stat row and the command-center two-column layout therefore need a
 * compact tablet state; otherwise the Quick Fixes panel can be pushed beyond
 * the visible content width.  Stack the command panels until there is room
 * for both columns and use three stat cards per row at laptop widths.
 */
body.supergov-legacy-page .admin-main {
    min-width: 0;
    max-width: 100%;
}

body.supergov-legacy-page .super-command-panel-head > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

body.supergov-legacy-page .super-command-kicker {
    overflow-wrap: anywhere;
}

@media (min-width: 1181px) {
    body.supergov-legacy-page .admin-main .stats-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 0.58rem;
    }

    body.supergov-legacy-page .admin-main .stat-card {
        min-width: 0;
        gap: 0.5rem;
        padding: 0.62rem;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    body.supergov-legacy-page .admin-main .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.58rem;
    }

    body.supergov-legacy-page .admin-main .stat-card {
        min-width: 0;
        gap: 0.5rem;
        padding: 0.62rem;
    }

    body.supergov-legacy-page .admin-main .super-command-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.7rem;
    }

    body.supergov-legacy-page .admin-main .super-command-panel {
        min-width: 0;
    }
}

@media (max-width: 768px) {
    body.supergov-legacy-page .admin-main .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem;
    }

    body.supergov-legacy-page .admin-main .super-command-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 480px) {
    body.supergov-legacy-page .admin-main .stats-grid {
        grid-template-columns: 1fr !important;
    }
}