/* National Assessment — design tokens (SIMS REDESIGN house style).
 * Matches the approved SIMS redesign: deep teal-green brand, right-side vertical
 * sidebar, hero banners, rounded cards, pill badges. Palette sampled from the
 * official redesign demo. Vanilla CSS custom properties; no framework.
 *
 * Direction: ships LTR now (default UI language = English, switchable FR/AR).
 * RTL is a FUTURE toggle — this file is RTL-READY via CSS logical properties
 * (margin-inline / padding-inline / inset-inline / text-align:start-end). When RTL
 * is enabled we set <html dir="rtl"> and the sidebar + layout mirror automatically.
 *
 * Assets are VENDORED (served by the app), NO runtime CDN — air-gap friendly. */

:root {
  /* Brand — deep teal-green (from redesign) */
  --primary:       #065248;   /* sidebar, primary buttons */
  --primary-dark:  #03473f;   /* hover / pressed */
  --primary-deep:  #0a5a4f;   /* hero banner */
  --primary-light: #e7f3f0;   /* soft green surfaces (hover/active/selected) */
  --primary-tint:  #f1f8f6;   /* very soft green wash */

  /* Accent (alerts / active marker) */
  --accent-red:    #c11b26;
  --accent-red-lt: #fdecec;

  /* Status */
  --ok:      #0a7d52;  --ok-light:   #e6f6ee;
  --warn:    #b26a00;  --warn-light: #fff4d6;
  --danger:  #c11b26;  --danger-light:#fdecec;

  /* Surfaces & text */
  --bg:       #f7f9f9;
  --card:     #ffffff;
  --text:     #16221f;
  --muted:    #5c6f6a;
  --border:   #e4ebe9;

  /* Shape */
  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 2px 12px rgba(6,82,72,.07);
  --shadow-lg: 0 12px 40px rgba(6,82,72,.14);

  /* Typography — modern system stack */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --sidebar-w: 268px;
  --topbar-h:  60px;
  --content-max: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
/* Direction driven by <html dir> (defaults ltr). RTL is a future toggle. */

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

/* ══ App layout: sidebar + main ══════════════════════════════════════════════
 * In LTR the sidebar sits on the LEFT (inline-start). Flipping <html dir="rtl">
 * moves it to the right (as in the redesign demo) with no other change. */
.na-app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

/* ── Sidebar (green) ─────────────────────────────────────────────────────── */
.na-side {
  background: linear-gradient(180deg, var(--primary-deep) 0%, var(--primary) 60%, var(--primary-dark) 100%);
  color: #fff; display: flex; flex-direction: column; padding: 18px 14px; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.na-side__brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; }
.na-side__brand img { width: 40px; height: 40px; border-radius: 9px; background: rgba(255,255,255,.12); padding: 3px; }
.na-side__brand .txt { font-size: .72rem; line-height: 1.35; color: #e7f3f0; font-weight: 600; }
.na-side__group { color: #9fc7bf; font-size: .68rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; padding: 14px 12px 6px; }
.na-nav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: #d6e8e4; font-weight: 600; font-size: .9rem; cursor: pointer; border: none; background: none;
  width: 100%; text-align: start; position: relative; }
.na-nav:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
.na-nav.active { background: rgba(255,255,255,.16); color: #fff; }
.na-nav.active::before { content: ''; position: absolute; inset-inline-start: -14px; top: 8px; bottom: 8px;
  width: 4px; background: var(--accent-red); border-radius: 0 3px 3px 0; }
.na-nav .ico { width: 18px; text-align: center; flex: none; }
.na-nav .soon { margin-inline-start: auto; font-size: .6rem; background: rgba(255,255,255,.18);
  padding: 1px 6px; border-radius: 6px; }

/* ── Top bar (in main column) ────────────────────────────────────────────── */
.na-main { display: flex; flex-direction: column; min-width: 0; }
.na-top { height: var(--topbar-h); background: var(--card); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 0 22px; position: sticky; top: 0; z-index: 20; }
.na-top .spacer { flex: 1; }
.na-user { display: flex; align-items: center; gap: 10px; position: relative; }
.na-user .who { text-align: end; }
.na-user .who .nm { font-weight: 700; font-size: .86rem; }
.na-user .who .em { color: var(--muted); font-size: .74rem; }
.na-user .av { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-light);
  color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700;
  border: 0; cursor: pointer; font-family: inherit; }
.na-usermenu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  min-width: 160px; background: var(--card, #fff); border: 1px solid var(--border, #e3e8e5);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; z-index: 50; }
.na-usermenu[hidden] { display: none; }
.na-usermenu__item { display: block; inline-size: 100%; text-align: start; border: 0; background: transparent;
  color: var(--text, #1a1a1a); font: 600 .82rem/1 var(--font-sans); padding: 9px 12px; border-radius: 7px;
  cursor: pointer; }
.na-usermenu__item:hover { background: var(--bg); color: var(--primary); }
.na-lang { display: flex; gap: 4px; background: var(--bg); border-radius: 999px; padding: 3px; }
.na-lang button { border: 0; background: transparent; color: var(--muted); font: 600 .72rem/1 var(--font-sans);
  padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.na-lang button.active { background: var(--primary); color: #fff; }

.na-content { padding: 22px; max-width: var(--content-max); width: 100%; }

/* ── Hero banner (green) ─────────────────────────────────────────────────── */
.na-hero { background: linear-gradient(120deg, var(--primary-deep), var(--primary));
  color: #fff; border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.na-hero h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.na-hero .sub { color: #cfe8e2; font-size: .82rem; margin-top: 4px; }

/* ── Cards / KPIs ────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.card-title { display: flex; align-items: center; gap: 9px; font-weight: 800; margin: 0 0 16px; font-size: 1.05rem; }
.card-title::before { content: ''; width: 4px; height: 16px; background: var(--primary); border-radius: 3px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); }
.kpi .n { font-size: 1.8rem; font-weight: 800; color: var(--primary); }
.kpi .l { color: var(--muted); font-size: .8rem; margin-top: 4px; }

/* ── Controls ────────────────────────────────────────────────────────────── */
.na-btn { display: inline-flex; align-items: center; gap: 7px; font: 700 .84rem/1 var(--font-sans);
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  background: var(--primary); color: #fff; }
.na-btn:hover { background: var(--primary-dark); text-decoration: none; }
.na-btn--ghost { background: #fff; color: var(--primary); border-color: var(--border); }
.na-btn--danger { background: var(--danger); }
.na-btn[disabled] { opacity: .5; cursor: not-allowed; }

.na-input, .na-select { font: inherit; font-size: .86rem; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #fff; color: var(--text); width: 100%; }
.na-input:focus, .na-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ── Table ───────────────────────────────────────────────────────────────── */
.na-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.na-tbl th, .na-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: start; }
.na-tbl th { background: var(--primary-tint); font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.na-tbl tr:hover td { background: var(--primary-light); }

/* Inline grading-sheet accordion (opens directly under its row) */
.na-tbl tr.dx-row-active td { background: var(--primary-tint); font-weight: 600; }
.na-tbl tr.dx-inline-row:hover td { background: transparent; }
.na-tbl td.dx-inline-cell { padding: 0; background: var(--surface, #fff); }
.dx-inline-box { padding: 14px 16px; border-inline-start: 3px solid var(--primary); background: var(--primary-light); }
.dx-inline-box:empty { display: none; }

/* ── Badges (pills) ──────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge--ok   { background: var(--ok-light);     color: var(--ok); }
.badge--warn { background: var(--warn-light);   color: #8a5a00; }
.badge--err  { background: var(--danger-light); color: var(--danger); }
.badge--info { background: var(--primary-light);color: var(--primary); }
.badge--auto   { background: var(--primary-light); color: var(--primary); }
.badge--manual { background: var(--warn-light);    color: #8a5a00; }

.na-note { background: var(--primary-light); border-inline-start: 4px solid var(--primary); padding: 11px 15px;
  border-radius: 9px; font-size: .82rem; color: var(--text); margin-top: 16px; }
.na-note--warn { background: #fff4e5; border-inline-start-color: #d98324; color: #7a4a12; }
/* Branch-mix warning (merged multi-branch legacy assignment) — advisory row highlight. */
.na-row--warn > td { background: var(--warn-light); }
.na-branch-mix { cursor: help; white-space: nowrap; }
.na-note--ok { background: #e8f6ec; border-inline-start-color: #2e8b57; color: #1c5c39; }
/* Post-upload row highlight: briefly draws the eye to the slot that was just updated
   so the admin sees the change in place (no jump to top of page). */
@keyframes efRowFlash { from { background: #fff6d6; } to { background: transparent; } }
.ef-row-flash > td { animation: efRowFlash 1.6s ease-out; }
.na-subcard.ef-row-flash { animation: efRowFlash 1.6s ease-out; border-radius: 9px; }

/* ── Button variants (P0 additions — tokens only, no raw hex) ────────────── */
.na-btn--sm { padding: 5px 10px; font-size: .74rem; }

/* ── Branch group view (A+B+E): summary chips, segmented filter, collapsible groups ── */
.na-bv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.na-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px;
  background: var(--primary-tint); padding: 4px; border-radius: 10px; }
.na-seg-btn { border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 5px 12px; border-radius: 7px; font-size: .78rem; font-weight: 600;
  white-space: nowrap; transition: background .12s, color .12s; }
.na-seg-btn:hover { color: var(--primary-dark); }
.na-seg-btn.is-active { background: var(--surface, #fff); color: var(--primary-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.na-bv-group { margin-bottom: 10px; }
.na-bv-group-head { display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; background: var(--primary-tint);
  color: var(--primary-dark); font-weight: 700; font-size: .82rem; user-select: none; }
.na-bv-group-head:hover { background: var(--primary-light); }
.na-bv-caret { width: 1em; display: inline-block; }
.na-bv-group-name { flex: 0 0 auto; }
.na-bv-group .na-tbl { margin-top: 4px; }
.na-btn--icon { padding: 7px 10px; }
/* Hero-banner button: readable on the green gradient without hardcoded colors. */
.na-btn--hero { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); }
.na-btn--hero:hover { background: rgba(255,255,255,.24); }

/* ── Toolbar / checkbox filter ───────────────────────────────────────────── */
.na-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.na-check { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); cursor: pointer; }
.na-check input { accent-color: var(--primary); }
.na-check-group { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-block: 4px; }

/* Exam lifecycle stepper (read-only progress dots under the status badge). */
.na-stepper { display: inline-flex; gap: 4px; margin-block-start: 5px; }
.na-step { inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--border); }
.na-step.is-done { background: var(--primary-light); }
.na-step.is-current { background: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }

/* Confirm-dialog body text. */
.na-confirm-msg { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }

/* Inline branch panel on the Grades page (merged Branches). */
.na-branch-panel-row > td { background: var(--primary-tint); padding-block: 8px; }
.na-branch-panel { padding-inline-start: 12px; }
.na-tbl--inset { margin-block: 0; background: transparent; }
.na-tbl--inset td { border-block-end: 1px solid var(--border); }
[data-mbranch].is-open { background: var(--primary-light); }

/* Per-grade branch narrowing block inside the exam-create form (§A.4). */
.na-branch-select { margin-block-start: 6px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--primary-tint); }
.na-branch-select + .na-branch-select { margin-block-start: 8px; }

/* ── Table row helpers ───────────────────────────────────────────────────── */
.na-sub { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.na-sub--warn { color: var(--warn); font-weight: 600; }
.na-sub--warn:empty { display: none; }
.na-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ── B1/B2 file release: inline release-time field + schedule editor ──────── */
.na-link { background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--primary);
  font: inherit; text-align: start; display: inline-flex; align-items: baseline; gap: 4px; }
.na-link:hover .ef-reltext { text-decoration: underline; }
.na-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.ef-reltext { color: var(--text); }
.ef-sched { margin-block-start: 8px; padding: 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--primary-tint); display: grid; gap: 8px; max-width: 320px; }
.ef-status { margin-inline-start: 6px; }

/* ── List/async states (loading / empty / error) ─────────────────────────── */
.na-state { padding: 26px 16px; text-align: center; color: var(--muted); font-size: .88rem; }
.na-state--error { color: var(--danger); }

/* Visually-hidden but screen-reader-available. */
.na-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; }

/* Rich empty-state: "no results published yet" instead of blank/zeroed panels. */
.na-empty { padding: 34px 20px; text-align: center; color: var(--muted); }
.na-empty-icon { font-size: 34px; line-height: 1; margin-block-end: 10px; opacity: .7; }
.na-empty-title { font-size: .98rem; font-weight: 600; color: var(--text); }
.na-empty-hint { font-size: .84rem; margin-block-start: 6px; }

/* Loading skeletons (shimmer). Logical props for RTL. */
.na-skeleton { padding: 6px 2px; }
.na-skel-line, .na-skel-chart, .na-skel-card {
  background: linear-gradient(90deg, var(--primary-tint) 25%, #eef3f1 37%, var(--primary-tint) 63%);
  background-size: 400% 100%; border-radius: 8px; animation: na-shimmer 1.3s ease-in-out infinite; }
.na-skel-line { height: 12px; margin-block: 8px; }
.na-skel-kpis { display: flex; gap: 12px; margin-block-end: 14px; }
.na-skel-kpis .na-skel-line { height: 40px; border-radius: 10px; }
.na-skel-row { display: flex; gap: 12px; }
.na-skel-row--head .na-skel-line { height: 14px; opacity: .85; }
.na-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.na-skel-card { background: none; }
.na-skel-card .na-skel-chart { height: 150px; margin-block-start: 8px; }
@keyframes na-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .na-skel-line, .na-skel-chart, .na-skel-card { animation: none; }
}

/* ── Calendar (cycle-scoped, read model) ──────────────────────────────────── */
.na-cal-month { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; }
.na-cal-month__h { background: var(--primary-tint); color: var(--primary-dark); font-weight: 800;
  padding: 9px 14px; font-size: .9rem; }
.na-cal-exam { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-top: 1px solid var(--border); }
.na-cal-exam:first-of-type { border-top: none; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.na-modal { position: fixed; inset: 0; background: rgba(10,40,34,.5); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.na-modal-card { background: var(--card); border-radius: 16px; max-width: 560px; width: 100%;
  box-shadow: var(--shadow-lg); overflow: hidden; }
.na-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border); font-size: 1.05rem; }
.na-modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.na-modal-foot { padding: 14px 22px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end; background: var(--primary-tint); }
.na-field { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.na-form-error { color: var(--danger); background: var(--danger-light); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: .8rem; font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Track C: school download catalog + metrics (tokens + logical props, RTL-ready) */
.na-subcard { border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 12px; background: var(--card); }
.na-subcard-head { display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between; margin-bottom: 6px; }
.dl-files { margin-top: 10px; }
.na-metrics-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px; align-items: stretch; }
.na-metric { background: var(--primary-tint); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; text-align: center; }
.na-metric-val { font-size: 1.6rem; font-weight: 800; color: var(--primary-dark); line-height: 1.1; }
.na-metric-lbl { font-size: .74rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.na-metric-block { margin-top: 18px; }
.na-inline-add { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.na-inline-add input { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; min-width: 120px; }
.na-inline-add select { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.ge-mark, .ge-count, .ge-att { padding: 5px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.ge-mark:focus, .ge-count:focus { outline: 2px solid var(--primary-tint); border-color: var(--primary-dark); }
/* Oral count-band cell: integer count input + a derived-score badge (0/1/2). */
.ge-countwrap { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ge-score { display: inline-flex; min-width: 1.4em; justify-content: center; padding: 1px 5px;
  border-radius: var(--radius-sm); background: var(--muted-bg, #eceff1); color: var(--muted, #888);
  font-weight: 700; font-size: .85rem; line-height: 1.3; }
.ge-score--set { background: var(--primary-tint, #e3efec); color: var(--primary-dark, #065248); }
/* Single-choice placement (G3/G4): one radio per option, checkbox for Q1/Q2. Big touch targets. */
.ge-pick { display: inline-flex; align-items: center; justify-content: center; min-width: 34px;
  min-height: 30px; cursor: pointer; }
.ge-pick input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--primary, #0b7a6b); }
.ge-pick input:disabled { cursor: not-allowed; }
.ge-leaf--pick { white-space: normal; min-width: 64px; max-width: 110px; font-size: .85em; }
.ge-placement { font-weight: 600; white-space: nowrap; }

/* Out-of-range mark (Imad 2026-09-24): value < 0 or > max_mark. */
.ge-mark--invalid { border-color: var(--danger); background: var(--danger-light, #fde8e8); }
.ge-mark--invalid:focus { outline-color: var(--danger); border-color: var(--danger); }

/* DEF-012: on desktop the ☰ button collapses the sidebar to zero width so the
 * content area expands (mobile below uses the same class as a slide-in drawer). */
@media (min-width: 901px) {
  .na-app { transition: grid-template-columns .2s; }
  .na-app.side-open { grid-template-columns: 0 1fr; }
  .na-app.side-open .na-side { overflow: hidden; padding-inline: 0; }
}

@media (max-width: 900px) {
  .na-app { grid-template-columns: 1fr; }
  .na-side { position: fixed; inset-inline-start: 0; top: 0; width: 82%; max-width: 300px; z-index: 60;
    transform: translateX(-105%); transition: transform .2s; }
  .na-app.side-open .na-side { transform: translateX(0); }
  .na-content { padding: 16px; }
}

/* ── Result card + chips + tables (P3 A1 student card) ────────────────── */
.na-chip { display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.7; white-space: nowrap; }
.na-chip--ok { background: var(--ok-light); color: var(--ok); }
.na-chip--muted { background: var(--primary-tint); color: var(--muted); }
.na-chip--level { background: var(--chip, var(--primary-light)); color: var(--primary-deep);
  border: 1px solid color-mix(in srgb, var(--chip, var(--primary)) 40%, transparent); }
.na-result { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
             background: var(--surface-2, #fafafa); line-height: 1.6; }
.na-result:empty { display: none; }
.na-result--ok  { border-color: var(--ok);  background: var(--ok-light); }
.na-result--err { border-color: var(--err); background: var(--err-light); color: var(--err); }
.na-result .na-result-head { font-weight: 600; margin-bottom: 6px; }
.na-btn--primary { background: var(--brand, #1f6feb); color: #fff; border-color: transparent; }
.na-btn--primary:hover { filter: brightness(0.95); }
.na-result-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-block-end: 12px; }
.na-result-head h2 { margin: 0 0 2px; }
.na-result-rule { margin-block-start: 10px; }
.na-result-lookup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.na-result-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-block: 4px 14px; padding: 10px 12px; background: var(--primary-tint);
  border-radius: 10px; }
.na-kpi { font-size: 13px; color: var(--muted); }
.na-kpi b { color: var(--primary-deep); font-size: 15px; margin-inline-end: 3px;
  font-variant-numeric: tabular-nums; }
.na-dist { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.na-export-bar { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-block-end: 10px; }
.na-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px; }
.na-report-block h3 { margin: 0 0 8px; font-size: 15px; color: var(--primary-deep); }
.na-chart-wrap { position: relative; height: 220px; margin-block-end: 10px; }
.na-chart-caption { font-size: 13px; }
.na-funnel { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px 14px; }
.na-funnel-step { flex: 1 1 120px; text-align: center; padding: 12px 10px;
  background: var(--primary-tint); border-radius: 10px; }
.na-funnel-n { font-size: 22px; font-weight: 700; color: var(--primary-deep);
  font-variant-numeric: tabular-nums; }
.na-funnel-k { font-size: 12px; color: var(--muted); margin-block-start: 2px; }
.na-table { width: 100%; border-collapse: collapse; }
.na-table th, .na-table td { text-align: start; padding: 8px 10px;
  border-block-end: 1px solid var(--border); }
.na-table thead th { color: var(--muted); font-size: 13px; font-weight: 600; }
.na-table tfoot th, .na-table tfoot td { font-weight: 700; border-block-end: 0;
  border-block-start: 2px solid var(--border); }
.na-table .num { text-align: end; font-variant-numeric: tabular-nums; }

/* ── Results sub-tab bar (P3 results shell) ─────────────────────────────────── */
/* Shared brand + version footer (all pages incl. login) */
.na-footer { margin-block-start: auto; padding: 14px 22px 18px; text-align: center;
  color: var(--muted); font-size: .72rem; line-height: 1.5; border-block-start: 1px solid var(--border); }
.na-footer-credit { font-weight: 400; }  /* only <strong>Pulse</strong> is bold (matches Dashboard) */
.na-footer-ver { opacity: .8; font-variant-numeric: tabular-nums; }
.lp .na-footer { border-block-start: 0; margin-block-start: 8px; padding-block: 6px 0; }

.na-tabbar { display: flex; flex-wrap: wrap; gap: 4px; margin-block: 4px 16px;
  border-block-end: 1px solid var(--border); }
.na-tab { appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: 9px 14px; font: inherit; color: var(--muted); border-radius: 8px 8px 0 0;
  border-block-end: 2px solid transparent; margin-block-end: -1px; }
.na-tab:hover { color: var(--primary); background: var(--primary-tint); }
.na-tab.is-active { color: var(--primary-deep); font-weight: 600;
  border-block-end-color: var(--primary); }

/* ══ RTL future toggle (inactive now) ═════════════════════════════════════════
 * When Arabic RTL is turned on: set <html dir="rtl">. The grid + logical props
 * flip the sidebar to the right and mirror alignment automatically. Add any
 * explicit exceptions below under [dir="rtl"]. */
[dir="rtl"] .na-nav.active::before { border-radius: 3px 0 0 3px; }
@media (max-width: 900px) {
  [dir="rtl"] .na-side { transform: translateX(105%); }
  [dir="rtl"] .na-app.side-open .na-side { transform: translateX(0); }
}

/* ══ Bordereaux 5-level builder (§1/§1a/§2) ══════════════════════════════ */
.dx-balance { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; flex-wrap: wrap; }
.dx-bad { color: var(--danger); }
.dx-tree tr.dx-row-bad td { background: var(--danger-light); }
.dx-fail { color: var(--danger); font-size: .76rem; margin-top: 4px; }
.dx-editor { margin: 10px 0; }

/* ══ School Operational Dashboard (§8) ══════════════════════════════════ */
.na-so-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

/* ══ Staff: §9 de-emphasized manual create (collapsible) ═════════════════════ */
.staff-manual > summary { cursor: pointer; list-style: revert; user-select: none; }
.staff-manual > summary::-webkit-details-marker { display: revert; }
.staff-manual[open] > summary { margin-bottom: 12px; }

/* ══ Grade entry: §6 context strip + §4 performance-level editor ═════════════════ */
.ge-context { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: .85rem; margin-bottom: 14px; }
.ge-context .ge-print-anchors { margin-inline-start: auto; display: inline-flex; gap: 8px; }
.ge-context .ge-run-chip { background: #fff4d6; border: 1px solid #e8c45a; border-radius: 999px; padding: 2px 10px; font-weight: 600; }
.na-select--sm { padding: 5px 8px; font-size: .78rem; }
.na-level-editor { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ══ RBAC "Manage Roles" UI (NA-PRD-ADD-001) — roles screen + Staff role picker ═════ */
.na-modal-card--wide { max-width: 760px; }
/* Teacher-view preview pop-up: wide + tall, header with a right-aligned close button, and a
 * scrollable body so the (potentially wide/long) grid fits without breaking the modal frame. */
.na-modal-card--preview { max-width: 1180px; }
.na-modal-card--preview .na-modal-head { display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
.na-modal-card--preview .na-modal-body { max-height: 78vh; overflow: auto; }

.na-perm-grid { display: flex; flex-direction: column; gap: 12px; max-height: 46vh;
  overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.na-perm-group { border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px 12px; margin: 0; }
.na-perm-legend { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; font-weight: 700; color: var(--primary-dark); font-size: .82rem; padding: 0 4px; }
.na-perm-all { font-size: .74rem; }
.na-perm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 14px; margin-top: 6px; }
.na-perm-item { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem;
  font-weight: 500; color: var(--ink, inherit); cursor: pointer; }
.na-perm-item input { margin-top: 2px; flex: 0 0 auto; }
.na-perm-item input:disabled + .na-perm-label { opacity: .7; }
.na-perm-label { line-height: 1.3; }

.na-user-list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px;
  font-size: .85rem; }

/* Staff-screen per-user role picker. */
.na-role-picker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── School Directory: tabs container + dataTable widget ─────────────────── */
.na-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border, #e3e8ef);
  margin: 8px 0 14px; }
.na-tab.active { color: var(--primary-deep); font-weight: 600;
  border-bottom: 2px solid var(--primary, #2563eb); }

.dt { display: flex; flex-direction: column; gap: 10px; }
.dt-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.dt-f { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted, #64748b); }
.dt-f input, .dt-f select { padding: 6px 8px; border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px; font-size: 13px; background: #fff; min-width: 120px; }
.dt-export { margin-inline-start: auto; display: flex; gap: 6px; align-items: flex-end; }
.dt-body { min-height: 80px; }
.dt-foot { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.dt-count { min-width: 90px; text-align: center; }
.dt-tbl th.dt-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dt-tbl th.dt-sortable:hover { color: var(--primary, #2563eb); }

/* ── My School card (principal / school_it) ─────────────────────────────── */
.ms-school { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between; padding: 14px 16px; border: 1px solid var(--border,#e3e8ef);
  border-radius: 12px; background: var(--surface,#fff); margin-bottom: 12px; }
.ms-school-nm { font-size: 17px; font-weight: 600; color: var(--primary-deep,#1e3a8a); }
.ms-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-kpi { min-width: 92px; text-align: center; padding: 8px 12px; border-radius: 10px;
  background: var(--primary-tint,#eff6ff); }
.ms-kpi-val { font-size: 20px; font-weight: 700; color: var(--primary-deep,#1e3a8a); }
.ms-kpi-lbl { font-size: 11px; color: var(--muted,#64748b); }

/* ── My Classes (teacher) ───────────────────────────────────────────────── */
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin: 8px 0 16px; }
.mc-card { text-align: start; cursor: pointer; border: 1px solid var(--border,#e3e8ef);
  border-radius: 12px; padding: 14px; background: var(--surface,#fff);
  display: flex; flex-direction: column; gap: 4px; transition: box-shadow .12s, border-color .12s; }
.mc-card:hover { border-color: var(--primary,#2563eb); box-shadow: 0 2px 10px rgba(37,99,235,.12); }
.mc-card-subj { font-size: 15px; font-weight: 600; color: var(--primary-deep,#1e3a8a); }
.mc-card-meta { font-size: 13px; color: var(--text,#334155); }
.mc-card-exam { font-size: 12px; }
.mc-card-count { margin-top: 6px; font-size: 12px; color: var(--muted,#64748b); }
.mc-count-n { font-size: 18px; font-weight: 700; color: var(--primary-deep,#1e3a8a); margin-inline-end: 4px; }
.mc-lang { font-size: 10px; font-weight: 700; color: var(--muted,#64748b);
  border: 1px solid var(--border,#cbd5e1); border-radius: 6px; padding: 0 4px; margin-inline-start: 6px; }
.mc-roster-hd { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 14px 0 8px; }
.mc-roster-title { font-size: 15px; font-weight: 600; color: var(--primary-deep,#1e3a8a); }
.na-tbl-wrap { overflow-x: auto; }

/* --- Download Metrics command center (views/metrics.js) --- */
.mx-controls { margin-bottom: 14px; }
.mx-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mx-row label { font-size: .8rem; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.mx-row input[type=text], .mx-row input[type=date], .mx-row select {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.mx-auto { user-select: none; }
.na-metric-sub { font-size: .68rem; color: var(--muted); margin-top: 2px; }
.mx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.mx-tab { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface, #fff); cursor: pointer; font-size: .8rem; font-weight: 600; }
.mx-tab-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.mx-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.mx-b-succeeded { background: #d5f5e3; color: #1e7e46; }
.mx-b-not_logged_in { background: #fdecea; color: #b03a2e; }
.mx-b-logged_not_downloaded { background: #fef5e7; color: #b9770e; }
.mx-b-tried_failed_only { background: #f9d9d5; color: #922b21; }
.mx-schools-tbl { display: block; overflow-x: auto; white-space: nowrap; }

/* ---- Load & Performance panel ---- */
.mx-perf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mx-perf-hint { margin: 2px 0 14px; max-width: 900px; }
.btn-sm { padding: 5px 12px; font-size: .78rem; }
.mx-perf-group { margin-bottom: 6px; }
.mx-perf-group-t { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 8px; padding-left: 2px; }
/* subtle '?' affordance signalling a hover tooltip on percentile/health cards */
.na-metric-help { display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 4px; border-radius: 50%; font-size: .62rem;
  font-weight: 700; line-height: 1; color: var(--muted); background: var(--border);
  vertical-align: middle; cursor: help; }
.na-metric[title], .mx-perf-group-t[title] { cursor: help; }
/* health-coded metric cards (left accent bar + tint) */
.na-metric--ok   { border-left: 3px solid var(--ok);     background: var(--ok-light); }
.na-metric--ok   .na-metric-val { color: var(--ok); }
.na-metric--warn { border-left: 3px solid var(--warn);   background: var(--warn-light); }
.na-metric--warn .na-metric-val { color: var(--warn); }
.na-metric--bad  { border-left: 3px solid var(--danger); background: var(--danger-light); }
.na-metric--bad  .na-metric-val { color: var(--danger); }
.na-metric--proj { border-left: 3px solid var(--primary); background: var(--primary-light); }
.na-metric--proj .na-metric-val { color: var(--primary-dark); }
/* chart grid */
.mx-perf-charts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-top: 18px; }
.mx-chart { margin: 0; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; }
.mx-chart figcaption { font-size: .74rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.mx-canvas-wrap { position: relative; height: 220px; }
@media (max-width: 1000px) { .mx-perf-charts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .mx-perf-charts { grid-template-columns: 1fr; } }

/* Phase C (2026-09-21): grade-entry class grid — structure-aware, run-aware, absence-aware. */
.ge-grid-scroll { overflow-x: auto; }
.ge-class-grid th.ge-grp { text-align: center; background: var(--primary-light); border-inline: 1px solid var(--border); font-size: .8rem; }
.ge-class-grid th.ge-leaf { text-align: center; font-weight: 600; }
/* Oral count-band: numbered PARTS are the ge-grp group headers; FIELDS carry a small title under
   the code. The reading-fluency DOMAIN is a real bordereaux_domain (shown in Results/exports, not
   in entry — Imad 2026-10-02), so there is no domain banner row in this grid. */
.ge-class-grid th.ge-leaf .ge-leaf-title { display: block; font-weight: 400; font-size: .72rem;
  color: var(--muted, #5a6b67); max-width: 9rem; margin: 2px auto 0; white-space: normal; }
.ge-class-grid td, .ge-class-grid th { padding: 6px 8px; }
.ge-class-grid input.ge-mark, .ge-class-grid input.ge-count { text-align: center; }
.ge-class-grid tr.ge-row--absent td { background: var(--danger-light, #fde8e8); }
.ge-class-grid tr.ge-row--absent input.ge-mark,
.ge-class-grid tr.ge-row--absent input.ge-count,
.ge-class-grid tr.ge-row--absent .ge-score { opacity: .5; }
/* Per-row autosave indicator (row-exit autosave). Sits next to the student name; unobtrusive. */
.ge-rowsave { margin-inline-start: 8px; font-size: .85rem; font-weight: 700; line-height: 1;
  display: inline-block; min-width: 1em; text-align: center; vertical-align: middle;
  transition: opacity .2s ease; }
.ge-rowsave.is-saving { color: var(--muted, #888); animation: geRowSavePulse 1s ease-in-out infinite; }
.ge-rowsave.is-saved  { color: var(--ok, #2e7d32); }
.ge-rowsave.is-error  { color: var(--danger, #c62828); }
@keyframes geRowSavePulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.ge-progress { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ge-progress__count { font-weight: 700; }
.ge-progress__hint { font-size: .85rem; }
.ge-state { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ge-state.is-notstarted { background: var(--muted-light, #eee); color: var(--muted, #666); }
.ge-state.is-inprogress { background: #fff4d6; color: #8a6d00; }
.ge-state.is-submitted  { background: var(--ok-light, #e3f4e6); color: var(--ok, #2e7d32); }
.ge-run-select { display: flex; align-items: center; gap: 8px; }
.ge-run-select select { margin-inline-start: 6px; }

/* Phase D (2026-09-21): per-student entry mode + mode bar. */
.ge-modebar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ge-ps-card { max-width: 720px; }
.ge-ps-head { align-items:center; gap:12px; justify-content:space-between; margin-bottom:8px; }
.ge-ps-name { text-align:center; }
.ge-ps-att, .ge-ps-total, .ge-ps-level { margin:8px 0; }
.ge-ps-sheet td { padding:6px 10px; }
.ge-ps-sheet tr.ge-ps-group td { background: var(--primary-tint); }

/* ============================================================================
   Download Metrics redesign (2026-09-21) — additive, mx- prefixed only.
   ========================================================================== */
.mx-page { position: relative; }
.mx-section { margin-top: 22px; }
.mx-sticky { position: sticky; top: 0; z-index: 20; background: var(--card);
  padding: 10px 0; margin: -4px 0 4px; border-bottom: 1px solid var(--border); }
.mx-updated { font-size: .74rem; color: var(--muted); margin-inline-start: auto; }
.mx-updated.mx-live::before { content: "●"; color: var(--ok); margin-inline-end: 5px;
  animation: mxpulse 1.6s ease-in-out infinite; }
@keyframes mxpulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.mx-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mx-scope-note { font-size: .76rem; color: var(--muted); font-weight: 600; }

/* headline KPIs */
.mx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin-top: 14px; align-items: stretch; }
.mx-kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; }
.mx-kpi-val { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.mx-kpi-pct { font-size: 1rem; font-weight: 700; color: var(--muted); }
.mx-kpi-lbl { font-size: .82rem; color: var(--muted); margin-top: 4px; font-weight: 600; }
.mx-kpi-sub { font-size: .7rem; color: var(--muted); margin-top: 3px; }
.mx-kpi--good { border-left: 4px solid var(--ok); }
.mx-kpi--good .mx-kpi-val { color: var(--ok); }
.mx-kpi--alert { border-left: 4px solid var(--danger); background: var(--danger-light); }
.mx-kpi--alert .mx-kpi-val { color: var(--danger); }
.mx-kpi--ok { border-left: 4px solid var(--ok); }
@media (max-width: 520px) { .mx-kpis { grid-template-columns: 1fr; } }

/* funnel */
.mx-funnel { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mx-fstage { display: block; width: 100%; text-align: start; background: none; border: 0;
  padding: 0; cursor: pointer; }
.mx-fstage-bar { height: 40px; border-radius: 8px; background: var(--primary);
  transition: filter .15s, transform .15s; min-width: 42px; }
.mx-fstage:nth-child(1) .mx-fstage-bar { background: var(--primary); }
.mx-fstage:nth-child(2) .mx-fstage-bar { background: #3b82c4; }
.mx-fstage:nth-child(3) .mx-fstage-bar { background: #6aa8d8; }
.mx-fstage:nth-child(4) .mx-fstage-bar { background: var(--ok); }
.mx-fstage:hover .mx-fstage-bar { filter: brightness(1.06); transform: translateY(-1px); }
.mx-fstage:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.mx-fstage-meta { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.mx-fstage-val { font-size: 1.1rem; font-weight: 800; }
.mx-fstage-lbl { font-size: .82rem; color: var(--muted); font-weight: 600; }
.mx-fstage-pct { font-size: .8rem; color: var(--muted); margin-inline-start: auto; }

/* cohort cards */
.mx-cohorts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 12px; }
.mx-coh { text-align: start; background: var(--card); border: 1px solid var(--border);
  border-left-width: 4px; border-radius: var(--radius); padding: 14px 16px; cursor: pointer;
  transition: transform .12s, box-shadow .12s; }
.mx-coh:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.mx-coh:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mx-coh-n { font-size: 1.9rem; font-weight: 800; line-height: 1.05; }
.mx-coh-lbl { font-size: .82rem; font-weight: 700; margin-top: 2px; }
.mx-coh-cta { font-size: .72rem; color: var(--muted); margin-top: 6px; }
.mx-coh--bad { border-left-color: var(--danger); } .mx-coh--bad .mx-coh-n { color: var(--danger); }
.mx-coh--warn { border-left-color: var(--warn); } .mx-coh--warn .mx-coh-n { color: var(--warn); }
.mx-coh--ok { border-left-color: var(--ok); } .mx-coh--ok .mx-coh-n { color: var(--ok); }
.mx-coh--muted { opacity: .82; }
@media (max-width: 900px) { .mx-cohorts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mx-cohorts { grid-template-columns: 1fr; } }

/* two-up releases + failures */
.mx-two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mx-halfcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; overflow-x: auto; }
@media (max-width: 820px) { .mx-two-up { grid-template-columns: 1fr; } }

/* collapsibles */
.mx-collapse-head { width: 100%; text-align: start; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px;
  font-size: .92rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.mx-collapse-head:hover { background: var(--primary-tint, var(--card)); }
.mx-collapse-caret { color: var(--muted); }
.mx-collapse-body { margin-top: 12px; }

/* plain-language latency cards */
.mx-latcard { position: relative; }
.mx-lat-tech { position: absolute; top: 6px; inset-inline-end: 8px; font-size: .6rem;
  color: var(--muted); opacity: .7; font-weight: 700; letter-spacing: .04em; }

/* verdict banner */
.mx-verdict { padding: 12px 16px; border-radius: var(--radius); font-weight: 600;
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .92rem; }
.mx-verdict-ic { font-size: 1.1rem; }
.mx-verdict--ok { background: var(--ok-light); color: var(--ok); }
.mx-verdict--warn { background: var(--warn-light); color: var(--warn); }
.mx-verdict--bad { background: var(--danger-light); color: var(--danger); }
.mx-verdict--none { background: var(--border); color: var(--muted); }
.mx-perf-note { font-size: .74rem; color: var(--muted); margin: 4px 0 12px; }

/* toast */
.mx-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #222; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: .86rem;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 3000; }
.mx-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* drawer */
.mx-drawer { position: fixed; inset: 0; z-index: 2000; visibility: hidden; }
.mx-drawer-open { visibility: visible; }
.mx-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0;
  transition: opacity .2s; }
.mx-drawer-open .mx-drawer-backdrop { opacity: 1; }
.mx-drawer-panel { position: absolute; top: 0; inset-inline-end: 0; height: 100%;
  width: min(1100px, 96vw); background: var(--card); box-shadow: -8px 0 30px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; }
[dir="rtl"] .mx-drawer-panel { transform: translateX(-100%); }
.mx-drawer-open .mx-drawer-panel { transform: translateX(0); }
.mx-drawer-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); }
.mx-drawer-title { font-size: 1.05rem; font-weight: 800; }
.mx-drawer-x { background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: var(--muted); }
.mx-drawer-toolbar { display: flex; gap: 10px; align-items: center; padding: 10px 18px;
  border-bottom: 1px solid var(--border); }
.mx-drawer-toolbar input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.mx-drawer-body { flex: 1; overflow: auto; padding: 12px 18px 24px; }
.mx-drawer-range { font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.mx-drawer-more { text-align: center; margin-top: 14px; }

/* ===== Download Metrics redesign v2 (vertical funnel, status blocks, lookup) ===== */
.mx-grid-funnel { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .mx-grid-funnel { grid-template-columns: 1fr; } }

/* vertical funnel */
.mx-vfunnel { display: flex; gap: 10px; align-items: flex-end; justify-content: space-between;
  padding: 8px 4px 4px; min-height: 190px; }
.mx-vbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 4px 2px; border-radius: var(--radius); }
.mx-vbar:hover { background: var(--primary-tint); }
.mx-vbar-col { width: 100%; max-width: 46px; height: 130px; display: flex; align-items: flex-end;
  background: var(--border); border-radius: 6px 6px 0 0; overflow: hidden; }
.mx-vbar-fill { width: 100%; background: var(--primary); border-radius: 6px 6px 0 0; transition: height .4s ease; }
.mx-vbar--total .mx-vbar-fill { background: var(--muted); }
.mx-vbar--logged .mx-vbar-fill { background: var(--primary); }
.mx-vbar--dl .mx-vbar-fill { background: var(--warn); }
.mx-vbar--ok .mx-vbar-fill { background: var(--ok); }
.mx-vbar-val { font-weight: 700; font-size: .95rem; }
.mx-vbar-pct { font-size: .72rem; color: var(--muted); }
.mx-vbar-lbl { font-size: .72rem; text-align: center; color: var(--muted); line-height: 1.1; }

/* status blocks */
.mx-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .mx-stats { grid-template-columns: 1fr; } }
.mx-stat { text-align: start; background: var(--card); border: 1px solid var(--border);
  border-inline-start: 4px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.mx-stat:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.mx-stat--ok { border-inline-start-color: var(--ok); }
.mx-stat--warn { border-inline-start-color: var(--warn); }
.mx-stat--bad { border-inline-start-color: var(--danger); }
.mx-stat-top { display: flex; align-items: baseline; gap: 8px; }
.mx-stat-n { font-size: 1.5rem; font-weight: 800; }
.mx-stat-pct { font-size: .9rem; color: var(--muted); }
.mx-stat-lbl { font-size: .85rem; margin-top: 2px; }
.mx-stat-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mx-pill { background: var(--primary-tint); border-radius: 999px; padding: 2px 9px; font-size: .74rem; color: var(--muted); }
.mx-pill b { color: var(--text, inherit); }

/* school lookup */
.mx-lookup-bar { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.mx-lookup-bar input { flex: 1; min-width: 220px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.mx-lookup-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--card); }
.mx-lookup-headrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mx-lookup-name { font-size: 1.1rem; font-weight: 700; }
.mx-lookup-id { color: var(--muted); font-weight: 400; font-size: .85rem; }
.mx-lookup-meta, .mx-lookup-contacts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
  font-size: .82rem; color: var(--muted); }
.mx-lookup-grades { margin-top: 10px; }
.mx-lookup-sub-t { font-size: .8rem; font-weight: 600; margin-bottom: 4px; }

/* ===== Download Metrics v3 (KPI minor-note, speed, releases-by-exam, failures detail) ===== */
.mx-kpi-minor { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.mx-kpi--ok .mx-kpi-minor { color: var(--muted); }

.mx-stack { display: flex; flex-direction: column; gap: 16px; }
.mx-fullcard { width: 100%; }

/* speed */
.mx-speed .na-metric-val { font-size: 1.6rem; font-weight: 800; }

/* success % colouring */
.mx-ok { color: var(--ok); } .mx-warn { color: var(--warn); } .mx-bad { color: var(--danger); }
.mx-succ { font-weight: 700; }
.mx-succ-sub { font-size: .72rem; color: var(--muted); margin-inline-start: 4px; }

/* releases grouped by exam */
.mx-rel-exam { border: 1px solid var(--border); border-radius: var(--radius); margin-top: 10px; overflow: hidden; }
.mx-rel-exam-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 10px 14px; background: var(--primary-tint); }
.mx-rel-exam-title { font-weight: 700; }
.mx-rel-exam-roll { font-size: .78rem; color: var(--muted); }
.mx-rel-tbl { width: 100%; }
.mx-rel-tbl td, .mx-rel-tbl th { padding: 6px 14px; }

/* failures detail */
.mx-fail-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.mx-fail-chip { background: var(--primary-tint); border-radius: 999px; padding: 3px 10px; font-size: .78rem; }
.mx-fail-chip b { color: var(--text); }
.mx-fail-tbl { width: 100%; }
.mx-fail-tbl td { font-size: .82rem; }

/* ===== Download Metrics v4 (effective-success, locked-out, resolved, per-school detail) ===== */
.mx-eff { border-radius: var(--radius); padding: 8px 12px; margin: 6px 0; font-weight: 600; }
.mx-eff--ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.mx-eff--bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.mx-eff-sub { font-weight: 400; color: var(--muted); font-size: .82rem; }

/* Locked Out = benign, neutral tone (NOT red) */
.mx-locked { background: var(--primary-tint); border-radius: var(--radius); padding: 6px 12px; margin: 4px 0 8px; font-size: .86rem; }
.mx-locked-sub { color: var(--muted); font-size: .78rem; }

/* resolved / stuck pills */
.mx-rslv { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.mx-rslv--ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.mx-rslv--bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

/* per-school detail sections */
.mx-lk-sec { margin-top: 12px; }
.mx-lk-tbl { width: 100%; }
.mx-lk-tbl td, .mx-lk-tbl th { padding: 5px 10px; font-size: .82rem; }
.mx-lk-allgot { color: var(--ok); font-weight: 600; }
.mx-lk-warn-t { color: var(--warn); }
.mx-role { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.mx-role--it { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); }
.mx-role--principal { background: color-mix(in srgb, var(--accent, #8b5cf6) 18%, transparent); color: var(--accent, #8b5cf6); }
.mx-role--other { background: var(--primary-tint); color: var(--muted); }

/* ===== Download Metrics: per-branch grouping in the Releases file list (grades 11 & 12) ===== */
.mx-rel-branch-h td { background: var(--primary-tint); padding: 6px 10px !important; }
.mx-branch-tag { font-weight: 700; font-size: .8rem; color: var(--primary-dark); }
.mx-rel-branch-n { float: right; font-size: .74rem; color: var(--muted); }
[dir="rtl"] .mx-rel-branch-n { float: left; }
.mx-rel-fname { font-size: .72rem; color: var(--muted); margin-top: 2px;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Click-through completion metric (from the click-intent beacon) ===== */
.na-metric--muted .na-metric-val { color: var(--muted); }
.na-metric--muted { opacity: .85; }

/* Grade entry: sheet opens INLINE under its assignment row (Imad 2026-10-04). */
.na-tbl tr.ge-asg-active td { background: var(--primary-tint); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); }
.na-tbl tr.ge-inline-row:hover td { background: transparent; }
.na-tbl td.ge-inline-cell { padding: 0; background: var(--surface, #fff); }
.ge-inline-card { padding: 14px 16px 18px; border-inline-start: 4px solid var(--primary); background: var(--primary-light); }
.ge-inline-title { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 12px; font-size: 1rem; }
.ge-inline-title__label b { color: var(--primary); }
.ge-branch-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--primary-tint); color: var(--primary); font-size: .8rem; font-weight: 600; }

/* Grade entry FROZEN PANES (Imad 2026-10-04): header rows stick to the top, the Student column
   sticks to the side (Attendance scrolls normally) (logical inset => correct in Arabic RTL). Height-bounded scroll box so
   vertical AND horizontal scroll both happen inside it. Sticky cells need an opaque background. */
.ge-grid-scroll { overflow: auto; max-height: calc(100vh - 150px); position: relative;
  border: 1px solid var(--border); border-radius: 8px; }
.ge-class-grid { border-collapse: separate; border-spacing: 0; }
.ge-class-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--surface, #fff);
  box-shadow: inset 0 -1px 0 var(--border); }
.ge-class-grid thead th.ge-grp { background: var(--primary-light); }
.ge-class-grid thead tr:nth-child(2) th { top: var(--ge-h1, 0px); }
.ge-class-grid .ge-stk1 { position: sticky; z-index: 2; background: var(--surface, #fff);
  inset-inline-start: 0; min-width: 160px; box-shadow: inset -1px 0 0 var(--border); }
[dir="rtl"] .ge-class-grid .ge-stk1 { box-shadow: inset 1px 0 0 var(--border); }
.ge-class-grid thead th.ge-stk1 { z-index: 4; }   /* top-left corner */
.ge-class-grid tr.ge-row--absent td.ge-stk1 { background: var(--danger-light, #fde8e8); }
.ge-class-grid tr.ge-row:hover td.ge-stk1 { background: var(--primary-light); }
/* The inline sheet lives inside the assignment-list TABLE; without this the table grows to the
   grid's full width and the scroll box never scrolls (frozen panes inert). width:0 + min-width:100%
   removes the card from the table's intrinsic width so it takes exactly the visible width. */
.ge-inline-card { width: 0; min-width: 100%; box-sizing: border-box; }

/* Session-expired overlay (Imad 2026-10-04): app stays visible but BLURRED behind one clear
   dialog; nothing behind it is clickable. */
.na-expired { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(10, 30, 40, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.na-expired__card { background: var(--surface, #fff); border-radius: 16px; box-shadow: 0 24px 70px rgba(10,30,60,.35);
  max-width: 440px; width: 100%; padding: 28px 26px; text-align: center; }
.na-expired__icon { font-size: 2.2rem; margin-bottom: 8px; }
.na-expired__title { margin: 0 0 20px; font-size: 1.25rem; color: var(--primary-dark, #0a2a4a); }
.na-expired__body { margin: 0 0 20px; color: var(--muted, #5a6b67); font-size: .92rem; line-height: 1.5; }
.na-expired__btn { display: inline-block; text-decoration: none; padding: 10px 22px; }
body.na-expired-open { overflow: hidden; }

/* ---- NA Results pages (step 2, Spec v0.3 §0) ---- */
.rs { max-width: 1180px; margin: 0 auto; }
.rs-top { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.rs-crumbs { font-size: .85rem; color: var(--muted, #64748b); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rs-crumbs a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
.rs-crumbs a:hover { text-decoration: underline; }
.rs-sep { opacity: .5; }
[dir="rtl"] .rs-sep { transform: scaleX(-1); display: inline-block; }
.rs-search { position: relative; min-width: 260px; flex: 0 1 380px; }
.rs-search input { width: 100%; }
.rs-hits { position: absolute; inset-inline: 0; top: 100%; z-index: 20; background: var(--card, #fff); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); max-height: 360px; overflow: auto; }
.rs-hit { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); }
.rs-hit:hover { background: var(--primary-light); }
.rs-hit small, .rs-hit-note { color: var(--muted, #64748b); font-size: .78rem; }
.rs-hit-note { padding: 10px 14px; }
.rs-h1 { margin: 6px 0 2px; font-size: 1.6rem; font-weight: 800; }
.rs-h2 { margin: 22px 0 10px; font-size: 1.05rem; font-weight: 800; }
.rs-sub, .rs-base { color: var(--muted, #64748b); font-size: .88rem; margin-bottom: 12px; }
.rs-note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; padding: 8px 12px; border-radius: 8px; font-size: .85rem; margin: 8px 0 14px; }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.rs-grid--reo { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.rs-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius, 12px);
  background: var(--card, #fff); color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; min-height: 92px; }
.rs-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.09); transform: translateY(-1px); border-color: var(--primary); }
.rs-card b { font-size: 1.02rem; } .rs-card small, .rs-card span { color: var(--muted, #64748b); font-size: .82rem; }
.rs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.rs-row { padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card, #fff); color: inherit; text-decoration: none; font-weight: 600; }
.rs-row:hover { background: var(--primary-light); border-color: var(--primary); }
.rs-bar { display: block; height: 7px; background: var(--primary-tint, #e6f2ef); border-radius: 99px; overflow: hidden; }
.rs-bar i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.rs-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.rs-chip { padding: 6px 14px; border-radius: 99px; background: var(--primary-tint, #e6f2ef); color: var(--primary-dark); font-weight: 700; font-size: .85rem; text-decoration: none; }
.rs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 10px 0 6px; }
.rs-kpis > div { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.rs-kpis b { display: block; font-size: 1.7rem; line-height: 1.1; } .rs-kpis span { color: var(--muted, #64748b); font-size: .82rem; }
.rs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rs-tbl td a { color: var(--primary-dark); font-weight: 600; text-decoration: none; } .rs-tbl td a:hover { text-decoration: underline; }
.rs-lvl { display: inline-block; padding: 3px 12px; border-radius: 99px; font-weight: 700; font-size: .8rem; color: #fff; background: var(--c, #64748b); white-space: nowrap; }
.rs-muted { color: var(--muted, #64748b); } .rs-na { color: #cbd5e1; text-align: center; }
.rs-subj { margin-bottom: 14px; }
@media (max-width: 720px) { .rs-search { flex: 1 1 100%; } .rs-h1 { font-size: 1.3rem; } .rs-list { grid-template-columns: 1fr; } }

.rs-dlbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.rs-dl { text-decoration: none; }

.rs-chip--on { background: var(--primary); color: #fff; }
.rs-stack { display: flex; height: 10px; min-width: 120px; border-radius: 99px; overflow: hidden; background: #e2e8f0; }
.rs-stack i { display: block; height: 100%; }
details.rs-subj > summary { cursor: pointer; padding: 4px 0; }
.rs-card--empty { opacity: .6; }
details.rs-more { margin-top: 18px; } details.rs-more > summary { cursor: pointer; color: var(--primary); font-weight: 600; margin-bottom: 10px; }
/* subject page v2: round table separators, totals, sortable schools table */
.rs-tbl .rs-vsep { border-inline-start: 2px solid var(--border, #cbd5e1); }
.rs-tbl tr.rs-total td { border-top: 2px solid var(--border, #cbd5e1); background: var(--primary-tint, #f1f5f9); }
.rs-tbl tr.rs-grp td { border-top: 2px solid var(--border, #e2e8f0); }
.rs-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.rs-tools .rs-sfilter { flex: 1 1 240px; min-width: 0; }
.rs-sortable th[data-k] { cursor: pointer; user-select: none; white-space: nowrap; }
.rs-sortable .rs-arrow { color: var(--muted, #94a3b8); font-size: .75em; }
.rs-twin { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-bottom: 14px; }
.rs-rank { padding: 12px 14px; } .rs-rank .rs-h2 { margin-top: 0; }

/* ---- Results Matrix (release B) ---- */
.rs-seg { display: flex; flex-wrap: wrap; background: var(--surface, #fff); border: 1px solid #c5d6d1; border-radius: 10px; overflow: hidden; width: max-content; max-width: 100%; margin: 6px 0 12px; }
.rs-segb { padding: 9px 18px; font-weight: 600; color: #3d5a54; text-decoration: none; border-inline-end: 1px solid #dbe6e3; }
.rs-segb:last-child { border-inline-end: 0; } .rs-segb--on { background: #0f5c4d; color: #fff; }
.rs-segb { min-height: 40px; display: inline-flex; align-items: center; }
.rs-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 14px; }
.rs-kpi { background: var(--surface, #fff); border-radius: 10px; padding: 10px 18px; box-shadow: 0 1px 3px #0002; } .rs-kpi b { display: block; font-size: 1.3rem; } .rs-kpi small { color: #5b726c; }
.rs--wide { max-width: none; }
.na-content:has(.rs--wide) { max-width: none; }
.na-app.side-open .na-content, .na-app.side-open .rs { max-width: none; }
/* the matrix scrolls inside its own frame so the two header rows and the grade column stay in view */
.rs-mxwrap { max-width: 100%; overflow: auto; max-height: calc(100vh - 150px); scroll-behavior: smooth; border-radius: 10px; overscroll-behavior-x: contain; }
.rs-mxt thead th { position: sticky; z-index: 3; }
.rs-mxt thead tr:first-child th { top: 0; height: 30px; box-sizing: border-box; }
.rs-mxt thead tr:nth-child(2) th { top: 30px; box-shadow: 0 3px 4px -3px rgba(11,59,50,.35); }
.rs-mxt thead th:first-child { inset-inline-start: 0; z-index: 4; background: var(--bg, #f7faf9); }
.rs-mxsub a { color: inherit; text-decoration: none; font-weight: 700; } .rs-mxsub a:hover { text-decoration: underline; }
.rs-mxt { border-collapse: separate; border-spacing: 3px; width: 100%; }
.rs-mxt th, .rs-mxt td { text-align: center; padding: 6px 4px; border-radius: 6px; }
.rs-mxgrp { background: #0b3b32; color: #fff; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.rs-mxsub { background: #dce9e5; font-size: .78rem; min-width: 92px; }
.rs-mxband th { background: #f4c542; color: #3b2f00; text-align: start; padding: 5px 10px; font-size: .75rem; letter-spacing: .05em; }
.rs-mxrh { background: #dce9e5; text-align: start !important; white-space: nowrap; padding: 8px 12px !important; position: sticky; inset-inline-start: 0; z-index: 1; }
.rs-mxrh a { color: inherit; font-weight: 700; }
.rs-mxc a { display: block; text-decoration: none; color: inherit; padding: 4px 2px; }
.rs-mxc b { display: block; font-size: 1rem; } .rs-mxc small { display: block; font-size: .7rem; }
.rs-mxc a { color: #000; }
.rs-mxdark, .rs-mxdark a { color: #fff; }
.rs-mxlow { outline: 2px dashed #b7791f; outline-offset: -2px; }
.rs-mxc:hover, .rs-mxc:focus-within { box-shadow: 0 0 0 2px #f4c542 inset; }
.rs-mxc a:focus-visible, .rs-segb:focus-visible, .rs-chip:focus-visible, .rs-row:focus-visible { outline: 3px solid #b7791f; outline-offset: 2px; }
.rs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rs-na { color: #b6c6c1; background: #f0f4f3; }
.rs-sym { font-size: .7em; opacity: .85; }
.rs-leg { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: .78rem; color: #4b625d; margin-top: 10px; }
.rs-ramp { width: 140px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(15,92,77,.08), rgba(15,92,77,.88)); }
.rs-mxlow-key { border: 2px dashed #b7791f; padding: 0 6px; border-radius: 4px; }
@media (max-width: 700px) { .rs-segb { padding: 8px 12px; } .rs-mxsub { min-width: 78px; } }
@media print {
  .rs-seg, .rs-search, .rs-dlbar, .rs-tools, .rs-chips, [data-picker] { display: none !important; }
  .rs-mxt { font-size: 8px; width: 100%; table-layout: fixed; } .rs-mxrh { position: static; padding: 3px 4px !important; white-space: normal; width: 7%; }
  .rs-mxgrp { font-size: 6px; letter-spacing: 0; padding: 2px 1px; } .rs-mxsub { min-width: 0 !important; font-size: 7px; } .rs-mxt th, .rs-mxt td { padding: 2px 1px; } .rs-mxc b { font-size: 9px; }
  .rs-scroll, .na-content, .rs { max-width: none !important; overflow: visible !important; }
  .rs-mxwrap { overflow: visible !important; max-height: none !important; } .rs-mxt thead th { position: static; } .rs-mxc small { font-size: 7px; }
  .rs-mxt th, .rs-mxt td, .rs-mxgrp, .rs-mxband th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rs-mxt tr { break-inside: avoid; } .rs-kpis { break-after: avoid; }
  @page { size: A4 landscape; margin: 8mm; }
}
.rs-tbl td .rs-bar { min-width: 90px; }