/*
 * Nilecrest LMS — "Verdant" design system (PLAN.md §2).
 * Every colour in this codebase comes from this token block; nothing else
 * may use a raw hex value (PLAN.md §6) so a rebrand stays a one-file change.
 */

:root {
  --forest: #0f3d2e;
  --forest-2: #155843;
  --leaf: #1f8a5f;
  --gold: #f2c230;
  --mint: #f1f8f4;
  --mint-2: #e3f2ea;
  --sky: #2f7fd6;
  --rose: #e2574c;
  --ink: #10241c;
  /* darkened from the sample's #6b7f74 (3.96:1) to meet WCAG AA body text (§2.4) */
  --muted: #5a6d63;
  --line: #e2ede7;
  --r: 18px;
  --r-compact: 12px;

  --on-forest: #ffffff;
  --on-forest-muted: #c8dfd4;
  --on-forest-2-muted: #87b6a1;
  --on-gold: #4a3a04;
  --on-sky: #ffffff;
  /* small uppercase labels on --sky fail AA at white (4.09:1); use ink instead (§2.4) */
  --on-sky-label: rgba(16, 36, 28, 0.86);
  --danger-bg: #fde7e5;
  --danger-ink: #b93a2f;
  --warn-bg: #fdf3d3;
  --warn-ink: #8a6a09;
  --ok-ink: #3d7a5f;
  --mute-bg: #eef1f0;
  --mute-ink: #78877f;
  --info-ink: #2f6f55;

  /* Chart palette (PLAN.md §5 Phase 9): "derived from the Verdant tokens,
     defined here rather than improvised per chart." Five categorical
     series, reusing existing tokens rather than new hex values — a grade
     band or a series never needs a colour this block doesn't already have
     a name for. */
  --chart-1: var(--forest);
  --chart-2: var(--sky);
  --chart-3: var(--gold);
  --chart-4: var(--leaf);
  --chart-5: var(--rose);
}

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

body.canvas {
  font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  color: var(--ink);
  background: #dfe9e4;
}

a { color: inherit; }

/* ---------- shell ---------- */

.app {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 252px 1fr;
  background: var(--mint);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(9, 42, 31, .16);
  min-height: 100vh;
}

.side {
  background: var(--forest);
  color: var(--on-forest-muted);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
}

/* Logo and profile stay put; only the nav-section list scrolls
   independently when it's taller than the viewport, so the sidebar
   never scrolls away with page content and the logout link stays
   reachable at the bottom without hunting for it. */
.side-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--forest-2) transparent;
}
.side-scroll::-webkit-scrollbar { width: 6px; }
.side-scroll::-webkit-scrollbar-track { background: transparent; }
.side-scroll::-webkit-scrollbar-thumb { background: var(--forest-2); border-radius: 6px; }
.side-scroll::-webkit-scrollbar-thumb:hover { background: #1d6a51; }

.logo { display: flex; align-items: center; gap: 10px; padding: 4px 6px 16px; }
.logo .m {
  width: 36px; height: 36px; border-radius: 11px; background: var(--gold);
  display: grid; place-items: center; font-size: 17px;
}
.logo b { color: var(--on-forest); font-size: 15px; letter-spacing: .2px; display: block; line-height: 1.15; }
.logo span { font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--on-forest-2-muted); }

.me { background: var(--forest-2); border-radius: var(--r); padding: 14px; margin-bottom: 14px; }
.me .row { display: flex; align-items: center; gap: 10px; }
.me .av {
  width: 34px; height: 34px; border-radius: 50%; background: var(--gold);
  display: grid; place-items: center; font-weight: 700; color: var(--forest); font-size: 13px;
}
.me b { color: var(--on-forest); font-size: 13px; display: block; }
.me small { color: var(--on-forest-2-muted); font-size: 11px; }

.lbl {
  font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase;
  color: #6f9d88; padding: 12px 8px 5px;
}

.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px;
  color: var(--on-forest-muted); text-decoration: none; font-size: 13.2px;
}
.nav a:hover { background: var(--forest-2); color: var(--on-forest); }
.nav a.on { background: var(--gold); color: var(--forest); font-weight: 650; }
.nav a .ic { width: 17px; text-align: center; display: inline-flex; justify-content: center; }
.nav a .tag {
  margin-left: auto; font-size: 9.5px; background: rgba(255, 255, 255, .14); padding: 2px 7px; border-radius: 8px;
}
.nav a.on .tag { background: rgba(15, 61, 46, .16); color: var(--forest); }

.main { padding: 20px 24px 26px; min-width: 0; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.top h1 { font-size: 15px; font-weight: 650; margin: 0; }
.top .sub { font-size: 11.5px; color: var(--muted); }

.btn {
  border: 0; border-radius: 22px; padding: 9px 16px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.dark, .btn-primary { background: var(--forest); color: var(--on-forest); }
.btn.danger { background: var(--rose); color: #fff; }

/* ---------- cards, tiles ---------- */

.card { background: #fff; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.card .h { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px 3px; gap: 10px; }
.card .h b { font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.card .h .t { font-size: 14.5px; font-weight: 650; color: var(--ink); letter-spacing: -.1px; }
.card .bd { padding: 15px 17px 17px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 13px; }
.tile {
  border-radius: var(--r); padding: 15px; min-height: 104px; display: flex; flex-direction: column;
  justify-content: space-between; position: relative; overflow: hidden;
}
.tile .k { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; opacity: .82; font-weight: 650; }
.tile .v { font-size: 27px; font-weight: 750; letter-spacing: -.8px; line-height: 1; }
.tile .d { font-size: 10.5px; opacity: .8; margin-top: 3px; }
.tile.t-forest { background: var(--forest); color: var(--on-forest); }
.tile.t-gold { background: var(--gold); color: var(--on-gold); }
.tile.t-sky { background: var(--sky); color: var(--on-sky); }
.tile.t-sky .k, .tile.t-sky .d { color: var(--on-sky-label); opacity: 1; }
.tile.t-leaf { background: var(--leaf); color: #fff; }
.tile.t-plain { background: #fff; color: var(--ink); border: 1px solid var(--line); }

.grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 15px; }
@media (max-width: 1080px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- progress ring & bar ---------- */

.ring { text-align: center; }
.ring .dial {
  width: 82px; height: 82px; border-radius: 50%; margin: 0 auto 8px;
  display: grid; place-items: center; position: relative;
}
.ring .dial::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.ring .dial span { position: relative; z-index: 1; font-size: 19px; }
.ring .pc {
  position: absolute; bottom: -2px; right: 2px; z-index: 2; background: #fff;
  border: 1px solid var(--line); border-radius: 11px; font-size: 10px; font-weight: 700; padding: 1px 6px;
}
.ring .n { font-size: 12.3px; font-weight: 650; }
.ring .s { font-size: 10.5px; color: var(--muted); }

.prog-bar { height: 7px; background: var(--mint-2); border-radius: 9px; overflow: hidden; }
.prog-bar i { display: block; height: 100%; background: var(--leaf); }
.prog-bar.on-dark { background: rgba(255, 255, 255, .12); }
.prog-bar.on-dark i { background: var(--gold); }

/* ---------- pills, grade chips ---------- */

.pill { font-size: 9.8px; font-weight: 700; padding: 3.5px 10px; border-radius: 12px; white-space: nowrap; display: inline-block; }
.pill-ok { background: var(--mint-2); color: var(--ok-ink); }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill-bad { background: var(--danger-bg); color: var(--danger-ink); }
.pill-info { background: #dae9fb; color: #1c5296; }
.pill-mute { background: var(--mute-bg); color: var(--mute-ink); }

/* Attendance streak (PLAN.md §2.6): the one gamification-shaped element
   kept from the sample, because it maps to a real institutional rule
   (minimum attendance to sit exams, §6.7) rather than a reward system. */
.streak {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--warn-bg); color: var(--warn-ink); font-size: 11px; font-weight: 650;
  padding: 5px 12px; border-radius: 20px;
}
.streak .icon { width: 13px; height: 13px; }

/* Horizontal bar chart (PLAN.md §5 Phase 9), using the chart palette above. */
.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-chart-row { display: grid; grid-template-columns: 120px 1fr 48px; align-items: center; gap: 10px; }
.bar-chart-label { font-size: 12px; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-chart-track { background: var(--mint-2); border-radius: 8px; height: 16px; overflow: hidden; }
.bar-chart-fill { height: 100%; border-radius: 8px; min-width: 2px; }
.bar-chart-value { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }

.gr {
  display: inline-grid; place-items: center; min-width: 27px; height: 25px; padding: 0 4px;
  border-radius: 8px; font-weight: 750; font-size: 11.5px;
}
.gr-A { background: #d9f2e3; color: #1f6b45; }
.gr-B { background: #dae9fb; color: #1c5296; }
.gr-C { background: #fdf1cf; color: var(--warn-ink); }
.gr-D { background: #fde3c7; color: #9a5210; }
.gr-E, .gr-F { background: #fbdedb; color: #a83428; }

/* ---------- flow steps (release workflow) ---------- */

.flow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.flow i {
  font-style: normal; font-size: 10px; font-weight: 650; padding: 5px 11px; border-radius: 14px;
  background: var(--mute-bg); color: #8a988f;
}
.flow i.done { background: var(--mint-2); color: var(--ok-ink); }
.flow i.now { background: var(--forest); color: #fff; }
.flow s { color: #c3d2ca; text-decoration: none; font-size: 9px; }

/* ---------- timeline ---------- */

.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: flex; gap: 11px; align-items: center; padding: 9px 10px; border-radius: 12px; margin-bottom: 5px; }
.tl li.now { background: #eaf7f0; box-shadow: inset 0 0 0 1px #c6e6d5; }
.tl .tm { font-size: 11px; color: var(--muted); width: 40px; flex: none; font-variant-numeric: tabular-nums; }
.tl .txt b { display: block; font-size: 12.6px; font-weight: 600; }
.tl .txt small { color: var(--muted); font-size: 10.8px; }
.tl .st { margin-left: auto; }

/* ---------- locked panel, empty state ---------- */

.locked {
  border: 1.5px dashed #cfe0d7; border-radius: var(--r);
  background: repeating-linear-gradient(45deg, #fbfdfc, #fbfdfc 9px, #f4f9f6 9px, #f4f9f6 18px);
  padding: 26px; text-align: center;
}
.locked b { display: block; margin-top: 8px; font-size: 14px; }
.locked p { color: var(--muted); font-size: 12px; max-width: 430px; margin: 5px auto 0; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-state b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 6px; }

/* ---------- tables: two densities (PLAN.md §2.2) ---------- */

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 12px 14px; background: #f7fbf9; font-weight: 700;
}
.tbl td { padding: 13px 14px; border-top: 1px solid var(--line); font-size: 12.8px; vertical-align: middle; }
.tbl tr:hover td { background: #fbfdfc; }

.tbl--compact th { padding: 9px 12px; border-radius: 0; }
.tbl--compact td { padding: 9px 12px; font-size: 12.2px; }
.tbl--compact .in {
  width: 56px; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-compact);
  text-align: center; font: inherit; font-variant-numeric: tabular-nums; background: #fbfdfc;
}
.tbl--compact .in:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }

.num { font-variant-numeric: tabular-nums; font-weight: 700; }

.pager { display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding: 12px 14px; }
.pager-info { font-size: 11.5px; color: var(--muted); }
.btn.disabled { pointer-events: none; opacity: .5; }
.tile-icon { position: absolute; right: 12px; top: 12px; opacity: .9; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- forms ---------- */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.field input, .field select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }

/* Phase 10 accessibility audit (§2.4): the rule above only ever covered
   .field-wrapped inputs. Nothing suppressed the browser default outline
   elsewhere, so this was never actually broken, but many screens build
   inline pickers/radios/checkboxes outside .field (curriculum.php,
   attendance_register.php, staff.php, ...) — this makes the ring explicit
   and consistent everywhere instead of relying on "we never removed it." */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sky); outline-offset: 1px;
}
.field .hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.field .error { font-size: 11px; color: var(--rose); margin-top: 4px; }

.alert { border-radius: 12px; padding: 11px 14px; font-size: 12.5px; margin-bottom: 14px; }
.alert-error { background: var(--danger-bg); color: var(--danger-ink); }
.alert-ok { background: var(--mint-2); color: var(--ok-ink); }

/* ---------- icons ---------- */

.icon { width: 16px; height: 16px; display: inline-block; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- login screen ---------- */

.login-page {
  min-height: 100vh; display: grid; place-items: center; background: #dfe9e4; padding: 22px;
}
.login-card {
  background: #fff; border-radius: var(--r); padding: 36px; width: 100%; max-width: 380px;
  box-shadow: 0 18px 50px rgba(9, 42, 31, .16);
}
.login-card .logo { padding: 0 0 22px; justify-content: center; }
.login-card .logo b, .login-card .logo span { color: var(--ink); }
.login-card .logo span { color: var(--muted); }

.error-page {
  min-height: 100vh; display: grid; place-items: center; text-align: center; gap: 10px;
}
.error-page h1 { font-size: 64px; color: var(--forest); margin: 0; }

@media (max-width: 1080px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
}