/* --- Variables & Thème --- */
:root {
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;

    /* Mode Clair (Moderne & Doux) */
    --bg-body-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --bg-card: rgba(255, 255, 255, 0.7);
    --bg-card-hover: rgba(255, 255, 255, 0.9);
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --border-card: rgba(255, 255, 255, 0.5);

    /* Couleurs Accentuation (Vibrantes) */
    --accent-blue: #3b82f6;
    --accent-glow: rgba(59, 130, 246, 0.5);

    /* Semantic Inputs */
    --bg-element: rgba(255, 255, 255, 0.8);
    --bg-element-active: #ffffff;

    /* Indicateurs */
    --kpi-temp: #ef4444;
    --kpi-hum: #10b981;
    --kpi-pres: #8b5cf6;
    --kpi-lux: #f59e0b;
}

.dark {
    /* Mode Sombre (Midnight Glass - Premium) */
    --bg-body-gradient: linear-gradient(135deg, #020617 0%, #1e1b4b 100%);
    /* Plus profond (Dark Navy) */
    --bg-card: rgba(15, 23, 42, 0.6);
    /* Plus transparent pour l'effet verre */
    --bg-card-hover: rgba(30, 41, 59, 0.7);
    --text-primary: #e2e8f0;
    /* Off-white (Slate 200) */
    --text-secondary: #94a3b8;
    /* Slate 400 */
    --border-card: rgba(255, 255, 255, 0.08);
    /* Bordure subtile */

    --accent-blue: #38bdf8;
    /* Cyan plus vif (Sky 400) */
    --accent-glow: rgba(56, 189, 248, 0.3);

    /* Semantic Inputs (Dark) */
    --bg-element: rgba(15, 23, 42, 0.8);
    /* Darker & more opaque for contrast */
    --bg-element-active: rgba(30, 41, 59, 1.0);
    /* Solid background on focus */

    /* KPI Colors - Plus 'Néon' */
    --kpi-temp: #f87171;
    /* Red 400 */
    --kpi-hum: #34d399;
    /* Emerald 400 */
    --kpi-pres: #a78bfa;
    /* Violet 400 */
    --kpi-lux: #fbbf24;
    /* Amber 400 */
}

/* --- Reset & Base --- */
body {
    font-family: var(--font-main);
    background: var(--bg-body-gradient);
    background-attachment: fixed;
    color: var(--text-primary);
    transition: all 0.3s ease;
    min-height: 100vh;
}

/* --- Glassmorphism Cards --- */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-card);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    border-radius: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.15);
    background: var(--bg-card-hover);
}

/* --- Navigation --- */
.nav-link {
    color: var(--text-secondary);
    transition: color 0.2s, background 0.2s;
}

.nav-link:hover {
    color: var(--accent-blue);
    background: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 4px 15px var(--accent-glow);
}

/* --- Inputs & Selects (Shared) --- */
.glass-input,
.dataTables_wrapper select,
.dataTables_wrapper input,
input[type="search"] {
    background: var(--bg-element) !important;
    border: 1px solid var(--border-card) !important;
    color: var(--text-primary) !important;
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    padding: 0.4rem 0.8rem;
    transition: background 0.2s, border-color 0.2s;
}

/* Focus States */
.glass-input:focus,
.dataTables_wrapper select:focus,
.dataTables_wrapper input:focus,
input[type="search"]:focus {
    background: var(--bg-element-active) !important;
    border-color: var(--accent-blue) !important;
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-glow);
    color: var(--text-primary) !important;
}

/* --- Specific Dark Mode Overrides for DataTables --- */

/* 1. INPUTS (Search): Solid Bakground for visibility */
html.dark .dataTables_wrapper input,
html.dark input[type="search"],
html.dark .dataTables_filter input {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: white !important;
}

/* 2. SELECTS (Length/Entries): Transparent Background (User Request) */
html.dark .dataTables_wrapper select,
html.dark .dataTables_length select {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Fix dropdown options visibility */
html.dark option {
    background-color: #0f172a;
    color: white;
}


/* --- Time Buttons Container --- */
.time-btn-container {
    background: transparent !important;
    /* No background as requested */
    border: none;
    backdrop-filter: none;
}

/* --- Time Buttons (Dashboard) --- */
.time-btn {
    color: var(--text-secondary);
    background-color: transparent;
}

.dark .time-btn {
    color: #94a3b8;
    /* Slate 400 (Muted) */
    background-color: transparent;
    border: 1px solid transparent;
}

.dark .time-btn:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Active State */
.dark .active-time-btn {
    background-color: var(--accent-blue) !important;
    color: #0f172a !important;
    /* Dark text on Cyan */
    border-color: var(--accent-blue) !important;
    font-weight: bold;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* --- KPI Cards Specifics --- */
.kpi-temp {
    border-top: 4px solid var(--kpi-temp);
}

.kpi-hum {
    border-top: 4px solid var(--kpi-hum);
}

.kpi-pres {
    border-top: 4px solid var(--kpi-pres);
}

.kpi-lux {
    border-top: 4px solid var(--kpi-lux);
}

.kpi-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* --- Tooltips (Dashboard Min/Max) --- */
.dark .group:hover .absolute {
    background-color: rgba(15, 23, 42, 0.95);
    /* Fond très sombre */
    color: var(--text-primary);
    border-top: 1px solid var(--border-card);
}

/* --- Animations --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* --- DataTables Customization --- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text-primary) !important;
    margin-bottom: 1rem;
}

table.dataTable tbody tr {
    background-color: transparent !important;
    color: var(--text-primary);
}

table.dataTable thead th {
    border-bottom: 1px solid var(--border-card) !important;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--border-card) !important;
}