/* Scope to Compras page; our app uses data-theme, no need for data-bs-theme */
:root[data-theme='dark'] .app-main .form-select,
:root[data-theme='dark'] .app-main .form-control,
:root[data-theme='dark'] .app-main .input-group-text {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

:root[data-theme='dark'] .app-main .form-select:disabled,
:root[data-theme='dark'] .app-main .form-control:disabled {
  background-color: var(--bs-secondary-bg, color-mix(in srgb, var(--app-card) 85%, var(--app-bg) 15%)) !important;
  color: var(--bs-secondary-color) !important;
}

/* Dark mode strong overrides for Bootstrap controls inside app content */
:root[data-theme='dark'] .app-main .card .form-select,
:root[data-theme='dark'] .app-main .card .form-control,
:root[data-theme='dark'] .app-main .card .input-group-text{
  background-color: color-mix(in srgb, var(--app-card) 90%, var(--app-bg) 10%) !important;
  color: var(--app-fg) !important;
  border-color: var(--app-border) !important;
  color-scheme: dark;
  -webkit-appearance: none; /* enforce theme colors on WebKit */
  appearance: none;
}

:root[data-theme='dark'] .app-main .card .form-select:disabled,
:root[data-theme='dark'] .app-main .card .form-control:disabled{
  background-color: color-mix(in srgb, var(--app-card) 85%, var(--app-bg) 15%) !important;
  color: var(--bs-secondary-color) !important;
  border-color: var(--app-border) !important;
}

/* Ensure dropdown options also render dark */
:root[data-theme='dark'] .app-main .card select.form-select option,
:root[data-theme='dark'] .app-main .card select.form-select optgroup{
  background-color: var(--app-card) !important;
  color: var(--app-fg) !important;
}

/* Focus outline consistent */
:root[data-theme='dark'] .app-main .card .form-select:focus,
:root[data-theme='dark'] .app-main .card .form-control:focus{
  border-color: var(--app-accent) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-accent) 20%, transparent) !important;
}