/* Light uses each component's existing fallback palette. Dark overrides by role. */
:root { color-scheme: light; background: #f6f7f3; }
.theme-changing *, .theme-changing *::before, .theme-changing *::after { transition: none !important; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: #121b16;
  --theme-sidebar: #17221c;
  --theme-surface: #1c2822;
  --theme-surface-muted: #233129;
  --theme-field: #17221c;
  --theme-hover: #304238;
  --theme-selected: #2b4839;
  --theme-text: #e3ebe6;
  --theme-muted: #afbeb4;
  --theme-border: #405247;
  --theme-border-strong: #73867a;
  --theme-accent: #91d3b4;
  --theme-primary: #326e55;
  --theme-primary-hover: #3b7d61;
  --theme-on-accent: #f3fff7;
  --theme-switch-thumb: #f3fff7;
  --theme-warning-bg: #352f20;
  --theme-warning-text: #ecd08c;
  --theme-warning-border: #9a814b;
  --theme-edited-bg: #3c331f;
  --theme-edited-border: #bba061;
  --theme-success-bg: #263e2f;
  --theme-success-text: #aedcb6;
  --theme-success-border: #5c8c67;
  --theme-neutral-bg: #2c3330;
  --theme-neutral-text: #bdc8c1;
  --theme-neutral-border: #74847b;
  --theme-danger-bg: #412a27;
  --theme-danger-text: #ffc0b4;
  --theme-danger-border: #b87567;
  --theme-shadow: #00000055;
  --theme-backdrop: #050b08b3;
  --theme-focus-ring: #91d3b438;
  background: var(--theme-page);
}

.topbar-actions { display: flex; align-items: center; gap: 20px; }
.theme-control { position: relative; display: flex; align-items: center; gap: 8px; }
.theme-control > span { color: var(--theme-muted, #647365); font-size: 13px; }
.theme-control .search-select { width: 124px; }
.theme-storage-note { position: absolute; right: 0; top: calc(100% + 5px); width: 235px; padding: 8px 10px; border: 1px solid var(--theme-warning-border, #dec184); border-radius: 6px; color: var(--theme-warning-text, #805c16); background: var(--theme-warning-bg, #fff3d6); z-index: 101; }
/* Native dialog and third-party calendar defaults otherwise remain white. */
dialog, .settlement-calendar.react-datepicker { background: var(--theme-surface, white); }
:root[data-theme="dark"] ::placeholder { color: #9aaea0; opacity: 1; }
:root[data-theme="dark"] .settlement-calendar-popper .react-datepicker__triangle { fill: var(--theme-surface-muted); color: var(--theme-surface-muted); stroke: var(--theme-border); }
@media (max-width: 700px) {
  .topbar-actions { width: 100%; justify-content: space-between; gap: 8px; }
  .topbar-actions .local { font-size: 12px; }
}