/**
 * assets/css/plan-design-system.css
 * Plan Dashboard Theme Helpers & Design System — Synchronized with omni-theme.css
 */
@import url('/assets/css/omni-theme.css');

/* === DEFAULT ROOT VARIABLES (DARK THEME) === */
:root {
  --bg-base: #080F1D;
  --bg-surface: #0F1926;
  --bg-card: #14213A;
  --bg-card-hover: #19273F;
  --bd: #1C2E47;
  --bd-strong: #2A3F5C;
  --txt-1: #F1F5F9;
  --txt-2: #94A3B8;
  --txt-3: #64748B;
  --blue: #3B82F6;
  --cyan: #06B6D4;
  --green: #10B981;
  --amber: #F59E0B;
  --purple: #8B5CF6;
}

/* === LIGHT MODE VARIABLES === */
html.light,
html[data-theme="light"],
.light {
  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;
  --bd: #E2E8F0;
  --bd-strong: #CBD5E1;
  --txt-1: #0F172A;
  --txt-2: #334155;
  --txt-3: #64748B;
  --omni-text: #0F172A;
  --omni-text2: #334155;
  --omni-text3: #64748B;
  --omni-panel: #FFFFFF;
  --omni-panel2: #F1F5F9;
  --omni-bg: #F8FAFC;
  --omni-border: #E2E8F0;
  --blue: #0284C7;
  --cyan: #0891B2;
  --green: #059669;
  --amber: #B45309;
  --purple: #6D28D9;
}

/* Ensure smooth transitions on theme switch & prevent horizontal overflow */
body {
  max-width: 100vw;
  overflow-x: clip;
}
header.plan-header {
  max-width: 100vw;
  overflow-x: clip;
}
header, aside, main, .plan-card, input, select {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Plan Dashboard Header in Light Mode */
html.light header,
html.light header.plan-header,
html[data-theme="light"] header,
html[data-theme="light"] header.plan-header,
.light header,
.light header.plan-header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--bd) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  color: #0F172A !important;
}

html.light header .text-white,
html.light header.plan-header .text-white,
html[data-theme="light"] header .text-white,
html[data-theme="light"] header.plan-header .text-white,
.light header .text-white {
  color: #0F172A !important;
}

html.light header .text-slate-400,
html[data-theme="light"] header .text-slate-400,
.light header .text-slate-400 {
  color: #64748B !important;
}

/* Plan Language Switcher in Light Mode */
html.light #plan-lang-switcher-container,
html[data-theme="light"] #plan-lang-switcher-container,
.light #plan-lang-switcher-container {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html.light #plan-language-select,
html[data-theme="light"] #plan-language-select,
.light #plan-language-select {
  color: #0F172A !important;
}

html.light #plan-language-select option,
html[data-theme="light"] #plan-language-select option,
.light #plan-language-select option {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

/* Plan Dashboard Sidebar in Light Mode */
html.light aside,
html.light aside#plan-sidebar,
html[data-theme="light"] aside,
html[data-theme="light"] aside#plan-sidebar,
.light aside,
.light aside#plan-sidebar {
  background-color: #FFFFFF !important;
  border-right: 1px solid var(--bd) !important;
  color: #0F172A !important;
}

html.light aside#plan-sidebar .text-white,
html[data-theme="light"] aside#plan-sidebar .text-white,
.light aside#plan-sidebar .text-white {
  color: #0F172A !important;
}

html.light aside#plan-sidebar .text-slate-200,
html.light aside#plan-sidebar .text-slate-300,
html[data-theme="light"] aside#plan-sidebar .text-slate-200,
html[data-theme="light"] aside#plan-sidebar .text-slate-300,
.light aside#plan-sidebar .text-slate-200,
.light aside#plan-sidebar .text-slate-300 {
  color: #334155 !important;
}

html.light aside#plan-sidebar .text-slate-400,
html[data-theme="light"] aside#plan-sidebar .text-slate-400,
.light aside#plan-sidebar .text-slate-400 {
  color: #64748B !important;
}

html.light aside#plan-sidebar nav a,
html.light aside#plan-sidebar nav a span,
html[data-theme="light"] aside#plan-sidebar nav a,
html[data-theme="light"] aside#plan-sidebar nav a span,
.light aside#plan-sidebar nav a,
.light aside#plan-sidebar nav a span {
  color: #0F172A !important;
  font-weight: 600 !important;
}

html.light aside#plan-sidebar nav a:hover,
html.light aside#plan-sidebar nav a:hover span,
html[data-theme="light"] aside#plan-sidebar nav a:hover,
html[data-theme="light"] aside#plan-sidebar nav a:hover span,
.light aside#plan-sidebar nav a:hover,
.light aside#plan-sidebar nav a:hover span {
  background-color: #F1F5F9 !important;
  color: #0284C7 !important;
}

/* Sidebar Quota Container */
html.light aside#plan-sidebar > div:last-child,
html[data-theme="light"] aside#plan-sidebar > div:last-child,
.light aside#plan-sidebar > div:last-child {
  background-color: #F8FAFC !important;
  border-top-color: var(--bd) !important;
  color: #334155 !important;
}

html.light aside#plan-sidebar > div:last-child strong,
html[data-theme="light"] aside#plan-sidebar > div:last-child strong,
.light aside#plan-sidebar > div:last-child strong {
  color: #0F172A !important;
}

/* Evolution button in light mode */
html.light button.bg-gradient-to-r.from-blue-500\/10,
html[data-theme="light"] button.bg-gradient-to-r.from-blue-500\/10,
.light button.bg-gradient-to-r.from-blue-500\/10 {
  background: linear-gradient(to right, #EFF6FF, #ECFEFF) !important;
  border-color: #BAE6FD !important;
}

html.light button.bg-gradient-to-r.from-blue-500\/10 span,
html.light button.bg-gradient-to-r.from-blue-500\/10 i,
html[data-theme="light"] button.bg-gradient-to-r.from-blue-500\/10 span,
html[data-theme="light"] button.bg-gradient-to-r.from-blue-500\/10 i,
.light button.bg-gradient-to-r.from-blue-500\/10 span,
.light button.bg-gradient-to-r.from-blue-500\/10 i {
  color: #0284C7 !important;
}

/* Executive Banners in Plan Dashboards */
html.light .bg-gradient-to-r.from-\[\#0C1A2E\],
html[data-theme="light"] .bg-gradient-to-r.from-\[\#0C1A2E\],
.light .bg-gradient-to-r.from-\[\#0C1A2E\] {
  background: linear-gradient(135deg, #F0F9FF 0%, #EEF2FF 50%, #F8FAFC 100%) !important;
  border-color: #BAE6FD !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
}

html.light .bg-gradient-to-r.from-\[\#0C1A2E\] h2,
html[data-theme="light"] .bg-gradient-to-r.from-\[\#0C1A2E\] h2,
.light .bg-gradient-to-r.from-\[\#0C1A2E\] h2 {
  color: #0F172A !important;
}

html.light .bg-gradient-to-r.from-\[\#0C1A2E\] p,
html[data-theme="light"] .bg-gradient-to-r.from-\[\#0C1A2E\] p,
.light .bg-gradient-to-r.from-\[\#0C1A2E\] p {
  color: #334155 !important;
}

html.light .bg-gradient-to-r.from-\[\#0C1A2E\] .font-mono.text-white,
html[data-theme="light"] .bg-gradient-to-r.from-\[\#0C1A2E\] .font-mono.text-white,
.light .bg-gradient-to-r.from-\[\#0C1A2E\] .font-mono.text-white {
  color: #0F172A !important;
}

/* 3-Way Match Interactive Section */
html.light #sec-match,
html[data-theme="light"] #sec-match,
.light #sec-match {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light #sec-match h3,
html[data-theme="light"] #sec-match h3,
.light #sec-match h3 {
  color: #0F172A !important;
}

html.light #sec-match p,
html[data-theme="light"] #sec-match p,
.light #sec-match p {
  color: #475569 !important;
}

html.light #sec-match .bg-omni-bg,
html[data-theme="light"] #sec-match .bg-omni-bg,
.light #sec-match .bg-omni-bg {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html.light #sec-match .bg-omni-bg .text-white,
html[data-theme="light"] #sec-match .bg-omni-bg .text-white,
.light #sec-match .bg-omni-bg .text-white {
  color: #0F172A !important;
}

html.light #sec-match .bg-omni-bg .text-slate-200,
html[data-theme="light"] #sec-match .bg-omni-bg .text-slate-200,
.light #sec-match .bg-omni-bg .text-slate-200 {
  color: #334155 !important;
}

html.light #match-card,
html[data-theme="light"] #match-card,
.light #match-card {
  background-color: #F0F9FF !important;
  border-color: #0284C7 !important;
}

/* SEPA & F24 Action Blocks */
html.light #sec-sepa,
html.light #sec-f24,
html[data-theme="light"] #sec-sepa,
html[data-theme="light"] #sec-f24,
.light #sec-sepa,
.light #sec-f24 {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light #sec-sepa .text-white,
html.light #sec-f24 .text-white,
html[data-theme="light"] #sec-sepa .text-white,
html[data-theme="light"] #sec-f24 .text-white,
.light #sec-sepa .text-white,
.light #sec-f24 .text-white {
  color: #0F172A !important;
}

html.light #sec-sepa p,
html.light #sec-f24 p,
html[data-theme="light"] #sec-sepa p,
html[data-theme="light"] #sec-f24 p,
.light #sec-sepa p,
.light #sec-f24 p {
  color: #475569 !important;
}

/* Operator Guide Section */
html.light #sec-guide,
html[data-theme="light"] #sec-guide,
.light #sec-guide {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light #sec-guide h3,
html.light #sec-guide h4,
html.light #sec-guide .text-white,
html[data-theme="light"] #sec-guide h3,
html[data-theme="light"] #sec-guide h4,
html[data-theme="light"] #sec-guide .text-white,
.light #sec-guide h3,
.light #sec-guide h4,
.light #sec-guide .text-white {
  color: #0F172A !important;
}

html.light #sec-guide p,
html.light #sec-guide .text-slate-400,
html.light #sec-guide .text-slate-200,
html[data-theme="light"] #sec-guide p,
html[data-theme="light"] #sec-guide .text-slate-400,
html[data-theme="light"] #sec-guide .text-slate-200,
.light #sec-guide p,
.light #sec-guide .text-slate-400,
.light #sec-guide .text-slate-200 {
  color: #475569 !important;
}

html.light #sec-guide .bg-\[\#14213A\]\/50,
html[data-theme="light"] #sec-guide .bg-\[\#14213A\]\/50,
.light #sec-guide .bg-\[\#14213A\]\/50 {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* WhatsApp Simulator in solo.html */
html.light #sec-chat,
html[data-theme="light"] #sec-chat,
.light #sec-chat {
  background-color: #FFFFFF !important;
  border-color: var(--bd) !important;
}

html.light #sec-chat .bg-\[\#0B141A\],
html[data-theme="light"] #sec-chat .bg-\[\#0B141A\],
.light #sec-chat .bg-\[\#0B141A\] {
  background-color: #F0F2F5 !important;
}

html.light #sec-chat .bg-\[\#202C33\],
html[data-theme="light"] #sec-chat .bg-\[\#202C33\],
.light #sec-chat .bg-\[\#202C33\] {
  background-color: #FFFFFF !important;
  color: #111B21 !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

html.light #sec-chat .bg-\[\#005C4B\],
html[data-theme="light"] #sec-chat .bg-\[\#005C4B\],
.light #sec-chat .bg-\[\#005C4B\] {
  background-color: #D9FDD3 !important;
  color: #111B21 !important;
  border: 1px solid #C4EBC0 !important;
}

html.light #sec-chat .text-slate-100,
html.light #sec-chat .text-slate-200,
html[data-theme="light"] #sec-chat .text-slate-100,
html[data-theme="light"] #sec-chat .text-slate-200,
.light #sec-chat .text-slate-100,
.light #sec-chat .text-slate-200 {
  color: #111B21 !important;
}

/* Withholding Tax Rates & Metric Badges in Light Mode */
html.light #sec-rs,
html[data-theme="light"] #sec-rs,
.light #sec-rs {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

html.light #sec-rs .bg-omni-bg,
html[data-theme="light"] #sec-rs .bg-omni-bg,
.light #sec-rs .bg-omni-bg {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

html.light #sec-rs .text-white,
html.light #sec-rs div.font-bold.text-white,
html.light .bg-omni-bg .text-white,
html.light .bg-omni-bg div.text-white,
html[data-theme="light"] #sec-rs .text-white,
html[data-theme="light"] #sec-rs div.font-bold.text-white,
html[data-theme="light"] .bg-omni-bg .text-white,
html[data-theme="light"] .bg-omni-bg div.text-white,
.light #sec-rs .text-white,
.light #sec-rs div.font-bold.text-white,
.light .bg-omni-bg .text-white,
.light .bg-omni-bg div.text-white {
  color: #0F172A !important;
}

/* Tables & Dashboards in Plan Pages */
html.light .plan-dashboard table,
html[data-theme="light"] .plan-dashboard table,
.light .plan-dashboard table {
  color: #0F172A !important;
}

html.light .plan-dashboard th,
html[data-theme="light"] .plan-dashboard th,
.light .plan-dashboard th {
  background-color: #F8FAFC !important;
  color: #475569 !important;
  border-color: #E2E8F0 !important;
}

html.light .plan-dashboard td,
html[data-theme="light"] .plan-dashboard td,
.light .plan-dashboard td {
  color: #0F172A !important;
  border-color: #F1F5F9 !important;
}