/* SchoolConnect analytics — prototype-parity styling.
   Ported from docs/product/analytics/prototype/schoolconnect-analytics-prototype.html and scoped under
   .sc-analytics so it can't leak into the rest of the app. Every persona dashboard wraps its content in
   <div class="sc-analytics"> to get the exact prototype look (cards, KPI tiles, insight banner, chips,
   ABC cells, tables, tags). Light by default (matches the prototype); a dark override keeps app theming. */

.sc-analytics {
    --an-brand: #1F4E79;
    --an-brand-light: #3E7CB1;
    --an-good: #1B7F4B;
    --an-watch: #E69F00;
    --an-bad: #C0392B;
    --an-info: #3E7CB1;
    --an-ink: #1A202C;
    --an-body: #4A5568;
    --an-muted: #718096;
    --an-grid: #E2E8F0;
    --an-surface: #F4F7FB;
    --an-card: #FFFFFF;
    --an-radius: 14px;
    --an-shadow: 0 1px 2px rgba(16,42,67,.06), 0 4px 16px rgba(16,42,67,.06);
    color: var(--an-ink);
}

/* Page header */
.sc-analytics .an-phead { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 4px; flex-wrap: wrap; }
.sc-analytics .an-phead h1 { font-size: 22px; margin: 0; color: var(--an-ink); font-weight: 700; }
.sc-analytics .an-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--an-brand); background: #E8F0F9; padding: 4px 9px; border-radius: 20px; }
.sc-analytics .an-pdesc { color: var(--an-muted); font-size: 13.5px; margin: 0 0 16px; }

/* Insight banner */
.sc-analytics .an-insight { display: flex; gap: 12px; align-items: flex-start; background: #FFF8E9;
    border: 1px solid #F3E2BC; border-left: 4px solid var(--an-watch); border-radius: 12px;
    padding: 13px 16px; margin-bottom: 18px; font-size: 13.5px; }
.sc-analytics .an-insight.good { background: #EAF7EF; border-color: #BFE6CD; border-left-color: var(--an-good); }
.sc-analytics .an-insight.bad { background: #FBEAE8; border-color: #F1C9C4; border-left-color: var(--an-bad); }
.sc-analytics .an-insight .ii { font-size: 18px; line-height: 1.2; }
.sc-analytics .an-insight b { color: var(--an-ink); }

/* Grid + cards */
.sc-analytics .an-grid { display: grid; gap: 16px; }
.sc-analytics .an-kpis { grid-template-columns: repeat(4, 1fr); }
.sc-analytics .an-cols-2 { grid-template-columns: 2fr 1fr; }
.sc-analytics .an-cols-2e { grid-template-columns: 1fr 1fr; }
.sc-analytics .an-cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .sc-analytics .an-kpis { grid-template-columns: repeat(2, 1fr); }
    .sc-analytics .an-cols-2, .sc-analytics .an-cols-2e, .sc-analytics .an-cols-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sc-analytics .an-kpis { grid-template-columns: 1fr; } }
.sc-analytics .an-mb { margin-bottom: 16px; }

.sc-analytics .an-card { background: var(--an-card); border: 1px solid var(--an-grid); border-radius: var(--an-radius);
    box-shadow: var(--an-shadow); padding: 16px 18px; }
.sc-analytics .an-card h3 { margin: 0 0 2px; font-size: 14px; color: var(--an-ink); font-weight: 600; }
.sc-analytics .an-card .csub { color: var(--an-muted); font-size: 12px; margin: 0 0 10px; }

/* Cards converted to the shared .sc-card/.sc-card-header/.sc-card-body convention (detail-pages.css)
   still use the prototype's .csub subtitle / .note / table styles inside their body — extend the
   scope so those keep working without an .an-card ancestor. */
.sc-analytics .sc-card .csub { color: var(--an-muted); font-size: 12px; margin: 0 0 10px; }

/* KPI card */
.sc-analytics .an-kpi { position: relative; overflow: hidden; }
.sc-analytics .an-kpi .label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--an-muted); }
.sc-analytics .an-kpi .val { font-size: 29px; font-weight: 750; margin: 6px 0 2px; letter-spacing: -.5px; color: var(--an-ink); }
.sc-analytics .an-kpi .delta { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.sc-analytics .an-kpi .delta.up { color: var(--an-good); }
.sc-analytics .an-kpi .delta.down { color: var(--an-bad); }
.sc-analytics .an-kpi .delta.warn { color: var(--an-watch); }
.sc-analytics .an-kpi .delta.flat { color: var(--an-muted); }
.sc-analytics .an-kpi .spark { position: absolute; right: 8px; bottom: 6px; width: 96px; height: 40px; opacity: .85; }
.sc-analytics .an-kpi .foot { font-size: 11px; color: var(--an-muted); margin-top: 6px; }

/* status chips */
.sc-analytics .an-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.sc-analytics .an-chip.g { background: #E7F5EC; color: var(--an-good); }
.sc-analytics .an-chip.w { background: #FCF3E1; color: #9a6b00; }
.sc-analytics .an-chip.b { background: #FBEAE8; color: var(--an-bad); }
.sc-analytics .an-chip.i { background: #E9F1FA; color: var(--an-brand); }

/* Tables */
.sc-analytics table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sc-analytics th { text-align: left; color: var(--an-muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .3px; padding: 8px 6px; border-bottom: 1px solid var(--an-grid); }
.sc-analytics td { padding: 9px 6px; border-bottom: 1px solid #F1F4F8; vertical-align: middle; color: var(--an-ink); }
.sc-analytics tr:last-child td { border-bottom: none; }
.sc-analytics .abc { display: inline-block; width: 22px; height: 22px; border-radius: 6px; text-align: center; line-height: 22px;
    font-size: 11px; font-weight: 700; margin-right: 3px; }
.sc-analytics .abc.a { background: #FBEAE8; color: var(--an-bad); }
.sc-analytics .abc.b { background: #FCF3E1; color: #9a6b00; }
.sc-analytics .abc.c { background: #E7F5EC; color: var(--an-good); }
.sc-analytics .abc.n { background: #EEF1F5; color: #aab2bd; }
.sc-analytics .bar-cell { background: #EEF3F8; border-radius: 6px; height: 8px; position: relative; min-width: 60px; }
.sc-analytics .bar-cell > i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; background: var(--an-brand-light); }

.sc-analytics .listrow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #F1F4F8; font-size: 13px; }
.sc-analytics .listrow:last-child { border-bottom: none; }
.sc-analytics .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sc-analytics .streak { display: flex; gap: 5px; margin-top: 8px; }
.sc-analytics .streak i { width: 15px; height: 15px; border-radius: 4px; background: var(--an-good); opacity: .9; }
.sc-analytics .streak i.off { background: #E2E8F0; }
.sc-analytics .note { font-size: 11.5px; color: var(--an-muted); margin-top: 4px; }
.sc-analytics .an-tag { font-size: 10px; font-weight: 700; letter-spacing: .4px; padding: 2px 7px; border-radius: 5px;
    background: #EDF1F6; color: var(--an-brand-light); text-transform: uppercase; }
.sc-analytics .an-tag.lead { background: #E9F1FA; color: var(--an-brand); }
.sc-analytics .an-tag.lag { background: #F1EFEA; color: #8a7a52; }

/* Dark theme: keep the app coherent when a *-dark theme is active. */
:root[data-theme$="-dark"] .sc-analytics,
[data-theme$="-dark"] .sc-analytics {
    --an-ink: #E6EAF0; --an-body: #B3BCC9; --an-muted: #8A94A3;
    --an-grid: #2C3543; --an-surface: #161B22; --an-card: #1C222B;
    --an-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.28);
}
[data-theme$="-dark"] .sc-analytics .an-badge { background: #22303f; }
[data-theme$="-dark"] .sc-analytics .an-insight { background: #2a2410; border-color: #4a3f1c; }
[data-theme$="-dark"] .sc-analytics .an-insight.good { background: #16311f; border-color: #285138; }
[data-theme$="-dark"] .sc-analytics .an-insight.bad { background: #331a17; border-color: #5a2c26; }
[data-theme$="-dark"] .sc-analytics td { border-bottom-color: #232c38; }