/*
   Project ADAM HQ — operations dashboard styling.
   Same Tailwind-Slate token palette as admin-users.css / admin-schools.css.
*/

.adam-home {
    color: #0f172a;
}

/* ═══════════════════════════════════════════════════════
   Header — eyebrow + greeting + program subtitle
   ═══════════════════════════════════════════════════════ */
.adam-home-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Matches .admin-schools-primary-btn so the two admin pages agree; an <a>
   rather than a <button> because the download is a plain navigation. */
.adam-home-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.adam-home-export-btn:hover {
    background: #1e293b;
    color: #fff;
}

.adam-home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.375rem;
}

.adam-home-greeting {
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #0f172a;
    margin: 0;
}

.adam-home-subtitle {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: #475569;
}

/* ═══════════════════════════════════════════════════════
   KPI tiles — five across on desktop, wraps on narrow widths
   ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   Filter bar (FF-2316)
   ═══════════════════════════════════════════════════════ */
.adam-home-filters {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.adam-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.adam-filter-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.adam-filter-select {
    appearance: none;
    min-width: 12rem;
    padding: 0.4375rem 2rem 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    background-color: #fff;
    /* Inline chevron: a data: URI keeps the strict-CSP artifact rules and the
       app's own asset pipeline out of it for one 12-byte glyph. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.5' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    cursor: pointer;
}

.adam-filter-select:focus-visible {
    outline: 2px solid #9f2241;
    outline-offset: 1px;
}

.adam-filter-pills {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem;
    background: #f1f5f9;
    border-radius: 9999px;
}

.adam-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.3125rem 0.75rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.adam-filter-pill:hover { background: rgba(255, 255, 255, 0.7); }

.adam-filter-pill.active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Selected status pills borrow the compliance palette, so the filter and the
   pins it leaves on the map read as the same colour. */
.adam-filter-pill.compliant.active { color: #047857; }
.adam-filter-pill.expiring.active  { color: #b45309; }
.adam-filter-pill.lapsed.active    { color: #b91c1c; }

/* The expiring toggle stands alone rather than in a segmented group, so it
   carries its own border to read as pressed or not. */
.adam-filter-pill.expiring-toggle {
    border: 1px solid #cbd5e1;
    padding: 0.375rem 0.75rem;
    background: #fff;
}
.adam-filter-pill.expiring-toggle:hover { border-color: #b45309; }
.adam-filter-pill.expiring-toggle.active {
    background: #fffbeb;
    border-color: #b45309;
    color: #b45309;
}

.adam-filter-count {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    background: rgba(180, 83, 9, 0.12);
    color: #b45309;
    font-variant-numeric: tabular-nums;
}

/* Pushed to the far end so it reads as a status line for the bar rather than a
   fourth control. */
.adam-filter-active {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-left: auto;
    padding-bottom: 0.375rem;
    flex-wrap: wrap;
}

.adam-filter-active-text {
    font-size: 0.75rem;
    color: #64748b;
}

.adam-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    cursor: pointer;
}

.adam-filter-clear:hover {
    border-color: #9f2241;
    color: #9f2241;
}

@media (max-width: 700px) {
    /* Each control gets the full width; a wrapped select at 12rem beside a pill
       group leaves both unusable. */
    .adam-home-filters { gap: 0.875rem; }
    .adam-filter-group { width: 100%; }
    .adam-filter-select { width: 100%; }
    .adam-filter-pills { justify-content: space-between; }
    .adam-filter-active { margin-left: 0; }
}

/* One divided strip rather than five floating cards. Five separate cards under
   a full-width map read as five unrelated facts; hairline-divided cells inside a
   single frame read as one breakdown of the same population — which is what
   these are.

   The dividers are the 1px grid gap showing the container's background through,
   so they land correctly however the cells wrap at narrow widths. Nothing has to
   be re-declared per breakpoint. */
.adam-home-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: #e2e8f0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

@media (max-width: 1100px) {
    .adam-home-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .adam-home-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A column so the bar can be pinned to the foot of the cell — see the bar rule
   below for why that matters. */
.adam-kpi {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0.875rem 1rem;
}

.adam-kpi-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.375rem;
}

.adam-kpi-label .mud-icon-root {
    font-size: 0.875rem !important;
    flex-shrink: 0;
}

/* Value and sub on one baseline. The sub is a qualifier on the figure ("47%",
   "1,284 staff"), so it belongs beside it rather than on a line of its own. */
.adam-kpi-figure {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    /* Clearance for whatever sits at the foot of the cell. Declared here rather
       than on the bar, which needs its own margin-top for alignment. */
    margin-bottom: 0.625rem;
}

.adam-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.adam-kpi-sub {
    font-size: 0.75rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

/* margin-top: auto, so the three share bars sit on one line across the strip
   even when a neighbouring cell is taller — a row of bars at differing heights
   reads as differing scales. */
.adam-kpi-bar {
    margin-top: auto;
    height: 3px;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
}

.adam-kpi-bar-fill {
    height: 100%;
    background: #94a3b8;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.adam-kpi-note {
    margin-top: auto;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: #94a3b8;
}

.adam-kpi.compliant .adam-kpi-value { color: #047857; }
.adam-kpi.expiring  .adam-kpi-value { color: #b45309; }
.adam-kpi.lapsed    .adam-kpi-value { color: #b91c1c; }

.adam-kpi.compliant .adam-kpi-bar-fill { background: #10b981; }
.adam-kpi.expiring  .adam-kpi-bar-fill { background: #f59e0b; }
.adam-kpi.lapsed    .adam-kpi-bar-fill { background: #ef4444; }

/* ═══════════════════════════════════════════════════════
   Two-column body — map + figures + tables | queues
   ═══════════════════════════════════════════════════════ */
.adam-home-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* Map, KPI strip and the tabbed tables, in that order: each one is a narrower
   reading of what the map shows, so they descend the same column. */
.main-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Below this the side column has nothing left to be beside — the map wants the
   width more than the queues want to be adjacent to it. */
@media (max-width: 1100px) {
    .adam-home-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.adam-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

.adam-card + .adam-card {
    margin-top: 1rem;
}

.adam-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid #e2e8f0;
}

.adam-card-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.adam-card-title .mud-icon-root {
    color: #64748b !important;
    font-size: 1rem !important;
}

.adam-card-meta {
    font-size: 0.75rem;
    color: #64748b;
}

.adam-card-empty {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #64748b;
}

/* A thin, low-contrast scrollbar on the capped lists. The platform default is
   heavy enough inside a 12px-radius card to read as a rendering fault, and on
   Windows it reserves a permanent gutter that knocks the columns out of line. */
.leaderboard-list,
.attention-list,
.activity-list,
.outlier-list {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    overscroll-behavior: contain;
}

.leaderboard-list::-webkit-scrollbar,
.attention-list::-webkit-scrollbar,
.activity-list::-webkit-scrollbar,
.outlier-list::-webkit-scrollbar {
    width: 8px;
}

.leaderboard-list::-webkit-scrollbar-thumb,
.attention-list::-webkit-scrollbar-thumb,
.activity-list::-webkit-scrollbar-thumb,
.outlier-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.leaderboard-list::-webkit-scrollbar-thumb:hover,
.attention-list::-webkit-scrollbar-thumb:hover,
.activity-list::-webkit-scrollbar-thumb:hover,
.outlier-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: content-box;
}

/* ═══════════════════════════════════════════════════════
   Tab strip — district compliance / drill outliers
   ═══════════════════════════════════════════════════════ */
/* Sits where a card header would, and does that job too: the counts on the tabs
   report both sets, so the one behind the fold is still a visible number. */
.adam-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 1.125rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.adam-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: none;
    background: none;
    /* An inset bottom border rather than a real one, so switching tabs cannot
       shift the row by a pixel. */
    box-shadow: inset 0 -2px 0 transparent;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.875rem 0.25rem;
    margin-right: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s ease, box-shadow 0.12s ease;
}

.adam-tab .mud-icon-root {
    font-size: 1rem !important;
    color: inherit !important;
}

.adam-tab:hover {
    color: #0f172a;
}

.adam-tab.active {
    color: #0f172a;
    box-shadow: inset 0 -2px 0 #9f2241;
}

.adam-tab-count {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.1875rem 0.375rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.adam-tab.active .adam-tab-count {
    background: #fdf2f5;
    color: #9f2241;
}

/* Says what the visible table is for. Dropped before the tabs are, since the
   tabs are the part you cannot use the page without. */
.adam-tabs-hint {
    margin-left: auto;
    padding-left: 0.75rem;
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: right;
}

@media (max-width: 1000px) {
    .adam-tabs-hint { display: none; }
}

/* ═══════════════════════════════════════════════════════
   Tables — district compliance, drill outliers
   ═══════════════════════════════════════════════════════ */
/* Capped at roughly eight rows and scrolled inside the card rather than
   lengthening the page. The header row stays put, so a scrolled table never
   loses which column is which. Below the table's own min-width the scroll goes
   horizontal instead of columns being dropped — every column here carries
   something a coordinator acts on. */
.adam-table-scroll {
    max-height: 31rem;
    overflow: auto;
}

.adam-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.adam-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

.adam-table tbody td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
}

.adam-table tbody tr:last-child td {
    border-bottom: none;
}

/* The name column carries the row's identity, so it takes the leading indent
   and the remaining width. The flex lives on a wrapper inside the cell, not on
   the cell: a td set to display: flex stops being a table cell, and the header
   above it stops lining up with it. */
.adam-table .cell-name {
    padding-left: 1.125rem;
}

.cell-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.adam-table th:last-child,
.adam-table td:last-child {
    padding-right: 1.125rem;
}

.adam-table .col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.adam-table th.col-num {
    text-align: right;
}

.adam-table .col-pct {
    font-weight: 600;
    color: #0f172a;
    width: 4rem;
}

.adam-table .col-share { width: 34%; }
.adam-table .col-date  { width: 8rem; white-space: nowrap; color: #475569; font-size: 0.8125rem; }
.adam-table .col-flag  { width: 9.5rem; }

/* ═══════════════════════════════════════════════════════
   District leaderboard
   ═══════════════════════════════════════════════════════ */
.leaderboard-row {
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}

.leaderboard-row:hover td,
.leaderboard-row.expanded td {
    background: #f8fafc;
}

.leaderboard-chevron {
    color: #94a3b8 !important;
    transition: transform 0.15s ease, color 0.15s ease;
    font-size: 1.125rem !important;
    align-self: center;
}

.leaderboard-row.expanded .leaderboard-chevron,
.leaderboard-chevron.open {
    transform: rotate(90deg);
    color: #475569 !important;
}

/* Expanded school list under a district, spanning every column of the table. Its
   own cell carries no padding so the block can set its own indent. */
.leaderboard-detail-row td {
    padding: 0 !important;
    background: #f8fafc;
}

.leaderboard-detail {
    padding: 0.25rem 1.125rem 0.75rem 2.375rem;
    background: #f8fafc;
    cursor: default;
}

.district-school-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    margin: 0 -0.5rem;
    font-size: 0.8125rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.district-school-row:hover {
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.district-school-row + .district-school-row {
    border-top: 1px solid #f1f5f9;
}

.district-school-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.district-school-dot.compliant { background: #10b981; }
.district-school-dot.expiring  { background: #f59e0b; }
.district-school-dot.lapsed    { background: #ef4444; }

.district-school-name {
    flex: 1;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Each school's own status, so an expanded district explains its share rather
   than just listing the schools it was computed from. */
.district-school-status {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #94a3b8;
}

.district-school-pct {
    flex-shrink: 0;
    min-width: 5.5rem;
    text-align: right;
    color: #475569;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.75rem;
}

.leaderboard-name {
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 500;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-fraction {
    font-size: 0.8125rem;
    color: #64748b;
}

/* Now a column of the table rather than a line under the district name, so the
   shares read as one chart the eye can scan down. */
.leaderboard-bar {
    height: 6px;
    min-width: 4rem;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
}

.leaderboard-bar-fill {
    height: 100%;
    background: #94a3b8;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Tinted by how good the share is — see ShareClass in the code-behind. A bar
   that is always green says the same thing at 12% as at 95%. */
.leaderboard-bar-fill.compliant { background: #10b981; }
.leaderboard-bar-fill.expiring  { background: #f59e0b; }
.leaderboard-bar-fill.lapsed    { background: #ef4444; }

/* ═══════════════════════════════════════════════════════
   Map — the lead panel, with coverage read off it
   ═══════════════════════════════════════════════════════ */
.map-shell {
    position: relative;
}

.schools-map-container {
    width: 100%;
    height: 480px;
    background: #f8fafc;
}

@media (max-width: 700px) {
    .schools-map-container {
        height: 340px;
    }
}

/* Top-left, which is the one corner Google's own controls leave alone (the map
   is initialised without the map-type control, and zoom sits bottom-right). */
.map-overlay {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    z-index: 2;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(2px);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 0.875rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
    pointer-events: none;
}

.map-overlay-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.map-overlay-value {
    margin-top: 0.125rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.map-overlay-value span {
    margin-left: 0.3125rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.map-overlay-gap {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: #b45309;
}

.map-overlay-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #475569;
}

.map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.map-legend-item strong {
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.map-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px #cbd5e1;
}

.map-legend-dot.compliant { background: #10b981; }
.map-legend-dot.expiring  { background: #f59e0b; }
.map-legend-dot.lapsed    { background: #ef4444; }

/* ═══════════════════════════════════════════════════════
   Side panel — attention list & recent activity
   ═══════════════════════════════════════════════════════ */
/* Row heights are declared rather than inherited so that a list's cap can be
   written as a row count — max-height = N × --row-h drops the fold on a row edge
   instead of through the middle of someone's text.

   Six rows apiece. Both lists live in the side column, and letting either run to
   its full length pushed the other off the fold; six is what fits beside the map
   and the tables now stacked in the main column.

   These are column flex containers, so rows also need flex-shrink: 0 — the
   default would squeeze them to fit the cap and scroll nothing. */
.side-column {
    min-width: 0;
}

.attention-list,
.activity-list {
    --row-h: 3.875rem;
    display: flex;
    flex-direction: column;
    max-height: calc(6 * var(--row-h));
    overflow-y: auto;
}

.attention-row,
.activity-row {
    box-sizing: border-box;
    height: var(--row-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.125rem;
    border-bottom: 1px solid #f1f5f9;
}

.attention-row {
    cursor: pointer;
    transition: background 0.12s ease;
}

.attention-row:hover {
    background: #f8fafc;
}

.attention-row:last-child,
.activity-row:last-child {
    border-bottom: none;
}

.attention-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.attention-dot.expiring { background: #f59e0b; }
.attention-dot.lapsed   { background: #ef4444; }

.attention-body {
    flex: 1;
    min-width: 0;
}

.attention-title {
    font-size: 0.875rem;
    line-height: 1.25;
    font-weight: 500;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ellipsised like the title above it: a long district name that wrapped to a
   second line would overflow the row's fixed height. */
.attention-meta {
    font-size: 0.75rem;
    line-height: 1.25;
    color: #64748b;
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attention-pill {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid transparent;
}

.attention-pill.expiring {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.attention-pill.lapsed {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.activity-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #ecfdf5;
    color: #047857 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon .mud-icon-root {
    font-size: 1rem !important;
}

.activity-body {
    flex: 1;
    min-width: 0;
}

.activity-title {
    font-size: 0.875rem;
    line-height: 1.25;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-title strong {
    font-weight: 600;
}

.activity-meta {
    font-size: 0.75rem;
    line-height: 1.25;
    color: #64748b;
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   Internal Drill outliers (FF-2581)
   ═══════════════════════════════════════════════════════ */
.outlier-row {
    cursor: pointer;
    transition: background 0.12s ease;
}

.outlier-row:hover td {
    background: #f8fafc;
}

.outlier-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.outlier-dot.expiring { background: #f59e0b; }
.outlier-dot.lapsed   { background: #ef4444; }

.outlier-body {
    flex: 1;
    min-width: 0;
}

.outlier-title {
    font-size: 0.875rem;
    line-height: 1.25;
    font-weight: 500;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outlier-meta {
    font-size: 0.75rem;
    line-height: 1.25;
    color: #64748b;
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tabular figures so the durations line up as a column the eye can scan. */
.outlier-elapsed {
    width: 5.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}

.outlier-pill {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.outlier-pill.expiring {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.outlier-pill.lapsed {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.outlier-training {
    width: 6.5rem;
    font-size: 0.75rem;
    color: #64748b;
}

/* A figure recomputed from today's records rather than captured on the day.
   Dimmed and asterisked rather than hidden: it is still the best answer
   available for that drill, it just is not the answer the column promises. */
.outlier-training.is-estimated {
    color: #94a3b8;
}
.outlier-training-mark {
    font-weight: 700;
    color: #b45309;
}

.outlier-footnote {
    padding: 0.625rem 1.125rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.6875rem;
    color: #64748b;
}

/* Five columns need more room than the two-column leaderboard before they start
   crushing each other. Narrow viewports scroll .adam-table-scroll sideways rather
   than dropping columns: the reason a drill was flagged and its training figure
   are the substance of the row, and without them the coloured dot is all that
   separates "implausibly fast" from "over the goal". */
.outlier-list .adam-table {
    min-width: 42rem;
}

/* ═══════════════════════════════════════════════════════
   Slide-in school detail panel (replaces the Google InfoWindow)
   ═══════════════════════════════════════════════════════ */
.school-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.30);
    z-index: 80;
    animation: school-panel-fade-in 0.18s ease-out;
}

.school-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 92vw);
    background: #fff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.10);
    z-index: 81;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: school-panel-slide-in 0.22s ease-out;
}

@keyframes school-panel-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes school-panel-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.school-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.school-panel-title-block {
    flex: 1;
    min-width: 0;
}

.school-panel-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.school-panel-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.school-panel-address {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.school-panel-address .mud-icon-root {
    font-size: 0.875rem !important;
    color: #94a3b8 !important;
}

.school-panel-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}

.school-panel-close:hover {
    background: #f8fafc;
    color: #0f172a;
}

.school-panel-close .mud-icon-root {
    font-size: 1rem !important;
}

.school-panel-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
}

/* Status banner — overall heart-safe status */
.school-panel-status {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
}

.school-panel-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e2e8f0;
}

.school-panel-status-label {
    font-weight: 600;
    color: #0f172a;
}

.school-panel-status-pct {
    margin-left: auto;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.school-panel-status.compliant .school-panel-status-dot { background: #10b981; }
.school-panel-status.expiring  .school-panel-status-dot { background: #f59e0b; }
.school-panel-status.lapsed    .school-panel-status-dot { background: #ef4444; }

/* Mini stats row */
/* auto-fit rather than a fixed four: the panel now shows five facts — both drill
   windows plus the recognition date FF-2316 asked for — and a hard column count
   either orphans one on its own row or overflows the panel. */
.school-panel-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.school-panel-stat {
    text-align: left;
}

.school-panel-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.25rem;
}

/* Sized for dates and names, which is what all five of these are. At the old
   1.375rem "May 12, 2026" wrapped mid-date in a 8rem column. */
.school-panel-stat-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.school-panel-stat-value.compliant { color: #047857; }
.school-panel-stat-value.expiring  { color: #b45309; }
.school-panel-stat-value.lapsed    { color: #b91c1c; }

/* A date that has passed, or is inside the dashboard's expiring-soon horizon. */
.school-panel-stat-value.is-overdue { color: #b91c1c; }
.school-panel-stat-value.is-soon    { color: #b45309; }

.school-panel-stat-sub {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #94a3b8;
}

/* ─── Drill history (FF-2316) ─────────────────────────────────────────── */
.school-panel-drills {
    list-style: none;
    margin: 0;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.school-panel-drill {
    padding: 0.625rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

/* No coloured left edge. The outcome is already stated in words on the row —
   "Recognition drill · passed" — and an accent stripe repeating it in colour
   adds decoration rather than information. The verdict is carried by the label
   below instead. */
.school-panel-drill-kind.compliant { color: #047857; }
.school-panel-drill-kind.expiring  { color: #b45309; }
.school-panel-drill-kind.lapsed    { color: #b91c1c; }

.school-panel-drill-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.school-panel-drill-kind {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
}

.school-panel-drill-date {
    font-size: 0.6875rem;
    color: #94a3b8;
    white-space: nowrap;
}

.school-panel-drill-meta {
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.school-panel-drill-chip {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 0.0625rem 0.375rem;
    font-variant-numeric: tabular-nums;
}

/* A run that missed the three-minute goal. */
.school-panel-drill-chip.over {
    background: #fffbeb;
    color: #b45309;
}

.school-panel-drill-by {
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* ─── Link out to this school's events (FF-2317) ─────────────────────── */
.school-panel-events-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: calc(100% - 2.5rem);
    margin: 0 1.25rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #9f2241;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.school-panel-events-link span { flex: 1; }

.school-panel-events-link:hover {
    border-color: #9f2241;
    background: #fdf2f5;
}

.school-panel-section-title {
    padding: 1rem 1.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.school-panel-issues {
    margin: 0;
    padding: 0 1.25rem 0.5rem 2.25rem;
    font-size: 0.8125rem;
    color: #334155;
    list-style: disc;
}
.school-panel-issues li + li { margin-top: 0.125rem; }

.school-panel-actions {
    padding: 0.5rem 1.25rem 1.25rem;
    margin-top: auto;
}
.school-panel-cta {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: #9F2241;
    color: #fff;
    border: none;
    border-radius: 9999px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.school-panel-cta:hover { background: #6E1730; }
.school-panel-cta:active { transform: scale(0.99); }
.school-panel-cta .mud-icon-root { font-size: 1rem !important; }

/* Staff list */
.school-panel-staff {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.75rem 1rem;
}

.staff-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.5rem;
    border-radius: 8px;
    transition: background 0.12s ease;
    cursor: pointer;
    user-select: none;
}

.staff-row:hover,
.staff-row.expanded {
    background: #f8fafc;
}

.staff-chevron {
    color: #94a3b8 !important;
    transition: transform 0.15s ease, color 0.15s ease;
    font-size: 1.125rem !important;
    flex-shrink: 0;
}

.staff-chevron.open {
    transform: rotate(180deg);
    color: #475569 !important;
}

/* Expanded cert detail block */
.staff-cert-detail {
    margin: 0 0.5rem 0.5rem;
    padding: 0.625rem 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.staff-cert-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0;
}

.staff-cert-row + .staff-cert-row {
    border-top: 1px solid #f1f5f9;
    padding-top: 0.625rem;
}

.staff-cert-type {
    width: 7rem;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
}

.staff-cert-info {
    flex: 1;
    min-width: 0;
}

.staff-cert-dates {
    font-size: 0.75rem;
    color: #475569;
}

.staff-cert-sep {
    margin: 0 0.5rem;
    color: #cbd5e1;
}

.staff-cert-empty {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

.staff-cert-pill {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.staff-cert-pill.compliant { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.staff-cert-pill.expiring  { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.staff-cert-pill.lapsed    { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.staff-cert-pill.missing   { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }

.staff-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    background: #e2e8f0;
    color: #334155;
}

.staff-avatar.compliant { background: #d1fae5; color: #047857; }
.staff-avatar.expiring  { background: #fef3c7; color: #b45309; }
.staff-avatar.lapsed    { background: #fee2e2; color: #b91c1c; }
.staff-avatar.missing   { background: #f1f5f9; color: #64748b; }

.staff-body {
    flex: 1;
    min-width: 0;
}

.staff-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-role {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.125rem;
}

.staff-pill {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.staff-pill.compliant { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
.staff-pill.expiring  { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.staff-pill.lapsed    { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.staff-pill.missing   { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }