/* =================================================================
   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;
    
    /* 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;

    /* 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;

    /* 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 : fond blanc conservé, icône sombre comme les liens */
[data-theme="dark"] #navPanel .nav-theme-toggle {
    background: #ffffff;
    border-top-color: #eeeeee;
}
[data-theme="dark"] #navPanel .theme-toggle-btn {
    background: transparent;
    border: none;
    color: #212931;
}
[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(0, 0, 0, 0.05);
    color: #212931 !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 #eeeeee;
    background: #ffffff;
}
@media (max-width: 736px) {
    #navPanel .nav-theme-toggle {
        padding-left: 0;
        padding-right: 0;
    }
}
#navPanel .theme-toggle-btn {
    background: transparent;
    border: none;
    color: #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: #212931 !important;
    box-shadow: none;
}

/* -----------------------------------------------------------------
   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;
}
/* Désactiver pendant le preload pour éviter le flash */
body.is-preload,
body.is-preload * {
    transition: none !important;
}