/* Volunteering Ukraine FAQ — Dark Mode
 *
 * volunteeringukraine.com is light-only, so there is no upstream dark theme to
 * copy. This derives one that keeps the brand identity: the same #474eff blue
 * (lifted slightly for contrast on dark ground) and the same #ffc700 accent,
 * over a neutral near-black rather than a tinted navy.
 *
 * This file only redefines the custom properties declared in faq.css, plus the
 * handful of Bootstrap surfaces that do not read from them. The previous
 * version was 436 lines of hardcoded values duplicating every rule; because
 * faq.css is now fully token-driven, this does the same job in a fraction of
 * the size and cannot drift out of sync with the light theme.
 */

[data-theme="dark"] {
    /* Blue is lightened from #474eff: the brand value fails contrast against a
       dark ground for body text. Hue is preserved so it still reads as theirs. */
    --brand-blue: #8b90ff;
    --brand-blue-dark: #a5a9ff;
    --brand-yellow: #ffc700;
    --brand-black: #ececf2;
    --brand-tint: #22222e;
    --brand-grey: #3a3a4a;

    --success: #4ac47e;
    --warning: #ffc700;
    --danger: #ff6b6b;
    --info: #8b90ff;

    --primary-text: #ececf2;
    --secondary-text: #a8a8b8;
    --muted-text: #8a8a9a;
    --border-color: #33333f;
    --background-light: #16161d;
    --surface: #1d1d26;
    --white: #1d1d26;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] body {
    background-color: var(--background-light);
    color: var(--primary-text);
}

/* The flag rule under the header keeps its true colours in both themes —
   it is the one element that should not be tinted. */
[data-theme="dark"] .header::after {
    background: linear-gradient(
        90deg,
        #474eff 0%,
        #474eff 50%,
        #ffc700 50%,
        #ffc700 100%
    );
}

/* ============================================================
   Bootstrap surfaces that do not read our custom properties
   ============================================================ */
[data-theme="dark"] .card,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .table {
    background-color: var(--surface);
    color: var(--primary-text);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--primary-text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--brand-tint);
    color: var(--brand-blue);
}

[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--primary-text);
    --bs-table-striped-color: var(--primary-text);
    --bs-table-hover-color: var(--primary-text);
    --bs-table-hover-bg: var(--brand-tint);
    --bs-table-border-color: var(--border-color);
}

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

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--surface);
    border-color: var(--brand-blue);
    color: var(--primary-text);
    box-shadow: 0 0 0 3px rgba(139, 144, 255, 0.2);
}

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

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:focus {
    background-color: #474eff;
    border-color: #474eff;
    color: #fff;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:active {
    background-color: #5f65ff !important;
    border-color: #5f65ff !important;
}

[data-theme="dark"] .badge.bg-warning {
    color: #1c1c1c !important;
}

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

/* Flash messages: Bootstrap's tints are built for light grounds. */
[data-theme="dark"] .alert-info {
    background-color: var(--brand-tint);
    border-color: var(--brand-blue);
    color: var(--primary-text);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(74, 196, 126, 0.12);
    border-color: var(--success);
    color: var(--primary-text);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(255, 107, 107, 0.12);
    border-color: var(--danger);
    color: var(--primary-text);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .whats-new {
    background: rgba(255, 199, 0, 0.10);
    color: var(--primary-text);
}

[data-theme="dark"] .access-code-display code {
    background: var(--brand-tint);
    color: var(--brand-blue);
    border-color: var(--border-color);
}