/* 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;
  --md-sys-color-success: #83d993;
  --md-sys-color-success-container: #0f5223;
  --md-sys-color-on-success-container: #c4f6cc;
  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 .report-period-control input,
body.dark-mode .report-period-control select,
body.dark-mode .report-filter-heading select {
  background-color: var(--md-sys-color-surface);
  border-color: transparent;
}

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);
}

body.dark-mode .settings-item-icon {
  background: var(--md-sys-color-surface);
}

body.dark-mode .settings-select-control,
body.dark-mode .settings-compact-select,
body.dark-mode .settings-compact-select option {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

body.dark-mode .settings-compact-select {
  color-scheme: dark;
}

body.dark-mode .settings-category-icon,
body.dark-mode .category-icon-option {
  background: var(--md-sys-color-surface);
}

body.dark-mode .category-list-panel {
  background: var(--md-sys-color-surface);
  border-color: #49454f;
}

body.dark-mode .currency-list-panel,
body.dark-mode .currency-search-wrapper input {
  background: var(--md-sys-color-surface);
  border-color: #49454f;
}

body.dark-mode .settings-currency-row {
  background: var(--md-sys-color-surface-variant);
  border-color: #49454f;
}

body.dark-mode .default-currency-box {
  background: var(--md-sys-color-primary-container);
}

body.dark-mode .default-currency-box label,
body.dark-mode .settings-currency-symbol,
body.dark-mode .settings-currency-default-badge {
  color: var(--md-sys-color-on-primary-container);
}

body.dark-mode .category-icon-option.selected {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

body.dark-mode .settings-switch-track {
  background: var(--md-sys-color-outline);
}

body.dark-mode .settings-switch input:checked + .settings-switch-track {
  background: var(--md-sys-color-primary);
}

body.dark-mode .calculator-screen,
body.dark-mode .calculator-keys button,
body.dark-mode .calculator-config-preview {
  background: var(--md-sys-color-surface);
}

body.dark-mode .calculator-charge-actions button {
  background: var(--md-sys-color-surface);
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
}

body.dark-mode .calculator-charge-actions button[aria-pressed='true'] {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

body.dark-mode .calculator-config-content {
  background: var(--md-sys-color-surface);
}

body.dark-mode .charges-settings-card,
body.dark-mode .charges-preview-card,
body.dark-mode .charges-profile-row select,
body.dark-mode .charges-rate-field input,
body.dark-mode .calculator-tax-row > input {
  background: var(--md-sys-color-surface-variant);
  border-color: #49454f;
  color: var(--md-sys-color-on-surface);
}