/* =========================================================
   DARK MODE — Pointeur
   Activable via [data-theme="dark"] sur <html>
   ========================================================= */

[data-theme="dark"] {
    /* Palette sombre */
    --primary: #818cf8;
    --primary-dark: #6366f1;
    --primary-light: #312e81;
    --success: #34d399;
    --success-dark: #10b981;
    --success-light: #064e3b;
    --danger: #f87171;
    --danger-dark: #ef4444;
    --danger-light: #7f1d1d;
    --warning: #fbbf24;
    --warning-light: #78350f;
    --info: #38bdf8;

    /* Neutres inversés */
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-2: #334155;
    --border: #334155;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --text-light: #64748b;

    /* Ombres adaptées */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
    --shadow: 0 6px 20px rgba(0,0,0,.4);
    --shadow-lg: 0 15px 40px rgba(0,0,0,.5);
    --shadow-primary: 0 10px 30px rgba(129,140,248,.4);
    --shadow-success: 0 10px 30px rgba(52,211,153,.3);
    --shadow-danger: 0 10px 30px rgba(248,113,113,.3);
}

/* =========================================================
   Global
   ========================================================= */
[data-theme="dark"] body {
    background: var(--bg);
    color: var(--text);
}

[data-theme="dark"] {
    color-scheme: dark;
}

/* =========================================================
   App bar
   ========================================================= */
[data-theme="dark"] .app-bar {
    background: var(--surface);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .app-bar-btn {
    background: rgba(255,255,255,.06);
    color: var(--text);
}
[data-theme="dark"] .app-bar-btn:hover {
    background: rgba(255,255,255,.12);
}

/* =========================================================
   Cards
   ========================================================= */
[data-theme="dark"] .card-modern {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .card-modern.flat {
    background: var(--surface-2);
}

[data-theme="dark"] .card-title {
    color: var(--text);
}

/* =========================================================
   Stat cards
   ========================================================= */
[data-theme="dark"] .stat-card {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .stat-card .stat-value {
    color: var(--text);
}

[data-theme="dark"] .stat-card .stat-label {
    color: var(--text-muted);
}

[data-theme="dark"] .stat-card.primary .stat-icon {
    background: var(--primary-light);
    color: var(--primary);
}
[data-theme="dark"] .stat-card.success .stat-icon {
    background: var(--success-light);
    color: var(--success);
}
[data-theme="dark"] .stat-card.danger .stat-icon {
    background: var(--danger-light);
    color: var(--danger);
}
[data-theme="dark"] .stat-card.warning .stat-icon {
    background: var(--warning-light);
    color: var(--warning);
}

/* =========================================================
   Bottom nav
   ========================================================= */
[data-theme="dark"] .bottom-nav {
    background: var(--surface);
    border-top-color: var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}

[data-theme="dark"] .bottom-nav-item {
    color: var(--text-light);
}

[data-theme="dark"] .bottom-nav-item.active {
    color: var(--primary);
    background: var(--primary-light);
}

/* =========================================================
   Formulaires
   ========================================================= */
[data-theme="dark"] .form-control-modern {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .form-control-modern::placeholder {
    color: var(--text-light);
}

[data-theme="dark"] .form-control-modern:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(129,140,248,.15);
}

[data-theme="dark"] .form-control-modern:disabled {
    background: var(--bg);
    color: var(--text-muted);
}

[data-theme="dark"] .form-label {
    color: var(--text-muted);
}

/* =========================================================
   Inputs icon
   ========================================================= */
[data-theme="dark"] .input-icon i {
    color: var(--text-light);
}

/* =========================================================
   Listes
   ========================================================= */
[data-theme="dark"] .list-item {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .list-item:hover {
    border-color: var(--primary-light);
}
[data-theme="dark"] .list-item-body h6 {
    color: var(--text);
}
[data-theme="dark"] .list-item-body p {
    color: var(--text-muted);
}

/* =========================================================
   Alertes
   ========================================================= */
[data-theme="dark"] .alert-modern.success {
    background: rgba(52, 211, 153, .15);
    color: var(--success);
}
[data-theme="dark"] .alert-modern.danger {
    background: rgba(248, 113, 113, .15);
    color: var(--danger);
}
[data-theme="dark"] .alert-modern.warning {
    background: rgba(251, 191, 36, .15);
    color: var(--warning);
}
[data-theme="dark"] .alert-modern.info {
    background: rgba(129, 140, 248, .15);
    color: var(--primary);
}

/* =========================================================
   Badges
   ========================================================= */
[data-theme="dark"] .badge-soft.gray {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* =========================================================
   Modales
   ========================================================= */
[data-theme="dark"] .modal-content {
    background: var(--surface);
    color: var(--text);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border);
}
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* =========================================================
   Bouton présence
   ========================================================= */
[data-theme="dark"] .presence-ring::before {
    border-color: rgba(129,140,248,.25);
}

/* =========================================================
   GPS pill
   ========================================================= */
[data-theme="dark"] .gps-pill {
    background: var(--surface-2);
    color: var(--text-muted);
}

/* =========================================================
   Progress
   ========================================================= */
[data-theme="dark"] .progress-modern {
    background: var(--surface-2);
}

/* =========================================================
   Preloader
   ========================================================= */
[data-theme="dark"] .preloader-modern {
    background: var(--primary-dark);
}

/* =========================================================
   Auth page (login, device_pair)
   ========================================================= */
[data-theme="dark"] .auth-page {
    background: linear-gradient(160deg, #1e1b4b 0%, #0f172a 100%);
}

[data-theme="dark"] .auth-card {
    background: var(--surface);
    color: var(--text);
}

[data-theme="dark"] .auth-card h2 {
    color: var(--text);
}

[data-theme="dark"] .auth-card .subtitle {
    color: var(--text-muted);
}

/* =========================================================
   Toggle switch (spécifique au bouton dark mode)
   ========================================================= */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--surface-2);
    cursor: pointer;
    transition: all .2s;
    user-select: none;
    border: 1px solid transparent;
    width: 100%;
}

.theme-toggle:hover {
    border-color: var(--primary);
}

.theme-toggle-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--primary-light);
    color: var(--primary);
    transition: all .2s;
    flex-shrink: 0;
}

[data-theme="dark"] .theme-toggle-icon {
    background: rgba(251, 191, 36, .15);
    color: #fbbf24;
}

.theme-toggle-body {
    flex: 1;
    min-width: 0;
}

.theme-toggle-body h6 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--text);
}

.theme-toggle-body p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.theme-toggle-switch {
    width: 44px;
    height: 24px;
    border-radius: 20px;
    background: var(--border);
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
}

.theme-toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .25s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

[data-theme="dark"] .theme-toggle-switch {
    background: var(--primary);
}

[data-theme="dark"] .theme-toggle-switch::after {
    transform: translateX(20px);
}

/* =========================================================
   Correction forcée sur certains éléments codés en dur
   ========================================================= */
[data-theme="dark"] .hero {
    background: linear-gradient(135deg, var(--primary-dark), #312e81);
}

[data-theme="dark"] .hero::before,
[data-theme="dark"] .hero::after {
    background: rgba(255,255,255,.05);
}

/* Scrollbar sombre */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--surface-2);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* Sélection */
[data-theme="dark"] ::selection {
    background: var(--primary);
    color: #fff;
}

/* =========================================================
   Transitions douces
   ========================================================= */
body, .card-modern, .app-bar, .bottom-nav, .stat-card, 
.list-item, .form-control-modern, .modal-content {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Éviter le flash blanc au chargement */
html.dark-preload body {
    background: #0f172a;
}