/* ============================================================
   ALS Assessment Programme — shared design system
   Refreshed 2026-05-10 to match alsschools.edu.sa brand:
   royal navy #004B8D as primary, lighter cyan-blue #61A9DD as
   secondary, pale tint #ECF7FF as background accents. Codec Pro
   is the school's paid display face; Inter is the closest free
   substitute (modern geometric humanist sans).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand — sourced directly from alsschools.edu.sa */
  --als-primary: #004B8D;          /* school royal navy */
  --als-primary-dark: #003866;
  --als-primary-light: #61A9DD;    /* lighter cyan-blue accent */
  --als-primary-tint: #ECF7FF;     /* pale-blue surface */

  --als-accent: #61A9DD;
  --als-success: #15803d;
  --als-success-tint: #dcfce7;
  --als-warning: #d4a017;
  --als-warning-tint: #fff8e1;
  --als-danger: #dc2626;
  --als-danger-tint: #fef2f2;
  --als-info: #61A9DD;
  --als-info-tint: #ECF7FF;

  /* Surfaces */
  --als-bg: #f7f9fc;
  --als-surface: #ffffff;
  --als-surface-2: #f9fafc;
  --als-border: #e5e7eb;
  --als-border-strong: #d0d4dd;

  /* Text — match alsschools.edu.sa text greys */
  --als-text: #1a1d2e;
  --als-text-2: #54595F;            /* matches school site body text */
  --als-text-muted: #6A757C;        /* matches school site muted */
  --als-text-faint: #9ca3af;

  /* Spacing */
  --als-radius: 8px;
  --als-radius-sm: 4px;
  --als-shadow-sm: 0 1px 2px rgba(0, 75, 141, 0.06);
  --als-shadow-md: 0 4px 14px rgba(0, 75, 141, 0.10);
  --als-shadow-lg: 0 20px 60px rgba(0, 75, 141, 0.18);
}

/* ----- Reset / base ----- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--als-text);
  background: var(--als-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
/* Reserve space for the fixed .als-header (72px tall on desktop) ONLY on
   pages that actually have one. The :has() selector skips the login page
   and any other full-screen layouts that don't render the unified header. */
body:has(.als-header) { padding-top: 72px; }
a { color: var(--als-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- Header bar (unified across all custom pages) -----
   Refreshed 2026-05-10 take 2: navy gradient background, white text,
   white-chip logo, translucent sign-out button. Inspired by the
   institutional-portal aesthetic of "Nurse Station" reference. */
.als-header {
  background: linear-gradient(135deg,
    var(--als-primary-dark) 0%,
    var(--als-primary) 55%,
    #00609a 100%);
  border-bottom: none;
  padding: 0 28px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
  /* Fixed (not sticky) so the header stays pinned even when an ancestor
     element clips overflow or starts a new containing block. body padding
     above reserves the 72px so first-render content doesn't slide under.
     !important is defensive — nothing else should be able to unfix this. */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 18px rgba(0, 56, 102, 0.35);
  color: #ffffff;
}
/* Cyan accent stripe along the BOTTOM of the navy header — sits at the
   seam where header meets page content; reads as a subtle highlight
   ribbon rather than an ordinary border. */
.als-header::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(97, 169, 221, 0.55) 25%,
    rgba(97, 169, 221, 0.9) 50%,
    rgba(97, 169, 221, 0.55) 75%,
    transparent 100%);
  pointer-events: none;
}

.als-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  height: 100%;
  padding-right: 24px;
  position: relative;
  flex-shrink: 0;
  color: #ffffff;
}
.als-brand:hover { text-decoration: none; color: #ffffff; }
/* Vertical separator between the brand lockup and the nav. */
.als-brand::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.18);
}
/* Logo as a white rounded chip — the navy crest sits inside, popping
   crisply against the navy header background. */
.als-brand img {
  height: 48px;
  width: 48px;
  background: #ffffff;
  padding: 4px;
  border-radius: 11px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  object-fit: contain;
  transition: transform 0.2s, box-shadow 0.2s;
}
.als-brand:hover img {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
}
.als-brand .brand-text { line-height: 1.2; }
.als-brand .brand-name {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.1px;
}
.als-brand .brand-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-top: 4px;
  font-weight: 700;
}

.als-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  flex: 1;
}
.als-nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 18px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
  text-decoration: none;
  position: relative;
  transition: color 0.15s, background-color 0.15s;
  border-radius: 0;
  white-space: nowrap;        /* prevents "Per-Student" or "Data Quality" wrapping mid-label */
}
.als-nav a:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.08);
}
.als-nav a.active {
  color: #ffffff;
  font-weight: 800;
  background-color: rgba(255, 255, 255, 0.10);
}
/* Glowing cyan pill underline on the active nav item — sits below the
   bottom cyan stripe and pops a brighter, glowing accent on top of it. */
.als-nav a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  background: var(--als-primary-light);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 12px rgba(97, 169, 221, 0.75);
  z-index: 1;
}

/* === Nav dropdown toggles (Decisions ▾ / Admin ▾) ===
   Override the default als-nav-toggle styles from als-session.js's
   runtime stylesheet so they match the white-on-navy treatment of the
   regular nav links. Higher specificity (.als-header > … > .als-nav-toggle)
   beats the single-class rule injected at runtime. */
.als-header .als-nav-group {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.als-header .als-nav-toggle {
  background: transparent;
  border: 0;
  height: 100%;
  padding: 0 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 0;
  position: relative;
  transition: color 0.15s, background-color 0.15s;
  white-space: nowrap;        /* keep "Decisions ▾" / "Admin ▾" on one line */
}
.als-header .als-nav-toggle:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}
.als-header .als-nav-toggle.active {
  color: #ffffff;
  font-weight: 800;
  background-color: rgba(255, 255, 255, 0.10);
  border-bottom: none;
}
.als-header .als-nav-toggle.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 3px;
  background: var(--als-primary-light);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 12px rgba(97, 169, 221, 0.75);
  z-index: 1;
}
/* Dropdown caret — sits inside a tiny cyan-tinted pill so it reads
   unmistakably as a "more options here" affordance, not a stray glyph.
   Rotates 180° when the dropdown is open. */
.als-header .als-nav-toggle .caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  border-radius: 50%;
  background: rgba(97, 169, 221, 0.25);
  border: 1px solid rgba(97, 169, 221, 0.55);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  opacity: 1;
  transition: transform 150ms, background 150ms, border-color 150ms;
}
.als-header .als-nav-toggle:hover .caret {
  background: rgba(97, 169, 221, 0.45);
  border-color: rgba(97, 169, 221, 0.85);
}
.als-header .als-nav-group.open .als-nav-toggle .caret {
  transform: rotate(180deg);
  background: var(--als-primary-light);
  border-color: var(--als-primary-light);
}

.als-header-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-align: right;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
/* Belt-and-suspenders: every direct child of the meta strip stays on one
   line. Without this, "Signed in as", "Mostafa Afarra" and the page-label
   wrap to two lines whenever the strip gets squeezed by long nav items. */
.als-header-meta > * { white-space: nowrap; }
.als-header-meta strong { color: #ffffff; font-weight: 700; white-space: nowrap; }
.als-header-meta .als-header-page-label { white-space: nowrap; }
.als-header-meta .als-header-user,
.als-header-meta .als-header-user > * { white-space: nowrap; }
.als-signout {
  font-size: 12px;
  color: #ffffff;
  text-decoration: none;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.als-signout:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.20);
  text-decoration: none;
  transform: translateY(-1px);
}
.als-signout:active { transform: translateY(0); }

/* ----- Page layout ----- */
.als-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}
.als-page-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--als-primary);
  margin: 0 0 4px 0;
  letter-spacing: -0.3px;
}
.als-page-sub {
  font-size: 13px;
  color: var(--als-text-muted);
  margin: 0 0 24px 0;
  line-height: 1.55;
}
/* Default heading treatment for decision-card pages: any <h1> directly
   inside an .als-page or .als-card gets the navy bold treatment, so we
   don't have to retrofit class="als-page-title" on every existing page. */
.als-page > h1, .als-card > h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--als-primary);
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.als-page > h2, .als-card > h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--als-primary);
  margin: 0 0 12px 0;
  letter-spacing: -0.1px;
  line-height: 1.25;
}

/* ----- Cards ----- */
.als-card {
  background: var(--als-surface);
  border: 1px solid #e8eef5;
  border-radius: var(--als-radius);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 75, 141, 0.04);
}
.als-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.als-card h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--als-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.als-card .als-subtitle {
  font-size: 13px;
  color: var(--als-text-muted);
  margin: -4px 0 14px 0;
  line-height: 1.5;
}

/* ----- Stat cards (KPI-style on decision-card pages) -----
   Mirrors the .kpi-card treatment in css/dashboard.css so every page in
   the portal uses the same KPI language: navy→cyan gradient strip on
   top, refined typography, lifted hover. */
.als-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.als-stat {
  background: var(--als-surface);
  border: 1px solid #e8eef5;
  border-radius: var(--als-radius);
  padding: 22px 18px 18px;
  box-shadow: 0 1px 3px rgba(0, 75, 141, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.als-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--als-primary) 0%, var(--als-primary-light) 100%);
}
.als-stat:hover {
  transform: translateY(-2px);
  border-color: #c5d8eb;
  box-shadow: 0 8px 24px rgba(0, 75, 141, 0.12);
}
.als-stat .label {
  font-size: 11px;
  font-weight: 700;
  color: var(--als-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.als-stat .value {
  font-size: 28px;
  font-weight: 800;
  color: var(--als-primary);
  margin-top: 6px;
  line-height: 1.1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.als-stat .meta {
  font-size: 11px;
  color: var(--als-text-muted);
  margin-top: 8px;
  line-height: 1.4;
}

/* Same KPI treatment for the .map-grid > .stat pattern used by the
   mismatch / nafis / atl / predictions decision-card pages, which were
   built before .als-stat existed. (.sub is their equivalent of .meta.)
   Color overrides like `.value.type-a { color: #b91c1c }` still win here
   because the local <style> block appears AFTER this stylesheet in the
   <head>, so equal-specificity local rules take precedence. */
.map-grid .stat {
  background: var(--als-surface);
  border: 1px solid #e8eef5;
  border-radius: var(--als-radius);
  padding: 22px 18px 18px;
  box-shadow: 0 1px 3px rgba(0, 75, 141, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.map-grid .stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--als-primary) 0%, var(--als-primary-light) 100%);
}
.map-grid .stat:hover {
  transform: translateY(-2px);
  border-color: #c5d8eb;
  box-shadow: 0 8px 24px rgba(0, 75, 141, 0.12);
}
.map-grid .stat .label {
  font-size: 11px;
  font-weight: 700;
  color: var(--als-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.map-grid .stat .value {
  font-size: 28px;
  font-weight: 800;
  color: var(--als-primary);
  margin-top: 6px;
  line-height: 1.1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.map-grid .stat .sub {
  font-size: 11px;
  color: var(--als-text-muted);
  margin-top: 8px;
  line-height: 1.4;
}

/* ----- Pills / badges ----- */
.als-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.als-pill-success { background: var(--als-success-tint); color: var(--als-success); }
.als-pill-warning { background: var(--als-warning-tint); color: var(--als-warning); }
.als-pill-danger  { background: var(--als-danger-tint);  color: var(--als-danger); }
.als-pill-info    { background: var(--als-info-tint);    color: var(--als-info); }
.als-pill-neutral { background: #f3f4f6; color: var(--als-text-2); }

/* ----- "NEW" markers for changes shipped after a stakeholder review.
   Use the orange-red palette so the marker is unmistakable without colliding
   with the established red = critical / at-risk convention. Pair the badge
   with explicit text ("NEW · 17 May") so context is never ambiguous.        */
.als-badge-new {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: #e84a23;
  color: #fff;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(232, 74, 35, 0.25);
}
.als-badge-new::before {
  content: "\2728 ";  /* sparkle */
}
.als-callout-new {
  background: linear-gradient(90deg, rgba(232, 74, 35, 0.08), rgba(232, 74, 35, 0.02));
  border-left: 4px solid #e84a23;
  padding: 14px 18px;
  border-radius: 6px;
  margin: 16px 0;
}
.als-callout-new h4 {
  margin: 0 0 8px 0;
  color: #c43a13;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.als-callout-new ul {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.6;
}

/* ----- Tables ----- */
.als-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.als-table th {
  text-align: left;
  padding: 11px 12px;
  background: var(--als-primary-tint);
  color: var(--als-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  border-bottom: 2px solid var(--als-primary-light);
}
.als-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #eef1f5;
}
.als-table tr:hover td { background: var(--als-surface-2); }
.als-table tr:last-child td { border-bottom: none; }

/* ----- Banners ----- */
.als-banner {
  border-left: 4px solid;
  padding: 12px 16px;
  border-radius: var(--als-radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.55;
}
.als-banner-pdpl     { background: var(--als-warning-tint); border-color: var(--als-warning); color: #5a4a00; }
.als-banner-success  { background: var(--als-success-tint); border-color: var(--als-success); color: #1d5e36; }
.als-banner-info     { background: var(--als-info-tint);    border-color: var(--als-info);    color: #2a4a7a; }
.als-banner-danger   { background: var(--als-danger-tint);  border-color: var(--als-danger);  color: #8b1a1a; }

/* ----- Buttons ----- */
.als-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  letter-spacing: 0.1px;
  font-family: inherit;
}
.als-btn-primary {
  background: var(--als-primary);
  color: white;
  box-shadow: 0 2px 6px rgba(0, 75, 141, 0.2);
}
.als-btn-primary:hover {
  background: var(--als-primary-dark);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 75, 141, 0.28);
}
.als-btn-primary:active { transform: translateY(0); }
.als-btn-secondary {
  background: var(--als-surface);
  border-color: var(--als-border-strong);
  color: var(--als-primary);
}
.als-btn-secondary:hover {
  background: var(--als-primary-tint);
  border-color: var(--als-primary-light);
  text-decoration: none;
}

/* ----- Back / nav button (matches the "Review unmatched →" primary CTA
   style: solid navy, white bold text, arrow on the right). ----- */
.als-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--als-primary);
  border: 1px solid var(--als-primary);
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0, 75, 141, 0.18);
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  margin-bottom: 16px;
}
.als-back-btn::after {
  content: "→";
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
  transition: transform 0.15s;
}
.als-back-btn:hover {
  background: var(--als-primary-dark);
  border-color: var(--als-primary-dark);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 75, 141, 0.28);
  transform: translateY(-1px);
}
.als-back-btn:hover::after { transform: translateX(3px); }
.als-back-btn:active { transform: translateY(0); }
.als-btn-secondary:hover { background: var(--als-surface-2); }

/* ----- Login overlay (consistent across pages) ----- */
.als-login-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, var(--als-primary) 0%, var(--als-primary-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.als-login-card {
  background: white;
  padding: 40px;
  border-radius: 12px;
  width: 420px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.als-login-card img { height: 64px; width: auto; margin-bottom: 12px; }
.als-login-card h2 { margin: 4px 0; color: var(--als-primary); font-size: 20px; }
.als-login-card .sub { color: var(--als-text-muted); margin: 4px 0 24px 0; font-size: 13px; }
.als-login-card input {
  width: 100%; padding: 12px;
  border: 1px solid var(--als-border-strong);
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
  font-family: inherit;
}
.als-login-card input:focus { outline: none; border-color: var(--als-primary); }
.als-login-card .err { color: var(--als-danger); font-size: 12px; margin: 6px 0; height: 14px; }
.als-login-card button {
  width: 100%; padding: 12px;
  background: var(--als-primary);
  color: white; border: none;
  border-radius: 6px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; margin-top: 6px;
  transition: background 0.12s;
}
.als-login-card button:hover { background: var(--als-primary-dark); }

/* ----- Liam's filter bar — align Apply/Reset with the dropdowns, not the labels ----- */
.filter-bar { align-items: flex-end !important; }

/* ----- Responsive ----- */
/* Laptop / smaller-desktop range — between mobile (≤900) and full desktop
   (≥1601). Tighten the nav padding and shorten the meta strip so the
   header reliably fits on one row. Page label, "Signed in as" prefix and
   "(admin)" role suffix all hide here; only user name + Sign out remain
   on the right. We keep this range up to 1600px because at typical laptop
   widths (~1440-1500) the full meta overflows the viewport. */
@media (max-width: 1600px) and (min-width: 901px) {
  .als-header { padding: 0 16px; gap: 16px; }
  .als-nav a { padding: 0 12px; font-size: 13px; }
  .als-header .als-nav-toggle { padding: 0 12px; font-size: 13px; }
  /* Hide the verbose "Signed in as …" prefix; the user's name still
     shows so they know whose session is active. */
  .als-header-user span:first-child { display: none; }
  .als-header-user span:last-child { display: none; }   /* hides "(admin)" / role */
  .als-header-page-label { display: none; }              /* page-specific label */
  .als-signout { padding: 6px 12px; }
  .als-brand { padding-right: 16px; gap: 10px; }
  .als-brand img { height: 44px; width: 44px; padding: 3px; border-radius: 9px; }
  .als-brand .brand-name { font-size: 14px; }
  .als-brand .brand-sub { font-size: 9px; letter-spacing: 1.4px; }
}

@media (max-width: 900px) {
  .als-header { grid-template-columns: auto 1fr; height: auto; padding: 12px 16px; }
  .als-nav { grid-column: 1 / -1; overflow-x: auto; }
  .als-header-meta { display: none; }
  .als-page { padding: 16px; }
  /* Mobile header is taller because nav wraps to a second row. */
  body:has(.als-header) { padding-top: 120px; }
}

/* Template chips for Possible Drivers / Planned Actions textareas.
   Click a chip → a bulleted line is appended to the target textarea.
   Used on per-student annotation cards (students.html) and per-decision
   card annotation panels (als-session.js). */
.als-tpl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
}
.als-tpl-chip {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 3px 10px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.12s, border-color 0.12s;
}
.als-tpl-chip:hover { background: #fde68a; border-color: #f59e0b; }
.als-tpl-chip:active { background: #fcd34d; }
.als-tpl-chip[disabled] { opacity: 0.5; cursor: not-allowed; }
.als-tpl-hint {
  font-size: 10px;
  color: #92400e;
  font-style: italic;
  margin-left: 4px;
  align-self: center;
}

/* Aggregate-dashboard filter bar — ALS primary tint so the strip reads
   as branded "you can adjust these without disturbing the data below"
   chrome. Overrides Liam's neutral white default in dashboard.css. The
   Apply button gets the primary navy fill so the call-to-action stands
   out; Reset keeps the soft preset-btn look. */
.filter-bar {
  background: #ECF7FF;
  border-bottom: 1px solid #cfe5f5;
}
.filter-bar label {
  color: #004B8D;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.filter-bar select {
  border: 1px solid #cfe5f5;
  background: #fff;
  color: #004B8D;
}
.filter-bar select:hover { border-color: #61A9DD; }
.filter-bar select:focus {
  border-color: #004B8D;
  outline: 2px solid rgba(0, 75, 141, 0.20);
  outline-offset: 0;
}
.filter-bar .preset-btn {
  background: #fff;
  color: #004B8D;
  border-color: #cfe5f5;
}
.filter-bar .preset-btn:hover {
  background: #ECF7FF;
  border-color: #004B8D;
  color: #003a6e;
}
.filter-bar .preset-btn[onclick*="apply"] {
  background: #004B8D;
  color: #fff;
  border-color: #004B8D;
}
.filter-bar .preset-btn[onclick*="apply"]:hover {
  background: #003a6e;
  border-color: #003a6e;
  color: #fff;
}

/* MAP results section — global teal/cyan palette shared by the K-5
   quick-view modal (students.html) and the per-student PYP page
   (primary_student.html). Visually distinct from the amber PYP cards
   so the external standardised assessment reads as a different signal
   at a glance. */
.als-map-section {
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-left: 4px solid #0d9488;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.als-map-section-head {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #0e7490;
  margin-bottom: 10px;
}
.als-map-window {
  background: #fff;
  border: 1px solid #cffafe;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.als-map-window:last-child { margin-bottom: 0; }
.als-map-window-head {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #0e7490;
  margin-bottom: 6px;
}
.als-map-row {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  border-top: 1px solid #f0fdfa;
  font-size: 12px;
}
.als-map-row:first-child { border-top: none; }
.als-map-subject { font-weight: 700; color: #134e4a; }
.als-map-rit {
  background: #dbeafe;
  color: #1e40af;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  text-align: center;
  letter-spacing: 0.3px;
}
.als-map-cgi {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.als-map-cgi .pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  margin-right: 4px;
}
.als-map-cgi.exceeding .pill { background: #d1fae5; color: #065f46; }
.als-map-cgi.at        .pill { background: #e0f2fe; color: #075985; }
.als-map-cgi.slipping  .pill { background: #fef3c7; color: #92400e; }
.als-map-cgi.critical  .pill { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.als-map-cgi-note { color: #6b7280; font-weight: 500; }
.als-map-empty { color: #9ca3af; font-style: italic; font-size: 12px; }