/* VoterIQ themes.css - 8 Portal Themes + War Room Fixed */
/* Portal themes make each client's public campaign portal unique, war room stays same */

:root{
  --bg:#0D1117;--card:#161B22;--border:#2A323C;
  --green:#00A651;--green2:#00E676;--gold:#F4C430;
  --text:#E6EDF3;--muted:#8B949E;
  --green-bright:#00A651;--green-dark:#004D2C;
  --red:#CE1126;--charcoal:#0B0F14;
  --surface:#12181F;--surface2:#1B222B;--surface3:#232B36
}

/* 1. NDC Classic - Emerald + Gold (default) - Ghana NDC colors */
[data-theme="ndc-classic"]{
  --green:#006B3F;--green-bright:#00A651;--green-dark:#004D2C;
  --red:#CE1126;--gold:#F4C430;--charcoal:#0B0F14;
  --surface:#12181F;--surface2:#1B222B;--surface3:#232B36;
  --border:#2A323C;--text:#EDF2F7;--text-dim:#93A1B0;--text-muted:#5A6673;
}

/* 2. Emerald Royal - Deep emerald + royal gold */
[data-theme="emerald-royal"]{
  --green:#065F46;--green-bright:#0A7A5E;--green-dark:#044A38;
  --red:#CE1126;--gold:#D4AF37;--charcoal:#0B0F14;
  --surface:#10201A;--surface2:#162A22;--surface3:#1D352A;
  --border:#2A3D32;--text:#E8F5E9;--text-dim:#8AB4A0;--text-muted:#5C7D6E;
}

/* 3. Midnight Sapphire - Navy + bright blue + amber gold */
[data-theme="midnight-sapphire"]{
  --green:#0F172A;--green-bright:#1E40AF;--green-dark:#0A1120;
  --red:#EF4444;--gold:#FBBF24;--charcoal:#0F172A;
  --surface:#162032;--surface2:#1E2D4E;--surface3:#253A5C;
  --border:#2D4268;--text:#E2E8F0;--text-dim:#94A3B8;--text-muted:#64748B;
}

/* 4. Crimson Sunset - Red + orange + warm light */
[data-theme="crimson-sunset"]{
  --green:#991B1B;--green-bright:#DC2626;--green-dark:#7F1D1D;
  --red:#991B1B;--gold:#F97316;--charcoal:#1A0A0A;
  --surface:#281414;--surface2:#3A1E1E;--surface3:#4A2626;
  --border:#5A3232;--text:#FFF7ED;--text-dim:#FDBA74;--text-muted:#9C6B4E;
}

/* 5. Obsidian Minimal - Pure black minimal + gold */
[data-theme="obsidian-minimal"]{
  --green:#0A0A0A;--green-bright:#1A1A1A;--green-dark:#000000;
  --red:#CE1126;--gold:#F4C430;--charcoal:#000000;
  --surface:#0A0A0A;--surface2:#141414;--surface3:#1E1E1E;
  --border:#2A2A2A;--text:#F5F5F5;--text-dim:#A3A3A3;--text-muted:#737373;
}

/* 6. Ivory Elegance - Light mode, text #1F2937 */
[data-theme="ivory-elegance"]{
  --green:#006B3F;--green-bright:#00A651;--green-dark:#004D2C;
  --red:#CE1126;--gold:#D4AF37;--charcoal:#FFFBEB;
  --surface:#FFF8F7;--surface2:#FEF3C7;--surface3:#FDE68A;
  --border:#E5D5A0;--text:#1F2937;--text-dim:#6B7280;--text-muted:#9CA3AF;
}

/* 7. Ocean Teal - Teal + aqua */
[data-theme="ocean-teal"]{
  --green:#0F766E;--green-bright:#14B8A6;--green-dark:#0D5D56;
  --red:#CE1126;--gold:#F0FDFA;--charcoal:#042F2E;
  --surface:#0A3D3A;--surface2:#115E59;--surface3:#147A73;
  --border:#1A8A82;--text:#CCFBF1;--text-dim:#5EEAD4;--text-muted:#2DD4BF;
}

/* 8. Royal Purple - Purple + gold */
[data-theme="royal-purple"]{
  --green:#581C87;--green-bright:#7C3AED;--green-dark:#4C1D95;
  --red:#CE1126;--gold:#F4C430;--charcoal:#1E0A32;
  --surface:#2D1065;--surface2:#3B1A7A;--surface3:#4C23A7;
  --border:#5E32A8;--text:#EDE9FE;--text-dim:#C4B5FD;--text-muted:#8B5CF6;
}

/* War Room Locked - Fixed dark, NOT subject to varied themes */
[data-theme="warroom-fixed"],
[data-warroom="locked"]{
  --green:#006B3F!important;--green-bright:#00A651!important;
  --green-dark:#004D2C!important;--red:#CE1126!important;
  --gold:#F4C430!important;--charcoal:#0D1117!important;
  --surface:#161B22!important;--surface2:#21262D!important;
  --surface3:#2D333B!important;--border:#30363D!important;
  --text:#E6EDF3!important;--text-dim:#8B949E!important;
  --text-muted:#484F58!important;
}

/* Theme preview dots for control room dropdown */
.theme-dot{
  width:14px;height:14px;border-radius:50%;display:inline-block;
  border:1px solid var(--border);flex-shrink:0;
}
.theme-option{
  display:flex;align-items:center;gap:8px;
}

/* Accessibility light/dark toggle - separate from portal branding (uses data-viq-mode) */
:root[data-viq-mode="light"]{
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --card-2:#F1F5F9;
  --border:#E2E8F0;
  --border-2:#CBD5E1;
  --text:#0F172A;
  --muted:#475569;
  --text-dim:#475569;
  --text-muted:#64748B;
  --charcoal:#F8FAFC;
  --surface:#FFFFFF;
  --surface2:#F1F5F9;
  --surface3:#E2E8F0;
}
:root[data-viq-mode="light"] body{
  background: var(--bg) !important;
  color: var(--text) !important;
}
:root[data-viq-mode="light"] .card{
  background: var(--card) !important;
  border-color: var(--border) !important;
}
:root[data-viq-mode="light"] .form-input,
:root[data-viq-mode="light"] .text-input{
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
/* War room stays dark even in light accessibility mode */
[data-warroom="locked"][data-viq-mode="light"],
[data-theme="warroom-fixed"][data-viq-mode="light"]{
  --bg:#0D1117!important;
  --card:#161B22!important;
  --surface:#161B22!important;
  --surface2:#21262D!important;
  --border:#30363D!important;
  --text:#E6EDF3!important;
}
/* Toggle button */
.viq-theme-toggle, .viq-mode-toggle{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card, var(--surface));
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


/* FIX: Light mode should NOT affect white color texts - protect white */
:root[data-viq-mode="light"] .btn,
:root[data-viq-mode="light"] .btn-green,
:root[data-viq-mode="light"] .btn-primary,
:root[data-viq-mode="light"] button.btn,
:root[data-viq-mode="light"] [style*="color:#fff"],
:root[data-viq-mode="light"] [style*="color: #fff"],
:root[data-viq-mode="light"] [style*="color:#FFFFFF"],
:root[data-viq-mode="light"] [style*="color: white"]{
  color: #FFFFFF !important;
}
:root[data-viq-mode="light"] .btn .text-white,
:root[data-viq-mode="light"] .text-white{
  color: #FFFFFF !important;
}
/* Ensure green buttons keep white text in light mode */
:root[data-viq-mode="light"] .btn-green,
:root[data-viq-mode="light"] [style*="background:linear-gradient"][style*="color:#fff"],
:root[data-viq-mode="light"] [style*="background: var(--green"]{
  color: #FFFFFF !important;
}