/* ==========================================================================
   Parent Portal — design tokens
   Egerton identity (deep green + heritage gold) rebuilt as a modern,
   low-chrome interface. Light and dark are both first-class.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Egerton University official colour scheme
     https://www.egerton.ac.ke/scheme

       Main green   #00a650   <- the main colour for this portal
       Dark green   #007624   (kept as ~green-700)
       Red          #ed1c24
       Gold/mustard #d2ac67
       Gray         #bcbec1
       Light green  #e0eee1

     The ramps below are built around those exact values: every named step
     is either an official colour or a tint/shade of one.
     --------------------------------------------------------------------- */

  /* Green — 500 is THE main colour; every darker step is a shade of it, so the
     gradients stay in one family instead of drifting to a different green. */
  --green-50:  #eefaf3;
  --green-100: #e0eee1;   /* official light green */
  --green-200: #b8e6cb;
  --green-300: #7ed6a3;
  --green-400: #2fbf72;
  --green-500: #00a650;   /* MAIN COLOUR */
  --green-600: #009246;
  --green-700: #007739;   /* ~ the official dark green #007624 */
  --green-800: #00602e;
  --green-900: #004923;
  --green-950: #003118;

  /* Gold / mustard — 400 is the official value */
  --gold-50:  #faf6ec;
  --gold-100: #f4ead2;
  --gold-200: #e9d6a9;
  --gold-300: #ddc189;
  --gold-400: #d2ac67;    /* official gold / mustard */
  --gold-500: #bf9548;
  --gold-600: #a37c35;
  --gold-700: #83622a;
  --gold-800: #634a20;
  --gold-900: #473519;

  /* Red — 500 is the official value */
  --red-50:  #fdecec;
  --red-100: #fbd5d7;
  --red-300: #f4787e;
  --red-500: #ed1c24;     /* official red */
  --red-600: #cf141c;
  --red-700: #a80f16;

  /* Neutrals — anchored on the official gray #bcbec1 */
  --ink-950: #0a0c0b;
  --ink-900: #14171a;
  --ink-800: #1f2427;
  --ink-700: #2c3235;
  --ink-600: #454b4f;
  --ink-500: #62686d;
  --ink-400: #8f9296;
  --ink-300: #bcbec1;     /* official gray */
  --ink-200: #dcdedf;
  --ink-100: #ebeced;
  --ink-50:  #f5f6f6;

  /* Semantic — green and red are the official ones */
  --success: var(--green-600);
  --success-soft: var(--green-100);
  --warning: #b07d15;
  --warning-soft: #fbf1da;
  /* The official red is 4.4:1 on white — a shade down clears AA for text,
     while --red-500 stays available for fills, borders and charts. */
  --danger:  var(--red-600);
  --danger-soft: var(--red-50);
  --info:    #17607f;
  --info-soft: #e3f0f5;

  /* Roles — light theme */
  --canvas: #f4f6f5;
  --canvas-tint: #eaefeb;
  --surface: #ffffff;
  --surface-2: #f8faf9;
  --surface-3: #f1f4f2;
  /* The gradient is kept, anchored on the main colour and deepening downward
     so the navigation labels stay legible against it. */
  --sidebar-from: var(--green-500);
  --sidebar-to: var(--green-900);
  --sidebar-ink: #d8ecdc;
  --sidebar-ink-dim: #8fb39a;
  --sidebar-hover: rgba(255, 255, 255, .07);
  --sidebar-active: rgba(255, 255, 255, .12);

  --text: #14191a;
  --text-strong: #080c0b;
  --text-muted: #5c6462;
  --text-faint: #868d8b;
  --text-invert: #ffffff;

  --border: #e4e8e5;
  --border-strong: var(--ink-300);
  --border-subtle: #eef1ef;

  /* #00a650 is the main colour: it fills buttons, gradients and active states.
     White on it measures 3.2:1, which is under AA for label-sized text, so
     --primary-text (a shade of the same green) is used wherever the green is
     the ink rather than the fill — links, figures, chips on light surfaces. */
  --primary: var(--green-500);
  --primary-hover: var(--green-600);
  --primary-text: var(--green-700);
  --primary-soft: var(--green-100);
  --primary-ink: #ffffff;
  --accent: var(--gold-400);
  --accent-soft: var(--gold-50);

  --ring: rgba(0, 166, 80, .32);
  --overlay: rgba(0, 20, 8, .5);

  /* Elevation — short, tight shadows; nothing floaty */
  --shadow-xs: 0 1px 2px rgba(11, 24, 18, .05);
  --shadow-sm: 0 1px 3px rgba(11, 24, 18, .07), 0 1px 2px rgba(11, 24, 18, .04);
  --shadow-md: 0 4px 14px rgba(11, 24, 18, .07), 0 1px 3px rgba(11, 24, 18, .05);
  --shadow-lg: 0 18px 44px rgba(11, 24, 18, .12), 0 4px 12px rgba(11, 24, 18, .06);

  /* Geometry */
  --r-xs: 6px;
  --r-sm: 9px;
  --r: 13px;
  --r-lg: 17px;
  --r-xl: 24px;
  --r-pill: 999px;

  --sidebar-w: 272px;
  --sidebar-w-collapsed: 78px;
  --topbar-h: 68px;
  --gutter: 22px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: 140ms;
  --slow: 280ms;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-sans);
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  color-scheme: light;
}

/* Dark theme: explicit choice wins, system preference is the fallback */
:root[data-theme="dark"] {
  --canvas: #07100a;
  --canvas-tint: #0a150d;
  --surface: #0f1c14;
  --surface-2: #15251a;
  --surface-3: #1c2f22;
  --sidebar-ink: #d8ecdc;
  --sidebar-ink-dim: #7fa189;
  --sidebar-hover: rgba(255, 255, 255, .06);
  --sidebar-active: rgba(255, 255, 255, .11);

  --text: #e6efe8;
  --text-strong: #f5faf6;
  --text-muted: #9aaa9e;
  --text-faint: #74847a;
  --text-invert: #04150a;

  --border: #24352a;
  --border-strong: #33473a;
  --border-subtle: #1b291f;

  /* On a dark ground the main colour is 6:1 against the canvas, so it carries
     both fills and text. */
  --primary: var(--green-500);
  --primary-hover: var(--green-400);
  --primary-text: var(--green-400);
  --primary-soft: rgba(0, 166, 80, .16);
  --primary-ink: #04150a;
  --accent: var(--gold-300);
  --accent-soft: rgba(210, 172, 103, .14);

  --success: var(--green-400);
  --success-soft: rgba(69, 184, 120, .16);
  --warning: #d9a13c;
  --warning-soft: rgba(217, 161, 60, .16);
  --danger: #f4787e;
  --danger-soft: rgba(237, 28, 36, .18);
  --info: #5aa8c4;
  --info-soft: rgba(90, 168, 196, .16);

  --ring: rgba(0, 166, 81, .36);
  --overlay: rgba(0, 8, 3, .68);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .36);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .4);
  --shadow-lg: 0 22px 52px rgba(0, 0, 0, .52);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #07100a;
    --canvas-tint: #0a150d;
    --surface: #0f1c14;
    --surface-2: #15251a;
    --surface-3: #1c2f22;
    --sidebar-ink: #d8ecdc;
    --sidebar-ink-dim: #7fa189;
    --sidebar-hover: rgba(255, 255, 255, .06);
    --sidebar-active: rgba(255, 255, 255, .11);

    --text: #e6efe8;
    --text-strong: #f5faf6;
    --text-muted: #9aaa9e;
    --text-faint: #74847a;
    --text-invert: #04150a;

    --border: #24352a;
    --border-strong: #33473a;
    --border-subtle: #1b291f;

    --primary: var(--green-500);
    --primary-hover: var(--green-400);
    --primary-text: var(--green-400);
    --primary-soft: rgba(0, 166, 80, .16);
    --primary-ink: #04150a;
    --accent: var(--gold-300);
    --accent-soft: rgba(210, 172, 103, .14);

    --success: var(--green-400);
    --success-soft: rgba(69, 184, 120, .16);
    --warning: #d9a13c;
    --warning-soft: rgba(217, 161, 60, .16);
    --danger: #f4787e;
    --danger-soft: rgba(237, 28, 36, .18);
    --info: #5aa8c4;
    --info-soft: rgba(90, 168, 196, .16);

    --ring: rgba(0, 166, 80, .36);
    --overlay: rgba(0, 8, 3, .68);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .36);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .4);
    --shadow-lg: 0 22px 52px rgba(0, 0, 0, .52);

    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   Bootstrap bridge — let Bootstrap components inherit the theme
   -------------------------------------------------------------------------- */
:root {
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--canvas);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--r);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 0, 166, 80;
  --bs-link-color: var(--primary-text);
  --bs-link-hover-color: var(--primary);
  --bs-focus-ring-color: var(--ring);
  --bs-emphasis-color: var(--text-strong);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-bg: var(--surface-2);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: -.018em;
  font-weight: 700;
  margin: 0;
}

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

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 1rem 0; opacity: 1; }

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

::selection { background: var(--primary-soft); color: var(--text-strong); }

/* Scrollbars — thin and theme-aware */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* --------------------------------------------------------------------------
   Typographic utilities
   -------------------------------------------------------------------------- */
.t-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.026em; }
.t-eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.t-muted { color: var(--text-muted); }
.t-faint { color: var(--text-faint); }
.t-strong { color: var(--text-strong); }
.t-sm { font-size: .8125rem; }
.t-xs { font-size: .75rem; }
.t-mono { font-family: var(--font-mono); font-size: .8125rem; }
.t-num { font-variant-numeric: tabular-nums; }
.t-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }
.text-info    { color: var(--info) !important; }
.text-accent  { color: var(--accent) !important; }
.text-primary { color: var(--primary-text) !important; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
}