/* Unified form controls: colors derive from theme tokens */

:root {
  --form-bg: var(--card-bg);
  --form-border: var(--border-color);
  --form-border-strong: var(--border-color-subtle);
  --form-radius: var(--border-radius);
  --form-shadow: var(--shadow-sm);
  --form-shadow-focus: var(--shadow-focus);
  --form-label: var(--bs-body-color);
  --form-muted: var(--muted);
  --form-placeholder: rgba(0,0,0,0.45);
  --form-placeholder-dark: rgba(255,255,255,0.45);
}

[data-theme="dark"] {
  --form-placeholder: var(--form-placeholder-dark);
}

.form-control,
.form-select,
textarea.form-control {
  background-color: var(--form-bg);
  border: var(--border-width) solid var(--form-border);
  border-radius: var(--form-radius);
  color: var(--bs-body-color);
  padding: 0.625rem 0.75rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  transition: var(--transition-base);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: var(--focus-border);
  box-shadow: var(--form-shadow-focus);
  background-color: var(--form-bg);
}

.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--form-placeholder);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled {
  background-color: var(--bs-bg-subtle);
  color: var(--form-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.form-label,
.col-form-label {
  color: var(--form-label);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.form-text {
  color: var(--form-muted);
}

.input-group .form-control,
.input-group .form-select {
  box-shadow: none;
}

.input-group-text {
  background: var(--bs-bg-subtle);
  border: var(--border-width) solid var(--form-border);
  color: var(--form-muted);
}

.is-invalid.form-control,
.is-invalid.form-select,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 0.125rem rgba(231,76,60,0.25);
}

.is-invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-feedback {
  display: block;
  color: var(--bs-danger);
}

.is-valid.form-control,
.is-valid.form-select,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: var(--bs-success);
  box-shadow: 0 0 0 0.125rem rgba(46,204,113,0.2);
}

.btn-primary {
  background: var(--gradient-primary);
  border: none;
  color: #ffffff;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.btn-primary:hover { background: var(--bs-primary-hover); box-shadow: var(--shadow-md); }

.btn-secondary {
  background: var(--bs-secondary);
  border: none;
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover { background: var(--bs-secondary-hover); box-shadow: var(--shadow-md); }

.btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); }

.btn-outline-primary:hover,
.btn-outline-primary:focus { background: var(--bs-primary); color: #ffffff; box-shadow: var(--shadow-sm); }

select.form-select { padding-right: 2.5rem; }

/* Dark theme select styling (native selects need explicit dark mode colors) */
[data-theme="dark"] select.form-select,
[data-theme="dark"] .form-select {
  background-color: #212529;
  color: var(--bs-body-color);
  border-color: var(--border-color);
}

/* Dark theme inputs & textareas: ensure dark background */
[data-theme="dark"] input.form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] .form-control {
  background-color: #2d2d2d;
  color: var(--bs-body-color);
  border-color: var(--border-color);
}

/* Ensure light theme inputs are readable */
[data-theme="light"] input.form-control,
[data-theme="light"] textarea.form-control,
[data-theme="light"] .form-control {
  background-color: #ffffff;
  color: #212529;
  border-color: var(--border-color);
}

/* Ensure light theme selects are readable */
[data-theme="light"] select.form-select,
[data-theme="light"] .form-select {
  background-color: #ffffff;
  color: #212529;
  border-color: var(--border-color);
}

/* Force high contrast for option elements in dark mode (Firefox/Chrome) */
[data-theme="dark"] select option {
  background-color: #212529;
  color: var(--bs-body-color);
}

/* Fallback for browsers that support color-scheme */
[data-theme="dark"] select {
  color-scheme: dark;
}

[data-theme="light"] select {
  color-scheme: light;
}

.form-switch .form-check-input {
  background-color: var(--bs-bg-subtle);
  border-color: var(--form-border);
  box-shadow: inset 0 0 0 1px var(--form-border);
}

.form-switch .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.form-switch .form-check-input:focus {
  box-shadow: var(--form-shadow-focus);
}

/* Compact helper used in ledger/filter bars */
.form-control-compact { padding: 0.45rem 0.65rem; font-size: 0.95rem; }

/* Keyboard focus visibility: ensure clear outline when tabbing */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* High-contrast focus for dark theme */
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] .form-control:focus-visible,
[data-theme="dark"] .form-select:focus-visible {
  outline-color: #64b5f6; /* lighten primary for dark bg */
}