:root {
    --ink: #1b2620;
    --deep-green: #1b2620;
    --button-green: #2f7a4f;
    --button-green-hover: #256240;
    --mid-green: #2f7a4f;
    --soft-green: #d5eedd;
    --accent: #eef7f1;
    --page-green: #f4f6f5;
    --muted: #000000;
    --line: #dde3df;
    --white: #ffffff;
    --shadow: 0 10px 28px -10px rgba(20, 40, 30, 0.18);
    --shadow-sm: 0 1px 2px rgba(20, 40, 30, 0.04), 0 4px 14px -6px rgba(20, 40, 30, 0.08);
    --shadow-float: 0 18px 40px -12px rgba(20, 40, 30, 0.22);
    --radius-lg: 22px;
    --radius-md: 18px;
    --radius-sm: 12px;
    /* Warm accents + display face shared with the landing page. */
    --sun: #f2b544;
    --sun-soft: #fff3da;
    --coral: #e2704c;
    --teal: #22706f;
    --teal-soft: #dcefef;
    --font-display: "Fraunces", Georgia, serif;
    /* Nutritional-status chart colors, mirrored from STATUS_* in app.py:
       undernutrition red -> amber, overnutrition its own violet pair. */
    --status-severe: #d7263d;
    --status-moderate: #f58a07;
    --status-normal: #2bb673;
    --status-over: #9d7bd8;
    --status-obese: #5b2a86;
    --status-tall: #2a9fd6;
    --radius-pill: 999px;
    --danger: #b63325;
    --danger-bg: #fbeceb;
    --warning: #a3720b;
    --warning-bg: #fdf1d8;
    --info: #2f8f8f;
    --nav-width: 250px;
    --nav-bg: #15251c;
    --nav-hover: rgba(255, 255, 255, 0.09);
    --nav-active: #2f7a4f;
    --nav-text: #ffffff;
    --nav-muted: #dbe9e0;
    --font-sans: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "Fira Code", ui-monospace, "Cascadia Code", monospace;
    --ease: 180ms ease-out;
    --landing-max: 1400px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body.division-body {
    font-family: var(--font-sans);
    color: var(--deep-green);
    background: var(--page-green);
}

/* ===== Shell layout ===== */

body.division-body {
    display: block;
}

/* ===== Sidebar — nutrifeed-web's flat dark rail, fixed to the viewport
   so it never scrolls with the page, regardless of how tall
   .division-content grows. ===== */

.skip-link {
    position: absolute;
    left: 0.75rem;
    top: -4rem;
    background: var(--ink);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    z-index: 100;
}
.skip-link:focus { top: 0.75rem; }

:focus-visible {
    outline: 2px solid var(--button-green);
    outline-offset: 2px;
    border-radius: 6px;
}
.top-nav :focus-visible { outline-color: #ffffff; }

.top-nav {
    width: var(--nav-width);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.9rem;
    background: var(--nav-bg);
    color: var(--nav-muted);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 50;
}

/* Logo on the left, collapse button at the right edge of the sidebar. */
.nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.5rem;
}
.nav-head .nav-brand { margin: 0 0 0 0.6rem; min-width: 0; }

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0.6rem 0.5rem;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-decoration: none;
}
.nav-brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    background: #ffffff;
    padding: 4px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
}

.nav-section-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9db3a5;
    margin: 1.1rem 0.6rem 0.4rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.1rem;
    border-radius: 10px;
    color: var(--nav-muted);
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 500;
    transition: background var(--ease), color var(--ease);
}
.nav-item:hover { background: var(--nav-hover); color: var(--nav-text); }
.nav-item.active { background: var(--nav-active); color: var(--nav-text); font-weight: 600; }
.nav-item-soon { color: #7f978a; cursor: default; }
.nav-item-soon:hover { background: none; color: #7f978a; }

.nav-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0.6rem 0.6rem;
    min-width: 0;
}

.user-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--nav-active);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.user-info { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-weight: 600; color: var(--nav-text); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-username { font-size: 0.75rem; color: #9db3a5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav-item.logout-item:hover { background: rgba(217, 92, 92, 0.16); color: #f0a3a3; }

.division-content {
    max-width: 1800px;
    margin: 0 auto 0 var(--nav-width);
    padding: 1.25rem 1.25rem 2rem;
}

/* Phones/tablets: the slim top bar shows; the sidebar becomes a slide-in drawer. */
.mobile-bar, .nav-backdrop { display: none; }

@media (max-width: 900px) {
    .mobile-bar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        position: sticky;
        top: 0;
        z-index: 40;
        padding: 0.5rem 0.75rem;
        background: var(--nav-bg);
    }
    .mobile-bar .nav-brand { margin: 0; font-size: 1.15rem; }
    .mobile-bar .nav-brand img { width: 34px; height: 34px; padding: 3px; border-radius: 9px; }
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        font-size: 1.1rem;
        cursor: pointer;
    }
    .mobile-menu-btn:hover { background: rgba(255, 255, 255, 0.16); }
    .mobile-bar :focus-visible { outline-color: #ffffff; }

    .top-nav {
        width: min(290px, 86vw);
        z-index: 60;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 220ms ease-out, visibility 0s linear 220ms;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    }
    body.nav-open .top-nav {
        transform: none;
        visibility: visible;
        transition: transform 220ms ease-out;
    }
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(15, 25, 19, 0.45);
    }
    .nav-backdrop[hidden] { display: none; }
    body.nav-open { overflow: hidden; }

    .division-content { margin-left: 0; padding: 1rem 1rem 3rem; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .top-nav, body.nav-open .top-nav { transition: none; }
}

.division-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 24px;
    flex-wrap: wrap;
}

.sy-select {
    flex: 1;
    min-width: 160px;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--deep-green);
}

.sy-apply {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 20px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--button-green);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.sy-apply:hover {
    background: var(--mid-green);
}

.greeting-eyebrow {
    color: var(--muted);
    font-size: 13px;
}

.page-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--deep-green);
    margin-top: 2px;
    letter-spacing: -0.3px;
}

/* ===== Dashboard header: title + division on the left, today's
   feeding day chip on the right (replaces the old hero banner) ===== */

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-chip {
    flex: 0 0 auto;
    margin-top: 6px;
    background: var(--white);
    color: var(--button-green-hover);
    box-shadow: var(--shadow-sm);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* ===== Stat cards ===== */

.division-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.division-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.card-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--soft-green);
    color: var(--mid-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 14px;
}

.card-icon.danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.card-label {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
}

.card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--deep-green);
}

.card-value.danger {
    color: var(--danger);
}

.card-value-of {
    font-size: 0.55em;
    font-weight: 600;
    color: var(--muted);
}

.card-trend {
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
}

.card-trend.trend-good {
    color: var(--mid-green);
}

.card-trend.trend-bad {
    color: var(--danger);
}

.card-value-of {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}

.card-split {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.card-split-box {
    flex: 1;
    background: var(--page-green);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    text-align: center;
    font-size: 11px;
    color: var(--muted);
}

.card-split-box strong {
    display: block;
    font-size: 15px;
    color: var(--deep-green);
}

.card-split-attendance {
    margin-top: 10px;
}

.card-split-attendance strong {
    font-size: 20px;
}

.card-split-of {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}

.division-card.card-danger {
    border-color: #f0d3d3;
}

/* ===== Insight panel ===== */

.insight-panel {
    background: var(--page-green);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    margin: 24px 0;
}

.insight-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 12px;
}

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.insight-item:last-of-type {
    margin-bottom: 0;
}

.insight-item p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--deep-green);
}

.insight-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 7px;
}

.insight-dot.insight-danger {
    background: var(--danger);
}

.insight-dot.insight-warning {
    background: var(--warning);
}

.insight-dot.insight-good {
    background: var(--mid-green);
}

.insight-empty {
    margin: 0;
    font-size: 13.5px;
    color: var(--muted);
}

.insight-flags {
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.insight-flag {
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

@media (max-width: 900px) {
    .division-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Trends panel ===== */

.trends-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.trends-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.trends-header h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--deep-green);
}

.tabs {
    display: flex;
    gap: 6px;
}

.pie-header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.period-form {
    display: inline-flex;
}

.period-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
}

.tab {
    text-decoration: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    background: var(--page-green);
}

.tab-active {
    background: var(--button-green);
    color: #fff;
}

/* ===== HTML/CSS bar chart (replaces the old matplotlib <img>) ===== */

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    height: 200px;
    padding: 0 8px;
}

.bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.bar-value {
    font-size: 12px;
    font-weight: 800;
    color: var(--deep-green);
    margin-bottom: 6px;
}

.bar {
    width: 100%;
    border-radius: 6px 6px 0 0;
    min-height: 2px;
}

.bar-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
}

.status-severely-wasted,
.status-severely-stunted {
    background: var(--status-severe);
}

.status-wasted,
.status-stunted {
    background: var(--status-moderate);
}

.status-normal {
    background: var(--status-normal);
}

.status-overweight {
    background: var(--status-over);
}

.status-obese {
    background: var(--status-obese);
}

.status-tall {
    background: var(--status-tall);
}

/* ===== Grouped bar chart ("All Periods") ===== */

.bar-chart.grouped {
    gap: 28px;
}

.bar-cluster {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.bar-group {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
    height: 100%;
}

.bar-group .bar-col {
    height: 100%;
}

.bar-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

/* ===== Baseline -> Endline improvement stat (analytics bar-chart panel) ===== */
.improvement-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--page-green);
    border: 1px solid var(--soft-green);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.improvement-stat-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mid-green);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.improvement-stat-body {
    min-width: 0;
}

.improvement-stat-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.improvement-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--mid-green);
    line-height: 1;
}

.improvement-stat-tag {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mid-green);
}

.improvement-stat-desc {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.improvement-stat-empty {
    margin: 0;
    font-size: 13.5px;
    color: var(--muted);
}

.improvement-stat-card-danger {
    background: var(--danger-bg);
    border-color: #f3c9c9;
}

.improvement-stat-icon-danger {
    background: var(--danger);
}

.improvement-stat-value-danger,
.improvement-stat-tag-danger {
    color: var(--danger);
}

/* ===== Per-school comparison bar chart (analytics screen) ===== */
/* Division-wide, so the number of schools is unbounded — unlike the
   fixed 3-8 column charts above, columns here get a fixed, equal width
   so bars stay comparable as schools are added. The chart centers itself
   when it fits the panel, and scrolls horizontally once there are more
   schools than fit (margin: auto instead of flex centering, so the
   overflow can still be scrolled all the way to the first column). */

.bar-chart-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.bar-chart.by-school {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    height: 240px;
    padding: 0 8px;
    width: fit-content;
    min-width: 0;
    margin: 0 auto;
}

.bar-chart.by-school .bar-col {
    flex: 0 0 90px;
    width: 90px;
}

.bar-chart.by-school .bar-label {
    /* Single line, truncated with an ellipsis, rather than wrapped —
       wrapping made every label a different number of lines depending on
       the school name's length, which pushed each column's bar+value up
       by a different amount and threw off the shared baseline even
       though the underlying percentages were correct. A single fixed
       line height keeps every column identical regardless of name
       length. Full name is still available via the title tooltip. */
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Pie chart panel ===== */

.pie-panel {
    margin: 20px 0 40px;
}

.pie-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.pie-chart {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pie-hole {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pie-hole-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--deep-green);
}

.pie-hole-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pie-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--deep-green);
}

.pie-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.pie-legend-label {
    font-weight: 400;
}

.pie-legend-pct {
    color: var(--muted);
    margin-left: 6px;
}

.pie-empty {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* ===== Division comparison bar chart (dashboard's default overview
   chart) — one horizontal stacked bar per division, bar length scaled to
   that division's own total, with a per-division legend underneath. ===== */

.division-bar-panel {
    margin: 20px 0 40px;
}

.division-bar-list {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.division-bar-track-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.division-bar-name {
    flex: 0 0 96px;
    font-size: 14px;
    font-weight: 700;
    color: var(--deep-green);
}

.division-bar-track {
    flex: 1;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--page-green);
    overflow: hidden;
}

.division-bar-fill {
    display: flex;
    height: 100%;
}

.division-bar-segment {
    height: 100%;
}

.division-bar-total {
    flex: 0 0 auto;
    min-width: 40px;
    text-align: right;
    font-size: 15px;
    font-weight: 800;
    color: var(--deep-green);
}

.division-bar-legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 10px 0 0 110px;
}

.division-bar-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--muted);
}

.division-bar-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}

.division-bar-legend-label {
    white-space: nowrap;
}

.division-bar-legend-count {
    font-weight: 700;
    color: var(--deep-green);
}

/* ===== School list/table (dashboard, item 7) =====
   Row/header heights are fixed so the scroll container can be sized to
   show exactly 5 data rows before it scrolls (--school-row-h * 5 +
   --school-header-h), rather than an arbitrary max-height guess. */

.school-table-panel {
    margin: 0 0 40px;
}

.school-table-panel .trends-header {
    margin-bottom: 14px;
}

:root {
    --school-header-h: 40px;
    --school-row-h: 44px;
    --school-table-radius: 6px;
    --school-table-grey-bg: #f1f2f1;
    --school-table-stripe-bg: #f8f9f8;
    --school-table-hover-bg: #ececeb;
    --school-table-text: #1a1a1a;
}

.school-table-scroll {
    height: calc(var(--school-header-h) + (var(--school-row-h) * 5));
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--school-table-radius);
}

.school-table {
    width: 100%;
    min-width: 620px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.school-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: var(--school-header-h);
    text-align: left;
    padding: 0 16px;
    background: var(--school-table-grey-bg);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 var(--line);
}

.school-table th:first-child {
    border-top-left-radius: var(--school-table-radius);
}

.school-table th:last-child {
    border-top-right-radius: var(--school-table-radius);
}

.school-table td {
    height: var(--school-row-h);
    padding: 0 16px;
    border-top: 1px solid var(--line);
    color: var(--school-table-text);
    white-space: nowrap;
    font-size: 13px;
}

.school-table tbody tr:nth-child(even) {
    background: var(--school-table-stripe-bg);
}

.school-table tbody tr:hover {
    background: var(--school-table-hover-bg);
}

.school-table td:first-child {
    font-weight: 700;
}

.school-table td.school-table-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

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

.school-table th.school-table-num .th-sort {
    justify-content: flex-end;
}

.school-table-division {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--school-table-grey-bg);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
}

.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

.th-sort:hover {
    color: var(--deep-green);
}

.th-sort i {
    font-size: 9px;
    color: var(--mid-green);
}

.risk-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
}

.risk-high {
    background: var(--danger-bg);
    color: var(--danger);
}

.risk-moderate {
    background: var(--warning-bg);
    color: var(--warning);
}

.risk-low {
    background: var(--soft-green);
    color: var(--mid-green);
}

.risk-no-data {
    background: var(--page-green);
    color: var(--muted);
}

.school-table-analytics {
    font-size: 13px;
    font-weight: 700;
}

/* Same design as the High-risk students panel's "Analytics ->" link
   (.risk-student-link on the Analytics screen) -- same color, weight,
   size and inline-flex + arrow layout, so the two look identical. */
.school-table-analytics-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--info);
    text-decoration: none;
    white-space: nowrap;
}

.school-table-analytics-link:hover {
    text-decoration: underline;
}

.school-table-analytics-disabled {
    color: var(--muted);
    cursor: default;
}

.school-table-analytics-arrow {
    display: inline-block;
    margin-left: 1px;
    font-size: 11px;
}

/* ===== Analytics page — side-by-side BMI/HFA panels ===== */

.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
}

.analytics-panel {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .analytics-grid { grid-template-columns: 1fr; }
}

/* ===== Analytics line chart ===== */

.line-chart-svg {
    width: 100%;
    height: 300px;
}

.axis-line {
    stroke: #c3c2b7;
    stroke-width: 1;
}

.grid-line {
    stroke: #e1e0d9;
    stroke-width: 1;
}

.grid-label {
    font-size: 11px;
    font-weight: 500;
    fill: var(--muted);
}

.area-fill {
    opacity: 0.1;
}

.axis-label {
    font-size: 12px;
    font-weight: 600;
    fill: var(--deep-green);
}

.point-label {
    font-size: 11px;
    font-weight: 700;
    fill: var(--deep-green);
}

/* ===== High-risk students panel (analytics, item 11 — student level) =====
   A student whose BMI (or HFA) risk at the current Baseline was also
   seen at some earlier Baseline year on record. Toggled between two
   tabs (BMI-for-age / Height-for-age, same .tabs/.tab styling as the
   bar/pie panels above) rather than mixed in one list. Row list, same
   shape as the feeding-progress rows below it — avatar initials,
   name/grade/school, and a single "<status> since <year>" pill. Capped
   to show 5 rows before the rest scrolls (see .risk-students-list). */

.risk-students-sub {
    font-size: 12px;
    color: var(--muted);
    font-weight: 400;
    margin-top: 2px;
}

.trends-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.risk-students-count {
    flex: 0 0 auto;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
}

/* Rows are ~66px tall including the flex gap below, so 5 * 66 = 330px
   shows exactly 5 rows before the rest scrolls inside the container. */
.risk-students-list {
    max-height: 330px;
    overflow-y: auto;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.risk-student-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--line);
}

.risk-student-row:last-child {
    border-bottom: none;
}

/* Loads the rest of a long high-risk list (see setupRiskStudentLists in analytics.js). */
.risk-students-more {
    flex: 0 0 auto;
    margin: 8px 0 4px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--mid-green);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.risk-students-more:hover:not(:disabled) {
    border-color: var(--mid-green);
}

.risk-students-more:disabled {
    cursor: progress;
    opacity: 0.7;
}

.risk-student-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.risk-student-avatar-severe {
    background: var(--danger-bg);
    color: var(--danger);
}

.risk-student-avatar-moderate {
    background: var(--warning-bg);
    color: var(--warning);
}

.risk-student-info {
    flex: 1;
    min-width: 0;
}

.risk-student-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--deep-green);
    margin: 0;
}

.risk-student-meta {
    font-size: 12.5px;
    color: var(--muted);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.risk-student-reasons {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 260px;
}

.risk-reason-badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.risk-reason-badge-severe {
    background: var(--danger-bg);
    color: var(--danger);
}

.risk-reason-badge-moderate {
    background: var(--warning-bg);
    color: var(--warning);
}

.risk-student-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--info);
    text-decoration: none;
    white-space: nowrap;
}

.risk-student-link:hover {
    text-decoration: underline;
}

.risk-student-link i {
    font-size: 11px;
}

@media (max-width: 640px) {
    /* Avatar + name on the first line; badges and the link go underneath, lined up with the name. */
    .risk-student-row { flex-wrap: wrap; gap: 6px 14px; }
    .risk-student-info { flex-basis: calc(100% - 52px); }
    .risk-student-reasons { justify-content: flex-start; max-width: none; flex-basis: 100%; padding-left: 52px; }
    .risk-student-link { flex-basis: 100%; justify-content: flex-start; padding-left: 52px; }
}

/* ===== Feeding progress by school ===== */

.feeding-progress-panel {
    margin-top: 24px;
}

.feeding-progress-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feeding-progress-row { }

.feeding-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 13.5px;
}

.feeding-progress-school {
    font-weight: 700;
    color: var(--deep-green);
}

.feeding-progress-status {
    font-weight: 600;
    font-size: 12px;
}

.feeding-progress-status.ongoing { color: var(--mid-green); }
.feeding-progress-status.completed { color: var(--muted); }

.feeding-progress-count {
    color: var(--muted);
    font-weight: 600;
}

.feeding-progress-count.warning { color: var(--warning); }
.feeding-progress-count.danger { color: var(--danger); }

.feeding-progress-track {
    height: 8px;
    background: var(--page-green);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.feeding-progress-fill {
    height: 100%;
    border-radius: var(--radius-pill);
}

.feeding-progress-fill.success { background: var(--mid-green); }
.feeding-progress-fill.warning { background: var(--warning); }
.feeding-progress-fill.danger { background: var(--danger); }

@media (max-width: 640px) {
    .pie-chart { width: 220px; height: 220px; }
    .pie-hole { width: 130px; height: 130px; }
    .pie-layout { flex-direction: column; }
}
/* ===== Login page ===== */

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
}

.brand-panel {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--button-green-hover);
}

.brand-panel .bg-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.form-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-green);
    padding: 40px 24px;
}

.form-panel-inner {
    width: 100%;
    max-width: 400px;
}

.form-panel-inner .brand {
    position: absolute;
    top: 32px;
    left: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--button-green);
}

.form-panel-inner .brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
}

.login-card {
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.login-card h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--deep-green);
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}

.login-card .subtitle {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 22px;
}

.login-card .form-message {
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 18px;
}

.field-group {
    margin-bottom: 18px;
}

.field-group label {
    display: block;
    margin-bottom: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}

.field-group input,
.field-group select {
    width: 100%;
    height: 46px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
    color: var(--ink);
    background: #ffffff;
    font-family: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.field-group input::placeholder {
    color: #8a938e;
    font-weight: 500;
}

.field-group input:focus,
.field-group select:focus {
    border-color: var(--button-green);
    box-shadow: 0 0 0 3px rgba(47, 122, 79, 0.25);
}

.login-card button[type="submit"] {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--button-green);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease;
}

.login-card button[type="submit"]:hover {
    background: var(--mid-green);
}

.signup-copy {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin-top: 20px;
}

.signup-copy a {
    color: var(--mid-green);
    font-weight: 700;
    text-decoration: none;
}

.signup-copy a:hover {
    text-decoration: underline;
}

/* ===== Sign-up (Step 1 & 2) — ported from the school-level app's design ===== */

.step-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 10px;
}

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-right: 42px;
}

.toggle-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 6px;
    color: var(--deep-green);
    cursor: pointer;
}

.req-heading {
    margin: 2px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--deep-green);
}

.req-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.req-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--muted);
}

.req-list li::before {
    content: "\2715";
    position: absolute;
    left: 0;
    top: 0;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #d64545;
    color: #fff;
    font-size: 9px;
    line-height: 17px;
    text-align: center;
}

.req-list li.met::before {
    content: "\2713";
    background: var(--mid-green);
}

.field-row {
    display: flex;
    gap: 14px;
}

.field-row .field-group {
    flex: 1;
    min-width: 0;
}

.field-row .field-group.mi {
    flex: 0 0 88px;
}

.divider {
    border: none;
    height: 1px;
    background: var(--line);
    margin: 2px 0 20px;
}

.email-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 15px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--deep-green);
}

.email-chip a {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--mid-green);
    text-decoration: none;
}

.email-chip a:hover {
    text-decoration: underline;
}

@media (max-width: 620px) {
    .field-row { flex-direction: column; gap: 0; }
    .field-row .field-group.mi { flex: 1; }
}


@media (max-width: 900px) {
    .login-page {
        grid-template-columns: 1fr;
    }
    .brand-panel {
        min-height: 220px;
    }
}

/* ===== Beneficiaries screen (items 14 + 15) =====
   A filterable student roster (Division/School/School Year, same
   .division-filters/.sy-select bar as Analytics) that opens a slide-in
   profile panel on click. Clicking a different row while the panel is
   already open crossfades the same panel's content in place instead of
   closing and reopening it — see beneficiaries.js. */

/* One card per school (own .trends-panel, same white/shadow/border card
   every other panel on the app uses -- NOT nested inside a shared outer
   box), each headed by the school name plus the selected school year
   (.trends-header + .risk-students-count, reused as-is). Grade is a
   plain sub-heading inside that same card, not another box. */

.beneficiaries-summary {
    margin: 0;
}

/* Summary count + name search above the roster. */
.beneficiary-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: -6px 0 18px;
}

.beneficiary-search {
    position: relative;
    flex: 0 1 320px;
}

.beneficiary-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--muted);
    pointer-events: none;
}

.beneficiary-search input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
}

.beneficiary-search input:focus {
    outline: none;
    border-color: var(--button-green);
    box-shadow: 0 0 0 3px rgba(47, 122, 79, 0.2);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Latest BMI-for-age status on each roster row. */
.beneficiary-row .risk-student-info {
    flex: 1 1 auto;
    min-width: 0;
}

.beneficiary-row .beneficiary-status-pill {
    flex: 0 0 auto;
    font-size: 11.5px;
    padding: 3px 10px;
    white-space: nowrap;
}

.beneficiary-status-none {
    font-weight: 600;
}

.beneficiary-school-panel .trends-header {
    margin-bottom: 14px;
}

/* Local Grade/Section filter for THIS school's card only -- narrows
   which "Grade-Section" sub-groups below are visible via JS (see
   beneficiaries.js), no page reload. Reuses .sy-select's look but at a
   smaller footprint since it sits inside a card, not the page header. */
.beneficiary-local-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.beneficiary-local-filters .sy-select {
    flex: 0 1 180px;
    height: 36px;
    font-size: 12.5px;
}

/* Each row is ~59px tall (38px avatar + 20px padding + 1px border) plus
   a 2px flex gap, so 10 * 61 = 610px shows roughly 10 students before
   the rest scrolls inside this school's own card -- grade labels add a
   little extra height on top of that, same approximation the other
   scrollable lists in this app use (see .risk-students-list). */
.beneficiary-school-scroll {
    max-height: 610px;
    overflow-y: auto;
    padding-right: 6px;
}

.beneficiary-grade-group {
    margin-top: 16px;
}

.beneficiary-grade-group:first-child {
    margin-top: 0;
}

.beneficiary-grade-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mid-green);
    margin-bottom: 6px;
}

.beneficiary-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.beneficiary-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 6px;
    border: none;
    border-bottom: 1px solid var(--line);
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 120ms ease;
}

.beneficiary-row:last-child {
    border-bottom: none;
}

.beneficiary-row:hover {
    background: var(--page-green);
}

.beneficiary-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--soft-green);
    color: var(--mid-green);
}

.beneficiary-row-arrow {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--muted);
}

/* ===== Split-pane profile view =====
   No more overlay/slide-in -- clicking a student narrows the list pane
   down to a sidebar-width column and the detail pane grows to fill the
   rest of the row, inline, both panes transitioning their width
   together (see beneficiaries.js toggling .has-selection). */

.beneficiary-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.beneficiary-list-pane {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    transition: width 280ms ease;
}

.beneficiary-layout.has-selection .beneficiary-list-pane {
    width: 340px;
}

.beneficiary-detail-pane {
    flex: 1 1 auto;
    min-width: 0;
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: none;
    position: sticky;
    top: 20px;
}

.beneficiary-layout.has-selection .beneficiary-detail-pane {
    display: block;
}

.beneficiary-detail-inner {
    padding: 32px 34px 40px;
    position: relative;
    transition: opacity 150ms ease;
}

.beneficiary-detail-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--page-green);
    color: var(--deep-green);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.beneficiary-detail-close:hover {
    background: var(--soft-green);
}

.beneficiary-detail-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-right: 48px;
    margin-bottom: 30px;
}

.beneficiary-detail-avatar {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    background: var(--soft-green);
    color: var(--mid-green);
}

.beneficiary-detail-name {
    font-size: 25px;
    font-weight: 800;
    color: var(--deep-green);
    letter-spacing: -0.3px;
}

.beneficiary-detail-meta {
    font-size: 14.5px;
    color: var(--muted);
    margin-top: 5px;
}

.beneficiary-detail-section {
    margin-bottom: 30px;
}

.beneficiary-detail-subhead {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 14px;
}

.beneficiary-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.beneficiary-stat-box {
    background: var(--page-green);
    border-radius: var(--radius-md);
    padding: 16px 18px;
}

.beneficiary-stat-label {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 8px;
}

.beneficiary-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--deep-green);
    line-height: 1.25;
}

.beneficiary-stat-value small {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.beneficiary-attendance-figures {
    display: flex;
    gap: 18px;
}

.beneficiary-attendance-figure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.beneficiary-attendance-num {
    font-size: 20px;
    font-weight: 800;
    color: var(--deep-green);
    line-height: 1.25;
}

.beneficiary-attendance-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.beneficiary-attendance-tag {
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.beneficiary-status-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.beneficiary-status-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.beneficiary-status-col-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.beneficiary-status-pill {
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--page-green);
    color: var(--muted);
}

.beneficiary-status-severely-wasted,
.beneficiary-status-severely-stunted {
    background: var(--danger-bg);
    color: var(--danger);
}

.beneficiary-status-wasted,
.beneficiary-status-stunted {
    background: var(--warning-bg);
    color: var(--warning);
}

.beneficiary-status-overweight,
.beneficiary-status-obese {
    background: #efeaf8;
    color: var(--status-obese);
}

.beneficiary-status-normal {
    background: var(--soft-green);
    color: var(--mid-green);
}

.beneficiary-status-tall {
    background: #e3eef6;
    color: var(--status-tall);
}

.beneficiary-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.beneficiary-flag {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}

.beneficiary-flag-yes {
    background: var(--soft-green);
    color: var(--mid-green);
}

.beneficiary-flag-no {
    background: var(--page-green);
    color: var(--muted);
}

.beneficiary-row.is-active {
    background: var(--soft-green);
}

.beneficiary-row.is-active .risk-student-name {
    color: var(--mid-green);
}

/* ===== Nutritional status trend chart (student detail pane) =====
   Rendered entirely server-side (see _render_status_chart_svg in
   app.py) using the exact same markup/classes as the Analytics screen's
   own line chart (.line-chart-svg/.axis-line/.grid-line/.area-fill/
   .point-label/.axis-label, all already defined above) so it matches
   that screen's look. The only things specific to this chart: the
   y-axis is a fixed row per status (same order as the bar/pie charts
   elsewhere) instead of a numeric scale, since the value being plotted
   is a category, not a count -- and each point's dot is colored by its
   own status severity rather than one fixed series color. */

.beneficiary-trend-tabs .tab {
    padding: 8px 16px;
    font-size: 12.5px;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.beneficiary-trend-row-label {
    font-size: 10.5px;
}

.beneficiary-trend-dot {
    stroke: #fff;
    stroke-width: 2;
}

.beneficiary-trend-dot.beneficiary-status-severely-wasted,
.beneficiary-trend-dot.beneficiary-status-severely-stunted {
    fill: var(--status-severe);
}

.beneficiary-trend-dot.beneficiary-status-wasted,
.beneficiary-trend-dot.beneficiary-status-stunted {
    fill: var(--status-moderate);
}

.beneficiary-trend-dot.beneficiary-status-normal {
    fill: var(--status-normal);
}

.beneficiary-trend-dot.beneficiary-status-overweight {
    fill: var(--status-over);
}

.beneficiary-trend-dot.beneficiary-status-obese {
    fill: var(--status-obese);
}

.beneficiary-trend-dot.beneficiary-status-tall {
    fill: var(--status-tall);
}

/* Baseline/Endline are overlaid on one chart now (two colored lines
   instead of a dropdown-driven single series) -- this just lays out
   the small legend the SVG markup appends below the chart itself. */
.beneficiary-trend-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    padding-left: 4px;
}

@media (max-width: 900px) {
    .beneficiary-layout {
        flex-direction: column;
    }
    .beneficiary-layout.has-selection .beneficiary-list-pane {
        width: 100%;
    }
    .beneficiary-detail-pane {
        width: 100%;
    }
    .beneficiary-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Schools screen (list + detail) ===== */

/* Three columns on a wide screen, fewer (at least 280px each) as it narrows, so cards never push past the page edge. */
.schools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(280px, (100% - 32px) / 3)), 1fr));
    gap: 16px;
}

.school-card {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
}

.school-card-danger {
    border-color: #f0d3d3;
}

.school-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.school-card-name {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--deep-green);
}

.school-card-meta {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.school-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--page-green);
    color: var(--button-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.school-card-icon-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.school-card-stats {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.school-card-stat {
    flex: 1;
    min-width: 0;
}

.school-card-stat-value {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--deep-green);
}

.school-card-stat-value.school-card-stat-danger { color: var(--danger); }
.school-card-stat-value.school-card-stat-warning { color: var(--warning); }
.school-card-stat-value.school-card-stat-good { color: var(--mid-green); }

.school-card-stat-label {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.school-card-progress {
    margin-top: 14px;
}

.school-card-progress-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 5px;
}

.school-card-progress-track {
    height: 6px;
    background: #eef3ee;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.school-card-progress-fill {
    height: 100%;
    background: var(--mid-green);
}

.school-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--info);
}


/* ===== School detail ===== */

.school-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--info);
    text-decoration: none;
    margin-bottom: 14px;
}

.school-back-link:hover {
    text-decoration: underline;
}

.school-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.school-detail-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--page-green);
    border: 1px solid var(--line);
    color: var(--button-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.school-detail-name {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--deep-green);
}

.school-detail-meta {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.school-detail-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 18px 0 24px;
}

@media (max-width: 900px) {
    .school-detail-kpis { grid-template-columns: repeat(2, 1fr); }
}

.school-grade-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.school-grade-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 4px;
}

.school-grade-bar-label span:first-child {
    font-weight: 700;
    color: var(--deep-green);
}

.school-grade-bar-track {
    display: flex;
    height: 14px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--page-green);
}

.school-grade-bar-segment {
    height: 100%;
}

.school-breakdown-scroll {
    max-height: 280px;
    overflow-y: auto;
}

.school-breakdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.school-breakdown-table th {
    position: sticky;
    top: 0;
    background: #fff;
    text-align: left;
    padding: 8px;
    color: var(--muted);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--line);
}

.school-breakdown-table td {
    padding: 8px;
    border-bottom: 1px solid #eef1ef;
}

.school-breakdown-table th.school-breakdown-num,
.school-breakdown-table td.school-breakdown-num {
    text-align: right;
}

.school-breakdown-muted {
    color: var(--muted);
}

.school-breakdown-danger { color: var(--danger); font-weight: 700; }
.school-breakdown-warning { color: var(--warning); font-weight: 700; }
.school-breakdown-good { color: var(--mid-green); font-weight: 700; }


/* =====================================================================
   nutrifeed-web components — Announcements & Meal Plans pages.
   Element selectors (h1, label, input…) are scoped under .nf-page so
   they don't restyle the older pages' own forms and headings.
   ===================================================================== */

/* Numbers set in Fira Code, as in nutrifeed-web's stat cards. */
.improvement-stat-value, .pie-hole-value, .stat-value, .count-pill {
    font-family: var(--font-mono);
}

.nf-page { line-height: 1.5; }
.nf-page a { color: var(--button-green); text-decoration: none; }
.nf-page h1 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 0.25rem; font-weight: 700; }
.nf-page h2 { font-size: 1.15rem; margin: 1.75rem 0 0.75rem; font-weight: 600; }
.nf-page h3 { font-size: 1.02rem; margin: 0 0 0.35rem; font-weight: 600; }
.nf-page .icon { flex-shrink: 0; vertical-align: -0.15em; }
.nf-page .greeting-eyebrow { margin-bottom: 0.3rem; }

.page-subtitle { color: var(--muted); margin: 0; }

/* Analytics page: secondary text is black, so it reads clearly. */
.analytics-page { --muted: #111111; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.header-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.header-actions form { margin: 0; }

.back-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
.back-link:hover { text-decoration: underline; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-outline, .btn-danger-outline, .btn-sun {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    border-radius: 10px;
    padding: 0.55rem 1.1rem;
    font-family: inherit;
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
:is(.nf-page, .landing, .auth-stage) .btn-primary { background: var(--button-green); color: #fff; }
:is(.nf-page, .landing, .auth-stage) .btn-primary:hover { background: var(--button-green-hover); }
.nf-page .btn-secondary { background: var(--accent); color: var(--button-green-hover); border-color: var(--button-green); }
.nf-page .btn-secondary:hover { background: var(--soft-green); }
:is(.nf-page, .landing, .auth-stage) .btn-outline { background: #fff; color: var(--ink); border-color: #b9c4bd; }
:is(.nf-page, .landing, .auth-stage) .btn-outline:hover { border-color: var(--button-green); color: var(--button-green); }
.nf-page .btn-danger-outline { background: #fff; color: var(--danger); border-color: #e3b7b7; }
.nf-page .btn-danger-outline:hover { background: var(--danger-bg); border-color: var(--danger); }
:is(.landing, .auth-stage) .btn-sun { background: var(--sun); color: var(--deep-green); border-color: var(--sun); }
:is(.landing, .auth-stage) .btn-sun:hover { background: #e2a52e; border-color: #e2a52e; }

.text-link { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; font-size: 0.9rem; min-height: 44px; }
.text-link:hover { text-decoration: underline; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px; border: none;
    background: transparent; color: var(--muted); cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.icon-btn:hover { background: var(--danger-bg); color: var(--danger); }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.25rem 0 1.75rem; }
.stat-card {
    display: flex; flex-direction: column; gap: 0.25rem;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); color: var(--ink);
}
.stat-value { font-size: 2rem; font-weight: 600; color: var(--button-green); line-height: 1.1; }
.stat-label { font-size: 0.86rem; color: var(--muted); }

/* Lists & cards */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-head h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; }

.list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.nf-page .list-item {
    display: block;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1rem 1.2rem;
    color: var(--ink);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.nf-page .list-item:hover { border-color: var(--button-green); box-shadow: var(--shadow); }
.list-item-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.list-item-date { margin-left: auto; color: var(--muted); font-size: 0.82rem; }
.list-item p { color: var(--muted); font-size: 0.92rem; margin: 0.2rem 0; }
.list-item-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); margin-top: 0.35rem; }
.list-item-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.meta-late { color: var(--danger); }

.tag {
    display: inline-block;
    background: var(--accent);
    color: var(--button-green-hover);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tag-urgent { background: var(--danger-bg); color: var(--danger); }
.tag-muted { background: var(--line); color: #46534b; }

.count-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6rem; padding: 0 0.45rem; height: 1.4rem; border-radius: 999px;
    background: var(--line); color: var(--ink); font-family: var(--font-mono); font-size: 0.78rem;
}

.filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.nf-page .filter-chip {
    display: inline-flex; align-items: center; min-height: 44px;
    background: var(--white); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.35rem 1rem; font-size: 0.88rem; color: var(--muted);
    transition: border-color var(--ease), color var(--ease);
}
.nf-page .filter-chip:hover { border-color: var(--button-green); color: var(--button-green); }
.nf-page .filter-chip.active { background: var(--button-green); color: #fff; border-color: var(--button-green); }

.empty-state { color: var(--muted); font-style: italic; }
.empty-panel {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
    background: var(--white); border: 1px dashed #b9c4bd; border-radius: var(--radius-md);
    padding: 1.5rem; color: var(--muted);
}
.hint { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.9rem; }

.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.4rem; box-shadow: var(--shadow-sm); }

/* Forms */
.nf-page .form { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; }
.nf-page .field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 0; }
.nf-page label { font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.nf-page .optional { font-weight: 400; }
.nf-page .field-hint { font-size: 0.8rem; color: var(--muted); }

.nf-page input[type="text"], .nf-page input[type="number"], .nf-page input[type="date"],
.nf-page input[type="datetime-local"], .nf-page input[type="password"], .nf-page input[type="tel"],
.nf-page select, .nf-page textarea {
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid #b9c4bd;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--ink);
    width: 100%;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.nf-page input:focus, .nf-page select:focus, .nf-page textarea:focus {
    outline: none; border-color: var(--button-green); box-shadow: 0 0 0 3px rgba(47, 122, 79, 0.25);
}
.nf-page textarea { resize: vertical; line-height: 1.55; }

.form-row { display: flex; gap: 1rem; }
.form-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.25rem; }

.filter-form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.nf-page .filter-form select { width: auto; flex: 1; min-width: 170px; }

/* Flash messages */
.flash-container { margin-bottom: 1rem; }
.flash { padding: 0.7rem 1rem; border-radius: 10px; font-size: 0.92rem; margin-bottom: 0.5rem; }
.flash-success { background: var(--accent); color: var(--button-green-hover); border: 1px solid var(--soft-green); }
.flash-error { background: var(--danger-bg); color: var(--danger); border: 1px solid #efc4c4; }

/* Announcement detail */
.announcement-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 0.88rem; margin-bottom: 0.5rem; }
.announcement-body {
    white-space: pre-wrap; line-height: 1.7; max-width: 860px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.3rem 1.4rem;
}
.info-strip { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; color: var(--muted); font-size: 0.9rem; }
.info-strip span { display: inline-flex; align-items: center; gap: 0.4rem; }

.comments-section { max-width: 860px; margin-top: 2rem; }
.comment-thread { display: flex; flex-direction: column; gap: 0.9rem; }
.comment { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; }
.comment p { margin: 0.35rem 0 0; white-space: pre-wrap; }
.comment-header { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.comment-school { font-size: 0.82rem; color: var(--button-green); font-weight: 500; }
.comment-date { color: var(--muted); font-size: 0.8rem; margin-left: auto; }
.comment-reply { margin: 0.75rem 0 0 1.25rem; background: var(--page-green); }
.comment-division { border-left: 3px solid var(--button-green); }

/* Meal plans */
.plan-group { margin-bottom: 1.5rem; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.75rem; }

.legend { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip {
    display: inline-block; flex-shrink: 0;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.18rem 0.55rem; border-radius: 6px;
}
.chip-hot_meal { background: #fdeee0; color: #9a4a0f; }
.chip-nfp { background: var(--accent); color: var(--button-green-hover); }
.chip-milk { background: #e4eefb; color: #2b5a92; }

.week-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.day-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0.9rem; scroll-margin-top: 1rem; }
.nf-page .day-card h2 { margin: 0 0 0.6rem; font-size: 1rem; }
.session-block + .session-block { border-top: 1px solid var(--line); margin-top: 0.6rem; padding-top: 0.6rem; }
.session-label { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--button-green); margin: 0 0 0.4rem; }
.session-label span { font-family: var(--font-sans); font-weight: 500; color: var(--muted); }
.meal-item { display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.35rem 0; }
.meal-item-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 0; }
.meal-item form { margin: 0 0 0 auto; }
.meal-item .icon-btn { width: 30px; height: 30px; opacity: 0.55; }
.meal-item:hover .icon-btn, .meal-item .icon-btn:focus-visible { opacity: 1; }
.meal-item-name { font-size: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
.empty-cell { font-size: 0.82rem; color: #9aa69f; font-style: italic; margin: 0.2rem 0; }

.nf-page .add-item-panel h2 { margin-top: 0; }
.add-item-form { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.add-item-form .field { flex: 0 1 160px; }
.add-item-form .field-grow { flex: 1 1 240px; }

@media (max-width: 1200px) {
    .week-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 720px) {
    .form-row { flex-direction: column; }
    .add-item-form .field { flex: 1 1 100%; }
    .comment-date { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* =====================================================================
   Site-wide theme: carries the landing page's look into every page
   (Fraunces display titles, uppercase coral kickers, pill buttons,
   soft floating cards, dot-grid accents and the sun / coral / teal
   accents). Placed before the landing block so the landing's own
   rules still win there.
   ===================================================================== */

/* ----- Titles & kickers ----- */
.page-title, .nf-page h1, .school-detail-name, .login-card h2 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.page-title, .nf-page h1 { font-size: clamp(1.75rem, 2.6vw, 2.3rem); line-height: 1.15; margin-top: 0.2rem; }
.school-detail-name { font-size: 1.75rem; line-height: 1.15; }
.login-card h2 { font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1.1; margin-bottom: 10px; }
.trends-header h2, .nf-page h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0; color: var(--ink); }

.greeting-eyebrow {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral);
}

/* ----- Sidebar ----- */
.nav-item { border-radius: 12px; }
.nav-item.active { box-shadow: 0 10px 20px -12px rgba(47, 122, 79, 0.9); }

/* ----- Buttons ----- */
.btn-primary, .btn-secondary, .btn-outline, .btn-danger-outline,
.sy-apply { border-radius: 999px; }
.btn-primary, .sy-apply { box-shadow: 0 10px 22px -10px rgba(47, 122, 79, 0.7); }
.sy-apply:hover { background: var(--button-green-hover); }

.flash { border-radius: var(--radius-sm); }

/* ----- Cards ----- */
.division-card:nth-child(3n+2) .card-icon:not(.danger) { background: var(--sun-soft); color: #9a6508; }
.division-card:nth-child(3n+3) .card-icon:not(.danger) { background: var(--teal-soft); color: var(--teal); }

.school-card, .nf-page .list-item { transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); }
.school-card:hover, .nf-page .list-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); border-color: transparent; }

/* ----- Login & sign-up: form takes 2/3, the landing photo fills the
   right 1/3 under a green tint, rounded on its left edge ----- */
.login-page { grid-template-columns: 2fr 1fr; }
.brand-panel .bg-photo { object-position: 55% center; }
.brand-panel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgba(47, 122, 79, 0.5);
}
.brand-panel { border-radius: 40px 0 0 40px; }
.form-panel { background: var(--white); }
/* Minimal form after the EditorM sign-up/login reference. */
.login-card .subtitle { font-size: 1rem; margin-bottom: 2.25rem; }
.login-card .field-group label { font-size: 0.9rem; font-weight: 600; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 7px; }
.label-row label { margin-bottom: 0; }
.forgot-link { font-size: 0.82rem; font-weight: 600; color: var(--mid-green); text-decoration: none; }
.forgot-link:hover { text-decoration: underline; }
.login-card form > button[type="submit"] { margin-top: 1rem; }
.login-card button[type="submit"] { border-radius: 10px; background: var(--button-green-hover); }
.login-card button[type="submit"]:hover { background: var(--sun); color: var(--deep-green); }
.signup-copy { font-size: 0.92rem; margin-top: 1.5rem; }

@media (max-width: 900px) {
    .login-page { grid-template-columns: 1fr; }
    .brand-panel { border-radius: 28px 28px 0 0; }
}

/* =====================================================================
   Landing page: split hero with photo + floating stat cards, centered
   section heads with kickers, dot-grid accents (after the Jadoo travel
   landing reference), in NutriFeed's green with a warm food accent.
   ===================================================================== */

.landing {
    background: var(--white);
    min-height: 100vh;
    color: var(--ink);
    line-height: 1.5;
    overflow-x: clip;
}
/* The welcome content stays put (no slide/morph) when the Log In / Sign Up card opens -- it
   just softens behind the dimmed overlay via backdrop-filter on .auth-stage below, which covers
   the whole viewport (nav included) so everything blurs together uniformly. */
.landing a { text-decoration: none; }
.landing h2, .landing h3 { margin: 0; }

:is(.landing, .auth-stage) .btn-pill { border-radius: 999px; }
:is(.landing, .auth-stage) .btn-large { padding: 0.75rem 1.6rem; font-size: 1rem; min-height: 48px; }
.landing .btn-primary { box-shadow: 0 10px 22px -10px rgba(47, 122, 79, 0.7); }

/* ----- Nav ----- */
.landing-nav { background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(1.4) blur(10px); position: sticky; top: 0; z-index: 10; }
.landing-nav-inner { max-width: var(--landing-max); margin: 0 auto; padding: 0.8rem 1.5rem; display: flex; align-items: center; gap: 2.5rem; }
.landing-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 800; color: var(--button-green); letter-spacing: -0.01em; }
.landing-brand img { width: 48px; height: 48px; object-fit: contain; }
.landing-nav-actions { display: flex; gap: 0.6rem; align-items: center; }
.landing-nav-links { display: flex; gap: 0.5rem; flex: 1; justify-content: flex-end; }
.landing-nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.8rem; color: var(--muted); font-size: 0.93rem; font-weight: 500; border-radius: 8px; transition: color var(--ease); }
.landing-nav-links a:hover { color: var(--button-green); }

/* ----- Shared section chrome ----- */
.lp-section { position: relative; max-width: var(--landing-max); margin: 0 auto; padding: 5rem 1.5rem; scroll-margin-top: 4rem; }
.lp-section-head { margin-bottom: 2.5rem; }
.lp-center { text-align: center; }
.lp-kicker { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.landing .section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1.25rem; color: var(--ink); }
.lp-center .section-title { margin-bottom: 0; }

/* Decorative dot grid (the reference's dot clusters). */
.lp-dots {
    position: absolute; width: 132px; height: 110px; pointer-events: none;
    background-image: radial-gradient(circle, #c6d2cb 1.6px, transparent 1.8px);
    background-size: 22px 22px;
}
.lp-dots-right { top: 4rem; right: 1.5rem; }

/* ----- Hero ----- */
.lp-hero {
    max-width: var(--landing-max); margin: 0 auto; padding: 3.5rem 1.5rem 4rem;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center;
}
.lp-eyebrow { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral); }
.landing-headline {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.05; letter-spacing: -0.02em;
    color: var(--ink); margin: 1rem 0 1.4rem;
}
/* Marker-style underline under the key word. */
.lp-swash { position: relative; z-index: 0; white-space: nowrap; color: var(--button-green); }
.lp-swash::after {
    content: ""; position: absolute; left: -2%; right: -4%; bottom: 0.04em; height: 0.28em; z-index: -1;
    background: var(--sun); border-radius: 999px; transform: rotate(-1.5deg); opacity: 0.55;
}
.lp-lede { color: var(--muted); font-size: 1.08rem; line-height: 1.7; margin: 0 0 2rem; max-width: 36rem; }
.landing-cta-row { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }

.lp-hero-visual { position: relative; min-height: 460px; }
.lp-hero-blob {
    position: absolute; inset: -8% -6% -6% 12%; z-index: 0;
    background: var(--sun-soft); border-radius: 46% 0 0 54% / 58% 0 0 42%;
}
.lp-dots-hero { left: -1.5rem; bottom: -1.5rem; z-index: 0; }
.lp-hero-photo {
    position: relative; z-index: 1; margin: 0;
    border-radius: 200px 28px 200px 28px; overflow: hidden;
    aspect-ratio: 4 / 4.2; box-shadow: var(--shadow-float);
}
.lp-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 48% 55%; }

.lp-mock-note {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.75rem;
    background: var(--white); border-radius: 16px; padding: 0.8rem 1rem; box-shadow: var(--shadow-float);
    animation: float 6s ease-in-out infinite;
}
.lp-mock-note strong { display: block; font-size: 1rem; line-height: 1.2; color: var(--ink); }
.lp-mock-note span:not(.lp-float-icon) { display: block; font-size: 0.8rem; color: var(--muted); }
.lp-float-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--button-green); }
.lp-float-icon-warm { background: var(--sun-soft); color: #9a6508; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ----- Metrics strip ----- */
.metrics {
    max-width: var(--landing-max); margin: 0 auto; padding: 0 1.5rem;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.metric { background: var(--page-green); border-radius: 18px; padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.35rem; }
.metric-value { font-family: var(--font-mono); font-size: 2rem; font-weight: 600; color: var(--button-green); line-height: 1.1; }
.metric-label { font-size: 0.88rem; color: var(--muted); }
.metrics-source { max-width: var(--landing-max); margin: 0.75rem auto 0; padding: 0 1.5rem; font-size: 0.8rem; color: var(--muted); }

/* ----- Modules ----- */
.landing-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.feature-card {
    position: relative; isolation: isolate; background: var(--white); border-radius: 22px; padding: 1.6rem 1.4rem;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem;
    border: 1px solid var(--line);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
/* Offset corner shape revealed on hover (the reference's highlighted service card). */
.feature-card::before {
    content: ""; position: absolute; left: -12px; bottom: -12px; width: 72px; height: 72px; z-index: -2;
    border-radius: 22px 0 10px 0; background: var(--coral); opacity: 0; transform: scale(0.6);
    transition: opacity var(--ease), transform var(--ease);
}
.feature-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; z-index: -1; }
.feature-card:not(.feature-card-muted):hover { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: transparent; }
.feature-card:not(.feature-card-muted):hover::before { opacity: 1; transform: none; }
.feature-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 16px;
    background: var(--accent); color: var(--button-green); margin-bottom: 0.35rem;
}
.feature-card:nth-child(3n+2) .feature-icon { background: var(--sun-soft); color: #9a6508; }
.feature-card:nth-child(3n+3) .feature-icon { background: var(--teal-soft); color: var(--teal); }
.feature-card h3 { font-size: 1.1rem; margin: 0.1rem 0 0; color: var(--ink); }
.feature-card p { font-size: 0.93rem; color: var(--muted); margin: 0; line-height: 1.6; }
.feature-card-muted { background: var(--page-green); border-style: dashed; }
.feature-card.feature-card-muted .feature-icon { background: var(--line); color: #46534b; }

/* ----- How it works ----- */
.lp-how { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.steps { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.steps li { display: flex; gap: 1.1rem; align-items: flex-start; }
.steps h3 { font-size: 1.05rem; margin: 0 0 0.25rem; }
.steps p { margin: 0; color: var(--muted); font-size: 0.94rem; max-width: 30rem; }
.step-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; }
.step-num-green { background: var(--button-green); }
.step-num-warm { background: var(--coral); }
.step-num-teal { background: var(--teal); }

.lp-how-visual { position: relative; display: flex; justify-content: center; padding: 2rem 0 3rem; }
.lp-how-visual::before {
    content: ""; position: absolute; width: 70%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(47, 122, 79, 0.18), transparent 70%);
}
.lp-mock { position: relative; z-index: 1; width: min(100%, 360px); background: var(--white); border-radius: 24px; padding: 1.4rem; box-shadow: var(--shadow-float); }
.lp-mock-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.lp-mock-title { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--ink); }
.lp-mock-title svg { color: var(--button-green); }
.lp-mock-pill { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--line); color: #46534b; padding: 0.15rem 0.55rem; border-radius: 999px; }
.lp-mock-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lp-mock-days li { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: var(--page-green); font-size: 0.85rem; }
.lp-mock-days span { font-family: var(--font-mono); font-weight: 600; width: 2.6rem; color: var(--ink); }
.lp-mock-days em { font-style: normal; font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--accent); color: var(--button-green-hover); }
.lp-mock-days em.lp-chip-milk { background: var(--teal-soft); color: var(--teal); }
.lp-mock-days em.lp-chip-nfp { background: var(--sun-soft); color: #8a5a06; }
.lp-mock-foot { display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.8rem; color: var(--muted); }
.lp-mock-note { right: 0; bottom: 0.5rem; padding: 0.75rem 1rem; animation-delay: -2s; }

/* ----- About ----- */
.lp-about { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.about-text p { color: var(--ink); font-size: 1.02rem; line-height: 1.8; margin: 0 0 1rem; }
.about-text mark.highlight { background: #dff3e6; color: var(--button-green-hover); padding: 0.05em 0.25em; border-radius: 4px; font-weight: 600; }
.lp-benefits-label { font-weight: 700; color: var(--ink); margin: 0 0 1rem; }
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.benefit-block { background: var(--page-green); border-radius: 18px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.8rem; min-height: 130px; }
.benefit-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--button-green); color: #fff; }
.benefit-block:nth-child(2) .benefit-icon { background: var(--coral); }
.benefit-block:nth-child(3) .benefit-icon { background: var(--teal); }
.benefit-block:nth-child(4) .benefit-icon { background: #b07a12; }
.benefit-block h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
/* Program statistics: a full-width row under the About copy + benefits. */
.lp-about-metrics { grid-column: 1 / -1; }
.lp-about-metrics .metrics, .lp-about-metrics .metrics-source { max-width: none; padding: 0; }
.lp-about-metrics .metric { background: var(--white); border: 1px solid var(--line); }

/* ----- CTA panel (the reference's subscribe card) ----- */
.cta-band {
    position: relative; overflow: hidden; max-width: calc(var(--landing-max) - 3rem); margin: 1rem auto 5rem;
    padding: 4rem 1.5rem; text-align: center;
    background: linear-gradient(135deg, var(--accent), var(--sun-soft));
    border-radius: 120px 28px 28px 28px;
}
.cta-band::after {
    content: ""; position: absolute; width: 260px; height: 260px; right: -80px; bottom: -120px; border-radius: 50%;
    background: rgba(47, 122, 79, 0.08);
}
.cta-band > h2, .cta-band > p, .cta-band > .cta-actions { position: relative; z-index: 1; }
.lp-dots-cta { top: 1.5rem; right: 2rem; }
.cta-band h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: var(--ink); margin: 0 0 0.6rem; }
.cta-band p { margin: 0 auto 1.8rem; color: var(--muted); max-width: 34rem; }
.cta-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* ----- Footer ----- */
.landing-footer { border-top: 1px solid var(--line); padding: 3rem 1.5rem 2rem; color: var(--muted); font-size: 0.9rem; }
.landing-footer-inner { max-width: var(--landing-max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.footer-brand p { margin: 0.6rem 0 0; max-width: 22rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.2rem; }
.footer-col h2 { font-size: 0.95rem; color: var(--ink); margin: 0 0 0.4rem; }
.footer-col a { color: var(--muted); display: inline-flex; align-items: center; min-height: 32px; }
.footer-col a:hover { color: var(--button-green); }
.footer-note { max-width: var(--landing-max); margin: 2.5rem auto 0; text-align: center; font-size: 0.82rem; }

/* Subtle load-in motion; the reduced-motion rule above turns it off. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise 450ms ease-out both; }
.lp-hero-visual.reveal { animation-delay: 120ms; }

@media (min-width: 1600px) {
    .lp-lede { font-size: 1.15rem; }
}

@media (max-width: 1100px) {
    .metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .lp-hero, .lp-how, .lp-about { grid-template-columns: 1fr; gap: 2.5rem; }
    .lp-hero-visual { min-height: 0; max-width: 520px; width: 100%; margin: 0 auto; }
    .lp-section { padding: 3.5rem 1.5rem; }
    .lp-dots-right { display: none; }
}

@media (max-width: 720px) {
    .lp-hero { padding: 2rem 1rem 3rem; }
    .lp-section { padding: 3rem 1rem; }
    .metrics, .metrics-source { padding: 0 1rem; }
    .landing-nav-links { display: none; }
    .landing-nav-inner { justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; }
    .lp-hero-photo { border-radius: 120px 20px 120px 20px; }
    .benefit-grid { grid-template-columns: 1fr; }
    .benefit-block { min-height: 0; flex-direction: row; align-items: center; }
    .cta-band { margin: 0.5rem 1rem 3rem; border-radius: 60px 20px 20px 20px; padding: 3rem 1.25rem; }
    .lp-dots-cta { display: none; }
    .lp-how-visual { padding-bottom: 4.5rem; }
    .lp-mock-note { bottom: 0; }
    .landing-footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
    .metrics { grid-template-columns: 1fr; }
    .landing-nav-actions .btn-outline { display: none; }
}

/* ===== BMI status vs. feeding attendance scatterplot (Analytics) =====
   Server-computed SVG like the other Analytics charts: x = attendance %
   of the 120 feeding days (gridlines every 20%), y = one row per BMI
   status in BMI_STATUS_ORDER, dots jittered inside their row. A short
   dark tick on each row marks that category's average attendance. */

.scatter-panel {
    margin-top: 24px;
}

.scatter-count {
    flex: 0 0 auto;
    background: var(--page-green);
    color: var(--deep-green);
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
}

.scatter-svg {
    width: 100%;
    height: auto;
    max-height: 420px;
    display: block;
}

.scatter-row-band {
    fill: var(--page-green);
}

.scatter-row-label {
    font-size: 12px;
    font-weight: 600;
    fill: var(--deep-green);
}

.scatter-axis-title {
    font-size: 11.5px;
    font-weight: 600;
    fill: var(--muted);
}

.scatter-dot {
    fill-opacity: 0.65;
    stroke: #fff;
    stroke-width: 1;
}

.scatter-dot:hover {
    fill-opacity: 1;
    stroke: var(--deep-green);
    stroke-width: 1.5;
}

.scatter-avg-line {
    stroke: var(--deep-green);
    stroke-width: 3;
    stroke-linecap: round;
}

.scatter-legend-avg {
    display: inline-block;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--deep-green);
}

.scatter-table-wrap {
    margin-top: 18px;
}

.scatter-table td .legend-dot {
    margin-right: 6px;
    vertical-align: middle;
}

.scatter-table-wrap {
    overflow-x: auto;
}

.scatter-table {
    min-width: 560px;
}

.scatter-table td:first-child,
.scatter-table th {
    white-space: nowrap;
}

.scatter-form {
    gap: 10px;
    flex-wrap: wrap;
}

.scatter-note {
    background: var(--warning-bg);
    color: var(--warning);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

/* Keep the scatter panel's Year/Period/tab controls on the right --
   the title block shrinks instead of pushing them onto their own row,
   and if they do wrap (narrow screens) they stay right-aligned. */
.scatter-panel .trends-header {
    flex-wrap: wrap;
    align-items: flex-start;
}

.scatter-panel .trends-header > div:first-child {
    flex: 1 1 300px;
    min-width: 0;
}

.scatter-panel .pie-header-controls {
    margin-left: auto;
    justify-content: flex-end;
}

/* ===== Forecast panel (Analytics + School detail) =====
   One "All beneficiaries" card plus one card per BMI/HFA status; the big
   chart below shows the selected card, drawn in that card's color
   (--fc-color, set on the panel). */

.fc-panel { margin-top: 24px; --fc-color: var(--mid-green); }

.fc-group-labels {
    display: grid;
    grid-template-columns: 1.12fr repeat(5, 1fr);
    gap: 8px;
    margin: 0 0 6px 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.fc-group-labels span:last-child { grid-column: 2 / -1; }
.fc-group-labels.fc-cols-5 { grid-template-columns: 1.12fr repeat(4, 1fr); }

.fc-card-row {
    display: grid;
    grid-template-columns: 1.12fr repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.fc-card-row-5 { grid-template-columns: 1.12fr repeat(4, 1fr); }

.fc-pick {
    --c: var(--mid-green);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px 10px 4px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--c);
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.fc-pick:hover { border-color: var(--c); }
.fc-pick-total { background: var(--accent); }
.fc-pick-risk { background: #fcf8f6; }
.fc-pick-active { border: 2px solid var(--c); border-left-width: 5px; padding: 7px 9px 3px; box-shadow: 0 6px 18px -8px rgba(20, 40, 30, 0.35); }

.fc-pick-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fc-pick-dot { flex-shrink: 0; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.fc-pick-name { font-size: 12px; font-weight: 700; color: var(--deep-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-pick-risk-tag {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fc-pick-nums { display: flex; align-items: baseline; gap: 5px; margin-top: 1px; }
.fc-pick-now { font-size: 13px; font-weight: 600; color: var(--muted); }
.fc-pick-arrow { font-size: 12px; color: var(--muted); }
.fc-pick-next { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--c); }
.fc-pick-sub { font-size: 10.5px; line-height: 1.35; color: var(--muted); }
.fc-pick-change { font-weight: 700; }
.fc-pick-spark { width: 100%; height: 24px; margin-top: 1px; }
.fc-spark-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
.fc-spark-dash { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 3 3; filter: drop-shadow(0 0 3px var(--c)); }
.fc-spark-dot { fill: #fff; stroke: var(--c); stroke-width: 1.8; }
.fc-spark-band { fill: var(--c); opacity: 0.14; }

.fc-trend-good { color: var(--mid-green); }
.fc-trend-bad { color: var(--danger); }
.fc-trend-neutral, .fc-trend-flat { color: var(--muted); }

.fc-hint { display: inline-block; font-size: 14px; font-weight: 400; color: var(--ink); margin: 0 0 12px 0; padding: 6px 12px; background: #fff8e1; border: 2px solid #e8b730; border-radius: var(--radius-sm); }
.fc-detail-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--deep-green); }
.fc-detail-title .fc-pick-dot { width: 12px; height: 12px; }

.fc-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 18px;
    align-items: start;
}
.fc-svg { width: 100%; height: auto; max-height: 360px; display: block; }
.fc-chart { position: relative; }
.fc-hit { fill: transparent; cursor: crosshair; }
.fc-guide { stroke: var(--fc-color); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; pointer-events: none; }
.fc-dot, .fc-dot-fc { transition: r 120ms ease-out, stroke-width 120ms ease-out; }
.fc-hot { r: 7.5; stroke-width: 3; }
.fc-tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    padding: 7px 11px;
    border-radius: 10px;
    background: var(--deep-green);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(20, 40, 30, 0.45);
}
.fc-tip[hidden] { display: none; }
.fc-tip-year { font-size: 11px; opacity: 0.8; }
.fc-tip-value { font-size: 15px; font-weight: 700; }
.fc-tip-range { font-size: 11px; opacity: 0.8; }
.fc-svg .axis-label { font-size: 11px; }
/* Flashlight: a soft beam of the forecast color falls from the top of the forecast zone. */
.fc-zone { fill: url(#fc-beam); }
.fc-beam-stop-a { stop-color: #ffffff; stop-opacity: 0.95; }
.fc-beam-stop-b { stop-color: var(--fc-color); stop-opacity: 0.12; }
.fc-zone-label { font: 700 10px var(--font-sans); letter-spacing: 0.1em; fill: var(--mid-green); }
.fc-band { fill: var(--fc-color); opacity: 0.08; }
.fc-area { fill: var(--fc-color); opacity: 0.04; }
.fc-actual { fill: none; stroke: var(--fc-color); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.fc-line { fill: none; stroke: var(--fc-color); stroke-width: 2.4; stroke-dasharray: 6 6; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--fc-color)); }
.fc-dot { fill: var(--fc-color); stroke: #fff; stroke-width: 2; }
.fc-dot-fc { fill: #fff; stroke: var(--fc-color); stroke-width: 2.4; filter: drop-shadow(0 0 5px var(--fc-color)); }
.fc-point-label { fill: var(--fc-color); }
.fc-axis-future { fill: var(--fc-color); }

.fc-legend { justify-content: flex-start; margin-top: 6px; }
.fc-key { display: inline-block; width: 18px; height: 0; border-top: 2.6px solid var(--fc-color); }
.fc-key-fc { border-top-style: dashed; }
.fc-key-band { height: 10px; border: none; background: var(--fc-color); opacity: 0.2; border-radius: 3px; }

.fc-cards { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; }
.fc-card { background: var(--page-green); border: 1px solid var(--line); border-left: 4px solid var(--fc-color); border-radius: var(--radius-sm); padding: 8px 11px; }
.fc-card-year { font-size: 11px; font-weight: 600; color: var(--muted); }
.fc-card-value { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--fc-color); margin-top: 1px; line-height: 1.2; }
.fc-card-range { font-size: 11px; font-weight: 500; color: var(--muted); }
.fc-card-change { font-size: 11px; font-weight: 600; margin-top: 2px; }

.fc-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 11px 14px;
    border: 2px solid #e8b730;
    border-radius: var(--radius-sm);
    background: #fff8e1;
    color: #111111;
    font-size: 12.5px;
    line-height: 1.5;
}
.fc-empty {
    padding: 16px 18px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}
.fc-empty strong { color: var(--deep-green); }

@media (max-width: 1100px) {
    .fc-card-row, .fc-card-row-5 { grid-template-columns: repeat(3, 1fr); }
    .fc-group-labels { display: none; }
}
@media (max-width: 900px) {
    .fc-body { grid-template-columns: 1fr; }
    .fc-cards { flex-direction: row; flex-wrap: wrap; padding-top: 0; }
    .fc-card { flex: 1 1 140px; }
}
@media (max-width: 600px) {
    .fc-card-row, .fc-card-row-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Scatter panel: "Compare by" buttons + Yes/No breakdown (Analytics) ===== */
.fx-switch { display: flex; align-items: center; gap: 8px; margin: -4px 0 18px; flex-wrap: wrap; }
.fx-switch-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.fx-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--deep-green);
    text-decoration: none;
    transition: border-color var(--ease), background var(--ease);
}
.fx-btn:hover { border-color: var(--button-green); }
.fx-btn-active, .fx-btn-active:hover { background: var(--button-green); border-color: var(--button-green); color: #fff; }

.fx-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.fx-stat { background: var(--page-green); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; }
.fx-stat-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.fx-stat-value { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--deep-green); line-height: 1.2; }
.fx-stat-sub { font-size: 11.5px; color: var(--muted); }

.fx-bars { display: flex; flex-direction: column; gap: 12px; }
.fx-bar-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: center; }
.fx-bar-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fx-yn { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; padding: 2px 8px; border-radius: var(--radius-pill); }
.fx-yn-yes { background: var(--soft-green); color: var(--mid-green); }
.fx-yn-no { background: #eceeed; color: var(--muted); }
.fx-bar-name { font-size: 14px; font-weight: 700; color: var(--deep-green); }
.fx-bar-n { font-size: 11.5px; color: var(--muted); }
.fx-bar { display: flex; height: 36px; border-radius: 10px; overflow: hidden; background: var(--page-green); }
.fx-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; border-right: 2px solid #fff; min-width: 0; }
.fx-seg:last-child { border-right: none; }
.fx-bar-empty { align-self: center; padding: 0 12px; font-size: 12px; color: var(--muted); }
.fx-legend { justify-content: flex-start; margin: 12px 0 0 204px; }
.fx-table { margin-top: 0; }
.fx-pct { color: var(--muted); font-weight: 500; }
.fx-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    background: var(--sun-soft);
    color: #6e4d0c;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .fx-head { grid-template-columns: 1fr; }
    .fx-bar-row { grid-template-columns: 1fr; gap: 6px; }
    .fx-legend { margin-left: 0; }
}
/* =====================================================================
   Reports — SBFP form submissions (overview table + Excel-style preview)
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.nf-page .report-filters .report-search { width: auto; flex: 1.4; min-width: 200px; }
.nf-page .report-filters input[type="search"] {
    min-height: 44px; padding: 0.55rem 0.75rem; border: 1px solid #b9c4bd; border-radius: 10px;
    font: inherit; font-size: 1rem; background: #fff; color: var(--ink);
}
.stat-of { font-size: 1rem; color: var(--muted); font-weight: 500; }
.stat-value.stat-warning { color: #8a5f06; }
.stat-value.stat-danger { color: #a02c20; }
.stat-value.stat-muted { color: var(--ink); }

.report-panel {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; overflow: hidden;
}
.report-panel > h2 { margin: 1.1rem 1.25rem 0.5rem; }
.report-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.25rem 0.4rem; }
.report-panel-head h2 { margin: 0 0 0.25rem; }
.report-panel-head .hint { margin: 0; }
.report-legend { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.8rem; color: #3d4a42; }
.report-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.report-legend .lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-approved { background: var(--button-green); }
.lg-pending { background: #e0a32a; }
.lg-rejected { background: var(--danger); }
.lg-none { border: 1.5px dashed #8a968f; }

.report-table-wrap { overflow-x: auto; }
.report-table { width: 100%; min-width: 1000px; border-collapse: collapse; font-size: 0.86rem; }
.report-table thead th { background: var(--page-green); color: var(--muted); font-weight: 600; font-size: 0.8rem; padding: 0.6rem 0.4rem; }
.report-table tbody tr { border-top: 1px solid #e6ebe8; }
.report-table .rt-school { text-align: left; padding: 0.65rem 0.6rem 0.65rem 1.25rem; font-weight: 500; min-width: 210px; }
.report-table .rt-school small { display: block; color: var(--muted); font-weight: 400; font-size: 0.76rem; }
.report-table .rt-school-name { color: var(--ink); }
.report-table th.rt-form span { display: block; color: var(--ink); }
.report-table th.rt-form small { display: block; font-weight: 400; font-size: 0.72rem; }
.report-table .rt-form, .report-table .rt-workbook { text-align: center; padding: 0.5rem 0.3rem; vertical-align: middle; }
.report-table .rt-workbook { padding-right: 1.25rem; vertical-align: middle; }

/* Status + download stacked; every status button is the same size. */
.rt-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rt-pill {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    width: 100px; height: 40px; box-sizing: border-box; padding: 0.2rem 0.35rem;
    border-radius: 9px; font-size: 0.72rem; font-weight: 600; line-height: 1.15; text-decoration: none;
    text-align: center; white-space: nowrap;
}
.rt-pill small { font-size: 0.7rem; font-weight: 400; opacity: 0.85; }
.rt-approved { background: var(--soft-green); color: #1d5636; border: 1px solid #b5dcc2; }
.rt-pending { background: var(--warning-bg); color: #7a5306; border: 1px solid #f0d699; }
.rt-rejected { background: var(--danger-bg); color: #9a2a1e; border: 1px solid #efc3be; }
.rt-none { background: #fff; color: var(--muted); border: 1.5px dashed #b3bdb7; }
.nf-page a.rt-pill.rt-approved { color: #1d5636; }
.nf-page a.rt-pill.rt-pending { color: #7a5306; }
.nf-page a.rt-pill.rt-rejected { color: #9a2a1e; }
/* Summary (PTR) column: same look as the form columns; the View PTR button uses the green pill. */
.summary-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.summary-actions .summary-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.summary-actions small { color: var(--muted); font-size: 0.78rem; }
@media (max-width: 720px) { .summary-actions { align-items: stretch; } .summary-actions .summary-buttons { justify-content: flex-start; } }
.nf-page a.rt-pill:hover { border-color: var(--button-green); box-shadow: 0 0 0 2px rgba(47, 122, 79, 0.18); }
.rt-blank { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; color: #8a968f; font-size: 0.8rem; }

/* Plain download link: icon + ".xlsx", no box. */
.nf-page .rt-download {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
    width: 100px; min-height: 24px; padding: 0;
    color: var(--button-green); font-size: 0.74rem; font-weight: 600; background: none; border: 0;
}
.nf-page .rt-download:hover { color: var(--button-green-hover); text-decoration: underline; }
.nf-page .rt-download-lg { width: auto; min-height: 44px; font-size: 0.84rem; margin: 0; }

.report-activity { list-style: none; margin: 0; padding: 0 1.25rem 0.75rem; }
.report-activity li { display: flex; gap: 0.75rem; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid #eef1ef; }
.report-activity li:last-child { border-bottom: 0; }
.ra-badge {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
}
.ra-text { display: flex; flex-direction: column; font-size: 0.9rem; }
.ra-text small { color: var(--muted); font-size: 0.78rem; }

/* ----- Excel-style preview page ----- */
body.report-viewer { background: var(--page-green); min-height: 100vh; }
.rv-top {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--nav-bg); color: #fff; padding: 0.7rem 1.5rem;
}
.nf-page .rv-back { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; color: var(--nav-muted); font-weight: 600; font-size: 0.9rem; }
.nf-page .rv-back:hover { color: #fff; }
.rv-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.2); }
.rv-title { flex: 1; min-width: 220px; }
.nf-page .rv-title h1 { font-size: 1.05rem; margin: 0; color: #fff; }
.nf-page .rv-title p { margin: 0; font-size: 0.8rem; color: #b9cdbf; }
.rv-main { padding: 1rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.rv-main .hint { margin: 0; }

.rv-status {
    display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 1rem;
}
.rv-form-code { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.55rem; border-radius: 8px; background: var(--nav-bg); color: #fff; }
.rt-pill.rv-pill { width: auto; max-width: none; min-height: 0; flex-direction: row; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.8rem; }
.rv-meta { font-size: 0.86rem; color: #3d4a42; }

.xl-window {
    display: flex; flex-direction: column; background: #fff; border: 1px solid #c9d2cc; border-radius: 14px;
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.xl-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.55rem 0.85rem; border-bottom: 1px solid #e1e5e2; }
.xl-file-icon { width: 28px; height: 28px; border-radius: 6px; background: #1e7145; color: #fff; font: 700 13px Arial, sans-serif; display: inline-flex; align-items: center; justify-content: center; }
.xl-file-name { font-weight: 600; font-size: 0.9rem; word-break: break-all; }
.xl-spacer { flex: 1; }
.nf-page .xl-btn { min-height: 38px; padding: 0.35rem 0.8rem; font-size: 0.84rem; }
.xl-zoom { display: inline-flex; align-items: center; border: 1px solid #c9d2cc; border-radius: 10px; overflow: hidden; }
.xl-zoom button { width: 38px; height: 38px; border: 0; background: #fff; font-size: 1.05rem; color: var(--ink); cursor: pointer; }
.xl-zoom button:hover { background: var(--accent); }
.xl-zoom output { font-family: var(--font-mono); font-size: 0.8rem; min-width: 46px; text-align: center; }
.xl-formula { display: flex; align-items: center; border-bottom: 1px solid #e1e5e2; background: #fafbfa; font: 12px Arial, sans-serif; }
.xl-namebox { width: 80px; padding: 6px 10px; border-right: 1px solid #e1e5e2; }
.xl-fx { padding: 6px 10px; border-right: 1px solid #e1e5e2; color: #7a857f; font-style: italic; }
.xl-fxvalue { padding: 6px 10px; min-height: 1em; white-space: pre-wrap; }
.xl-scroll { overflow: auto; height: calc(100vh - 290px); min-height: 420px; background: #fff; }
.xl-scroll:focus-visible { outline: 3px solid rgba(47, 122, 79, 0.4); outline-offset: -3px; }
.xl-zoomer { display: inline-block; }

.xl-sheet { position: relative; background: #fff; }
.xl-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 10pt Arial, Helvetica, sans-serif; color: #000; }
.xl-grid td { padding: 0 2px; overflow: hidden; position: relative; cursor: cell; }
.xl-grid td.xl-selected { outline: 2px solid #1e7145; outline-offset: -2px; z-index: 3; }
.xl-v { overflow: hidden; white-space: nowrap; line-height: 1.15; }
.xl-v.xl-wrap { white-space: normal; overflow-wrap: anywhere; }
.xl-v.xl-spill { overflow: visible; position: relative; z-index: 1; }
.xl-grid td:has(.xl-spill) { overflow: visible; }
.xl-colhead, .xl-rowhead, .xl-corner {
    background: #f1f3f2; color: #555; font: 11px Arial, sans-serif; font-weight: 400; text-align: center;
    border-right: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; position: sticky; z-index: 4; padding: 0;
}
.xl-colhead, .xl-corner { top: 0; }
.xl-rowhead, .xl-corner { left: 0; }
.xl-corner { z-index: 5; }
.xl-pic { position: absolute; pointer-events: none; z-index: 2; }
.xl-head { position: sticky; top: 0; z-index: 6; }
.xl-chunk { position: relative; }
.xl-lazy { content-visibility: auto; }

.xl-tabs { display: flex; align-items: stretch; overflow-x: auto; background: #eef1ef; border-top: 1px solid #d0d6d2; padding-left: 0.5rem; }
.xl-tab {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0 0.9rem;
    font-size: 0.8rem; white-space: nowrap; color: #3d4a42; border-bottom: 3px solid transparent;
}
.xl-tab.active { background: #fff; color: #1d5636; font-weight: 700; border-bottom-color: var(--button-green); }
.xl-tab.disabled { color: #7d8781; cursor: not-allowed; }
.nf-page a.xl-tab { color: #1d5636; }
.nf-page a.xl-tab:hover { background: #fff; }
.xl-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.xl-dot.rt-approved { background: var(--button-green); border: 0; }
.xl-dot.rt-pending { background: #e0a32a; border: 0; }
.xl-dot.rt-rejected { background: var(--danger); border: 0; }

@media (max-width: 700px) {
    .rv-top, .rv-main { padding-left: 1rem; padding-right: 1rem; }
    .rv-sep { display: none; }
    .rv-title { min-width: 0; flex-basis: 100%; }
    .xl-scroll { height: 70vh; }
}


/* ===== Analytics: per-school horizontal bar chart (scrolls inside its card) ===== */
.hbar-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 0.75rem;
    padding-right: 0.35rem;
    scrollbar-gutter: stable;
}
.hbar-scroll:focus-visible { outline: 3px solid rgba(47, 122, 79, 0.35); outline-offset: 2px; border-radius: 8px; }
.hbar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.hbar-row {
    display: grid;
    grid-template-columns: minmax(140px, 260px) 1fr 3rem;
    align-items: center;
    gap: 0.75rem;
    min-height: 28px;
}
.hbar-label {
    font-size: 0.84rem; font-weight: 500; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}
.hbar-track { position: relative; height: 18px; background: #eef1ef; border-radius: 4px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; min-width: 2px; border-radius: 4px; }
.hbar-value { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--ink); text-align: left; }

@media (max-width: 600px) {
    .hbar-row { grid-template-columns: minmax(90px, 40%) 1fr 2.5rem; gap: 0.5rem; }
    .hbar-label { font-size: 0.78rem; }
}
/* ----- Sidebar close and open button ----- */
.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 180ms ease, background 180ms ease;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.16);
}

@media (min-width: 901px) {
    /* Collapsed: the sidebar shrinks to nothing and only the toggle stays, low-opacity, at the top left. */
    body.nav-collapsed .top-nav {
        width: 0;
        padding: 0;
        background: transparent;
        overflow: visible;
    }

    body.nav-collapsed .top-nav > *:not(.nav-head),
    body.nav-collapsed .nav-head > .nav-brand {
        display: none;
    }

    body.nav-collapsed .sidebar-toggle {
        position: fixed;
        top: 14px;
        left: 12px;
        margin: 0;
        background: #15251c;
        opacity: 0.35;
    }

    body.nav-collapsed .sidebar-toggle:hover,
    body.nav-collapsed .sidebar-toggle:focus-visible {
        opacity: 0.9;
    }

    body.nav-collapsed .division-content {
        margin-left: 0;
    }
}

@media (max-width: 900px) {
    /* In the drawer the toggle is the close button. */
    .sidebar-toggle {
        opacity: 0.8;
    }
}

/* Page headings (.analytics-head) are styled in system.css. */

/* Multi-status trend: smaller period labels so Baseline and Endline fit side by side. */
.line-chart-svg .axis-label-small {
    font-size: 8px;
    fill: var(--muted);
}

.legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.legend-row .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-row .legend-swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

/* Trend charts: BMI-A Baseline, BMI-A Endline, HFA Baseline, HFA Endline in one row. */
.trend-quad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.trend-quad .analytics-panel {
    min-width: 0;
}

.trend-quad .trends-header h2 {
    font-size: 15px;
}

@media (max-width: 1280px) {
    .trend-quad {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .trend-quad {
        grid-template-columns: 1fr;
    }
}

/* Four trend panels: the chart fills its panel width. */
.trend-quad .line-chart-svg {
    width: 100%;
    height: auto;
    max-width: none;
    display: block;
}

/* Four trend panels: labels are drawn in chart units, so they are larger here to read at panel size. */
.trend-quad .grid-label {
    font-size: 24px;
}

.trend-quad .axis-label {
    font-size: 19px;
}

.trend-quad .line-chart-svg .grid-line,
.trend-quad .line-chart-svg .axis-line {
    stroke-width: 1.5;
}

.trend-quad .line-chart-svg polyline {
    stroke-width: 5;
}

.trend-quad .line-chart-svg circle {
    r: 7;
}

/* ----- Trend charts: BMI-A and HFA side by side, each with a Baseline / Endline dropdown ----- */
.trend-canvas {
    position: relative;
    height: 440px;
}

.analytics-filters {
    margin-bottom: 18px;
}

/* ----- Trend panels: View all button, findings under each chart, and the enlarged dialog ----- */
.trends-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--button-green);
    border-radius: 999px;
    background: #ffffff;
    color: var(--button-green);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.view-all:hover {
    background: var(--button-green);
    color: #ffffff;
}

.trend-findings {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.trend-findings .trend-howto {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--ink);
}

.trend-findings ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

.trend-findings li {
    padding: 10px 12px;
    border-left: 3px solid var(--button-green);
    border-radius: 8px;
    background: var(--accent);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}

.trend-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(1600px, 94vw);
    height: fit-content;
    max-height: 92vh;
    overflow: auto;
    padding: 20px 24px;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 80px -20px rgba(20, 40, 30, 0.45);
}

.trend-dialog::backdrop {
    background: rgba(15, 25, 19, 0.45);
}

.trend-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.trend-dialog-head h2 {
    font-size: 20px;
}

.trend-dialog-canvas {
    position: relative;
    height: 62vh;
}

.trend-dialog-findings {
    margin-top: 16px;
}

.trend-dialog-findings .trend-howto {
    margin-bottom: 8px;
    font-size: 13px;
}

.trend-dialog-findings ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

.trend-dialog-findings li {
    padding: 10px 12px;
    border-left: 3px solid var(--button-green);
    border-radius: 8px;
    background: var(--accent);
    font-size: 14px;
    line-height: 1.5;
}

/* The dialog pops out from the card that was clicked and settles in the center of the screen. */
.trend-dialog[open] {
    animation: trend-dialog-grow 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes trend-dialog-grow {
    from {
        opacity: 0.4;
        transform: translate(calc(-50% + var(--from-x, 0px)), calc(-50% + var(--from-y, 0px))) scale(var(--from-s, 0.8));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}



.trend-caption {
    margin: 14px 0 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
}

.trend-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Baseline and Endline are told apart by color, and each group starts with a divider. */
.trend-table .is-baseline {
    color: #1d5fa7;
}

.trend-table .is-endline {
    color: #0f7a57;
}

.trend-table .group-start {
    border-left: 1px solid var(--line);
}

/* Every group heading shares one color; the totals are red. */
.trend-table thead .group-head {
    background: #eef3f0;
    color: var(--ink);
}

.trend-table .is-total.is-baseline,
.trend-table .is-total.is-endline,
.trend-table thead .group-head.is-total {
    color: #b23b3b;
    font-weight: 700;
}

.trend-note {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
}

.trend-table th,
.trend-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.trend-table th {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
}

.trend-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.trend-table tr.is-current td {
    color: var(--muted);
}

.trend-table small {
    font-weight: 600;
}

.trend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 3px;
    vertical-align: middle;
}

.trend-findings-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding: 0;
}

.trend-findings-list li {
    padding: 10px 12px;
    border-left: 3px solid var(--button-green);
    border-radius: 8px;
    background: var(--accent);
    font-size: 14px;
    line-height: 1.5;
}


/* Forecast header controls sit at the right; the subheading holds the title. */
.fc-panel .pie-header-controls { margin-left: auto; }

/* Analytics page: slightly larger text, so the small labels are easier to read. */
.analytics-page .trend-table { font-size: 15px; }
.analytics-page .trend-table th { font-size: 12.5px; }
.analytics-page .trend-caption { font-size: 14px; }
.analytics-page .trend-note { font-size: 14px; }
.analytics-page .trend-dialog-findings li { font-size: 15px; }
.analytics-page .view-all { font-size: 14px; }
.analytics-page .fc-pick { padding: 10px 12px 6px; }
.analytics-page .fc-pick-name { font-size: 14px; }
.analytics-page .fc-pick-now { font-size: 15px; }
.analytics-page .fc-pick-next { font-size: 20px; }
.analytics-page .fc-pick-sub { font-size: 12.5px; }
.analytics-page .fc-pick-risk-tag { font-size: 11px; }
.analytics-page .fc-card-year { font-size: 13px; }
.analytics-page .fc-card-range { font-size: 13px; }
.analytics-page .fc-card-change { font-size: 13px; }
.analytics-page .fc-zone-label { font-size: 12px; }
.analytics-page .fc-svg .axis-label { font-size: 13px; }
.analytics-page .fc-legend { font-size: 14px; }

/* Analytics page: black forecast label, red border on the cards about at-risk children. */
.analytics-page .fc-zone-label { fill: #111111; }
.analytics-page .trends-panel.line-card { border-left: 4px solid var(--button-green); }


/* School ranking by forecasted at-risk students: horizontal bars, then the top 5 findings. */
.sf-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.sf-row {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr 90px 96px;
    align-items: center;
    gap: 12px;
    font-size: 15px;
}
.sf-name { font-weight: 700; color: #111111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-track { display: block; height: 16px; border-radius: 999px; background: #eef3f0; overflow: hidden; padding: 3px; }
.sf-fill { display: block; height: 100%; border-radius: 999px; background: #d7263d; }
.sf-value { font-family: var(--font-display); font-weight: 700; color: #111111; text-align: right; }
.sf-findings { margin: 8px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: #111111; }
.sf-empty { color: #111111; }
@media (max-width: 640px) {
    .sf-row { grid-template-columns: 1fr; gap: 4px; }
    .sf-value { text-align: left; }
}

/* Ranking rows (analytics forecast ranking and the dashboard ranking share this layout):
   school name | bar | count (right, lined up with each bar) | Analytics button. */
.sf-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sf-head,
.sf-row {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr 90px 290px;
    align-items: center;
    gap: 14px;
}
.sf-head {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #111111;
}
.sf-row { font-size: 15px; }
.sf-num { text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #111111; }
.sf-controls { justify-self: end; }
.sf-controls .card-controls { display: flex; align-items: center; }
.sf-name-cell { display: flex; flex-direction: column; min-width: 0; }
.sf-sub { font-size: 12px; color: #111111; }
.sf-row .analytics-btn { justify-self: end; }
.sf-list-dash .sf-name { font-weight: 700; }


/* High-risk students: BMI-for-age and Height-for-age side by side. */
.risk-students-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 12px; }
.risk-students-col { min-width: 0; padding-right: 24px; }
/* Divider between BMI-A and HFA; both columns are the same width. */
.risk-students-col + .risk-students-col { border-left: 1px solid var(--line); padding-left: 24px; padding-right: 0; }
.risk-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.risk-col-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #111111; }
@media (max-width: 760px) { .risk-students-grid { grid-template-columns: 1fr; } }

/* Does each factor relate to nutritional status: verdict colors. */
.relation-verdict { font-weight: 700; }
.relation-good { color: #0f7a57; }
.relation-danger { color: #b23b3b; }
.relation-muted { color: #111111; }
.relation-note { font-weight: 400; }

/* Analytics page: one type scale for all headings, notes, and tables. */
.analytics-page .risk-students-sub,
.analytics-page .trends-header p { font-size: 15px; font-weight: 400; }
.analytics-page .trend-caption { font-size: 15px; }
.analytics-page .trend-table { font-size: 15px; }
.analytics-page .trend-table th { font-size: 13px; }
.analytics-page .trend-note,
.analytics-page .relation-note { font-size: 14px; font-weight: 400; }
.analytics-page .relation-verdict { font-size: 15px; font-weight: 600; }
.analytics-page .tab,
.analytics-page .view-all { font-size: 14px; }

/* Section controls sit at the top right of their card. */
.section-controls-row { justify-content: flex-end; }
/* High-risk students: red left border. */
.analytics-page .trends-panel.at-risk-card { border-left: 4px solid #d7263d; }

/* Schools page: one section per district, each with the school cards. */
.district-section { margin-top: 20px; }
.district-section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font-size: 20px; font-weight: 700; color: #111111; }
.district-section-title span { font-size: 14px; font-weight: 400; }

/* Forecast ranking: the two buttons sit together at the end of each row. */
.sf-buttons { display: flex; gap: 8px; justify-content: flex-end; }

/* Card headings: the subheading text sits inside the card it belongs to. */
.card-head-block { margin: 0 0 12px; }
.card-head-title { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #111111; }
.card-head-sub { margin: 4px 0 0; font-size: 15px; font-weight: 400; color: #111111; }
.risk-groups-table .risk-total td { font-weight: 700; border-top: 2px solid var(--line); }

/* Schools page: each district's cards carry the district color on the left edge. */

/* Analytics: one trend title for both cards; each card title has a line in its card's color. */
.analytics-page .trends-panel { --card-color: var(--button-green); }
.analytics-page .trends-panel.at-risk-card { --card-color: #d7263d; }

/* Dashboard: the improvement boxes are smaller. */
.nutri-panel .improvement-stat-card { padding: 8px 10px; }
.nutri-panel .improvement-stat-icon { width: 34px; height: 34px; font-size: 14px; }
.nutri-panel .improvement-stat-empty,
.nutri-panel .improvement-stat-desc { font-size: 13px; }
.nutri-panel .improvement-stat-value { font-size: 22px; }

/* Analytics: one line under the title; the controls share the row with compare-by. */
.analytics-page .section-controls-row { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.analytics-page .section-controls-row .pie-header-controls { margin-left: auto; }
.analytics-page .card-head-block.with-controls { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.analytics-page .card-head-block.with-controls .pie-header-controls { margin-left: auto; }
.analytics-page .card-head-block.with-controls .card-head-title { margin: 0; }
.analytics-page .page-subtitle { font-size: 15px; font-weight: 400; color: #111111; margin: 4px 0 0; }
/* Insight buttons: bright yellow, at the bottom of each trend card, dark text for readability. */
.trend-footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.analytics-page .view-all { background: #f5c842; border: 0; color: #1b2620; font-weight: 800; border-radius: 999px; padding: 8px 16px; }
.analytics-page .view-all:hover { background: #e9b82f; color: #1b2620; }
/* School cards: the icon stays in the district color. */
.district-section .school-card-icon { color: var(--district-color); }
.district-section .school-card-icon i { color: var(--district-color); }
/* View school: white text on the district's color. */

/* Forecast ranking: the Top 5 names sit on a sticky note beside the list. */
.analytics-page .sf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; align-items: start; }
.analytics-page .sf-note { position: sticky; top: 16px; }
.analytics-page .sf-note .sf-findings { margin: 8px 0 0; padding-left: 22px; line-height: 1.6; color: #111111; }
@media (max-width: 900px) { .analytics-page .sf-layout { grid-template-columns: 1fr; } .analytics-page .sf-note { position: static; transform: none; } }
/* See forecast: always visible, same plain clickable-text look as every other .analytics-btn. */
.analytics-page .sf-buttons .analytics-btn { background: none; color: var(--button-green); border: 0; opacity: 1; }
.analytics-page .sf-buttons .analytics-btn:hover { background: none; color: var(--button-green-hover); text-decoration: underline; }
/* Factor table: space below its description. */
.relation-block .card-head-block { margin-bottom: 18px; }
/* Factor result: plain text, no pill, not bold. */
.analytics-page .relation-verdict { display: inline; padding: 0; border-radius: 0; background: none; font-size: 15px; font-weight: 400; color: #111111; }
.analytics-page .relation-good { color: #0f5a3d; }
.analytics-page .relation-danger { color: #8a1c1c; }

/* Analytics forecast ranking: the buttons sit closer to the list. */
.analytics-page .sf-head, .analytics-page .sf-row { grid-template-columns: minmax(220px, 300px) 1fr 80px 170px; }
/* Factor table: more space above the title. */
.relation-block { margin-top: 28px; }
/* Dashboard ranking: district color on each row's left edge. */

/* Dashboard ranking: the count sits right beside the Analytics button, with no empty gap. */
.sf-list-dash .sf-head, .sf-list-dash .sf-row { grid-template-columns: minmax(220px, 300px) 1fr 70px 150px; }
.sf-list-dash .sf-row .analytics-btn { justify-self: end; }

/* Sticky note: upright, centered in its column, and it follows the scroll. */
.analytics-page .sf-note { position: sticky; top: 16px; transform: none; align-self: start; }
/* Regular text: full opacity and black across the app. */
p, li, td, th, label, small, .card-head-sub, .trend-note { opacity: 1 !important; color: #000000 !important; }

/* Factor table: text centered in every cell. */
.analytics-page .relation-table th, .analytics-page .relation-table td { text-align: center; }
/* The no-attendance notice uses the same small size as the other notes. */
.analytics-page .scatter-note { font-size: 14px !important; font-weight: 400 !important; }

/* Analytics "buttons": just clickable green text, no border/background/pill -- the ranking rows
   (Dashboard and Analytics) and every other spot using this class all share this plain look. */
.analytics-btn {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 0 !important; margin-right: 14px !important; border-radius: 0 !important;
    background: none !important; color: var(--button-green) !important; border: 0 !important;
}
.analytics-btn:hover { color: var(--button-green-hover, var(--button-green)) !important; text-decoration: underline; }
.analytics-btn.is-disabled { text-decoration: none; }
/* Feeding progress: the year dropdown sits at the top right, on the heading's line. */
.analytics-page .feeding-progress-panel { position: relative; }
.analytics-page .feeding-progress-panel > .section-controls-row { position: absolute; top: 20px; right: 24px; margin: 0; padding: 0; border: 0; }
@media (max-width: 640px) {
    /* No room beside the title: the year picker sits under it instead of on top of it. */
    .analytics-page .feeding-progress-panel > .section-controls-row { position: static; margin: 0 0 14px; }
    .analytics-page .feeding-progress-panel > .trends-header:not(.section-controls-row) { padding-bottom: 0 !important; margin-bottom: 10px !important; }
}

/* Analytics notes: the same yellow note style as the projection note; the yellow borders are removed. */
.analytics-page .trend-note { background: #fff8e1; border-radius: 10px; padding: 10px 14px; margin-top: 14px; }
.fc-note, .fc-hint { border: 0 !important; }

/* All notes across the app: one yellow shade, black text. */
.trend-note, .risk-note, .scatter-note, .fc-note, .fc-hint {
    background: #fff8e1 !important;
    color: #000000 !important;
    border: 0 !important;
    border-radius: 10px !important;
}

/* Feeding progress heading: more room above its green line. */
.analytics-page .feeding-progress-panel > .trends-header:not(.section-controls-row) { padding-bottom: 20px !important; margin-bottom: 18px !important; }

/* Schools page: school counts in bold, no box. */
.district-section-title span { font-weight: 700 !important; }

/* School page: green back button, bordered header with the icon, and dashboard-style cards. */
.school-back-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 22px; background: var(--button-green); color: #ffffff !important; border-radius: 10px; text-decoration: none; font-weight: 700; }
.school-back-link:hover { background: #256240; }
.school-header-box { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.school-header-box .school-detail-icon { flex: 0 0 auto; }
/* Feeding progress ring: a 0 to 120 day circle, with the count in the middle. */
.feed-ring-wrap { position: relative; width: 150px; height: 150px; margin: 6px auto 0; }
.feed-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.feed-ring-track { fill: none; stroke: #e5ebe7; stroke-width: 12; }
.feed-ring-fill { fill: none; stroke: var(--button-green); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 339.292; }
.feed-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.feed-ring-text strong { font-size: 28px; color: #000000; line-height: 1; }
.feed-ring-text span { font-size: 13px; color: #000000; margin-top: 4px; }
.feed-ring-date { text-align: center; margin: 10px 0 0; font-size: 14px; color: #000000; }
/* Schools page: View school is a clear, clickable button. */
.school-card-footer { cursor: pointer; transition: filter 150ms ease, transform 150ms ease; }
.school-card:hover .school-card-footer { filter: brightness(0.95); transform: translateX(2px); }

/* Table headings in colored columns: white text. Plain headings keep their light green. */
.analytics-page table thead th:not([style]) { background: #d6eee2; color: #000000; font-weight: 800; }
.analytics-page table thead th[style] { color: #ffffff !important; }
/* View all and see insights: white text on green. */
.analytics-page .view-all { background: #2f7a4f !important; color: #ffffff !important; border: 0 !important; }
.analytics-page .view-all:hover { background: #256240 !important; }
/* Back to Schools: button-sized, not stretched. */
.school-back-link { width: max-content !important; max-width: max-content; }
/* Spacing: balanced from the back button down to the cards. */
.analytics-page .division-filters { margin: 0 0 18px !important; }
.school-header-box { margin-bottom: 14px !important; }
.school-back-link { margin-bottom: 14px; }
/* Feeding ring: green card, yellow track, orange progress and numbers. */
.feed-ring-card { background: linear-gradient(135deg, #b5e6a0, #9fd98a); border-radius: 14px; padding: 14px; margin-top: 14px; text-align: center; }
.feed-ring-card .feed-ring-track { stroke: #ffd977 !important; }
.feed-ring-card .feed-ring-fill { stroke: #e08a2c !important; }
.feed-ring-card .feed-ring-text strong, .feed-ring-card .feed-ring-text span { color: #d07d2a !important; }
.feed-ring-card .feed-ring-date { color: #000000; }
/* Breakdown: all rows open, totals row in red. */
.breakdown-table .breakdown-total td { color: #b23b3b !important; font-weight: 800; border-top: 2px solid var(--line); }

/* Feeding ring: the centre is a white disc. */
.feed-ring-card .feed-ring-text { width: 74%; height: 74%; top: 13%; left: 13%; right: auto; bottom: auto; inset: auto; margin: 0; background: #ffffff; border-radius: 50%; }
/* Breakdown totals: light red fill, bold black text. */
.breakdown-table .breakdown-total td { background: #fbe3e3 !important; color: #000000 !important; font-weight: 800 !important; }

/* Feeding ring: white centre disc, sitting inside the ring. */
.feed-ring-card .feed-ring-wrap { position: relative; }
.feed-ring-card .feed-ring-text { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.feed-ring-card .feed-ring-text::before { content: ''; position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; transform: translate(-50%, -50%); border-radius: 50%; background: #ffffff; z-index: -1; }
.feed-ring-card .feed-ring-text { isolation: isolate; }
/* Attendance card: served and food counts on the left, the ring on the right. */
.att-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-top: 6px; }
.att-session { background: #f6f8f7; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.att-session-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; color: #000000; }
.att-session-head small { font-size: 13px; font-weight: 600; }
.att-served { margin: 6px 0 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #000000; }
.att-food-row { display: flex; justify-content: space-between; font-size: 15px; padding: 3px 0; color: #000000; }
.att-food-row strong { font-weight: 800; }
.att-layout .feed-ring-card { margin-top: 0; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 760px) { .att-layout { grid-template-columns: 1fr; } }

/* Attendance ring: fixed size, the same as the Dashboard's ring. */
.att-layout .feed-ring-card .feed-ring-wrap { width: 150px; height: 150px; margin: 6px auto 0; }
.att-layout .feed-ring-card .feed-ring { width: 150px; height: 150px; display: block; }

/* Center text box fills the ring area, so the white disc is centered on the ring. */
.feed-ring-card .feed-ring-wrap .feed-ring-text { width: 100%; height: 100%; top: 0; left: 0; right: auto; bottom: auto; margin: 0; }

/* Attendance card: horizontal feeding progress bar, the same as the Schools page cards. */
.feed-progress-card { align-self: center; background: #f6f8f7; border-radius: 12px; padding: 14px; }
.feed-progress-card .school-card-progress-row { display: flex; justify-content: space-between; font-size: 15px; color: #000000; margin-bottom: 8px; }
.feed-progress-card .school-card-progress-track { height: 10px; }
.feed-progress-card .feed-ring-date { margin: 10px 0 0; font-size: 14px; color: #000000; text-align: left; }

/* Attendance card: AM and PM side by side, feeding progress bar full width below them. */
.att-layout { display: flex !important; flex-direction: column; gap: 12px; }
.att-left { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.att-session { margin-bottom: 0 !important; }
.feed-progress-card { align-self: stretch !important; width: 100%; box-sizing: border-box; }
@media (max-width: 760px) { .att-left { grid-template-columns: 1fr; } }

/* Feeding progress: no grey container, just the label and the bar. */
.feed-progress-card { background: transparent !important; padding: 0 !important; }
/* Back to Schools: no underline on hover. */
.school-back-link:hover, .school-back-link:focus { text-decoration: none !important; }
/* Grade column in the breakdown: bold, colored per grade. */
.breakdown-table td.grade-cell { font-weight: 800; }

/* School page cards: compact, equal height, smaller notes. */
.school-kpis { align-items: stretch !important; }
.school-kpis > .dash-card { padding: 14px 16px !important; display: flex; flex-direction: column; }
.school-kpis .sq-row { gap: 6px !important; margin-top: 6px !important; }
.school-kpis .gsq { padding: 6px 4px !important; }
.school-kpis .gsq strong { font-size: 17px !important; }
.school-kpis .gsq span { font-size: 12px !important; }
.school-kpis .risk-tiles { gap: 6px !important; }
.school-kpis .risk-tile { padding: 8px 8px !important; }
.school-kpis .risk-tile strong { font-size: 20px !important; }
.school-kpis .risk-tile span { font-size: 12px !important; }
.school-kpis .risk-tile small { font-size: 12px !important; }
.school-kpis .trend-block { margin-top: 8px !important; }
.school-kpis .trend-label { font-size: 11px !important; }
.school-kpis .trend-line { font-size: 14px !important; margin: 4px 0 !important; }
.school-kpis .trend-note, .school-kpis p.trend-note { font-size: 13px !important; padding: 6px 10px !important; margin-top: 6px !important; }
.school-kpis .session-box, .school-kpis .att-session { padding: 8px 10px !important; }
.school-kpis .att-session-head { font-size: 14px; }
.school-kpis .att-served { font-size: 11px !important; margin: 4px 0 2px !important; }
.school-kpis .att-food-row { font-size: 13px !important; padding: 1px 0 !important; }
.school-kpis .feed-progress-card .school-card-progress-row { font-size: 13px !important; }
.school-kpis .kpi-head { font-size: 14px; margin-bottom: 8px; }

/* Uniform spacing: 3px between stacked cards and between the cards in a row. */
.analytics-page > * { margin-top: 0 !important; }
.analytics-page > * + * { margin-top: 3px !important; }
.analytics-page .school-kpis, .analytics-page .kpi-grid { gap: 3px !important; margin-bottom: 0 !important; }
.analytics-page .fc-body, .analytics-page .sf-layout { gap: 3px; }

/* Grade and section colors in the breakdown table (class based, so they win over the table text rule). */
.breakdown-table td.grade-cell.grade-kinder { color: #f57c00 !important; }
.breakdown-table td.grade-cell.grade-grade-1 { color: #1565c0 !important; }
.breakdown-table td.grade-cell.grade-grade-2 { color: #d35400 !important; }
.breakdown-table td.grade-cell.grade-grade-3 { color: #795548 !important; }
.breakdown-table td.grade-cell.grade-grade-4 { color: #a67c52 !important; }
.breakdown-table td.grade-cell.grade-grade-5 { color: #800000 !important; }
.breakdown-table td.grade-cell.grade-grade-6 { color: #6a1b9a !important; }

/* Section column: black, regular weight. */
.breakdown-table td.section-cell { color: #000000 !important; font-weight: 400 !important; }

/* Beneficiaries: districts with compact collapsible school cards. */
.beneficiary-accordion { margin-top: 3px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.beneficiary-school-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #ffffff; border: 1px solid var(--line); border-left: 4px solid var(--district-color, #0f7a57); border-radius: 10px; cursor: pointer; list-style: none; }
.beneficiary-school-card::-webkit-details-marker { display: none; }
.beneficiary-school-name { flex: 1; font-weight: 700; font-size: 15px; color: #000000; }
.beneficiary-school-count { font-size: 14px; color: #000000; }
.beneficiary-accordion-arrow { transition: transform 150ms ease; color: #000000; }
.beneficiary-accordion[open] > .beneficiary-school-card .beneficiary-accordion-arrow { transform: rotate(180deg); }
.beneficiary-accordion-body { padding: 10px 4px 4px; }
.beneficiary-school-card:hover { border-color: var(--district-color, #0f7a57); }

/* Beneficiaries: each school is ONE card (header and list together), with the district color on its left edge. */
.beneficiary-accordion {
    margin-top: 10px !important; padding: 0 !important; overflow: hidden;
    background: #ffffff !important; border: 1px solid var(--line) !important;
    border-left: 4px solid var(--district-color, #0f7a57) !important; border-radius: 12px !important;
    box-shadow: none !important;
}
.beneficiary-school-card {
    padding: 12px 16px; border: 0 !important; border-radius: 0 !important; background: transparent !important;
    border-bottom: 2px solid #2f7a4f !important;
}
.beneficiary-school-card:hover { background: #f6faf7 !important; }
.beneficiary-accordion-body { padding: 12px 16px 14px; }

/* Student rows: left border in the grade's color (same colors as the Grade & section breakdown). */
.beneficiary-row { border-left: 4px solid #000000; }
.beneficiary-row.grade-grade-kinder, .beneficiary-row.grade-kinder { border-left-color: #f57c00; }
.beneficiary-row.grade-grade-1 { border-left-color: #1565c0; }
.beneficiary-row.grade-grade-2 { border-left-color: #d35400; }
.beneficiary-row.grade-grade-3 { border-left-color: #795548; }
.beneficiary-row.grade-grade-4 { border-left-color: #a67c52; }
.beneficiary-row.grade-grade-5 { border-left-color: #800000; }
.beneficiary-row.grade-grade-6 { border-left-color: #6a1b9a; }

/* Beneficiaries: grade chips in a row, thin school card edges, no green line under the school name. */
.ben-grade-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ben-grade-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--button-green); background: #ffffff; color: #000000; font-size: 14px; font-weight: 700; cursor: pointer; }
.ben-grade-chip:hover { background: #eef6f1; }
.ben-grade-chip.is-active { background: var(--button-green); color: #ffffff; }
.beneficiary-local-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.beneficiary-accordion { border-left-width: 2px !important; }
.beneficiary-school-card { border-bottom: 0 !important; }

/* Beneficiaries: the student opens as a centred pop-up card over a dimmed page; X or a click outside closes it. */
.beneficiary-backdrop { display: none; }
.beneficiary-layout.has-selection .beneficiary-list-pane { width: 100% !important; }
.beneficiary-layout.has-selection .beneficiary-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 25, 19, 0.45); z-index: 999; }
.beneficiary-layout.has-selection .beneficiary-detail-pane {
    position: fixed !important; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(900px, 94vw); max-height: 90vh; overflow: auto; margin: 0 !important;
    z-index: 1000; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(20, 40, 30, 0.45);
}
/* Search: live results under the box. */
.beneficiary-search-wrap { position: relative; flex: 1; max-width: 420px; }
.beneficiary-search-wrap .beneficiary-search { width: 100%; }
.beneficiary-search-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
    background: #ffffff; border: 1px solid var(--button-green); border-radius: 10px;
    padding: 4px; max-height: 320px; overflow: auto; box-shadow: 0 12px 28px -12px rgba(20, 40, 30, 0.35);
}
.beneficiary-search-results[hidden] { display: none; }
.beneficiary-search-hit { display: flex; flex-direction: column; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: #000000; }
.beneficiary-search-hit:hover { background: #eef6f1; }
.beneficiary-search-hit strong { font-size: 14px; }
.beneficiary-search-hit span, .beneficiary-search-more { font-size: 12px; color: #000000; }
.beneficiary-search-more { padding: 8px 10px; margin: 0; }
/* School cards sit flush within a district: no space between them, same as the student list inside a school. */
.beneficiary-accordion { margin-top: 0 !important; }

/* Beneficiaries: a thin green line under the school name only while its list is open (division line). */
.beneficiary-accordion[open] > .beneficiary-school-card { border-bottom: 1px solid #2f7a4f !important; }
/* Student photo or initials: a square, white, with a blue (male) or pink (female) border and text. */
.beneficiary-avatar { width: 44px; height: 44px; border-radius: 6px; background: #ffffff; border: 2px solid #9aa39e; display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 800; color: #9aa39e; flex: 0 0 auto; }
.beneficiary-avatar img { width: 100%; height: 100%; object-fit: cover; }
.beneficiary-avatar-male { border-color: #1d5fa7; color: #1d5fa7; }
.beneficiary-avatar-female { border-color: #d6336c; color: #d6336c; }
/* BMI-A and HFA lines under the student's grade and section. */
.beneficiary-status-lines { display: flex; flex-direction: column; margin: 2px 0 0; font-size: 13px; color: #000000; }
.beneficiary-status-lines span { line-height: 1.4; }

/* Beneficiaries: smaller initials square (blue male, pink female), status at the right end, colored by status. */
.beneficiary-avatar { width: 36px !important; height: 36px !important; font-size: 13px; }
.beneficiary-avatar img { display: none; }
.beneficiary-row .beneficiary-status-lines { margin-left: auto; text-align: right; align-items: flex-end; gap: 2px; }
.beneficiary-status-lines .bst { font-size: 13px; font-weight: 700; }
.beneficiary-list-pane .bst-severely-wasted, .beneficiary-list-pane .bst-severely-stunted { color: #d7263d !important; }
.beneficiary-list-pane .bst-wasted, .beneficiary-list-pane .bst-stunted { color: #f58a07 !important; }
.beneficiary-list-pane .bst-normal { color: #2bb673 !important; }
.beneficiary-list-pane .bst-overweight { color: #9d7bd8 !important; }
.beneficiary-list-pane .bst-obese { color: #5b2a86 !important; }
.beneficiary-list-pane .bst-tall { color: #2a9fd6 !important; }
.beneficiary-list-pane .bst-none { color: #000000 !important; }
/* Grade and section text under the name takes the grade's color. */
.beneficiary-row.grade-kinder .risk-student-meta { color: #f57c00 !important; }
.beneficiary-row.grade-grade-1 .risk-student-meta { color: #1565c0 !important; }
.beneficiary-row.grade-grade-2 .risk-student-meta { color: #d35400 !important; }
.beneficiary-row.grade-grade-3 .risk-student-meta { color: #795548 !important; }
.beneficiary-row.grade-grade-4 .risk-student-meta { color: #a67c52 !important; }
.beneficiary-row.grade-grade-5 .risk-student-meta { color: #800000 !important; }
.beneficiary-row.grade-grade-6 .risk-student-meta { color: #6a1b9a !important; }
/* Narrower A–Z and section dropdowns. */
.beneficiary-local-filters select { width: auto !important; min-width: 0 !important; max-width: 150px; padding: 6px 28px 6px 10px !important; }
/* Per-school search bar. */
.beneficiary-school-search { width: 220px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--button-green); border-radius: 999px; font-size: 14px; color: #000000; background: #ffffff; }
/* Search result highlight. */
.beneficiary-row.is-found { box-shadow: 0 0 0 3px rgba(47, 122, 79, 0.35); }
/* Full-strength black text on the Beneficiaries list. */
.beneficiary-list-pane, .beneficiary-list-pane * { opacity: 1 !important; }
.beneficiary-list-pane .risk-student-name, .beneficiary-list-pane .beneficiary-school-name, .beneficiary-list-pane .beneficiary-school-count,
.beneficiary-list-pane .beneficiary-grade-label, .beneficiary-list-pane .risk-students-sub, .beneficiary-list-pane .district-section-title,
.beneficiary-list-pane .beneficiary-search-hit span, .beneficiary-list-pane .beneficiary-search-more { color: #000000 !important; }
.beneficiary-list-pane .risk-student-meta { color: #000000; }

/* Beneficiaries: BMI-A and HFA labels line up in one column; the labels are black, the status words are colored. */
.beneficiary-row .beneficiary-status-lines { align-items: flex-start !important; text-align: left !important; min-width: 130px; }
.beneficiary-status-lines .bst-row { display: block; }
.beneficiary-status-lines .bst-label { color: #000000 !important; font-weight: 700; display: inline-block; width: 52px; }
/* A–Z dropdown: as wide as its text. */
.beneficiary-sort-filter { width: 72px !important; max-width: 72px !important; padding: 6px 22px 6px 10px !important; }
/* Per-school search at the right end of the row. */
.beneficiary-local-filters { justify-content: flex-start; }
.beneficiary-local-filters .beneficiary-school-search { margin-left: auto; }
/* Black, full-strength text on the Beneficiaries page (status and grade colors keep theirs). */
.ben-page p, .ben-page span, .ben-page small, .ben-page label, .ben-page option, .ben-page select,
.ben-page input, .ben-page h1, .ben-page h2, .ben-page h3, .ben-page .greeting-eyebrow { color: #000000 !important; opacity: 1 !important; }
.ben-page .beneficiary-status-lines .bst-label { color: #000000 !important; }

/* Student cards: thin border on all sides in the grade's color (left edge stays thicker). */
.beneficiary-row.grade-kinder { border: 1px solid #f57c00; border-left: 4px solid #f57c00; }
.beneficiary-row.grade-grade-1 { border: 1px solid #1565c0; border-left: 4px solid #1565c0; }
.beneficiary-row.grade-grade-2 { border: 1px solid #d35400; border-left: 4px solid #d35400; }
.beneficiary-row.grade-grade-3 { border: 1px solid #795548; border-left: 4px solid #795548; }
.beneficiary-row.grade-grade-4 { border: 1px solid #a67c52; border-left: 4px solid #a67c52; }
.beneficiary-row.grade-grade-5 { border: 1px solid #800000; border-left: 4px solid #800000; }
.beneficiary-row.grade-grade-6 { border: 1px solid #6a1b9a; border-left: 4px solid #6a1b9a; }

/* Student cards: scrolling stays on; padding inside the scroll area keeps the card borders from being clipped. */
.beneficiary-school-scroll { overflow-y: auto !important; overflow-x: hidden; padding: 4px; }
.beneficiary-row { box-sizing: border-box; margin: 0 0 6px; border-bottom-width: 1px; }
.beneficiary-row:last-child { margin-bottom: 0; }

/* Student cards: only the left edge is colored (curved on the left, same width as before). */
.beneficiary-row { border: 0 !important; border-radius: 10px 0 0 10px !important; margin: 0 0 6px !important; }
.beneficiary-row.grade-kinder { border-left: 4px solid #f57c00 !important; }
.beneficiary-row.grade-grade-1 { border-left: 4px solid #1565c0 !important; }
.beneficiary-row.grade-grade-2 { border-left: 4px solid #d35400 !important; }
.beneficiary-row.grade-grade-3 { border-left: 4px solid #795548 !important; }
.beneficiary-row.grade-grade-4 { border-left: 4px solid #a67c52 !important; }
.beneficiary-row.grade-grade-5 { border-left: 4px solid #800000 !important; }
.beneficiary-row.grade-grade-6 { border-left: 4px solid #6a1b9a !important; }
/* Status lines: one tidy block; labels in one column, values after them. */
.beneficiary-row .beneficiary-status-lines { width: 170px; flex: 0 0 170px; align-items: flex-start !important; text-align: left !important; gap: 4px; }
.beneficiary-status-lines .bst-row { display: flex; gap: 8px; align-items: baseline; width: 100%; }
.beneficiary-status-lines .bst-label { width: 56px; flex: 0 0 56px; }
/* Sort dropdown: visible text, as wide as needed. */
.beneficiary-sort-filter { width: 84px !important; max-width: 84px !important; color: #000000 !important; background: #ffffff !important; font-size: 14px !important; }
/* Page margins match the Division pages. */
.ben-page { padding: 2rem 2.5rem 8rem; }
.ben-page .beneficiary-list-pane { padding: 0; margin: 0; }
/* Pop-up: risk badge, flag, and progress chart. */
.ind-risk-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ind-badge { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #ffffff; }
.ind-severe { background: #d7263d; }
.ind-moderate { background: #f58a07; }
.ind-normal { background: #2bb673; }
.ind-no-record { background: #000000; }
.ind-flag { font-size: 14px; color: #000000; font-weight: 700; }

.ind-progress-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: #000000; font-size: 14px; margin-bottom: 4px; }
.ind-progress-svg { width: 100%; max-width: 560px; height: auto; display: block; }
.ind-progress-legend { display: flex; gap: 16px; font-size: 13px; font-weight: 700; color: #000000; }

/* Student cards: a thin bottom border in the grade's color. */
.beneficiary-row.grade-kinder { border-bottom: 1px solid #f57c00 !important; }
.beneficiary-row.grade-grade-1 { border-bottom: 1px solid #1565c0 !important; }
.beneficiary-row.grade-grade-2 { border-bottom: 1px solid #d35400 !important; }
.beneficiary-row.grade-grade-3 { border-bottom: 1px solid #795548 !important; }
.beneficiary-row.grade-grade-4 { border-bottom: 1px solid #a67c52 !important; }
.beneficiary-row.grade-grade-5 { border-bottom: 1px solid #800000 !important; }
.beneficiary-row.grade-grade-6 { border-bottom: 1px solid #6a1b9a !important; }

/* Pop-up: BMI-A and HFA charts side by side. */
.ind-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 6px; }
.ind-chart-card { background: #ffffff; border: 1px solid #e6ece8; border-radius: 10px; padding: 12px 14px; }
.ind-chart-title { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.ind-chart-box { position: relative; height: 240px; }
.ind-chart-note { font-size: 13px; color: #000000; margin: 4px 0 12px; }
@media (max-width: 760px) { .ind-charts { grid-template-columns: 1fr; } }
/* Pop-up avatar: vertical rectangle, white inside, blue for male and pink for female. */
.beneficiary-detail-avatar.ben-avatar-tall { width: 60px !important; height: 76px !important; border-radius: 8px !important; background: #ffffff; border: 2px solid #9aa39e; color: #9aa39e; font-weight: 800; }
.beneficiary-detail-avatar.ben-avatar-male { border-color: #1d5fa7; color: #1d5fa7; }
.beneficiary-detail-avatar.ben-avatar-female { border-color: #d6336c; color: #d6336c; }

/* Student cards sit flush: no space between cards or between grade groups. */
.beneficiary-grade-group { margin: 0 !important; padding: 0 !important; }
.beneficiary-list { gap: 0 !important; }
.beneficiary-row { margin: 0 !important; }
.beneficiary-row:last-child { margin: 0 !important; }
/* Bigger pop-up card. */
.beneficiary-layout.has-selection .beneficiary-detail-pane { width: min(1240px, 96vw) !important; max-height: 92vh !important; }
/* Flag text sits to the right of the student name in the pop-up header. */
.beneficiary-detail-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.beneficiary-detail-header .ind-flag { margin-left: auto; font-size: 15px; color: #000000; font-weight: 800; }

/* Beneficiaries: narrower left and right margins, enough space to breathe. */
.ben-page { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

/* Pop-up: centred in the content area (to the right of the sidebar). */
.beneficiary-layout.has-selection .beneficiary-detail-pane {
    left: calc(var(--nav-width) + (100vw - var(--nav-width)) / 2) !important;
    top: 50% !important; transform: translate(-50%, -50%) !important;
}
body.nav-collapsed .beneficiary-layout.has-selection .beneficiary-detail-pane { left: 50% !important; }
@media (max-width: 900px) {
    .beneficiary-layout.has-selection .beneficiary-detail-pane { left: 50% !important; width: calc(100vw - 24px) !important; }
}
/* Pop-up: the "Not yet conducted" block is removed. */
.beneficiary-status-row { display: none !important; }
/* Pop-up mini cards: five in one row, white, each with a colored left border. */
.beneficiary-stat-grid { grid-template-columns: repeat(5, 1fr) !important; align-items: stretch; }
.beneficiary-stat-grid .beneficiary-stat-box { background: #ffffff !important; border: 1px solid #e6ece8; border-left: 4px solid #9aa39e; height: 100%; box-sizing: border-box; }
.beneficiary-stat-grid .beneficiary-stat-box:nth-child(1) { border-left-color: #1d5fa7; }
.beneficiary-stat-grid .beneficiary-stat-box:nth-child(2) { border-left-color: #0f7a57; }
.beneficiary-stat-grid .beneficiary-stat-box:nth-child(3) { border-left-color: #9d7bd8; }
.beneficiary-stat-grid .beneficiary-stat-box:nth-child(4) { border-left-color: #f58a07; }
.beneficiary-stat-grid .beneficiary-stat-box:nth-child(5) { border-left-color: #d7263d; }
.ben-part-box .beneficiary-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (max-width: 900px) { .beneficiary-stat-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* Pop-up mini cards: thin borders on the other three sides, same color as the left border. */
.beneficiary-stat-grid .beneficiary-stat-box:nth-child(1) { border: 1px solid #1d5fa7; border-left: 4px solid #1d5fa7; }
.beneficiary-stat-grid .beneficiary-stat-box:nth-child(2) { border: 1px solid #0f7a57; border-left: 4px solid #0f7a57; }
.beneficiary-stat-grid .beneficiary-stat-box:nth-child(3) { border: 1px solid #9d7bd8; border-left: 4px solid #9d7bd8; }
.beneficiary-stat-grid .beneficiary-stat-box:nth-child(4) { border: 1px solid #f58a07; border-left: 4px solid #f58a07; }
.beneficiary-stat-grid .beneficiary-stat-box:nth-child(5) { border: 1px solid #d7263d; border-left: 4px solid #d7263d; }
/* Pop-up line charts: green left border. */
.ind-chart-card { border: 1px solid #e6ece8; border-left: 4px solid #2f7a4f; }

/* Trend card: one title inside the card that holds both charts. */
.trend-wrap { padding: 16px 18px; }
/* Pop-up participation: check (yes) and cross (no). */
.ben-check { color: #2e8b57; font-weight: 800; }
.ben-cross { color: #d7263d; font-weight: 800; }

/* Pop-up: current school year chip at the top, before the flag. */
.ben-sy-chip { margin-left: auto; padding: 5px 14px; border-radius: 999px; background: var(--button-green); color: #ffffff; font-size: 14px; font-weight: 800; }
.beneficiary-detail-header .ind-flag { margin-left: 0; }

/* School-year chip: white text. */
.ben-page .ben-sy-chip, .ben-sy-chip { color: #ffffff !important; }

/* Beneficiaries heading: the same heading container as the other tabs, with a thicker left edge. */
.ben-head .page-subtitle { margin-top: 4px; color: #000000; font-size: 15px; }

/* Beneficiaries: top and bottom borders show on a school card, same weight as the left border, only while its list is open. */
.beneficiary-accordion[open] { border-top: 2px solid #2f7a4f !important; border-bottom: 2px solid #2f7a4f !important; }

/* Reports tab: bordered heading, same as the Dashboard heading (uniform thin border, padding, rounded). */
.rpt-stats .stat-card { background: #ffffff; border: 1px solid var(--line, #e6ebe8); border-left: 4px solid var(--button-green); }
.rpt-stat-approved { border-left-color: #2bb673; }
.rpt-stat-pending { border-left-color: #e0a32a; }
.rpt-stat-rejected { border-left-color: #d7263d; }
.rpt-stat-none { border-left-color: #9aa39e; }
.rpt-stat-learners { border-left-color: #1d5fa7; }

/* Reports tab: form rows inside each school's collapsible card. */
.rpt-school-meta { color: #000000; font-size: 13px; margin-right: 4px; }
.rpt-accordion-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 14px; }
.rpt-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #ffffff; border: 1px solid #e6ebe8; border-radius: 8px; }
.rpt-form-title { font-weight: 700; color: #000000; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.rpt-form-title small { font-weight: 400; font-size: 12px; color: #000000; }
.rpt-form-status { display: flex; align-items: center; gap: 8px; }

/* Reports tab: a plain "Not sent to division" label, no dashed box. */
.rpt-plain { color: #000000; font-size: 13px; font-weight: 600; }
/* Reports tab: a stat card's quick list of schools still missing a form. */
.stat-card { position: relative; }
.rpt-missing { margin-top: 8px; width: 100%; }
.rpt-missing summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--button-green); list-style: none; }
.rpt-missing summary::-webkit-details-marker { display: none; }
.rpt-missing ul { margin: 8px 0 0; padding: 0 0 0 18px; max-height: 160px; overflow-y: auto; font-size: 13px; color: #000000; }
.rpt-missing li { margin: 2px 0; }
/* Reports tab: one coverage card per form. */
.rpt-coverage { margin: 1.25rem 0; }
.rpt-coverage-title { margin: 0 0 4px; }
.rpt-stat-form { border-left: 4px solid #6fcf97; }

/* Reports tab: the "Received by form" cards are buttons now, styled the same as a stat card. */
button.rpt-stat-form {
    font-family: inherit; text-align: left; cursor: pointer; width: 100%;
    transition: transform 150ms ease, box-shadow 150ms ease;
    transform-origin: bottom center;
}
/* macOS Dock-style grow on hover. */
button.rpt-stat-form:hover, button.rpt-stat-form:focus-visible {
    outline: none; transform: scale(1.08); box-shadow: 0 12px 24px -10px rgba(111, 207, 151, 0.45); position: relative; z-index: 2;
}
.rpt-stat-form .stat-value { color: #000000; }
/* Reports tab: a form's pop-up, centred over a dimmed page -- same idea as the student pop-up. */
.rpt-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 25, 19, 0.45); z-index: 999; }
.rpt-modal {
    position: fixed; top: 50%; left: calc(var(--nav-width) + (100vw - var(--nav-width)) / 2); transform: translate(-50%, -50%);
    z-index: 1000; width: min(900px, 94vw); max-height: 88vh; overflow: auto;
    background: #ffffff; border: 1px solid var(--line); border-left: 4px solid var(--button-green); border-radius: 16px; padding: 28px 32px;
    box-shadow: 0 30px 80px -20px rgba(20, 40, 30, 0.45);
}
/* No sidebar beside the page (phones, or collapsed on desktop): centre on the screen. */
body.nav-collapsed .rpt-modal { left: 50%; }
@media (max-width: 900px) {
    .rpt-modal { left: 50%; padding: 22px 18px; }
    .rpt-modal.mp-modal, .rpt-modal.ann-modal { width: calc(100vw - 36px); padding: 0; }
}
.rpt-modal h2 { margin: 0 0 4px; padding-right: 36px; }
.rpt-modal-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #ffffff; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.rpt-modal-close:hover { background: #fbeaec; border-color: #d7263d; color: #d7263d; }
.rpt-modal-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.rpt-modal-col { background: #ffffff; border: 1px solid #e6ebe8; border-radius: 10px; padding: 12px 14px; }
.rpt-modal-col h3 { margin: 0 0 8px; font-size: 15px; }
.rpt-modal-col h3 span { font-weight: 400; color: #000000; }
.rpt-modal-col ul { margin: 0; padding: 0 0 0 18px; max-height: 260px; overflow-y: auto; font-size: 13px; color: #000000; }
.rpt-modal-col li { margin: 3px 0; }
.rpt-modal-col .rpt-modal-empty { list-style: none; margin-left: -18px; color: #000000; opacity: 0.7; }
.rpt-col-submitted { border-left: 4px solid #2bb673; }
.rpt-col-returned { border-left: 4px solid #d7263d; }
.rpt-col-none { border-left: 4px solid #9aa39e; }
@media (max-width: 760px) { .rpt-modal-cols { grid-template-columns: 1fr; } }

/* Reports tab: the "Submission status by school" title and the legend sit plainly on the page,
   not inside a card, with the legend pulled out to its own place on the right. */
.rpt-matrix-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 0.75rem; }
.rpt-matrix-head h2 { margin: 0 0 0.25rem; }
.rpt-matrix-head .hint { margin: 0; }
.rpt-matrix-head .report-legend { margin-top: 2px; }
/* "Not yet submitted": brief, dull color (not black), unlike the other plain labels. */
.rpt-plain-dull { color: #8b958f; font-weight: 500; }
/* Pop-up: four columns (Approved / Pending / Returned / Not yet submitted). */
.rpt-modal-cols { grid-template-columns: repeat(4, 1fr); }
.rpt-modal-col .rpt-modal-note { margin: 0 0 8px; font-size: 12px; color: #000000; opacity: 0.8; }
.rpt-col-approved { border-left: 4px solid #2bb673; }
.rpt-col-pending { border-left: 4px solid #e0a32a; }
@media (max-width: 980px) { .rpt-modal-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rpt-modal-cols { grid-template-columns: 1fr; } }

/* Reports tab: the button and the legend stack on the right of the school-list heading,
   level with the district list right below it. */
.rpt-matrix-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.rpt-matrix-actions .summary-actions { align-items: flex-end; }

/* Reports tab: the color legend now lives inside each school's card, shown once it's open. */
.rpt-inline-legend { margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid #e6ebe8; }

/* Reports tab: emphasize the "View division summary" button. */
.rpt-view-summary { font-size: 15px; padding: 10px 20px; box-shadow: 0 6px 16px -6px rgba(47, 122, 79, 0.5); }
/* Division summary page: toggle between one district and all. */
.rpt-div-toggle { display: flex; gap: 8px; margin: 10px 0 4px; }
.rpt-div-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--button-green); background: #ffffff; color: var(--button-green); font-weight: 700; font-size: 14px; text-decoration: none; }
.rpt-div-chip:hover { background: #eef6f1; }
.rpt-div-chip.is-active { background: var(--button-green); color: #ffffff; }

/* Reports tab: Latest activity card -- top margin, and a centered empty state with mini icons. */
.rpt-recent-panel { margin-top: 24px; border-left: 4px solid #6fcf97; }
.rpt-recent-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px 32px; }
.rpt-recent-empty-icons { display: flex; gap: 10px; font-size: 26px; color: #c7d0ca; }
.rpt-recent-empty .empty-state { margin: 0; font-style: normal; }

/* Sidebar: unread-count badge next to Notifications. */
.nav-badge { margin-left: auto; background: #d7263d; color: #ffffff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }

/* Notifications page: All/Unread toggle row. */
.notif-mark-all { margin-left: auto; }
.rpt-div-toggle { align-items: center; }

/* Notifications list: a left-border color per category, and a dot for unread. */
.notif-panel { padding: 0; min-height: 0; display: flex; flex-direction: column; }
.notif-panel .notif-list { flex: 1 1 auto; }
.notif-panel .rpt-recent-empty { flex: 1 1 auto; justify-content: center; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #e6ebe8; border-left: 4px solid #9aa39e; }
.notif-item:last-child { border-bottom: 0; }
.notif-item.is-unread { background: #f6faf7; }
.notif-item.is-unread .notif-title::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--button-green); margin-right: 8px; vertical-align: middle; }
.notif-submission { border-left-color: #1d5fa7; }
.notif-approval { border-left-color: #2bb673; }
.notif-returned { border-left-color: #d7263d; }
.notif-comment { border-left-color: #9d7bd8; }
.notif-general { border-left-color: #9aa39e; }
.notif-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1f4f2; color: #000000; font-size: 15px; }
.notif-submission .notif-icon { color: #1d5fa7; background: #e8f0fa; }
.notif-approval .notif-icon { color: #2bb673; background: #e6f7ee; }
.notif-returned .notif-icon { color: #d7263d; background: #fbeaec; }
.notif-comment .notif-icon { color: #9d7bd8; background: #f2ecfa; }
.notif-body { flex: 1 1 auto; min-width: 0; }
.notif-title { margin: 0; font-weight: 700; color: #000000; font-size: 15px; }
.notif-text { margin: 2px 0 4px; color: #000000; font-size: 14px; }
.notif-time { color: #000000; opacity: 0.7; font-size: 12px; }
.notif-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.notif-actions form { margin: 0; }

/* Reports tab: comments between the division and a school's SBFP head, per school card. */
.rpt-comments { margin-top: 16px; padding: 14px 16px; background: #eafaf0; border: 1px solid #bfe9cf; border-left: 4px solid #6fcf97; border-radius: 10px; }
.rpt-comments .rpt-comment, .rpt-comments .rpt-comment-form textarea { background: #ffffff; }
.rpt-comments-title { margin: 0 0 8px; font-size: 15px; }
.rpt-comments-title span { font-weight: 400; font-size: 13px; color: #000000; opacity: 0.75; margin-left: 8px; }
.rpt-comment-list, .rpt-reply-list { list-style: none; margin: 0; padding: 0; }
.rpt-reply-list { margin: 8px 0 0 20px; padding-left: 14px; border-left: 2px solid #e6ebe8; }
.rpt-comment { background: #ffffff; border: 1px solid #e6ebe8; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.rpt-comment.is-division { border-left: 3px solid var(--button-green); background: #f6faf7; }
.rpt-comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rpt-comment-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: var(--accent);
    color: var(--button-green); font-size: 11px; font-weight: 800;
}
.rpt-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rpt-comment-head strong { font-size: 14px; color: #000000; }
.rpt-comment-role { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #000000; opacity: 0.6; }
.rpt-comment-head small { margin-left: auto; color: #000000; opacity: 0.6; font-size: 12px; }
.rpt-comment-text { margin: 4px 0 0; color: #000000; font-size: 14px; }
.rpt-reply-toggle { margin-top: 6px; display: inline-block; }
.rpt-reply-toggle summary { cursor: pointer; color: var(--button-green); font-size: 13px; font-weight: 700; list-style: none; }
.rpt-reply-toggle summary::-webkit-details-marker { display: none; }

/* Comment action row: react, reply, edit, delete -- one icon button each, all in a line. */
.rpt-comment-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.rpt-comment-actions form { margin: 0; }
/* Reply/Edit/React are inline icons in the row, but once opened the content should stretch out,
   not stay squeezed to icon-width -- drop to its own full-width line. */
.rpt-comment-actions > details[open] { flex: 1 1 100%; order: 10; }
.rpt-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    width: 28px; height: 28px; padding: 0; border: 0; background: transparent;
    border-radius: 50%; cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
/* Bright, always-visible colors (not just on hover) so these read clearly at a glance. */
.rpt-edit-btn { color: #1d5fa7; }
.rpt-edit-btn:hover { background: #e8f0fa; color: #14447d; }
.rpt-danger-btn { color: #d7263d; }
.rpt-danger-btn:hover { background: #fbeaec; color: #a81d2f; }
.rpt-icon-btn-text {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none;
    color: var(--button-green); font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 999px;
}
.rpt-icon-btn-text:hover { background: #eef6f1; }
.rpt-icon-btn-text::-webkit-details-marker { display: none; }

/* FB-style react picker: a plain "React" toggle that becomes a colored emoji+label once a
   reaction is picked, opening a row of 3 choices (Like/Love/Haha). */
.rpt-react-summary { color: #65676b; }
.rpt-react-summary.is-like { color: #d7263d; }
.rpt-react-summary.is-love { color: #e0245e; }
.rpt-react-summary.is-haha { color: #f7b928; }
.rpt-react-picker { display: flex; gap: 4px; padding: 4px; }
.rpt-react-pick {
    border: 0; background: transparent; cursor: pointer; font-size: 20px; padding: 4px 6px;
    border-radius: 8px; transition: transform 120ms ease, background 120ms ease; line-height: 1;
}
.rpt-react-pick:hover { background: #eef1ef; transform: scale(1.25); }
.rpt-comment-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.rpt-comment-form textarea { flex: 1 1 auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 14px; resize: vertical; }
.rpt-comment-new { margin-top: 10px; }
.rpt-send-btn { background: var(--button-green) !important; border-color: var(--button-green) !important; color: #ffffff !important; flex: 0 0 auto; }

/* Reports tab: the comment box still shows when a school has nothing to attach it to yet, just disabled. */
.rpt-comment-form textarea:disabled, .rpt-send-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.rpt-send-btn:disabled { background: #9aa39e !important; border-color: #9aa39e !important; }

/* Pop-up: the Endline-only note spans the full width above the four columns. */
.rpt-modal-cols > .trend-note { grid-column: 1 / -1; margin: 0 0 4px; }

/* Reports and Documentation: each school's card splits into a Reports side and a
   Documentation side (feeding-day photos). */
.rpt-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.rpt-split-col { min-width: 0; }
.rpt-split-left { padding-right: 16px; border-right: 1px solid #e6ebe8; }
.rpt-split-label { margin: 0 0 10px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; }
.rpt-split-left .rpt-split-label { color: #3fa56f; }
.rpt-split-right .rpt-split-label { color: #3fa56f; }
@media (max-width: 900px) {
    .rpt-split { grid-template-columns: 1fr; }
    .rpt-split-left { padding-right: 0; border-right: 0; border-bottom: 1px solid #e6ebe8; padding-bottom: 14px; }
}
/* Documentation: a tidy grid of feeding-day photos. */
.rpt-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.rpt-photo { margin: 0; background: #ffffff; border: 1px solid #e6ebe8; border-radius: 10px; overflow: hidden; }
.rpt-photo img { width: 100%; height: 100px; object-fit: cover; display: block; background: #f1f4f2; }
.rpt-photo figcaption { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; font-size: 11px; color: #000000; }
.rpt-photo-day { font-weight: 700; }
.rpt-photo-status { font-weight: 700; }
.rpt-photo.is-approved .rpt-photo-status { color: #2bb673; }
.rpt-photo.is-pending .rpt-photo-status { color: #e0a32a; }
.rpt-photo-caption { opacity: 0.8; }
.rpt-photo-date { opacity: 0.6; }

/* Documentation: quick select-and-review for a school's pending photos. */
.rpt-photo-review-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rpt-photo-review-head .hint { margin: 0; flex: 1 1 260px; }
.rpt-select-all { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--button-green); white-space: nowrap; }
.rpt-photo-pick { position: relative; cursor: pointer; display: block; }
.rpt-photo-pick .rpt-photo-check { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; z-index: 1; accent-color: var(--button-green); }
.rpt-photo-pick:has(.rpt-photo-check:checked) { outline: 2px solid var(--button-green); outline-offset: -2px; }
.rpt-photo-review-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 14px; margin: 8px 0; resize: vertical; }
.rpt-photo-grid-decided { margin-top: 10px; }
.rpt-photo.is-returned .rpt-photo-status { color: #d7263d; }

/* Reports tab: the Documentation mini-card stands apart from the forms, blue like its label. */
.rpt-stat-form[data-form-key="documentation"] { border-left-color: #6fcf97; }

/* Division summary: a big centered pop-up, since it's a whole spreadsheet-style summary. */
.rpt-summary-modal { width: min(1400px, 96vw); height: 90vh; max-height: 90vh; padding: 16px; display: flex; flex-direction: column; border-left: 4px solid var(--button-green); }
.rpt-summary-scroll { flex: 1 1 auto; overflow-y: auto; padding-top: 28px; }
.rpt-consolidation, .rpt-per-school { margin-bottom: 20px; }
.rpt-consolidation-title { margin: 0 0 6px; }
.rpt-consolidation-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; }
.rpt-consolidation-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rpt-consolidation-table th, .rpt-consolidation-table td { padding: 8px 14px; text-align: left; border-bottom: 1px solid #eef1ef; color: #000000; }
.rpt-consolidation-table thead th { background: var(--page-green); font-weight: 700; }
.rpt-consolidation-table td.num, .rpt-consolidation-table th.num { text-align: center; }
.rpt-consolidation-table .rpt-con-all { background: #eafaf0; font-weight: 800; }
.rpt-consolidation-table tr.rpt-con-group td { background: #f5f7f6; font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
.rpt-summary-frame { width: 100%; height: 70vh; border: 0; border-radius: 10px; }

/* Consolidation: Overall and District levels, each with a category picker and a 12-table nav. */
.rpt-con-level { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #eef1ef; }
.rpt-con-level:last-child { border-bottom: 0; }
.rpt-con-level-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rpt-con-level-head h3 { margin: 0; font-size: 16px; }
.rpt-con-table-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rpt-con-nav-btn { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--button-green); background: #ffffff; color: var(--button-green); font-weight: 700; font-size: 13px; cursor: pointer; }
.rpt-con-nav-btn:hover { background: #eef6f1; }
.rpt-con-nav-btn.is-active { background: var(--button-green); color: #ffffff; border-color: var(--button-green); }
.rpt-con-table-title { margin: 0 0 6px; font-size: 14px; color: #000000; }
.rpt-con-empty { text-align: center !important; color: #000000; opacity: 0.6; font-style: italic; padding: 16px !important; }

/* Consolidation: the table looks like the real printed SBFP form, a white page inside the card. */
.rpt-con-paper { background: #ffffff; border: 1px solid #d7dbd8; box-shadow: 0 2px 10px -4px rgba(0,0,0,0.15); border-radius: 4px; padding: 20px 22px 24px; }
.rpt-paper-head { position: relative; text-align: center; margin-bottom: 14px; padding: 0 70px; }
.rpt-paper-logo { position: absolute; top: 0; height: 56px; width: auto; max-width: 70px; object-fit: contain; }
.rpt-paper-logo-left { left: 0; }
.rpt-paper-logo-right { right: 0; }
.rpt-paper-form-id { text-align: left; font-weight: 700; margin: 0 0 4px; text-decoration: underline; }
.rpt-paper-dept { font-weight: 700; margin: 0 0 6px; }
.rpt-paper-title { font-weight: 700; margin: 0; }
.rpt-paper-meta { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }
.rpt-paper-meta-col p { margin: 2px 0; }
.rpt-paper-blank { display: inline-block; min-width: 140px; border-bottom: 1px solid #9aa39e; color: #000000; font-weight: 400; }
.rpt-paper-table-wrap { overflow-x: auto; }
.rpt-paper-table { border-collapse: collapse; width: 100%; font-size: 11px; }
.rpt-paper-table th, .rpt-paper-table td { border: 1px solid #000000; padding: 4px 6px; text-align: center; vertical-align: middle; }
.rpt-paper-table thead th { background: #f1f4f2; font-weight: 700; }
.rpt-paper-table tbody td:first-child { font-weight: 700; width: 28px; }
.rpt-paper-footer { margin-top: 22px; font-size: 13px; }
.rpt-paper-footer p { margin: 2px 0; }
.rpt-paper-signee { font-weight: 700; margin-top: 28px !important; border-top: 1px solid #000000; display: inline-block; padding-top: 2px; }

/* Fix: .rpt-summary-modal sets display:flex directly, which otherwise overrides the browser's
   own [hidden] handling -- so setting .hidden = true did nothing visually. Force it to actually
   hide, for every pop-up sharing this class. */
.rpt-modal[hidden], .rpt-modal-backdrop[hidden] { display: none !important; }

/* Notifications: All/Unread now lives inside the card, right at the top, with room to breathe
   and a thin green divider separating it from the list below. The card sits closer to the
   heading since the toggle no longer needs its own separate row above it. */
.notif-head { margin-bottom: 0.5rem; }
.notif-toggle { padding: 16px 20px 14px; margin: 0; border-bottom: 2px solid var(--button-green); }

/* The multi-year risk-history note: red, not the usual yellow, to stand out as a risk signal. */
.trend-note-red { background: #fbeaec !important; color: #7a1420 !important; border-left: 4px solid #d7263d !important; }

/* Beneficiaries: the At-Risk After Feeding panel label stands out in red, a risk signal. */
.ben-risk-label { color: #d7263d !important; }

/* At-Risk After Feeding panel: the whole panel's border is red, not just its label. */
.ben-risk-panel {
    border: 1px solid #f0c3cb; border-left: 4px solid #d7263d !important;
    border-radius: 10px; padding: 14px 16px;
}

/* "No BMI, below 6 yrs old" and other blank/none status text: not bold, unlike real statuses. */
.beneficiary-status-lines .bst-none { font-weight: 400 !important; }

/* Notifications card: thick green left border (matching the rest of the app), and taller so
   less empty space is left at the bottom. */
.notif-panel { border-left: 4px solid var(--button-green) !important; min-height: 70vh; }

/* Announcements: "New announcement" morphs into a big centered card, same pattern as Reports. */
/* The outer shell is just a positioning wrapper now -- no border/background/shadow of its own,
   so only the form's own card (loaded inside the iframe) reads as "the card". The iframe is
   sized to hug that card's real height (see the script in list.html), not a fixed big box. */
.ann-modal { width: min(700px, 94vw); max-height: 90vh; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.ann-modal .rpt-modal-close { top: -14px; right: -14px; background: #ffffff; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.25); z-index: 2; }
/* Rounded to match the card inside it, and clipped so no square-cornered edge shows past the
   card's own rounded corners. */
.ann-modal-frame { display: block; width: 100%; height: 300px; border: 0; max-height: 86vh; border-radius: 12px; overflow: hidden; }
.ann-form-card { box-shadow: 0 30px 80px -20px rgba(20, 40, 30, 0.45); }

/* The pop-up's own shell (no sidebar to offset for) and a simple title in place of the old
   page-header/back-link/subtitle. Kept tight -- just enough breathing room around the card,
   not the same generous padding a full standalone page would want. */
.bare-content { margin: 0 auto !important; padding: 0.9rem 1.1rem 1.1rem !important; max-width: 760px; }
.ann-form-title { margin: 0 0 1.25rem; }

/* Announcement form: plain sections, and the audience picker. White card, green border only
   when picked -- no background tint, and the radio itself is green, not the browser default blue. */
.ann-section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #eef1ef; }
.ann-section:last-of-type { border-bottom: 0; }
.ann-section-title { margin: 0 0 12px; font-size: 16px; }
.ann-audience-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.ann-audience-pick { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: #ffffff; }
.ann-audience-pick:has(input:checked) { border-color: var(--button-green); }
.ann-audience-pick input { margin-top: 3px; accent-color: var(--button-green); }
.ann-audience-pick-label { display: flex; flex-direction: column; }
.ann-audience-pick-label small { color: #000000; opacity: 0.7; font-size: 12px; }
.ann-school-pickers { display: none; }
.ann-deadline-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.ann-deadline-toggle input { accent-color: var(--button-green); }
.ann-deadline-field { display: none; }
.ann-form-actions { justify-content: center; }

/* The pop-up form sits inside its own card, with tighter spacing between sections than before. */
.ann-form-card { background: #ffffff; border: 1px solid var(--line); border-left: 4px solid var(--button-green); border-radius: 12px; padding: 20px 24px; }
.ann-form-card .ann-section { margin-bottom: 14px; padding-bottom: 12px; }
.ann-locked-school { background: #eef6f1; border-radius: 8px; padding: 8px 12px; margin: 0; }

/* Announcements page: standard card borders (thick left, thin on the other sides, auto-matched)
   on the general-announcements card and each announcement card. */
.ann-general-card, .ann-list-item {
    border-left: 4px solid var(--button-green);
}
.ann-general-card { margin: 1rem 0; padding-top: 0.85rem; }
.ann-section-title { margin: 0 0 6px; }
.ann-general-card .hint { margin: 0 0 12px; }
/* The audience filter chips and "Post an announcement" sit on one row, level with each other,
   button on the right -- not stacked separately and crowded on the left. */
.ann-general-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ann-general-head .filter-bar { margin: 0; }
.ann-general-head .btn-primary { flex: 0 0 auto; }
/* "Post an announcement" and "Set feeding schedule" grouped together on the right, not spread
   apart by the row's own space-between. */
.ann-general-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ann-schools-title { margin: 1.5rem 0 0.75rem; }
.ann-school-body { display: flex; flex-direction: column; gap: 14px; }
.ann-school-posts { display: flex; flex-direction: column; gap: 8px; }
/* Each posted announcement collapses to one thin row by default (status, title, date) -- click
   to expand the full message and due date, instead of every post always taking a full card's
   worth of vertical space. */
.ann-post-compact {
    background: #ffffff; border: 1px solid #e6ebe8; border-left: 4px solid var(--button-green);
    border-radius: 8px; box-shadow: 0 1px 4px rgba(20, 40, 30, 0.05);
}
.ann-post-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none;
}
.ann-post-row::-webkit-details-marker { display: none; }
.ann-post-title { font-weight: 700; font-size: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-post-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ann-post-arrow { font-size: 11px; color: var(--muted); transition: transform 150ms ease; }
.ann-post-compact[open] .ann-post-arrow { transform: rotate(180deg); }
.ann-post-details { padding: 0 12px 12px; border-top: 1px solid #eef1ef; margin-top: 2px; padding-top: 10px; }
.ann-post-details p { margin: 0 0 6px; font-size: 14px; }
.ann-comments { margin-top: 10px; }

/* Announcements page: the General/District 1/District 2 mini-cards above the general list,
   same clickable "pops up a status card" idea as the Reports form mini-cards. */
.ann-coverage { margin-bottom: 1rem; }

/* Mini-card pop-up: left column tracks deadline compliance, right tracks acknowledgment --
   two columns, not the Reports default of three/four. */
.ann-status-cols { grid-template-columns: repeat(2, 1fr); }
.ann-status-col { display: flex; flex-direction: column; gap: 14px; border: 1px solid #c9d6ce; }
.ann-status-item { background: #f6faf7; border: 1px solid #e6ebe8; border-radius: 10px; padding: 10px 12px; }
.ann-status-item h4 { margin: 0 0 4px; font-size: 14px; }
.ann-status-sublist { margin-top: 8px; }
.ann-status-sublist strong { display: block; font-size: 12px; margin-bottom: 4px; }
.ann-status-yes strong { color: #2bb673; }
.ann-status-no strong { color: #8b958f; }
@media (max-width: 760px) { .ann-status-cols { grid-template-columns: 1fr; } }

/* Per-school card: With-deadline / No-deadline split (same pattern as Reports|Documentation),
   and the acknowledged/complied badge on each posted announcement. Each side gets its own full
   border box (not just a thin divider) so the two groups read as clearly separate panels. */
.ann-school-split { margin-top: 10px; }
.ann-school-split .rpt-split-col {
    border: 2px solid #9fb8ac !important; border-radius: 10px !important; padding: 14px 16px !important;
    background: #eef5f1;
}
.ann-school-split .rpt-split-left { border-right: 2px solid #9fb8ac !important; }
.ann-tag-ok { background: #e6f7ee; color: #1f8a54; }

/* Shared "are you sure" confirmation card -- used before every mutating action, every tab.
   Square-ish proportions: the thick accent sits on TOP (not the left, like other pop-ups), and
   Cancel/OK sit as a full-width row directly under the message, not off to one side. OK in the
   site's standard green, Cancel a solid red, so the two choices read clearly apart at a glance. */
.action-confirm-modal {
    width: min(360px, 92vw); padding: 24px 26px; text-align: center;
    border-left: 0 !important; border-top: 4px solid var(--button-green) !important;
}
.action-confirm-msg { margin: 0; font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.action-confirm-actions { display: flex; gap: 10px; margin-top: 20px; }
.action-confirm-actions > button { flex: 1 1 0; }
/* The modal is included outside .nf-page on some layouts, so the usual .nf-page .btn-primary
   green never reaches it -- color this OK button directly instead of relying on that ancestor. */
.action-confirm-actions #actionConfirmOk { background: var(--button-green); color: #ffffff; border-color: var(--button-green); }
.action-confirm-actions #actionConfirmOk:hover { background: var(--button-green-hover); border-color: var(--button-green-hover); }
.btn-confirm-cancel {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    background: var(--danger); color: #ffffff; border: 1px solid var(--danger);
    border-radius: 10px; padding: 0.55rem 1.1rem; font-family: inherit; font-weight: 600; font-size: 0.93rem; cursor: pointer;
}
.btn-confirm-cancel:hover { background: #9c2a1e; border-color: #9c2a1e; }

/* Meal Plans: draft-week reminder banner, same look as a flash-error but persistent. */
.mp-overdue-banner {
    display: flex; align-items: center; gap: 8px; background: var(--danger-bg); color: var(--danger);
    border: 1px solid #efc4c4; border-radius: 10px; padding: 0.7rem 1rem; margin-bottom: 1.25rem; font-size: 0.92rem;
}
.mp-overdue-banner .icon { flex: 0 0 auto; }

/* Meal Plans: each day is 3 fixed slots (Hot Meal/NFP/Milk) -- type straight in, then press that
   day's own Add button at the bottom of its card to save all 3 at once, no page reload. */
.mp-slots-hint { margin: 0 0 0.75rem; }
.mp-slot { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.mp-slot-chip { flex: 0 0 auto; min-width: 72px; text-align: center; }
.mp-slot-input {
    flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 8px;
    padding: 6px 10px; font-family: inherit; font-size: 0.88rem; transition: border-color 150ms ease, background 150ms ease;
}
.mp-slot-input:focus { outline: none; border-color: var(--button-green); }
.mp-slot.mp-slot-ok .mp-slot-input { border-color: #2bb673; background: #f1faf4; }
.mp-slot.mp-slot-error .mp-slot-input { border-color: var(--danger); background: var(--danger-bg); }

/* Each day now splits into a Morning and an Afternoon session, each with its own 3 slots --
   a thin divider and a small label is enough to tell them apart within the same day card. */
.mp-session-group { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mp-session-group:first-of-type { margin-top: 2px; padding-top: 0; border-top: none; }
.mp-session-label {
    margin: 0 0 4px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--muted);
}
/* Warm for Morning, cool for Afternoon -- so the two sessions read apart at a glance, not just
   by the text itself. */
.mp-session-label-morning { color: var(--warning); }
.mp-session-label-afternoon { color: var(--teal); }

/* Meal Plans: "Post to all schools" now sits below the week's days, as the final action. */
.mp-post-actions { display: flex; gap: 10px; margin: 1.25rem 0; flex-wrap: wrap; }
.mp-post-toggle { flex: 1 1 200px; margin: 0; }
.mp-post-toggle button { width: 100%; justify-content: center; }

/* Meal Plans: Hot meal expenses (finance) section. */
.mp-finance-panel { margin-top: 1.5rem; }
.mp-finance-panel .table-wrap { overflow-x: auto; }
.mp-expense-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mp-expense-table th, .mp-expense-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
.mp-expense-table thead th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.mp-expense-amount { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.mp-expense-note { color: var(--muted); }
.mp-expense-table tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; }

/* Hot meal expenses: every school, split by district, each its own collapsed-by-default
   accordion (same component Reports/Announcements/Beneficiaries already use) -- a school with
   nothing reported yet still gets a row, just empty, so a gap is obviously "not submitted"
   rather than silently missing from the list. */
.mp-expense-total-hint { font-weight: 600; color: var(--ink); }
.mp-finance-panel .district-section:first-of-type { margin-top: 1rem; }
.mp-expense-accordion { margin-bottom: 8px; }
.mp-expense-accordion:last-child { margin-bottom: 0; }
.mp-expense-school-subtotal { font-family: var(--font-mono); font-weight: 700; color: var(--button-green); white-space: nowrap; }
.mp-expense-accordion-body .mp-expense-table { font-size: 0.85rem; }

/* Announcements: current feeding schedule summary + Day 1 badge per school. */
.ann-feeding-schedule { background: #fff8ec; border: 1px solid #f0d9a6; border-left: 4px solid #e0a32a; border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.ann-feeding-schedule h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 15px; }
.ann-feeding-schedule p { margin: 0 0 4px; font-size: 14px; }
.ann-feeding-schedule .hint { margin: 0; }
.beneficiary-school-card .tag { margin-left: 8px; }

/* Meal Plans: colored stat cards. */
/* Meal Plans detail: day card weekday label. */
.mp-day-weekday { font-weight: 400; color: var(--muted); font-size: 0.8rem; margin-left: 6px; }

/* Meal Plans list: the card holding the grid, with "Add Week N" at its top right. */
.mp-list-card { border-left: 4px solid var(--button-green); }
.mp-list-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.mp-list-head h2 { margin: 0; }
.mp-list-head form { margin: 0; }
.mp-list-head-actions { display: flex; align-items: center; gap: 10px; }

/* Meal Plans list: Select mode -- a toggle button that reveals a checkbox on every card plus a
   bulk-action bar, so several weeks can be deleted in one go instead of one at a time. */
.mp-bulk-bar {
    align-items: center; justify-content: space-between; gap: 12px;
    background: #f6f8f7; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 10px 14px; margin: 0 0 1rem;
}
/* display only applies while the bar isn't [hidden] -- an unconditional "display: flex" here
   would always win over the browser's own "[hidden] { display: none }" default (same
   specificity, but this stylesheet loads after it), so the bar would never actually hide. */
.mp-bulk-bar:not([hidden]) { display: flex; }
.mp-bulk-bar span { font-weight: 700; color: var(--ink); }
.mp-bulk-actions { display: flex; align-items: center; gap: 10px; }
.mp-bulk-actions form { margin: 0; }

/* Per-card checkbox: hidden until Select mode is on, sits in the card's top-left corner above
   everything else so it doesn't shift the existing layout. */
.mp-week-select {
    display: none; position: absolute; top: 10px; left: 10px; z-index: 3;
    width: 24px; height: 24px; align-items: center; justify-content: center;
    background: #ffffff; border: 1px solid var(--line); border-radius: 6px;
    box-shadow: 0 2px 6px -2px rgba(20, 40, 30, 0.25); cursor: pointer;
}
.mp-week-select-box { width: 16px; height: 16px; accent-color: var(--button-green); cursor: pointer; margin: 0; }
body.mp-select-active .mp-week-select { display: flex; }
body.mp-select-active .mp-week-card { cursor: pointer; }
body.mp-select-active .mp-week-delete-form { display: none; }
body.mp-select-active .mp-week-card:has(.mp-week-select-box:checked) {
    outline: 2px solid var(--button-green); outline-offset: -1px;
}

/* Drag-select rubber-band: a fixed-position box following the pointer while dragging in Select
   mode; any card it overlaps gets added to the selection (see the mousedown/mousemove wiring). */
.mp-marquee {
    position: fixed; z-index: 50; pointer-events: none;
    background: rgba(47, 122, 79, 0.12); border: 1px solid var(--button-green); border-radius: 2px;
}

/* Meal Plans list: a quick color key above the grid explaining grey vs. green. */
.mp-legend-note { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 1rem; }
.mp-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mp-legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.mp-legend-draft { background: #d8dcd9; border: 1px solid #b9c0bb; }
.mp-legend-posted { background: var(--button-green); }

/* Meal Plans list: one mini-card per week, same look as the Schools tab's cards, with a thin
   border all the way round and the same macOS Dock-style grow-on-hover used elsewhere. The whole
   card is clickable (opens the week's pop-up); every week lives in the same grid -- draft vs.
   posted is shown purely by card color (grey vs. green), and a draft card turns green with a
   thicker left accent the moment it's actually posted. */
.mp-week-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mp-week-draft { background: #f3f4f3; border: 1px solid #b7bdb9 !important; border-left: 4px solid #8b958f !important; }
.mp-week-draft .school-card-icon { background: #e7e9e7; color: #6b746e; }
.mp-week-posted { background: #eef8f1; border: 1px solid #8fc7a3 !important; border-left: 4px solid var(--button-green) !important; }
.mp-week-posted .school-card-icon { background: #d8f0e0; color: var(--button-green); }
.mp-week-dates { font-weight: 700; color: var(--ink) !important; opacity: 1 !important; }
.mp-week-card {
    position: relative; cursor: pointer; border: 1px solid var(--line);
    transition: transform 150ms ease, box-shadow 150ms ease; transform-origin: bottom center;
}
.mp-week-card:hover, .mp-week-card:focus-visible {
    outline: none; transform: scale(1.06) translateY(-3px); box-shadow: 0 14px 26px -12px rgba(47, 122, 79, 0.35); position: relative; z-index: 2;
}
/* Per-card delete, its own full-width row at the bottom of the card -- well clear of the
   icon/title above it. Unfilled/outline, same red-on-white style as every other Delete button. */
.mp-week-delete-form { margin: 10px 0 0; }
.mp-week-delete-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 6px 0;
    border: 1px solid #e3b7b7; border-radius: 8px; background: #ffffff; color: var(--danger); cursor: pointer;
    font-family: inherit; font-weight: 600; font-size: 0.85rem; transition: background 120ms ease, border-color 120ms ease;
}
.mp-week-delete-btn:hover { background: var(--danger-bg); border-color: var(--danger); }
/* Bulk-delete button (in the Select-mode bar, not inside a card) overrides the full-width card
   look above -- declared after it so it wins against the equal-specificity .mp-week-delete-btn
   rule it's combined with. */
.mp-bulk-delete-btn { width: auto; padding: 8px 16px; }
.mp-bulk-delete-btn:disabled { opacity: 0.45; cursor: default; }
.mp-bulk-delete-btn:disabled:hover { background: #ffffff; border-color: #e3b7b7; }

/* Meal Plans pop-up: same morph-card pattern as Announcements/Reports, thick green left border. */
.mp-modal { width: min(760px, 94vw); max-height: 90vh; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.mp-modal .rpt-modal-close { top: -14px; right: -14px; background: #ffffff; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.25); z-index: 2; }
.mp-modal-frame {
    display: block; width: 100%; height: 640px; border: 0; max-height: 86vh; border-radius: 12px;
    overflow: hidden; transition: height 150ms ease;
}
/* Shown the instant the pop-up opens, in the same spot the iframe will occupy, so there's never
   a blank box while the real content loads over the network. */
.mp-modal-spinner {
    display: none; align-items: center; justify-content: center; height: 300px; width: 100%;
    background: #ffffff; border-radius: 12px; font-size: 30px; color: var(--button-green);
}

/* ---------------------------------------------------------------------- */
/* Settings page (ported from the School web app's settings tab, purple   */
/* accents swapped for the Division's green)                              */
/* ---------------------------------------------------------------------- */
.settings-card { margin-bottom: 16px; border: 1.5px solid #aedcbc !important; }
.settings-section-label {
    font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
    color: var(--muted); margin: 0 0 10px;
}

.settings-profile-row { display: flex; align-items: center; gap: 18px; }
.settings-avatar-stack { position: relative; flex-shrink: 0; display: block; }
.settings-avatar-view { all: unset; display: block; cursor: pointer; }
.settings-avatar {
    width: 74px; height: 74px; border-radius: 12px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--button-green); font-size: 26px; font-weight: 800;
}
.settings-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-avatar-camera {
    position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--button-green); color: #fff !important; display: flex; align-items: center;
    justify-content: center; border: 3px solid var(--white); cursor: pointer; padding: 0;
}
.settings-avatar-camera svg { color: #fff !important; stroke: #fff !important; }

/* Replace/Delete menu that drops down from the camera button. */
.settings-photo-menu-wrap { position: relative; }
.settings-photo-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 160px;
    background: #ffffff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 14px 28px -10px rgba(20, 40, 30, 0.35); padding: 6px; display: none;
}
.settings-photo-menu.is-open { display: block; }
.settings-photo-menu-item {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none;
    background: none; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink);
    cursor: pointer; text-align: left; font-family: inherit;
}
.settings-photo-menu-item:hover { background: var(--accent); }
.settings-photo-menu-item.is-danger { color: var(--danger); }
.settings-photo-menu-item.is-danger:hover { background: var(--danger-bg); }
.settings-profile-row > div:last-child { min-width: 0; }
.settings-profile-name { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 4px; overflow-wrap: anywhere; }
.settings-profile-email { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.settings-profile-email svg { flex-shrink: 0; color: var(--button-green); }

.settings-info-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--ink); }
.settings-info-row svg { flex-shrink: 0; margin-top: 1px; color: var(--button-green); stroke-width: 2.3; }
.settings-info-row + .settings-info-row { border-top: 1px solid var(--line); }

.settings-tile {
    display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: none;
    padding: 10px 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.settings-tile-icon {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; background: var(--accent); color: var(--button-green);
}
.settings-tile-icon svg { stroke-width: 2.3; }
.settings-tile-body { flex: 1; min-width: 0; }
.settings-tile-title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.settings-tile-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.settings-tile-chevron { color: var(--muted); flex-shrink: 0; }
.settings-divider { height: 1px; background: var(--line); margin: 0; }

.toggle-switch {
    position: relative; width: 44px; height: 26px; border-radius: 999px; border: none; cursor: pointer;
    background: #d9d9d9; flex-shrink: 0; padding: 0; transition: background .15s ease;
}
.toggle-switch.is-on { background: var(--button-green); }
.toggle-knob {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s ease;
}
.toggle-switch.is-on .toggle-knob { left: 21px; }

.settings-toggle-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.settings-toggle-row-icon {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; background: var(--accent); color: var(--button-green);
}
.settings-toggle-row-icon svg { stroke-width: 2.3; }
.settings-toggle-row-body { flex: 1; min-width: 0; }
.settings-toggle-row-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.settings-toggle-row-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.settings-toggle-dimmed { opacity: .45; pointer-events: none; }
.settings-chip-row { display: flex; flex-direction: column; margin-top: 4px; }

.settings-about { text-align: left; padding: 16px 20px; }
.settings-about p { font-size: 13.5px; color: var(--ink); line-height: 1.6; margin: 0; text-align: justify; text-indent: 26px; }
.settings-about-logo { width: 18px; height: 18px; vertical-align: -3px; margin-right: 3px; border-radius: 4px; }

/* Change Password / Change Contact Number pop-ups: same morph-card .rpt-modal pattern used
   everywhere else, just narrower since it's a short form, not a wide report/menu card. */
.settings-modal { width: min(420px, 92vw); }
.settings-modal h2 { text-align: center; margin-bottom: 6px; }

/* Landing page: Log In / Sign Up morph. Mirrors the school-level app's own welcome-page
   pattern (.wl-auth / .split-card there) -- both cards sit in the DOM the whole time, already
   fully rendered with no iframe/network/font-loading race involved, so there's nothing to
   measure and nothing that can show up at the wrong size. body[data-auth-mode] just switches
   which one is visible. */
.auth-stage {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; overflow-y: auto; background: rgba(12, 38, 22, .34);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
body:not([data-auth-mode="tour"]) .auth-stage {
    opacity: 1; visibility: visible; transition: opacity .4s ease .08s, visibility 0s;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.auth-stage .login-card {
    display: none; flex: 0 1 auto; width: 100%; max-width: 440px; margin: 0;
    background: #ffffff; border: 1px solid var(--line); border-top: 5px solid var(--button-green);
    border-radius: 16px; padding: 36px 40px 30px;
    box-shadow: 0 30px 80px -20px rgba(20, 40, 30, 0.45);
    animation: auth-card-in .3s ease both;
    translate: 0 0; scale: 1;
    transition: translate .5s cubic-bezier(.22, 1, .36, 1), scale .5s cubic-bezier(.22, 1, .36, 1);
}
body[data-auth-form="login"] .auth-stage .card-login,
body[data-auth-form="signup"] .auth-stage .card-signup,
body[data-auth-form="signup_details"] .auth-stage .card-signup-details { display: flex; flex-direction: column; }
/* Yellow top border for either step of Sign Up, green for Log In. */
.auth-stage .card-signup, .auth-stage .card-signup-details { border-top-color: var(--sun); max-width: 480px; }
/* Log In only has two fields, so it reads as noticeably smaller than the busier Sign Up cards
   at the same width -- sized up on its own so it doesn't feel undersized next to them. */
.auth-stage .card-login { max-width: 500px; padding: 48px 48px 36px; }
.auth-stage .card-login .field-group input { height: 52px; font-size: 1rem; }
.auth-stage .card-login button[type="submit"] { height: 52px; font-size: 1rem; }
body[data-auth-mode="tour"] .auth-stage .login-card { translate: 0 -18px; scale: .95; }
/* Sign Up step 2 is much longer than step 1 (it has the SDO/District/Municipality pickers on
   top of everything step 1 already has), so it scrolls inside the card once it exceeds step 1's
   own natural size -- that size is the reference, set as an inline max-height by the script in
   _auth_signup_details_form.html once step 1's real height is known. Step 1 itself is never
   capped/scrollable. */
.auth-stage .card-signup-details { overflow-y: auto; }
@keyframes auth-card-in { from { opacity: 0; } }
@media (max-width: 700px) {
    .auth-stage { padding: 16px 12px; }
}


/* Ranking bars (Dashboard "Schools ranked by at-risk beneficiaries" and Analytics "Schools ranked
   by forecasted ..."): thin rounded bars on a light track, instead of the thick 16px ones. */
.sf-track { height: 8px !important; border-radius: 999px; background: #eef1f4 !important; }
.sf-fill { border-radius: 999px; }

/* Analytics forecast ranking: 8 schools visible, the rest scroll inside the card. */
.sf-rows-scroll { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.sf-rows-scroll::-webkit-scrollbar { width: 8px; }
.sf-rows-scroll::-webkit-scrollbar-thumb { background: #c9d8cf; border-radius: 999px; }
.sf-rows-scroll::-webkit-scrollbar-track { background: transparent; }

/* @mentions in announcements and comments */
.mention { color: #1d6b43; background: #e3f3ea; border-radius: 4px; padding: 0 3px; font-weight: 600; }
/* Beneficiaries on phones: avatar + name on the first line, BMI-A / HFA under the name,
   and the per-school search takes its own full-width line. */
@media (max-width: 640px) {
    .beneficiary-row { flex-wrap: wrap; gap: 4px 12px; }
    .beneficiary-row .risk-student-info { flex: 1 1 calc(100% - 52px); }
    .beneficiary-row .risk-student-meta { white-space: normal; }
    .beneficiary-row .beneficiary-status-lines { flex-basis: 100%; margin-left: 0; padding-left: 48px; min-width: 0; }
    .beneficiary-local-filters { flex-wrap: wrap; }
    .beneficiary-local-filters .beneficiary-school-search { order: -1; width: 100%; margin-left: 0; }
}

/* Announcements on phones: school name and arrow on the first line, the delivery tags and
   announcement count underneath; an announcement row puts its title on its own line. */
@media (max-width: 640px) {
    .ann-school-accordion > .beneficiary-school-card { flex-wrap: wrap; gap: 6px 10px; }
    .ann-school-accordion > .beneficiary-school-card .beneficiary-school-name { flex: 1 1 calc(100% - 30px); }
    .ann-school-accordion > .beneficiary-school-card .beneficiary-accordion-arrow { order: 1; }
    .ann-school-accordion > .beneficiary-school-card > :is(.tag, .beneficiary-school-count) { order: 2; }
    .ann-post-row { flex-wrap: wrap; row-gap: 4px; }
    .ann-post-title { order: 1; flex-basis: 100%; white-space: normal; }
    .ann-post-date { margin-left: auto; }
}

/* Loading bar shown while the next page loads (see the top of main.js). */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.nav-progress::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: var(--mid-green);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    animation: nav-progress-slide 1.1s ease-in-out infinite;
}

.is-navigating .nav-progress {
    opacity: 1;
}

.is-navigating,
.is-navigating * {
    cursor: progress !important;
}

@keyframes nav-progress-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-progress::before {
        width: 100%;
        animation: none;
        opacity: 0.8;
    }
}

/* A beneficiaries school card whose students are still loading (see loadSchoolBody in beneficiaries.js). */
.beneficiary-accordion-pending .ben-loading {
    margin: 0;
    padding: 18px 4px;
    color: var(--muted);
    font-size: 14px;
}

/* Page content being replaced by an in-place filter (see main.js): dims after a moment, so quick
   swaps don't flicker. */
#main.nf-updating {
    opacity: 0.55;
    transition: opacity 0.2s ease 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    #main.nf-updating {
        transition: none;
    }
}

/* "Updated last ..." with its Refresh button, in the header of the pages drawn from the cached
   tables (templates/_data_status.html). Amber once the data is older than the refresh window. */
.data-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.data-status .dash-asof {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 10px;
    border: 1px solid #b9dcc6;
    border-radius: 999px;
    background: #e3f1e8;
    color: #1f5c39;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    cursor: default;
}
.data-status .dash-asof.is-stale { border-color: #f0dca8; background: #fdf1d8; color: #7a4f00; }
.data-refresh-form { margin: 0; }
.data-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #cdd5d0;
    border-radius: 999px;
    background: #fff;
    color: #17211b;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.data-refresh-btn:hover { border-color: #2f7a4f; color: #256240; }
.data-refresh-btn:focus-visible { outline: 3px solid rgba(47, 122, 79, 0.4); outline-offset: 2px; }
.data-refresh-btn.is-stale { border-color: #2f7a4f; color: #256240; }
.data-refresh-btn:disabled { cursor: progress; opacity: 0.75; }
.data-refresh-btn.is-busy .icon { animation: data-refresh-spin 0.9s linear infinite; }
@keyframes data-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .data-refresh-btn.is-busy .icon { animation: none; }
}
.data-status-flash { margin: 8px 0 0; max-width: 560px; }
.data-status-flash .flash { margin-bottom: 0; padding: 0.45rem 0.8rem; font-size: 0.85rem; }