/* ── Theme Variables ── */
:root {
  --bg-primary: #f5f6fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e8eaf0;
  --text-primary: #1a1d23;
  --text-secondary: #5a5f6b;
  --text-muted: #8c919d;
  --border: #d1d5de;
  --border-light: #e4e7ed;
  --accent: #4a6cf7;
  --accent-hover: #3b5de6;
  --accent-light: rgba(74, 108, 247, 0.08);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --row-red: rgba(220, 53, 69, 0.10);
  --row-yellow: rgba(255, 193, 7, 0.10);
  --row-green: rgba(40, 167, 69, 0.10);
  --row-orange: rgba(255, 152, 0, 0.12);
  --row-blue: rgba(74, 108, 247, 0.08);
  --row-gray: rgba(140, 145, 157, 0.06);
  --panel-bg: #ffffff;
  --input-bg: #f5f6fa;
  --input-border: #d1d5de;
  --badge-bg: #e8eaf0;
  --scrollbar-thumb: #c1c5cf;
  --scrollbar-track: #f0f1f5;
}

[data-theme="dark"] {
  --bg-primary: #13151a;
  --bg-secondary: #1a1d24;
  --bg-tertiary: #22252e;
  --text-primary: #e4e6eb;
  --text-secondary: #a0a4b0;
  --text-muted: #6b7080;
  --border: #2e3240;
  --border-light: #252830;
  --accent: #5b7bf9;
  --accent-hover: #6d8bff;
  --accent-light: rgba(91, 123, 249, 0.12);
  --shadow: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.3);
  --row-red: rgba(220, 53, 69, 0.15);
  --row-yellow: rgba(255, 193, 7, 0.12);
  --row-green: rgba(40, 167, 69, 0.12);
  --row-orange: rgba(255, 152, 0, 0.15);
  --row-blue: rgba(91, 123, 249, 0.12);
  --row-gray: rgba(140, 145, 157, 0.08);
  --panel-bg: #1e2028;
  --input-bg: #252830;
  --input-border: #353945;
  --badge-bg: #2e3240;
  --scrollbar-thumb: #3a3f4e;
  --scrollbar-track: #1a1d24;
}

[data-theme="c128"] {
  --bg-primary: #0a0e0a;
  --bg-secondary: #0d120d;
  --bg-tertiary: #121a12;
  --text-primary: #33ff33;
  --text-secondary: #22bb22;
  --text-muted: #1a8a1a;
  --border: #1a4a1a;
  --border-light: #143214;
  --accent: #33ff33;
  --accent-hover: #66ff66;
  --accent-light: rgba(51, 255, 51, 0.10);
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  --row-red: rgba(255, 80, 80, 0.12);
  --row-yellow: rgba(180, 255, 80, 0.10);
  --row-green: rgba(51, 255, 51, 0.12);
  --row-orange: rgba(255, 180, 50, 0.10);
  --row-blue: rgba(51, 255, 51, 0.10);
  --row-gray: rgba(51, 255, 51, 0.05);
  --panel-bg: #0d120d;
  --input-bg: #0a140a;
  --input-border: #1a4a1a;
  --badge-bg: #121a12;
  --scrollbar-thumb: #1a4a1a;
  --scrollbar-track: #0a0e0a;
}

[data-theme="ur6000"] {
  --bg-primary: #0a0800;
  --bg-secondary: #0f0c00;
  --bg-tertiary: #1a1400;
  --text-primary: #ffb000;
  --text-secondary: #cc8800;
  --text-muted: #996600;
  --border: #3d2e00;
  --border-light: #2b1f00;
  --accent: #ffb000;
  --accent-hover: #ffcc44;
  --accent-light: rgba(255, 176, 0, 0.10);
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  --row-red: rgba(255, 80, 80, 0.12);
  --row-yellow: rgba(255, 200, 60, 0.10);
  --row-green: rgba(255, 176, 0, 0.12);
  --row-orange: rgba(255, 176, 0, 0.10);
  --row-blue: rgba(255, 176, 0, 0.10);
  --row-gray: rgba(255, 176, 0, 0.05);
  --panel-bg: #0f0c00;
  --input-bg: #0d0a00;
  --input-border: #3d2e00;
  --badge-bg: #1a1400;
  --scrollbar-thumb: #3d2e00;
  --scrollbar-track: #0a0800;
}

[data-theme="haven3019"] {
  --bg-primary: #0d1117;
  --bg-secondary: #111820;
  --bg-tertiary: #1a2535;
  --text-primary: #c8d6e8;
  --text-secondary: #8fa8c8;
  --text-muted: #5a7a9a;
  --border: #2a3f55;
  --border-light: #1e3045;
  --accent: #7eb8d4;
  --accent-hover: #a8d4e8;
  --accent-light: rgba(126, 184, 212, 0.10);
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
  --row-red: rgba(220, 53, 69, 0.12);
  --row-yellow: rgba(255, 193, 7, 0.10);
  --row-green: rgba(126, 184, 212, 0.12);
  --row-orange: rgba(255, 152, 0, 0.10);
  --row-blue: rgba(126, 184, 212, 0.10);
  --row-gray: rgba(126, 184, 212, 0.05);
  --panel-bg: #111820;
  --input-bg: #0d1520;
  --input-border: #2a3f55;
  --badge-bg: #1a2535;
  --scrollbar-thumb: #2a3f55;
  --scrollbar-track: #0d1117;
}

[data-theme="asgard"] {
  /* Mirrors VikingCloud Asgard's dark-mode design tokens for visual continuity
     between Freya and Asgard. Hex values pulled from Asgard's devtools and
     mapped into Freya's existing variable structure — no token-hierarchy
     refactor, just value substitution within the same shape every other theme
     uses. Mint #A4FEC1 is Asgard's CTA color (used on .btn-primary); cyan
     #7FF5FD is the accent (borders, active states, focus rings). */
  --bg-primary: #212638;
  --bg-secondary: #272D42;
  --bg-tertiary: #171B2B;
  --text-primary: #FFFFFF;
  --text-secondary: #B7BBCC;
  --text-muted: #8b8fa3;
  --border: #2E4052;
  --border-light: #363E5C;
  --accent: #7FF5FD;
  --accent-hover: #A4FEC1;
  --accent-light: rgba(127, 245, 253, 0.12);
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  --row-red: rgba(255, 71, 84, 0.15);
  --row-yellow: rgba(239, 182, 67, 0.15);
  --row-green: rgba(164, 254, 193, 0.15);
  --row-orange: rgba(239, 182, 67, 0.20);
  --row-blue: rgba(127, 245, 253, 0.15);
  --row-gray: rgba(255, 255, 255, 0.05);
  --panel-bg: #272D42;
  --input-bg: #171B2B;
  --input-border: #2E4052;
  --badge-bg: #171B2B;
  --scrollbar-thumb: #363E5C;
  --scrollbar-track: #171B2B;
}

[data-theme="high-contrast"] {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #141414;
  --text-primary: #ffffff;
  --text-secondary: #eeeeee;
  --text-muted: #cccccc;
  --border: #ffffff;
  --border-light: #888888;
  --accent: #ffff00;
  --accent-hover: #ffffff;
  --accent-light: rgba(255, 255, 0, 0.15);
  --shadow: 0 1px 3px rgba(255,255,255,0.1);
  --shadow-lg: 0 4px 16px rgba(255,255,255,0.15);
  --row-red: rgba(255, 80, 80, 0.20);
  --row-yellow: rgba(255, 255, 0, 0.15);
  --row-green: rgba(0, 255, 0, 0.15);
  --row-orange: rgba(255, 165, 0, 0.15);
  --row-blue: rgba(100, 149, 237, 0.15);
  --row-gray: rgba(255, 255, 255, 0.08);
  --panel-bg: #0a0a0a;
  --input-bg: #000000;
  --input-border: #ffffff;
  --badge-bg: #141414;
  --scrollbar-thumb: #ffffff;
  --scrollbar-track: #000000;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Controls ── */
select, button, input[type="number"], input[type="text"], input[type="password"], input[type="date"], textarea {
  font-family: inherit;
  font-size: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 6px 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
select:focus, input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.15);
}
button {
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
button:hover { border-color: var(--accent); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); }
[data-theme="c128"] .btn-primary { background: #0a140a; color: #33ff33; border-color: #33ff33; }
[data-theme="c128"] .btn-primary:hover { background: #122012; color: #66ff66; border-color: #66ff66; }
[data-theme="ur6000"] .btn-primary { background: #0d0a00; color: #ffb000; border-color: #ffb000; }
[data-theme="ur6000"] .btn-primary:hover { background: #1a1400; color: #ffcc44; border-color: #ffcc44; }
[data-theme="haven3019"] .btn-primary { background: #0d1520; color: #7eb8d4; border-color: #7eb8d4; }
[data-theme="haven3019"] .btn-primary:hover { background: #1a2535; color: #a8d4e8; border-color: #a8d4e8; }
[data-theme="high-contrast"] .btn-primary { background: #ffff00; color: #000000; border-color: #ffff00; }
[data-theme="high-contrast"] .btn-primary:hover { background: #ffffff; color: #000000; border-color: #ffffff; }
[data-theme="asgard"] .btn-primary { background: #A4FEC1; color: #171B2B; border-color: #A4FEC1; }
[data-theme="asgard"] .btn-primary:hover { background: #C5FFD9; color: #171B2B; border-color: #C5FFD9; }
/* Asgard pill buttons — primary visual signature. Explicitly undone on
   .view-toggle compound widgets so inner buttons don't clip into ovals
   inside the container's overflow:hidden chrome. Form fields stay at 8px
   to match Asgard's field treatment. */
[data-theme="asgard"] body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
[data-theme="asgard"] button { border-radius: 9999px; }
[data-theme="asgard"] .view-toggle button { border-radius: 0; }
[data-theme="asgard"] select,
[data-theme="asgard"] input,
[data-theme="asgard"] textarea { border-radius: 8px; }
.btn-sm { padding: 4px 10px; font-size: 11px; }

.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.view-toggle button {
  border: none;
  border-radius: 0;
  padding: 6px 14px;
  background: var(--input-bg);
  color: var(--text-secondary);
  font-size: 12px;
}
.view-toggle button.active {
  background: var(--accent);
  color: #fff;
}
[data-theme="c128"] .view-toggle button.active { background: #0a140a; color: #33ff33; }
[data-theme="ur6000"] .view-toggle button.active { background: #0d0a00; color: #ffb000; }
[data-theme="haven3019"] .view-toggle button.active { background: #0d1520; color: #7eb8d4; }
[data-theme="high-contrast"] .view-toggle button.active { background: #ffff00; color: #000000; }
[data-theme="asgard"] .view-toggle button.active { background: #7FF5FD; color: #171B2B; }
/* Asgard: cyan #7FF5FD and mint #A4FEC1 are high-luminosity fills used on
   filter pills, status pills, SAQ pills, and a few CTA-style buttons.
   White text on those backgrounds is unreadable. Force deep navy #171B2B
   on every text-bearing cyan/mint surface. Mirrors Asgard's own design
   system rule: --button-primary-label: var(--neutral-800) on mint. Other
   QA status pills (In QA, Back to QSA, DocuSign Sent/Received, Completed,
   Archive) use mid-luminosity per-status colors where white text is fine
   and are deliberately untouched. */
[data-theme="asgard"] .stage-pill.active { color: #171B2B; }
[data-theme="asgard"] .qa-status-pill[data-status="All"].active { color: #171B2B; }
[data-theme="asgard"] .saq-pill.active { color: #171B2B; }
[data-theme="asgard"] .btn-reports:hover { color: #171B2B; }
[data-theme="asgard"] .fv-message-btn { color: #171B2B; }
.view-toggle button:hover:not(.active) { background: var(--bg-tertiary); }

/* ── Utilities ── */
.hidden { display: none !important; }