/* THEME TOGGLE BUTTON */
.theme-toggle {
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    background: none;
    border: 2px solid var(--ukraine-yellow);
    background-color: var(--ukraine-blue);
    padding: 8px 12px;
}
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }
[data-theme="dark"] .theme-icon-light { display: none; }

/* ===== DARK MODE VARIABLE OVERRIDES ===== */
[data-theme="dark"] {
    --ukraine-blue: #3388dd;
    --bg-primary: #1a1a2e;
    --bg-secondary: #232340;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b0;
    --text-light: #ffffff;
    --text-dark: #e0e0e0;
    --success: #3cba5c;
    --warning: #ffc933;
    --danger: #e85d6f;
    --info: #3bc4d8;
    --job-full: #1e3a1e;
    --job-partial: #3a3520;
    --job-understaffed: #3a1e1e;
    --border-color: #3a3a5c;
    --shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* ===== DARK MODE COMPONENT OVERRIDES ===== */

/* Body and page background */
[data-theme="dark"] body {
    background-color: #1a1a2e;
    color: #e0e0e0;
}

/* Container */
[data-theme="dark"] .container {
    background-color: #232340;
}

/* Header — darker Ukrainian flag tones */
[data-theme="dark"] .header {
    background: linear-gradient(180deg, #1a3a6e 0%, #1a3a6e 50%, #7a6000 50%, #7a6000 100%);
}
[data-theme="dark"] .header-title {
    color: #ffd700;
}
[data-theme="dark"] .header-subtitle {
    background-color: rgba(255, 215, 0, 0.8);
    color: #1a1a2e;
}

/* Navigation */
[data-theme="dark"] .nav-link {
    background-color: #1a3a6e;
    color: #ffd700;
    border-color: #ffd700;
}
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link:active {
    background-color: #7a6000;
    color: #e0e0e0;
    border-color: #3388dd;
}
[data-theme="dark"] .nav-link.active {
    background-color: #7a6000;
    color: #ffd700;
}
[data-theme="dark"] .nav-dropdown-toggle {
    background-color: #1a3a6e;
    color: #ffd700;
    border-color: #ffd700;
}
[data-theme="dark"] .nav-dropdown-toggle:hover,
[data-theme="dark"] .nav-dropdown-toggle.active {
    background-color: #7a6000;
    color: #ffd700;
    border-color: #3388dd;
}
[data-theme="dark"] .nav-dropdown-content {
    background-color: #2a2a4a;
    border-color: #3388dd;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}
[data-theme="dark"] .nav-dropdown-item {
    color: #e0e0e0;
    border-bottom-color: rgba(51, 136, 221, 0.2);
}
[data-theme="dark"] .nav-dropdown-item:hover {
    background-color: #3a3a5c;
    color: #ffd700;
}
[data-theme="dark"] .nav-dropdown-item.active {
    background-color: rgba(51, 136, 221, 0.2);
    color: #3bc4d8;
}
[data-theme="dark"] .nav-dropdown-divider {
    background-color: #3a3a5c;
    opacity: 1;
}
[data-theme="dark"] .nav-subgroup,
[data-theme="dark"] .nav-subgroup-item {
    border-bottom-color: rgba(51, 136, 221, 0.2);
}
[data-theme="dark"] .nav-subgroup-summary {
    color: #e0e0e0;
}
[data-theme="dark"] .nav-subgroup-summary:hover {
    background-color: #3a3a5c;
    color: #ffd700;
}

/* Theme toggle button */
[data-theme="dark"] .theme-toggle {
    background-color: #1a3a6e;
    border-color: #ffd700;
}

/* Day headers */
[data-theme="dark"] .day-header {
    background-color: #2a2a4a;
    color: #e0e0e0;
}
[data-theme="dark"] .day-header.today {
    background-color: #3cba5c;
    color: #ffffff;
}
[data-theme="dark"] .day-header.past {
    background-color: #3a3a5c;
    color: #a0a0b0;
}

/* Job sections */
[data-theme="dark"] .job-section {
    background-color: #232340;
    border-left-color: #3a3a5c;
}
[data-theme="dark"] .job-section.job-full {
    background-color: #1e3a1e;
    border-left-color: #3cba5c;
}
[data-theme="dark"] .job-section.job-partial {
    background-color: #3a3520;
    border-left-color: #ffc933;
}
[data-theme="dark"] .job-section.job-understaffed {
    background-color: #3a1e1e;
    border-left-color: #e85d6f;
}

/* Buttons */
[data-theme="dark"] .btn {
    background-color: #232340;
    color: #e0e0e0;
    border-color: #3a3a5c;
}
[data-theme="dark"] .btn-primary {
    background-color: #1a3a6e;
    color: #ffd700;
    border-color: #ffd700;
}
[data-theme="dark"] .btn-primary:hover {
    background-color: #7a6000;
    color: #e0e0e0;
    border-color: #3388dd;
}
[data-theme="dark"] .btn-secondary {
    background-color: #2a2a4a;
    color: #a0a0b0;
    border-color: #3a3a5c;
}
/* MISSING UNTIL 2026-08-25. `[data-theme="dark"] .btn` above paints EVERY button
   #232340, and overrides existed only for .btn-primary, .btn-secondary, .btn-admin
   and .btn-small. So in dark mode a green Save, a red Delete and a neutral Cancel
   were the same grey block.

   btn-danger is the one that mattered: 8 uses, and a destructive button that looks
   exactly like a harmless one is a hazard, not a blemish. Found while the Add a job
   panel's green submit came out grey (#116 follow-up).

   Colours are the dark --success / --danger already declared at the top of this
   file, so the two themes stay recognisably the same buttons. */
[data-theme="dark"] .btn-success {
    background-color: #2e8b46;
    color: #ffffff;
    border-color: #3cba5c;
}
[data-theme="dark"] .btn-success:hover {
    background-color: #3cba5c;
    color: #10240f;
}
[data-theme="dark"] .btn-danger {
    background-color: #8e2f3c;
    color: #ffffff;
    border-color: #e85d6f;
}
[data-theme="dark"] .btn-danger:hover {
    background-color: #e85d6f;
    color: #2a0d11;
}

/* The outline variants must NOT be filled — that is the whole point of them. The
   blanket .btn rule filled them with #232340, so an outline button and a solid one
   were indistinguishable. */
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-success,
[data-theme="dark"] .btn-outline-danger {
    background-color: transparent;
}
[data-theme="dark"] .btn-outline-primary { color: #7ab6f5; border-color: #3388dd; }
[data-theme="dark"] .btn-outline-secondary { color: #b8b8c8; border-color: #3a3a5c; }
[data-theme="dark"] .btn-outline-success { color: #6fd88a; border-color: #3cba5c; }
[data-theme="dark"] .btn-outline-danger { color: #f0899a; border-color: #e85d6f; }

[data-theme="dark"] .btn-outline-primary:hover { background-color: #1a3a6e; color: #ffd700; }
[data-theme="dark"] .btn-outline-secondary:hover { background-color: #2a2a4a; }
[data-theme="dark"] .btn-outline-success:hover { background-color: #1e7a30; color: #ffffff; }
[data-theme="dark"] .btn-outline-danger:hover { background-color: #8e2f3c; color: #ffffff; }

[data-theme="dark"] .btn-admin {
    background-color: #3a1e3a;
    color: #e0a0e0;
    border-color: #6a3a6a;
}
[data-theme="dark"] .btn-small {
    background-color: #1a3a6e;
    color: #ffd700;
    border-color: #3388dd;
}

/* Form elements */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #1e1e38;
    border-color: #3a3a5c;
    color: #e0e0e0;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: #3388dd;
    box-shadow: 0 0 0 2px rgba(51, 136, 221, 0.3);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #8888a0;
}
[data-theme="dark"] label {
    color: #e0e0e0;
}
[data-theme="dark"] input[type="checkbox"] {
    accent-color: #3388dd;
}

/* Alerts */
[data-theme="dark"] .alert-success {
    background-color: #1a3a1e;
    color: #a0e0a0;
    border-color: #3cba5c;
    border-left-color: #3cba5c;
}
[data-theme="dark"] .alert-warning {
    background-color: #3a3010;
    color: #ffd080;
    border-color: #ffc933;
    border-left-color: #ffc933;
}
[data-theme="dark"] .alert-error {
    background-color: #3a1a1a;
    color: #f0a0a0;
    border-color: #e85d6f;
}
[data-theme="dark"] .alert-info {
    background-color: #0e2a30;
    color: #80d8e8;
    border-color: #3bc4d8;
    border-left-color: #3bc4d8;
}

/* Error modal */
[data-theme="dark"] .error-modal-content {
    background-color: #232340;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .error-modal-header {
    border-bottom-color: #3a3a5c;
}
[data-theme="dark"] .error-modal-header h3 {
    color: #e85d6f;
}
[data-theme="dark"] .error-modal-close {
    color: #a0a0b0;
}
[data-theme="dark"] .error-modal-close:hover {
    background-color: #3a3a5c;
    color: #e85d6f;
}
[data-theme="dark"] .error-modal-body {
    color: #e0e0e0;
}

/* Tables */
[data-theme="dark"] table {
    background-color: #232340;
    color: #e0e0e0;
}
[data-theme="dark"] th {
    background-color: #2a2a4a;
    color: #e0e0e0;
    border-color: #3a3a5c;
}
[data-theme="dark"] td {
    border-color: #3a3a5c;
    color: #e0e0e0;
}
[data-theme="dark"] tr:nth-child(even) {
    background-color: #1e1e38;
}
[data-theme="dark"] tr:hover {
    background-color: #2a2a4a;
}

/* Links */
[data-theme="dark"] a {
    color: #3bc4d8;
}
[data-theme="dark"] a:hover {
    color: #ffd700;
}

/* Context menu */
[data-theme="dark"] .context-menu-content {
    background-color: #2a2a4a;
    border-color: rgba(51, 136, 221, 0.4);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
[data-theme="dark"] .context-menu-item {
    color: #e0e0e0;
    border-bottom-color: rgba(51, 136, 221, 0.15);
}
[data-theme="dark"] .context-menu-item:hover {
    background-color: #3a3a5c;
    color: #ffd700;
}
[data-theme="dark"] .context-menu-item.danger {
    color: #e85d6f;
}
[data-theme="dark"] .context-menu-item.danger:hover {
    background-color: #e85d6f;
    color: #ffffff;
}

/* FAB mini buttons */
[data-theme="dark"] .fab-mini {
    background-color: #232340;
    color: #3388dd;
    border-color: #3388dd;
}
[data-theme="dark"] .fab-mini:hover {
    background-color: #1a3a6e;
    color: #ffd700;
    border-color: #ffd700;
}

/* General hardcoded color targets */
[data-theme="dark"] .form-group {
    color: #e0e0e0;
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
    background-color: #2a2a4a;
    color: #a0a0b0;
}
[data-theme="dark"] .breadcrumb a {
    color: #3bc4d8;
}

/* Pagination */
[data-theme="dark"] .pagination a,
[data-theme="dark"] .page-link {
    background-color: #2a2a4a;
    color: #e0e0e0;
    border-color: #3a3a5c;
}
[data-theme="dark"] .pagination a:hover,
[data-theme="dark"] .page-link:hover {
    background-color: #3a3a5c;
    color: #ffd700;
}
[data-theme="dark"] .page-item.active .page-link {
    background-color: #1a3a6e;
    color: #ffd700;
    border-color: #3388dd;
}

/* Status badges */
[data-theme="dark"] .status-badge {
    filter: brightness(0.85) saturate(0.8);
}

/* Tab navigation */
[data-theme="dark"] .tab,
[data-theme="dark"] .tab-link {
    background-color: #2a2a4a;
    color: #a0a0b0;
    border-color: #3a3a5c;
}
[data-theme="dark"] .tab.active,
[data-theme="dark"] .tab-link.active {
    background-color: #1a3a6e;
    color: #ffd700;
}

/* Flash messages */
[data-theme="dark"] .flash-message,
[data-theme="dark"] .flash-success {
    background-color: #1a3a1e;
    color: #a0e0a0;
    border-color: #3cba5c;
}
[data-theme="dark"] .flash-error,
[data-theme="dark"] .flash-warning {
    background-color: #3a3010;
    color: #ffd080;
    border-color: #ffc933;
}

/* ===== UTILITY & COMPONENT DARK MODE OVERRIDES ===== */

/* Shadow utility */
[data-theme="dark"] .shadow-sm {
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Background utilities */
[data-theme="dark"] .bg-surface {
    background-color: #2a2a4a;
}

/* Card / Card-compact */
[data-theme="dark"] .card,
[data-theme="dark"] .card-compact {
    background-color: #232340;
    color: #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Section headings — tone down for dark */
[data-theme="dark"] .section-heading--danger { background-color: #a02030; }
[data-theme="dark"] .section-heading--warning { background-color: #b8960a; color: #e0e0e0; }
[data-theme="dark"] .section-heading--info { background-color: #0e7a8a; }
[data-theme="dark"] .section-heading--success { background-color: #1e7a30; }
[data-theme="dark"] .section-heading--blue { background-color: #1a3a6e; }
[data-theme="dark"] .section-heading--purple { background-color: #4a2a7a; }

/* Stat card */
[data-theme="dark"] .stat-card {
    background-color: #232340;
    color: #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
[data-theme="dark"] .stat-card--success { border-top-color: #3cba5c; }
[data-theme="dark"] .stat-card--danger { border-top-color: #e85d6f; }
[data-theme="dark"] .stat-card--info { border-top-color: #3bc4d8; }
[data-theme="dark"] .stat-card--warning { border-top-color: #ffc933; }

/* Badge dark mode */
[data-theme="dark"] .badge--success { background-color: #1a3a1e; color: #a0e0a0; }
[data-theme="dark"] .badge--danger { background-color: #3a1a1a; color: #f0a0a0; }
[data-theme="dark"] .badge--warning { background-color: #3a3010; color: #ffd080; }
[data-theme="dark"] .badge--info { background-color: #0e2a30; color: #80d8e8; }

/* Action buttons dark mode */
[data-theme="dark"] .btn-action--green { background-color: #1e7a30; }
[data-theme="dark"] .btn-action--green:hover { background-color: #238a38; }
[data-theme="dark"] .btn-action--blue { background-color: #1a5a9e; }
[data-theme="dark"] .btn-action--blue:hover { background-color: #2070b8; }
[data-theme="dark"] .btn-action--purple { background-color: #4a2a7a; }
[data-theme="dark"] .btn-action--purple:hover { background-color: #5a3a8a; }
[data-theme="dark"] .btn-action--ukr-blue { background-color: #1a3a6e; }
[data-theme="dark"] .btn-action--ukr-blue:hover { background-color: #2a4a7e; }
[data-theme="dark"] .btn-action--red { background-color: #a02030; }
[data-theme="dark"] .btn-action--red:hover { background-color: #b82838; }
[data-theme="dark"] .btn-action--gray { background-color: #3a3a5c; }
[data-theme="dark"] .btn-action--gray:hover { background-color: #4a4a6c; }

/* Admin link dark mode */
[data-theme="dark"] .admin-link {
    background-color: #2a2a4a;
    color: #e0e0e0;
}
[data-theme="dark"] .admin-link:hover {
    background-color: #3a3a5c;
}

/* Cards with hardcoded white backgrounds */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color: #ffffff"] {
    background-color: #232340 !important;
    color: #e0e0e0 !important;
}

/* Override hardcoded f8f9fa backgrounds (light gray) — both longhand and shorthand */
[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background: #f8f9fa"] {
    background-color: #2a2a4a !important;
}

/* Override hardcoded e8f5e9 (light green) backgrounds — longhand and shorthand */
[data-theme="dark"] [style*="background-color: #e8f5e9"],
[data-theme="dark"] [style*="background: #e8f5e9"] {
    background-color: #1a3a1e !important;
}
[data-theme="dark"] [style*="background-color: #e8f4fd"],
[data-theme="dark"] [style*="background: #e8f4fd"],
[data-theme="dark"] [style*="background-color: #e7f3ff"],
[data-theme="dark"] [style*="background: #e7f3ff"] {
    background-color: #0e1e30 !important;
}

/* Override hardcoded fff3cd (warning yellow) backgrounds — longhand and shorthand */
[data-theme="dark"] [style*="background-color: #fff3cd"],
[data-theme="dark"] [style*="background: #fff3cd"] {
    background-color: #3a3010 !important;
}
[data-theme="dark"] [style*="background-color: #f8d7da"],
[data-theme="dark"] [style*="background: #f8d7da"],
[data-theme="dark"] [style*="background-color: #ffe6e6"],
[data-theme="dark"] [style*="background: #ffe6e6"] {
    background-color: #3a1a1a !important;
}

/* Override #e9ecef and #f1f3f4 (light grays used in headers/cards) */
[data-theme="dark"] [style*="background-color: #e9ecef"],
[data-theme="dark"] [style*="background: #e9ecef"],
[data-theme="dark"] [style*="background-color: #f1f3f4"],
[data-theme="dark"] [style*="background: #f1f3f4"] {
    background-color: #2a2a4a !important;
}

/* Override hardcoded dark text colors on inline-styled elements */
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color: #212529"] {
    color: #e0e0e0 !important;
}
[data-theme="dark"] [style*="color: #495057"] {
    color: #c0c0d0 !important;
}
[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color: #999"],
[data-theme="dark"] [style*="color: #adb5bd"] {
    color: #8888a0 !important;
}

/* Admin panel card headings that use Ukraine colors directly */
[data-theme="dark"] [style*="color: #0057b7"] {
    color: #3388dd !important;
}
[data-theme="dark"] [style*="color: #0056b3"] {
    color: #3388dd !important;
}
[data-theme="dark"] [style*="color: #004085"] {
    color: #80b8e8 !important;
}
[data-theme="dark"] [style*="color: #2e7d32"] {
    color: #3cba5c !important;
}
[data-theme="dark"] [style*="color: #856404"] {
    color: #ffc933 !important;
}
[data-theme="dark"] [style*="color: #721c24"] {
    color: #f0a0a0 !important;
}
[data-theme="dark"] [style*="color: #cc0000"] {
    color: #e85d6f !important;
}
[data-theme="dark"] [style*="color: #1565c0"] {
    color: #3bc4d8 !important;
}

/* Dark green (#155724) — Bootstrap success text, INVISIBLE on dark backgrounds */
[data-theme="dark"] [style*="color: #155724"] {
    color: #4caf50 !important;
}

/* Dark teal (#0c5460) — Bootstrap info text, INVISIBLE on dark backgrounds */
[data-theme="dark"] [style*="color: #0c5460"] {
    color: #26c6da !important;
}

/* Blue (#007bff) — Bootstrap primary, poor contrast on dark */
[data-theme="dark"] [style*="color: #007bff"] {
    color: #5dade2 !important;
}

/* Gray (#888) — low contrast on dark */
[data-theme="dark"] [style*="color: #888"] {
    color: #8888a0 !important;
}

/* Green (#28a745) — readable but brighten for dark mode */
[data-theme="dark"] [style*="color: #28a745"] {
    color: #4caf50 !important;
}

/* Red (#dc3545) — readable but brighten for dark mode */
[data-theme="dark"] [style*="color: #dc3545"] {
    color: #e85d6f !important;
}

/* Teal (#17a2b8) — Bootstrap info color, used as text and background */
[data-theme="dark"] [style*="color: #17a2b8"] {
    color: #3bc4d8 !important;
}
[data-theme="dark"] [style*="background: #17a2b8"],
[data-theme="dark"] [style*="background-color: #17a2b8"] {
    background-color: #1a3a4a !important;
}

/* Amber (#ffc107) — Bootstrap warning, used as text and background */
[data-theme="dark"] [style*="color: #ffc107"] {
    color: #ffd700 !important;
}
[data-theme="dark"] [style*="background: #ffc107"],
[data-theme="dark"] [style*="background-color: #ffc107"] {
    background-color: #5c5030 !important;
}

/* Bootstrap info background (#d1ecf1) */
[data-theme="dark"] [style*="background: #d1ecf1"],
[data-theme="dark"] [style*="background-color: #d1ecf1"] {
    background-color: #1a2a3a !important;
}

/* Bootstrap success background (#d4edda) */
[data-theme="dark"] [style*="background: #d4edda"],
[data-theme="dark"] [style*="background-color: #d4edda"] {
    background-color: #1a3a1e !important;
}

/* Light blue background (#e3f2fd) — Material info bg */
[data-theme="dark"] [style*="background: #e3f2fd"],
[data-theme="dark"] [style*="background-color: #e3f2fd"] {
    background-color: #1e2a3a !important;
}

/* Blue (#1976d2) — Material primary blue */
[data-theme="dark"] [style*="color: #1976d2"] {
    color: #3bc4d8 !important;
}

/* Blue (#2196f3) — Material blue */
[data-theme="dark"] [style*="color: #2196f3"] {
    color: #5dade2 !important;
}

/* Person items in schedule */
[data-theme="dark"] .person-item {
    color: #e0e0e0;
}
[data-theme="dark"] .person-item.admin {
    font-weight: bold;
    color: #ffd700;
}
[data-theme="dark"] .person-item.invisible {
    color: #8888a0;
    opacity: 0.7;
}

/* Add form selects and buttons inside schedule */
[data-theme="dark"] .add-form select,
[data-theme="dark"] .adhoc-add-form select {
    background-color: #1e1e38;
    border-color: #3a3a5c;
    color: #e0e0e0;
}

/* User edit page - volunteer name in page header */
[data-theme="dark"] .page-header h3 {
    color: #e0e0e0 !important;
}

/* Telegram verification code flash message */
[data-theme="dark"] .telegram-code-alert {
    background: #1a2a3a !important;
    border-color: #4a8abf !important;
    color: #e0e0e0 !important;
}


/* Responsive data tables (#86) — card rows on a phone.
   Matches the .card palette above: #232340 ground, #e0e0e0 text. */
[data-theme="dark"] .responsive-table {
    background-color: #232340;
    color: #e0e0e0;
}

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

[data-theme="dark"] .responsive-table tbody tr:hover {
    background-color: #2b2b4d;
}

@media (max-width: 768px) {
    [data-theme="dark"] .responsive-table {
        background: transparent;
    }

    [data-theme="dark"] .responsive-table tbody tr,
    [data-theme="dark"] .responsive-table tbody tr:hover {
        background: #232340;
        border-color: #3a3a5c;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }

    /* Brand blue fails contrast on a dark ground — use the light blue the rest
       of dark-mode.css uses for headings. */
    [data-theme="dark"] .responsive-table tbody td::before {
        color: #7fb3ff;
    }

    [data-theme="dark"] .responsive-table tbody td:last-child {
        border-top-color: #3a3a5c;
    }
}