/* Actionable color themes. Typography and geometry intentionally live elsewhere. */

:root {
  --theme-app: var(--app-bg, #f4f6f8);
  --theme-panel: var(--panel, #fff);
  --theme-panel-2: var(--panel-2, #f3f6f8);
  --theme-ink: var(--ink, #111820);
  --theme-muted: var(--muted, #64727d);
  --theme-line: var(--line, #d8e0e4);
  --theme-accent: var(--brand, #168092);
  --theme-accent-strong: var(--brand-dark, #0f5362);
  --theme-accent-soft: var(--brand-soft, #e3f3f6);
  --theme-topbar: #101315;
  --theme-topbar-ink: #fff;
  --theme-sidebar: #071426;
}

html[data-theme="dark"] {
  --theme-app: #09111d;
  --theme-panel: #101b2a;
  --theme-panel-2: #152235;
  --theme-ink: #eaf1f8;
  --theme-muted: #9db0c1;
  --theme-line: #2b3c50;
  --theme-accent: #49c2e8;
  --theme-accent-strong: #8bdcf4;
  --theme-accent-soft: #12364a;
  --theme-topbar: #070d15;
  --theme-topbar-ink: #f5f8fb;
  --theme-sidebar: #07111f;
}

html[data-theme="blue"] {
  color-scheme: light;
  --bg: #08233b;
  --panel: #f8fbff;
  --panel-2: #e8f1f9;
  --app-bg: #e8f0f7;
  --ink: #102d44;
  --muted: #60778a;
  --line: #bfd0de;
  --border: #bfd0de;
  --brand: #176f9e;
  --brand-dark: #0b4c74;
  --brand-soft: #d9edf8;
  --forecast-bg: #e1f1fb;
  --actual-bg: #f8fbff;
  --header-bg: #eaf3fa;
  --hover-bg: #e2f0f8;
  --focus-ring: 0 0 0 3px rgba(23, 111, 158, .24);
  --theme-app: #e8f0f7;
  --theme-panel: #f8fbff;
  --theme-panel-2: #e8f1f9;
  --theme-ink: #102d44;
  --theme-muted: #60778a;
  --theme-line: #bfd0de;
  --theme-accent: #176f9e;
  --theme-accent-strong: #0b4c74;
  --theme-accent-soft: #d9edf8;
  --theme-topbar: #0b3558;
  --theme-topbar-ink: #f7fbff;
  --theme-sidebar: #08233b;
}

.theme-picker {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, var(--theme-topbar-ink) 25%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--theme-topbar-ink) 8%, transparent);
  color: var(--theme-topbar-ink);
}

.theme-picker > span {
  display: none;
}

.theme-picker .theme-toggle {
  display: block !important;
  width: 74px;
  min-width: 74px;
  height: 28px;
  padding: 3px 22px 3px 7px;
  border: 0;
  border-radius: 5px;
  background-color: color-mix(in srgb, var(--theme-topbar-ink) 12%, transparent);
  color: var(--theme-topbar-ink);
  font-size: 11px;
  font-weight: 780;
  cursor: pointer;
}

.theme-picker .theme-toggle option {
  background: var(--theme-panel);
  color: var(--theme-ink);
}

html[data-theme] body,
html[data-theme] .content {
  background: var(--theme-app);
  color: var(--theme-ink);
}

html[data-theme] .sidebar { background: var(--theme-sidebar) !important; }
html[data-theme] .topbar {
  background: var(--theme-topbar) !important;
  color: var(--theme-topbar-ink);
}
html[data-theme] .topbar h1,
html[data-theme] .topbar label,
html[data-theme] .topbar strong { color: var(--theme-topbar-ink); }

html[data-theme="blue"] .brand-mark {
  background: linear-gradient(145deg, #2694c2, #15577b);
  color: #fff;
}

html[data-theme="blue"] .nav-item.active {
  border-color: rgba(116, 202, 239, .38);
  border-left-color: #54c4ef;
  background: #164a6d;
  color: #fff;
}

html[data-theme="blue"] .nav-item::before,
html[data-theme="blue"] .metric-icon,
html[data-theme="blue"] .owner-next-decision-open,
html[data-theme="blue"] a:not(.nav-item):not(.legal-link) {
  color: var(--theme-accent-strong);
}

/* Shared surfaces. Existing component rules retain all dimensions and type sizes. */
html[data-theme="blue"] .panel,
html[data-theme="blue"] .card,
html[data-theme="blue"] .acc-body,
html[data-theme="blue"] .owner-exec-panel,
html[data-theme="blue"] .owner-exec-actions-panel,
html[data-theme="blue"] .owner-next-decisions-zone,
html[data-theme="blue"] .owner-next-decision,
html[data-theme="blue"] .owner-popup-modal,
html[data-theme="blue"] .owner-event-readout-v4,
html[data-theme="blue"] .owner-event-decision-v4 > article,
html[data-theme="blue"] .owner-event-decision-v4 > dl,
html[data-theme="blue"] .owner-event-cluster-v4,
html[data-theme="blue"] .owner-event-method-v4 {
  border-color: var(--theme-line);
  background: var(--theme-panel);
  color: var(--theme-ink);
}

html[data-theme="blue"] table th { background: #e4eef6; color: #294b64; }
html[data-theme="blue"] table td { border-color: #cfdae4; }
html[data-theme="blue"] tbody tr:hover td { background: #edf6fb; }

/* The owner cockpit was added after the original dark theme. Normalize it here. */
html[data-theme="dark"] body.owner-dashboard-route .content,
html[data-theme="dark"] body.route-dashboard .content,
html[data-theme="dark"] body.owner-dashboard-route .owner-exec-dashboard,
html[data-theme="dark"] body.route-dashboard .owner-exec-dashboard {
  background: var(--theme-app) !important;
  color: var(--theme-ink);
}

html[data-theme="dark"] .owner-exec-panel,
html[data-theme="dark"] .owner-exec-actions-panel,
html[data-theme="dark"] .owner-next-decisions-zone,
html[data-theme="dark"] .owner-next-decision,
html[data-theme="dark"] .owner-popup-modal,
html[data-theme="dark"] .owner-event-readout-v4,
html[data-theme="dark"] .owner-event-decision-v4 > article,
html[data-theme="dark"] .owner-event-decision-v4 > dl,
html[data-theme="dark"] .owner-event-cluster-v4,
html[data-theme="dark"] .owner-event-method-v4 {
  border-color: var(--theme-line) !important;
  background: var(--theme-panel) !important;
  color: var(--theme-ink) !important;
}

html[data-theme="dark"] .owner-next-decisions-zone { background: #0d1724 !important; }
html[data-theme="dark"] .owner-next-decision { background: #132033 !important; }

html[data-theme="dark"] .owner-next-decisions-head > strong,
html[data-theme="dark"] .owner-next-decision-title > strong,
html[data-theme="dark"] .owner-next-decision-value > strong,
html[data-theme="dark"] .owner-event-readout-v4 strong,
html[data-theme="dark"] .owner-event-decision-v4 strong,
html[data-theme="dark"] .owner-event-cluster-v4 b,
html[data-theme="dark"] .owner-event-cluster-v4 span,
html[data-theme="dark"] .owner-event-method-v4 code {
  color: var(--theme-ink) !important;
}

html[data-theme="dark"] .owner-next-decisions-head > span,
html[data-theme="dark"] .owner-next-decision-why > span,
html[data-theme="dark"] .owner-event-readout-v4 p,
html[data-theme="dark"] .owner-event-decision-v4 p,
html[data-theme="dark"] .owner-event-cluster-v4 em,
html[data-theme="dark"] .owner-event-method-v4 p {
  color: var(--theme-muted) !important;
}

/* Cash graph: the data and layout stay fixed; only the palette changes. */
html[data-theme="dark"] .owner-material-cash-graph,
html[data-theme="dark"] .owner-material-cash-graph .owner-exec-chart-canvas,
html[data-theme="dark"] .owner-material-cash-graph .owner-exec-chart-track {
  border-color: var(--theme-line) !important;
  background: var(--theme-panel) !important;
}

html[data-theme="dark"] .owner-material-graph-toolbar {
  border-color: var(--theme-line) !important;
  background: var(--theme-panel-2) !important;
}

html[data-theme="dark"] .owner-material-cash-graph .owner-target-legend,
html[data-theme="dark"] .owner-material-cash-graph .owner-target-legend span {
  background: transparent !important;
}

html[data-theme="dark"] .owner-material-cash-graph .owner-target-legend i.actual {
  background: #f2f5f8 !important;
}

html[data-theme="dark"] .owner-material-cash-graph .owner-target-legend i.forecast {
  border-color: #55a7ff !important;
}

html[data-theme="dark"] .owner-material-cash-graph .owner-target-graph-head strong,
html[data-theme="dark"] .owner-material-cash-graph .owner-cash-story-stats b,
html[data-theme="dark"] .owner-material-cash-graph .owner-target-legend,
html[data-theme="dark"] .owner-material-cash-graph .owner-target-graph-footer,
html[data-theme="dark"] .owner-material-cash-graph .owner-target-graph-footer em {
  color: var(--theme-ink) !important;
}

html[data-theme="dark"] .owner-material-cash-graph .owner-target-graph-head span,
html[data-theme="dark"] .owner-material-cash-graph .owner-cash-story-stats span,
html[data-theme="dark"] .owner-material-cash-graph .owner-cash-story-stats small,
html[data-theme="dark"] .owner-material-cash-graph .owner-target-graph-tools {
  border-color: var(--theme-line) !important;
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] .owner-material-event-key > span,
html[data-theme="dark"] .owner-material-operating-svg .owner-material-event .event-pill {
  border-color: var(--theme-line);
  background: var(--theme-panel-2);
  fill: var(--theme-panel-2) !important;
}

html[data-theme="dark"] .owner-material-operating-svg .cash-position-label,
html[data-theme="dark"] .owner-material-operating-svg .owner-month-divider text,
html[data-theme="dark"] .owner-material-operating-svg .tick text,
html[data-theme="dark"] .owner-material-operating-svg .owner-exec-point text,
html[data-theme="dark"] .owner-material-operating-svg .period-label,
html[data-theme="dark"] .owner-material-operating-svg .now-label,
html[data-theme="dark"] .owner-material-operating-svg .event-pill-title {
  fill: var(--theme-ink) !important;
}

html[data-theme="dark"] .owner-material-operating-svg .tick line,
html[data-theme="dark"] .owner-material-operating-svg .owner-month-divider line,
html[data-theme="dark"] .owner-material-operating-svg .axis,
html[data-theme="dark"] .owner-material-operating-svg .zero {
  stroke: var(--theme-line) !important;
}

html[data-theme="dark"] .owner-material-operating-svg .actual-line { stroke: #f2f5f8 !important; }
html[data-theme="dark"] .owner-material-operating-svg .forecast-line { stroke: #55a7ff !important; }
html[data-theme="dark"] .owner-material-operating-svg .owner-exec-point circle {
  fill: var(--theme-panel) !important;
  stroke: #dbe7f1 !important;
}

html[data-theme="blue"] .owner-material-cash-graph,
html[data-theme="blue"] .owner-material-cash-graph .owner-exec-chart-canvas,
html[data-theme="blue"] .owner-material-cash-graph .owner-exec-chart-track {
  border-color: var(--theme-line) !important;
  background: #f8fbff !important;
}

html[data-theme="blue"] .owner-material-graph-toolbar { background: #e9f2f8 !important; }
html[data-theme="blue"] .owner-material-cash-graph .owner-target-graph-head strong,
html[data-theme="blue"] .owner-material-cash-graph .owner-cash-story-stats b,
html[data-theme="blue"] .owner-next-decisions-head > strong,
html[data-theme="blue"] .owner-next-decision-title > strong,
html[data-theme="blue"] .owner-next-decision-value > strong {
  color: var(--theme-ink) !important;
}
html[data-theme="blue"] .owner-material-operating-svg .actual-line { stroke: #14364f !important; }
html[data-theme="blue"] .owner-material-operating-svg .forecast-line { stroke: #197bb3 !important; }
html[data-theme="blue"] .owner-material-operating-svg .owner-month-divider text,
html[data-theme="blue"] .owner-material-operating-svg .cash-position-label,
html[data-theme="blue"] .owner-material-operating-svg .tick text,
html[data-theme="blue"] .owner-material-operating-svg .owner-exec-point text,
html[data-theme="blue"] .owner-material-operating-svg .period-label,
html[data-theme="blue"] .owner-material-operating-svg .now-label {
  fill: #244b66 !important;
}

@media (max-width: 720px) {
  .theme-picker { padding-left: 5px; }
  .theme-picker .theme-toggle { width: 68px; min-width: 68px; }
}