/**
 * GI Utilities CSS - Overrides Palette Graphik Impact
 * Version: 1.0.0
 * Description: Force l'utilisation exclusive de la palette GI en mode clair
 * Philosophie: "Less is more" - Sobriété et cohérence
 *
 * Palette GI autorisée:
 * - Cyan: #009FE3 (accents, liens, hover)
 * - Orange: #EB5D18 (CTA primaires, pôle Web)
 * - Noir: #000000 (textes, titres)
 * - Gris: nuances neutres seulement
 * - Fonctionnelles: Success (#10B981), Warning (#F59E0B), Error (#EF4444)
 */

/* ========================================
   OVERRIDES GLOBAUX - MODE CLAIR
   ======================================== */

:root.light {
    /* Réaffirmation des variables GI */
    --gi-cyan: #009FE3;
    --gi-orange: #EB5D18;
    --gi-black: #000000;

    /* Variables fonctionnelles */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #009FE3;

    /* Neutrals */
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
}

/* ========================================
   BUTTONS - OVERRIDE PURPLE/INDIGO/PINK
   ======================================== */

/* Tous les boutons purple → Cyan GI */
:root.light button[class*="bg-purple"],
:root.light a[class*="bg-purple"],
:root.light .bg-purple-50,
:root.light .bg-purple-100,
:root.light .bg-purple-200,
:root.light .bg-purple-300,
:root.light .bg-purple-400,
:root.light .bg-purple-500,
:root.light .bg-purple-600,
:root.light .bg-purple-700,
:root.light .bg-purple-800,
:root.light .bg-purple-900 {
    background: var(--gi-cyan) !important;
    background-color: var(--gi-cyan) !important;
}

:root.light button[class*="text-purple"],
:root.light a[class*="text-purple"],
:root.light span[class*="text-purple"],
:root.light .text-purple-50,
:root.light .text-purple-100,
:root.light .text-purple-200,
:root.light .text-purple-300,
:root.light .text-purple-400,
:root.light .text-purple-500,
:root.light .text-purple-600,
:root.light .text-purple-700,
:root.light .text-purple-800,
:root.light .text-purple-900 {
    color: var(--gi-cyan) !important;
}

:root.light [class*="border-purple"] {
    border-color: var(--gi-cyan) !important;
}

/* Tous les boutons indigo → Cyan GI */
:root.light button[class*="bg-indigo"],
:root.light a[class*="bg-indigo"],
:root.light .bg-indigo-50,
:root.light .bg-indigo-100,
:root.light .bg-indigo-200,
:root.light .bg-indigo-300,
:root.light .bg-indigo-400,
:root.light .bg-indigo-500,
:root.light .bg-indigo-600,
:root.light .bg-indigo-700,
:root.light .bg-indigo-800,
:root.light .bg-indigo-900 {
    background: var(--gi-cyan) !important;
    background-color: var(--gi-cyan) !important;
}

:root.light [class*="text-indigo"] {
    color: var(--gi-cyan) !important;
}

:root.light [class*="border-indigo"] {
    border-color: var(--gi-cyan) !important;
}

/* Tous les boutons pink → Orange GI */
:root.light button[class*="bg-pink"],
:root.light a[class*="bg-pink"],
:root.light .bg-pink-50,
:root.light .bg-pink-100,
:root.light .bg-pink-200,
:root.light .bg-pink-300,
:root.light .bg-pink-400,
:root.light .bg-pink-500,
:root.light .bg-pink-600,
:root.light .bg-pink-700,
:root.light .bg-pink-800,
:root.light .bg-pink-900 {
    background: var(--gi-orange) !important;
    background-color: var(--gi-orange) !important;
}

:root.light [class*="text-pink"] {
    color: var(--gi-orange) !important;
}

:root.light [class*="border-pink"] {
    border-color: var(--gi-orange) !important;
}

/* ========================================
   GRADIENTS - OVERRIDE NON-GI
   ======================================== */

/* Override tous les gradients purple */
:root.light [class*="from-purple"],
:root.light [class*="via-purple"],
:root.light [class*="to-purple"] {
    --tw-gradient-from: var(--gi-cyan) !important;
    --tw-gradient-to: var(--gi-cyan) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Override tous les gradients indigo */
:root.light [class*="from-indigo"],
:root.light [class*="via-indigo"],
:root.light [class*="to-indigo"] {
    --tw-gradient-from: var(--gi-cyan) !important;
    --tw-gradient-to: var(--gi-cyan) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Override tous les gradients pink */
:root.light [class*="from-pink"],
:root.light [class*="via-pink"],
:root.light [class*="to-pink"] {
    --tw-gradient-from: var(--gi-orange) !important;
    --tw-gradient-to: var(--gi-orange) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Gradients blue → Cyan GI (sauf si success/error context) */
:root.light [class*="from-blue"]:not([class*="status-"]),
:root.light [class*="via-blue"]:not([class*="status-"]),
:root.light [class*="to-blue"]:not([class*="status-"]) {
    --tw-gradient-from: var(--gi-cyan) !important;
    --tw-gradient-to: var(--gi-cyan) !important;
}

/* Gradients red → Orange GI (sauf si error context) */
:root.light [class*="from-red"]:not([class*="status-error"]):not([class*="alert-error"]),
:root.light [class*="via-red"]:not([class*="status-error"]):not([class*="alert-error"]),
:root.light [class*="to-red"]:not([class*="status-error"]):not([class*="alert-error"]) {
    --tw-gradient-from: var(--gi-orange) !important;
    --tw-gradient-to: var(--gi-orange) !important;
}

/* ========================================
   TOGGLES - FIX VISIBILITÉ MODE CLAIR
   ======================================== */

/* Toggle switches - backgrounds visibles en mode clair */
:root.light button[role="switch"],
:root.light .toggle-switch,
:root.light [class*="toggle"] button {
    background-color: var(--color-gray-300) !important;
    border: 1px solid var(--color-gray-400) !important;
}

/* Toggle switches - état activé */
:root.light button[role="switch"][aria-checked="true"],
:root.light button[role="switch"].active,
:root.light .toggle-switch.active {
    background-color: var(--gi-cyan) !important;
    border-color: var(--gi-cyan) !important;
}

/* Toggle switches - cercle intérieur */
:root.light button[role="switch"] > div,
:root.light .toggle-switch > div,
:root.light .toggle-switch-circle {
    background-color: white !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   LINKS - UNIFORMISATION
   ======================================== */

:root.light a:not(.btn):not([class*="bg-"]) {
    color: var(--gi-cyan);
    transition: color 0.2s ease;
}

:root.light a:not(.btn):not([class*="bg-"]):hover {
    color: #0088c7; /* Cyan GI darker */
    text-decoration: underline;
}

/* ========================================
   BADGES - SYSTÈME COHÉRENT (3 VARIANTS MAX)
   ======================================== */

/* Badge primary - Cyan GI */
:root.light .badge-primary,
:root.light .badge[class*="blue"],
:root.light .badge[class*="purple"],
:root.light .badge[class*="indigo"] {
    background: rgba(0, 159, 227, 0.1) !important;
    color: #006fa3 !important; /* Cyan GI darker */
    border: 1px solid rgba(0, 159, 227, 0.3) !important;
}

/* Badge secondary - Orange GI */
:root.light .badge-secondary,
:root.light .badge[class*="orange"],
:root.light .badge[class*="red"]:not(.badge-error),
:root.light .badge[class*="pink"] {
    background: rgba(235, 93, 24, 0.1) !important;
    color: #c14d14 !important; /* Orange GI darker */
    border: 1px solid rgba(235, 93, 24, 0.3) !important;
}

/* Badge neutral - Gris */
:root.light .badge-neutral,
:root.light .badge[class*="gray"] {
    background: rgba(107, 114, 128, 0.1) !important;
    color: var(--color-gray-700) !important;
    border: 1px solid rgba(107, 114, 128, 0.3) !important;
}

/* Badges fonctionnels - garder les couleurs */
:root.light .badge-success,
:root.light .badge[class*="green"] {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

:root.light .badge-warning,
:root.light .badge[class*="yellow"] {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

:root.light .badge-error,
:root.light .badge.badge[class*="red"] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* ========================================
   CARDS - BORDERS SIMPLIFIÉS
   ======================================== */

/* Toutes les cards avec border colorée → gris neutre */
:root.light .card[class*="border-blue"],
:root.light .card[class*="border-purple"],
:root.light .card[class*="border-indigo"],
:root.light .card[class*="border-pink"] {
    border-color: var(--color-gray-200) !important;
}

/* Cards avec statut - garder seulement ces 4 couleurs */
:root.light .card.status-success,
:root.light .card[class*="border-green"] {
    border-left: 4px solid var(--color-success) !important;
}

:root.light .card.status-warning,
:root.light .card[class*="border-yellow"] {
    border-left: 4px solid var(--color-warning) !important;
}

:root.light .card.status-error,
:root.light .card[class*="border-red"] {
    border-left: 4px solid var(--color-error) !important;
}

:root.light .card.status-info,
:root.light .card[class*="border-cyan"] {
    border-left: 4px solid var(--color-info) !important;
}

/* ========================================
   ICONS - PALETTE RESTREINTE
   ======================================== */

/* Icônes colorées - restreindre aux couleurs GI */
:root.light .icon-primary,
:root.light [class*="text-blue"]:not([class*="status-"]) {
    color: var(--gi-cyan) !important;
}

:root.light .icon-secondary,
:root.light [class*="text-orange"] {
    color: var(--gi-orange) !important;
}

:root.light .icon-neutral {
    color: var(--color-gray-600) !important;
}

/* ========================================
   FOCUS STATES - UNIFORMISATION
   ======================================== */

:root.light *:focus,
:root.light *:focus-visible {
    outline: 2px solid var(--gi-cyan) !important;
    outline-offset: 2px;
}

:root.light button:focus,
:root.light button:focus-visible,
:root.light input:focus,
:root.light textarea:focus,
:root.light select:focus {
    outline: 2px solid var(--gi-cyan) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.1) !important;
}

/* ========================================
   SHADOWS - NEUTRALISATION
   ======================================== */

/* Remplacer toutes les ombres colorées par des ombres neutres */
:root.light [class*="shadow-purple"],
:root.light [class*="shadow-blue"],
:root.light [class*="shadow-pink"],
:root.light [class*="shadow-indigo"] {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* ========================================
   UTILITIES - CLASSES DIRECTES GI
   ======================================== */

/* Backgrounds GI */
.bg-gi-cyan { background-color: var(--gi-cyan) !important; }
.bg-gi-orange { background-color: var(--gi-orange) !important; }
.bg-gi-black { background-color: var(--gi-black) !important; }

/* Textes GI */
.text-gi-cyan { color: var(--gi-cyan) !important; }
.text-gi-orange { color: var(--gi-orange) !important; }
.text-gi-black { color: var(--gi-black) !important; }

/* Borders GI */
.border-gi-cyan { border-color: var(--gi-cyan) !important; }
.border-gi-orange { border-color: var(--gi-orange) !important; }
.border-gi-black { border-color: var(--gi-black) !important; }

/* Gradients GI prédéfinis */
.gradient-gi-primary {
    background: linear-gradient(135deg, var(--gi-cyan) 0%, var(--gi-orange) 100%) !important;
}

.gradient-gi-cyan {
    background: linear-gradient(135deg, #0ab4ff 0%, var(--gi-cyan) 100%) !important;
}

.gradient-gi-orange {
    background: linear-gradient(135deg, #ff7a3d 0%, var(--gi-orange) 100%) !important;
}

.gradient-gi-subtle {
    background: linear-gradient(135deg, rgba(0, 159, 227, 0.05) 0%, rgba(235, 93, 24, 0.05) 100%) !important;
}

/* ========================================
   HOVER EFFECTS - UNIFORMISATION
   ======================================== */

:root.light .hover-gi-cyan:hover {
    background-color: var(--gi-cyan) !important;
    color: white !important;
    transition: all 0.2s ease;
}

:root.light .hover-gi-orange:hover {
    background-color: var(--gi-orange) !important;
    color: white !important;
    transition: all 0.2s ease;
}

/* ========================================
   NAVIGATION - STYLE UNIFORME
   ======================================== */

/* Navigation items - tous gris par défaut */
:root.light nav a,
:root.light .nav-item,
:root.light [class*="nav-"] a {
    color: var(--color-gray-700) !important;
    background: transparent !important;
    transition: all 0.2s ease;
}

/* Navigation items - hover Cyan GI */
:root.light nav a:hover,
:root.light .nav-item:hover,
:root.light [class*="nav-"] a:hover {
    color: var(--gi-cyan) !important;
    background: rgba(0, 159, 227, 0.05) !important;
}

/* Navigation items - état actif */
:root.light nav a.active,
:root.light .nav-item.active,
:root.light [class*="nav-"] a.active {
    color: var(--gi-cyan) !important;
    background: rgba(0, 159, 227, 0.1) !important;
    border-left: 3px solid var(--gi-cyan) !important;
}

/* ========================================
   STATS CARDS - UNIFORMISATION
   ======================================== */

/* Toutes les stats cards en gris avec icône colorée */
:root.light .stat-card,
:root.light .metric-card {
    background: linear-gradient(135deg, rgba(249, 250, 251, 1) 0%, rgba(243, 244, 246, 1) 100%) !important;
    border: 1px solid var(--color-gray-200) !important;
}

/* Icônes des stats - rotation GI */
:root.light .stat-card .icon:nth-child(1) { color: var(--gi-cyan) !important; }
:root.light .stat-card .icon:nth-child(2) { color: var(--gi-orange) !important; }
:root.light .stat-card .icon:nth-child(3) { color: var(--color-success) !important; }

/* ========================================
   PLATFORM IMPORTS - OPTION A (GRIS + ICÔNES)
   ======================================== */

/* Toutes les platform cards en gris */
:root.light .platform-card,
:root.light [class*="platform-"] {
    background: var(--color-gray-100) !important;
    border: 1px solid var(--color-gray-200) !important;
}

:root.light .platform-card:hover,
:root.light [class*="platform-"]:hover {
    background: var(--color-gray-200) !important;
    border-color: var(--color-gray-300) !important;
}

/* Seules les icônes gardent leur couleur */
:root.light .platform-icon {
    /* Laisser la couleur originale de l'icône */
    filter: none !important;
}

/* ========================================
   DOCUMENTATION NAVIGATION - OPTION B
   ======================================== */

/* Tous les items de doc en gris */
:root.light .doc-nav-item,
:root.light .documentation-nav a {
    background: var(--color-gray-100) !important;
    color: var(--color-gray-700) !important;
    border: 1px solid var(--color-gray-200) !important;
}

/* Textes et icônes dans les boutons de navigation */
:root.light .doc-nav-item .text-white,
:root.light .doc-nav-item .font-bold {
    color: var(--color-gray-700) !important;
}

:root.light .doc-nav-item .text-gray-400,
:root.light .doc-nav-item i[data-lucide] {
    color: var(--color-gray-600) !important;
}

/* Hover Cyan GI */
:root.light .doc-nav-item:hover,
:root.light .documentation-nav a:hover {
    background: rgba(0, 159, 227, 0.1) !important;
    color: var(--gi-cyan) !important;
    border-color: var(--gi-cyan) !important;
}

:root.light .doc-nav-item:hover .text-white,
:root.light .doc-nav-item:hover .font-bold {
    color: var(--gi-cyan) !important;
}

:root.light .doc-nav-item:hover .text-gray-400,
:root.light .doc-nav-item:hover i[data-lucide] {
    color: var(--gi-cyan) !important;
}

/* État actif */
:root.light .doc-nav-item.active,
:root.light .documentation-nav a.active {
    background: var(--gi-cyan) !important;
    color: white !important;
    border-color: var(--gi-cyan) !important;
}

:root.light .doc-nav-item.active .text-white,
:root.light .doc-nav-item.active .font-bold,
:root.light .doc-nav-item.active .text-gray-400,
:root.light .doc-nav-item.active i[data-lucide] {
    color: white !important;
}

/* ========================================
   ALERTS - GARDER LES COULEURS FONCTIONNELLES
   ======================================== */

:root.light .alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-left: 4px solid var(--color-success) !important;
    color: #065f46 !important;
}

:root.light .alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-left: 4px solid var(--color-warning) !important;
    color: #92400e !important;
}

:root.light .alert-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border-left: 4px solid var(--color-error) !important;
    color: #991b1b !important;
}

:root.light .alert-info {
    background: rgba(0, 159, 227, 0.1) !important;
    border-left: 4px solid var(--color-info) !important;
    color: #006fa3 !important;
}

/* ========================================
   FORMS - UNIFORMISATION
   ======================================== */

:root.light input[type="text"],
:root.light input[type="email"],
:root.light input[type="password"],
:root.light input[type="number"],
:root.light input[type="url"],
:root.light textarea,
:root.light select {
    border-color: var(--color-gray-300) !important;
    background-color: white !important;
    color: var(--gi-black) !important;
}

:root.light input:focus,
:root.light textarea:focus,
:root.light select:focus {
    border-color: var(--gi-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.1) !important;
}

/* ========================================
   DISABLED STATES
   ======================================== */

:root.light button:disabled,
:root.light input:disabled,
:root.light textarea:disabled,
:root.light select:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: var(--color-gray-100) !important;
    color: var(--color-gray-400) !important;
}

/* ========================================
   END GI UTILITIES
   ======================================== */