/**
 * Thème clair/sombre du back-office Bokk Dem — source unique des couleurs.
 * Chargé en premier via views/sections/theme_head.php, qui pose data-theme sur <html>.
 * Bloc clair = valeurs historiques ; bloc sombre = écran uniquement (l'impression reste claire).
 * Les autres feuilles, vues et scripts n'utilisent que des var(--token).
 * Vérifications : npm run theme:contrast (contrastes) et npm run theme:lint (couleurs codées en dur).
 */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --surface-3: #e5e7eb;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --overlay: rgb(15 23 42 / 0.5);

  /* Texte */
  --text: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-subtle: #9ca3af;

  /* Marque */
  --white: #ffffff;
  --primary-color: #16a34a;
  --primary-hover: #15803d;
  --primary-light: #22c55e;
  --primary-dark: #15803d;
  --brand-text: #16a34a;
  --brand-soft: #dcfce7;
  --secondary-color: #f1f5f9;

  /* États — couleurs pleines (fonds à texte blanc, icônes, bordures) : identiques en sombre */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --purple: #8b5cf6;
  --indigo: #6366f1;
  --orange: #f97316;
  --teal: #14b8a6;
  --teal-strong: #0d9488;
  --sky: #0284c7;
  --fuchsia: #d946ef;
  --success-strong: #059669;
  --warning-strong: #d97706;
  --danger-strong: #dc2626;
  --info-strong: #2563eb;
  --neutral-strong: #6b7280;

  /* États — fonds très foncés (puces actives, en-têtes) sous texte blanc : identiques en sombre */
  --success-deep: #065f46;
  --warning-deep: #92400e;
  --danger-deep: #991b1b;
  --info-deep: #1e40af;
  --purple-deep: #6d28d9;
  --indigo-deep: #4338ca;

  /* États — texte coloré sur surface */
  --success-text: #059669;
  --warning-text: #d97706;
  --danger-text: #dc2626;
  --info-text: #2563eb;
  --purple-text: #7c3aed;

  /* Alias historiques (main_style.css, dashboard.css) */
  --accent-color: var(--info);
  --success-color: var(--success);
  --warning-color: var(--warning);
  --error-color: var(--danger);
  --info-color: var(--info);

  /* Badges : fond / texte */
  --badge-success-bg: #dcfce7;
  --badge-success-fg: #065f46;
  --badge-warning-bg: #fef3c7;
  --badge-warning-fg: #92400e;
  --badge-danger-bg: #fee2e2;
  --badge-danger-fg: #991b1b;
  --badge-info-bg: #dbeafe;
  --badge-info-fg: #1e40af;
  --badge-neutral-bg: #f3f4f6;
  --badge-neutral-fg: #374151;
  --badge-purple-bg: #ede9fe;
  --badge-purple-fg: #5b21b6;
  --badge-indigo-bg: #e0e7ff;
  --badge-indigo-fg: #4338ca;
  --badge-sky-bg: #e0f2fe;
  --badge-sky-fg: #0369a1;
  --badge-orange-bg: #ffedd5;
  --badge-orange-fg: #c2410c;
  --badge-teal-bg: #f0fdfa;
  --badge-teal-fg: #0f766e;
  --badge-fuchsia-bg: #fdf4ff;
  --badge-fuchsia-fg: #7e22ce;

  /* Infobulles et bandeaux foncés */
  --tooltip-bg: #1f2937;
  --tooltip-fg: #f9fafb;

  /* Graphiques (hex uniquement : lus par Chart.js via getComputedStyle) */
  --chart-1: #16a34a;
  --chart-2: #0891b2;
  --chart-3: #2563eb;
  --chart-4: #dc2626;
  --chart-5: #94a3b8;
  --chart-6: #8b5cf6;
  /* Commandes / abandons (abandons de prix) : paire validée daltonisme, clair */
  --chart-converted: #2563eb;
  --chart-abandoned: #ea580c;
  --chart-grid: #0000000d;
  --chart-text: #9ca3af;
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-title: #111827;
  --chart-tooltip-body: #6b7280;
  --chart-tooltip-border: #f3f4f6;

  /* Échelle de gris historique */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces */
    --bg: #0b1220;
    --surface: #111a2b;
    --surface-2: #172236;
    --surface-3: #1f2c44;
    --border: #243044;
    --border-strong: #475569;
    --overlay: rgb(2 6 23 / 0.7);

    /* Texte */
    --text: #e6edf5;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-subtle: #64748b;

    /* Marque (les fonds de boutons restent inchangés : texte blanc) */
    --primary-light: #4ade80;
    --brand-text: #22c55e;
    --brand-soft: rgb(34 197 94 / 0.15);
    --secondary-color: #172236;
    --neutral-strong: #475569;

    /* États — texte coloré sur surface */
    --success-text: #34d399;
    --warning-text: #fbbf24;
    --danger-text: #f87171;
    --info-text: #60a5fa;
    --purple-text: #a78bfa;

    /* Badges : fond teinté / texte clair */
    --badge-success-bg: rgb(34 197 94 / 0.15);
    --badge-success-fg: #4ade80;
    --badge-warning-bg: rgb(245 158 11 / 0.15);
    --badge-warning-fg: #fbbf24;
    --badge-danger-bg: rgb(239 68 68 / 0.15);
    --badge-danger-fg: #f87171;
    --badge-info-bg: rgb(59 130 246 / 0.15);
    --badge-info-fg: #60a5fa;
    --badge-neutral-bg: rgb(148 163 184 / 0.15);
    --badge-neutral-fg: #cbd5e1;
    --badge-purple-bg: rgb(139 92 246 / 0.18);
    --badge-purple-fg: #a78bfa;
    --badge-indigo-bg: rgb(99 102 241 / 0.18);
    --badge-indigo-fg: #a5b4fc;
    --badge-sky-bg: rgb(14 165 233 / 0.15);
    --badge-sky-fg: #7dd3fc;
    --badge-orange-bg: rgb(249 115 22 / 0.15);
    --badge-orange-fg: #fdba74;
    --badge-teal-bg: rgb(20 184 166 / 0.15);
    --badge-teal-fg: #5eead4;
    --badge-fuchsia-bg: rgb(217 70 239 / 0.15);
    --badge-fuchsia-fg: #f0abfc;

    /* Infobulles et bandeaux foncés */
    --tooltip-bg: #334155;
    --tooltip-fg: #f1f5f9;

    /* Graphiques */
    --chart-1: #22c55e;
    --chart-2: #22d3ee;
    --chart-3: #60a5fa;
    --chart-4: #f87171;
    --chart-5: #64748b;
    --chart-6: #a78bfa;
    --chart-converted: #3b82f6;
    --chart-abandoned: #ea580c;
    --chart-grid: #ffffff14;
    --chart-text: #94a3b8;
    --chart-tooltip-bg: #172236;
    --chart-tooltip-title: #e6edf5;
    --chart-tooltip-body: #94a3b8;
    --chart-tooltip-border: #243044;

    /* Échelle de gris inversée : hérite des usages existants de var(--gray-*) */
    --gray-50: #0b1220;
    --gray-100: #172236;
    --gray-200: #243044;
    --gray-300: #334155;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #dbe3ee;
    --gray-800: #e6edf5;
    --gray-900: #f1f5f9;

    /* Ombres plus denses : l'élévation est surtout portée par la luminosité des surfaces */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.45);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.45);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(0 0 0 / 0.55);
  }
}

/* ── Switch clair/sombre (injecté dans la topbar par theme.js) ─────────── */
.theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.theme-toggle:hover {
  border-color: var(--primary-color);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

.theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--warning);
  box-shadow: var(--shadow-sm);
  transition: transform 250ms ease, background-color 200ms ease, color 200ms ease;
}

.theme-toggle__icon {
  width: 14px;
  height: 14px;
}

.theme-toggle__icon--moon,
.theme-toggle[aria-checked="true"] .theme-toggle__icon--sun {
  display: none;
}

.theme-toggle[aria-checked="true"] .theme-toggle__icon--moon {
  display: block;
}

.theme-toggle[aria-checked="true"] {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.theme-toggle[aria-checked="true"] .theme-toggle__thumb {
  transform: translateX(24px);
  color: var(--text);
}

/* Transition des couleurs pendant la bascule uniquement (classe posée ~250 ms par theme.js) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, fill 200ms ease, stroke 200ms ease !important;
}

html.theme-transition .theme-toggle__thumb {
  transition: transform 250ms ease, background-color 200ms ease, color 200ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle__thumb {
    transition: none;
  }
}

/* Logo (texte noir sur fond transparent) : pastille claire en mode sombre */
:root[data-theme="dark"] img[src*="Logo_Transparant"] {
  background: var(--white);
  border-radius: 12px;
  padding: 4px;
}

/* Google Maps : bulles d'information (InfoWindow) en mode sombre */
:root[data-theme="dark"] .gm-style .gm-style-iw-c,
:root[data-theme="dark"] .gm-style .gm-style-iw-d {
  background: var(--surface);
  color: var(--text);
}

:root[data-theme="dark"] .gm-style .gm-style-iw-tc::after {
  background: var(--surface);
}

:root[data-theme="dark"] .gm-style .gm-ui-hover-effect > span {
  background-color: var(--text-muted) !important;
}

/* SweetAlert2 en mode sombre (sa feuille est injectée après : sélecteurs plus spécifiques) */
:root[data-theme="dark"] .swal2-popup {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

:root[data-theme="dark"] .swal2-title {
  color: var(--text);
}

:root[data-theme="dark"] .swal2-html-container {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .swal2-input,
:root[data-theme="dark"] .swal2-textarea,
:root[data-theme="dark"] .swal2-select,
:root[data-theme="dark"] .swal2-file {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}

:root[data-theme="dark"] .swal2-validation-message {
  background: var(--surface-2);
  color: var(--text-secondary);
}

:root[data-theme="dark"] .swal2-footer {
  border-top-color: var(--border);
  color: var(--text-muted);
}

:root[data-theme="dark"] .swal2-close {
  color: var(--text-muted);
}

:root[data-theme="dark"] .swal2-close:hover {
  color: var(--danger-text);
}

:root[data-theme="dark"] .swal2-container.swal2-backdrop-show {
  background: var(--overlay);
}

:root[data-theme="dark"] .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
:root[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix {
  background-color: var(--surface) !important;
}