/* Form */
.bx .field { display: flex; flex-direction: column; gap: 6px; }
.bx .field label { font-size: var(--bx-text-xs); color: var(--bx-ink-3); font-weight: 600; }
.bx .input, .bx .select, .bx textarea.input {
  appearance: none;
  font: inherit; font-family: var(--bx-font-sans);
  border: 1px solid var(--bx-line-2);
  background: white;
  color: var(--bx-ink);
  border-radius: var(--bx-r);
  min-height: var(--bx-control-h);
  padding: 8px var(--bx-control-pad-x);
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.bx-dark .input, .bx-dark .select, .bx-dark textarea.input {
  background: rgba(var(--bx-white-rgb),0.04);
  border-color: rgba(var(--bx-white-rgb),0.12);
  color: var(--bx-ink);
}
/* Inputs on a light surface inside a .bx-dark page (e.g. the builder picker's
   filter pillbar) keep the light treatment — the .bx-dark rule above paints
   them with a near-invisible white wash on cream. */
.bx-light-surface .input, .bx-light-surface .select, .bx-light-surface textarea.input {
  background: white;
  border-color: var(--bx-line-2);
  color: var(--bx-ink);
}
.bx .input:focus, .bx .select:focus, .bx textarea.input:focus {
  border-color: var(--bido-cyan);
  box-shadow: 0 0 0 3px rgba(var(--bx-accent-rgb),0.2);
}

/* A disabled control must not read as editable (e.g. the locked email on
   /account): muted fill + ink, no pointer, no focus affordance. */
.bx .input:disabled, .bx .select:disabled, .bx textarea.input:disabled {
  background: var(--bx-paper-2);
  border-color: var(--bx-line);
  color: var(--bx-ink-3);
  cursor: not-allowed;
}
.bx-dark .input:disabled, .bx-dark .select:disabled, .bx-dark textarea.input:disabled {
  background: rgba(var(--bx-white-rgb),0.02);
}

.bx .bido-date-input {
  font-variant-numeric: tabular-nums;
}

.bx input[type="date"].input,
.bx input[type="datetime-local"].input {
  appearance: auto;
  color-scheme: light;
  line-height: 1.2;
  padding-right: 10px;
}

.bx-dark input[type="date"].input,
.bx-dark input[type="datetime-local"].input {
  color-scheme: dark;
}

.bx input[type="date"].input::-webkit-calendar-picker-indicator,
.bx input[type="datetime-local"].input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.72;
}

.bx input[type="date"].input::-webkit-calendar-picker-indicator:hover,
.bx input[type="datetime-local"].input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.bido-inline-form,
.bido-inline-form form {
  flex-wrap: wrap;
}

.bido-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.bido-inline-form form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bido-inline-form .compact-input {
  max-width: 140px;
}

.bido-inline-form .email-input {
  max-width: 220px;
}

.bido-inline-note {
  margin-left: auto;
  align-self: center;
}

.bido-form-errors {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--bx-coral-rgb),0.28);
  border-radius: var(--bx-r);
  background: rgba(var(--bx-coral-rgb),0.08);
  color: var(--bx-ink);
  font-size: var(--bx-text-md);
}

.bido-form-errors ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* === Responsive — inline forms ===
   On narrow viewports the inline form wraps and its fields go full width. */
@media (max-width: 48rem) {
  .bido-inline-form {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .bido-inline-form form,
  .bido-inline-form .compact-input,
  .bido-inline-form .email-input {
    max-width: none;
    width: 100%;
  }
}