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

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

  /* The one font for manuscript text (editor, chapter titles, shared chapters).
     All are already installed, nothing is downloaded:
     Charter / Iowan Old Style ship with macOS, Sitka Text (made for on-screen
     reading) and Cambria ship with Windows, Georgia is everywhere. */
  --wb-prose-font: Charter, "Bitstream Charter", "Sitka Text", "Iowan Old Style", Cambria, Georgia, serif;
}

[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: #eef0f3; /* was a 35% grey that made every chapter look selected */
    --bs-light-bg-subtle: #f8f9fa;
    /* accents */
    --bs-primary: #0d6efd;
    --bs-primary-bg-subtle: rgba(13, 110, 253, 0.12);
    --bs-status-bar-color: black;
    --wb-muted: #6c757d;
    --wb-surface: #ffffff;
    --wb-surface-2: #f5f7fa;
    --wb-desk: #e3e6ea;
    --wb-sheet: #ffffff;
    /* editor tokens (used by _LexicalEditor.cshtml) */
    --wb-border: #dee2e6;
    --wb-toolbar-bg: #f1f3f5;
    --wb-toolbar-color: #212529;
    --wb-toolbar-hover: #e2e6ea;
    --wb-toolbar-active: #cfd4da;
    --wb-page-bg: #ffffff;
    --wb-page-color: #212529;
    --wb-statusbar-bg: #f8f9fa;
    --wb-statusbar-color: #495057;
    --wb-danger-text: #b02a37;
    --wb-attention: #ffe69c;
    /* shared UI tokens (used by ui.css) */
    --wb-accent: #4a6cf7;
    --wb-accent-subtle: rgba(74, 108, 247, 0.12);
    --wb-hover: rgba(0, 0, 0, 0.04);
    --wb-success-text: #146c43;
    --wb-focus-ring: #258cfb;
    --wb-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
    --wb-shadow-md: 0 6px 20px rgba(0, 0, 0, 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);
    --bs-status-bar-color: black;
    --bs-dropdown-link-color: #e5e7eb;
    --wb-muted: #9ca3af;
    --wb-surface: #020617;
    --wb-surface-2: #111827;
    --wb-desk: #020617;
    --wb-sheet: #0f172a;
    /* editor tokens (used by _LexicalEditor.cshtml) */
    --wb-border: #1f2937;
    --wb-toolbar-bg: #111827;
    --wb-toolbar-color: #d1d5db;
    --wb-toolbar-hover: #1f2937;
    --wb-toolbar-active: #374151;
    --wb-page-bg: #020617;
    --wb-page-color: #e5e7eb;
    --wb-statusbar-bg: #0b1222;
    --wb-statusbar-color: #9ca3af;
    --wb-danger-text: #f1aeb5;
    --wb-attention: #5c4a12;
    /* shared UI tokens (used by ui.css) */
    --wb-accent: #4a6cf7;
    --wb-accent-subtle: rgba(110, 168, 254, 0.14);
    --wb-hover: rgba(255, 255, 255, 0.05);
    --wb-success-text: #75b798;
    --wb-focus-ring: #258cfb;
    --wb-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --wb-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* Convenience helpers to keep components consistent when data-bs-theme=dark.
   Page headers have no background of their own: they sit on the page in both themes. */
body[data-bs-theme="dark"] .navbar {
  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,
[data-bs-theme="dark"] #mainNavbar .dropdown-menu {
    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);
}

/* Cards keep their card look in dark mode */
[data-bs-theme="dark"] .book-table {
    background: var(--wb-surface);
    color: var(--bs-body-color);
    border-color: var(--wb-border);
}

/* 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);
}

/* Secondary outline buttons everywhere (editor header, book list "More" menu, dialogs, forms):
   Bootstrap's grey is too dim on navy */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #d1d5db;
    --bs-btn-border-color: #374151;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #1f2937;
    --bs-btn-hover-border-color: #4b5563;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1f2937;
    --bs-btn-active-border-color: #4b5563;
}

/* Logout is a button styled as a link; keep it the nav link color in both themes */
#mainNavbar #logout {
    color: var(--bs-nav-link-color, inherit);
}

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