/* ============================================================
   AL-BERUNI ACADEMIC PORTAL — Design System
   Modern data console. IBM Plex. Banded risk scale.
   ============================================================ */

/* ---------- Tokens: default palette = "Ink" (deep navy/ink on warm paper) --- */
:root {
  /* type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "IBM Plex Serif", Georgia, serif;

  /* neutral ramp (paper) */
  --paper:   oklch(0.984 0.004 95);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.975 0.004 95);
  --raised:  oklch(1 0 0);
  --ink:     oklch(0.255 0.022 260);
  --ink-2:   oklch(0.42 0.02 260);
  --muted:   oklch(0.56 0.018 260);
  --faint:   oklch(0.7 0.012 260);
  --line:    oklch(0.91 0.006 260);
  --line-2:  oklch(0.86 0.008 260);

  /* brand accent (interactive) */
  --accent:     oklch(0.5 0.13 256);
  --accent-ink: oklch(0.42 0.14 256);
  --accent-soft: oklch(0.95 0.03 256);
  --accent-line: oklch(0.84 0.07 256);
  --on-accent: oklch(0.99 0.005 256);

  /* risk / semantic scale (consistent chroma family) */
  --critical:      oklch(0.56 0.18 25);
  --critical-soft: oklch(0.95 0.045 30);
  --critical-line: oklch(0.83 0.1 30);
  --watch:         oklch(0.66 0.15 55);
  --watch-soft:    oklch(0.95 0.05 70);
  --watch-line:    oklch(0.84 0.1 70);
  --monitor:       oklch(0.74 0.13 92);
  --monitor-soft:  oklch(0.96 0.05 95);
  --monitor-line:  oklch(0.85 0.09 95);
  --stable:        oklch(0.58 0.1 165);
  --stable-soft:   oklch(0.95 0.04 165);
  --stable-line:   oklch(0.83 0.07 165);
  --info:          oklch(0.6 0.1 230);

  /* geometry */
  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 260 / 0.06);
  --shadow:    0 1px 2px oklch(0.2 0.02 260 / 0.06), 0 4px 16px oklch(0.2 0.02 260 / 0.06);
  --shadow-lg: 0 8px 40px oklch(0.2 0.02 260 / 0.16);

  /* density (comfortable default) */
  --row-h: 40px;
  --pad: 20px;
  --pad-sm: 14px;
  --gap: 16px;
  --fs: 13.5px;
  --fs-sm: 12px;
  --fs-xs: 11px;

  --sidebar-w: 248px;
  --topbar-h: 56px;
}

/* ---------- Palette variants ---------- */
:root[data-palette="navy"] {
  --paper: oklch(0.97 0.008 250);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.01 250);
  --ink: oklch(0.27 0.05 255);
  --accent: oklch(0.48 0.14 255);
  --accent-ink: oklch(0.4 0.15 255);
  --accent-soft: oklch(0.94 0.035 255);
  --accent-line: oklch(0.82 0.08 255);
}
:root[data-palette="forest"] {
  --paper: oklch(0.975 0.008 130);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.01 130);
  --ink: oklch(0.28 0.03 160);
  --accent: oklch(0.46 0.09 162);
  --accent-ink: oklch(0.38 0.1 162);
  --accent-soft: oklch(0.94 0.03 162);
  --accent-line: oklch(0.8 0.07 162);
}
:root[data-palette="oxblood"] {
  --paper: oklch(0.975 0.006 40);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.008 40);
  --ink: oklch(0.28 0.03 25);
  --accent: oklch(0.45 0.13 22);
  --accent-ink: oklch(0.38 0.14 22);
  --accent-soft: oklch(0.95 0.035 25);
  --accent-line: oklch(0.83 0.09 25);
}
:root[data-palette="charcoal"] {
  --paper: oklch(0.965 0.002 260);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.955 0.002 260);
  --ink: oklch(0.22 0.005 260);
  --accent: oklch(0.4 0.02 260);
  --accent-ink: oklch(0.32 0.02 260);
  --accent-soft: oklch(0.93 0.004 260);
  --accent-line: oklch(0.8 0.006 260);
}

/* ---------- Dark theme ---------- */
:root[data-theme="dark"] {
  --paper:   oklch(0.18 0.012 260);
  --surface: oklch(0.225 0.014 260);
  --surface-2: oklch(0.2 0.013 260);
  --raised:  oklch(0.255 0.016 260);
  --ink:     oklch(0.95 0.006 260);
  --ink-2:   oklch(0.82 0.01 260);
  --muted:   oklch(0.66 0.012 260);
  --faint:   oklch(0.52 0.012 260);
  --line:    oklch(0.32 0.014 260);
  --line-2:  oklch(0.4 0.016 260);
  --accent:     oklch(0.7 0.13 256);
  --accent-ink: oklch(0.78 0.12 256);
  --accent-soft: oklch(0.32 0.06 256);
  --accent-line: oklch(0.45 0.09 256);
  --on-accent: oklch(0.16 0.02 256);
  --critical-soft: oklch(0.34 0.08 30);
  --critical-line: oklch(0.46 0.1 30);
  --watch-soft:    oklch(0.36 0.07 65);
  --watch-line:    oklch(0.48 0.09 65);
  --monitor-soft:  oklch(0.38 0.06 95);
  --monitor-line:  oklch(0.5 0.08 95);
  --stable-soft:   oklch(0.32 0.05 165);
  --stable-line:   oklch(0.44 0.07 165);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow:    0 1px 2px oklch(0 0 0 / 0.3), 0 6px 20px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 12px 48px oklch(0 0 0 / 0.55);
}
:root[data-palette="navy"][data-theme="dark"]   { --paper: oklch(0.19 0.025 258); --surface: oklch(0.235 0.03 258); }
:root[data-palette="forest"][data-theme="dark"] { --paper: oklch(0.19 0.02 165); --surface: oklch(0.235 0.024 165); }
:root[data-palette="oxblood"][data-theme="dark"]{ --paper: oklch(0.19 0.02 25);  --surface: oklch(0.235 0.024 25); }

/* ---------- Density: compact ---------- */
:root[data-density="compact"] {
  --row-h: 32px;
  --pad: 14px;
  --pad-sm: 10px;
  --gap: 12px;
  --fs: 12.5px;
  --fs-sm: 11px;
  --fs-xs: 10px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs);
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent-soft); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; border: 3px solid transparent; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.serif { font-family: var(--font-serif); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tnum { font-variant-numeric: tabular-nums; }
.upper { text-transform: uppercase; letter-spacing: 0.08em; }

/* eyebrow / micro label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
}

/* ============================================================
   Panels / cards
   ============================================================ */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.panel-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
}
.panel-h h3 { font-size: var(--fs); font-weight: 600; white-space: nowrap; }
.panel-b { padding: var(--pad); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r);
  font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--faint); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-xs); }
.btn svg { width: 15px; height: 15px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid transparent; background: transparent; color: var(--ink-2);
  border-radius: var(--r);
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }

/* ============================================================
   Badges / chips / pills
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--ink-2);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.crit  { color: var(--critical); background: var(--critical-soft); border-color: var(--critical-line); }
.badge.watch { color: oklch(0.5 0.15 55); background: var(--watch-soft); border-color: var(--watch-line); }
.badge.monitor { color: oklch(0.5 0.12 90); background: var(--monitor-soft); border-color: var(--monitor-line); }
.badge.stable { color: var(--stable); background: var(--stable-soft); border-color: var(--stable-line); }
.badge.accent { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }

/* HL/SL tags */
.tag-hl, .tag-sl {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  padding: 1px 4px; border-radius: var(--r-sm); letter-spacing: 0.04em;
}
.tag-hl { background: var(--accent-soft); color: var(--accent-ink); }
.tag-sl { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

/* ============================================================
   Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.input {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs);
  transition: border-color .12s, box-shadow .12s;
  width: 100%;
}
.input::placeholder { color: var(--faint); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select.input { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}

/* ============================================================
   Tables
   ============================================================ */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl thead th {
  text-align: left; font-weight: 600; color: var(--muted);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 9px var(--pad-sm); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  white-space: nowrap;
}
.tbl tbody td { padding: 0 var(--pad-sm); height: var(--row-h); border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ============================================================
   Utility layout
   ============================================================ */
.row { display: flex; align-items: center; gap: var(--gap); }
.col { display: flex; flex-direction: column; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.scroll-y { overflow-y: auto; }

/* divider */
.vr { width: 1px; align-self: stretch; background: var(--line); }
.hr { height: 1px; background: var(--line); border: 0; width: 100%; }

/* focus ring helper */
.focusable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }