/* Design tokens and component recipes - see design_handoff_bais_medrash_sis
   in the repo root for the full source spec these were transcribed from.
   Every screen's template extends core/base.html and relies on these
   classes rather than writing its own inline CSS, so the look stays
   consistent and a future visual change is a one-file edit. */

:root {
    --page-bg: #f4f5f7;
    --text: #14181f;
    --text-muted: #5c6675;
    --text-dim: #8d97a5;
    --text-faint: #aab3bf;
    --card-bg: #fff;
    --card-border: #dde2e9;
    --divider: #eaeef3;
    --row-divider: #f2f5f8;
    --table-header-bg: #f8fafc;
    --input-bg: #fbfcfd;
    --input-border: #ccd3dd;
    --nav-bg: #1e2a3d;
    --nav-text-active: #eef1f6;
    --nav-text-inactive: #b6c1d2;
    --nav-underline: #6f9ce8;
    --nav-pill-border: #3c4c66;
    --primary: #2b5cab;
    --primary-hover: #24509a;
    --row-selected: #eaf0fa;
    --row-checked: #f5f8fd;
    --cell-focused: #e7effb;
    --warning-bg: #fdf3e8;
    --warning-border: #e8c99b;
    --warning-text: #8a5a12;
    --warning-accent: #c98a2b;
    --info-bg: #eef2f8;
    --info-border: #dbe3ee;
    --info-text: #3c4655;
    --success-bg: #eef7ed;
    --success-border: #9fc39c;
    --success-text: #2f6b31;
    --badge-bg: #f4f7fc;
    --badge-border: #c3cedd;
    --badge-text: #3c5b8c;
    --preview-desk: #eef0f3;
    --modal-scrim: rgba(20, 24, 31, 0.45);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 13.5px;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: #cfdcf3; }

.mono { font-family: 'IBM Plex Mono', monospace; }

/* Nav bar */
.nav {
    background: var(--nav-bg);
    color: var(--nav-text-active);
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 30px;
    height: 58px;
    flex: none;
    position: sticky;
    top: 0;
    z-index: 20;
}
.nav-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-brand img { height: 40px; width: 40px; object-fit: contain; border-radius: 50%; background: #fff; }
.nav-brand span { font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--nav-text-active); }
.nav-items { display: flex; gap: 6px; font-size: 13.5px; align-items: center; height: 100%; }
.nav-item {
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--nav-text-inactive) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.nav-item.active {
    color: var(--nav-text-active) !important;
    box-shadow: inset 0 -3px 0 var(--nav-underline);
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--nav-text-inactive); }
.nav-right a { color: var(--nav-text-inactive) !important; }
/* pill-select-wrap gives the year/app <select>s the SAME hand-drawn
   chevron the user-menu button already uses (rather than each browser's
   own native select arrow, which varies in size/color/position and
   would never actually match a custom button's marker) - appearance:none
   strips the native arrow, padding-right on the select clears room for
   the wrapper's own ::after chevron, positioned/sized/colored identically
   to .user-menu-toggle .chevron below so all three dropdown triggers
   share one indicator. */
.pill-select-wrap { position: relative; display: inline-flex; }
.pill-select-wrap::after {
    content: "\25BE";
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: var(--nav-text-active); pointer-events: none;
}
.year-pill, .app-pill {
    border: 1px solid var(--nav-pill-border);
    border-radius: 4px;
    padding: 5px 22px 5px 10px;
    background: transparent;
    color: var(--nav-text-active);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.year-pill option, .app-pill option { color: var(--text); background: var(--card-bg); }

.user-menu { position: relative; }
.user-menu-toggle {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--nav-text-inactive);
    display: flex; align-items: center; gap: 5px;
}
.user-menu-toggle .chevron { font-size: 10px; color: var(--nav-text-active); }
.user-menu-dropdown {
    display: none; position: absolute; top: 100%; right: 0; margin-top: 10px;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px;
    box-shadow: 0 6px 18px rgba(20, 24, 31, 0.14); min-width: 170px; overflow: hidden; z-index: 30;
}
.user-menu-dropdown.open { display: block; }
.user-menu-dropdown a, .user-menu-dropdown button {
    display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 9px 14px;
    font-size: 13px; font-family: inherit; color: var(--text) !important; background: none; border: none;
    cursor: pointer; text-decoration: none !important;
}
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: var(--table-header-bg); }
.user-menu-dropdown form { margin: 0; }
.user-menu-dropdown .divider { height: 1px; background: var(--divider); margin: 4px 0; }

/* Messages */
.messages { list-style: none; margin: 0; padding: 0; }
.messages .message {
    padding: 10px 32px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--divider);
}
.messages .message-error { background: var(--warning-bg); color: var(--warning-text); }
.messages .message-warning { background: var(--warning-bg); color: var(--warning-text); }
.messages .message-success { background: var(--success-bg); color: var(--success-text); }

/* Screen layout */
.screen { padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 20px; }
.screen-header { display: flex; justify-content: space-between; align-items: center; }
.screen-title { font-size: 24px; font-weight: 600; }
.screen-subtitle { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }

/* Cards */
.card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px; padding: 18px 20px; }
.card-heading { font-size: 15px; font-weight: 600; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.stat-label { font-size: 12.5px; color: var(--text-muted); }
.stat-number { font-size: 28px; font-weight: 600; line-height: 1; }
.stat-number .stat-of { font-size: 15px; font-weight: 400; color: var(--text-muted); }

.task-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.task-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    color: inherit;
}
.task-card:hover { border-color: #b9c6d8; text-decoration: none; }
.task-card .task-title { font-size: 15px; font-weight: 600; color: var(--text); }
.task-card .task-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.task-card .task-action { font-size: 13px; color: var(--primary); font-weight: 500; margin-top: 4px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    font-family: inherit;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); text-decoration: none; }
.btn-primary:disabled { background: #eef1f5; color: var(--text-faint); cursor: not-allowed; }
.btn-secondary { background: #fff; border: 1px solid var(--input-border); color: var(--text); font-weight: 400; padding: 9px 16px; }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* Pills / segmented toggle */
.pill-group { display: flex; gap: 6px; }
.pill {
    border-radius: 5px;
    padding: 6px 11px;
    font-size: 12.5px;
    border: 1px solid var(--input-border);
    background: #fff;
    color: var(--info-text);
    cursor: pointer;
    text-decoration: none !important;
}
.pill.selected { border: 1px solid var(--primary); background: var(--row-selected); color: var(--primary); }
.pill-dashed {
    border: 1px dashed var(--badge-border);
    background: #fbfcfe;
    color: var(--primary);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
}
.pill-dashed:hover { border-color: var(--primary); background: #f6f9fe; text-decoration: none; }

/* Checkbox / radio (native inputs styled minimally to match) */
input[type="checkbox"].styled-checkbox { width: 16px; height: 16px; accent-color: var(--primary); }
input[type="radio"].styled-radio { width: 14px; height: 14px; accent-color: var(--primary); }

.radio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 6px;
    border: 1px solid #e4e9f0;
    background: #fff;
    cursor: pointer;
}
.radio-row.selected { border: 1px solid var(--primary); background: var(--row-checked); }

/* Badges */
.badge { border-radius: 4px; padding: 2px 8px; font-size: 11.5px; font-family: 'IBM Plex Mono', monospace; }
.badge-success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); }
.badge-neutral { background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--badge-text); }
.badge-muted { background: var(--table-header-bg); border: 1px solid var(--row-divider); color: var(--text-faint); }
.badge-warning { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text); }

/* Raw Data column-kind tags + filter chips (transcribed from design
   handoff 2/high school/handoff_hs_reports/screens/HS Screens.dc.html's
   own Raw Data screen) - literal spec colors, distinct from .badge-* above
   since neither an existing token nor .badge's own sizing matched closely
   enough to reuse without visibly drifting from that source. */
.tag-derived {
    display: inline-block;
    border: 1px solid #d9c4a0;
    background: #fdf6e9;
    color: #8a6b28;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tag-raw {
    display: inline-block;
    border: 1px solid var(--input-border);
    background: #f3f5f8;
    color: var(--text-muted);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eaf1fb;
    border: 1px solid #c3d5f0;
    color: #24508f;
    border-radius: 20px;
    padding: 4px 8px 4px 10px;
    font-size: 12px;
}
.filter-chip .remove { cursor: pointer; color: #5c7dab; font-size: 13px; line-height: 1; text-decoration: none; }
.filter-chip .remove:hover { text-decoration: none; }

/* AI Query "tally" result (a ranked list with a magnitude bar, for a
   group_by_field result with no full detail - e.g. "which teachers had
   the most attendance concerns") and "full detail" grouped result's own
   match-count badge (transcribed from design handoff 2/ai query/
   handoff_hs_reports's own AI Query screen). The badge reuses
   .filter-chip's own literal colors - already an exact match here - in
   a tighter chip shape (square corners, no remove icon) rather than that
   pill's rounded one. The bar's lighter "rest" shade doesn't match any
   existing token closely enough to reuse without visibly drifting from
   the mockup. */
.badge-count {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #24508f;
    background: #eaf1fb;
    border: 1px solid #c3d5f0;
    border-radius: 3px;
    padding: 1px 7px;
}
.tally-bar-track { background: var(--divider); border-radius: 2px; }
.tally-bar-top { background: var(--primary); border-radius: 2px; }
.tally-bar-rest { background: #8aa9d8; border-radius: 2px; }

/* Banners / panels */
.banner-warning {
    background: #fff;
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--warning-accent);
    border-radius: 6px;
    padding: 14px 18px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.banner-warning .lead { font-weight: 600; }
.banner-warning .explain { color: var(--text-muted); }
.banner-warning .action { margin-left: auto; color: var(--primary); font-weight: 500; cursor: pointer; white-space: nowrap; }

.panel-info {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--info-text);
    line-height: 1.6;
}

/* Tables */
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table thead th {
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--divider);
    text-align: left;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.data-table tbody td { padding: 11px 18px; border-bottom: 1px solid var(--row-divider); }
.data-table tbody tr.selected { background: var(--row-selected); }

.preview-desk { background: var(--preview-desk); border-radius: 6px; padding: 20px; display: flex; justify-content: center; }
.preview-paper { background: #fff; box-shadow: 0 2px 14px rgba(20, 24, 31, 0.14); }

.divider-v { width: 1px; height: 18px; background: var(--divider); }

.footnote { font-size: 12px; color: var(--text-dim); }
.small-note { font-size: 12.5px; color: var(--text-muted); }