/* ============================================
   Dark Mode CSS — Complete dark theme
   ============================================ */

[data-theme="dark"] {
    /* Override colors */
    --surface: #1E1E1E;
    --surface-secondary: #252525;
    --surface-tertiary: #2D2D2D;
    --background: #141414;
    --text-primary: #E4E4E4;
    --text-secondary: #A0A0A0;
    --text-tertiary: #6B6B6B;
    --border: #333333;
    --border-strong: #444444;
    --divider: #2A2A2A;
    
    /* Neutral overrides */
    --gray-50: #1A1A1A;
    --gray-100: #222222;
    --gray-200: #2D2D2D;
    --gray-300: #3D3D3D;
    --gray-400: #555555;
    --gray-500: #717171;
    --gray-600: #999999;
    --gray-700: #B3B3B3;
    --gray-800: #CCCCCC;
    --gray-900: #E4E4E4;
    
    /* Semantic light backgrounds */
    --primary-alpha: rgba(0, 120, 212, 0.15);
    --primary-light: rgba(0, 120, 212, 0.12);
    --success-light: rgba(16, 124, 16, 0.12);
    --warning-light: rgba(255, 185, 0, 0.12);
    --danger-light: rgba(209, 52, 56, 0.12);
    --info-light: rgba(0, 120, 212, 0.12);
    
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.35), 0 4px 6px rgba(0,0,0,0.2);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.4), 0 8px 10px rgba(0,0,0,0.2);
}

/* ---- Login dark ---- */
[data-theme="dark"] .login-card {
    background: #1E1E1E;
    border: 1px solid #333;
}

[data-theme="dark"] .login-form .form-control {
    background: #252525;
    border-color: #333;
    color: #E4E4E4;
}

[data-theme="dark"] .login-form .form-control:focus {
    background: #1E1E1E;
}

/* ---- Sidebar dark adjustments ---- */
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #111318 0%, #0d0f14 100%);
    border-right: 1px solid #1a1d25;
}

/* ---- Topbar dark ---- */
[data-theme="dark"] .topbar {
    background: #1E1E1E;
    border-bottom-color: #333;
}

[data-theme="dark"] .topbar-search {
    background: #252525;
}

[data-theme="dark"] .topbar-search:focus-within {
    background: #1E1E1E;
}

[data-theme="dark"] .topbar-search input {
    color: #E4E4E4;
}

/* ---- Cards dark ---- */
[data-theme="dark"] .card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .status-item {
    background: #1E1E1E;
    border-color: #333;
}

/* ---- Table dark ---- */
[data-theme="dark"] .table thead th {
    background: #252525;
    color: #A0A0A0;
    border-bottom-color: #333;
}

[data-theme="dark"] .table tbody td {
    border-bottom-color: #2A2A2A;
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(0, 120, 212, 0.1);
}

/* ---- Form controls dark ---- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: #252525;
    border-color: #333;
    color: #E4E4E4;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: #1E1E1E;
    border-color: var(--primary);
}

/* ---- Photo capture dark ---- */
[data-theme="dark"] .photo-capture {
    background: #252525;
    border-color: #444;
}

[data-theme="dark"] .photo-capture:hover {
    border-color: var(--primary);
    background: rgba(0, 120, 212, 0.08);
}

/* ---- Notification panel dark ---- */
[data-theme="dark"] .notification-panel {
    background: #1E1E1E;
    border-color: #333;
}

[data-theme="dark"] .notification-item:hover {
    background: #252525;
}

/* ---- Search results dark ---- */
[data-theme="dark"] .search-results {
    background: #1E1E1E;
    border-color: #333;
}

[data-theme="dark"] .search-result-item:hover {
    background: rgba(0, 120, 212, 0.1);
}

/* ---- Toast dark ---- */
[data-theme="dark"] .toast-custom {
    background: #252525;
    border-color: #333;
}

/* ---- Filters dark ---- */
[data-theme="dark"] .filters-bar {
    background: #1E1E1E;
    border-color: #333;
}

/* ---- Modal dark ---- */
[data-theme="dark"] .modal-content {
    background: #1E1E1E;
    color: #E4E4E4;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: #333;
}

/* ---- Action cards dark ---- */
[data-theme="dark"] .action-card {
    background: #1E1E1E;
    border-color: #333;
}

[data-theme="dark"] .action-card:hover {
    background: #252525;
}

[data-theme="dark"] .action-card.done {
    background: rgba(16, 124, 16, 0.08);
    border-color: var(--success);
}

/* ---- Difference display dark ---- */
[data-theme="dark"] .difference-display {
    background: #252525;
    border-color: #333;
}

[data-theme="dark"] .difference-display.has-diff {
    background: rgba(209, 52, 56, 0.08);
    border-color: var(--danger);
}

/* ---- Offline banner dark ---- */
[data-theme="dark"] .offline-banner {
    background: #5a4e00;
    color: #FFB900;
}

/* ---- Bootstrap overrides for dark ---- */
[data-theme="dark"] .btn-close {
    filter: invert(1);
}

[data-theme="dark"] .alert-danger {
    background: rgba(209, 52, 56, 0.15);
    color: #ff6b6f;
    border-color: rgba(209, 52, 56, 0.3);
}

/* Theme toggle icon swap */
[data-theme="dark"] .btn-theme i::before {
    content: '\F5A2'; /* bi-sun-fill */
}

[data-theme="dark"] .btn-theme span {
    visibility: visible;
}