/* Shared dark-mode overrides for cockpit pages.
 *
 * Each cockpit defines its palette as CSS custom properties on :root — the
 * canonical names are --bg, --panel, --ink, --muted, --line, --accent,
 * --accent-neg, --soft. We override those tokens via `html[data-theme="dark"]`
 * (specificity 0,0,1,1 beats :root at 0,0,1,0), so this file can be included
 * before or after the cockpit's inline <style> block and still win.
 *
 * The corresponding theme.js sets `html[data-theme]` from localStorage (with
 * prefers-color-scheme as the fallback) and exposes a floating toggle plus
 * a Shift+D keyboard shortcut. A tiny inline bootstrap in each cockpit's
 * <head> sets the attribute before first paint to avoid a light-mode flash.
 */

html[data-theme="dark"] {
  --bg: #14161a;
  --panel: #1c1f24;
  --ink: #e6e4dc;
  --muted: #8e8c84;
  --line: #2a2d33;
  --accent: #5fb988;
  --accent-neg: #e37f6f;
  --soft: #22252b;
  --amber: #d4a968;
  --red: #e37f6f;
  --code-bg: #22262d;

  color-scheme: dark;
}

/* Nav scopes its tokens to `.cockpit-nav` itself (so host pages with heavy
   palettes don't bleed in), so we have to override at the same scope — a
   `:root`-level override never reaches those custom properties. */
html[data-theme="dark"] .cockpit-nav {
  --nav-bg: rgba(20, 22, 26, 0.82);
  --nav-ink: #e6e4dc;
  --nav-muted: #8e8c84;
  --nav-line: #2a2d33;
  --nav-accent: #5fb988;
}

/* Hardcoded light colors in shared stylesheets — override per-selector so
   the dark theme reads correctly even in components that didn't use tokens. */

html[data-theme="dark"] aside.session-pane > header {
  background: #1e2428;
}

html[data-theme="dark"] .cockpit-nav .nav-jump-menu {
  background: #1c1f24;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .cockpit-nav .nav-jump-menu a:hover,
html[data-theme="dark"] .cockpit-nav .nav-jump-menu a[aria-current="true"] {
  background: #22262d;
}

html[data-theme="dark"] .preview-head .history-timeline .timeline-dot {
  background: #3a3d44;
}
html[data-theme="dark"] .preview-head .history-timeline .timeline-dot.latest {
  border-color: #55585f;
}

html[data-theme="dark"] .cite-pop {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Floating toggle button — sits bottom-right, stays out of the way. */
.theme-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 200;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line, #e6e4dc);
  background: var(--panel, #ffffff);
  color: var(--muted, #6a6a66);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: color 0.12s, border-color 0.12s, transform 0.12s, background 0.12s;
}
.theme-toggle:hover {
  color: var(--accent, #1f6f4a);
  border-color: var(--accent, #1f6f4a);
  transform: translateY(-1px);
}
html[data-theme="dark"] .theme-toggle {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* When the viewer pane is open and pushes body margin, keep the toggle in
   the visible portion (not behind the pane). viewer.css sets body margin
   right-ward on wide screens; match that with a matching right shift. */
@media (min-width: 1100px) {
  body.viewer-open .theme-toggle { right: calc(var(--viewer-w, 40vw) + 16px); }
}
@media (min-width: 1400px) {
  body.viewer-open.session-open .theme-toggle {
    right: calc(var(--viewer-w-compact, 30vw) + var(--session-w, 32vw) + 16px);
  }
}
