/* ============================================================
   ESmont Dashboard — Dark-mode overrides
   Single source of truth for all dark-mode rules.
   Selector: html.dark (toggled via document.documentElement)
   ============================================================ */

/* --- Base --- */
html.dark body {
    background: var(--background);
    color: var(--foreground);
}

/* --- Header --- */
html.dark header#header {
    background: var(--card);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.6);
}

/* --- Logo --- */
html.dark .logo svg {
    fill: var(--brand);
}
html.dark .logo h1 {
    color: var(--brand);
}
html.dark .logo-image .logocls-1,
html.dark .logo-image .logocls-3 {
    fill: #d5d5d5;
}

/* --- Navigation --- */
html.dark .nav-button {
    background-color: #3a3a3a;
    color: #e0e0e0;
}
html.dark .nav-button:hover {
    background-color: #4a4a4a;
}

/* --- Tabs --- */
html.dark .tab {
    background-color: var(--muted);
    color: var(--muted-foreground);
    box-shadow: none;
}
html.dark .tab.active {
    background-image: linear-gradient(195deg, #10b981, #059669);
    color: #fff;
}
html.dark .tab:hover {
    background-color: #4a4a4a;
}

/* --- Cards --- */
html.dark .card,
html.dark .dashboard-card {
    background: var(--card);
    border-color: var(--border);
    box-shadow: var(--shadow-md) !important;
}
html.dark .card:hover,
html.dark .dashboard-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
html.dark .card h2,
html.dark .card h3,
html.dark .card-body h3,
html.dark .production-card h3 {
    color: var(--foreground);
}
html.dark .card-body p,
html.dark .card-link,
html.dark .info-label {
    color: var(--muted-foreground);
}
html.dark .card-link:hover {
    color: var(--foreground);
}
html.dark .info-value {
    color: var(--foreground);
}
html.dark .card-head {
    border-bottom-color: var(--border);
}
html.dark .card-footer {
    border-top-color: var(--border);
}
html.dark .card.card--new-label {
    border: 4px solid var(--status-in-progress);
}

/* --- Label button --- */
html.dark .label-btn--has {
    color: #4ade80;
}
html.dark .label-btn--has svg {
    stroke: #4ade80;
}

/* --- Skeleton --- */
html.dark .skel-card {
    background: var(--card);
    border-color: var(--border);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.4);
}
html.dark .skel-line {
    background: var(--border);
    background-image: linear-gradient(90deg, var(--border) 0px, var(--background) 40px, var(--border) 80px);
}

/* --- Buttons --- */
html.dark button {
    background: var(--muted);
    color: var(--muted-foreground);
    box-shadow: none;
}
html.dark button:hover {
    box-shadow: 0 8px 14px -8px rgba(0,0,0,.6);
}
html.dark .card button.primary {
    color: #fff;
    background-image: linear-gradient(195deg, #66bb6a, #43a047);
}
html.dark .card button.warn {
    color: #fff;
    background-image: linear-gradient(195deg, #fbbf24, #d97706);
}
html.dark .card button.warn:hover {
    box-shadow: 0 8px 14px -8px rgba(217,119,6,.5), 0 3px 18px 0 rgba(217,119,6,.2), 0 7px 8px -4px rgba(217,119,6,.3);
}
html.dark button.btn-outline-secondary {
    border-color: #334155;
    color: #94a3b8;
}
html.dark button.btn-outline-secondary:hover {
    color: var(--muted-foreground);
    opacity: .9;
}

/* --- Icon buttons --- */
html.dark .icon-btn {
    background: var(--muted);
    color: var(--muted-foreground);
    box-shadow: none;
}
html.dark .icon-btn:hover {
    box-shadow: 0 8px 14px -8px rgba(0,0,0,.6);
}

/* --- Inputs & forms --- */
html.dark input,
html.dark textarea {
    background: var(--background);
    color: var(--foreground);
    border-color: var(--border) !important;
}
html.dark .form-group label {
    color: var(--foreground);
}
html.dark .form-group input,
html.dark .form-group select,
html.dark .form-group textarea {
    background: #3a3a3a;
    border-color: #4a4a4a;
    color: #e0e0e0;
}
html.dark .form-group input:focus,
html.dark .form-group select:focus,
html.dark .form-group textarea:focus {
    border-color: #66BB6A;
    box-shadow: 0 0 0 3px rgba(102,187,106,.2);
}

/* --- Note --- */
html.dark .note {
    background: var(--background);
    border-color: var(--border);
}

/* --- Modals --- */
html.dark .modal-backdrop {
    background: rgba(0,0,0,.7);
}
html.dark .modal-content {
    background: #1a1f2e;
    border-color: var(--border);
}
html.dark .modal header {
    background: var(--card);
    border-bottom-color: var(--border) !important;
}
html.dark .modal .footer {
    background: var(--card);
    border-top-color: var(--border);
}
html.dark .modal-header {
    border-bottom-color: var(--border-subtle);
}
html.dark .modal-header h2 {
    color: var(--foreground);
}
html.dark .modal-close {
    color: #6b7280;
}
html.dark .modal-close:hover {
    color: var(--foreground);
}
html.dark .modal-body {
    color: var(--foreground);
}

/* --- Panel / Row --- */
html.dark .panel {
    border-color: var(--border);
}
html.dark .row {
    border-color: var(--border);
}

/* --- Tables --- */
html.dark table {
    background: #2d2d2d;
}
html.dark thead {
    background: #3a3a3a;
}
html.dark th {
    color: #e0e0e0;
    border-bottom-color: #4a4a4a;
}
html.dark td {
    color: #e0e0e0;
    border-bottom-color: #3a3a3a;
}
html.dark tr:hover {
    background: #3a3a3a;
}

/* --- Production card --- */
html.dark .production-card {
    background: #2d2d2d;
}

/* --- Overview / no-data --- */
html.dark .overview-section h3 {
    color: var(--foreground);
}
html.dark .overview-table {
    background: #141824;
    border-color: var(--border-subtle);
}
html.dark .overview-table thead {
    background: #1f2637;
}
html.dark .overview-table th {
    color: var(--foreground);
    border-bottom-color: var(--border-subtle);
}
html.dark .overview-table td {
    color: #9ca3af;
    border-bottom-color: var(--border-subtle);
}
html.dark .overview-table tbody tr:hover {
    background: #1f2637;
}
html.dark .overview-table .total-row {
    background: #1a2942;
    border-top-color: #3b82f6;
}
html.dark .overview-table .total-row:hover {
    background: #1f2f4a;
}
html.dark .no-data {
    color: #6b7280;
    background: #1f2637;
}

/* --- Cameras --- */
html.dark .camera-item {
    background: var(--card);
    border-color: var(--border);
}
html.dark .camera-header {
    background: var(--muted);
    border-bottom-color: #334155;
    color: var(--foreground);
}

/* --- Ski length selector --- */
html.dark #skiLengthSelector {
    background: #1f2637;
    border-color: var(--border-subtle);
    color: var(--foreground);
}
html.dark #skiLengthSelector:hover {
    border-color: #3b82f6;
}
html.dark #skiLengthSelector:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

/* --- Sidenav --- */
html.dark #sidenav .logocls-1,
html.dark #sidenav .logocls-3,
html.dark .mobile-menu .logocls-1,
html.dark .mobile-menu .logocls-3 { fill: #dfe3ec; }
html.dark .sn-item.on { background: rgba(153, 204, 51, .22); color: var(--foreground); }
html.dark .sn-item.on .sn-icon svg { stroke: var(--foreground); }

/* --- Board toolbar + status chips --- */
html.dark #board-toolbar .board-actions input {
    background: var(--muted);
    color: var(--foreground);
    border-color: var(--border);
}
html.dark .status-chip--queued      { background: rgba(245, 158, 11, .18); color: #fbbf24; }
html.dark .status-chip--in_progress { background: rgba(73, 163, 241, .18); color: #7cc0f8; }
html.dark .status-chip--done        { background: rgba(34, 197, 94, .18);  color: #6ee7a0; }

/* Status stripes must survive the generic html.dark .card border override */
html.dark .card.card--queued      { border-top-color: var(--status-queued); }
html.dark .card.card--in_progress { border-top-color: var(--status-in-progress); }
html.dark .card.card--done        { border-top-color: var(--status-done); }

/* Sidenav buttons: beat the generic html.dark button background */
html.dark #sidenav button { background: none; }
html.dark #sidenav .sn-foot-btn:hover,
html.dark #sidenav .sn-item:hover { background: var(--muted); }