/* ═══════════════════════════════════════════
   TrainControl — Dark Mode
   ═══════════════════════════════════════════ */

body.dark {
    --bg-app:         #1a1a2e;
    --bg-card:        rgba(40, 40, 65, 0.72);
    --bg-card-solid:  #252540;
    --bg-sidebar:     rgba(30, 30, 50, 0.55);
    --bg-header:      rgba(26, 26, 46, 0.75);
    --bg-footer:      rgba(26, 26, 46, 0.75);
    --bg-input:       rgba(255, 255, 255, 0.06);
    --bg-slot-empty:  rgba(255, 255, 255, 0.03);

    --text-primary:   #e8e6f0;
    --text-secondary: #9a96b0;
    --text-tertiary:  #6b6880;
    --text-on-accent: #ffffff;

    --border-light:   rgba(255, 255, 255, 0.06);
    --border-medium:  rgba(255, 255, 255, 0.10);
    --border-card:    rgba(255, 255, 255, 0.08);

    --shadow-card:    0 2px 20px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(255,255,255,0.04) inset;
    --shadow-raised:  0 8px 32px rgba(0, 0, 0, 0.30);
    --shadow-modal:   0 24px 80px rgba(0, 0, 0, 0.50);

    --glass-bg:       rgba(40, 40, 65, 0.55);
    --glass-border:   rgba(255, 255, 255, 0.08);
}

body.dark .header-title {
    color: var(--text-primary);
}

body.dark .btn-connect {
    color: var(--text-primary);
}

body.dark .sidebar-loco-photo {
    background: linear-gradient(135deg, #4a6aaa, #2e4578);
}

body.dark input[type="text"],
body.dark input[type="number"] {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

body.dark .btn-function {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}
body.dark .btn-function:hover {
    background: rgba(255,255,255,0.10);
}
body.dark .btn-function.active {
    background: var(--tc-blue);
    color: var(--text-on-accent);
    border-color: var(--tc-blue);
}

body.dark .btn-card-action:hover {
    background: rgba(255,255,255,0.08);
}

body.dark .btn-modal-close {
    background: rgba(255,255,255,0.08);
}
body.dark .btn-modal-close:hover {
    background: rgba(255,255,255,0.14);
}

body.dark .btn-secondary {
    color: var(--text-secondary);
    border-color: rgba(255,255,255,0.12);
}
body.dark .btn-secondary:hover {
    background: rgba(255,255,255,0.05);
}

body.dark ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
}
body.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.20);
}