/**
 * assets/css/dark-theme.css
 * Mode Sombre "Chocolat" - Style Hyundai Premium
 * ⚠️ IMPORTANT : À charger APRÈS style.css pour garantir les overrides
 */

/* ============================================================================
   🍫 VARIABLES CHOCOLAT
   ============================================================================ */
:root[data-theme="dark"] {
    --bg-primary: #1A120B;      /* Espresso profond */
    --bg-secondary: #2C1A12;    /* Cacao */
    --bg-tertiary: #3E2723;     /* Chocolat noir */
    --bg-card: #2C1A12;
    --bg-input: #3E2723;
    
    --text-primary: #FFF8E1;    /* Crème chaude */
    --text-secondary: #D7CCC8;  /* Beige clair */
    --text-muted: #A1887F;      /* Taupe */
    
    --accent-primary: #D4A373;  /* Caramel doré */
    --accent-secondary: #A67B5B; /* Bronze */
    --accent-hover: #E6C295;    /* Miel */
    
    --border-color: rgba(212, 163, 115, 0.25);
    --border-focus: rgba(212, 163, 115, 0.6);
    
    --shadow-color: rgba(26, 18, 11, 0.7);
    --shadow-glow: 0 0 30px rgba(212, 163, 115, 0.15);
    
    --gradient-primary: linear-gradient(135deg, #1A120B 0%, #2C1A12 100%);
    --gradient-accent: linear-gradient(135deg, #D4A373 0%, #A67B5B 100%);
    --gradient-card: linear-gradient(180deg, #3E2723 0%, #2C1A12 100%);
}

/* ============================================================================
   🌍 GLOBAL & TYPOGRAPHIE
   ============================================================================ */
[data-theme="dark"] body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, 
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--accent-primary) !important;
}

[data-theme="dark"] .text-muted, [data-theme="dark"] small {
    color: var(--text-muted) !important;
}

[data-theme="dark"] a { color: var(--accent-primary); transition: color 0.2s; }
[data-theme="dark"] a:hover { color: var(--accent-hover); }

/* ============================================================================
   🧭 NAVIGATION
   ============================================================================ */
[data-theme="dark"] .navbar-hyundai {
    background: rgba(44, 26, 18, 0.95) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .navbar-brand { color: var(--accent-primary) !important; }
[data-theme="dark"] .nav-link { color: var(--text-secondary) !important; }
[data-theme="dark"] .nav-link:hover, 
[data-theme="dark"] .nav-link.active {
    color: var(--accent-primary) !important;
}

/* ============================================================================
   🃏 CARTES & CONTENEURS
   ============================================================================ */
[data-theme="dark"] .card-hyundai,
[data-theme="dark"] .filter-card,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .edit-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .feature-box,
[data-theme="dark"] .service-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 20px var(--shadow-color) !important;
}

[data-theme="dark"] .card-hyundai:hover {
    box-shadow: 0 8px 30px var(--shadow-color), var(--shadow-glow) !important;
    border-color: var(--accent-primary) !important;
}

/* ============================================================================
   🖼️ HERO & SECTIONS
   ============================================================================ */
[data-theme="dark"] .contact-hero,
[data-theme="dark"] .hero-section, .service-icon  {
    background: var(--gradient-primary) !important;
}

[data-theme="dark"] .section-hyundai {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-light {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .hero-title, 
[data-theme="dark"] .hero-subtitle {
    color: var(--text-primary) !important;
}

/* ============================================================================
   📝 FORMULAIRES & INPUTS
   ============================================================================ */
[data-theme="dark"] .form-control-hyundai,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control-custom {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control-hyundai::placeholder,
[data-theme="dark"] .form-control-custom::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .form-control-hyundai:focus,
[data-theme="dark"] .form-control-custom:focus {
    background: #4E342E !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 4px rgba(212, 163, 115, 0.2) !important;
}

[data-theme="dark"] .input-icon { color: var(--text-muted) !important; }
[data-theme="dark"] .input-wrapper:focus-within .input-icon { 
    color: var(--accent-primary) !important; 
}

/* ============================================================================
   🔘 BOUTONS
   ============================================================================ */
[data-theme="dark"] .btn-primary {
    background: var(--gradient-accent) !important;
    border: none !important;
    color: #1A120B !important;
}

[data-theme="dark"] .btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(212, 163, 115, 0.4) !important;
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--accent-primary) !important;
    color: #1A120B !important;
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* ============================================================================
   🏷️ BADGES, PRIX & ALERTES
   ============================================================================ */
[data-theme="dark"] .badge, 
[data-theme="dark"] .badge-type {
    background: var(--bg-tertiary) !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .price-tag {
    color: var(--accent-hover) !important;
}

[data-theme="dark"] .alert, 
[data-theme="dark"] .alert-custom,
[data-theme="dark"] .toast {
    background: rgba(62, 39, 35, 0.85) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ============================================================================
   📊 TABLEAUX & ADMIN
   ============================================================================ */
[data-theme="dark"] .table, 
[data-theme="dark"] .admin-table {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .admin-table thead th {
    background: var(--bg-tertiary) !important;
    color: var(--accent-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .admin-table tbody tr { 
    border-bottom-color: var(--border-color) !important; 
}

[data-theme="dark"] .admin-table tbody tr:hover { 
    background: rgba(212, 163, 115, 0.08) !important; 
}

/* ============================================================================
   🦶 FOOTER & CAROUSEL
   ============================================================================ */
[data-theme="dark"] .footer-hyundai {
    background: linear-gradient(180deg, #2C1A12 0%, #1A120B 100%) !important;
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .footer-hyundai h5 { color: var(--accent-primary) !important; }
[data-theme="dark"] .footer-hyundai a, 
[data-theme="dark"] .footer-hyundai .text-muted, 
[data-theme="dark"] .footer-hyundai p { 
    color: var(--text-secondary) !important; 
}
[data-theme="dark"] .footer-hyundai a:hover { color: var(--accent-primary) !important; }

[data-theme="dark"] .carousel-inner { background: var(--bg-tertiary); }
[data-theme="dark"] .preview-item, 
[data-theme="dark"] .image-item {
    background: var(--bg-input);
    border-color: var(--border-color);
}

/* ============================================================================
   🌓 TOGGLE BOUTON (Ajustements Dark)
   ============================================================================ */
#theme-toggle {
    background: var(--gradient-accent) !important;
    border-color: rgba(212, 163, 115, 0.4) !important;
    box-shadow: 0 4px 20px var(--shadow-color), 0 0 15px rgba(212, 163, 115, 0.2);
}

#theme-toggle:hover {
    box-shadow: 0 6px 25px var(--shadow-color), 0 0 20px rgba(212, 163, 115, 0.4) !important;
    filter: brightness(1.1);
}

/* ============================================================================
   📜 SCROLLBAR PERSONNALISÉE & TRANSITIONS
   ============================================================================ */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { 
    background: var(--bg-tertiary); 
    border-radius: 5px; 
    border: 2px solid var(--bg-primary);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); }

/* Transitions fluides pour le changement de thème */
[data-theme="dark"] *, 
[data-theme="dark"] *::before, 
[data-theme="dark"] *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}