/* =================================================================
   theme-variables.css — Variables sémantiques light/dark pour iot.olution.info
   Dark mode : [data-theme="dark"]
   ================================================================= */

:root {
    /* Fond et surfaces */
    --bg-page: #e8f4f2;
    --bg-main: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fffe;
    --bg-secondary: #f8f9fa;
    --bg-input: #ffffff;
    
    /* Texte (WCAG AA : contrast ratio ≥ 4,5:1 sur fond clair) */
    --text-primary: #2c3e50;
    --text-secondary: #6b7280;
    --text-muted: #6b7280;
    --text-inverse: #ffffff;
    
    /* Accents */
    --accent-primary: #008B74;
    --accent-primary-hover: #00A896;
    --accent-secondary: #FF6300;
    --accent-muted: rgba(0, 139, 116, 0.15);
    --accent-border: rgba(0, 139, 116, 0.2);
    
    /* Header et nav (main.css) */
    --header-nav-bg: #1e252d;
    --header-nav-text: #ffffff;
    --header-nav-active-bg: #ffffff;
    --header-nav-active-text: #1e252d;
    --header-nav-hover: #00B794;

    /* Décalage des éléments fixes (badge LIVE, etc.) : barre mobile = thème + menu (2×44px + gap) */
    --nav-sandwich-clearance: calc(0.75rem + 44px + 0.5rem + 44px + 12px);
    
    /* Bordures */
    --border-color: #e0e0e0;
    --border-light: #f0f0f0;
    
    /* Footer (WCAG AA) */
    --footer-color: #6b7280;
    --footer-bg-elevated: rgba(255, 255, 255, 0.92);
    --footer-border-elevated: rgba(0, 139, 116, 0.15);
    
    /* Page background (realtime) */
    --page-bg-color: #e8f4f2;
    --page-bg-overlay: transparent;
    
    /* Wrapper contrôle */
    --wrapper-control-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.35) 0%, rgba(238, 242, 246, 0.4) 100%);
    
    /* Chart container */
    --chart-bg: rgba(255, 255, 255, 0.95);
    --chart-border: rgba(0, 139, 116, 0.15);
    
    /* Toast */
    --toast-bg: #2c3e50;
    --toast-text: #ecf0f1;
    
    /* Control panel (control-styles) */
    --control-bg: #f6f9fc;
    --panel-bg: #ffffff;
    --control-border: #e3e8ee;
    --control-text: #1b2a4b;

    /* Statuts (badges, indicateurs en ligne/hors ligne) */
    --status-success-bg: #d4edda;
    --status-success-text: #155724;
    --status-error-bg: #f8d7da;
    --status-error-text: #721c24;
    --status-warning-bg: #fff3cd;
    --status-warning-text: #856404;
    --status-loading-bg: #e2e3e5;
    --status-loading-text: #383d41;

    /* Transitions et ombres (ameliorations visuelles, fiche 01) */
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --shadow-card: 0 10px 29px 0 rgba(0, 139, 116, 0.1);
    --shadow-card-hover: 0 16px 40px 0 rgba(0, 139, 116, 0.18);
}

/* -----------------------------------------------------------------
   Dark mode
----------------------------------------------------------------- */
[data-theme="dark"] {
    --bg-page: #0f172a;
    --bg-main: #1e293b;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;
    --bg-secondary: #334155;
    --bg-input: #334155;
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #0f172a;
    
    --accent-primary: #2dd4bf;
    --accent-primary-hover: #5eead4;
    --accent-secondary: #fb923c;
    --accent-muted: rgba(45, 212, 191, 0.2);
    --accent-border: rgba(45, 212, 191, 0.35);
    
    --header-nav-bg: #0f172a;
    --header-nav-text: #f1f5f9;
    --header-nav-active-bg: #334155;
    --header-nav-active-text: #2dd4bf;
    --header-nav-hover: #2dd4bf;
    
    --border-color: #475569;
    --border-light: #334155;
    
    --footer-color: #94a3b8;
    --footer-bg-elevated: rgba(30, 41, 59, 0.95);
    --footer-border-elevated: rgba(45, 212, 191, 0.2);
    
    --page-bg-color: #0f172a;
    --page-bg-overlay: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    
    --wrapper-control-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.7) 100%);
    
    --chart-bg: rgba(30, 41, 59, 0.95);
    --chart-border: rgba(45, 212, 191, 0.2);
    
    --toast-bg: #334155;
    --toast-text: #f1f5f9;
    
    --control-bg: #0f172a;
    --panel-bg: #1e293b;
    --control-border: #475569;
    --control-text: #f1f5f9;

    --status-success-bg: rgba(34, 197, 94, 0.2);
    --status-success-text: #86efac;
    --status-error-bg: rgba(239, 68, 68, 0.2);
    --status-error-text: #fca5a5;
    --status-warning-bg: rgba(251, 191, 36, 0.2);
    --status-warning-text: #fcd34d;
    --status-loading-bg: var(--bg-secondary);
    --status-loading-text: var(--text-muted);

    /* Ombres cartes (dark) — teinte accent */
    --shadow-card: 0 10px 29px 0 rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 16px 40px 0 rgba(45, 212, 191, 0.15);
}

/* -----------------------------------------------------------------
   Bouton toggle thème (nav)
   Icônes blanches, vert au survol (pas bleu)
----------------------------------------------------------------- */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    margin: 0.5rem 0.5rem 0 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle-btn:hover,
.theme-toggle-btn:focus,
.theme-toggle-btn:active {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    box-shadow: none;
}

.theme-toggle-btn:focus {
    outline: 2px solid var(--header-nav-hover, #00B794);
    outline-offset: 2px;
}

.theme-toggle-btn .theme-icon-light {
    display: none;
}

.theme-toggle-btn .theme-icon-dark {
    display: inline-block;
}

[data-theme="dark"] .theme-toggle-btn .theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-toggle-btn .theme-icon-light {
    display: inline-block;
}

/* En dark mode : icône et cercle blancs */
[data-theme="dark"] .theme-toggle-btn {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
[data-theme="dark"] .theme-toggle-btn:hover,
[data-theme="dark"] .theme-toggle-btn:focus,
[data-theme="dark"] .theme-toggle-btn:active {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

/* Panneau mobile en dark mode */
[data-theme="dark"] #navPanel .nav-theme-toggle {
    background: var(--bg-card);
    border-top-color: var(--border-color);
}
[data-theme="dark"] #navPanel .theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
}
[data-theme="dark"] #navPanel .theme-toggle-btn:hover,
[data-theme="dark"] #navPanel .theme-toggle-btn:focus,
[data-theme="dark"] #navPanel .theme-toggle-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary) !important;
}

.nav-theme-toggle {
    margin-left: auto;
}

/* Panneau mobile (#navPanel) : fond blanc comme les autres items, icône même style que les liens */
#navPanel .nav-theme-toggle {
    margin: 0;
    padding: 0.75rem 0;
    border-top: solid 2px var(--border-color, #eeeeee);
    background: var(--bg-card, #ffffff);
}
@media (max-width: 736px) {
    #navPanel .nav-theme-toggle {
        padding-left: 0;
        padding-right: 0;
    }
}
#navPanel .theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-primary, #212931);
    font-family: "Raleway", Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    min-width: auto;
    min-height: auto;
    padding: 0.5rem 0;
    -webkit-tap-highlight-color: rgba(0, 139, 116, 0.2);
}
#navPanel .theme-toggle-btn:hover,
#navPanel .theme-toggle-btn:focus,
#navPanel .theme-toggle-btn:active {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary, #212931) !important;
    box-shadow: none;
}

/* ≤980px : toggle thème déjà dans la barre fixe (.nav-mobile-bar) — évite doublon en bas du tiroir */
@media screen and (max-width: 980px) {
    #navPanel .nav-theme-toggle {
        display: none !important;
    }
}

/* Bouton thème dans la barre fixe (à côté du hamburger), même gabarit que #navPanelToggle */
.theme-toggle-btn.theme-toggle-btn--mobile-bar {
    display: none;
}

@media screen and (max-width: 980px) {
    .theme-toggle-btn.theme-toggle-btn--mobile-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0.5rem;
        background-color: rgba(30, 37, 45, 0.88);
        box-shadow: 0 0.125rem 0.75rem 0 rgba(30, 37, 45, 0.25);
        color: #ffffff !important;
        font-size: 1rem;
        line-height: 1;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        touch-action: manipulation;
    }

    .theme-toggle-btn.theme-toggle-btn--mobile-bar:hover,
    .theme-toggle-btn.theme-toggle-btn--mobile-bar:focus,
    .theme-toggle-btn.theme-toggle-btn--mobile-bar:active {
        background-color: #2a343e;
        color: #ffffff !important;
    }

    .theme-toggle-btn.theme-toggle-btn--mobile-bar:focus-visible {
        outline: 2px solid var(--header-nav-hover, #00B794);
        outline-offset: 2px;
    }
}

[data-theme="dark"] .theme-toggle-btn.theme-toggle-btn--mobile-bar {
    background-color: rgba(15, 23, 42, 0.92);
    box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.35);
    color: #ffffff !important;
}

[data-theme="dark"] .theme-toggle-btn.theme-toggle-btn--mobile-bar:hover,
[data-theme="dark"] .theme-toggle-btn.theme-toggle-btn--mobile-bar:focus,
[data-theme="dark"] .theme-toggle-btn.theme-toggle-btn--mobile-bar:active {
    background-color: rgba(30, 41, 59, 0.95);
    color: #ffffff !important;
}

/* -----------------------------------------------------------------
   Fallback sans JavaScript : prefers-color-scheme
   Si JS est desactive, data-theme n'est jamais applique.
   Ce bloc assure un mode sombre minimal base sur la preference systeme.
----------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --bg-page: #0f172a;
        --bg-main: #1e293b;
        --bg-card: #1e293b;
        --bg-card-hover: #334155;
        --bg-secondary: #334155;
        --bg-input: #334155;
        --text-primary: #f1f5f9;
        --text-secondary: #94a3b8;
        --text-muted: #64748b;
        --text-inverse: #0f172a;
        --accent-primary: #2dd4bf;
        --accent-primary-hover: #5eead4;
        --accent-secondary: #fb923c;
        --accent-muted: rgba(45, 212, 191, 0.2);
        --accent-border: rgba(45, 212, 191, 0.35);
        --header-nav-bg: #0f172a;
        --header-nav-text: #f1f5f9;
        --header-nav-active-bg: #334155;
        --header-nav-active-text: #2dd4bf;
        --header-nav-hover: #2dd4bf;
        --border-color: #475569;
        --border-light: #334155;
        --footer-color: #94a3b8;
        --footer-bg-elevated: rgba(30, 41, 59, 0.95);
        --footer-border-elevated: rgba(45, 212, 191, 0.2);
        --page-bg-color: #0f172a;
        --chart-bg: rgba(30, 41, 59, 0.95);
        --chart-border: rgba(45, 212, 191, 0.2);
        --toast-bg: #334155;
        --toast-text: #f1f5f9;
        --control-bg: #0f172a;
        --panel-bg: #1e293b;
        --control-border: #475569;
        --control-text: #f1f5f9;
        --status-success-bg: rgba(34, 197, 94, 0.2);
        --status-success-text: #86efac;
        --status-error-bg: rgba(239, 68, 68, 0.2);
        --status-error-text: #fca5a5;
        --status-warning-bg: rgba(251, 191, 36, 0.2);
        --status-warning-text: #fcd34d;
        --status-loading-bg: #334155;
        --status-loading-text: #64748b;
        --shadow-card: 0 10px 29px 0 rgba(0, 0, 0, 0.25);
        --shadow-card-hover: 0 16px 40px 0 rgba(45, 212, 191, 0.15);
    }
}

/* -----------------------------------------------------------------
   Transition douce clair ↔ foncé (fondu)
----------------------------------------------------------------- */
html {
    transition: background-color 0.4s ease;
}
body,
#main, #header, #nav, #footer,
#main > *, #wrapper.control-wrapper,
.card, .panel, .link-card, .live-card,
.live-controls-integrated, .live-control-item, .live-stats-display,
.system-health-panel, .health-item, .toast, .toast-message {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Desactiver pendant le preload pour eviter le flash */
body.is-preload,
body.is-preload * {
    transition: none !important;
}

/* Desactiver les transitions de theme pour les utilisateurs qui le demandent */
@media (prefers-reduced-motion: reduce) {
    html,
    body,
    #main, #header, #nav, #footer,
    #main > *, #wrapper.control-wrapper,
    .card, .panel, .link-card, .live-card,
    .live-controls-integrated, .live-control-item, .live-stats-display,
    .system-health-panel, .health-item, .toast, .toast-message {
        transition: none !important;
    }
}