/* Canonical theme tokens for the app.
   Dark mode is the default (:root); light mode overrides with [data-theme="light"]. */

:root {
  /* Backgrounds */
  --bg-page: #0d1117;
  --bg-card: #161b22;
  --bg-deep: #010409;
  --bg-input: #0d1117;
  --bg-hover: rgba(177,186,196,.07);
  --bg-overlay: rgba(13,17,23,.95);

  /* Text */
  --text-pri: #e6edf3;
  --text-sec: #b1bac4;
  --text-muted: #9ca3af;
  --text-head: #8d96a0;

  /* Borders */
  --border-col: #30363d;
  --border-input: #30363d;
  --border-row: rgba(48,54,61,.7);

  /* Accent */
  --accent: #58a6ff;
  --accent-hover: #79c0ff;
  --accent-bg: rgba(88,166,255,.1);
  --accent-shadow: rgba(88,166,255,.25);
  --text-on-accent: #ffffff;

  /* Status */
  --success: #3fb950;
  --success-bg: rgba(63,185,80,.1);
  --success-border: rgba(63,185,80,.3);
  --danger: #f85149;
  --danger-bg: rgba(248,81,73,.12);
  --danger-bg-hover: rgba(248,81,73,.22);
  --danger-border: rgba(248,81,73,.4);
  --warning: #d29922;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,.4);
  --shadow-lg: rgba(0,0,0,.65);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(88,166,255,.35);

  /* Overlay backdrop */
  --overlay-backdrop: rgba(0,0,0,.55);

  /* Warning extras (bg/border pair, for parity with success/danger) */
  --warning-bg: rgba(210,153,34,.12);
  --warning-border: rgba(210,153,34,.35);
  --warning-text: var(--warning);

  /* Info */
  --info: #58a6ff;
  --info-bg: rgba(88,166,255,.1);
  --info-border: rgba(88,166,255,.3);
  --info-text: #93c5fd;

  /* Nav cards (home / landing page tiles) */
  --card-nav-bg-from: #1a1a2e;
  --card-nav-bg-to:   #1e3a5f;
  --card-nav-border:  transparent;
  --card-nav-text:    #ffffff;
  --card-nav-desc:    rgba(255,255,255,.65);
  --card-nav-hover-shadow: rgba(59,130,246,.35);
  --card-nav-hover-border: #3b82f6;
  --card-nav-active-from: #1e3a5f;
  --card-nav-active-to:   #1e4d8c;

  /* Page background (light/legacy pages that still use #f0f2f5) */
  --bg-page-legacy: #0d1117;

  /* Topbar */
  --bg-topbar: #1a1a2e;
  --border-topbar: rgba(255,255,255,.08);

  /* Staff-view indicator bar */
  --bg-staff-bar: rgba(67,56,202,.2);
  --border-staff-bar: rgba(99,102,241,.3);
  --text-staff-bar: #a5b4fc;

  /* Domain badge palettes (procurement/sales statuses, product types) */
  --tag-blue-bg: rgba(59,130,246,.15);
  --tag-blue-text: #93c5fd;
  --tag-violet-bg: rgba(168,85,247,.15);
  --tag-violet-text: #d8b4fe;
  --tag-teal-bg: rgba(20,184,166,.15);
  --tag-teal-text: #5eead4;
  --tag-amber-bg: rgba(245,158,11,.15);
  --tag-amber-text: #fcd34d;
  --tag-green-bg: rgba(34,197,94,.15);
  --tag-green-text: #86efac;
  --tag-slate-bg: rgba(100,116,139,.18);
  --tag-slate-text: #94a3b8;
  --tag-red-bg: rgba(239,68,68,.12);
  --tag-red-text: #fca5a5;

  /* Tag palette — orange (AR aging 31–60 d, intermediate warning) */
  --tag-orange-bg:   rgba(249,115,22,.15);
  --tag-orange-text: #fdba74;

  /* Pipeline plan table section colours
     All use color-mix with existing vars → auto-adapt in [data-theme="light"]. */
  --plan-existing-cell: color-mix(in srgb, var(--success)         14%, var(--bg-card));
  --plan-existing-head: color-mix(in srgb, var(--success)         22%, var(--bg-page));
  --plan-new-cell:      color-mix(in srgb, var(--tag-amber-text)  16%, var(--bg-card));
  --plan-new-head:      color-mix(in srgb, var(--tag-amber-text)  26%, var(--bg-page));
  --plan-win-cell:      color-mix(in srgb, var(--tag-violet-text) 14%, var(--bg-card));
  --plan-win-head:      color-mix(in srgb, var(--tag-violet-text) 24%, var(--bg-page));

  /* Chart.js palette — read from JS via getComputedStyle (see getPalette() helper) */
  --chart-blue:        rgba(59,130,246,0.75);
  --chart-green:       rgba(34,197,94,0.75);
  --chart-amber:       rgba(250,204,21,0.75);
  --chart-orange:      rgba(249,115,22,0.75);
  --chart-red:         rgba(239,68,68,0.75);
  --chart-darkred:     rgba(185,28,28,0.85);
  --chart-slate:       rgba(148,163,184,0.75);
  --chart-blue-line:   rgb(59,130,246);
  --chart-green-line:  rgb(34,197,94);
  --chart-amber-line:  rgb(250,204,21);
  --chart-orange-line: rgb(249,115,22);
  --chart-red-line:    rgb(239,68,68);
  --chart-violet-line: rgb(168,85,247);
  --chart-blue-fill:   rgba(59,130,246,0.15);
  --chart-green-fill:  rgba(34,197,94,0.15);
  --chart-orange-fill: rgba(249,115,22,0.15);
  --chart-red-fill:    rgba(239,68,68,0.15);
}

[data-theme="light"] {
  /* Backgrounds */
  --bg-page: #f6f8fa;
  --bg-card: #ffffff;
  --bg-deep: #eaeef2;
  --bg-input: #ffffff;
  --bg-hover: rgba(9,105,218,.09);
  --bg-overlay: rgba(255,255,255,.97);

  /* Text */
  --text-pri: #1c2128;
  --text-sec: #424a53;
  --text-muted: #6e7781;
  --text-head: #57606a;

  /* Borders */
  --border-col: #d0d7de;
  --border-input: #d0d7de;
  --border-row: #eaeef2;

  /* Accent */
  --accent: #0969da;
  --accent-hover: #0550ae;
  --accent-bg: rgba(9,105,218,.08);
  --accent-shadow: rgba(9,105,218,.25);
  --text-on-accent: #ffffff;

  /* Status */
  --success: #1a7f37;
  --success-bg: rgba(26,127,55,.08);
  --success-border: rgba(26,127,55,.3);
  --danger: #cf222e;
  --danger-bg: rgba(207,34,46,.08);
  --danger-bg-hover: rgba(207,34,46,.15);
  --danger-border: rgba(207,34,46,.35);
  --warning: #9a6700;

  /* Shadows */
  --shadow-sm: rgba(28,33,40,.12);
  --shadow-lg: rgba(28,33,40,.2);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(9,105,218,.3);

  /* Overlay backdrop */
  --overlay-backdrop: rgba(28,33,40,.3);

  /* Warning extras */
  --warning-bg: rgba(154,103,18,.1);
  --warning-border: rgba(154,103,18,.3);
  --warning-text: var(--warning);

  /* Info */
  --info: #0969da;
  --info-bg: rgba(9,105,218,.08);
  --info-border: rgba(9,105,218,.25);
  --info-text: #0550ae;

  /* Nav cards (home / landing page tiles) */
  --card-nav-bg-from: #ffffff;
  --card-nav-bg-to:   #f0f5ff;
  --card-nav-border:  #d0d7de;
  --card-nav-text:    #1c2128;
  --card-nav-desc:    #57606a;
  --card-nav-hover-shadow: rgba(9,105,218,.2);
  --card-nav-hover-border: #0969da;
  --card-nav-active-from: #dbeafe;
  --card-nav-active-to:   #bfdbfe;

  /* Page background (light/legacy pages that still use #f0f2f5) */
  --bg-page-legacy: #f0f2f5;

  /* Topbar */
  --bg-topbar: #ffffff;
  --border-topbar: #d0d7de;

  /* Staff-view indicator bar */
  --bg-staff-bar: rgba(9,105,218,.1);
  --border-staff-bar: rgba(9,105,218,.35);
  --text-staff-bar: #0550ae;

  /* Domain badge palettes (procurement/sales statuses, product types) */
  --tag-blue-bg: rgba(9,105,218,.1);
  --tag-blue-text: #0550ae;
  --tag-violet-bg: rgba(109,40,217,.1);
  --tag-violet-text: #5b21b6;
  --tag-teal-bg: rgba(15,118,110,.1);
  --tag-teal-text: #0f766e;
  --tag-amber-bg: rgba(180,83,9,.1);
  --tag-amber-text: #92400e;
  --tag-green-bg: rgba(21,128,61,.1);
  --tag-green-text: #166534;
  --tag-slate-bg: rgba(100,116,139,.1);
  --tag-slate-text: #475569;
  --tag-red-bg: rgba(185,28,28,.1);
  --tag-red-text: #991b1b;

  /* Tag palette — orange (light mode) */
  --tag-orange-bg:   rgba(194,65,12,.1);
  --tag-orange-text: #c2410c;

  /* Keep pipeline section contrast unchanged in light mode */
  --plan-existing-cell: color-mix(in srgb, var(--success)          5%, var(--bg-card));
  --plan-existing-head: color-mix(in srgb, var(--success)         12%, var(--bg-page));
  --plan-new-cell:      color-mix(in srgb, var(--tag-amber-text)   5%, var(--bg-card));
  --plan-new-head:      color-mix(in srgb, var(--tag-amber-text)  12%, var(--bg-page));
  --plan-win-cell:      color-mix(in srgb, var(--tag-violet-text)  5%, var(--bg-card));
  --plan-win-head:      color-mix(in srgb, var(--tag-violet-text) 12%, var(--bg-page));

  /* Chart.js palette (light theme) */
  --chart-blue:        rgba(9,105,218,0.70);
  --chart-green:       rgba(26,127,55,0.70);
  --chart-amber:       rgba(154,103,18,0.72);
  --chart-orange:      rgba(188,76,11,0.72);
  --chart-red:         rgba(207,34,46,0.72);
  --chart-darkred:     rgba(130,17,24,0.80);
  --chart-slate:       rgba(87,96,106,0.62);
  --chart-blue-line:   rgb(9,105,218);
  --chart-green-line:  rgb(26,127,55);
  --chart-amber-line:  rgb(154,103,18);
  --chart-orange-line: rgb(188,76,11);
  --chart-red-line:    rgb(207,34,46);
  --chart-violet-line: rgb(109,40,217);
  --chart-blue-fill:   rgba(9,105,218,0.14);
  --chart-green-fill:  rgba(26,127,55,0.14);
  --chart-orange-fill: rgba(188,76,11,0.14);
  --chart-red-fill:    rgba(207,34,46,0.14);
}

/* ── Global keyboard focus ring ──────────────────────────────────────────────
   :focus-visible fires only on keyboard navigation, not mouse/touch click.
   Provides discoverability for all interactive elements across all pages.
   Components that already supply their own focus treatment (e.g. proc-table
   inputs via box-shadow) may override this with outline:none.
   ─────────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Inputs already use a box-shadow ring from proc-table.css — suppress outline */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
}

/* ── Global disabled state ───────────────────────────────────────────────────
   Applies a consistent faded/not-allowed treatment to all disabled controls.
   ─────────────────────────────────────────────────────────────────────────── */
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Standard inline text link ───────────────────────────────────────────────
   Default browser link blue has poor contrast against --bg-card/--bg-page in
   dark mode. Use this instead of a bare <a> anywhere a link appears inside
   body text, a table cell, or a modal (rather than a nav item or button,
   which already have their own treatment) so link color stays correct and
   consistent across both themes.
   ─────────────────────────────────────────────────────────────────────────── */
a.text-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.text-link:hover {
  color: var(--accent-hover);
}