/**
 * themes.css
 * ----------
 * Système de thèmes sombre/clair pour Shopflow
 * Variables CSS pour faciliter les transitions
 */

/* ============================================================================
   VARIABLES CSS - THÈME SOMBRE (par défaut)
   ============================================================================ */

:root.dark {
    /* Couleurs de fond principales — harmonized dark palette */
    --bg-primary: #0f1623;        /* page bg — deep navy                */
    --bg-secondary: #171f2e;      /* cards, sidebar — slightly lighter  */
    --bg-tertiary: #1e2a3a;       /* inset: inputs, metrics, nested     */
    --bg-hover: #263040;          /* hover state                        */

    /* Couleurs de texte */
    --text-primary: #f1f5f9;      /* slate-100 — softer than pure white */
    --text-secondary: #cbd5e1;    /* slate-300                          */
    --text-tertiary: #94a3b8;     /* slate-400                          */
    --text-muted: #64748b;        /* slate-500                          */

    /* Bordures */
    --border-primary: #1e2a3a;    /* subtle, matches bg-tertiary        */
    --border-secondary: #2d3a4d;  /* stronger                           */

    /* Cartes et surfaces */
    --card-bg: #171f2e;           /* matches --bg-secondary             */
    --card-hover: #1e2a3a;

    /* États */
    --input-bg: #1e2a3a;          /* matches --bg-tertiary              */
    --input-border: #2d3a4d;      /* matches --border-secondary         */
    --input-focus: #3b82f6;

    /* Ombres */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);

    /* Skeleton loaders */
    --skeleton-base: #1e2a3a;
    --skeleton-highlight: #263040;
}

/* ============================================================================
   VARIABLES CSS - THÈME CLAIR
   ============================================================================ */

:root.light {
    /* Couleurs de fond principales */
    --bg-primary: #f8f9fa;        /* Gris très clair, moins éblouissant que blanc pur */
    --bg-secondary: #ffffff;      /* Blanc pour les cartes */
    --bg-tertiary: #e9ecef;       /* Gris clair pour zones secondaires */
    --bg-hover: #dee2e6;          /* Gris moyen pour hover */

    /* Couleurs de texte - Contraste amélioré */
    --text-primary: #1a1d1f;      /* Presque noir, meilleur contraste */
    --text-secondary: #495057;    /* Gris foncé */
    --text-tertiary: #6c757d;     /* Gris moyen */
    --text-muted: #adb5bd;        /* Gris clair */

    /* Bordures - Plus subtiles */
    --border-primary: #dee2e6;    /* Gris clair */
    --border-secondary: #ced4da;  /* Gris moyen */

    /* Cartes et surfaces - Fond blanc avec ombres douces */
    --card-bg: #ffffff;
    --card-hover: #f8f9fa;

    /* États - Inputs avec fond blanc */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus: #3b82f6;

    /* Ombres - Plus prononcées pour définir la profondeur */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.12), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.18), 0 6px 12px -4px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.20), 0 10px 16px -6px rgba(0, 0, 0, 0.10);

    /* Ombres specialisees */
    --shadow-sidebar: 3px 0 12px -2px rgba(0, 0, 0, 0.08), 1px 0 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 2px 8px -2px rgba(0, 0, 0, 0.08), 0 1px 3px -1px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
    --shadow-interactive: 0 4px 16px -3px rgba(0, 159, 227, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.06);

    /* Couleurs supplémentaires pour thème clair */
    --sidebar-bg: #ffffff;
    --sidebar-border: #dee2e6;
    --header-bg: #ffffff;
    --modal-bg: #ffffff;

    /* Skeleton loaders (thème clair) */
    --skeleton-base: #e0e0e0;
    --skeleton-highlight: #f0f0f0;
}

/* ============================================================================
   SEMANTIC UTILITY CLASSES — THEME-AWARE
   Use these instead of hardcoded dark classes (bg-gray-800, text-white, etc.)
   They resolve to the correct color in both dark and light themes.
   ============================================================================ */

/* ── Backgrounds ── */
.bg-surface      { background-color: var(--bg-secondary) !important; }
.bg-surface-base { background-color: var(--bg-primary) !important; }
.bg-surface-inset{ background-color: var(--bg-tertiary) !important; }
.bg-surface-hover{ background-color: var(--bg-hover) !important; }

/* Opacity variants (for semi-transparent overlays) */
.bg-surface\/50  { background-color: color-mix(in srgb, var(--bg-secondary) 50%, transparent) !important; }
.bg-surface\/30  { background-color: color-mix(in srgb, var(--bg-secondary) 30%, transparent) !important; }

/* ── Text ── */
.text-on-surface { color: var(--text-primary) !important; }
.text-on-muted   { color: var(--text-secondary) !important; }
.text-on-subtle  { color: var(--text-tertiary) !important; }
.text-on-faint   { color: var(--text-muted) !important; }

/* ── Borders ── */
.border-edge        { border-color: var(--border-primary) !important; }
.border-edge-strong { border-color: var(--border-secondary) !important; }
.border-edge\/50    { border-color: color-mix(in srgb, var(--border-primary) 50%, transparent) !important; }

/* ── Hover states ── */
.hover\:bg-surface-inset:hover { background-color: var(--bg-tertiary) !important; }
.hover\:bg-surface:hover       { background-color: var(--bg-secondary) !important; }
.hover\:bg-surface\/30:hover   { background-color: color-mix(in srgb, var(--bg-secondary) 30%, transparent) !important; }
.hover\:text-on-surface:hover  { color: var(--text-primary) !important; }

/* ── Placeholder ── */
.placeholder-on-subtle::placeholder { color: var(--text-tertiary) !important; }
.placeholder-on-faint::placeholder  { color: var(--text-muted) !important; }

/* ── Focus ── */
.focus\:ring-accent:focus { --tw-ring-color: var(--gi-cyan, #009FE3) !important; }

/* ============================================================================
   APPLICATION DES VARIABLES - ÉLÉMENTS GÉNÉRAUX
   ============================================================================ */

/* Background principal */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cartes et conteneurs */
.card-bg {
    background-color: var(--card-bg);
    border-color: var(--border-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card-bg:hover {
    background-color: var(--card-hover);
}

/* Fix: Rendre le bouton Aperçu visible quand on survole la carte */
#tab-examples .card-bg:hover button[onclick*="showFilePreview"] {
    background-color: #4f46e5 !important; /* indigo-600 */
}

/* Effet hover supplémentaire quand on survole le bouton lui-même */
#tab-examples .card-bg:hover button[onclick*="showFilePreview"]:hover {
    background-color: #4338ca !important; /* indigo-700 - plus foncé */
}

/* Fix: Rendre les switches visibles dans les préférences au hover de la carte */
#tab-profile .card-bg:hover .w-11.h-6.bg-gray-700 {
    background-color: #1f2937 !important; /* gray-800 - plus foncé que le fond hover */
}

/* Fix: Rendre les barres de progression visibles au hover de la carte statistiques */
#tab-profile .card-bg:hover .bg-gray-700.rounded-full {
    background-color: #1f2937 !important; /* gray-800 - plus foncé que le card-hover (gray-700) */
}

/* Inputs et selects — scoped to main (don't affect login page) */
main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="number"],
main select,
main textarea {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

main input:focus,
main select:focus,
main textarea:focus {
    border-color: var(--input-focus);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Tableaux */
table thead {
    background-color: var(--bg-secondary);
}

table tbody {
    background-color: var(--bg-primary);
}

table tbody tr {
    border-color: var(--border-primary);
    transition: background-color 0.3s ease;
}

table tbody tr:hover {
    background-color: var(--bg-hover);
}

/* Modals et overlays */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

:root.light .modal-overlay {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Sidebar — same bg as page, cards float on top */
.sidebar,
.sidebar-bg {
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
}

/* Sidebar avec scroll automatique */
#sidebar {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar personnalisée pour la sidebar (thème sombre) */
#sidebar::-webkit-scrollbar {
    width: 6px;
}

#sidebar::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

#sidebar::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* Firefox scrollbar */
#sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-tertiary) var(--bg-secondary);
}

/* Boutons secondaires */
.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-primary);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--bg-hover);
}

/* Badges et tags */
.badge {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}


/* ============================================================================
   ANIMATIONS DE TRANSITION
   ============================================================================ */

/* Transition douce uniquement pendant le changement de thème.
   La classe .theme-transitioning est ajoutée par JS pendant 400ms
   lors du toggle. Sans elle, aucune transition n'est forcée sur *,
   ce qui améliore les performances DOM. */
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition: background-color 300ms ease, border-color 300ms ease,
                color 300ms ease, fill 300ms ease, stroke 300ms ease !important;
}

/* ============================================================================
   CLASSES UTILITAIRES SPÉCIFIQUES
   ============================================================================ */

/* Classe pour désactiver les transitions temporairement */
.no-transition,
.no-transition * {
    transition: none !important;
}


/* ============================================================================
   AMÉLIORATIONS SPÉCIFIQUES THÈME CLAIR
   ============================================================================ */

/* OVERRIDES AGRESSIFS POUR LE THÈME CLAIR */
/* Override des classes Tailwind hardcodées dans le HTML */

/* Sidebar en thème clair - Fond blanc avec bordure */
:root.light .sidebar,
:root.light .sidebar-bg,
:root.light #sidebar {
    background-color: var(--sidebar-bg) !important;
    border-right-color: var(--sidebar-border) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04) !important;
}

/* Scrollbar personnalisée pour la sidebar (thème clair) */
:root.light #sidebar::-webkit-scrollbar-track {
    background: var(--sidebar-bg);
}

:root.light #sidebar::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 3px;
}

:root.light #sidebar::-webkit-scrollbar-thumb:hover {
    background: #ced4da;
}

/* Firefox scrollbar (thème clair) */
:root.light #sidebar {
    scrollbar-color: #dee2e6 var(--sidebar-bg);
}


/* Bordures custom — both themes */
.border-custom {
    border-color: var(--border-primary) !important;
}

/* Main content area - IMPORTANT */
:root.light main,
:root.light #main-content,
:root.light .content-area {
    background-color: var(--bg-primary) !important;
}

/* Header en thème clair */
:root.light header,
:root.light .header-bg {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}


/* Focus states */
:root.light .focus\:ring-red-500:focus,
:root.light .focus\:border-red-500:focus {
    --tw-ring-color: rgba(59, 130, 246, 0.5) !important;
    border-color: var(--input-focus) !important;
}

/* Modals en thème clair */
:root.light .modal-content,
:root.light [role="dialog"] {
    background-color: var(--modal-bg);
    box-shadow: var(--shadow-lg);
}

/* Modales - Scroll automatique pour thème clair */
:root.light .fixed.inset-0 > div,
:root.light .fixed.inset-0 > .card-bg,
:root.light .modal-overlay > div {
    background-color: var(--modal-bg) !important;
}

/* Scrollbar personnalisée pour les modales (thème clair) */
:root.light .fixed.inset-0 > div::-webkit-scrollbar,
:root.light .fixed.inset-0 > .card-bg::-webkit-scrollbar,
:root.light .modal-overlay > div::-webkit-scrollbar {
    width: 8px;
}

:root.light .fixed.inset-0 > div::-webkit-scrollbar-track,
:root.light .fixed.inset-0 > .card-bg::-webkit-scrollbar-track,
:root.light .modal-overlay > div::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

:root.light .fixed.inset-0 > div::-webkit-scrollbar-thumb,
:root.light .fixed.inset-0 > .card-bg::-webkit-scrollbar-thumb,
:root.light .modal-overlay > div::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 4px;
}

:root.light .fixed.inset-0 > div::-webkit-scrollbar-thumb:hover,
:root.light .fixed.inset-0 > .card-bg::-webkit-scrollbar-thumb:hover,
:root.light .modal-overlay > div::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Firefox support pour modales en thème clair */
:root.light .fixed.inset-0 > div,
:root.light .fixed.inset-0 > .card-bg,
:root.light .modal-overlay > div {
    scrollbar-width: thin;
    scrollbar-color: var(--border-secondary) var(--bg-tertiary);
}

/* Cartes avec ombres douces en thème clair */
:root.light .card-bg {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-primary);
}

/* Tableaux en thème clair - Headers avec fond légèrement grisé */
:root.light table thead {
    background-color: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-secondary);
}

:root.light table tbody tr {
    border-bottom: 1px solid var(--border-primary);
}

:root.light table tbody tr:hover {
    background-color: var(--bg-hover);
}

/* Boutons en thème clair - Meilleur contraste */
:root.light .btn-secondary {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
}

:root.light .btn-secondary:hover {
    background-color: var(--bg-hover);
    box-shadow: var(--shadow-sm);
}

/* Inputs en thème clair — scoped to main (don't affect login) */
:root.light main input[type="text"],
:root.light main input[type="email"],
:root.light main input[type="password"],
:root.light main input[type="number"],
:root.light main input[type="url"],
:root.light main input[type="search"],
:root.light main input[type="tel"],
:root.light main select,
:root.light main textarea {
    background-color: #f8f9fa !important;
    border: 1px solid var(--input-border) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    color: var(--text-primary) !important;
}

/* Focus state — GI cyan au lieu de bleu */
:root.light main input:focus,
:root.light main select:focus,
:root.light main textarea:focus {
    background-color: #ffffff !important;
    border-color: var(--gi-cyan, #009FE3) !important;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Placeholder text — scoped to main */
:root.light main input::placeholder,
:root.light main textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* Badges et tags en thème clair */
:root.light .badge {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}

/* Code blocks et pre en thème clair */
:root.light pre,
:root.light code {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

/* Dropdowns et menus contextuels */
:root.light .dropdown-menu,
:root.light [role="menu"] {
    background-color: var(--card-bg);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-md);
}

/* Scrollbars en thème clair */
:root.light ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

:root.light ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

:root.light ::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 6px;
}

:root.light ::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Navigation tabs en thème clair */
:root.light .nav-tabs {
    border-bottom: 2px solid var(--border-primary);
}

:root.light .nav-tabs .nav-link {
    color: var(--text-secondary);
    border: 1px solid transparent;
}

:root.light .nav-tabs .nav-link:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-primary);
}

:root.light .nav-tabs .nav-link.active {
    background-color: var(--bg-primary);
    border-color: var(--border-primary) var(--border-primary) var(--bg-primary);
    color: var(--text-primary);
}

/* Alerts et notifications en thème clair - Opaques, sans transparence */
:root.light .alert {
    border: 1px solid;
    box-shadow: var(--shadow-sm);
}

/* Alert info - Bleu */
:root.light .bg-blue-800,
:root.light .bg-blue-900,
:root.light [class*="bg-blue-"][class*="bg-opacity-"] {
    background-color: #dbeafe !important; /* blue-100 */
    border-color: #93c5fd !important; /* blue-300 */
    opacity: 1 !important;
}

:root.light .text-blue-200,
:root.light .text-blue-300,
:root.light .text-blue-400 {
    color: #1e40af !important; /* blue-800 */
}

:root.light .border-blue-600,
:root.light .border-blue-700 {
    border-color: #93c5fd !important; /* blue-300 */
}

/* Alert success - Vert */
:root.light .bg-green-800,
:root.light .bg-green-900,
:root.light [class*="bg-green-"][class*="bg-opacity-"] {
    background-color: #dcfce7 !important; /* green-100 */
    border-color: #86efac !important; /* green-300 */
    opacity: 1 !important;
}

:root.light .text-green-200,
:root.light .text-green-300,
:root.light .text-green-400 {
    color: #166534 !important; /* green-800 */
}

:root.light .border-green-600,
:root.light .border-green-700 {
    border-color: #86efac !important; /* green-300 */
}

/* Alert warning - Jaune */
:root.light .bg-yellow-800,
:root.light .bg-yellow-900,
:root.light [class*="bg-yellow-"][class*="bg-opacity-"] {
    background-color: #fef3c7 !important; /* yellow-100 */
    border-color: #fcd34d !important; /* yellow-300 */
    opacity: 1 !important;
}

:root.light .text-yellow-200,
:root.light .text-yellow-300,
:root.light .text-yellow-400 {
    color: #92400e !important; /* yellow-800 */
}

:root.light .border-yellow-600,
:root.light .border-yellow-700 {
    border-color: #fcd34d !important; /* yellow-300 */
}

/* Alert error - Rouge */
:root.light .bg-red-800,
:root.light .bg-red-900,
:root.light [class*="bg-red-"][class*="bg-opacity-"] {
    background-color: #fee2e2 !important; /* red-100 */
    border-color: #fca5a5 !important; /* red-300 */
    opacity: 1 !important;
}

:root.light .text-red-200,
:root.light .text-red-300,
:root.light .text-red-400 {
    color: #991b1b !important; /* red-800 */
}

:root.light .border-red-600,
:root.light .border-red-700 {
    border-color: #fca5a5 !important; /* red-300 */
}

/* Alert purple - Violet */
:root.light .bg-purple-800,
:root.light .bg-purple-900,
:root.light [class*="bg-purple-"][class*="bg-opacity-"] {
    background-color: #f3e8ff !important; /* purple-100 */
    border-color: #d8b4fe !important; /* purple-300 */
    opacity: 1 !important;
}

:root.light .text-purple-200,
:root.light .text-purple-300,
:root.light .text-purple-400 {
    color: #6b21a8 !important; /* purple-800 */
}

:root.light .border-purple-600,
:root.light .border-purple-700 {
    border-color: #d8b4fe !important; /* purple-300 */
}

/* Alert orange */
:root.light .bg-orange-800,
:root.light .bg-orange-900,
:root.light [class*="bg-orange-"][class*="bg-opacity-"] {
    background-color: #ffedd5 !important; /* orange-100 */
    border-color: #fdba74 !important; /* orange-300 */
    opacity: 1 !important;
}

:root.light .text-orange-200,
:root.light .text-orange-300,
:root.light .text-orange-400 {
    color: #9a3412 !important; /* orange-800 */
}

:root.light .border-orange-600,
:root.light .border-orange-700 {
    border-color: #fdba74 !important; /* orange-300 */
}

/* Loading states et spinners */
:root.light .spinner,
:root.light .loading {
    opacity: 0.6;
}

/* Selection de texte en thème clair */
:root.light ::selection {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--text-primary);
}

/* ============================================================================
   OVERRIDES COMPLETS POUR TOUS LES ÉLÉMENTS SPÉCIFIQUES
   ============================================================================ */

/* Conteneur principal de l'app */
:root.light #main-app {
    background-color: var(--bg-primary) !important;
}

/* Tous les conteneurs de contenu */
:root.light .container,
:root.light .content-wrapper,
:root.light .page-content {
    background-color: transparent !important;
}

/* Cards et panels */
:root.light .panel,
:root.light .card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
}

/* Inputs, selects, textareas - Fond léger distinct du card-bg */
/* Inputs scoped to main — don't affect login page */
:root.light main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root.light main select,
:root.light main textarea {
    background-color: #f8f9fa !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-primary) !important;
}

/* Checkboxes et radios en mode clair */
:root.light main input[type="checkbox"],
:root.light main input[type="radio"] {
    accent-color: var(--gi-cyan, #009FE3) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--input-border) !important;
}

/* Select arrows — visible en mode clair */
:root.light main select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23495057' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    padding-right: 2rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Icons - seulement celles sans couleur explicite */
:root.light [data-lucide]:not([class*="text-"]),
:root.light i:not([class*="text-"]):not([data-lucide]) {
    color: var(--text-secondary) !important;
}


/* Badges et labels */
:root.light .bg-blue-600,
:root.light .bg-green-600,
:root.light .bg-yellow-600,
:root.light .bg-purple-600 {
    /* Garder les couleurs d'accent mais les rendre plus douces */
    filter: brightness(1.1) !important;
}

/* Links - gere par gi-utilities.css, seulement fallback pour liens sans style */
:root.light a:not([class*="text-"]):not([class*="bg-"]):not(.tab-btn):not(.nav-link) {
    color: var(--gi-cyan, #3b82f6) !important;
}

:root.light a:not([class*="text-"]):not([class*="bg-"]):not(.tab-btn):not(.nav-link):hover {
    color: var(--gi-cyan-dark, #2563eb) !important;
}

/* Dividers */
:root.light hr,
:root.light .divider {
    border-color: var(--border-primary) !important;
}

/* Login page en thème clair */
:root.light #login-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

:root.light #login-container .bg-surface {
    background-color: #ffffff !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Toasts et notifications */
:root.light .toast,
:root.light .notification {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--text-primary) !important;
}

/* Tooltips */
:root.light .tooltip,
:root.light [role="tooltip"] {
    background-color: var(--text-primary) !important;
    color: #ffffff !important;
}

/* Progress bars */
:root.light .progress-bar {
    background-color: var(--bg-tertiary) !important;
}

/* Popovers */
:root.light .popover {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ============================================================================
   OVERRIDES ADDITIONNELS - ÉLÉMENTS MANQUANTS EN THÈME CLAIR
   ============================================================================ */

/* bg-gray specifiques (pas de wildcard) */
:root.light .bg-gray-50 {
    background-color: #fafafa !important;
}

:root.light .bg-gray-100 {
    background-color: #f5f5f5 !important;
}

:root.light .bg-gray-200 {
    background-color: var(--bg-tertiary) !important;
}

/* Fix: Menus dropdown et contextuels */
:root.light .dropdown,
:root.light [role="listbox"],
:root.light [role="combobox"] {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Fix: Options de select et autocomplete */
:root.light option {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Fix: Checkboxes et radios labels */
:root.light label {
    color: var(--text-primary) !important;
}

/* Fix: Tabs navigation */
:root.light [role="tablist"] button,
:root.light .tab-button {
    color: var(--text-secondary) !important;
    border-color: transparent !important;
}

:root.light [role="tablist"] button[aria-selected="true"],
:root.light .tab-button.active {
    color: var(--text-primary) !important;
    border-bottom-color: var(--input-focus) !important;
    background-color: transparent !important;
}

/* Fix: Code inline */
:root.light code:not(pre code) {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Fix: Headers de sections */
:root.light h1, :root.light h2, :root.light h3,
:root.light h4, :root.light h5, :root.light h6 {
    color: var(--text-primary) !important;
}


/* Fix: Focus visible pour accessibilité — GI cyan */
:root.light *:focus-visible {
    outline: 2px solid var(--gi-cyan, #009FE3) !important;
    outline-offset: 2px;
}

/* Fix: Disabled states */
:root.light button:disabled,
:root.light input:disabled,
:root.light select:disabled,
:root.light textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
}

/* Fix: Placeholders plus visibles */
:root.light ::placeholder {
    color: var(--text-tertiary) !important;
    opacity: 1;
}

/* Fix: Skeleton loaders en thème clair */
:root.light .skeleton,
:root.light [class*="skeleton"] {
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 0%,
        var(--skeleton-highlight) 50%,
        var(--skeleton-base) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite !important;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================
   COMPOSANTS SPÉCIFIQUES — THÈME CLAIR
   ============================================================================ */

/* Platform/format cards (tab-generation) — fond distinct + hover visible */
:root.light .platform-card {
    background-color: #ffffff !important;
    border-color: var(--border-secondary) !important;
    box-shadow: var(--shadow-sm) !important;
}

:root.light .platform-card:hover:not([disabled]):not(.opacity-60) {
    background-color: #f0f9ff !important;
    border-color: var(--gi-cyan, #009FE3) !important;
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.12) !important;
}

/* Platform card — état sélectionné (border-blue-500 ou border-purple-500 ajouté par JS) */
:root.light .platform-card[class*="border-blue-"],
:root.light .platform-card[class*="border-purple-"],
:root.light .platform-card[class*="border-cyan-"] {
    background-color: #f0f9ff !important;
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.15) !important;
}

/* Platform icon circles — fond visible en light */
:root.light .platform-icon {
    background-color: #e9ecef !important;
}