/* /assets/css/theme.css */
/* ===================================================================
   DESIGN SYSTEM SÉMANTIQUE - THEMES & VARIABLES
   =================================================================== */
:root { 
    /* THÈME PAR DÉFAUT (CYBER / TECHNO) */
    --bg-page: #050507;             
    --bg-surface: #0e0e12;          
    --bg-element: #181820;          
    --bg-gradient-start: #0a192f;   
    --text-main: #e4e4e7;           
    --text-muted: #71717a;          
    --text-inverse: #050507;        
    --color-primary: #00e5ff;       
    --color-secondary: #ff003c;     
    --color-action: transparent;    
    --color-action-hover: #00e5ff;  
    --color-action-text: #00e5ff;   
    --color-action-text-hover: #050507; 
    
    /* ÉTATS & NOEUDS */
    --status-success: #00ff88;      
    --status-warning: #ffb703;      
    --status-danger: #ff003c;       
    --node-solar-color: #e5ff00;
    --node-grid-color: #ff003c;
    --node-home-color: #00e5ff;
    --node-batt-color: #00ff88;

    /* STRUCTURE */
    --border-color: #27272a;        
    --radius-sm: 4px;
    --radius-md: 6px;               
    --radius-lg: 12px;              
    --radius-full: 50%;             
    
    /* EFFETS */
    --shadow-panel: 0 15px 35px rgba(0,0,0,0.9);
    --shadow-hover: 0 0 20px rgba(0, 229, 255, 0.2);
    --glow-primary: 0 0 20px rgba(0, 229, 255, 0.4);
    
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --pattern-grid: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 229, 255, 0.02) 10px, rgba(0, 229, 255, 0.02) 20px);
}

/* THÈME 2 : STITCH (Exemple de bascule instantanée) */
[data-theme="stitch"] {
    --bg-page: #040B16;             
    --bg-surface: #0A192F;          
    --bg-gradient-start: #112240;
    --color-primary: #64FFDA; /* Vert d'eau Alien */
    --color-secondary: #FF6B6B;
    --pattern-grid: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(100, 255, 218, 0.02) 10px, rgba(100, 255, 218, 0.02) 20px);
}

/* ===================================================================
   VOTRE STRUCTURE EXACTE (Copie de votre code)
   =================================================================== */
body, html { 
    margin: 0; padding: 0; height: 100%; 
    font-family: var(--font-main); 
    background-color: var(--bg-page); 
    color: var(--text-main); 
    overflow: hidden; /* Verrouille le body, le scroll se fera dans <main> */
}

/* Scrollbar personnalisée (Module Ouvrant) */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* --- VITRINE / LOGIN --- */
.split-layout { display: flex; height: 100vh; width: 100vw; }
@media (max-width: 900px) { .split-layout { flex-direction: column; } }

.showcase { 
    flex: 6; 
    background: radial-gradient(circle at 30% 50%, var(--bg-gradient-start) 0%, var(--bg-page) 80%);
    position: relative; display: flex; flex-direction: column; justify-content: center;
    padding: 5rem; overflow: hidden; border-right: 1px solid var(--border-color);
}
.showcase::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: var(--pattern-grid);
    animation: drift 60s linear infinite; z-index: 1; pointer-events: none;
}
@keyframes drift { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.showcase-content { position: relative; z-index: 2; max-width: 600px; }
.showcase h1 { font-size: 4em; margin: 0; text-transform: uppercase; letter-spacing: 4px; color: var(--color-primary); text-shadow: 0 0 20px rgba(0, 229, 255, 0.5); }
.showcase .tagline { font-size: 1.5em; color: var(--text-main); font-weight: 300; margin-top: 10px; border-left: 4px solid var(--color-secondary); padding-left: 15px; }
.solar-display { margin-top: 60px; }
.solar-value { font-size: 7em; font-weight: bold; color: var(--color-primary); text-shadow: 0 0 40px rgba(0, 229, 255, 0.6); line-height: 1; }
.solar-unit { font-size: 0.3em; vertical-align: super; color: var(--text-muted); }
.solar-maj { color: var(--text-muted); font-style: italic; margin-top: 15px; font-size: 1.1em; }

@media (max-width: 900px) {
    .showcase { flex: none; height: 40vh; padding: 2rem; border-right: none; border-bottom: 1px solid var(--border-color); }
    .showcase h1 { font-size: 2.5em; }
    .solar-value { font-size: 4em; }
}

.login-side { 
    flex: 4; background: var(--bg-surface); display: flex; align-items: center; justify-content: center; 
    padding: 2rem; min-width: 400px; box-shadow: -20px 0 50px rgba(0,0,0,0.8); z-index: 5;
}
@media (max-width: 900px) { .login-side { flex: 1; align-items: flex-start; padding-top: 3rem; min-width: 100%; } }
.login-box { width: 100%; max-width: 380px; }
.login-box h2 { margin-top: 0; font-size: 1.8em; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 30px; }
.input-group { margin-bottom: 25px; }
.input-group label { display: block; margin-bottom: 8px; font-size: 0.9em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.input-group input { width: 100%; padding: 14px; background: var(--bg-element); border: 1px solid var(--border-color); color: white; border-radius: var(--radius-md); font-size: 1em; transition: 0.3s; box-sizing: border-box; }
.input-group input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 15px rgba(0, 229, 255, 0.2); }
.remember-row { display: flex; align-items: center; margin-bottom: 30px; cursor: pointer; }
.remember-row input[type="checkbox"] { display: none; }
.custom-checkbox { width: 20px; height: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-right: 12px; display: flex; align-items: center; justify-content: center; transition: 0.2s; background: var(--bg-element); }
.remember-row input[type="checkbox"]:checked + .custom-checkbox { background: var(--color-primary); border-color: var(--color-primary); }
.remember-row input[type="checkbox"]:checked + .custom-checkbox::after { content: '✔'; color: var(--bg-page); font-size: 14px; font-weight: bold; }
.remember-row span { color: var(--text-muted); font-size: 0.95em; }
button[type="submit"] { width: 100%; background: var(--color-action); color: var(--color-action-text); border: 2px solid var(--color-primary); padding: 15px; font-size: 1.1em; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; border-radius: var(--radius-md); cursor: pointer; transition: 0.3s; }
button[type="submit"]:hover { background: var(--color-action-hover); color: var(--color-action-text-hover); box-shadow: var(--glow-primary); }
.error-msg { background: rgba(255, 0, 60, 0.1); color: var(--status-danger); border: 1px solid var(--status-danger); padding: 12px; border-radius: var(--radius-md); margin-bottom: 25px; text-align: center; font-weight: bold; font-size: 0.9em; display: none; }

/* --- DASHBOARD COMPOSANTS --- */
.tabs-nav { display: flex; gap: 10px; width: 100%; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; }
.tab-btn { flex: 1; min-width: 150px; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-muted); padding: 12px; border-radius: var(--radius-md); cursor: pointer; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; text-align: center; }
.tab-btn:hover { color: white; border-color: var(--color-primary); }
.tab-btn.active { background: rgba(0, 229, 255, 0.05); color: white; border-bottom: 3px solid var(--color-primary); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.tab-content { display: none; width: 100%; animation: fadeIn 0.4s; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.panel { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 30px; margin-bottom: 20px; box-shadow: var(--shadow-panel); }
.panel h2 { margin-top: 0; font-size: 1.1em; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 25px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.data-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px dashed var(--border-color); }
.data-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.data-label { font-size: 0.9em; color: var(--text-muted); }
.data-value { font-size: 1.3em; font-weight: bold; color: white; transition: color 0.5s; }
.unit { font-size: 0.6em; margin-left: 4px; opacity: 0.7; }

.kpis-wrapper { display: flex; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; }
.kpi-card { flex: 1; min-width: 160px; background: var(--bg-page); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 15px 10px; text-align: center; position: relative; cursor: help; transition: 0.3s; }
.kpi-card:hover { border-color: var(--status-warning); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.kpi-title { font-size: 0.75em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.kpi-value { font-size: 1.8em; font-weight: bold; transition: color 0.5s; display: flex; justify-content: center; align-items: baseline; gap: 4px; }
.kpi-unit { font-size: 0.5em; opacity: 0.7; }

/* Tooltip natif conservé */
.kpi-card[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%); background: #1c1c24; color: #fff; padding: 10px 15px; border-radius: var(--radius-md); font-size: 0.85em; white-space: pre-line; text-align: center; line-height: 1.5; min-width: 150px; opacity: 0; pointer-events: none; transition: 0.3s; border: 1px solid #3f3f46; box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 100; }
.kpi-card:hover[data-tooltip]::after { opacity: 1; bottom: 115%; }

/* Synoptique Solaire */
.synoptic-wrapper { position: relative; width: 100%; height: 500px; background: var(--bg-page); border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: inset 0 0 50px rgba(0,0,0,0.8); margin-bottom: 30px; overflow: hidden; }
#particleCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.node { position: absolute; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: var(--radius-full); background: radial-gradient(circle, #1c1c24 0%, var(--bg-surface) 100%); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 2px solid var(--border-color); box-shadow: 0 10px 25px rgba(0,0,0,0.9); z-index: 10; transition: border-color 0.5s, box-shadow 0.5s; }
#node-solar { top: 25%; left: 50%; }
#node-home  { top: 70%; left: 50%; }
#node-batt  { top: 70%; left: 20%; }
#node-grid  { top: 70%; left: 80%; }
.node-title { font-size: 0.7em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.node-ring { position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: var(--radius-full); border: 4px solid transparent; z-index: 10; pointer-events: none; animation: spin-ring linear infinite; }
@keyframes spin-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Toolbar & Boutons Graphiques */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.time-filters { display: flex; gap: 8px; background: var(--bg-page); padding: 5px; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow-x: auto; }
.time-filters button { background: transparent; border: none; color: var(--text-muted); padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 0.85em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; white-space: nowrap; }
.time-filters button:hover { color: white; background: rgba(255, 255, 255, 0.03); }
.time-filters button.active { background: rgba(0, 229, 255, 0.1); color: var(--color-primary); border: 1px solid rgba(0, 229, 255, 0.3); box-shadow: 0 0 15px rgba(0, 229, 255, 0.15); }