/* ============================================================================
   Dark theme override layer. Scoped under [data-theme="dark"] so light mode is
   untouched. Site colors are largely hardcoded (style.css + an inline <style> in
   base.html, some with !important), so overrides that target those same elements
   also use !important + the [data-theme="dark"] prefix to win on specificity.
   ============================================================================ */

:root[data-theme="dark"] {
    --bl-bg: #121417;
    --bl-surface: #1b1f24;
    --bl-surface-2: #22272e;
    --bl-text: #e6e8eb;
    --bl-text-muted: #9aa3ad;
    --bl-border: #2d333b;
    --bl-accent: #5b9bd5;     /* lighter blue, readable on dark */
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: var(--bl-bg) !important;
    color: var(--bl-text);
}

/* Navbar (navbar-light bg-light) */
[data-theme="dark"] .navbar.bg-light { background-color: var(--bl-surface) !important; }
[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .nav-link { color: var(--bl-text) !important; }
[data-theme="dark"] .nav-link:hover { color: var(--bl-accent) !important; }
[data-theme="dark"] .navbar-brand { color: var(--bl-accent) !important; }
[data-theme="dark"] .navbar-light .navbar-toggler { border-color: var(--bl-border); }
[data-theme="dark"] .navbar-light .navbar-toggler-icon { filter: invert(1) brightness(1.6); }

/* Surfaces */
[data-theme="dark"] .card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content {
    background-color: var(--bl-surface);
    color: var(--bl-text);
    border-color: var(--bl-border);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background-color: var(--bl-surface-2);
    border-color: var(--bl-border);
}
[data-theme="dark"] .dropdown-item { color: var(--bl-text); }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus { background-color: var(--bl-surface-2); color: var(--bl-text); }
[data-theme="dark"] .dropdown-divider { border-color: var(--bl-border); }
[data-theme="dark"] .list-group-item.active { background-color: var(--bl-accent); border-color: var(--bl-accent); color: #fff; }

/* Footer */
[data-theme="dark"] .footer { background-color: var(--bl-surface) !important; color: var(--bl-text-muted); }

/* Generic helpers */
[data-theme="dark"] .text-muted { color: var(--bl-text-muted) !important; }
[data-theme="dark"] .text-dark { color: var(--bl-text) !important; }
[data-theme="dark"] .bg-light { background-color: var(--bl-surface) !important; color: var(--bl-text); }
[data-theme="dark"] .bg-white { background-color: var(--bl-surface) !important; }
[data-theme="dark"] hr { border-color: var(--bl-border); }

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bl-surface-2);
    color: var(--bl-text);
    border-color: var(--bl-border);
}
[data-theme="dark"] .form-control::placeholder { color: var(--bl-text-muted); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--bl-surface-2);
    color: var(--bl-text);
    border-color: var(--bl-accent);
    box-shadow: 0 0 0 .2rem rgba(91, 155, 213, .25);
}
[data-theme="dark"] .input-group-text { background-color: var(--bl-surface-2); color: var(--bl-text-muted); border-color: var(--bl-border); }
[data-theme="dark"] .form-control[readonly] { background-color: var(--bl-surface); }

/* Tables */
[data-theme="dark"] .table { color: var(--bl-text); border-color: var(--bl-border); }
[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-color: var(--bl-border); }
[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--bl-surface-2); color: var(--bl-text); }

/* Links (keep nav-links text-colored via the rule above) */
[data-theme="dark"] a { color: var(--bl-accent); }
[data-theme="dark"] a:hover { color: #8fc0ec; }
[data-theme="dark"] .btn-outline-secondary { color: var(--bl-text); border-color: var(--bl-border); }

/* Admin shell (admin.css already uses CSS vars) */
[data-theme="dark"] .admin-shell { --adm-content-bg: #15191e; --adm-card-border: #2d333b; }
[data-theme="dark"] .admin-main .card { background-color: var(--bl-surface); }

/* Admin sidebar follows the theme. The admin sidebar is dark navy by default
   (good for dark mode); in LIGHT mode recolor it to a light sidebar — overriding
   both the CSS vars and the elements that hardcode #fff / light values. */
[data-theme="light"] .admin-shell {
  --adm-sidebar-bg: #ffffff;
  --adm-sidebar-bg-2: #f1f5f9;
  --adm-sidebar-border: rgba(15, 23, 42, 0.10);
  --adm-sidebar-text: #334155;        /* slate-700 */
  --adm-sidebar-muted: #94a3b8;       /* slate-400 */
  --adm-sidebar-active: #2c5aa0;      /* brand blue */
  --adm-sidebar-active-bg: rgba(44, 90, 160, 0.10);
}
[data-theme="light"] .admin-shell .admin-brand,
[data-theme="light"] .admin-shell .admin-user-name { color: #0f172a; }
[data-theme="light"] .admin-shell .admin-user-avatar { color: #2c5aa0; }
[data-theme="light"] .admin-shell .admin-navfilter input { background: #fff; color: #334155; }
[data-theme="light"] .admin-shell .admin-nav a:hover { background: rgba(15, 23, 42, 0.05); color: #0f172a; }
[data-theme="light"] .admin-shell .admin-nav a:hover i { color: #0f172a; }
[data-theme="light"] .admin-shell .admin-nav a.active { color: #0f172a; }

/* Bootstrap accordions (Walk Daily reading subsections, etc.) */
[data-theme="dark"] .accordion-item {
    background-color: var(--bl-surface);
    color: var(--bl-text);
    border-color: var(--bl-border);
}
[data-theme="dark"] .accordion-button {
    background-color: var(--bl-surface-2);
    color: var(--bl-text);
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: rgba(91, 155, 213, .15);
    color: var(--bl-accent);
    box-shadow: none;
}
[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.6); }
[data-theme="dark"] .accordion-body { color: var(--bl-text); }

/* Walk Daily TTS / audio reader player (component has a hardcoded light gradient) */
[data-theme="dark"] .audio-reader-container {
    background: var(--bl-surface-2) !important;
    border-color: var(--bl-border) !important;
    color: var(--bl-text);
}
[data-theme="dark"] .audio-reader-container .form-range::-webkit-slider-runnable-track { background-color: var(--bl-border); }
[data-theme="dark"] .audio-reader-container .form-range::-moz-range-track { background-color: var(--bl-border); }

/* Walk Daily reading text + verse numbers (default #666 is too dim on dark) */
[data-theme="dark"] .walk-card .card-body,
[data-theme="dark"] .reading-item,
[data-theme="dark"] .main-text,
[data-theme="dark"] .wd-passage { color: var(--bl-text); }
[data-theme="dark"] .verse-number { color: var(--bl-text-muted); }

/* Daily Praise lyrics box (hardcoded light #f8f9fa) */
[data-theme="dark"] .lyrics-content {
    background-color: var(--bl-surface-2);
    color: var(--bl-text);
    border-left-color: var(--bl-accent);
}

/* Day Streak card + icon (hardcoded light gradient / white) */
[data-theme="dark"] .walk-streak-card { background: var(--bl-surface); }
[data-theme="dark"] .walk-streak-icon { background: var(--bl-surface-2); color: var(--bl-text); }

/* Navbar theme-toggle button (both themes) */
.theme-toggle { border: 0; background: none; cursor: pointer; }
.theme-toggle:focus { box-shadow: none; outline: none; }