/* Theme overrides for Bootstrap using data-bs-theme. Loaded after Bootstrap to override tokens. */

:root {
  /* default (light) values are left to Bootstrap */
}

[data-bs-theme="light"] {
    /* Explicit light mode (same as default) */
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-border-color: #dee2e6;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    /* form controls and panels */
    --bs-secondary-bg: #f8f9fa;
    --bs-secondary-color: #212529;
    --bs-drag-handle: #6c757d;
    --bs-tertiary-bg: rgba(110, 110, 110, 0.35);
    --bs-light-bg-subtle: #f8f9fa;
    /* accents */
    --bs-primary: #0d6efd;
    --bs-primary-bg-subtle: rgba(13, 110, 253, 0.12);
}

[data-bs-theme="dark"] {
    /* Use the Outline palette */
    --bs-body-bg: #0f172a; /* deep navy */
    --bs-body-color: #e5e7eb; /* light text */
    --bs-border-color: #1f2937;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    /* form controls and panels */
    --bs-secondary-bg: #020617;
    --bs-secondary-color: white;
    --bs-drag-handle: red;
    --bs-tertiary-bg: rgba(0, 123, 255, 0.12);
    --bs-light-bg-subtle: #020617;
    /* accents */
    --bs-primary: #3c8dbc;
    --bs-primary-bg-subtle: rgba(0, 123, 255, 0.12);
}

/* Convenience helpers to keep components consistent when data-bs-theme=dark */
body[data-bs-theme="dark"] .navbar,
body[data-bs-theme="dark"] .page-header,
body[data-bs-theme="dark"] .book-table,
body[data-bs-theme="dark"] .form-card {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* Light mode (default) */
#mainNavbar {
    background-color: #ffffff;
    color: #212529;
}

    #mainNavbar .nav-link {
        color: #212529;
    }

/* Light mode (explicit) */
[data-bs-theme="light"] #mainNavbar {
    background-color: #ffffff;
    color: #212529;
}

    [data-bs-theme="light"] #mainNavbar .nav-link {
        color: #212529;
    }

/* Dark mode */
[data-bs-theme="dark"] #mainNavbar {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

    [data-bs-theme="dark"] #mainNavbar .nav-link {
        color: var(--bs-body-color);
    }

/* -----------------------------------------
   Darkmode component overrides (theme-based)
----------------------------------------- */

[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .list-group-item {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .chapter-item.chapter-selected {
    background-color: #111827; /* custom highlight */
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] input,
[data-bs-theme="dark"] select {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .note-card {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .modal-body,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .modal-header {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .book-table,
[data-bs-theme="dark"] .form-card {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] #lexical-editor-root {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* Dark mode */
[data-bs-theme="dark"] .wb-chapter-item.active {
    color: var(--bs-body-color);
    border-color: #1f2937;
    background: var(--bs-primary-bg-subtle, rgba(0, 123, 255, 0.15));
}

[data-bs-theme="dark"] .drag-handle {
    color: var(--bs-drag-handle);
}