/* Form primitives for Blazorponents. */
.bp-form-field {
  display: grid;
  gap: var(--bp-form-field-gap, 0.45rem);
}

.bp-form-field-inline {
  grid-template-columns: var(--bp-form-field-label-width, minmax(8rem, 12rem)) minmax(0, 1fr);
  column-gap: var(--bp-form-field-inline-gap, 1rem);
  row-gap: var(--bp-form-field-gap, 0.45rem);
  align-items: var(--bp-form-field-inline-align, start);
}

.bp-form-field-inline .bp-form-field-label {
  grid-column: 1;
}

.bp-form-field-inline .bp-form-field-body,
.bp-form-field-inline .bp-form-field-footer {
  grid-column: 2;
}

.bp-form-field-label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--bp-form-field-label-gap, 0.35rem);
}

.bp-form-field-body {
  min-width: 0;
}

.bp-form-field-footer {
  display: grid;
  gap: var(--bp-form-field-footer-gap, 0.25rem);
}

.bp-form-field-helper {
  font-size: 0.85rem;
  color: var(--bp-muted);
}

.bp-form-field-error {
  font-size: 0.85rem;
  color: var(--bp-danger);
}

.bp-form-field-required {
  font-size: 0.75rem;
  color: var(--bp-danger);
  font-weight: 600;
}

.bp-form {
  display: grid;
  gap: var(--bp-space-4, 1.5rem);
}

.bp-form-disabled {
  opacity: 0.65;
}

.bp-label {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-label-gap, 0.35rem);
  font-size: var(--bp-label-font-size, 0.75rem);
  text-transform: var(--bp-label-transform, uppercase);
  letter-spacing: var(--bp-label-letter-spacing, 0.12em);
  color: var(--bp-label-color, var(--bp-subtle));
}

.bp-label-size-small {
  --bp-label-font-size: 0.75rem;
  --bp-label-letter-spacing: 0.12em;
}

.bp-label-size-medium {
  --bp-label-font-size: 0.85rem;
  --bp-label-letter-spacing: 0.08em;
}

.bp-label-size-large {
  --bp-label-font-size: 0.95rem;
  --bp-label-letter-spacing: 0.05em;
}

.bp-label-variant-default {
  --bp-label-color: var(--bp-subtle);
}

.bp-label-variant-muted {
  --bp-label-color: var(--bp-muted);
}

.bp-label-variant-strong {
  --bp-label-color: var(--bp-ink);
  --bp-label-transform: none;
  --bp-label-letter-spacing: 0.02em;
  font-weight: 600;
}

.bp-label-text {
  text-transform: inherit;
  letter-spacing: inherit;
}

.bp-label-required {
  color: var(--bp-danger);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.bp-label-optional {
  color: var(--bp-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.bp-label-tooltip {
  display: inline-flex;
  align-items: center;
  color: var(--bp-muted);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
}

.bp-helper-text {
  margin: 0;
  font-size: var(--bp-helper-text-font-size, 0.85rem);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bp-helper-text-size-small {
  --bp-helper-text-font-size: 0.75rem;
}

.bp-helper-text-size-medium {
  --bp-helper-text-font-size: 0.85rem;
}

.bp-helper-text-size-large {
  --bp-helper-text-font-size: 0.95rem;
}

.bp-helper-text-content {
  display: inline-block;
}

.bp-helper-text-icon {
  display: inline-flex;
  align-items: center;
}

.bp-helper-text-trailing {
  display: inline-flex;
  align-items: center;
}

.bp-helper-text-default {
  color: var(--bp-muted);
}

.bp-helper-text-info {
  color: var(--bp-info);
}

.bp-helper-text-success {
  color: var(--bp-success);
}

.bp-helper-text-warning {
  color: var(--bp-warning);
}

.bp-helper-text-danger {
  color: var(--bp-danger);
}

.bp-helper-text-strong {
  font-weight: 600;
}

.bp-input,
.bp-text-area {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  font-size: 1rem;
}

.bp-text-area-auto {
  resize: none;
  overflow: hidden;
}

.bp-text-area-count {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  color: var(--bp-muted);
  font-variant-numeric: tabular-nums;
}

.bp-input-sm {
  padding: var(--bp-input-padding-sm, 0.4rem 0.6rem);
  font-size: var(--bp-input-font-size-sm, 0.85rem);
}

.bp-input-md {
  padding: var(--bp-input-padding-md, 0.6rem 0.8rem);
  font-size: var(--bp-input-font-size-md, 1rem);
}

.bp-input-lg {
  padding: var(--bp-input-padding-lg, 0.75rem 1rem);
  font-size: var(--bp-input-font-size-lg, 1.05rem);
}

.bp-input:disabled,
.bp-text-area:disabled,
.bp-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-number-input {
  appearance: textfield;
}

.bp-number-input-group {
  align-items: center;
}

.bp-number-input-spin {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bp-number-input-spin-button {
  border-radius: 10px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  padding: 0.2rem 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bp-number-input-spin-button:hover:not(:disabled) {
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
}

.bp-number-input-spin-button:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-number-input-spin-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-number-input-spin-icon {
  display: block;
  line-height: 1;
}

.bp-fieldset {
  margin: 0;
  padding: var(--bp-fieldset-padding, 1rem);
  border-radius: var(--bp-fieldset-radius, 14px);
  border: 1px solid var(--bp-fieldset-border-color, var(--bp-outline-muted));
  display: grid;
  gap: var(--bp-fieldset-gap, 0.75rem);
}

.bp-fieldset-disabled {
  opacity: 0.65;
}

.bp-fieldset-description {
  margin: 0;
  color: var(--bp-muted);
  font-size: 0.85rem;
}

.bp-fieldset-content {
  display: grid;
  gap: var(--bp-fieldset-content-gap, 0.75rem);
}

.bp-legend {
  display: grid;
  gap: var(--bp-legend-gap, 0.25rem);
  padding: 0 var(--bp-legend-padding-x, 0.35rem);
  font-size: var(--bp-legend-font-size, 0.75rem);
  text-transform: var(--bp-legend-transform, uppercase);
  letter-spacing: var(--bp-legend-letter-spacing, 0.12em);
  color: var(--bp-legend-color, var(--bp-subtle));
  font-weight: var(--bp-legend-font-weight, 600);
}

.bp-legend-size-small {
  --bp-legend-font-size: 0.75rem;
  --bp-legend-letter-spacing: 0.12em;
  --bp-legend-description-size: 0.85rem;
}

.bp-legend-size-medium {
  --bp-legend-font-size: 0.85rem;
  --bp-legend-letter-spacing: 0.08em;
  --bp-legend-description-size: 0.9rem;
}

.bp-legend-size-large {
  --bp-legend-font-size: 0.95rem;
  --bp-legend-letter-spacing: 0.05em;
  --bp-legend-description-size: 0.95rem;
}

.bp-legend-variant-default {
  --bp-legend-color: var(--bp-subtle);
}

.bp-legend-variant-muted {
  --bp-legend-color: var(--bp-muted);
}

.bp-legend-variant-strong {
  --bp-legend-color: var(--bp-ink);
  --bp-legend-transform: none;
  --bp-legend-letter-spacing: 0.02em;
  --bp-legend-font-weight: 600;
}

.bp-legend-row {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-legend-row-gap, 0.35rem);
  flex-wrap: wrap;
}

.bp-legend-text {
  text-transform: inherit;
  letter-spacing: inherit;
}

.bp-legend-required {
  color: var(--bp-legend-required-color, var(--bp-danger));
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.bp-legend-description {
  font-size: var(--bp-legend-description-size, 0.85rem);
  color: var(--bp-legend-description-color, var(--bp-muted));
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.bp-password-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bp-password-field .bp-input {
  flex: 1 1 auto;
}

.bp-password-strength {
  display: grid;
  gap: 0.35rem;
}

.bp-password-toggle {
  border-radius: 10px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bp-password-toggle-icon {
  display: inline-flex;
  align-items: center;
}

.bp-password-toggle:hover:not(:disabled) {
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
}

.bp-password-toggle:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-input:focus,
.bp-text-area:focus {
  outline: none;
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
  box-shadow: var(--bp-focus-ring);
}

.bp-select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  font-size: 1rem;
}

.bp-select:focus {
  outline: none;
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
  box-shadow: var(--bp-focus-ring);
}

.bp-autocomplete {
  display: block;
}

.bp-autocomplete-match {
  background: var(--bp-accent-muted);
  color: inherit;
  border-radius: 0.35rem;
  padding: 0 0.2rem;
}

.bp-combobox {
  width: 100%;
}

.bp-multi-select {
  display: grid;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-multi-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-space-2, 0.75rem);
  flex-wrap: wrap;
}

.bp-multi-select-header-content {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bp-multi-select-count {
  font-size: 0.85rem;
  color: var(--bp-muted);
  font-weight: 500;
}

.bp-multi-select-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bp-multi-select-action {
  background: none;
  border: none;
  color: var(--bp-accent);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0;
  cursor: pointer;
}

.bp-multi-select-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-multi-select-items {
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-multi-select-horizontal .bp-multi-select-items {
  flex-direction: row;
  flex-wrap: wrap;
}

.bp-checkbox,
.bp-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.bp-checkbox-label,
.bp-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.bp-checkbox-input {
  width: 44px;
  height: 24px;
  accent-color: var(--bp-accent);
}

.bp-checkbox-text {
  font-size: 0.95rem;
  color: var(--bp-ink);
  font-weight: 600;
}

.bp-checkbox-label-start .bp-checkbox-label {
  flex-direction: row-reverse;
}

.bp-switch-label-start .bp-switch-label {
  flex-direction: row-reverse;
}

.bp-checkbox-sm .bp-checkbox-input {
  width: 36px;
  height: 20px;
}

.bp-checkbox-lg .bp-checkbox-input {
  width: 52px;
  height: 28px;
}

.bp-checkbox-sm .bp-checkbox-text {
  font-size: 0.85rem;
}

.bp-checkbox-lg .bp-checkbox-text {
  font-size: 1.05rem;
}

.bp-switch {
  --bp-switch-width: 44px;
  --bp-switch-height: 24px;
  --bp-switch-thumb-size: 20px;
  --bp-switch-thumb-offset: 2px;
  --bp-switch-track-padding: 0.35rem;
  --bp-switch-label-size: 0.95rem;
}

.bp-switch-sm {
  --bp-switch-width: 36px;
  --bp-switch-height: 20px;
  --bp-switch-thumb-size: 16px;
  --bp-switch-thumb-offset: 2px;
  --bp-switch-track-padding: 0.25rem;
  --bp-switch-label-size: 0.85rem;
}

.bp-switch-lg {
  --bp-switch-width: 52px;
  --bp-switch-height: 28px;
  --bp-switch-thumb-size: 24px;
  --bp-switch-thumb-offset: 2px;
  --bp-switch-track-padding: 0.4rem;
  --bp-switch-label-size: 1.05rem;
}

.bp-switch-control {
  position: relative;
  width: var(--bp-switch-width);
  height: var(--bp-switch-height);
  flex: 0 0 auto;
  display: inline-flex;
}

.bp-switch-input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.bp-switch-track {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--bp-switch-track-bg, var(--bp-control-bg));
  border: 1px solid var(--bp-switch-track-border, var(--bp-control-border));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--bp-switch-track-padding);
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  pointer-events: none;
}

.bp-switch-track-content {
  font-size: var(--bp-switch-track-font-size, 0.65rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bp-switch-track-fg, var(--bp-muted));
  white-space: nowrap;
}

.bp-switch-thumb {
  position: absolute;
  top: 50%;
  left: var(--bp-switch-thumb-offset);
  width: var(--bp-switch-thumb-size);
  height: var(--bp-switch-thumb-size);
  border-radius: 999px;
  background: var(--bp-switch-thumb-bg, var(--bp-surface, #fff));
  box-shadow: var(--bp-switch-thumb-shadow, 0 2px 6px rgba(15, 23, 42, 0.15));
  transform: translateY(-50%);
  transition: left 120ms ease, background-color 120ms ease, color 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bp-switch-thumb-fg, var(--bp-control-fg));
  pointer-events: none;
}

.bp-switch-thumb-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bp-switch-text {
  font-size: var(--bp-switch-label-size, 0.95rem);
  color: var(--bp-ink);
  font-weight: 600;
}

.bp-switch-input:checked + .bp-switch-track {
  background: var(--bp-switch-track-bg-checked, var(--bp-accent));
  border-color: var(--bp-switch-track-border-checked, var(--bp-accent));
}

.bp-switch-input:checked + .bp-switch-track .bp-switch-track-content {
  color: var(--bp-switch-track-fg-checked, #fff);
}

.bp-switch-input:checked ~ .bp-switch-thumb {
  left: calc(100% - var(--bp-switch-thumb-size) - var(--bp-switch-thumb-offset));
  background: var(--bp-switch-thumb-bg-checked, var(--bp-surface, #fff));
  color: var(--bp-switch-thumb-fg-checked, var(--bp-control-fg));
}

.bp-switch-input:focus-visible + .bp-switch-track {
  box-shadow: var(--bp-focus-ring);
  border-color: var(--bp-control-border-hover);
}

.bp-switch-input:disabled {
  cursor: not-allowed;
}

.bp-switch-input:disabled + .bp-switch-track,
.bp-switch-input:disabled ~ .bp-switch-thumb {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  --bp-radio-size: 20px;
  --bp-radio-text-size: 0.95rem;
  --bp-radio-description-size: 0.85rem;
}

.bp-radio-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.bp-radio-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bp-radio-size);
  height: var(--bp-radio-size);
  flex: 0 0 auto;
}

.bp-radio-input {
  width: var(--bp-radio-size);
  height: var(--bp-radio-size);
  accent-color: var(--bp-accent);
  margin: 0;
}

.bp-radio-content {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bp-radio-text {
  font-size: var(--bp-radio-text-size);
  color: var(--bp-ink);
  font-weight: 600;
}

.bp-radio-description {
  font-size: var(--bp-radio-description-size);
  color: var(--bp-muted);
}

.bp-radio-label-start .bp-radio-label {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.bp-radio-sm {
  --bp-radio-size: 16px;
  --bp-radio-text-size: 0.85rem;
  --bp-radio-description-size: 0.75rem;
}

.bp-radio-lg {
  --bp-radio-size: 24px;
  --bp-radio-text-size: 1.05rem;
  --bp-radio-description-size: 0.95rem;
}

.bp-radio-variant-muted .bp-radio-text {
  color: var(--bp-muted);
  font-weight: 500;
}

.bp-radio-variant-muted .bp-radio-description {
  color: var(--bp-subtle);
}

.bp-radio-variant-strong .bp-radio-text {
  font-weight: 700;
}

.bp-radio-variant-strong .bp-radio-description {
  color: var(--bp-ink);
}

.bp-radio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bp-radio-size);
  height: var(--bp-radio-size);
}

.bp-radio-icon svg {
  width: 100%;
  height: 100%;
}

.bp-radio-icon-selected {
  color: var(--bp-accent);
}

.bp-radio-icon-unselected {
  color: var(--bp-muted);
}

.bp-radio-custom .bp-radio-input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.bp-radio-custom .bp-radio-icon {
  position: absolute;
  inset: 0;
}

.bp-radio-custom .bp-radio-icon-selected {
  opacity: 0;
}

.bp-radio-custom .bp-radio-input:checked ~ .bp-radio-icon-selected {
  opacity: 1;
}

.bp-radio-custom .bp-radio-input:checked ~ .bp-radio-icon-unselected {
  opacity: 0;
}

.bp-radio-custom .bp-radio-input:focus-visible ~ .bp-radio-icon {
  outline: 2px solid var(--bp-focus-ring);
  outline-offset: 2px;
  border-radius: 999px;
}

.bp-radio-custom .bp-radio-input:disabled ~ .bp-radio-icon {
  color: var(--bp-subtle);
}

.bp-slider {
  width: 100%;
}

.bp-slider-stack {
  display: grid;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-slider-stack-vertical {
  justify-items: center;
}

.bp-slider-control {
  position: relative;
  display: grid;
  gap: var(--bp-slider-control-gap, 0.35rem);
}

.bp-slider-track,
.bp-slider-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bp-slider-value {
  font-size: 0.85rem;
  color: var(--bp-muted);
  font-weight: 600;
}

.bp-slider-labels,
.bp-slider-tick-list {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--bp-muted);
}

.bp-slider-label {
  font-weight: 600;
}

.bp-slider.bp-slider-vertical {
  width: var(--bp-slider-thickness, 0.75rem);
  height: var(--bp-slider-length, 10rem);
  writing-mode: vertical-lr;
  direction: rtl;
}

.bp-range-slider {
  display: grid;
  gap: var(--bp-space-2, 0.75rem);
  --bp-range-start: 0%;
  --bp-range-end: 100%;
  --bp-range-track: var(--bp-control-border);
  --bp-range-fill: var(--bp-accent);
}

.bp-range-slider .bp-slider {
  background: linear-gradient(to right,
      var(--bp-range-track) 0%,
      var(--bp-range-track) var(--bp-range-start),
      var(--bp-range-fill) var(--bp-range-start),
      var(--bp-range-fill) var(--bp-range-end),
      var(--bp-range-track) var(--bp-range-end),
      var(--bp-range-track) 100%);
  border-radius: 999px;
}

.bp-range-slider-tooltips {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--bp-muted);
}

.bp-range-slider-tooltip {
  font-weight: 600;
}

.bp-date-range-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-date-range-field {
  display: grid;
  gap: 0.35rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.bp-date-range-input {
  flex: 1 1 12rem;
}

.bp-date-range-separator {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bp-subtle);
}

.bp-search-input {
  display: block;
}

.bp-search-input-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bp-search-input-text {
  flex: 1 1 auto;
}

.bp-search-input-button,
.bp-search-input-clear {
  border-radius: 10px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bp-search-input-button:hover:not(:disabled),
.bp-search-input-clear:hover:not(:disabled) {
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
}

.bp-search-input-button:focus-visible,
.bp-search-input-clear:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-file-upload {
  display: grid;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-file-upload-input {
  width: 100%;
}

.bp-file-upload-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.bp-file-upload-trigger:hover:not(.bp-file-upload-trigger-disabled) {
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
}

.bp-file-upload-trigger:focus-within {
  outline: none;
  border-color: var(--bp-control-border-hover);
  box-shadow: var(--bp-focus-ring);
}

.bp-file-upload-trigger-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-file-upload-input-hidden {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.bp-file-upload-trigger-disabled .bp-file-upload-input-hidden {
  cursor: not-allowed;
}

.bp-file-upload-selected {
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
}

.bp-inline-edit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.bp-inline-edit-display {
  flex: 1;
  min-width: 0;
}

.bp-inline-edit-placeholder {
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
}

.bp-inline-edit-editor {
  flex: 1;
  min-width: 0;
}

.bp-inline-edit-input {
  width: 100%;
}

.bp-inline-edit-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bp-choice-group {
  display: grid;
  gap: var(--bp-choice-group-gap, 0.75rem);
  max-width: var(--bp-choice-group-max-width, 100%);
}

.bp-choice-group-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.bp-choice-group-header {
  display: grid;
  gap: 0.35rem;
}

.bp-choice-group-title,
.bp-choice-group-legend {
  font-weight: 600;
  color: var(--bp-ink);
}

.bp-choice-group-legend {
  margin: 0;
  padding: 0;
}

.bp-choice-group-description {
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
}

.bp-choice-group-options {
  display: grid;
  gap: var(--bp-choice-group-gap, 0.75rem);
  grid-auto-flow: var(--bp-choice-group-flow, row);
  grid-template-columns: var(--bp-choice-group-template-columns, none);
}

.bp-choice-group-summary {
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
}

.bp-choice-group-empty {
  font-size: 0.85rem;
  color: var(--bp-muted);
  grid-column: 1 / -1;
}

.bp-file-upload-list {
  display: grid;
  gap: 0.75rem;
  max-width: var(--bp-file-upload-list-max-width, 100%);
}

.bp-file-upload-list-header {
  display: grid;
  gap: 0.35rem;
}

.bp-file-upload-list-items {
  display: grid;
  gap: 0.75rem;
}

.bp-file-upload-item {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
}

.bp-file-upload-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.bp-file-upload-size {
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
}

.bp-file-upload-status {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bp-ink-muted);
}

.bp-file-upload-status-uploading {
  color: var(--bp-accent-strong);
}

.bp-file-upload-status-complete {
  color: var(--bp-success);
}

.bp-file-upload-status-error {
  color: var(--bp-danger);
}

.bp-file-upload-actions {
  display: flex;
  gap: 0.5rem;
}

.bp-address-autocomplete {
  display: block;
}

.bp-address-autocomplete-suggestion {
  display: grid;
  gap: 0.15rem;
  text-align: left;
}

.bp-address-autocomplete-line {
  font-weight: 600;
}

.bp-address-autocomplete-meta {
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
}

.bp-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-rating-list {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bp-rating-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bp-muted);
}

.bp-rating-item {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-muted);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bp-rating-item-active {
  color: var(--bp-accent);
  border-color: var(--bp-accent);
}

.bp-rating-item-half {
  color: var(--bp-accent);
  border-color: var(--bp-accent);
}

.bp-rating-icon {
  position: relative;
  display: inline-block;
  line-height: 1;
  pointer-events: none;
}

.bp-rating-icon-base {
  display: block;
  color: var(--bp-muted);
}

.bp-rating-icon-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bp-rating-fill, 0%);
  overflow: hidden;
  color: var(--bp-accent);
}

.bp-rating-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.bp-rating-hit-half {
  left: 0;
}

.bp-rating-hit-full {
  right: 0;
}

.bp-rating-readonly .bp-rating-item {
  cursor: default;
}

.bp-rating-item:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-rating-item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-tag-input {
  display: grid;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-tag-input-body {
  display: grid;
  gap: 0.4rem;
}

.bp-tag-input-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: 12px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
}

.bp-tag-input-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
  font-size: 0.85rem;
}

.bp-tag-input-label {
  color: var(--bp-ink);
  font-weight: 600;
}

.bp-tag-input-remove {
  border: none;
  background: transparent;
  color: var(--bp-muted);
  cursor: pointer;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bp-tag-input-remove:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
  border-radius: 6px;
}

.bp-tag-input-input {
  flex: 1 1 8rem;
  min-width: 8rem;
  border: none;
  background: transparent;
  color: var(--bp-control-fg);
  padding: 0.35rem 0.2rem;
  font-size: 0.95rem;
}

.bp-tag-input-input:focus {
  outline: none;
}

.bp-tag-input-suggestions {
  display: grid;
  gap: 0.25rem;
  padding: 0.4rem;
  border-radius: 12px;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
}

.bp-tag-input-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-align: left;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bp-ink);
  font-weight: 600;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-tag-input-suggestion:hover,
.bp-tag-input-suggestion:focus-visible {
  outline: none;
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline-muted);
}

.bp-tag-input-suggestion-label {
  font-size: 0.9rem;
}

.bp-otp-input {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bp-otp-input-gap, 0.5rem);
}

.bp-otp-input-cell {
  flex: 0 0 auto;
  width: var(--bp-otp-input-cell-size, 2.6rem);
  padding: var(--bp-otp-input-cell-padding, 0.6rem 0);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bp-otp-input-cell-group {
  margin-left: var(--bp-otp-input-group-gap, 0.7rem);
}

.bp-validation-message,
.bp-validation-summary {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--bp-danger);
  display: grid;
  gap: 0.25rem;
}

.bp-validation-message li,
.bp-validation-summary li {
  font-size: 0.85rem;
}

.bp-validation-message-header,
.bp-validation-message-separator,
.bp-validation-summary-title,
.bp-validation-summary-description {
  list-style: none;
}

.bp-currency-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bp-currency-input-field {
  flex: 1 1 auto;
  min-width: 0;
}

.bp-currency-addon {
  font-weight: 600;
  color: var(--bp-muted);
}

.bp-color-picker-stack {
  display: grid;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-color-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.bp-color-picker-input {
  width: 3rem;
  height: 2.4rem;
  padding: 0.15rem;
  border-radius: 10px;
}

.bp-color-picker-swatch {
  width: var(--bp-color-picker-swatch-size, 1.6rem);
  height: var(--bp-color-picker-swatch-size, 1.6rem);
  border-radius: 10px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-surface);
  flex: 0 0 auto;
}

.bp-color-picker-value {
  font-size: 0.85rem;
  color: var(--bp-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bp-color-picker-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.bp-color-picker-preset {
  width: var(--bp-color-picker-swatch-size, 1.6rem);
  height: var(--bp-color-picker-swatch-size, 1.6rem);
  border-radius: 10px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-surface);
  padding: 0;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.bp-color-picker-preset:hover:not(:disabled) {
  border-color: var(--bp-control-border-hover);
  transform: translateY(-1px);
}

.bp-color-picker-preset-selected {
  border-color: var(--bp-accent);
  box-shadow: var(--bp-focus-ring);
}

.bp-color-picker-preset:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-color-picker-preset:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-typeahead {
  display: block;
}

.bp-toggle-group,
.bp-button-radio-group {
  flex-wrap: wrap;
}

.bp-toggle-group-button,
.bp-button-radio {
  min-width: 0;
}

.bp-button-radio-content {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-space-2);
}

.bp-button-radio-icon {
  flex: 0 0 auto;
}

.bp-button-radio-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
}

.bp-button-radio-label {
  line-height: 1.1;
}

.bp-button-radio-description {
  font-size: 0.85em;
  font-weight: 400;
  color: var(--bp-muted);
}

.bp-input-group {
  display: flex;
  align-items: var(--bp-input-group-align, center);
  justify-content: var(--bp-input-group-justify, flex-start);
  gap: var(--bp-input-group-gap, 0.5rem);
  flex-wrap: var(--bp-input-group-wrap, nowrap);
}

@media (min-width: 640px) {
  .bp-input-group {
    align-items: var(--bp-input-group-align-sm, var(--bp-input-group-align, center));
    justify-content: var(--bp-input-group-justify-sm, var(--bp-input-group-justify, flex-start));
    gap: var(--bp-input-group-gap-sm, var(--bp-input-group-gap, 0.5rem));
    flex-wrap: var(--bp-input-group-wrap-sm, var(--bp-input-group-wrap, nowrap));
  }
}

@media (min-width: 768px) {
  .bp-input-group {
    align-items: var(--bp-input-group-align-md, var(--bp-input-group-align-sm, var(--bp-input-group-align, center)));
    justify-content: var(--bp-input-group-justify-md, var(--bp-input-group-justify-sm, var(--bp-input-group-justify, flex-start)));
    gap: var(--bp-input-group-gap-md, var(--bp-input-group-gap-sm, var(--bp-input-group-gap, 0.5rem)));
    flex-wrap: var(--bp-input-group-wrap-md, var(--bp-input-group-wrap-sm, var(--bp-input-group-wrap, nowrap)));
  }
}

@media (min-width: 1024px) {
  .bp-input-group {
    align-items: var(--bp-input-group-align-lg, var(--bp-input-group-align-md, var(--bp-input-group-align, center)));
    justify-content: var(--bp-input-group-justify-lg, var(--bp-input-group-justify-md, var(--bp-input-group-justify, flex-start)));
    gap: var(--bp-input-group-gap-lg, var(--bp-input-group-gap-md, var(--bp-input-group-gap, 0.5rem)));
    flex-wrap: var(--bp-input-group-wrap-lg, var(--bp-input-group-wrap-md, var(--bp-input-group-wrap, nowrap)));
  }
}

@media (min-width: 1280px) {
  .bp-input-group {
    align-items: var(--bp-input-group-align-xl, var(--bp-input-group-align-lg, var(--bp-input-group-align, center)));
    justify-content: var(--bp-input-group-justify-xl, var(--bp-input-group-justify-lg, var(--bp-input-group-justify, flex-start)));
    gap: var(--bp-input-group-gap-xl, var(--bp-input-group-gap-lg, var(--bp-input-group-gap, 0.5rem)));
    flex-wrap: var(--bp-input-group-wrap-xl, var(--bp-input-group-wrap-lg, var(--bp-input-group-wrap, nowrap)));
  }
}

.bp-input-group-field {
  flex: 1 1 auto;
}

.bp-input-group-field > .bp-input,
.bp-input-group-field > .bp-text-area,
.bp-input-group-field > .bp-select {
  width: 100%;
}

.bp-input-group-addon {
  display: inline-flex;
  align-items: center;
  color: var(--bp-muted);
  font-weight: 600;
}

.bp-phone-country-select {
  width: auto;
  min-width: 4.5rem;
}

.bp-phone-dial {
  font-weight: 600;
}

.bp-phone-extension {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bp-phone-extension-label {
  font-size: 0.85rem;
  color: var(--bp-muted);
  font-weight: 600;
}

.bp-phone-extension-input {
  width: 6rem;
}

.bp-form-repeater {
  display: grid;
  gap: var(--bp-form-repeater-gap, var(--bp-space-3, 1rem));
}

.bp-form-repeater-list {
  display: grid;
  gap: var(--bp-form-repeater-list-gap, var(--bp-space-3, 1rem));
}

.bp-form-repeater-item {
  border: 1px solid var(--bp-outline-muted);
  border-radius: var(--bp-form-repeater-item-radius, 14px);
  padding: var(--bp-form-repeater-item-padding, 1rem);
  background: var(--bp-surface);
  display: grid;
  gap: var(--bp-form-repeater-item-gap, 0.75rem);
}

.bp-form-repeater-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bp-form-repeater-item-header-gap, 0.75rem);
}

.bp-form-repeater-item-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bp-subtle);
  font-weight: 600;
}

.bp-form-repeater-item-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-form-repeater-item-actions-gap, 0.5rem);
  flex-wrap: wrap;
  margin-left: auto;
}

.bp-form-repeater-action {
  border-radius: 10px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bp-form-repeater-action:hover:not(:disabled) {
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
}

.bp-form-repeater-action:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-form-repeater-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-form-repeater-empty {
  margin: 0;
  color: var(--bp-muted);
  font-size: 0.9rem;
}

.bp-wizard {
  display: grid;
  gap: var(--bp-space-4, 1.5rem);
}

.bp-wizard-header,
.bp-wizard-footer {
  display: grid;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-wizard-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-wizard-step-header {
  display: grid;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-wizard-progress {
  display: grid;
  gap: 0.35rem;
}

.bp-wizard-progress-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.bp-wizard-progress-label {
  font-size: 0.85rem;
  color: var(--bp-muted);
}

.bp-wizard-progress-title {
  font-weight: 600;
  color: var(--bp-ink);
}

.bp-wizard-progress-track {
  --bp-wizard-progress: 0%;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--bp-outline-muted);
  overflow: hidden;
}

.bp-wizard-progress-bar {
  display: block;
  height: 100%;
  width: var(--bp-wizard-progress);
  background: var(--bp-accent);
  border-radius: inherit;
  transition: width 140ms ease;
}

.bp-wizard-step-button {
  width: 100%;
  border: 1px solid var(--bp-outline-muted);
  border-radius: 14px;
  background: var(--bp-surface);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.bp-wizard-step-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-wizard-step-button:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-wizard-step-active {
  border-color: var(--bp-accent);
  box-shadow: var(--bp-focus-ring);
}

.bp-wizard-step-index {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--bp-surface-muted);
  color: var(--bp-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.bp-wizard-step-active .bp-wizard-step-index {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
}

.bp-wizard-step-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bp-wizard-step-title {
  font-weight: 600;
  color: var(--bp-ink);
}

.bp-wizard-step-desc {
  font-size: 0.85rem;
  color: var(--bp-muted);
}

.bp-wizard-step-summary {
  font-size: 0.8rem;
  color: var(--bp-muted);
}

.bp-wizard-body {
  display: grid;
  gap: var(--bp-space-3, 1rem);
}

.bp-wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--bp-space-2, 0.75rem);
  flex-wrap: wrap;
}

.bp-wizard-nav-template {
  display: flex;
  justify-content: space-between;
  gap: var(--bp-space-2, 0.75rem);
  flex-wrap: wrap;
  width: 100%;
}

.bp-address-form {
  display: grid;
  gap: var(--bp-address-form-gap, var(--bp-space-3, 1rem));
}

.bp-address-form-grid {
  display: grid;
  gap: var(--bp-address-form-gap, var(--bp-space-3, 1rem));
  grid-template-columns: repeat(var(--bp-address-form-columns, auto-fit), minmax(var(--bp-address-form-min-column-width, 10rem), 1fr));
}

.bp-address-form-item {
  min-width: 0;
  grid-column: span var(--bp-address-form-item-span, 1);
}

.bp-rich-text-editor {
  display: grid;
  gap: var(--bp-space-2, 0.75rem);
}

.bp-rich-text-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bp-rich-text-button {
  border-radius: 10px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bp-rich-text-button:hover:not(:disabled) {
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
}

.bp-rich-text-button:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-rich-text-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-rich-text-preview {
  border: 1px solid var(--bp-outline-muted);
  border-radius: 12px;
  padding: 0.75rem;
  background: var(--bp-surface);
}

.bp-rich-text-preview pre {
  margin: 0;
  font-family: inherit;
  white-space: pre-wrap;
}

/* Segmented control */
.bp-segmented {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--bp-btn-radius, 8px);
  border: 1px solid var(--bp-outline, #cbd5e1);
  background: var(--bp-surface-muted, #f1f5f9);
  justify-content: var(--bp-segmented-align, flex-start);
  align-items: center;
}

.bp-segmented.bp-segmented-vertical {
  flex-direction: column;
  align-items: stretch;
}

.bp-segmented .bp-btn {
  border-color: transparent;
  background-color: transparent;
  color: var(--bp-muted, #475569);
  box-shadow: none;
  min-width: var(--bp-segmented-segment-width, auto);
  justify-content: var(--bp-segmented-content-align, center);
}

.bp-segmented .bp-btn.bp-segmented-selected {
  background: var(--bp-surface-strong, #f8fafc);
  color: var(--bp-ink, #0f172a);
  box-shadow: var(--bp-shadow-1, 0 1px 2px rgba(15, 23, 42, 0.08));
}

.bp-segmented-content {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-btn-gap, 0.5rem);
}

.bp-segmented-icon {
  display: inline-flex;
  align-items: center;
}

/* Search bar */
.bp-search-bar {
  display: grid;
  gap: 0.5rem;
}

.bp-search-bar-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 16px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bp-search-bar-field:focus-within {
  border-color: var(--bp-control-border-hover);
  box-shadow: var(--bp-focus-ring);
}

.bp-search-bar-input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  color: var(--bp-ink);
  font-size: 1rem;
}

.bp-search-bar-input:focus {
  outline: none;
}

.bp-search-bar-leading,
.bp-search-bar-trailing {
  display: inline-flex;
  align-items: center;
}

.bp-search-bar-submit,
.bp-search-bar-clear,
.bp-search-bar-suggestion {
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bp-ink);
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0.65rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-search-bar-submit:hover,
.bp-search-bar-clear:hover,
.bp-search-bar-suggestion:hover {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline-muted);
}

.bp-search-bar-suggestions {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  border-radius: 14px;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
}

.bp-search-bar-suggestions-header {
  font-size: 0.8rem;
  color: var(--bp-muted);
}

.bp-search-bar-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.bp-search-bar-suggestion[aria-selected="true"] {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline-muted);
}

.bp-search-bar-empty {
  font-size: 0.85rem;
  color: var(--bp-muted);
}

.bp-search-bar-match {
  background: var(--bp-accent-muted);
  color: inherit;
  border-radius: 0.35rem;
  padding: 0 0.2rem;
}

.bp-input-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--bp-muted);
}

.bp-input-clear {
  border-radius: 10px;
  border: 1px solid var(--bp-control-border);
  background: var(--bp-control-bg);
  color: var(--bp-control-fg);
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.bp-input-clear:hover:not(:disabled) {
  background: var(--bp-control-bg-hover);
  border-color: var(--bp-control-border-hover);
}

.bp-input-clear:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-date-picker-icon {
  display: block;
}

/* File dropzone */
.bp-file-dropzone {
  max-width: var(--bp-file-dropzone-max-width, 100%);
}

.bp-file-dropzone-label {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  border: 2px dashed var(--bp-outline-muted);
  border-radius: 16px;
  padding: 1.5rem;
  background: var(--bp-surface);
  color: var(--bp-ink);
  cursor: pointer;
  text-align: center;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.bp-file-dropzone-label:focus-visible {
  border-color: var(--bp-accent);
  box-shadow: var(--bp-focus-ring);
}

.bp-file-dropzone-dragging .bp-file-dropzone-label {
  border-color: var(--bp-accent);
  background: var(--bp-surface-muted);
  box-shadow: var(--bp-focus-ring);
}

.bp-file-dropzone-disabled .bp-file-dropzone-label {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-file-dropzone-input {
  display: none;
}

.bp-file-dropzone-body {
  display: grid;
  gap: 0.35rem;
}

.bp-file-dropzone-action {
  font-size: 0.85rem;
  color: var(--bp-accent-strong);
}

/* File preview */
.bp-file-preview {
  display: flex;
  align-items: center;
  gap: var(--bp-file-preview-gap, 1rem);
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
}

.bp-file-preview-clickable {
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.bp-file-preview-clickable:hover {
  border-color: var(--bp-outline, #cbd5e1);
}

.bp-file-preview-clickable:focus-visible {
  outline: none;
  border-color: var(--bp-accent);
  box-shadow: var(--bp-focus-ring);
}

.bp-file-preview-media {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bp-surface-muted);
  font-weight: 600;
  color: var(--bp-ink);
}

.bp-file-preview-body {
  flex: 1;
  display: grid;
  gap: 0.2rem;
}

.bp-file-preview-meta,
.bp-file-preview-status {
  font-size: 0.85rem;
  color: var(--bp-ink-muted);
}

.bp-file-preview-actions {
  display: flex;
  gap: 0.5rem;
}

/* Stepper */
.bp-stepper {
  display: block;
  --bp-stepper-indicator-column: auto;
  --bp-stepper-indicator-gap: var(--bp-stepper-label-gap, 0.5rem);
  --bp-stepper-indicator-display: inline-flex;
  --bp-stepper-text-gap: 0.15rem;
  --bp-stepper-description-display: block;
  --bp-stepper-connector-length: 2rem;
  --bp-stepper-connector-gap: 0.5rem;
  --bp-stepper-connector-color: var(--bp-outline-muted);
  --bp-stepper-connector-offset: calc(var(--bp-stepper-indicator-size, 1.6rem) / 2);
}

.bp-stepper-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--bp-stepper-gap, 0.75rem);
}

.bp-stepper-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.bp-stepper-vertical {
  flex-direction: column;
  align-items: stretch;
}

.bp-stepper-step {
  display: flex;
  align-items: center;
}

.bp-stepper-vertical .bp-stepper-step {
  flex-direction: column;
  align-items: flex-start;
}

.bp-stepper-button {
  display: grid;
  grid-template-columns: var(--bp-stepper-indicator-column, auto) 1fr;
  align-items: center;
  gap: var(--bp-stepper-indicator-gap, var(--bp-stepper-label-gap, 0.5rem));
  padding: var(--bp-stepper-item-padding, 0.4rem 0.6rem);
  border-radius: 999px;
  border: 1px solid var(--bp-outline-muted);
  background: var(--bp-surface);
  color: var(--bp-ink);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bp-stepper-button:hover {
  background: var(--bp-surface-hover);
  border-color: var(--bp-outline);
}

.bp-stepper-button-active {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
  border-color: transparent;
}

.bp-stepper-button-complete {
  border-color: var(--bp-accent);
  color: var(--bp-accent-strong);
}

.bp-stepper-step-active .bp-stepper-button {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
  border-color: transparent;
}

.bp-stepper-step-complete .bp-stepper-button {
  border-color: var(--bp-accent);
  color: var(--bp-accent-strong);
}

.bp-stepper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bp-stepper-indicator {
  width: var(--bp-stepper-indicator-size, 1.6rem);
  height: var(--bp-stepper-indicator-size, 1.6rem);
  border-radius: 999px;
  border: 1px solid var(--bp-outline-muted);
  display: var(--bp-stepper-indicator-display, inline-flex);
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  background: var(--bp-surface);
}

.bp-stepper-step-complete .bp-stepper-indicator {
  background: var(--bp-accent-muted);
  color: var(--bp-accent-strong);
  border-color: transparent;
}

.bp-stepper-text {
  display: grid;
  gap: var(--bp-stepper-text-gap, 0.15rem);
  text-align: left;
}

.bp-stepper-description {
  display: var(--bp-stepper-description-display, block);
  font-size: 0.8rem;
  color: var(--bp-muted);
  font-weight: 500;
}

.bp-stepper-connector {
  flex: 0 0 auto;
  width: var(--bp-stepper-connector-length, 2rem);
  height: 2px;
  border-radius: 999px;
  background: var(--bp-stepper-connector-color, var(--bp-outline-muted));
  margin-left: var(--bp-stepper-connector-gap, 0.5rem);
}

.bp-stepper-vertical .bp-stepper-connector {
  width: 2px;
  height: var(--bp-stepper-connector-length, 1.5rem);
  margin: var(--bp-stepper-connector-gap, 0.5rem) 0 0 var(--bp-stepper-connector-offset, calc(var(--bp-stepper-indicator-size, 1.6rem) / 2));
}