/* ============================================================
   Baraem GradeFlow — Design System
   Bareem Al Ain Private School · Al Ain
   Bilingual (AR default / RTL) · WCAG-AA · Print-safe
   ============================================================ */

:root {
  /* --- Brand --- */
  --brand-900: #0b1f3a;
  --brand-800: #12304f;
  --brand-700: #1b4370;
  --brand-600: #235a95;
  --brand-500: #2f74b8;
  --brand-300: #7fb0dd;
  --brand-100: #dce9f6;
  --brand-50:  #f1f7fc;

  --gold-600: #a8791a;
  --gold-500: #d4a12c;
  --gold-400: #e8c56a;
  --gold-100: #fbf1d8;

  --teal-600: #0d7d72;
  --teal-500: #12958a;
  --teal-100: #d8f1ee;

  --green-600: #1c7a4a;
  --green-500: #22965b;
  --green-100: #dcf3e6;

  --amber-600: #a06a06;
  --amber-500: #d18b0a;
  --amber-100: #fdefd0;

  --red-600: #b3261e;
  --red-500: #d93a30;
  --red-100: #fce3e1;

  /* --- Neutrals (warm-cool balance) --- */
  --ink-900: #14181d;
  --ink-800: #232a33;
  --ink-700: #3a444f;
  --ink-600: #5a6572;
  --ink-500: #7b8592;
  --ink-400: #a3abb6;
  --ink-300: #ccd2d9;
  --ink-200: #e3e7ec;
  --ink-100: #f0f3f6;
  --ink-50:  #f7f9fb;
  --white:   #ffffff;

  /* --- Semantic --- */
  --bg:          #eef2f6;
  --surface:     #ffffff;
  --surface-2:   var(--ink-50);
  --border:      var(--ink-200);
  --border-strong: var(--ink-300);
  --text:        var(--ink-900);
  --text-soft:   var(--ink-600);
  --text-faint:  var(--ink-500);
  --accent:      var(--brand-600);
  --accent-soft: var(--brand-50);

  /* --- Radii / elevation / motion --- */
  --r-xs: 5px;  --r-sm: 8px;  --r-md: 12px;
  --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  --sh-1: 0 1px 2px rgba(20,24,29,.06), 0 1px 3px rgba(20,24,29,.05);
  --sh-2: 0 2px 4px rgba(20,24,29,.05), 0 6px 16px rgba(20,24,29,.07);
  --sh-3: 0 10px 30px rgba(20,24,29,.12), 0 2px 8px rgba(20,24,29,.08);
  --sh-4: 0 24px 60px rgba(20,24,29,.20);

  --fast: 120ms cubic-bezier(.4,0,.2,1);
  --med:  220ms cubic-bezier(.4,0,.2,1);

  --font-ar: "Cairo", "Tajawal", "Segoe UI", "Dubai", system-ui, sans-serif;
  --font-en: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "Inter", "Segoe UI", system-ui, sans-serif;

  --topbar-h: 60px;
  --sidebar-w: 250px;
}

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ar);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html[lang="en"] body { font-family: var(--font-en); }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-300); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: content-box; }

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---------------- Typography ---------------- */
h1,h2,h3,h4,h5 { line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
h4 { font-size: .95rem; }

.muted   { color: var(--text-soft); }
.faint   { color: var(--text-faint); }
.tiny    { font-size: .76rem; }
.small   { font-size: .84rem; }
.strong  { font-weight: 700; }
.mono-num, .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hide { display: none !important; }

.ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .ltr-num { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.eyebrow {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
}

/* ---------------- App shell ---------------- */
#app { min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  background: linear-gradient(105deg, var(--brand-900) 0%, var(--brand-800) 46%, var(--brand-700) 100%);
  color: #fff;
  box-shadow: var(--sh-2);
}
.topbar::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400), var(--gold-500));
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Portrait crest: square boxes shrink the 394x493 logo to ~63% and leave it
   looking off-centre. Wider-than-tall boxes keep the artwork at full size. */
.crest {
  /* Portrait frame matched to the crest's 394x493 (~0.80) ratio. A 46x54 box is
     0.85, so the image overflowed the content area and sat low. */
  width: 52px; height: 65px; flex: 0 0 auto;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--gold-400), var(--gold-600));
  display: grid; place-items: center;
  color: var(--brand-900);
  font-weight: 900; font-size: 1rem; letter-spacing: -.03em;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5), var(--sh-1);
  overflow: hidden;
}
.crest svg { width: 30px; height: 34px; }
/* The inline style on the login brand crest hardcodes a square; let CSS win
   so the logo keeps its portrait ratio everywhere it appears. */
.auth-brand-top /* 56x66 is 0.85 — wider than the crest's 0.80 ratio, so the artwork overflowed
   the content box and rendered low. 52x65 keeps the aspect and centres cleanly. */
  .crest { width: 52px !important; height: 65px !important; flex: 0 0 auto !important; }

/* ---- real school crest image ---- */
/* box-sizing keeps the 3px padding inside the 46x54 frame; without it the
   image rendered 50x63 and hung 2px past the bottom, which read as the crest
   sitting low even though it was mathematically centred. */
.crest { background: #fff; padding: 3px; box-sizing: border-box; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7), var(--sh-1); }
.crest-img {
  /* max-width/max-height, not width/height 100%: the crest is portrait (394x493),
     so stretching to the frame's box overrode the aspect ratio and pushed the
     artwork past the bottom edge. These keep the intrinsic ratio and centre it. */
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
  display: block;
  background: #fff;
  margin: auto;
}
.crest-fallback { width: 100%; height: 100%; display: grid; place-items: center; }

/* larger crest on the login screen */
/* The real crest is 394x493 — a PORTRAIT logo. Forcing it into a square with
   object-fit:contain shrinks it to ~63% and leaves it looking off-centre and
   small. These boxes respect the portrait ratio and keep the logo prominent. */
.crest-lg {
  width: 128px; height: 160px; flex: 0 0 auto;
  border-radius: 22px;
  background: #fff;
  padding: 9px 11px;
  display: grid; place-items: center;
  box-shadow: 0 10px 34px rgba(11,31,58,.20), inset 0 0 0 2px rgba(212,161,44,.42);
  margin: 0 auto 18px;
  overflow: hidden;
}
.crest-lg .crest-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; object-position: center;
  border-radius: 13px;
}

/* print header crest */
.print-head .crest {
  width: 84px; height: 100px; flex: 0 0 auto; border-radius: 12px; padding: 4px;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12);
}
.brand-text { min-width: 0; line-height: 1.2; }
.brand-text b { display: block; font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.brand-text span {
  display: block; font-size: .68rem; color: rgba(255,255,255,.68);
  font-weight: 600; letter-spacing: .04em;
}

.topbar-spacer { flex: 1 1 auto; }
.topbar-tools { display: flex; align-items: center; gap: 8px; }

.lang-toggle {
  display: flex; background: rgba(255,255,255,.13);
  border-radius: var(--r-full); padding: 3px; gap: 2px;
}
.lang-toggle button {
  padding: 5px 12px; font-size: .78rem; font-weight: 800;
  border-radius: var(--r-full); color: rgba(255,255,255,.78);
  transition: var(--fast);
}
.lang-toggle button[aria-pressed="true"] {
  background: #fff; color: var(--brand-800);
  box-shadow: var(--sh-1);
}

.who {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px; border-radius: var(--r-full);
  background: rgba(255,255,255,.12);
  cursor: pointer; transition: var(--fast);
}
.who:hover { background: rgba(255,255,255,.2); }
.who .av {
  width: 32px; height: 32px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--teal-500), var(--teal-600));
  color: #fff; font-weight: 800; font-size: .8rem;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35);
}
.who-txt { line-height: 1.25; }
.who-txt b { display: block; font-size: .8rem; font-weight: 700; }
.who-txt span { display: block; font-size: .68rem; color: rgba(255,255,255,.7); font-weight: 600; }

/* ---------------- Layout ---------------- */
/* overflow-x: clip (not hidden) — it contains the off-canvas sidebar, which is
   position:fixed and translated off-screen. Without it that translation widened
   the document's scroll area and the whole page shifted sideways on phones. */
  .shell {
    display: flex; align-items: stretch;
    min-height: calc(100vh - var(--topbar-h));
    overflow-x: clip;
  }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  padding: 14px 10px 22px;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.nav-group + .nav-group { margin-top: 18px; }
.nav-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 0 12px 7px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px; margin-bottom: 2px;
  border-radius: var(--r-md);
  font-size: .88rem; font-weight: 600; color: var(--text-soft);
  text-align: start; position: relative;
  transition: var(--fast);
}
.nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .75; }
.nav-item:hover { background: var(--ink-100); color: var(--text); }
.nav-item.active {
  background: var(--accent-soft); color: var(--brand-700); font-weight: 800;
}
.nav-item.active svg { opacity: 1; }
.nav-item.active::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 22%;
  height: 56%; width: 3px; border-radius: var(--r-full);
  background: var(--brand-600);
}
.nav-item .pill {
  margin-inline-start: auto;
  background: var(--red-500); color: #fff;
  font-size: .68rem; font-weight: 800;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full); display: grid; place-items: center;
}

.main { flex: 1 1 auto; min-width: 0; padding: 20px 22px 60px; }
.page { max-width: 1420px; margin: 0 auto; }
.page[hidden] { display: none; }

.page-head {
  display: flex; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.page-head .t { flex: 1 1 320px; min-width: 0; }
.page-head h1 { font-size: 1.42rem; }
.page-head .crumb {
  font-size: .78rem; color: var(--text-faint); font-weight: 600;
  margin-bottom: 3px;
}
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Cards ---------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card + .card { margin-top: 16px; }
.card-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.card-head h3 { flex: 1 1 auto; font-size: 1rem; }
.card-head .sub { font-size: .78rem; color: var(--text-faint); font-weight: 600; }
.card-body { padding: 18px; }
.card-body.tight { padding: 12px; }
.card-body.flush { padding: 0; }
.card-foot {
  padding: 12px 18px; border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g-side { grid-template-columns: minmax(0,1fr) 340px; }

/* ---------------- Stat tiles ---------------- */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--sh-1);
  position: relative; overflow: hidden;
}
.stat::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 4px; background: var(--brand-500);
}
.stat.g::before { background: var(--green-500); }
.stat.a::before { background: var(--amber-500); }
.stat.r::before { background: var(--red-500); }
.stat.t::before { background: var(--teal-500); }
.stat .ic {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600);
}
.stat .ic svg { width: 22px; height: 22px; }
.stat .v {
  font-family: var(--font-num); font-size: 1.62rem; font-weight: 800;
  line-height: 1.1; letter-spacing: -.02em;
}
.stat .k { font-size: .78rem; color: var(--text-soft); font-weight: 600; }
.stat .d { font-size: .72rem; font-weight: 700; margin-top: 2px; }
.stat .d.up { color: var(--green-600); }
.stat .d.dn { color: var(--red-600); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-sm);
  font-size: .86rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
  transition: var(--fast);
  min-height: 40px;
}
.btn svg { width: 17px; height: 17px; flex: 0 0 17px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--brand-600); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover:not(:disabled) { background: var(--brand-700); box-shadow: var(--sh-2); }

.btn-gold { background: var(--gold-500); color: #3a2a05; box-shadow: var(--sh-1); }
.btn-gold:hover:not(:disabled) { background: var(--gold-400); }

.btn-ghost { background: var(--surface); color: var(--text-soft); border-color: var(--border-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--ink-100); color: var(--text); }

.btn-soft { background: var(--brand-50); color: var(--brand-700); }
.btn-soft:hover:not(:disabled) { background: var(--brand-100); }

.btn-danger { background: var(--red-100); color: var(--red-600); }
.btn-danger:hover:not(:disabled) { background: #f8d3d0; }

.btn-sm { padding: 6px 11px; font-size: .78rem; min-height: 32px; border-radius: var(--r-xs); }
.btn-sm svg { width: 15px; height: 15px; flex: 0 0 15px; }
.btn-lg { padding: 12px 22px; font-size: .95rem; min-height: 46px; }
.btn-block { width: 100%; }

/* ---------------- Forms ---------------- */
.field { display: block; margin-bottom: 14px; }
.field > label, .lbl {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--text-soft); margin-bottom: 6px;
}
.field .hint { font-size: .74rem; color: var(--text-faint); margin-top: 5px; font-weight: 500; }

.input, .select, .textarea {
  width: 100%; padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 500;
  transition: var(--fast);
  min-height: 42px;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3.5px var(--brand-100);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); font-weight: 500; }
.input.invalid, .select.invalid { border-color: var(--red-500); background: #fff8f7; }
.textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8592' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 11px center;
  background-size: 16px;
  padding-inline-end: 34px;
}
[dir="rtl"] .select { background-position: left 11px center; padding-left: 34px; padding-right: 12px; }
.select.sm, .input.sm { min-height: 36px; padding: 7px 10px; font-size: .84rem; }
.select.sm { padding-left: 30px; }

.err-msg {
  display: none; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 700; color: var(--red-600);
  background: var(--red-100); padding: 9px 12px;
  border-radius: var(--r-sm); margin-bottom: 14px;
}
.err-msg.show { display: flex; }
.err-msg svg { width: 16px; height: 16px; flex: 0 0 16px; }

.check {
  display: flex; align-items: center; gap: 9px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  user-select: none;
}
.check input { width: 17px; height: 17px; accent-color: var(--brand-600); cursor: pointer; }

/* ---------------- Badges / chips ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 800; white-space: nowrap;
  background: var(--ink-100); color: var(--text-soft);
}
.badge svg { width: 13px; height: 13px; }
.badge.green { background: var(--green-100); color: var(--green-600); }
.badge.amber { background: var(--amber-100); color: var(--amber-600); }
.badge.red   { background: var(--red-100);   color: var(--red-600); }
.badge.blue  { background: var(--brand-100); color: var(--brand-700); }
.badge.teal  { background: var(--teal-100);  color: var(--teal-600); }
.badge.gold  { background: var(--gold-100);  color: var(--gold-600); }
.badge.dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-full);
  background: var(--surface); border: 1.5px solid var(--border);
  font-size: .82rem; font-weight: 700; color: var(--text-soft);
  transition: var(--fast);
}
.chip:hover { border-color: var(--ink-400); }
.chip[aria-pressed="true"] {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------------- Tables ---------------- */
.table-wrap {
  overflow: auto; max-height: 68vh;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overscroll-behavior: contain;
}
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
table.tbl th {
  position: sticky; top: 0; z-index: 5;
  background: var(--brand-900); color: #fff;
  font-size: .76rem; font-weight: 800; letter-spacing: .01em;
  text-align: start; padding: 11px 13px;
  white-space: nowrap;
}
table.tbl th.grp {
  background: var(--brand-700); text-align: center;
  border-inline-end: 1px solid rgba(255,255,255,.14);
}
table.tbl td {
  padding: 9px 13px; font-size: .85rem; font-weight: 500;
  border-bottom: 1px solid var(--ink-100);
  background: var(--surface);
}
table.tbl tbody tr:nth-child(even) td { background: var(--ink-50); }
table.tbl tbody tr:hover td { background: var(--brand-50); }
table.tbl td.num, table.tbl th.num { text-align: center; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
table.tbl .rowact { opacity: 0; transition: var(--fast); }
table.tbl tr:hover .rowact { opacity: 1; }

.empty {
  text-align: center; padding: 46px 20px; color: var(--text-faint);
}
.empty svg { width: 46px; height: 46px; margin: 0 auto 12px; opacity: .35; }
.empty p { font-size: .88rem; font-weight: 600; }

/* ---------------- Grade-entry grid (the core screen) ---------------- */
.entry-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--brand-900); color: #fff;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.entry-bar .grow { flex: 1 1 auto; }
.entry-bar .select, .entry-bar .input {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22);
  color: #fff; min-height: 36px; padding: 6px 10px; font-size: .84rem;
}
.entry-bar .select { padding-left: 30px; }
.entry-bar .select option { color: var(--ink-900); }
.entry-bar .input::placeholder { color: rgba(255,255,255,.55); }
.entry-bar .input:focus, .entry-bar .select:focus {
  border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(232,197,106,.25);
}
.entry-bar .flabel {
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  color: rgba(255,255,255,.65); display: block; margin-bottom: 3px;
}

.save-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 700;
  padding: 5px 11px; border-radius: var(--r-full);
  background: rgba(255,255,255,.14);
  transition: var(--fast);
}
.save-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-500); }
.save-chip.saved { background: rgba(34,150,91,.28); color: #c8f0da; }
.save-chip.saved .dot { background: var(--green-500); box-shadow: 0 0 0 3px rgba(34,150,91,.28); }
.save-chip.saving .dot { animation: pulse 900ms infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

table.entry { width: 100%; border-collapse: separate; border-spacing: 0; }
table.entry th {
  position: sticky; top: 0; z-index: 4;
  background: var(--ink-100); color: var(--text-soft);
  font-size: .72rem; font-weight: 800; text-align: start;
  padding: 9px 12px; border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
table.entry th.est { text-align: center; }
table.entry td {
  padding: 3px 12px; font-size: .86rem; font-weight: 500;
  border-bottom: 1px solid var(--ink-100);
  background: var(--surface);
}
table.entry tbody tr:nth-child(even) td { background: #fbfcfd; }
table.entry tbody tr:hover td { background: var(--brand-50); }
table.entry tbody tr.escrow td { background: #fffdf5; }
table.entry tbody tr.escrow:hover td { background: #fff9e6; }
table.entry td.roll {
  font-family: var(--font-num); font-weight: 800; color: var(--brand-700);
  font-size: .78rem; width: 54px; text-align: center;
}
table.entry td.sname { font-weight: 600; min-width: 190px; }
table.entry td.sname .sid { font-size: .68rem; color: var(--text-faint); font-weight: 600; display: block; }

/* grade cell */
.gcell { position: relative; }
.gin {
  width: 74px; padding: 7px 8px; text-align: center;
  border: 2px solid var(--ink-200); border-radius: var(--r-sm);
  background: var(--surface); font-family: var(--font-num);
  font-size: .92rem; font-weight: 700;
  transition: var(--fast);
}
.gin:hover:not(:disabled) { border-color: var(--brand-300); }
.gin:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3.5px var(--brand-100);
  background: #fff;
}
.gin:disabled { background: var(--ink-100); color: var(--text-faint); cursor: not-allowed; }
.gin.filled { background: var(--brand-50); border-color: var(--brand-300); }
.gin.flag { background: var(--amber-100); border-color: var(--amber-500); }
.gin.bad { background: var(--red-100); border-color: var(--red-500); }
.gin.just { animation: pop 420ms ease; }
@keyframes pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

.pct {
  font-family: var(--font-num); font-weight: 800; font-size: .86rem;
  padding: 3px 9px; border-radius: var(--r-full); display: inline-block;
  min-width: 52px; text-align: center;
}
.pct.ap, .grade-pill.ap, .meter > i.ap { background: var(--green-100); color: var(--green-600); }
.meter > i.ap { background: linear-gradient(90deg, var(--teal-500), var(--green-500)); }
.pct.ap { background: var(--teal-100); color: var(--teal-600); }
.pct.a, .grade-pill.a, .meter > i.a { background: var(--green-100); color: var(--green-600); }
.meter > i.a { background: var(--green-500); }
.pct.b { background: var(--brand-100); color: var(--brand-700); }
.pct.c { background: var(--amber-100); color: var(--amber-600); }
.pct.d { background: var(--red-100);   color: var(--red-600); }
.pct.e { background: var(--ink-100);   color: var(--text-faint); }

.presets { display: flex; gap: 3px; }
.preset {
  width: 27px; height: 27px; border-radius: var(--r-xs);
  font-size: .7rem; font-weight: 800; color: #fff;
  display: grid; place-items: center; transition: var(--fast);
}
.preset:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.preset.p1 { background: var(--green-500); }
.preset.p2 { background: var(--brand-500); }
.preset.p3 { background: var(--amber-500); }
.preset.p4 { background: var(--orange-600, #c05621); }
.preset.p5 { background: var(--red-500); }
.preset.abs { background: var(--ink-400); }
.preset.na { background: var(--ink-200); color: var(--ink-600); }

/* ---------------- Attendance / behaviour ---------------- */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }
.att-student {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
  transition: var(--fast);
}
.att-student.done { border-color: var(--green-500); background: var(--green-100); }
.att-student .info { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.att-student .info b { display: block; font-size: .86rem; font-weight: 700; }
.att-student .info span { font-size: .7rem; color: var(--text-faint); font-family: var(--font-num); font-weight: 700; }
.att-toggle { display: flex; gap: 3px; flex: 0 0 auto; }
.att-toggle button {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; transition: var(--fast);
  border: 1.5px solid var(--border); background: var(--surface);
}
.att-toggle button svg { width: 16px; height: 16px; }
.att-toggle button:hover { border-color: var(--ink-400); }
.att-toggle button[aria-pressed="true"].p { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.att-toggle button[aria-pressed="true"].a { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.att-toggle button[aria-pressed="true"].l { background: var(--amber-500); border-color: var(--amber-500); color: #fff; }

/* ---------------- Parent portal ---------------- */
.child-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.child-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 15px 8px 9px; border-radius: var(--r-full);
  background: var(--surface); border: 1.5px solid var(--border);
  transition: var(--fast); text-align: start;
}
.child-tab .av {
  width: 32px; height: 32px; border-radius: var(--r-full);
  display: grid; place-items: center; color: #fff;
  font-weight: 800; font-size: .78rem; flex: 0 0 32px;
}
.child-tab .nm { line-height: 1.25; }
.child-tab .nm b { display: block; font-size: .85rem; font-weight: 700; }
.child-tab .nm span { display: block; font-size: .68rem; color: var(--text-faint); font-weight: 600; }
.child-tab[aria-selected="true"] {
  border-color: var(--brand-600); background: var(--brand-50);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.child-tab[aria-selected="true"] .nm b { color: var(--brand-700); }

.meter { height: 9px; background: var(--ink-200); border-radius: var(--r-full); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: var(--r-full); transition: width var(--med); }
.meter > i.a { background: var(--green-500); }
.meter > i.b { background: var(--brand-500); }
.meter > i.c { background: var(--amber-500); }
.meter > i.d { background: var(--red-500); }

.subj-row {
  display: grid; grid-template-columns: minmax(120px,1.4fr) 92px 1fr 74px;
  gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--ink-100);
}
.subj-row:last-child { border-bottom: none; }
.subj-row .nm { font-size: .88rem; font-weight: 700; }
.subj-row .nm span { display: block; font-size: .7rem; color: var(--text-faint); font-weight: 600; }
.subj-row .avg { font-family: var(--font-num); font-weight: 800; font-size: 1rem; text-align: center; }

.grade-pill {
  font-family: var(--font-num); font-weight: 800; font-size: .78rem;
  min-width: 62px; padding: 3px 0; text-align: center;
  border-radius: var(--r-sm);
}
.grade-pill.a { background: var(--green-100); color: var(--green-600); }
.grade-pill.b { background: var(--brand-100); color: var(--brand-700); }
.grade-pill.c { background: var(--amber-100); color: var(--amber-600); }
.grade-pill.d { background: var(--red-100);   color: var(--red-600); }
.grade-pill.e { background: var(--ink-100);   color: var(--text-faint); }

.timeline { position: relative; padding-inline-start: 24px; }
.timeline::before {
  content: ""; position: absolute; inset-block: 6px; inset-inline-start: 6px;
  width: 2px; background: var(--ink-200);
}
.tl-item { position: relative; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; inset-inline-start: -21px; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
.tl-item.green::before { background: var(--green-500); box-shadow: 0 0 0 3px var(--green-100); }
.tl-item.amber::before { background: var(--amber-500); box-shadow: 0 0 0 3px var(--amber-100); }
.tl-item.red::before   { background: var(--red-500);   box-shadow: 0 0 0 3px var(--red-100); }
.tl-item .d { font-size: .7rem; font-weight: 700; color: var(--text-faint); font-family: var(--font-num); }
.tl-item p { font-size: .85rem; font-weight: 500; margin-top: 2px; }

.note {
  border-inline-start: 3.5px solid var(--gold-500);
  background: var(--gold-100);
  padding: 11px 14px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .85rem; font-weight: 500;
}
[dir="rtl"] .note { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.note + .note { margin-top: 9px; }
.note b { display: block; font-size: .74rem; color: var(--gold-600); margin-bottom: 3px; font-weight: 800; }

.ann {
  display: flex; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--ink-100);
}
.ann:last-child { border-bottom: none; }
.ann .ic {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600);
}
.ann .ic svg { width: 19px; height: 19px; }
.ann h4 { font-size: .89rem; margin-bottom: 3px; }
.ann p { font-size: .82rem; color: var(--text-soft); }
.ann .meta { font-size: .7rem; color: var(--text-faint); font-weight: 700; margin-top: 5px; }

/* ---------------- Login ---------------- */
.auth-wrap {
  min-height: 100vh; display: grid;
  grid-template-columns: 1.05fr .95fr;
}
.auth-brand {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--teal-600) 100%);
  padding: 44px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-brand::before, .auth-brand::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.11);
}
.auth-brand::before { width: 620px; height: 620px; top: -190px; inset-inline-end: -230px; }
.auth-brand::after  { width: 420px; height: 420px; bottom: -140px; inset-inline-start: -150px; }
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-top { display: flex; align-items: center; gap: 12px; }
.auth-brand-body { margin-block: 26px 18px; }
.auth-brand-body h2 { text-wrap: balance; }
.auth-trust { font-size: .78rem; color: rgba(255,255,255,.72); letter-spacing: .01em; }
.auth-brand h2 {
  font-size: 2.1rem; line-height: 1.25; max-width: 15ch; font-weight: 800;
}
.auth-brand .lead { margin-top: 14px; font-size: .95rem; color: rgba(255,255,255,.8); max-width: 46ch; }
.auth-feats { display: grid; gap: 13px; margin-top: 30px; }
.auth-feat { display: flex; gap: 12px; align-items: flex-start; }
.auth-feat .ic {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.14); display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18);
}
.auth-feat .ic svg { width: 18px; height: 18px; }
.auth-feat b { display: block; font-size: .88rem; font-weight: 700; }
.auth-feat span { font-size: .79rem; color: rgba(255,255,255,.68); }
.auth-trust { font-size: .74rem; color: rgba(255,255,255,.55); font-weight: 600; }

/* Soft radial wash behind the card so the form sits on a surface with depth
   instead of flat grey. The card itself gets a soft lift + gold hairline. */
.auth-panel {
  display: grid; place-items: center; padding: 44px 26px;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(212,161,44,.14), transparent 62%),
    radial-gradient(900px 560px at 8% 108%, rgba(14,116,144,.13), transparent 60%),
    var(--surface);
}
.auth-card {
  position: relative;
  border-radius: 22px;
  padding: 34px 30px 28px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(11,31,58,.05), 0 18px 50px -14px rgba(11,31,58,.22);
  animation: cardRise .5s cubic-bezier(.22,.9,.28,1) both;
}
.auth-card::before {
  content: ""; position: absolute; inset-inline: 30px; top: 0; height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--gold-500), var(--teal-500));
}
@keyframes cardRise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
}
.auth-card { width: 100%; max-width: 424px; }
.auth-card .crest-lg {
  width: 112px; height: 140px; margin: 0 auto 20px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(11,31,58,.18), inset 0 0 0 2px rgba(212,161,44,.42);
}
.auth-card h1 { font-size: 1.42rem; text-align: center; }
.auth-card .sub { text-align: center; color: var(--text-soft); font-size: .87rem; margin-top: 5px; margin-bottom: 24px; }

.role-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--ink-100); padding: 4px; border-radius: var(--r-md);
  margin-bottom: 20px;
}
.role-tabs button {
  padding: 9px 6px; border-radius: var(--r-sm);
  font-size: .81rem; font-weight: 800; color: var(--text-soft);
  transition: var(--fast);
}
.role-tabs button[aria-pressed="true"] {
  background: var(--surface); color: var(--brand-700); box-shadow: var(--sh-1);
}

.demo-box {
  margin-top: 20px; padding: 14px 16px;
  background: var(--brand-50); border: 1.5px dashed var(--brand-300);
  border-radius: var(--r-md);
}
.demo-box h4 { font-size: .78rem; color: var(--brand-700); margin-bottom: 9px; text-transform: uppercase; letter-spacing: .07em; }
.demo-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-sm); text-align: start;
  transition: var(--fast);
}
.demo-row:hover { background: rgba(255,255,255,.85); }
.demo-row .av {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--r-full);
  display: grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 800;
}
.demo-row .t { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.demo-row .t b { display: block; font-size: .8rem; font-weight: 700; }
.demo-row .t span { display: block; font-size: .68rem; color: var(--text-faint); font-family: var(--font-num); direction: ltr; text-align: start; }

/* ---------------- Modal ---------------- */
.modal-bg {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,31,58,.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 22px;
  animation: fade 160ms ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  animation: rise 220ms cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { transform: translateY(22px) scale(.98); opacity: 0; } }
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.modal-head h3 { flex: 1 1 auto; font-size: 1.05rem; }
.modal-body { padding: 20px; }
.modal-foot {
  display: flex; gap: 9px; justify-content: flex-end;
  padding: 15px 20px; border-top: 1px solid var(--border);
  background: var(--surface-2); position: sticky; bottom: 0;
}
.x-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-soft);
  transition: var(--fast);
}
.x-btn:hover { background: var(--ink-100); color: var(--text); }
.x-btn svg { width: 18px; height: 18px; }

/* ---------------- Toast ---------------- */
#toasts {
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px;
  z-index: 300; display: flex; flex-direction: column; gap: 9px;
  max-width: 360px;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px; border-radius: var(--r-md);
  background: var(--ink-900); color: #fff;
  box-shadow: var(--sh-3); font-size: .85rem; font-weight: 600;
  animation: slidein 240ms cubic-bezier(.2,.8,.3,1);
}
@keyframes slidein { from { transform: translateX(-24px); opacity: 0; } }
.toast.out { animation: slideout 200ms ease forwards; }
@keyframes slideout { to { transform: translateX(-24px); opacity: 0; } }
.toast svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.toast.ok { background: #14663f; }
.toast.warn { background: #8a5a05; }
.toast.err { background: #8f1e18; }

/* ---------------- Helpers ---------------- */
.flex { display: flex; }
.ac { align-items: center; }
.jc { justify-content: center; }
.je { justify-content: flex-end; }
.jb { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; }
.g10 { gap: 10px; } .g12 { gap: 12px; } .g16 { gap: 16px; }
.g20 { gap: 20px; } .g24 { gap: 24px; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; } .mt24 { margin-top: 24px; }
.mb4 { margin-bottom: 4px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.mb16 { margin-bottom: 16px; } .mb20 { margin-bottom: 20px; }
.w100 { width: 100%; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.vdivider { width: 1px; align-self: stretch; background: var(--border); }

.kbd {
  display: inline-block; padding: 2px 7px;
  background: var(--ink-100); border: 1.5px solid var(--ink-200);
  border-bottom-width: 2.5px; border-radius: var(--r-xs);
  font-family: var(--font-num); font-size: .72rem; font-weight: 700;
  color: var(--text-soft);
}

.banner {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; border-radius: var(--r-md);
  background: var(--brand-50); border: 1.5px solid var(--brand-100);
  font-size: .85rem; font-weight: 500;
}
.banner svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--brand-600); margin-top: 1px; }
.banner.warn { background: var(--amber-100); border-color: #f4dfa8; }
.banner.warn svg { color: var(--amber-600); }
.banner.red { background: var(--red-100); border-color: #f5ccc8; }
.banner.red svg { color: var(--red-600); }

.spin { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Responsive ---------------- */
@media (max-width: 1080px) {
  .g-side { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Single column: the brand panel becomes a compact banner ABOVE the form
     instead of being display:none. Hiding it left a bare login form with the
     school crest floating alone and no sense of place. */
  .auth-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand {
    display: flex; padding: 26px 22px 30px;
    justify-content: flex-start; gap: 18px; align-items: center;
  }
  .auth-brand::before { width: 340px; height: 340px; top: -150px; inset-inline-end: -120px; }
  .auth-brand::after  { display: none; }
  .auth-brand > .auth-brand-body { display: none; }
  .auth-brand h2 { font-size: 1.5rem; max-width: none; }
}
@media (max-width: 560px) {
  .auth-brand { padding: 20px 16px 24px; }
  .auth-panel { padding: 26px 16px 40px; }
  .auth-card .crest-lg { width: 96px; height: 120px; }
}
@media (max-width: 860px) {
  .sidebar {
    position: fixed; inset-block: var(--topbar-h) 0; inset-inline-start: 0;
    z-index: 70; transform: translateX(var(--sb-off, 100%));
    transition: transform var(--med); box-shadow: var(--sh-4);
  }
  html[dir="rtl"] .sidebar { --sb-off: 100%; }
  .sidebar.open { transform: translateX(0); }
  .scrim {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(11,31,58,.45);
  }
  .main { padding: 16px 13px 50px; }
  .g-2, .g-3 { grid-template-columns: 1fr; }
  .brand-text span { display: none; }
  .page-head h1 { font-size: 1.2rem; }
  .who-txt { display: none; }
  .subj-row { grid-template-columns: 1fr 62px; grid-template-areas: "nm avg" "mt mt" "sc sc"; }
  .subj-row .meter { grid-area: mt; }
  .subj-row .avg { grid-area: avg; }
  .subj-row .nm { grid-area: nm; }
  .subj-row .grade-pill { grid-area: sc; justify-self: start; }
  .entry-bar { padding: 11px 12px; }
  .entry-bar > * { flex: 1 1 100%; }
  .entry-bar .grow { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .g-4 { grid-template-columns: 1fr; }
  .stat { padding: 13px 14px; }
  .stat .v { font-size: 1.35rem; }
  .topbar { padding: 0 11px; gap: 9px; }
  .gin { width: 62px; }
  #toasts { inset-inline: 12px; max-width: none; }
}
@media (min-width: 861px) { .menu-btn { display: none; } .scrim { display: none; } }

/* ============================================================
   PRINT — report card / student profile
   ============================================================ */
@media print {
  @page { size: A4; margin: 12mm 10mm; }
  body { background: #fff !important; font-size: 11pt; }
  .topbar, .sidebar, .page-head .actions, .btn, .no-print,
  .child-tabs, #toasts, .scrim, .entry-bar { display: none !important; }
  .main { padding: 0 !important; }
  .page[hidden] { display: none !important; }
  .print-only { display: block !important; }
  .card {
    border: none !important; box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .card-head { border-bottom: 2px solid #000 !important; padding: 8px 0 !important; }
  .print-head {
    display: flex !important; align-items: center; gap: 14px;
    border-bottom: 3px double #000; padding-bottom: 10px; margin-bottom: 14px;
  }
  .print-head .crest { width: 84px; height: 100px; flex: 0 0 auto; }
  .print-head h1 { font-size: 15pt; }
  .print-head .meta { font-size: 9pt; color: #333; margin-top: 2px; }
  table.tbl { font-size: 10pt; }
  table.tbl th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.tbl td, table.tbl th { border: 1px solid #999 !important; padding: 5px 7px !important; }
  table.tbl th { position: static !important; }
  .meter > i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .grade-pill, .pct, .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page-break { break-before: page; page-break-before: always; }
  a { color: #000; text-decoration: none; }
}
.print-only { display: none; }

/* ============================================================
   CREST — transparent presentation

   The crest is a transparent PNG. The old frames painted a gold
   gradient / white card behind it, which boxed the artwork in and
   made it read as a logo stuck on a badge. These rules drop every
   background, kill the hard edge, and let a soft glow do the work
   instead — the artwork floats on whatever surface it sits on.
   ============================================================ */

.crest-clear {
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
}
.crest-clear .crest-img {
  background: none !important;
  border-radius: 0 !important;
  /* A soft drop shadow follows the alpha edge, so the transparent
     artwork still separates from light and dark surfaces alike. */
  filter: drop-shadow(0 6px 16px rgba(4,18,38,.38))
          drop-shadow(0 1px 2px rgba(4,18,38,.22));
}
/* The image itself is portrait (~0.80); keep the frame on the same
   ratio so it never overflows and never looks off-centre. */
.crest-clear.crest     { width: 54px !important; height: 68px !important; }
.crest-clear.crest-lg  { width: 132px !important; height: 165px !important;
                         margin: 0 auto 20px; }
.crest-clear.crest-lg .crest-img {
  filter: drop-shadow(0 14px 34px rgba(4,18,38,.34))
          drop-shadow(0 2px 6px rgba(4,18,38,.20));
}

/* Lift it slightly on load, respecting reduced-motion. */
.crest-clear .crest-img {
  animation: crestFloat .9s cubic-bezier(.22,.9,.28,1) both;
}
@keyframes crestFloat {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .crest-clear .crest-img { animation: none; }
}

/* ============================================================
   LOGIN — fits the viewport

   The card is ~830px of content. On a short window (a 1536x647
   laptop, or any laptop with browser chrome eating the height)
   that pushed the sign-in fields below the fold, so the page
   "looked like it started too far down".

   Two fixes: let the brand copy collapse when height is short,
   and shrink the card's own blocks so it always fits 100vh.
   ============================================================ */

/* Crest size steps down on short viewports. */
@media (max-height: 800px) {
  .auth-card .crest-clear.crest-lg { width: 104px !important; height: 130px !important; margin-bottom: 14px !important; }
  .auth-card { padding: 24px 26px 20px !important; }
  .auth-card h1 { font-size: 1.24rem !important; }
  .auth-card .sub { margin-bottom: 16px !important; }
  .auth-card .role-tabs { margin-bottom: 14px !important; }
}
@media (max-height: 700px) {
  .auth-card .crest-clear.crest-lg { width: 82px !important; height: 102px !important; margin-bottom: 10px !important; }
  .auth-card .demo-box { margin-top: 12px !important; padding: 10px 12px !important; }
  .auth-card .demo-box h4 { margin-bottom: 6px !important; }
}

/* The demo-credentials box is the bulkiest, least important part. */
.auth-card .demo-box {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: .78rem;
  line-height: 1.55;
}
.auth-card .demo-box h4 {
  margin: 0 0 8px;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .62;
}

/* Short viewports: the marketing column is expendable, so trim it
   rather than let it push the card down. */
@media (max-height: 780px) {
  .auth-brand-body h2 { font-size: 1.5rem !important; }
  .auth-brand-body .lead { font-size: .9rem !important; }
  .auth-feats .feat { padding: 8px 0 !important; }
}
@media (max-height: 660px) {
  .auth-brand-body .lead { display: none; }
  .auth-brand-body h2 { font-size: 1.3rem !important; }
  .auth-brand { padding: 30px 34px !important; }
  .auth-panel { padding: 22px 20px !important; }
}

/* ============================================================
   LOGIN — hard viewport fit

   Each column sizes to its own content instead of stretching to
   the tallest one. `align-items: start` stops the 830px marketing
   column from stretching the 560px card's grid track, which is
   what pushed the sign-in button off a 647px-tall window.

   `min-height: 0` on the flex/grid children lets the columns
   actually shrink, and the card gets `overflow: auto` as a last
   resort for genuinely tiny screens.
   ============================================================ */

.auth-wrap {
  align-items: start;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.auth-brand,
.auth-panel {
  min-height: 0;
  align-self: stretch;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The card itself must never exceed the frame. */
.auth-panel { padding: clamp(14px, 2.4vh, 44px) 26px; }
.auth-card {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Short-window trims, applied together rather than at separate
   breakpoints so the card reliably fits ~620px of height. */
@media (max-height: 860px) {
  .auth-card { padding: 22px 24px 18px !important; }
  .auth-card .crest-clear.crest-lg { width: 92px !important; height: 115px !important; margin-bottom: 12px !important; }
  .auth-card h1 { font-size: 1.2rem !important; }
  .auth-card .sub { margin: 4px 0 16px !important; font-size: .84rem !important; }
  .auth-card .role-tabs { margin-bottom: 14px !important; }
  .auth-card .demo-box { padding: 10px 12px !important; margin-top: 14px !important; font-size: .74rem !important; }
  .auth-brand-body h2 { font-size: 1.42rem !important; }
  .auth-brand-body .lead { font-size: .88rem !important; }
  .auth-feats { gap: 10px !important; }
}
@media (max-height: 720px) {
  .auth-card .crest-clear.crest-lg { width: 74px !important; height: 92px !important; margin-bottom: 9px !important; }
  .auth-card .demo-box { margin-top: 11px !important; padding: 8px 11px !important; }
  .auth-brand-body .lead { display: none; }
  .auth-brand { padding: 26px 30px !important; }
  .auth-brand-top .brand-text b { font-size: .95rem !important; }
}
@media (max-height: 600px) {
  .auth-brand-body .auth-feats { display: none; }
  .auth-card .demo-box { display: none; }
  .auth-card .crest-clear.crest-lg { width: 58px !important; height: 72px !important; margin-bottom: 8px !important; }
}

/* ============================================================
   LOGIN — narrow / stacked layout

   Under 1080px the two columns stack: the brand becomes a compact
   banner above the form. In that mode the page is genuinely taller
   than the window (a banner plus a form), so allow vertical
   scrolling again instead of clipping the sign-in button away.
   ============================================================ */
@media (max-width: 1080px) {
  .auth-wrap {
    height: auto;
    max-height: none;
    min-height: 100vh;
    overflow: visible;
    align-items: stretch;
  }
  .auth-brand,
  .auth-panel {
    overflow: visible;
    align-self: auto;
  }
  /* The form gets first-class space on small screens. */
  .auth-panel { padding: 26px 20px 44px; }
  .auth-card { max-height: none; overflow: visible; margin: 0 auto; }
  /* Marketing copy is redundant once the form needs the room. */
  .auth-brand-body .auth-feats { display: none; }
}
@media (max-width: 620px) {
  .auth-panel { padding: 20px 16px 40px; }
  .auth-card { padding: 20px 18px 16px !important; border-radius: 18px; }
  .auth-brand { padding: 20px 16px 22px !important; }
  .auth-brand-body .lead { display: none; }
  .auth-brand-body h2 { font-size: 1.16rem !important; }
}

/* ============================================================
   LOGIN — crest watermark + trust pill

   The brand column carries a large, very low-opacity copy of the
   crest behind its content, so the logo reads as part of the
   composition instead of a sticker in a box.
   ============================================================ */
.auth-brand { position: relative; isolation: isolate; overflow: hidden; }
.auth-brand::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  inset-inline-start: 50%;
  width: min(78%, 460px);
  aspect-ratio: 394 / 493;
  transform: translate(-50%, -50%);
  background: url('../img/crest.png') center / contain no-repeat;
  opacity: .07;
  filter: grayscale(1) contrast(1.15);
  pointer-events: none;
  animation: crestDrift 26s ease-in-out infinite alternate;
}
[dir="ltr"] .auth-brand::before { transform: translate(-50%, -50%); }
.auth-brand > * { position: relative; z-index: 1; }

@keyframes crestDrift {
  from { transform: translate(-52%, -50%) scale(1);    opacity: .07; }
  to   { transform: translate(-48%, -50%) scale(1.06); opacity: .10; }
}

/* The trust line lost its shield and its marketing claim; it is now a
   small factual pill with a coloured dot instead. */
.auth-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 14px;
  border-radius: 99px;
  font-size: .8rem;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.auth-trust .dot {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: #7ee8fa;
  box-shadow: 0 0 0 3px rgba(126,232,250,.22);
}

@media (prefers-reduced-motion: reduce) {
  .auth-brand::before { animation: none; }
}