@layer lf-components {
: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: var(--lf-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) {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

:where(.search-icon) {
  width: 16px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 16px;
}

:where(.search-icon svg) {
  width: 16px;
  min-width: 16px;
  height: 16px;
}

:where(.search-field > .search-input) {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

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

:where(.search-field > .search-input):focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

:where(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);
  font-size: var(--lf-font-size-xs);
  font-weight: var(--lf-font-weight-900);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

:where(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;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-surface);
  color: var(--lf-color-text);
  box-shadow: none;
  font: inherit;
  font-size: var(--lf-font-size-sm);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .settings-inline-input.is-saving,
  [data-setting-input].is-saving
) ) {
  border-color: rgba(var(--lf-rgb-warning), 0.38);
  background: rgba(var(--lf-rgb-warning), 0.08);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .settings-inline-input.is-saved,
  [data-setting-input].is-saved
) ) {
  border-color: rgba(var(--lf-rgb-success), 0.34);
  background: rgba(var(--lf-rgb-success), 0.08);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .settings-inline-input.is-error,
  [data-setting-input].is-error
) ) {
  border-color: rgba(var(--lf-rgb-danger), 0.34);
  background: rgba(var(--lf-rgb-danger), 0.08);
}
}