/* theme.css
 *
 * Dark-theme palette for ALL pages, switched by theme.js via
 * <html data-theme="dark">. Light theme = the existing styles untouched
 * (no [data-theme="light"] rules needed).
 *
 * Strategy:
 *   1. Override the CSS variables styles.css already defines — every rule
 *      that uses var(--bg-card) etc. flips automatically.
 *   2. Targeted overrides for the major shared surfaces (nav, cards, chat,
 *      inputs, tables, modals).
 *   3. Catch-alls for inline-styled white surfaces (style="background:#fff")
 *      that JS-injected components use — attribute-substring selectors with
 *      !important so they win over the inline style.
 *   4. Chart bodies stay as LIGHT islands: LIDA PNGs are white images and
 *      ECharts text is drawn for light backgrounds, so charts remain
 *      readable instead of becoming dark-on-dark.
 *
 * Load AFTER styles.css / the page's inline <style> so ties resolve here.
 */

/* ── 1. Palette ──────────────────────────────────────────────────────── */
html[data-theme="dark"] {
    color-scheme: dark;
    --primary: #6366f1;
    --primary-hover: #818cf8;
    --secondary: #a78bfa;
    --accent: #f472b6;
    --bg-body: #0b1220;
    --bg-card: #141c2f;
    --bg-glass: rgba(20, 28, 47, 0.72);
    --text-main: #e6e9ef;
    --text-muted: #9aa7b8;
    --text-light: #7c8aa0;
    --border-light: #26314a;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.45);
    --glow: rgba(99, 102, 241, 0.28);
}

/* ── 2. Base surfaces ────────────────────────────────────────────────── */
html[data-theme="dark"] body {
    background: var(--bg-body) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .top-nav {
    background: rgba(13, 18, 32, 0.78) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

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

html[data-theme="dark"] .nav-link:hover {
    color: var(--text-main) !important;
}

/* Cards / panels across landing, wizard, login, post-deploy. */
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .feature-box,
html[data-theme="dark"] .system-overview-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .status-bar,
html[data-theme="dark"] .arch-visual,
html[data-theme="dark"] .sd-node {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .particle {
    background: rgba(20, 28, 47, 0.6) !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: var(--text-main);
}

/* ── 3. Forms ────────────────────────────────────────────────────────── */
html[data-theme="dark"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #0f1626 !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-light) !important;
}

html[data-theme="dark"] .btn-secondary {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* ── 4. Chat surfaces (generate_query / direct) ──────────────────────── */
/* ONE flat surface (--bg-body) for the whole chat column. The composer
   container is max-width 928px and centered — if its background differs
   from .chat-main's, the sides of the bottom strip show through as ugly
   darker rectangles. Bubbles/cards provide the contrast instead. */
html[data-theme="dark"] .chat-input-container,
html[data-theme="dark"] .chat-messages {
    background: var(--bg-body) !important;
    border-color: var(--border-light) !important;
}

/* Bot bubbles: dark card. User bubbles keep their indigo gradient. */
html[data-theme="dark"] .message-bubble.bot,
html[data-theme="dark"] .message-bubble.bot * {
    color: var(--text-main);
}

html[data-theme="dark"] .message-bubble.bot {
    background: #1a2338 !important;
    border-color: var(--border-light) !important;
}

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

/* Result tables. */
html[data-theme="dark"] table {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] th {
    background: #1a2338 !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] td {
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

/* Code / SQL blocks. */
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] .code-snippet {
    background: #0f1626 !important;
    color: #d8e0ee !important;
    border-color: var(--border-light) !important;
}

/* ── 5. Charts stay readable: LIGHT islands on the dark page ─────────── */
html[data-theme="dark"] .dx-chart-body,
html[data-theme="dark"] .dx-chart-body canvas,
html[data-theme="dark"] .live-chart-host,
html[data-theme="dark"] .live-chart-host canvas,
html[data-theme="dark"] img[alt="chart"] {
    background: #f8fafc !important;
    border-radius: 10px;
}

html[data-theme="dark"] .dx-chart {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

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

/* ── 6. Inline-styled surfaces (JS-injected components) ──────────────── */
/* Conv popup, plan stream hint, suggestion cards, etc. set inline white
   backgrounds — the substring selectors below flip every variant spelling. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
/* JS-set styles (el.style.cssText = "... background:#ffffff ...") are
   SERIALIZED by the browser into the style attribute as rgb() — the hex
   selectors above never match those. This catches every JS-injected
   white card (DB panel, conv popup, stream hints, ...). */
html[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
html[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
/* Near-white literals used by JS HTML templates (zebra table rows use
   '#fcfdfe' for odd rows; panels use '#f8fafc'/'#f1f5f9'). Without these,
   alternate table rows stayed white with light text — invisible. */
html[data-theme="dark"] [style*="background:#fcfdfe"],
html[data-theme="dark"] [style*="background: #fcfdfe"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f1f5f9"] {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* Keep the zebra effect: '#fcfdfe' (odd) rows get a slightly lighter dark
   than the '#ffffff' (even) rows mapped above. Later rule wins the tie. */
html[data-theme="dark"] [style*="background:#fcfdfe"],
html[data-theme="dark"] [style*="background: #fcfdfe"] {
    background: #18213a !important;
}

/* Refine Results / Refine Chart widget cards: inline light gradients
   (linear-gradient(135deg, #f8fafc, #f0f4ff|#f5f0ff)). */
html[data-theme="dark"] [style*="background: linear-gradient(135deg, #f8fafc"] {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* SELECTED chip/button tint (#dbeafe, also JS-set → rgb form) → accented
   dark blue so the active choice stays clearly distinguishable. */
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background: #dbeafe"],
html[data-theme="dark"] [style*="background: rgb(219, 234, 254)"] {
    background: #1e2a5e !important;
    color: #93c5fd !important;
    border-color: #3b82f6 !important;
}

/* Their hover tint (#eff6ff) → dark hover, not a white flash. */
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background: #eff6ff"],
html[data-theme="dark"] [style*="background: rgb(239, 246, 255)"] {
    background: #232c54 !important;
}

/* Selected-state text (#1d4ed8, also JS-set rgb) → readable light blue. */
html[data-theme="dark"] [style*="color:#1d4ed8"],
html[data-theme="dark"] [style*="color: #1d4ed8"],
html[data-theme="dark"] [style*="color: rgb(29, 78, 216)"] {
    color: #93c5fd !important;
}

/* Widely-used secondary-text gray on those panels. */
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #64748b"] {
    color: var(--text-muted) !important;
}

/* Common hardcoded dark-gray text colors → readable light text. */
html[data-theme="dark"] [style*="color:#111827"],
html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color:#1f2937"],
html[data-theme="dark"] [style*="color: #1f2937"],
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0f172a"] {
    color: var(--text-main) !important;
}

html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color: #374151"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #475569"] {
    color: var(--text-muted) !important;
}

/* ── 6b. Chat app shell (generate_query / direct) ────────────────────── */
/* These surfaces are painted by styles.css AND re-painted by each page's
   inline "polish" <style> with hardcoded light gradients + !important —
   so every rule here carries !important and the html[data-theme] prefix
   (higher specificity + theme.css loads last in <head>). */
html[data-theme="dark"] .chat-layout {
    background: var(--bg-body) !important;
}

html[data-theme="dark"] .chat-sidebar {
    background: #101828 !important;
    border-right-color: var(--border-light) !important;
}

html[data-theme="dark"] .chat-main {
    background: var(--bg-body) !important;
}

html[data-theme="dark"] .chat-header {
    background: #101828 !important;
    border-bottom-color: var(--border-light) !important;
}

html[data-theme="dark"] .chat-sidebar h3,
html[data-theme="dark"] .chat-sidebar p,
html[data-theme="dark"] .sidebar-header,
html[data-theme="dark"] .chat-title h2 {
    color: var(--text-main) !important;
}

html[data-theme="dark"] .action-btn.secondary {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] .input-wrapper {
    background: #0f1626 !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] .input-wrapper:focus-within {
    background: #0f1626 !important;
}

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

/* The page polish gives the FIRST bot bubble (welcome) its own gradient. */
html[data-theme="dark"] .chat-messages>.message-wrapper.bot-message:first-child .message-bubble.bot {
    background: #1a2338 !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] .file-preview,
html[data-theme="dark"] .tables-dropdown-btn,
html[data-theme="dark"] .tables-dropdown-panel,
html[data-theme="dark"] .table-item,
html[data-theme="dark"] .model-picker {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* Workflow simulator / timeline cards (styles_extra.css). */
html[data-theme="dark"] .chat-simulator,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .sim-validate-toggle--header {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* The simulator's bottom action area is pinned WHITE by a late styles.css
   rule (`.simulator-actions { background: white }`) — it showed as a white
   rectangle under the dark timeline. */
html[data-theme="dark"] .simulator-actions {
    background: #101828 !important;
    border-top-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

/* ── 6c. Direct-mode dashboard ───────────────────────────────────────── */
html[data-theme="dark"] .direct-dash {
    color: var(--text-main);
}

html[data-theme="dark"] .direct-dash .dd-kpi,
html[data-theme="dark"] .direct-dash .dd-card {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] .direct-dash .dd-banner {
    background: linear-gradient(135deg, #1e2547, #232c54) !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] .direct-dash .dd-banner.error {
    background: linear-gradient(135deg, #3a1d24, #43222b) !important;
}

html[data-theme="dark"] .direct-dash .dd-banner.success {
    background: linear-gradient(135deg, #15301f, #1a3a26) !important;
}

/* ── 6e. Bubble TEXT + SQL blocks (beat the page polish specificity) ──── */
/* The welcome bubble's text is pinned by
   `.chat-messages>...:first-child .message-bubble.bot p { color:#1e293b }`
   — higher specificity than a generic rule, so the text was invisible on
   the dark bubble. Match it and out-rank it. */
html[data-theme="dark"] .chat-messages>.message-wrapper.bot-message:first-child .message-bubble.bot p,
html[data-theme="dark"] .chat-messages .message-bubble.bot p,
html[data-theme="dark"] .chat-messages .message-bubble.bot li,
html[data-theme="dark"] .chat-messages .message-bubble.bot td,
html[data-theme="dark"] .chat-messages .message-bubble.bot b,
html[data-theme="dark"] .chat-messages .message-bubble.bot strong {
    color: var(--text-main) !important;
}

/* Any bubble descendant WITHOUT its own inline color → light text.
   (Elements with inline colors — error reds, status greens — keep them.) */
html[data-theme="dark"] .message-bubble.bot span:not([style*="color"]),
html[data-theme="dark"] .message-bubble.bot div:not([style*="color"]) {
    color: var(--text-main) !important;
}

/* SQL blocks inside bubbles: polish pins white bg + dark text with high
   specificity — mirror the selector. */
html[data-theme="dark"] .chat-messages .message-bubble pre {
    background: #0f1626 !important;
    color: #d8e0ee !important;
    border-color: var(--border-light) !important;
}

/* Header strip: belt-and-suspenders (also matched via body/main paths,
   backdrop blur killed so no white glass remains). */
html[data-theme="dark"] body .chat-header,
html[data-theme="dark"] .chat-main .chat-header {
    background: #101828 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: var(--border-light) !important;
}

html[data-theme="dark"] .chat-status {
    color: #34d399 !important;
}

/* Top-nav user badge (inline-styled white pill with user id). */
html[data-theme="dark"] #userInfo.user-badge,
html[data-theme="dark"] .user-badge {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* ── 6f. Direct-mode dashboard (body.direct-mode .dx-*) ──────────────── */
/* All Direct dashboard surfaces are styled as `body.direct-mode .dx-…`
   with light backgrounds — out-rank them with the html[data-theme] prefix. */
html[data-theme="dark"] body.direct-mode .dx-pane {
    background: var(--bg-body) !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] body.direct-mode .dx-pane-head {
    background: #101828 !important;
    border-bottom-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] body.direct-mode .dx-pane-head h2,
html[data-theme="dark"] body.direct-mode .dx-pane-head .sub,
html[data-theme="dark"] body.direct-mode .dx-sub {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] body.direct-mode .dx-empty,
html[data-theme="dark"] body.direct-mode .dx-kpi,
html[data-theme="dark"] body.direct-mode .dx-suggest,
html[data-theme="dark"] body.direct-mode .dx-card-rows,
html[data-theme="dark"] body.direct-mode .dx-col-list,
html[data-theme="dark"] body.direct-mode .dx-filter-row,
html[data-theme="dark"] body.direct-mode .dx-table-wrap {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] body.direct-mode .dx-empty h3,
html[data-theme="dark"] body.direct-mode .dx-empty p,
html[data-theme="dark"] body.direct-mode .dx-kpi .lbl,
html[data-theme="dark"] body.direct-mode .dx-kpi .val {
    color: var(--text-main) !important;
}

html[data-theme="dark"] body.direct-mode .dx-empty p {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] body.direct-mode .dx-chip,
html[data-theme="dark"] body.direct-mode .dx-multi-btn,
html[data-theme="dark"] body.direct-mode .dx-rows-custom input,
html[data-theme="dark"] body.direct-mode .dx-filter-row select,
html[data-theme="dark"] body.direct-mode .dx-col-head .mini button,
html[data-theme="dark"] body.direct-mode .dx-filter-head .mini button {
    background: #1a2338 !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* Follow-up chart suggestion popup (above the chat composer). */
html[data-theme="dark"] body.direct-mode .dx-sugpop {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] body.direct-mode .dx-sugpop-head {
    color: var(--text-muted) !important;
}

/* Link-style suggestions (no fill/border) — see direct.html base rule. */
html[data-theme="dark"] body.direct-mode .dx-sugpop-item {
    background: none !important;
    color: #a5b4fc !important;
    border: none !important;
}

html[data-theme="dark"] body.direct-mode .dx-sugpop-item::before {
    color: #818cf8 !important;
}

html[data-theme="dark"] body.direct-mode .dx-sugpop-item:hover {
    background: rgba(129, 140, 248, 0.12) !important;
    color: #c7d2fe !important;
}

html[data-theme="dark"] body.direct-mode .dx-sugpop-item:hover::before {
    color: #c7d2fe !important;
}

/* Results-table card ("Underlying data") — white wrapper around the table. */
html[data-theme="dark"] body.direct-mode .dx-data {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] body.direct-mode .dx-data h4,
html[data-theme="dark"] body.direct-mode .dx-suggest h4,
html[data-theme="dark"] body.direct-mode .dx-suggest .group-label,
html[data-theme="dark"] body.direct-mode .dx-section-h h3 {
    color: var(--text-main) !important;
}

html[data-theme="dark"] body.direct-mode .dx-section-h .hint,
html[data-theme="dark"] body.direct-mode .dx-filter-empty {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] body.direct-mode .dx-tbl-wrap {
    background: transparent !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] body.direct-mode .dx-filter-add,
html[data-theme="dark"] body.direct-mode .dx-filter-list {
    background: transparent !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* ── 6g. DB connection popover (#cogneusDBPanel, JS-injected) ────────── */
html[data-theme="dark"] #cogneusDBPanel {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
    color: var(--text-main) !important;
}

html[data-theme="dark"] #cogneusDBPanel h3 {
    color: var(--text-main) !important;
}

html[data-theme="dark"] #cogneusDBPanel p,
html[data-theme="dark"] #cogneusDBPanel label>span {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] #cogneusDBPanel input {
    background: #0f1626 !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* Footer divider + the white-bg buttons (their JS hover handlers write
   inline white back — inline w/o !important loses to these rules). */
html[data-theme="dark"] #cogneusDBPanel [style*="border-top"] {
    border-top-color: var(--border-light) !important;
}

html[data-theme="dark"] #dbpClear,
html[data-theme="dark"] #dbpTest {
    background: #1a2338 !important;
}

/* ── 6d. Login page (its polish styles pin colors with !important) ───── */
html[data-theme="dark"] .login-title {
    color: var(--text-main) !important;
}

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

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

html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-select {
    background: #0f1626 !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

/* ── 6i. Home / landing page (index.html pins colors with !important) ── */
/* Headings: the page polish sets color:#0f172a !important on all of these —
   invisible on the dark background. Same-importance, higher-specificity
   overrides win. */
html[data-theme="dark"] .hero-heading,
html[data-theme="dark"] .section-heading,
html[data-theme="dark"] .step-title,
html[data-theme="dark"] .feature-title {
    color: var(--text-main) !important;
}

html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .section-subheading,
html[data-theme="dark"] .step-description,
html[data-theme="dark"] .feature-description {
    color: var(--text-muted) !important;
}

/* Governance cards: white glass (rgba 255,.6 + white on hover) → dark card. */
html[data-theme="dark"] .feature-card {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] .feature-card:hover {
    background: #1a2338 !important;
    border-color: var(--primary) !important;
}

html[data-theme="dark"] .feature-icon-container {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22) 0%, rgba(59, 130, 246, 0.22) 100%) !important;
}

/* "See Architecture" outline button: white pill → dark pill, light text. */
html[data-theme="dark"] .cta-button.secondary-cta-outline {
    background: #1a2338 !important;
    color: var(--text-main) !important;
    border-color: var(--border-light) !important;
}

html[data-theme="dark"] .cta-button.secondary-cta-outline:hover {
    background: #232c54 !important;
    color: var(--text-main) !important;
}

/* Section divider drawn inline as a light rgba border. */
html[data-theme="dark"] .section-container {
    border-top-color: var(--border-light) !important;
}

/* ── 6h. Mode-select page (self-styled via its own --ink/--paper vars) ── */
/* mode_select.html doesn't load styles.css — it defines its own palette.
   Inverting ITS variables flips the whole page consistently: ink scale
   reversed (dark text steps become light), paper/card become dark. */
html[data-theme="dark"] {
    --ink-900: #e6e9ef;
    --ink-700: #c2cad6;
    --ink-500: #9aa7b8;
    --ink-400: #8694a8;
    --ink-300: #5d6b80;
    --ink-200: #3a465e;
    --ink-100: #26314a;
    --ink-050: #1a2338;
    --paper: #0b1220;
    --card: #141c2f;
}

html[data-theme="dark"] .topbar {
    background: rgba(13, 18, 32, 0.78) !important;
    border-bottom-color: var(--border-light) !important;
}

html[data-theme="dark"] body::before {
    opacity: 0.25;
}

html[data-theme="dark"] .card:hover .icon {
    background: #1e2547 !important;
}

html[data-theme="dark"] .signout:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ── 7. Scrollbars ───────────────────────────────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f1626;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2c3a57;
    border-radius: 6px;
}

/* ── 8. The toggle controls (both themes) ────────────────────────────── */
.cogneus-theme-navbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-light, #e2e8f0);
    background: var(--bg-card, #ffffff);
    color: var(--text-main, #0f172a);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.cogneus-theme-navbtn:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.cogneus-theme-fab {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 10010;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-light, #e2e8f0);
    background: var(--bg-card, #ffffff);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform .15s ease;
}

.cogneus-theme-fab:hover {
    transform: scale(1.08);
}
