/* ─── Dark Mode — Bootstrap 5.3 standard (data-bs-theme="dark") ─────────────
   Bootstrap handles all its own components (table, card, form, button, etc.)
   automatically. This file only overrides custom/non-Bootstrap elements.
   ──────────────────────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] {
    /* Tune Bootstrap's dark palette to site's preferred tones */
    --bs-body-bg: #1f1f1f;
    --bs-body-color: #9e9e9e;
    --bs-secondary-bg: #1f2020;
    --bs-tertiary-bg: #1a1a1a;
    --bs-border-color: #28292a;
    --bs-border-color-translucent: rgba(255, 255, 255, .08);

    /* Custom app CSS vars used by non-Bootstrap components */
    --primary-color: #60a5fa;
    --secondary-color: #94a3b8;
    --accent-color: #fbbf24;
    --text-dark: #9e9e9e;
    --text-light: #6b7280;
    --border-color: #28292a;
    --bg-light: #1f2020;
}

/* ── FE Navbar (has hardcoded bg-white, Bootstrap can't override it) ─── */
[data-bs-theme="dark"] #main-navbar {
    background-color: #1f2020 !important;
}

[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .nav-link {
    color: #9e9e9e !important;
}

[data-bs-theme="dark"] .nav-link:hover {
    color: #60a5fa !important;
}

[data-bs-theme="dark"] .nav-item a {
    color: var(--bs-light-color);
}

/* ── bg-white (Bootstrap doesn't remap bg-white in dark mode) ── */
[data-bs-theme="dark"] .bg-white {
    background-color: #1f2020 !important;
    color: inherit;
}

/* ── bg-light overrides ─────────────────────────────────────── */
[data-bs-theme="dark"] .bg-light {
    background-color: #28292a !important;
}

[data-bs-theme="dark"] .bg-light.border-bottom,
[data-bs-theme="dark"] section.bg-light {
    background-color: #1f2020 !important;
}

/* ── FE Sidebar widget (custom component, no Bootstrap bg) ─── */
[data-bs-theme="dark"] .sidebar-widget {
    background-color: #1f2020;
}

[data-bs-theme="dark"] .sidebar-widget h5 {
    color: #9e9e9e;
    border-bottom-color: #28292a;
}

/* ── Article content ─────────────────────────────────────────── */
[data-bs-theme="dark"] .article-content {
    color: #9e9e9e;
}

[data-bs-theme="dark"] h1.article-title,
[data-bs-theme="dark"] .article-content h1,
[data-bs-theme="dark"] .article-content h2,
[data-bs-theme="dark"] .article-content h3,
[data-bs-theme="dark"] .article-content h4 {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .article-content a {
    color: #60a5fa;
}

[data-bs-theme="dark"] .article-content blockquote {
    border-left-color: #334155;
    color: #94a3b8;
}

[data-bs-theme="dark"] .article-content code {
    background-color: #28292a;
    color: #f472b6;
}

[data-bs-theme="dark"] .article-content pre {
    background-color: #1f2020;
    border-color: #28292a;
}

/* ── TOC widget ──────────────────────────────────────────────── */
[data-bs-theme="dark"] #toc-list a {
    color: #94a3b8;
}

[data-bs-theme="dark"] #toc-list a:hover,
[data-bs-theme="dark"] #toc-list a.active {
    color: #60a5fa;
    border-left-color: #60a5fa;
}

[data-bs-theme="dark"] .toc-toggle-btn,
[data-bs-theme="dark"] .toc-group-toggle {
    color: #6b7280;
}

[data-bs-theme="dark"] #tocExpandBtn {
    color: #9e9e9e !important;
}

[data-bs-theme="dark"] #toc-col.toc-col--collapsed #toc-widget {
    background-color: #1f2020;
}

/* ── Stat card bg-*-opacity-10 helpers ───────────────────────── */
[data-bs-theme="dark"] .bg-warning.bg-opacity-10 {
    background-color: rgba(245, 158, 11, .15) !important;
}

[data-bs-theme="dark"] .bg-success.bg-opacity-10 {
    background-color: rgba(16, 185, 129, .15) !important;
}

[data-bs-theme="dark"] .bg-primary.bg-opacity-10 {
    background-color: rgba(37, 99, 235, .15) !important;
}

[data-bs-theme="dark"] .bg-danger.bg-opacity-10 {
    background-color: rgba(239, 68, 68, .15) !important;
}

[data-bs-theme="dark"] .bg-info.bg-opacity-10 {
    background-color: rgba(6, 182, 212, .15) !important;
}

/* ── Stat card info text color ───────────────────────────────── */
[data-bs-theme="dark"] .text-info {
    color: #67e8f9 !important;
}

/* ── Backend: main-header & sidebar (custom layout, not Bootstrap) ─ */
[data-bs-theme="dark"] .main-header {
    background-color: #1f2020 !important;
    border-bottom: 1px solid #28292a;
}

[data-bs-theme="dark"] .main-header .btn-link,
[data-bs-theme="dark"] .main-header span {
    color: #9e9e9e !important;
}

[data-bs-theme="dark"] .sidebar {
    background-color: #1f2020;
    border-right-color: #28292a !important;
}

[data-bs-theme="dark"] .main-content {
    background-color: #1f1f1f;
}

[data-bs-theme="dark"] .sidebar .nav-item.active {
    background-color: rgba(96, 165, 250, .1);
}

[data-bs-theme="dark"] .sidebar .nav-item.active a {
    color: #60a5fa !important;
}

[data-bs-theme="dark"] .sidebar hr {
    border-color: #28292a;
}

[data-bs-theme="dark"] .sidebar-footer {
    color: #64748b;
}

/* ── Dark mode toggle buttons (shared FE + BE) ───────────────── */
#darkModeToggle,
#darkModeToggleBE {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: none;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}

#darkModeToggle {
    color: inherit;
}

#darkModeToggleBE {
    color: #64748b;
}

#darkModeToggle:hover,
#darkModeToggleBE:hover {
    background-color: rgba(100, 116, 139, .15);
    border-color: #28292a;
}

[data-bs-theme="dark"] #darkModeToggle,
[data-bs-theme="dark"] #darkModeToggleBE {
    color: #9e9e9e;
}