/* ─────────────────────────────────────────────────────────────
   FIX 1: Hide HTML until data-theme is set — prevents FOUC
   ───────────────────────────────────────────────────────────── */
html {
  visibility: hidden;
}
html[data-theme] {
  visibility: visible;
}


.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
  animation-play-state: paused !important;
}


* {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* ─────────────────────────────────────────────────────────────
   LIGHT THEME (DEFAULT)
   ───────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg-primary:            #f1f5f9;
  --bg-secondary:          #ffffff;
  --bg-tertiary:           #f8fafc;
  --bg-card:               #ffffff;

  /* Glass Effects */
  --glass-bg:              rgba(255, 255, 255, 0.75);
  --glass-bg-dark:         rgba(255, 255, 255, 0.60);
  --glass-border:          rgba(148, 163, 184, 0.20);
  --glass-shadow:          0 4px 16px rgba(15, 23, 42, 0.08);
  --glass-shadow-hover:    0 8px 24px rgba(15, 23, 42, 0.12);

  /* FIX 4: card-bg and glass-bg as solid-ish variables so
     dashboard cards don't need hardcoded rgba values */
  --card-bg:               #ffffff;
  --card-border:           rgba(0, 0, 0, 0.07);
  --card-hover-shadow:     0 10px 32px rgba(0, 0, 0, 0.10);

  /* Text */
  --text-primary:          #1e293b;
  --text-secondary:        #334155;
  --text-muted:            #475569;
  --text-ultra-muted:      #64748b;

  /* Header */
  --header-bg:             #ffffff;
  --header-border:         rgba(148, 163, 184, 0.20);
  --header-shadow:         0 2px 8px rgba(15, 23, 42, 0.08);
  --header-text:           #1e293b;

  /* Sidebar */
  --sidebar-bg:            #ffffff;
  --sidebar-border:        rgba(148, 163, 184, 0.20);
  --sidebar-text:          #334155;
  --sidebar-hover-bg:      rgba(59, 130, 246, 0.10);
  --sidebar-hover-text:    #3b82f6;
  --sidebar-active-bg:     linear-gradient(135deg, #3b82f6, #2563eb);
  --sidebar-active-text:   #ffffff;

  /* Footer */
  --footer-bg:             #ffffff;
  --footer-border:         rgba(148, 163, 184, 0.20);
  --footer-text:           #475569;

  /* Forms */
  --input-bg:              #ffffff;
  --input-border:          #e2e8f0;
  --input-focus-border:    #3b82f6;
  --input-text:            #1e293b;
  --input-placeholder:     #94a3b8;

  /* Tables */
  --table-header-bg:       rgba(59, 130, 246, 0.10);
  --table-row-hover:       rgba(59, 130, 246, 0.05);
  --table-border:          #e2e8f0;
  --table-text:            #1e293b;

  /* Modals */
  --modal-bg:              rgba(255, 255, 255, 0.95);
  --modal-overlay:         rgba(15, 23, 42, 0.50);
  --modal-border:          rgba(148, 163, 184, 0.20);

  /* Buttons */
  --btn-primary-bg:        linear-gradient(135deg, #3b82f6, #2563eb);
  --btn-primary-text:      #ffffff;
  --btn-secondary-bg:      #f1f5f9;
  --btn-secondary-text:    #1e293b;
  --btn-danger-bg:         #ef4444;
  --btn-success-bg:        #10b981;

  /* Transition tokens */
  --transition-fast:       0.15s ease;
  --transition-smooth:     0.3s ease;
}

/* ─────────────────────────────────────────────────────────────
   DARK THEME
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary:            #0a0e1a;
  --bg-secondary:          #0f172a;
  --bg-tertiary:           #1e293b;
  --bg-card:               #1e293b;

  /* Glass Effects */
  --glass-bg:              rgba(15, 23, 42, 0.80);
  --glass-bg-dark:         rgba(15, 23, 42, 0.95);
  --glass-border:          rgba(71, 85, 105, 0.30);
  --glass-shadow:          0 4px 16px rgba(0, 0, 0, 0.30);
  --glass-shadow-hover:    0 8px 24px rgba(0, 0, 0, 0.40);

  --card-bg:               rgba(17, 30, 53, 0.97);
  --card-border:           rgba(255, 255, 255, 0.08);
  --card-hover-shadow:     0 10px 32px rgba(0, 0, 0, 0.30);

  /* Text */
  --text-primary:          #f1f5f9;
  --text-secondary:        #cbd5e1;
  --text-muted:            #94a3b8;
  --text-ultra-muted:      #64748b;

  /* Header */
  --header-bg:             #0f172a;
  --header-border:         rgba(71, 85, 105, 0.30);
  --header-shadow:         0 2px 8px rgba(0, 0, 0, 0.30);
  --header-text:           #f1f5f9;

  /* Sidebar */
  --sidebar-bg:            #0f172a;
  --sidebar-border:        rgba(71, 85, 105, 0.30);
  --sidebar-text:          #cbd5e1;
  --sidebar-hover-bg:      rgba(59, 130, 246, 0.15);
  --sidebar-hover-text:    #60a5fa;
  --sidebar-active-bg:     linear-gradient(135deg, #3b82f6, #2563eb);
  --sidebar-active-text:   #ffffff;

  /* Footer */
  --footer-bg:             #0f172a;
  --footer-border:         rgba(71, 85, 105, 0.30);
  --footer-text:           #94a3b8;

  /* Forms */
  --input-bg:              rgba(30, 41, 59, 0.60);
  --input-border:          rgba(71, 85, 105, 0.40);
  --input-focus-border:    #3b82f6;
  --input-text:            #f1f5f9;
  --input-placeholder:     #64748b;

  /* Tables */
  --table-header-bg:       rgba(59, 130, 246, 0.15);
  --table-row-hover:       rgba(59, 130, 246, 0.10);
  --table-border:          rgba(71, 85, 105, 0.30);
  --table-text:            #f1f5f9;

  /* Modals */
  --modal-bg:              rgba(15, 23, 42, 0.95);
  --modal-overlay:         rgba(0, 0, 0, 0.70);
  --modal-border:          rgba(71, 85, 105, 0.30);

  /* Buttons */
  --btn-primary-bg:        linear-gradient(135deg, #3b82f6, #2563eb);
  --btn-primary-text:      #ffffff;
  --btn-secondary-bg:      rgba(30, 41, 59, 0.60);
  --btn-secondary-text:    #f1f5f9;
  --btn-danger-bg:         #ef4444;
  --btn-success-bg:        #10b981;

  /* Transition tokens */
  --transition-fast:       0.15s ease;
  --transition-smooth:     0.3s ease;
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL ELEMENT STYLES
   Use CSS variables everywhere — no hardcoded rgba values
   so that every element updates in the same paint cycle.
   ───────────────────────────────────────────────────────────── */
body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* ── Structural ── */
.fixedheader {
  background:    var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
  box-shadow:    var(--header-shadow) !important;
}

.sidebar,
.sidebarMainContent .sidebar,
.sideBar {
  background:   var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
}

.sidebar .nav-link          { color: var(--sidebar-text) !important; }
.sidebar .nav-link:hover    { background: var(--sidebar-hover-bg) !important; color: var(--sidebar-hover-text) !important; }
.sidebar .nav-link.active   { background: var(--sidebar-active-bg) !important; color: var(--sidebar-active-text) !important; }

footer,
.premium-footer,
.footer-sec {
  background: var(--footer-bg) !important;
  color:      var(--footer-text) !important;
}

/* ── Cards — FIX 5: use --card-bg and --card-border variables
   so all cards flip in one CSS variable update, not via
   separate [data-theme] overrides that paint asynchronously ── */
.card,
.compact-card,
.glass-card,
.welcome-banner-compact {
  background: var(--card-bg) !important;
  border:     1px solid var(--card-border) !important;
  box-shadow: var(--glass-shadow) !important;
  color:      var(--text-primary) !important;
}
.card:hover,
.compact-card:hover {
  box-shadow: var(--card-hover-shadow) !important;
}

/* ── Tables ── */
table thead th    { background: var(--table-header-bg) !important; color: var(--text-primary) !important; }
table tbody td    { color: var(--table-text) !important; border-bottom: 1px solid var(--table-border) !important; }
table tbody tr:hover { background: var(--table-row-hover) !important; }

/* ── Forms ── */
input,
textarea,
select {
  background: var(--input-bg) !important;
  border:     1px solid var(--input-border) !important;
  color:      var(--input-text) !important;
}
input::placeholder,
textarea::placeholder { color: var(--input-placeholder) !important; }
input:focus,
textarea:focus,
select:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow:   0 0 0 3px rgba(59, 130, 246, 0.10) !important;
}

/* ── Buttons ── */
.btn-primary   { background: var(--btn-primary-bg) !important;   color: var(--btn-primary-text) !important;   border: none !important; }
.btn-secondary { background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-text) !important; border: 1px solid var(--glass-border) !important; }

/* ── Modals ── */
.modal-content  { background: var(--modal-bg) !important;      border: 1px solid var(--modal-border) !important; }
.modal-backdrop { background: var(--modal-overlay) !important; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6           { color: var(--text-primary) !important; }
p                                 { color: var(--text-secondary) !important; }
.text-primary                     { color: var(--text-primary) !important; }
.text-secondary                   { color: var(--text-secondary) !important; }
.text-muted                       { color: var(--text-muted) !important; }
.welcome-title-compact            { color: var(--text-primary) !important; font-weight: 700 !important; }
.welcome-subtitle-compact         { color: var(--text-muted) !important;   font-weight: 500 !important; }
.company-name-header, .text-gray-700 { color: var(--text-primary) !important; font-weight: 700 !important; }

/* ── Background helpers ── */
.bg-primary   { background: var(--bg-primary) !important; }
.bg-secondary { background: var(--bg-secondary) !important; }
.bg-card      { background: var(--bg-card) !important; }
.border       { border-color: var(--glass-border) !important; }

/* ── Content areas ── */
.content,
.premium-content {
  background: var(--bg-primary) !important;
  color:      var(--text-primary) !important;
}