/* ============================================================
   UNIFY LAYER — single consistent visual language across every tab
   - Same filter strip on Cohort / Students / Interventions
   - Same card style (white, 1px #E5E7EB, 10px radius, no shadow)
   - Same type system (Inter for UI, Fraunces for h2/h3 only)
   - Single navy accent (#004272), status colors only for severity
   - Pebble tabbar kept as the primary nav (navy ribbon)
   ============================================================ */

/* --- Reset variables to one source of truth -------------------- */
html {
  --u-paper:    #FFFFFF;
  --u-canvas:   #F7F8F9;
  --u-ink:      #0F172A;
  --u-ink-2:    #1E293B;
  --u-mid:      #475569;
  --u-soft:     #64748B;
  --u-faint:    #94A3B8;
  --u-rule:     #E2E8F0;
  --u-rule-2:   #EEF2F6;
  --u-navy:     #004272;
  --u-navy-2:   #003258;
  --u-navy-tint:#E6EEF5;
  --u-amber:    #B45309;
  --u-amber-tint:#FEF3C7;
  --u-red:      #B91C1C;
  --u-red-tint: #FEE2E2;
  --u-green:    #15803D;
  --u-green-tint:#DCFCE7;
  --u-radius:   10px;
  --u-radius-sm:8px;
  --u-radius-pill: 999px;
  --u-shadow:   none;
  --u-pad:      1.25rem;
}

/* --- Body & canvas -------------------------------------------- */
body {
  background: #FAFBFC !important;
  color: var(--u-ink) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* --- Headings (Fraunces serif only at section level) ---------- */
.dash-section-title,
.widget h3,
.charts-section h3,
.section-card h3,
.sx-page-title,
.ivx-pulse-count-n {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--u-ink) !important;
  font-style: normal !important;
}
.dash-section-title { font-size: 1.25rem !important; line-height: 1.3 !important; margin-bottom: .25rem !important; }
.widget h3, .section-card h3 { font-size: 1rem !important; line-height: 1.3 !important; }

.dash-section-desc,
.chart-desc {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-size: .875rem !important;
  color: var(--u-mid) !important;
  line-height: 1.5 !important;
}

/* Section-number eyebrow — quiet mono */
.dash-section-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: .7rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--u-soft) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: .5rem !important;
  display: block !important;
}

/* Section dividers — single quiet hairline */
.dash-section {
  border-top: 1px solid var(--u-rule) !important;
  padding-top: 1.5rem !important;
  margin-top: 2rem !important;
}
.dash-section:first-child { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; }

/* --- TABBAR (the navy ribbon you liked) ----------------------- */
.pebble-tabbar {
  background: #004272 !important;
  border-bottom: 1px solid #003258 !important;
}
.pebble-tab {
  background: transparent !important;
  color: rgba(255,255,255,.72) !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: .9375rem !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  padding: .95rem 1.4rem !important;
  margin: 0 !important;
  text-transform: none !important;
  transition: color .15s, border-color .15s;
}
.pebble-tab:hover {
  background: transparent !important;
  color: #fff !important;
}
.pebble-tab.active {
  background: transparent !important;
  color: #fff !important;
  border-bottom-color: #F4C95D !important;
  font-weight: 600 !important;
}
.pebble-tab.active::after { display: none !important; }

/* Tab logo and right cluster — ensure they stay legible */
.pebble-tabbar-logo img { filter: brightness(0) invert(1) !important; }
.pebble-tabbar .pebble-brand-motto { color: rgba(255,255,255,.72) !important; }
.pebble-tabbar .pebble-brand-motto strong { color: #fff !important; }

/* --- UNIVERSAL FILTER STRIP ----------------------------------- *
   Applies the SAME look to:
   - .scope-bar (Cohort tab)
   - .sx-search + .sx-filter-btn area (Students)
   - .ivx-search + .ivx-filters (Interventions)
*/
.scope-bar,
#studentsTab .sx-search-row,
.ivx-controls,
.ivx-pulse + * .ivx-controls,
.ivx-root .ivx-controls {
  background: #FFFFFF !important;
  border: 1px solid var(--u-rule) !important;
  border-radius: var(--u-radius) !important;
  padding: .75rem 1rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .75rem 1rem !important;
  margin-bottom: 1.25rem !important;
  box-shadow: none !important;
}

/* Inputs across all three filter strips */
.scope-bar select,
.scope-control select,
.sx-search input,
#studentSearch,
.ivx-search input,
.ivx-filters select,
input[type="text"]:not(.no-unify),
input[type="search"]:not(.no-unify),
select:not(.no-unify) {
  font-family: 'Inter', sans-serif !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: var(--u-ink) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--u-rule) !important;
  border-radius: var(--u-radius-sm) !important;
  padding: .5rem .75rem !important;
  box-shadow: none !important;
  outline: none !important;
}
input[type="text"]:focus, input[type="search"]:focus, select:focus,
.scope-bar select:focus, .sx-search input:focus, .ivx-search input:focus,
.ivx-filters select:focus {
  border-color: var(--u-navy) !important;
  box-shadow: 0 0 0 3px rgba(0,66,114,.12) !important;
}

/* Labels on filter strip */
.scope-control label,
.scope-bar label {
  font-family: 'Inter', sans-serif !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--u-soft) !important;
  margin-right: .35rem !important;
  display: inline-flex !important;
}
.scope-control {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
}

/* Search wrapper across tabs */
.sx-search,
.ivx-search {
  background: #F7F8F9 !important;
  border: 1px solid var(--u-rule) !important;
  border-radius: var(--u-radius-sm) !important;
  padding: 0 .75rem !important;
  flex: 1 1 240px !important;
  min-width: 220px !important;
}
.sx-search input,
.ivx-search input {
  border: none !important;
  background: transparent !important;
  flex: 1 !important;
  padding: .55rem 0 !important;
}
.sx-search:focus-within,
.ivx-search:focus-within {
  border-color: var(--u-navy) !important;
  box-shadow: 0 0 0 3px rgba(0,66,114,.12) !important;
  background: #fff !important;
}

/* Filter button (Students) — match the same hairline aesthetic */
.sx-filter-btn {
  background: #FFFFFF !important;
  border: 1px solid var(--u-rule) !important;
  border-radius: var(--u-radius-sm) !important;
  padding: .55rem .9rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: var(--u-ink) !important;
}
.sx-filter-btn:hover { border-color: var(--u-navy) !important; color: var(--u-navy) !important; }
.sx-filter-btn.has-active { background: var(--u-navy-tint) !important; border-color: var(--u-navy) !important; color: var(--u-navy) !important; }
.sx-filter-count { background: var(--u-navy) !important; color: #fff !important; }

/* --- CARDS (everything looks like one card system) ------------ */
.widget,
.peb-wb-hero-stat,
.peb-wb-card,
.peb-wb-flagged,
.peb-bench-card,
.peb-trend-card,
.peb-yr-signal,
.peb-yr-card,
.section-card,
.ivx-pulse,
#studentsTab .sx-card,
#studentsTab .sx-pupil-card,
.sx-pupil-card {
  background: #FFFFFF !important;
  border: 1px solid var(--u-rule) !important;
  border-radius: var(--u-radius) !important;
  box-shadow: none !important;
}

.widget { padding: 1.25rem !important; }

/* --- BUTTONS -------------------------------------------------- */
button:not(.pebble-tab):not(.sx-filter-btn):not(.ivx-pulse-count):not([class*="-tab"]):not(.icon-btn) {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  border-radius: var(--u-radius-sm) !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* Primary action — single navy */
.generate-report-btn,
.btn-primary,
button.primary,
.export-btn {
  background: var(--u-navy) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--u-navy) !important;
}
.generate-report-btn:hover,
.btn-primary:hover,
button.primary:hover,
.export-btn:hover {
  background: var(--u-navy-2) !important;
  border-color: var(--u-navy-2) !important;
}

/* --- INTERVENTIONS PULSE BAR — match same surface ------------- */
.ivx-pulse {
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1.25rem !important;
}
.ivx-pulse-count-n {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 2.2rem !important;
  color: var(--u-ink) !important;
}
.ivx-pulse-count-l {
  font-family: 'Inter', sans-serif !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--u-soft) !important;
}

/* Numbers in widgets — tabular Inter */
.widget [class*="metric"],
.widget [class*="value"],
.widget [class*="number"],
.widget [class*="big"],
.widget [class*="stat"] {
  font-family: 'Inter', sans-serif !important;
  font-feature-settings: 'tnum', 'cv11' !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--u-ink) !important;
}

/* --- STATUS COLORS only for severity ------------------------- */
.peb-wb-flagged, .peb-yr-signal[data-tone="warm"],
[data-tone="amber"], [data-severity="amber"] { --tone-fg: var(--u-amber); }
[data-tone="red"], [data-severity="red"] { --tone-fg: var(--u-red); }
[data-tone="green"], [data-severity="green"] { --tone-fg: var(--u-green); }

/* --- SUBTLE EVERYTHING --------------------------------------- *
 * Kill any remaining shadow-y / glow-y residue */
.widget, .scope-bar, .ivx-pulse, .sx-pupil-card,
.peb-wb-card, .peb-bench-card, .peb-trend-card,
.peb-yr-card, .peb-yr-signal, .peb-wb-flagged {
  box-shadow: none !important;
  filter: none !important;
}

/* --- Snapshot / subtitle pill --------------------------------- */
.pebble-subtitle-band, .pebble-subtitle-pill, [class*="snapshot"] {
  background: var(--u-navy-tint) !important;
  border: 1px solid rgba(0,66,114,.15) !important;
  border-radius: var(--u-radius-pill) !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: .8125rem !important;
  color: var(--u-navy) !important;
  padding: .375rem .875rem !important;
}

/* --- Avatars consistent --------------------------------------- */
.avatar, .sx-avatar, .ivx-avatar, [class*="-avatar"] {
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

/* --- Container width parity ----------------------------------- *
 * Ensure all three tabs use the same content max-width */
#dashboardTab > *, #studentsTab > *, #interventionsTab > * { 
  max-width: 1400px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Print --------------------------------------------------- */
@media print {
  .pebble-tabbar { background: #fff !important; color: #000 !important; }
}