:where(.search-input, .search-box, input, select, textarea, button) {
  font-family: var(--lf-font-sans);
}

:where(.lf-field) {
  display: grid;
  gap: var(--lf-space-2);
}

:where(.lf-label) {
  color: var(--lf-color-text-soft);
  font-size: var(--lf-font-size-sm);
  font-weight: 800;
}

:where(.lf-input, .lf-select, .lf-textarea) {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-surface);
  color: var(--lf-color-text);
  padding: 0 var(--lf-space-3);
  outline: none;
  transition:
    border-color var(--lf-transition-fast),
    box-shadow var(--lf-transition-fast),
    background var(--lf-transition-fast);
}

:where(.lf-textarea) {
  min-height: 96px;
  padding-top: var(--lf-space-3);
  resize: vertical;
}

:where(.lf-input:focus, .lf-select:focus, .lf-textarea:focus) {
  border-color: var(--lf-color-primary);
  box-shadow: var(--lf-focus-ring);
}

:where(.lf-input::placeholder, .lf-textarea::placeholder) {
  color: color-mix(in srgb, var(--lf-color-muted) 72%, white);
}

:where(.lf-input:disabled, .lf-select:disabled, .lf-textarea:disabled) {
  cursor: not-allowed;
  background: var(--lf-color-surface-muted);
  color: var(--lf-color-muted);
}

:where(.search-field, .search-input, .lead-input, .chat-input, .settings-value input, .settings-value select) {
  border-radius: var(--lf-radius-md);
}

:where(.search-field, .search-input, .lead-input, .chat-input, .settings-value input, .settings-value select, .settings-value textarea):focus {
  border-color: var(--lf-color-primary);
  box-shadow: var(--lf-focus-ring);
  outline: none;
}

body.dashboard-client-flat-theme > .shell :is(
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea,
  .search-field,
  .search-input,
  .lead-input,
  .chat-input
) {
  border-color: var(--lf-color-border) !important;
  border-radius: var(--lf-radius-md) !important;
  background: var(--lf-color-surface) !important;
  color: var(--lf-color-text) !important;
  box-shadow: none !important;
}

body.dashboard-client-flat-theme > .shell :is(
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea,
  .search-field,
  .search-input,
  .lead-input,
  .chat-input
):focus {
  border-color: var(--lf-color-primary) !important;
  box-shadow: var(--lf-focus-ring) !important;
  outline: none !important;
}

body.dashboard-client-flat-theme > .shell :is(
  .settings-label,
  .settings-row-label,
  .settings-card label,
  .dashboard-client-field label,
  .plans-create-form label,
  .patient-appointment-modal__field-label,
  .billing-eyebrow,
  .integration-panel-kicker,
  .system-status-kicker
) {
  color: var(--lf-color-muted) !important;
  font-size: var(--lf-font-size-xs) !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

body.dashboard-client-flat-theme > .shell :is(
  .settings-value,
  .settings-inline-input,
  [data-setting-input],
  .dashboard-client-field input,
  .dashboard-client-field select,
  .plans-create-form input,
  .patient-appointment-modal__field input,
  .patient-appointment-modal__field select
) {
  min-height: 42px !important;
  border: 1px solid var(--lf-color-border) !important;
  border-radius: var(--lf-radius-md) !important;
  background: var(--lf-color-surface) !important;
  color: var(--lf-color-text) !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: var(--lf-font-size-sm) !important;
}

body.dashboard-client-flat-theme > .shell :is(
  .settings-inline-input.is-saving,
  [data-setting-input].is-saving
) {
  border-color: rgba(245, 158, 11, 0.38) !important;
  background: rgba(245, 158, 11, 0.08) !important;
}

body.dashboard-client-flat-theme > .shell :is(
  .settings-inline-input.is-saved,
  [data-setting-input].is-saved
) {
  border-color: rgba(34, 197, 94, 0.34) !important;
  background: rgba(34, 197, 94, 0.08) !important;
}

body.dashboard-client-flat-theme > .shell :is(
  .settings-inline-input.is-error,
  [data-setting-input].is-error
) {
  border-color: rgba(239, 68, 68, 0.34) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}