/**
 * ================================================================
 * MARKETFLOW PRO - MODE SOMBRE v2.0 COMPLET
 * ================================================================
 * Stylise TOUTE la page, pas seulement le header
 * Fichier : public/css/dark-mode.css
 * ================================================================
 */

/* ============================================================
   VARIABLES MODE SOMBRE
   Remplace les variables quand body.dark-mode est actif
   ============================================================ */
body.dark-mode {
    /* Backgrounds - Palette sombre élégante */
    --bg-primary: #0f172a;       /* Bleu nuit profond */
    --bg-secondary: #1e293b;     /* Bleu nuit moyen */
    --bg-tertiary: #334155;      /* Bleu-gris */
    
    /* Texte - Optimisé pour le contraste */
    --text-primary: #f1f5f9;     /* Blanc cassé (plus doux) */
    --text-secondary: #cbd5e1;   /* Gris clair */
    --text-tertiary: #94a3b8;    /* Gris moyen */
    --text-inverse: #0f172a;     /* Texte foncé sur fond clair */
    
    /* Gris inversés pour le mode sombre */
    --gray-50: #1e293b;
    --gray-100: #334155;
    --gray-200: #475569;
    --gray-300: #64748b;
    --gray-400: #94a3b8;
    --gray-500: #cbd5e1;
    --gray-600: #e2e8f0;
    --gray-700: #f1f5f9;
    --gray-800: #f8fafc;
    --gray-900: #ffffff;
    
    /* Ombres adaptées au mode sombre */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.5);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.6), 0 1px 2px -1px rgb(0 0 0 / 0.6);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.7), 0 4px 6px -4px rgb(0 0 0 / 0.7);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.8), 0 8px 10px -6px rgb(0 0 0 / 0.8);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.9);
}

/* ============================================================
   ÉLÉMENTS DE BASE - Transition fluide
   ============================================================ */

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

/* Tous les conteneurs principaux */
body.dark-mode .container,
body.dark-mode main,
body.dark-mode section {
    background-color: transparent;
    color: var(--text-primary);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
body.dark-mode nav {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--gray-200);
}

body.dark-mode nav a {
    color: var(--text-primary);
}

body.dark-mode nav a:hover {
    color: var(--primary-400);
}

/* ============================================================
   SECTIONS ET BACKGROUNDS
   ============================================================ */

/* Section Hero */
body.dark-mode .hero-section {
    background: var(--bg-primary);
}

/* Toutes les sections */
body.dark-mode .categories-section,
body.dark-mode .products-section,
body.dark-mode .features-section,
body.dark-mode .cta-section {
    background: var(--bg-primary);
}

/* Titres de section */
body.dark-mode .section-title,
body.dark-mode .hero-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary);
}

/* Sous-titres */
body.dark-mode .hero-subtitle,
body.dark-mode .section-subtitle {
    color: var(--text-secondary);
}

/* Paragraphes */
body.dark-mode p {
    color: var(--text-primary);
}

/* ============================================================
   CARDS - Produits, Catégories, Features
   ============================================================ */

/* Product Cards */
body.dark-mode .product-card {
    background: var(--bg-secondary);
    border-color: var(--gray-200);
}

body.dark-mode .product-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--gray-300);
}

/* Container image produit */
body.dark-mode .product-image-container {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

/* Footer de carte */
body.dark-mode .product-footer {
    border-top-color: var(--gray-200);
}

/* Titre produit */
body.dark-mode .product-title,
body.dark-mode .product-title a {
    color: var(--text-primary);
}

body.dark-mode .product-card:hover .product-title {
    color: var(--primary-400);
}

/* Badge catégorie */
body.dark-mode .product-badge {
    background: rgba(30, 41, 59, 0.95);
    color: var(--primary-400);
}

/* Bouton wishlist */
body.dark-mode .wishlist-btn {
    background: rgba(30, 41, 59, 0.95);
    border-color: var(--gray-300);
}

body.dark-mode .wishlist-btn:hover {
    background: rgba(51, 65, 85, 1);
}

/* Category Cards */
body.dark-mode .category-card {
    background: var(--bg-secondary);
    border-color: var(--gray-200);
}

body.dark-mode .category-card:hover {
    background: var(--bg-tertiary);
}

body.dark-mode .category-title {
    color: var(--text-primary);
}

/* Feature Cards */
body.dark-mode .feature-card {
    background: var(--bg-secondary);
    border-color: var(--gray-200);
}

body.dark-mode .feature-card:hover {
    background: var(--bg-tertiary);
}

body.dark-mode .feature-title {
    color: var(--text-primary);
}

body.dark-mode .feature-description {
    color: var(--text-secondary);
}

/* ============================================================
   FORMULAIRES ET INPUTS
   ============================================================ */

/* Inputs */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--bg-secondary);
    border-color: var(--gray-200);
    color: var(--text-primary);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--primary-500);
    background: var(--bg-tertiary);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-tertiary);
}

/* Boutons */
body.dark-mode .btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--gray-200);
}

body.dark-mode .btn:hover {
    background: var(--bg-tertiary);
}

body.dark-mode .btn-primary {
    background: var(--primary-600);
    color: white;
    border-color: var(--primary-600);
}

body.dark-mode .btn-primary:hover {
    background: var(--primary-700);
}

/* ============================================================
   DROPDOWN MENUS
   ============================================================ */
body.dark-mode .dropdown-menu {
    background: var(--bg-secondary);
    border-color: var(--gray-200);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

body.dark-mode .dropdown-menu a {
    color: var(--text-primary);
}

body.dark-mode .dropdown-menu a:hover {
    background: var(--bg-tertiary);
}

/* ============================================================
   LIENS
   ============================================================ */
body.dark-mode a {
    color: var(--primary-400);
}

body.dark-mode a:hover {
    color: var(--primary-300);
}

/* ============================================================
   CTA SECTION
   ============================================================ */

/* La section CTA garde son gradient bleu même en mode sombre */
body.dark-mode .cta-card {
    /* On garde le gradient bleu original car il est déjà contrasté */
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #2563eb 100%);
}

body.dark-mode .cta-title,
body.dark-mode .cta-description {
    color: white; /* Toujours blanc sur le gradient */
}

/* ============================================================
   TABLES
   ============================================================ */
body.dark-mode table {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-mode th {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--gray-200);
}

body.dark-mode td {
    border-color: var(--gray-200);
}

body.dark-mode tr:hover {
    background: var(--bg-tertiary);
}

/* ============================================================
   BADGES ET LABELS
   ============================================================ */
body.dark-mode .badge {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dark-mode .label {
    color: var(--text-secondary);
}

/* ============================================================
   FOOTER
   ============================================================ */
body.dark-mode footer {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-top: 1px solid var(--gray-200);
}

body.dark-mode footer a {
    color: var(--text-secondary);
}

body.dark-mode footer a:hover {
    color: var(--primary-400);
}

/* ============================================================
   MESSAGES ET NOTIFICATIONS
   ============================================================ */
body.dark-mode .alert,
body.dark-mode .notification {
    background: var(--bg-secondary);
    border-color: var(--gray-200);
    color: var(--text-primary);
}

body.dark-mode .alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success);
    color: var(--success);
}

body.dark-mode .alert-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error);
    color: var(--error);
}

body.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--warning);
    color: var(--warning);
}

/* ============================================================
   BOUTON TOGGLE MODE SOMBRE
   Style discret et élégant qui s'intègre à la nav
   ============================================================ */

.dark-mode-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dark-mode-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    background: var(--bg-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.dark-mode-btn:hover {
    background: var(--bg-tertiary);
    transform: scale(1.05);
}

/* Icônes soleil et lune */
.dark-mode-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-primary);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
    position: absolute;
}

/* Animation de rotation au clic */
.dark-mode-btn.rotating svg {
    animation: rotateIcon 0.5s ease;
}

@keyframes rotateIcon {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(0.8); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ============================================================
   PAGES SPÉCIFIQUES
   ============================================================ */

/* Page d'accueil */
body.dark-mode .home-section {
    background: var(--bg-primary);
}

/* Page produit détail */
body.dark-mode .product-detail {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Page panier */
body.dark-mode .cart-item {
    background: var(--bg-secondary);
    border-color: var(--gray-200);
}

/* Page compte */
body.dark-mode .account-card {
    background: var(--bg-secondary);
    border-color: var(--gray-200);
}

/* ============================================================
   SCROLLBAR (optionnel mais élégant)
   ============================================================ */
body.dark-mode::-webkit-scrollbar {
    width: 12px;
}

body.dark-mode::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 6px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ============================================================
   RESPONSIVE - Mobile
   ============================================================ */
@media (max-width: 768px) {
    .dark-mode-btn {
        width: 40px;
        height: 40px;
    }
    
    .dark-mode-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================================
   TRANSITIONS GLOBALES
   Ajoute une transition fluide sur tous les éléments
   ============================================================ */
body.dark-mode * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* Sauf pour les éléments qui ont déjà leur propre transition */
body.dark-mode *[style*="transition"],
body.dark-mode .btn,
body.dark-mode .product-card,
body.dark-mode .category-card,
body.dark-mode .feature-card {
    transition: all 0.3s ease;
}