/* Material Design 3 Dark Theme Overrides */
body.dark-mode {
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-on-primary-container: #eaddff;
  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-surface-variant: #2b2930;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-outline: #938f96;
  --md-sys-color-error: #f2b8b5;
  --md-sys-color-error-container: #8c1d18;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .recorder-card,
body.dark-mode .period-group {
  background-color: var(--md-sys-color-surface-variant);
  border-color: #49454f;
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .annual-controls select,
body.dark-mode .report-period-control input,
body.dark-mode .report-period-control select,
body.dark-mode .report-filter-heading select,
body.dark-mode .report-currency-control select {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-outline);
}

body.dark-mode .btn-secondary {
  border: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-secondary:focus-visible {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}