@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =============================================================================
 * Nzura Ops — Admin Design Tokens (canonical source of truth)
 * ---------------------------------------------------------------------------
 * Every CSS custom property used by the admin SPA is declared in THIS file
 * and nowhere else. admin-shell.css, admin-redesign.css, admin-medicare.css,
 * admin-overview-v2.css contain only CSS rules (selectors that consume
 * `var(--token)`); they do not declare tokens. This guarantees:
 *   - No token has two competing definitions across files
 *   - No cascade-order-dependent overrides
 *   - Editing a value in one place updates the whole admin
 *
 * Palette is matched 1:1 with apps/web/app.css so admin and tenant share the
 * same visual language. Brand-primary is emerald.
 * ============================================================================= */


/* ─── 1. Theme-invariant tokens ────────────────────────────────────────── */
:root {
  /* Brand colours (theme-invariant) */
  --brand-red:        #f7525a;
  --brand-red-deep:   #d9434a;
  --brand-amber:      #dc9d28;
  --brand-amber-deep: #b8831f;
  --brand-navy:       #1B2E5A;
  --brand-navy-deep:  #0e1c3a;
  --brand-emerald:    #22b378;
  --brand-emerald-deep: #1a9660;
  --brand-gold:       #dc9d28;

  /* Brand-primary (emerald) — light defaults; redefined in html.dark */
  --brand-primary:       #22b378;
  --brand-primary-deep:  #1a9660;
  --brand-primary-soft:  rgba(34,179,120,0.08);
  --brand-primary-text:  #fff;
  --brand-primary-rgb:   34,179,120;

  /* Legacy brand aliases (kept for backwards compatibility) */
  --brand-orange:      var(--brand-primary);
  --brand-orange-deep: var(--brand-primary-deep);

  /* Accent ramp — emerald (the previous `oklch(... 18)` orange-red caused
   * every avatar / KPI icon / nav-icon hover to render as muddy red). */
  --accent:        var(--brand-primary);
  --accent-deep:   var(--brand-primary-deep);
  --accent-ink:    var(--brand-primary);
  --accent-soft:   rgba(34,179,120,0.10);

  /* Tab/toggle/link aliases mapped to brand */
  --tab-active-color:  var(--brand-primary);
  --toggle-active-bg:  var(--brand-primary);
  --link-color:        var(--brand-primary);

  /* Typography */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius scale (matches tenant) */
  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-xs: 6px;
  --radius: 18px;

  /* Layout — roomy density (consumed by admin-redesign.css selectors) */
  --pad: 28px;
  --gap: 22px;
  --card-pad-y: 20px;
  --card-pad-x: 22px;
  --control-height: 44px;
  --table-cell-pad-y: 16px;
  --table-cell-pad-x: 18px;
  --tab-pad-y: 13px;
  --tab-pad-x: 14px;
  --kpi-min-height: 132px;
  --kpi-value-size: clamp(1.72rem, 1.1rem + 2vw, 2.6rem);

  /* Sidebar geometry */
  --sidebar-width: 232px;
  --sidebar-collapsed-width: 56px;
  --admin-sidebar-w: 200px;
  --admin-topbar-h: 42px;

  /* Transition */
  --t: 0.18s ease;
}


/* ─── 2. Light mode (default) ──────────────────────────────────────────── */
:root,
html.light {
  /* Page + cards */
  --content-bg:    #f4f5f8;
  --panel-bg:      rgba(255,255,255,0.96);
  --panel-border:  rgba(27,46,90,0.10);
  --panel-shadow:  0 2px 16px rgba(27,46,90,0.07);
  --panel-shadow-lg: 0 8px 40px rgba(27,46,90,0.10);
  --card-bg:       var(--panel-bg);
  --overlay-bg:    rgba(255,255,255,0.98);

  /* Surfaces */
  --surface-raised:   rgba(255,255,255,0.82);
  --surface-muted:    rgba(27,46,90,0.04);
  --surface-soft:     rgba(27,46,90,0.06);
  --surface-hover:    rgba(27,46,90,0.08);
  --surface-selected: rgba(34,179,120,0.08);

  /* Inputs */
  --input-bg:       rgba(255,255,255,0.82);
  --input-bg-focus: #fff;

  /* Text */
  --text-primary:     #1B2E5A;
  --text-secondary:   #3a4d72;
  --text-muted:       #5a6f8f;
  --text-placeholder: #8a9bba;

  /* Borders */
  --border:        rgba(27,46,90,0.10);
  --border-strong: rgba(27,46,90,0.18);

  /* Semantic colours (hex + rgba pairs for fills, text, borders) */
  --green:        #22b378;
  --green-bg:     rgba(34,179,120,0.10);
  --green-border: rgba(34,179,120,0.25);
  --red:          #f7525a;
  --red-bg:       rgba(247,82,90,0.10);
  --red-border:   rgba(247,82,90,0.35);
  --amber:        #dc9d28;
  --amber-bg:     rgba(220,157,40,0.10);
  --amber-border: rgba(220,157,40,0.25);
  --blue:         #408dfb;
  --blue-bg:      rgba(64,141,251,0.08);
  --blue-border:  rgba(64,141,251,0.22);

  /* pos/neg/warn/info ramp aliases (consumed by admin-redesign.css) */
  --pos:       var(--green);
  --pos-soft:  var(--green-bg);
  --neg:       var(--red);
  --neg-soft:  var(--red-bg);
  --warn:      var(--amber);
  --warn-soft: var(--amber-bg);
  --info:      var(--blue);
  --info-soft: var(--blue-bg);

  /* *-soft semantic aliases (consumed by alerts/badges) */
  --success-soft: var(--green-bg);
  --warning-soft: var(--amber-bg);
  --danger-soft:  var(--red-bg);

  /* Sidebar (light) */
  --sidebar-bg:           var(--panel-bg);
  --sidebar-border:       var(--border);
  --sidebar-text:         var(--text-muted);
  --sidebar-text-hover:   var(--text-primary);
  --sidebar-active-bg:    var(--brand-primary);
  --sidebar-active-border: var(--brand-primary);
  --sidebar-active-text:  #fff;

  /* Legacy paper/ink (some module CSS still references these) */
  --paper:   #fff;
  --paper-2: var(--content-bg);
  --paper-3: rgba(27,46,90,0.06);
  --ink:   var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-muted);
  --ink-4: var(--text-placeholder);
  --line:   var(--border);
  --line-2: var(--border-strong);

  color-scheme: light;
}


/* ─── 3. Dark mode ─────────────────────────────────────────────────────── */
html.dark,
[data-theme="dark"] {
  /* Brand-primary is brighter in dark mode for contrast */
  --brand-primary:       #3ddc84;
  --brand-primary-deep:  #2bc470;
  --brand-primary-soft:  rgba(61,220,132,0.12);
  --brand-primary-text:  #0e1419;
  --brand-primary-rgb:   61,220,132;

  /* Brand colour overrides (brighter for dark bg readability) */
  --brand-red:    #ff6b72;
  --brand-amber:  #f0b542;
  --brand-gold:   #f5c23a;

  /* Accent ramp follows the brighter brand-primary */
  --accent:      var(--brand-primary);
  --accent-deep: var(--brand-primary-deep);
  --accent-ink:  var(--brand-primary);
  --accent-soft: rgba(61,220,132,0.14);

  /* Page + cards (matches tenant dark) */
  --content-bg:      #0f1419;
  --panel-bg:        #1a2332;
  --panel-border:    rgba(255,255,255,0.08);
  --panel-shadow:    0 2px 16px rgba(0,0,0,0.30);
  --panel-shadow-lg: 0 8px 40px rgba(0,0,0,0.40);
  --card-bg:         var(--panel-bg);
  --overlay-bg:      #182232;

  /* Surfaces */
  --surface-raised:   rgba(255,255,255,0.09);
  --surface-muted:    rgba(255,255,255,0.05);
  --surface-soft:     rgba(255,255,255,0.065);
  --surface-hover:    rgba(255,255,255,0.12);
  --surface-selected: rgba(61,220,132,0.14);

  /* Inputs */
  --input-bg:       rgba(255,255,255,0.07);
  --input-bg-focus: rgba(255,255,255,0.10);

  /* Text */
  --text-primary:     #e8ecf1;
  --text-secondary:   #b8c5d8;
  --text-muted:       #8d9db6;
  --text-placeholder: #566a88;

  /* Borders */
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  /* Semantic colours (brighter for dark bg) */
  --green:        #2ee89a;
  --green-bg:     rgba(46,232,154,0.12);
  --green-border: rgba(46,232,154,0.28);
  --red:          #ff6b72;
  --red-bg:       rgba(255,107,114,0.12);
  --red-border:   rgba(255,107,114,0.45);
  --amber:        #f0b542;
  --amber-bg:     rgba(240,181,66,0.12);
  --amber-border: rgba(240,181,66,0.30);
  --blue:         #5ea3ff;
  --blue-bg:      rgba(94,163,255,0.10);
  --blue-border:  rgba(94,163,255,0.30);

  /* Aliases follow */
  --pos:       var(--green);
  --pos-soft:  var(--green-bg);
  --neg:       var(--red);
  --neg-soft:  var(--red-bg);
  --warn:      var(--amber);
  --warn-soft: var(--amber-bg);
  --info:      var(--blue);
  --info-soft: var(--blue-bg);
  --success-soft: var(--green-bg);
  --warning-soft: var(--amber-bg);
  --danger-soft:  var(--red-bg);

  /* Sidebar (dark) */
  --sidebar-bg:          var(--panel-bg);
  --sidebar-border:      var(--border);
  --sidebar-text:        rgba(255,255,255,0.55);
  --sidebar-text-hover:  rgba(255,255,255,0.90);
  --sidebar-active-bg:   var(--brand-primary);
  --sidebar-active-text: #0e1419;

  /* Legacy paper/ink remap */
  --paper:   var(--panel-bg);
  --paper-2: var(--content-bg);
  --paper-3: rgba(255,255,255,0.09);
  --ink:   var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-muted);
  --ink-4: var(--text-placeholder);
  --line:   var(--border);
  --line-2: var(--border-strong);

  color-scheme: dark;
}


/* ─── 4. Reset + base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-primary);
  background: var(--content-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body,
body *:not(svg):not(path):not(rect):not(circle):not(line):not(polyline):not(g) {
  font-family: var(--font-sans) !important;
}

code, pre, kbd, .td-mono, .restore-backup-key {
  font-family: var(--font-mono) !important;
}