/* Dark palette and component overrides, active when the device prefers dark. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101b29;
  --surface: #19283a;
  --surface-2: #1e3043;
  --surface-3: #283c50;
  --editor-section-bg: #22354a;
  --ink: #e4ebf3;
  --muted: #aab9c9;
  --field-disabled-color: #91a1b2;
  --line: #344a60;
  --line-strong: #4a6075;
  --navy: #e5edf6;
  --navy-2: #d4e2f0;
  --navy-3: #a9c7e2;
  --blue: #9ac4e6;
  --blue-soft: #263f56;
  --green: #83b999;
  --terracotta: #e3a18c;
  --positive: #a3d4b3;
  --positive-bg: #203c34;
  --positive-soft: #729e86;
  --positive-strong: #a3d4b3;
  --danger: #f2a49e;
  --danger-bg: #4b3035;
  --danger-chart: #d9887f;
  --danger-soft: #b66f6b;
  --danger-disabled: #a87574;
  --red: #f2a49e;
  --red-bg: #4b3035;
  --warning: #e5bd75;
  --warning-bg: #473b27;
  --shadow: 0 2px 12px rgba(0,0,0,.18);
}
[data-theme="dark"] .workspace { background: radial-gradient(circle at 84% 10%, #26394b 0, transparent 35%), var(--bg); }
[data-theme="dark"] .topbar { background: rgba(19,32,47,.94); }
[data-theme="dark"] :is(.topbar-tabs a.active, .section-tabs a.active, .share-class-table-tabs a.active, .icon-button, .chart-settings-button, .notification-popover, .secondary-button, .danger-button, .table-action-button, .asset-editor__close, .wealth-chart-config-row, .wealth-chart-config-order button) { background: var(--surface-2); }
[data-theme="dark"] .primary-button { background: #426d94; border-color: #658bb0; color: #fff; }
[data-theme="dark"] .primary-button:hover { background: #527fa6; }
[data-theme="dark"] .danger-button { color: var(--danger); border-color: var(--danger); }
[data-theme="dark"] .danger-button:hover { background: var(--danger-bg); }
[data-theme="dark"] :is(input, select, textarea) { background-color: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
[data-theme="dark"] :is(th, .dividend-schedule-columns) { color: var(--muted); }
[data-theme="dark"] :is(.chart-tooltip, .asset-editor__actions) { background: var(--surface); color: var(--ink); }
[data-theme="dark"] :is(.warning-panel, .share-warning-panel) { background: var(--warning-bg); border-color: #775d36; }
[data-theme="dark"] .metric-card--primary { background: linear-gradient(145deg, #304e6d, #20374f); border-color: #486783; }
[data-theme="dark"] :is(.chart-grid-line, .chart-axis-year-tick) { stroke: var(--line); }
[data-theme="dark"] :is(.chart-axis-label, .chart-axis-month, .chart-axis-year, .chart-axis-title, .waterfall-label, .history-empty-label) { fill: var(--muted); }
[data-theme="dark"] :is(.chart-axis-year-band, .chart-axis-year-band--alternate) { fill: var(--surface-3); }
[data-theme="dark"] :is(.waterfall-value, .history-current-label) { fill: var(--ink); }
[data-theme="dark"] :is(.history-line, .liquidity-total-line) { stroke: #8cb8dd; }
[data-theme="dark"] .history-point { fill: #8cb8dd; }
[data-theme="dark"] .login-card .form-stack { background: #19283a; border-color: #40566c; color: #e4ebf3; }
[data-theme="dark"] .login-card .form-stack label { color: #c5d3e1; }
[data-theme="dark"] .login-card .form-stack input { background: #23364a; border-color: #57718b; color: #f1f5fa; -webkit-text-fill-color: #f1f5fa; }
[data-theme="dark"] .login-card { background: radial-gradient(ellipse at 20% 20%, #29496f 0%, #142f53 38%, #091b34 100%); }
[data-theme="dark"] .login-card > .login-hero { background: transparent; }
[data-theme="dark"] .login-card .form-stack { background: rgba(13, 32, 57, .68); border-color: rgba(180, 204, 228, .28); box-shadow: 0 22px 60px rgba(3, 15, 31, .22); }
[data-theme="dark"] .login-card .form-stack input { background: rgba(255, 255, 255, .07); border-color: rgba(180, 204, 228, .4); }
/* Match the sidebar's navy hue throughout the workspace and form controls. */
:root[data-theme="dark"] {
  --bg: #0e1e35;
  --surface: #172a43;
  --surface-2: #1d3350;
  --surface-3: #263e5b;
  --editor-section-bg: #1d3350;
  --line: #334d6a;
  --line-strong: #496783;
  --blue-soft: #263f5e;
}
[data-theme="dark"] .workspace { background: radial-gradient(circle at 84% 10%, #1b3454, transparent 40%), var(--bg); }
[data-theme="dark"] .topbar { background: rgba(15, 32, 54, .96); }
:root[data-theme="dark"] body :is(.dialog-standard) .form-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
  background: #243c59;
  color: #eef4fb;
  -webkit-text-fill-color: #eef4fb;
  border-color: #55718c;
}
:root[data-theme="dark"] body :is(.dialog-standard) .form-field :is(input, select, textarea):disabled {
  background: #263a52;
  color: #a8b8c9;
  -webkit-text-fill-color: #a8b8c9;
}
[data-theme="dark"] .login-card { background: radial-gradient(ellipse at 20% 20%, #29496f 0%, #142f53 38%, #091b34 100%); }
/* Subdued blue-grey surfaces let the navy navigation remain the accent. */
:root[data-theme="dark"] {
  --bg: #071425;
  --surface: #0d2039;
  --surface-2: #162b46;
  --surface-3: #213b58;
  --editor-section-bg: #162b46;
  --line: #344e6b;
  --line-strong: #536f8d;
  --blue-soft: #284767;
  --ink: #e7edf4;
  --muted: #abb8c8;
}
[data-theme="dark"] .workspace { background: var(--bg); }
[data-theme="dark"] .topbar { background: rgba(7, 20, 37, .96); }
:root[data-theme="dark"] body :is(.dialog-standard) .form-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) { background: #284767; border-color: #607d9a; }
:root[data-theme="dark"] body :is(.dialog-standard) .form-field :is(input, select, textarea):disabled { background: #243b56; }
/* Investment chart: keep the series, axis and legend legible on dark panels. */
[data-theme="dark"] .investment-value-line { stroke: #a6c9e6; }
[data-theme="dark"] .investment-value-point { fill: #e9f4ff; stroke: #75a9d6; }
[data-theme="dark"] .investment-history-legend .legend-investment-value { background: #a6c9e6; }
[data-theme="dark"] .investment-year-label { fill: #c1cedc; }
[data-theme="dark"] :is(.investment-chart-grid, .investment-chart-zero, .investment-chart-value-axis) { stroke: #465667; }
[data-theme="dark"] #investment-value-gradient stop { stop-color: #80afd7; }
:root[data-theme="dark"] body :is(.topbar-tabs, .section-tabs, .share-class-table-tabs, .chart-range-switch) {
  --segment-background: var(--surface-3);
  --segment-active-background: #526d89;
  --segment-active-text: #fff;
  --segment-active-shadow: none;
}
/* Tooltips use one dark surface, including chart, KPI and field-help variants. */
:root[data-theme="dark"] body :is(.chart-tooltip, .waterfall-tooltip, .cost-stack-tooltip, .savings-progress-tooltip, .equity-chart-tooltip, .form-help__content, .metric-info__content) {
  background: #1c385b;
  color: #edf4fb;
  border-color: #607d9a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] body :is(.form-help__content, .metric-info__content)::before { background: #1c385b; border-color: #607d9a; }
:root[data-theme="dark"] body :is(.waterfall-tooltip__result, .change-tooltip hr) { border-color: #607d9a; }
:root[data-theme="dark"] body .liquidity-tooltip-scope { background: #385877; color: #edf4fb; }
:root[data-theme="dark"] body .liquidity-tooltip-scope--company { background: #587b9c; color: #fff; }
[data-theme="dark"] .forecast-svg-tooltip rect:not(.forecast-svg-tooltip__badge) { fill: #1c385b; stroke: #607d9a; }
[data-theme="dark"] .forecast-svg-tooltip__value { fill: #edf4fb; }
[data-theme="dark"] .forecast-svg-tooltip__line { fill: #c1cedc; }
[data-theme="dark"] .forecast-svg-tooltip__separator { stroke: #607d9a; }
[data-theme="dark"] .forecast-svg-tooltip rect.forecast-svg-tooltip__badge { fill: #385877; }
[data-theme="dark"] .forecast-svg-tooltip rect.forecast-svg-tooltip__badge--company { fill: #587b9c; }
[data-theme="dark"] .forecast-svg-tooltip__badge-text { fill: #edf4fb; }
/* Column headings also cover editable grids and sortable table actions. */
:root[data-theme="dark"] body :is(thead th, .forecast-expense-columns, .dividend-schedule-columns, .transaction-split-columns, .wealth-chart-config-header, .ui-financial-columns) { color: #d5e3f2; }
:root[data-theme="dark"] body thead :is(.table-sort-button, .table-action-label) { color: inherit; }
/* Shared dialog tabs and the dashboard chart configurator. */
:root[data-theme="dark"] {
  --dialog-segment-background: #213b58;
  --dialog-segment-active-background: #526d89;
  --dialog-segment-active-text: #fff;
}
:root[data-theme="dark"] body .wealth-chart-editor :is(.wealth-category-name input, .wealth-chart-config-row select) {
  background: #213b58;
  color: #edf4fb;
  -webkit-text-fill-color: #edf4fb;
  border-color: #607d9a;
}
:root[data-theme="dark"] body .wealth-chart-category-list button.danger-button { background: #162b46; color: var(--danger); border-color: var(--danger); }
:root[data-theme="dark"] body .wealth-chart-category-list button.danger-button:hover:not(:disabled) { background: var(--danger-bg); }
:root[data-theme="dark"] body .wealth-chart-category-list button.danger-button:disabled { background: #162b46; color: var(--danger-disabled); border-color: var(--danger-disabled); }
:root[data-theme="dark"] body .wealth-chart-element-list .chart-visibility-button { background: #213b58; }
/* Lift dialogs above the page while keeping their internal sections distinct. */
:root[data-theme="dark"] body .asset-editor {
  --editor-section-bg: #243e5c;
  --dialog-section-bg: #243e5c;
  background: #192f4c;
  box-shadow: 0 0 0 1px #526d89, 0 24px 75px rgba(0, 0, 0, .6);
}
:root[data-theme="dark"] body .asset-editor::backdrop { background: rgba(0, 7, 18, .72); }
/* Expanded expense details and their transaction tables. */
:root[data-theme="dark"] body :is(.cost-category-drilldown, .cost-stack-detail .table-scroll, .cost-savings-formula, .expense-plan-origin .table-scroll) { background: var(--surface); color: var(--ink); }
[data-theme="dark"] .loan-summary { background: var(--surface); color: var(--ink); }
/* Settings fields and add actions must not inherit light-mode surfaces. */
:root[data-theme="dark"] body .settings-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
  background: #213b58;
  color: #edf4fb;
  -webkit-text-fill-color: #edf4fb;
  border-color: #607d9a;
}
:root[data-theme="dark"] body .settings-form :is(input, select, textarea):disabled { background: #243b56; color: #a8b8c9; -webkit-text-fill-color: #a8b8c9; }
:root[data-theme="dark"] body .add-button { background: #426d94; border-color: #658bb0; color: #fff; }
:root[data-theme="dark"] body .add-button:hover { background: #527fa6; border-color: #779ab9; }
/* Distinguish the contributions from the final net total. */
[data-theme="dark"] #wealth-waterfall .waterfall-bar--positive { fill: #75a9d1; }
[data-theme="dark"] #wealth-waterfall .waterfall-bar--total { fill: #e5edf6; }

:root[data-theme="dark"] body [data-appearance-mode] { background: #213b58; color: #edf4fb; border-color: #607d9a; }
/* Shared form controls, filters and the iOS date shell must paint dark surfaces. */
:root[data-theme="dark"] body :is(.form-field, .form-stack, .table-tools) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  background-color: #213b58;
  color: #edf4fb;
  -webkit-text-fill-color: #edf4fb;
  border-color: #607d9a;
}
:root[data-theme="dark"] body .ios-date-shell { background: #213b58; border-color: #607d9a; }
:root[data-theme="dark"] body .ios-date-shell:has(> input:disabled) { background: #243b56; border-color: var(--line); }
:root[data-theme="dark"] body :is(.form-field, .form-stack) input[type="file"]::file-selector-button { background: #426d94; color: #fff; border-color: #607d9a; }
:root[data-theme="dark"] body :is(.form-field, .form-stack) input[type="file"]::file-selector-button:hover { background: #527fa6; }
:root[data-theme="dark"] body :is(.form-field, .form-stack, .table-tools) :is(input, textarea)::placeholder { color: #b8c8d9; -webkit-text-fill-color: #b8c8d9; opacity: 1; }
:root[data-theme="dark"] body :is(.form-field, .form-stack, .table-tools) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):disabled {
  background-color: #243b56;
  color: var(--field-disabled-color);
  -webkit-text-fill-color: var(--field-disabled-color);
  border-color: var(--line);
}
:root[data-theme="dark"] body :is(.dialog-standard) .form-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea):disabled {
  background-color: #243b56;
  color: var(--field-disabled-color);
  -webkit-text-fill-color: var(--field-disabled-color);
  border-color: var(--line);
}