/* =====================================================
   SITERP Global Theme System
   One file to control ALL application theming
   ===================================================== */

:root {
  /* ========== DARK MODE (Default) ========== */
  
  /* Backgrounds */
  --bg-app-gradient: linear-gradient(to bottom right, #0f172a, #1d47c4, #0f172a);
  --bg-primary: rgba(255, 255, 255, 0.05);
  --bg-secondary: rgba(255, 255, 255, 0.1);
  --bg-tertiary: rgba(255, 255, 255, 0.15);
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-active: rgba(255, 255, 255, 0.12);
  --bg-input: rgba(255, 255, 255, 0.1);
  --bg-card: rgba(255, 255, 255, 0.1);
  --bg-modal: rgba(15, 23, 42, 0.95);
  
  /* Borders */
  --border-primary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.2);
  --border-focus: rgba(59, 130, 246, 0.5);
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.8);
  --text-tertiary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-disabled: rgba(255, 255, 255, 0.3);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.5);
  
  /* Status Colors (Same in both modes) */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  /* Blue Accent (Same in both modes) */
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
}

/* ========== LIGHT MODE ========== */
:root[data-theme="light"] {
  /* Backgrounds */
  --bg-app-gradient: linear-gradient(to bottom right, #f9fafb, #ffffff, #f3f4f6);
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-hover: #f3f4f6;
  --bg-active: #e5e7eb;
  --bg-input: #f9fafb;
  --bg-card: #ffffff;
  --bg-modal: rgba(255, 255, 255, 0.98);
  
  /* Borders */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-focus: rgba(59, 130, 246, 0.5);
  /* Stronger edge + depth for dashboard “glass” panels (see .siterp-light-panel below) */
  --surface-panel-border: #cbd5e1;
  --surface-panel-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.07);
  
  /* Text Colors */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;
  --text-disabled: #d1d5db;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* =====================================================
   UTILITY CLASSES - Auto-adapt to theme
   ===================================================== */

/* Backgrounds */
.theme-bg-gradient {
  background: linear-gradient(to bottom right, #0f172a, #1d47c4, #0f172a);
  background: var(--bg-app-gradient);
}

.theme-bg-primary {
  background: rgba(255, 255, 255, 0.05);
  background: var(--bg-primary);
}

.theme-bg-secondary {
  background: rgba(255, 255, 255, 0.1);
  background: var(--bg-secondary);
}

.theme-bg-tertiary {
  background: rgba(255, 255, 255, 0.15);
  background: var(--bg-tertiary);
}

.theme-bg-card {
  background: rgba(255, 255, 255, 0.1);
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.theme-bg-hover:hover {
  background: rgba(255, 255, 255, 0.08);
  background: var(--bg-hover);
}

.theme-bg-input {
  background: rgba(255, 255, 255, 0.1);
  background: var(--bg-input);
}

/* Borders */
.theme-border {
  border-color: rgba(255, 255, 255, 0.1);
  border-color: var(--border-primary);
}

.theme-border-secondary {
  border-color: rgba(255, 255, 255, 0.2);
  border-color: var(--border-secondary);
}

/* Text Colors */
.theme-text-primary {
  color: #ffffff;
  color: var(--text-primary);
}

.theme-text-secondary {
  color: rgba(255, 255, 255, 0.8);
  color: var(--text-secondary);
}

.theme-text-tertiary {
  color: rgba(255, 255, 255, 0.6);
  color: var(--text-tertiary);
}

.theme-text-muted {
  color: rgba(255, 255, 255, 0.5);
  color: var(--text-muted);
}

/* =====================================================
   LEGACY DARK MODE CLASS OVERRIDES
   These will auto-convert old classes to theme-aware
   ===================================================== */

/* Convert hardcoded dark backgrounds */
.bg-white\/5,
.bg-white\/10 {
  background: rgba(255, 255, 255, 0.05) !important;
  background: var(--bg-primary) !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.bg-white\/15,
.bg-white\/20 {
  background: rgba(255, 255, 255, 0.1) !important;
  background: var(--bg-secondary) !important;
}

/* Convert hardcoded dark borders */
.border-white\/10,
.border-white\/20 {
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--border-primary) !important;
}

.border-white\/30 {
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
}

/* Convert hardcoded text colors */
.text-white {
  color: #ffffff !important;
  color: var(--text-primary) !important;
}

.text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

.text-white\/60,
.text-white\/70 {
  color: rgba(255, 255, 255, 0.6) !important;
  color: var(--text-tertiary) !important;
}

.text-white\/50 {
  color: rgba(255, 255, 255, 0.5) !important;
  color: var(--text-muted) !important;
}

/* Opacity tiers not covered above — unmapped they'd stay literal white (#fff @ α) */
.text-white\/40,
.text-white\/30 {
  color: rgba(255, 255, 255, 0.5) !important;
  color: var(--text-muted) !important;
}

/* ---------------------------------------------------------------------------
   Light mode — primary gradient / solid “brand” surfaces must stay WHITE
   The legacy remap above turns `.text-white` into ink for glass/dark shells.
   Facturation (Archives tabs, Nouveau Document toggle, etc.) uses blue
   gradients + `text-white`; without this, labels/icons render black on blue.
   Descendant `.text-white*` utilities also need forcing (child beats inherit).
   --------------------------------------------------------------------------- */

:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-blue-600,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-blue-700,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-600.to-blue-700,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-600.to-blue-800,
:root[data-theme="light"] .bg-gradient-to-r.from-orange-500.to-orange-600,
:root[data-theme="light"] .bg-gradient-to-r.from-orange-500.to-orange-700,
:root[data-theme="light"] .bg-gradient-to-r.from-orange-600.to-orange-800,
:root[data-theme="light"] .bg-gradient-to-r.from-green-500.to-green-600,
:root[data-theme="light"] .bg-gradient-to-r.from-green-500.to-green-700,
:root[data-theme="light"] .bg-gradient-to-r.from-emerald-500.to-emerald-700,
:root[data-theme="light"] .bg-gradient-to-r.from-emerald-500.to-emerald-600,
:root[data-theme="light"] .bg-gradient-to-r.from-purple-500.to-purple-600,
:root[data-theme="light"] .bg-gradient-to-r.from-purple-500.to-purple-700,
:root[data-theme="light"] .bg-gradient-to-r.from-indigo-500.to-indigo-600,
:root[data-theme="light"] .bg-gradient-to-r.from-indigo-500.to-indigo-700,
:root[data-theme="light"] .bg-gradient-to-r.from-red-500.to-red-600,
:root[data-theme="light"] .bg-gradient-to-r.from-red-500.to-red-700,
:root[data-theme="light"] .bg-gradient-to-r.from-rose-500.to-rose-700,
:root[data-theme="light"] .bg-gradient-to-r.from-sky-500.to-sky-700,
:root[data-theme="light"] .bg-gradient-to-r.from-cyan-500.to-cyan-700,
:root[data-theme="light"] .bg-gradient-to-r.from-teal-500.to-teal-700,
:root[data-theme="light"] .bg-gradient-to-r.from-amber-500.to-amber-600,
:root[data-theme="light"] .bg-gradient-to-r.from-amber-500.to-amber-700,
:root[data-theme="light"] .bg-gradient-to-r.from-pink-500.to-pink-600,
:root[data-theme="light"] .bg-gradient-to-r.from-pink-500.to-pink-700,
:root[data-theme="light"] .bg-gradient-to-r.from-cyan-500.to-cyan-600,
:root[data-theme="light"] .bg-gradient-to-r.from-emerald-500.to-emerald-600,
:root[data-theme="light"] .bg-gradient-to-r.from-gray-500.to-gray-600,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-400.to-blue-600,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-blue-600,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-blue-700,
:root[data-theme="light"] .bg-gradient-to-br.from-purple-500.to-purple-600,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-purple-600,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-purple-600,
:root[data-theme="light"] .bg-blue-600.text-white,
:root[data-theme="light"] .bg-blue-700.text-white,
:root[data-theme="light"] .bg-blue-800.text-white {
  color: #ffffff !important;
}

:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-blue-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-blue-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-blue-600 .text-white\/70,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-blue-600 .text-white\/60,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-blue-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-blue-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-blue-700 .text-white\/70,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-blue-700 .text-white\/60,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-600.to-blue-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-600.to-blue-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-600.to-blue-700 .text-white\/70,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-600.to-blue-700 .text-white\/60,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-600.to-blue-800 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-600.to-blue-800 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-600.to-blue-800 .text-white\/70,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-600.to-blue-800 .text-white\/60,
:root[data-theme="light"] .bg-gradient-to-r.from-orange-500.to-orange-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-orange-500.to-orange-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-orange-500.to-orange-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-orange-500.to-orange-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-orange-600.to-orange-800 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-orange-600.to-orange-800 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-green-500.to-green-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-green-500.to-green-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-green-500.to-green-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-green-500.to-green-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-emerald-500.to-emerald-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-emerald-500.to-emerald-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-purple-500.to-purple-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-purple-500.to-purple-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-purple-500.to-purple-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-purple-500.to-purple-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-indigo-500.to-indigo-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-indigo-500.to-indigo-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-indigo-500.to-indigo-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-indigo-500.to-indigo-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-red-500.to-red-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-red-500.to-red-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-red-500.to-red-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-red-500.to-red-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-rose-500.to-rose-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-rose-500.to-rose-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-sky-500.to-sky-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-sky-500.to-sky-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-cyan-500.to-cyan-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-cyan-500.to-cyan-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-teal-500.to-teal-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-teal-500.to-teal-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-amber-500.to-amber-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-amber-500.to-amber-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-amber-500.to-amber-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-amber-500.to-amber-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-pink-500.to-pink-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-pink-500.to-pink-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-pink-500.to-pink-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-pink-500.to-pink-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-cyan-500.to-cyan-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-cyan-500.to-cyan-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-emerald-500.to-emerald-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-emerald-500.to-emerald-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-gray-500.to-gray-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-gray-500.to-gray-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-400.to-blue-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-400.to-blue-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-400.to-blue-600 .text-white\/70,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-400.to-blue-600 .text-white\/60,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-blue-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-blue-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-blue-600 .text-white\/70,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-blue-600 .text-white\/60,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-blue-700 .text-white,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-blue-700 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-blue-700 .text-white\/70,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-blue-700 .text-white\/60,
:root[data-theme="light"] .bg-gradient-to-br.from-purple-500.to-purple-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-br.from-purple-500.to-purple-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-br.from-purple-500.to-purple-600 .text-white\/70,
:root[data-theme="light"] .bg-gradient-to-br.from-purple-500.to-purple-600 .text-white\/60,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-purple-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-purple-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-purple-600 .text-white\/70,
:root[data-theme="light"] .bg-gradient-to-br.from-blue-500.to-purple-600 .text-white\/60,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-purple-600 .text-white,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-purple-600 .text-white\/80,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-purple-600 .text-white\/70,
:root[data-theme="light"] .bg-gradient-to-r.from-blue-500.to-purple-600 .text-white\/60 {
  color: #ffffff !important;
}

/* Light mode — solid blue + translucent brand fills (A4/A5, Aperçu, barre aperçu PDF…) */
:root[data-theme="light"] .bg-blue-500.text-white,
:root[data-theme="light"] button.bg-blue-500.text-white {
  color: #ffffff !important;
}

:root[data-theme="light"] .bg-blue-500\/40.text-white,
:root[data-theme="light"] .bg-purple-500\/40.text-white,
:root[data-theme="light"] .bg-green-500\/40.text-white,
:root[data-theme="light"] .group.bg-blue-500\/40.text-white,
:root[data-theme="light"] .group.bg-purple-500\/40.text-white,
:root[data-theme="light"] .group.bg-green-500\/40.text-white {
  color: #ffffff !important;
}

:root[data-theme="light"] .relative.bg-blue-500\/40.text-white,
:root[data-theme="light"] .relative.bg-purple-500\/40.text-white,
:root[data-theme="light"] .relative.bg-green-500\/40.text-white {
  color: #ffffff !important;
}

/*
 * Sidebar / nav: legacy `.text-white` remap turns “white” into ink on light theme.
 * Selected rows use `bg-blue-600 text-white`; without this, labels + Lucide icons stay black.
 */
:root[data-theme="light"] nav .bg-blue-600 {
  color: #ffffff !important;
}

:root[data-theme="light"] nav .bg-blue-600 svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Convert hardcoded dark gradients (dashboard léger en mode clair) — hors écrans pre-auth */
.bg-gradient-to-br.from-slate-900.via-blue-750.to-slate-900:not(.siterp-preauth-route),
.bg-gradient-to-br.from-slate-900.via-blue-900.to-slate-900:not(.siterp-preauth-route) {
  background: linear-gradient(to bottom right, #0f172a, #1d47c4, #0f172a) !important;
  background: var(--bg-app-gradient) !important;
}

/*
 * Routes /#/setup et /#/login : même dégradé bleu que le métier même si --bg-app-gradient est « clair ».
 * Neutralise aussi le remap legacy `.bg-white/10 → #fff` sous ce wrapper (cartes « glass »).
 */
.siterp-preauth-route.bg-gradient-to-br.from-slate-900.via-blue-750.to-slate-900,
.siterp-preauth-route.bg-gradient-to-br.from-slate-900.via-blue-900.to-slate-900 {
  background-image: linear-gradient(to bottom right, rgb(15 23 42), rgb(29 71 196), rgb(15 23 42)) !important;
}

:root[data-theme="light"] .siterp-preauth-route .bg-white\/5 {
  background-color: rgb(255 255 255 / 0.06) !important;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

:root[data-theme="light"] .siterp-preauth-route .bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1) !important;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

:root[data-theme="light"] .siterp-preauth-route .bg-white\/15 {
  background-color: rgb(255 255 255 / 0.1) !important;
}

:root[data-theme="light"] .siterp-preauth-route .bg-white\/20 {
  background-color: rgb(255 255 255 / 0.08) !important;
}

:root[data-theme="light"] .siterp-preauth-route .border-white\/10 {
  border-color: rgb(255 255 255 / 0.1) !important;
}

:root[data-theme="light"] .siterp-preauth-route .border-white\/15 {
  border-color: rgb(255 255 255 / 0.15) !important;
}

:root[data-theme="light"] .siterp-preauth-route .border-white\/20 {
  border-color: rgb(255 255 255 / 0.2) !important;
}

:root[data-theme="light"] .siterp-preauth-route .border-white\/25 {
  border-color: rgb(255 255 255 / 0.25) !important;
}

:root[data-theme="light"] .siterp-preauth-route .text-white {
  color: #ffffff !important;
}

:root[data-theme="light"] .siterp-preauth-route .text-white\/35 {
  color: rgb(255 255 255 / 0.45) !important;
}

:root[data-theme="light"] .siterp-preauth-route .text-white\/40 {
  color: rgb(255 255 255 / 0.5) !important;
}

:root[data-theme="light"] .siterp-preauth-route .text-white\/45 {
  color: rgb(255 255 255 / 0.58) !important;
}

:root[data-theme="light"] .siterp-preauth-route .text-white\/50 {
  color: rgb(255 255 255 / 0.62) !important;
}

:root[data-theme="light"] .siterp-preauth-route .text-white\/55 {
  color: rgb(255 255 255 / 0.68) !important;
}

:root[data-theme="light"] .siterp-preauth-route .text-white\/60 {
  color: rgb(255 255 255 / 0.72) !important;
}

:root[data-theme="light"] .siterp-preauth-route .text-white\/65 {
  color: rgb(255 255 255 / 0.78) !important;
}

:root[data-theme="light"] .siterp-preauth-route .text-white\/70 {
  color: rgb(255 255 255 / 0.82) !important;
}

:root[data-theme="light"] .siterp-preauth-route .text-white\/80 {
  color: rgb(255 255 255 / 0.9) !important;
}

:root[data-theme="light"]
  .siterp-preauth-route.rounded-3xl.backdrop-blur-lg.border.border-white\/20,
:root[data-theme="light"]
  .siterp-preauth-route
  .rounded-3xl.backdrop-blur-lg.border.border-white\/20,
:root[data-theme="light"]
  .siterp-preauth-route.rounded-3xl.backdrop-blur-lg.border.border-white\/10,
:root[data-theme="light"]
  .siterp-preauth-route
  .rounded-3xl.backdrop-blur-lg.border.border-white\/10 {
  border-color: rgb(255 255 255 / 0.2) !important;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45) !important;
}

:root[data-theme="light"]
  .siterp-preauth-route
  .rounded-3xl.backdrop-blur-md.border.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2) !important;
  box-shadow: 0 20px 35px rgb(0 0 0 / 0.35) !important;
}

/* Setup wizard — viewport-locked card, no page scroll, fluid reflow on zoom */
html:has(.siterp-setup-shell),
html:has(.siterp-setup-shell) body {
  height: 100%;
  overflow: hidden;
}

.siterp-setup-shell {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.siterp-setup-shell .setup-wizard-card {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.setup-welcome-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  justify-content: center;
  align-items: stretch;
  padding: clamp(0.8vh, 1.5vh, 2vh) clamp(1vh, 2vh, 2.5vh);
  font-size: clamp(0.95vh, 1.25vh, 1.35vh);
  --setup-fit-scale: 1;
}

.setup-welcome-body {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 100%;
  gap: clamp(0.45vh, 1.1vh, 1.35vh);
  overflow: hidden;
  transform: scale(var(--setup-fit-scale));
  transform-origin: center center;
  will-change: transform;
}

.setup-welcome-hero {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.25vh, 0.55vh, 0.75vh);
  text-align: center;
}

.setup-welcome-features {
  flex: 0 0 auto;
  width: 100%;
}

.setup-feature-tile {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.65rem, 1.75vh, 1.15rem);
  gap: clamp(0.25rem, 0.55vh, 0.5rem);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.setup-feature-tile:hover {
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.08);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
}

.setup-feature-tile:hover .setup-feature-icon {
  color: rgb(255 255 255 / 0.92);
}

.setup-feature-tile h3,
.setup-feature-tile p,
.setup-feature-tile li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.setup-welcome-footer {
  flex: 0 0 auto;
  width: 100%;
}

.setup-welcome-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.25rem, 0.55vh, 0.45rem);
  margin-top: clamp(0.25rem, 0.6vh, 0.45rem);
}

.setup-welcome-tag {
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.62);
  font-size: clamp(0.58rem, 1.05vh, 0.72rem);
  line-height: 1.2;
  padding: clamp(0.18rem, 0.45vh, 0.32rem) clamp(0.45rem, 0.95vh, 0.7rem);
  white-space: nowrap;
}

.setup-feature-points {
  display: flex;
  flex-direction: column;
  gap: clamp(0.15rem, 0.4vh, 0.32rem);
  margin: clamp(0.15rem, 0.35vh, 0.3rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.58rem, 1.05vh, 0.74rem);
  line-height: 1.35;
  color: rgb(255 255 255 / 0.5);
}

.setup-feature-point {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.25rem, 0.45vh, 0.4rem);
}

.setup-feature-point-icon {
  width: clamp(0.65rem, 1.2vh, 0.85rem);
  height: clamp(0.65rem, 1.2vh, 0.85rem);
  flex-shrink: 0;
  margin-top: 0.12em;
  color: rgb(52 211 153 / 0.85);
}

.setup-welcome-logo {
  height: clamp(3.5vh, 6.5vh, 7.5vh);
  width: auto;
}

.setup-welcome-title {
  font-size: clamp(2.2vh, 3.8vh, 4.5vh);
  line-height: 1.1;
}

.setup-welcome-subtitle {
  font-size: clamp(1.15vh, 1.55vh, 1.75vh);
}

.setup-welcome-desc {
  font-size: clamp(0.95vh, 1.25vh, 1.4vh);
  line-height: 1.45;
}

.setup-feature-icon {
  width: clamp(1.5rem, 3.8vh, 2.1rem);
  height: clamp(1.5rem, 3.8vh, 2.1rem);
  color: rgb(255 255 255 / 0.72);
  transition: color 0.2s ease;
}

.setup-feature-title {
  font-size: clamp(0.78rem, 1.6vh, 1.05rem);
}

.setup-feature-desc {
  font-size: clamp(0.65rem, 1.3vh, 0.85rem);
  line-height: 1.4;
}

.setup-welcome-cta {
  padding-block: clamp(0.55vh, 1.1vh, 1.35vh);
  padding-inline: clamp(1.2vh, 2.2vh, 2.6vh);
  font-size: clamp(1.05vh, 1.4vh, 1.55vh);
}

.setup-welcome-stats {
  gap: clamp(0.75vh, 1.5vh, 2vh);
  margin-top: clamp(0.45vh, 0.9vh, 1.1vh);
  padding-top: clamp(0.45vh, 0.9vh, 1.1vh);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: clamp(0.85vh, 1.1vh, 1.2vh);
}

/* Clé produit + autres étapes setup (réutilise setup-welcome-*) */
.setup-step-form {
  display: flex;
  flex-direction: column;
  gap: clamp(0.45vh, 1.1vh, 1.35vh);
  width: 100%;
  min-width: 0;
}

.setup-step-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35vh, 0.65vh, 0.85vh);
  margin-top: clamp(0.15vh, 0.35vh, 0.5vh);
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  padding: clamp(0.25vh, 0.5vh, 0.65vh) clamp(0.75vh, 1.25vh, 1.5vh);
  font-size: clamp(0.9vh, 1.15vh, 1.3vh);
  font-weight: 500;
}

.setup-step-status-icon {
  width: clamp(1vh, 1.25vh, 1.4vh);
  height: clamp(1vh, 1.25vh, 1.4vh);
  flex-shrink: 0;
}

.setup-step-error {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.35vh, 0.65vh, 0.85vh);
  border-radius: 0.85em;
  border: 1px solid rgb(239 68 68 / 0.35);
  background: rgb(239 68 68 / 0.1);
  padding: clamp(0.55vh, 1vh, 1.2vh) clamp(0.75vh, 1.25vh, 1.5vh);
  font-size: clamp(0.9vh, 1.15vh, 1.3vh);
  line-height: 1.4;
  color: rgb(254 226 226);
}

.setup-step-error-icon {
  width: clamp(1.05vh, 1.3vh, 1.45vh);
  height: clamp(1.05vh, 1.3vh, 1.45vh);
  flex-shrink: 0;
  margin-top: 0.1em;
  color: rgb(252 165 165);
}

.setup-step-field {
  width: 100%;
  min-width: 0;
}

.setup-step-label {
  display: block;
  margin-bottom: clamp(0.25vh, 0.45vh, 0.6vh);
  font-size: clamp(0.95vh, 1.2vh, 1.35vh);
  font-weight: 500;
  color: rgb(255 255 255 / 0.7);
}

.setup-step-label-hint {
  margin-left: 0.35em;
  font-weight: 400;
  color: rgb(255 255 255 / 0.45);
}

.setup-step-field-icon {
  pointer-events: none;
  position: absolute;
  left: clamp(0.75vh, 1.1vh, 1.35vh);
  top: 50%;
  transform: translateY(-50%);
  color: rgb(255 255 255 / 0.35);
}

.setup-step-input {
  width: 100%;
  min-width: 0;
  border-radius: 0.85em;
  border: 1px solid rgb(255 255 255 / 0.2);
  background: rgb(255 255 255 / 0.05);
  padding: clamp(0.55vh, 1vh, 1.2vh) clamp(0.75vh, 1.25vh, 1.5vh);
  padding-left: clamp(2.4vh, 3.2vh, 3.6vh);
  font-size: clamp(1vh, 1.25vh, 1.4vh);
  color: rgb(255 255 255);
}

.setup-step-input::placeholder {
  color: rgb(255 255 255 / 0.3);
}

.setup-step-input:focus {
  border-color: rgb(96 165 250 / 0.5);
  outline: none;
  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.3);
}

.setup-step-hint {
  display: flex;
  align-items: center;
  gap: clamp(0.35vh, 0.65vh, 0.85vh);
  margin-top: clamp(0.25vh, 0.45vh, 0.6vh);
  font-size: clamp(0.9vh, 1.15vh, 1.3vh);
}

.setup-step-hint-icon {
  width: clamp(1vh, 1.25vh, 1.4vh);
  height: clamp(1vh, 1.25vh, 1.4vh);
  flex-shrink: 0;
}

.setup-step-note {
  margin-top: clamp(0.25vh, 0.45vh, 0.6vh);
  font-size: clamp(0.8vh, 1vh, 1.15vh);
  line-height: 1.4;
  color: rgb(255 255 255 / 0.35);
}

.setup-step-info {
  width: 100%;
  min-width: 0;
  border-radius: 1em;
  border: 1px solid rgb(96 165 250 / 0.25);
  background: rgb(59 130 246 / 0.1);
  padding: clamp(0.65vh, 1.25vh, 1.5vh);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.setup-step-info-icon {
  width: clamp(1.2vh, 1.55vh, 1.75vh);
  height: clamp(1.2vh, 1.55vh, 1.75vh);
  margin-top: 0.1em;
}

.setup-step-info-title {
  font-size: clamp(1.05vh, 1.35vh, 1.5vh);
  font-weight: 600;
  line-height: 1.3;
}

.setup-step-info-text {
  margin-top: clamp(0.15vh, 0.35vh, 0.45vh);
  font-size: clamp(0.9vh, 1.15vh, 1.3vh);
  line-height: 1.45;
}

.setup-step-actions {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-top: clamp(0.45vh, 0.9vh, 1.1vh);
}

.setup-step-spinner {
  width: clamp(1.2vh, 1.55vh, 1.75vh);
  height: clamp(1.2vh, 1.55vh, 1.75vh);
  flex-shrink: 0;
  border-radius: 9999px;
  border: 2px solid rgb(255 255 255 / 0.25);
  border-top-color: rgb(255 255 255);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =====================================================
   LIGHT MODE — dashboard / glass panels (global, no JS)
   Targets the common Tailwind pattern used across KPI & chart shells:
   rounded-3xl + backdrop-blur-lg + border-white/10|20
   ===================================================== */

:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 {
  border-color: var(--surface-panel-border) !important;
  box-shadow: var(--surface-panel-shadow) !important;
}

:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/10 {
  border-color: var(--surface-panel-border) !important;
  box-shadow: var(--surface-panel-shadow) !important;
}

/**
 * Opt-in utility for any new surface (tables, drawers, nested cards).
 * Use className="... siterp-light-panel" in light contexts if needed.
 */
:root[data-theme="light"] .siterp-light-panel {
  border-color: var(--surface-panel-border) !important;
  box-shadow: var(--surface-panel-shadow) !important;
}

/* =====================================================
   LIGHT MODE — rounded-2xl “glass gradient” cards (Nouveau Document grid, rapports)
   ===================================================== */
:root[data-theme="light"] .rounded-2xl.border.border-white\/10.bg-gradient-to-br.from-white\/10.to-white\/5 {
  background: linear-gradient(to bottom right, #ffffff, #f8fafc) !important;
  border-color: var(--surface-panel-border) !important;
  box-shadow: var(--surface-panel-shadow) !important;
}

/* =====================================================
   LIGHT MODE — Nouveau Document (styles injectés + cartes xl/2xl)
   Wrapper .document-creation-light ajouté par DocumentCreation.js (routes /document-creation, /creer-un-document) et InventaireDocumentCreation.js (/inventaire/document-creation)
   ===================================================== */
:root[data-theme="light"] .document-creation-light .rounded-xl.bg-white\/5.border.border-white\/20 {
  border-color: var(--surface-panel-border) !important;
  box-shadow: var(--surface-panel-shadow) !important;
}

:root[data-theme="light"] .document-creation-light .rounded-xl.backdrop-blur-lg.border.border-white\/20 {
  border-color: var(--surface-panel-border) !important;
  box-shadow: var(--surface-panel-shadow) !important;
}

:root[data-theme="light"] .document-creation-light .form-group label {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] .document-creation-light .form-group input,
:root[data-theme="light"] .document-creation-light .form-group textarea,
:root[data-theme="light"] .document-creation-light .form-group select {
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-color: var(--bg-input) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
  color: #ffffff !important;
  color: var(--text-primary) !important;
}

:root[data-theme="light"] .document-creation-light .form-group input::placeholder,
:root[data-theme="light"] .document-creation-light .form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  color: var(--text-muted) !important;
}

:root[data-theme="light"] .document-creation-light .form-group input:focus,
:root[data-theme="light"] .document-creation-light .form-group textarea:focus,
:root[data-theme="light"] .document-creation-light .form-group select:focus {
  background-color: #ffffff !important;
  border-color: #3b82f6 !important;
  border-color: var(--color-blue-500) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 0 0 2px var(--border-focus) !important;
}

:root[data-theme="light"] .document-creation-light .readonly-input {
  background-color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] .document-creation-light .form-section,
:root[data-theme="light"] .document-creation-light .client-info,
:root[data-theme="light"] .document-creation-light .item-row {
  background: #ffffff !important;
  border-color: var(--surface-panel-border) !important;
  box-shadow: var(--surface-panel-shadow) !important;
}

:root[data-theme="light"] .document-creation-light .section-title {
  color: #ffffff !important;
  color: var(--text-primary) !important;
}

:root[data-theme="light"] .document-creation-light .section-subtitle {
  color: rgba(255, 255, 255, 0.6) !important;
  color: var(--text-tertiary) !important;
}

:root[data-theme="light"] .document-creation-light .client-details {
  color: #ffffff !important;
  color: var(--text-primary) !important;
}

:root[data-theme="light"] .document-creation-light .fiscal-info {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] .document-creation-light .totals-summary {
  background: #f9fafb !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
}

:root[data-theme="light"] .document-creation-light .totals-summary-header {
  color: #ffffff !important;
  color: var(--text-primary) !important;
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
  border-bottom-color: var(--border-secondary) !important;
  background: #f3f4f6 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .document-creation-light .total-line {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] .document-creation-light .btn.btn-secondary {
  background: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
  color: #ffffff !important;
  color: var(--text-primary) !important;
}

:root[data-theme="light"] .document-creation-light .btn.btn-secondary:hover {
  background: #e5e7eb !important;
}

:root[data-theme="light"] .document-creation-light .taxes-config .form-group label {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] .document-creation-light .rounded-2xl.border.border-white\/10.bg-gradient-to-br.from-white\/10.to-white\/5 {
  background: linear-gradient(to bottom right, #ffffff, #f8fafc) !important;
  border-color: var(--surface-panel-border) !important;
  box-shadow: var(--surface-panel-shadow) !important;
}

/* =====================================================
   LIGHT MODE — Facturation portal modals (Clients + shared alias)
   Apply `clients-modal-light` or `siterp-modal-light` on modal root in light mode.
   ===================================================== */
:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light) {
  background: #ffffff !important;
  border-color: var(--surface-panel-border) !important;
  box-shadow: var(--surface-panel-shadow) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .border-white\/10 {
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--border-primary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) h1.text-white,
:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) h2.text-white,
:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) h3.text-white,
:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) h4.text-white {
  color: #ffffff !important;
  color: var(--text-primary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) label.block.text-white\/70 {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) label.block.text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) input.text-white,
:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) textarea.text-white {
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-color: var(--bg-input) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
  color: #ffffff !important;
  color: var(--text-primary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) input::placeholder,
:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  color: var(--text-muted) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .bg-white\/5 {
  background: #f9fafb !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .border-white\/20 {
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--border-primary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .bg-white\/10 {
  background: #ffffff !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) button.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-color: var(--bg-input) !important;
  color: #ffffff !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) button.bg-white\/10:hover,
:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) button.hover\:bg-white\/20:hover {
  background-color: #e5e7eb !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .text-white\/60 {
  color: rgba(255, 255, 255, 0.6) !important;
  color: var(--text-tertiary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .text-white\/70 {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .text-white\/45 {
  color: rgba(255, 255, 255, 0.6) !important;
  color: var(--text-tertiary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .text-white\/40 {
  color: rgba(255, 255, 255, 0.5) !important;
  color: var(--text-muted) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .bg-blue-500\/10 .text-white,
:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .bg-blue-500\/10 .text-white\/80 {
  color: #ffffff !important;
  color: var(--text-primary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) button.text-white\/70 {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) button.text-white\/70:hover {
  color: #ffffff !important;
  color: var(--text-primary) !important;
}

/* Detail / view rows inside tinted section cards (not the gradient header actions) */
:root[data-theme="light"] :is(.clients-modal-light, .siterp-modal-light, .facturation-config-page, .settings-container) .bg-white\/5 .text-white {
  color: #ffffff !important;
  color: var(--text-primary) !important;
}

/* Settings shell: top title + subtitle use inline colors — remap in light mode */
:root[data-theme="light"] .settings-container > div:first-child h1[style] {
  color: #ffffff !important;
  color: var(--text-primary) !important;
}
:root[data-theme="light"] .settings-container > div:first-child p[style] {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] :is(.facturation-config-page, .settings-container) .sticky.top-0.z-50.backdrop-blur-lg.rounded-xl {
  border-color: rgb(226 232 240) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07) !important;
}

/* Facturation config / Settings: inline-styled tab strips (inactive tabs use white ink) */
:root[data-theme="light"] :is(.facturation-config-page, .settings-container) .sticky.top-0.z-50 button {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}
:root[data-theme="light"] :is(.facturation-config-page, .settings-container) .sticky.top-0.z-50 button[style*="linear-gradient"] {
  color: #ffffff !important;
}
/* Inline gradient tabs: global `.text-white` → ink remap breaks Lucide on blue; force literal white */
:root[data-theme="light"] :is(.facturation-config-page, .settings-container) .sticky.top-0.z-50 button[style*="linear-gradient"] .text-white,
:root[data-theme="light"] :is(.facturation-config-page, .settings-container) .sticky.top-0.z-50 button[style*="linear-gradient"] .text-white\/80,
:root[data-theme="light"] :is(.facturation-config-page, .settings-container) .sticky.top-0.z-50 button[style*="linear-gradient"] .text-white\/70,
:root[data-theme="light"] :is(.facturation-config-page, .settings-container) .sticky.top-0.z-50 button[style*="linear-gradient"] .text-white\/60 {
  color: #ffffff !important;
}
:root[data-theme="light"] :is(.facturation-config-page, .settings-container) .sticky.top-0.z-50 button[style*="linear-gradient"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
/* Green save chip in tab strip — keep white label */
:root[data-theme="light"] :is(.facturation-config-page, .settings-container) .sticky.top-0.z-50 button[style*="197, 94"] {
  color: #ffffff !important;
}
/* Hover: inactive tab strip buttons use theme ink (beats inline non-!important from handlers) */
:root[data-theme="light"] :is(.facturation-config-page, .settings-container) .sticky.top-0.z-50 button:not([style*="linear-gradient"]):hover {
  color: #ffffff !important;
  color: var(--text-primary) !important;
  background-color: #f1f5f9 !important;
}

/* Settings: inline-styled labels / section titles / inputs (company tab, etc.) */
:root[data-theme="light"] .settings-container label {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}
:root[data-theme="light"] .settings-container h3[style*="color"] {
  color: #ffffff !important;
  color: var(--text-primary) !important;
}
:root[data-theme="light"] .settings-container input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
:root[data-theme="light"] .settings-container textarea {
  color: #ffffff !important;
  color: var(--text-primary) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-color: var(--bg-input) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
}

/* Light mode — glass data tables: `divide-white/10` is invisible on white; restore row hairlines */
:root[data-theme="light"] tbody.employees-table-body.divide-y > :not([hidden]) ~ :not([hidden]),
:root[data-theme="light"] .employees-table.data-table tbody.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
  border-top-color: var(--border-primary) !important;
}

/* Archives toolbar (Facturation) — search + glass filter chips on white shell */
:root[data-theme="light"] .archives-toolbar--light .archives-toolbar-search input {
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-color: var(--bg-input) !important;
  color: #ffffff !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
}

:root[data-theme="light"] .archives-toolbar--light .archives-toolbar-search input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  color: var(--text-muted) !important;
}

:root[data-theme="light"] .archives-toolbar--light .archives-toolbar-search svg.text-white\/70 {
  color: rgba(255, 255, 255, 0.6) !important;
  color: var(--text-tertiary) !important;
}

:root[data-theme="light"] .archives-toolbar--light button.border-white\/20:not([class*="bg-orange"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-green"]):not([class*="bg-slate-7"]) {
  background-color: #f8fafc !important;
  color: #ffffff !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
}

:root[data-theme="light"] .archives-toolbar--light button.border-white\/20:not([class*="bg-orange"]) .text-white,
:root[data-theme="light"] .archives-toolbar--light button.border-white\/20:not([class*="bg-orange"]) .text-white\/80,
:root[data-theme="light"] .archives-toolbar--light button.border-white\/20:not([class*="bg-orange"]) .text-white\/70 {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] .archives-toolbar--light button.border-white\/20:not([class*="bg-orange"]) svg.text-white\/80,
:root[data-theme="light"] .archives-toolbar--light button.border-white\/20:not([class*="bg-orange"]) svg.text-white\/70 {
  color: rgba(255, 255, 255, 0.6) !important;
  color: var(--text-tertiary) !important;
}

:root[data-theme="light"] .archives-toolbar--light button.border-white\/20[class*="text-blue-300"],
:root[data-theme="light"] .archives-toolbar--light button.border-white\/20 [class*="text-blue-300"] {
  color: #1d4ed8 !important;
}

:root[data-theme="light"] .archives-toolbar--light label.text-white\/80 {
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] .archives-toolbar--light .gps-datepicker,
:root[data-theme="light"] .archives-toolbar--light input.gps-datepicker {
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-color: var(--bg-input) !important;
  color: #ffffff !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--border-secondary) !important;
}

:root[data-theme="light"] .archives-toolbar--light .border-t.border-blue-400\/30 {
  border-color: rgb(226 232 240) !important;
}

:root[data-theme="light"] .archives-toolbar--light button.archives-date-footer-reset {
  background-color: #f1f5f9 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="light"] .archives-toolbar--light button.archives-date-footer-reset:hover {
  background-color: #e2e8f0 !important;
}

/*
 * List-page Import / Export — same visual language as Clients (soft tint + dark ink).
 * Buttons keep the dark-glass class names for Tailwind; in light theme we remap them.
 */
:root[data-theme="light"] button.bg-orange-500\/20.text-orange-200 {
  background-color: #ffedd5 !important; /* orange-100 */
  color: #431407 !important; /* orange-950 */
}
:root[data-theme="light"] button.bg-orange-500\/20.text-orange-200.border-orange-500\/30,
:root[data-theme="light"] button.border-orange-500\/30.bg-orange-500\/20.text-orange-200 {
  border-color: #fdba74 !important; /* orange-300 */
}
:root[data-theme="light"] button.bg-orange-500\/20.text-orange-200:hover {
  background-color: #fed7aa !important; /* orange-200 */
  color: #431407 !important;
}

:root[data-theme="light"] button.bg-green-500\/20.text-green-200 {
  background-color: #d1fae5 !important; /* emerald-100 */
  color: #022c22 !important; /* emerald-950 */
}
:root[data-theme="light"] button.bg-green-500\/20.text-green-200.border-green-500\/30,
:root[data-theme="light"] button.border-green-500\/30.bg-green-500\/20.text-green-200 {
  border-color: #6ee7b7 !important; /* emerald-300 */
}
:root[data-theme="light"] button.bg-green-500\/20.text-green-200:hover {
  background-color: #a7f3d0 !important; /* emerald-200 */
  color: #022c22 !important;
}

/* Neutral / print-style actions — soft tint + dark ink in light theme */
:root[data-theme="light"] button.bg-slate-500\/20.text-slate-200 {
  background-color: #f1f5f9 !important; /* slate-100 */
  color: #0f172a !important; /* slate-900 */
}
:root[data-theme="light"] button.bg-slate-500\/20.text-slate-200.border-slate-500\/30,
:root[data-theme="light"] button.border-slate-500\/30.bg-slate-500\/20.text-slate-200 {
  border-color: #cbd5e1 !important; /* slate-300 */
}
:root[data-theme="light"] button.bg-slate-500\/20.text-slate-200:hover:not(:disabled) {
  background-color: #e2e8f0 !important; /* slate-200 */
  color: #0f172a !important;
}
:root[data-theme="light"] button.bg-slate-500\/20.text-slate-200:disabled {
  opacity: 1 !important;
  background-color: #e2e8f0 !important;
  color: #64748b !important; /* slate-500 */
  border-color: #cbd5e1 !important;
}

/* =====================================================
   SHARED LIST / TABLE PAGE SHELL (formerly Employees.css)
   Loaded once via theme import — use theme tokens only.
   ===================================================== */

.employees-container,
.overview-container,
.archives-container,
.settings-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Paramètres (Entité) : éviter tout dépassement horizontal — grille min() + enfants flex */
.settings-container input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
.settings-container textarea {
  box-sizing: border-box;
  max-width: 100%;
}

.refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  padding: 0.35rem;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.05);
  background: var(--bg-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  color: #ffffff;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.refresh-button:hover {
  background: rgba(255, 255, 255, 0.08);
  background: var(--bg-hover);
  border-color: rgba(255, 255, 255, 0.2);
  border-color: var(--border-secondary);
}

.refresh-button svg {
  flex-shrink: 0;
}

/* True white on gradient KPIs / icons where `.text-white` maps to theme ink */
.force-white {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/*
 * KPI stat values use `.force-white` for dark (glass) dashboards; in light mode the same
 * shell maps to a near-white panel — forcing #ffffff hides “0,00 DA”, totals, labels paired
 * with `.text-white` remaps. Use theme ink on the glass card, then re-apply white only
 * inside saturated gradient icon/chip surfaces.
 */
:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .force-white {
  color: #ffffff !important;
  color: var(--text-primary) !important;
  stroke: currentColor !important;
}

:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .bg-gradient-to-r .force-white,
:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .bg-gradient-to-br .force-white,
:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .bg-gradient-to-r.force-white,
:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .bg-gradient-to-br.force-white {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Saturated Tailwind “-400” accents read as neon/washed on light glass; darken for AA-ish contrast */
:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .text-green-400 {
  color: #15803d !important;
}

:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .text-emerald-400 {
  color: #047857 !important;
}

:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .text-lime-400 {
  color: #4d7c0f !important;
}

:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .text-blue-400 {
  color: #1d4ed8 !important;
}

:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .text-sky-400 {
  color: #0369a1 !important;
}

:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .text-amber-400 {
  color: #b45309 !important;
}

:root[data-theme="light"] .rounded-3xl.backdrop-blur-lg.border.border-white\/20 .text-yellow-400 {
  color: #a16207 !important;
}

.view-label {
  color: rgba(255, 255, 255, 0.6);
  color: var(--text-tertiary);
  font-size: 0.875rem;
  font-weight: 500;
  margin-right: 0.5rem;
}

/* Note: responsive “carte par ligne” pour .employees-table retirée — les vues liste
   (Produits, Services, Clients, etc.) utilisent le même tableau qu’en desktop, avec
   défilement horizontal via le conteneur overflow-x-auto du module. */

/* =====================================================
   SMOOTH TRANSITIONS
   ===================================================== */
* {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease;
}

/* Disable transitions on theme toggle to prevent flash */
:root[data-theme-transitioning="true"] * {
  transition: none !important;
}

/* =====================================================
   INPUT FIELD STYLING (Theme-aware)
   ===================================================== */

/* Calendar and time picker icons */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

:root input[type="date"]::-webkit-calendar-picker-indicator,
:root input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(100%);
}

:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0) brightness(0.4);
}

/* =====================================================
   SELECT DROPDOWN (Theme-aware)
   ===================================================== */

select {
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 12px 12px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 2.5rem !important;
}

/* Dark mode select */
:root select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%2393c5fd%27 d=%27M6 9L1 4h10z%27/%3E%3C/svg%3E") !important;
}

:root select option {
  background: linear-gradient(to bottom right, #334155, #1d47c4, #334155) !important;
  color: white !important;
}

/* Light mode select */
:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%234b5563%27 d=%27M6 9L1 4h10z%27/%3E%3C/svg%3E") !important;
}

:root[data-theme="light"] select option {
  background: #ffffff !important;
  color: #111827 !important;
}

/* =====================================================
   BRAND IMAGES — anti-glisser / anti-menu contextuel (léger)
   Ne remplace pas l’audit sécurité (assets publics sous /Logo/).
   ===================================================== */

.brand-protected-img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
          user-select: none;
}