/* Shared field metrics. Colors remain owned by the selected company skin. */
:root {
  --ui-field-label-size: .8125rem;
  --ui-field-value-size: .875rem;
  --ui-field-height: 44px;
  --ui-field-gap: .375rem;
}
.ui-field > label,
.ui-document-form label:not(.sr-only):not(:has(input[type="checkbox"], input[type="radio"])) {
  display: block;
  font-family: inherit;
  font-size: var(--ui-field-label-size);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}
.ui-field:has(> label) > .ui-field-control { margin-top: var(--ui-field-gap); }
.ui-field > .ui-field-control > :is(.search-select-trigger, .date-picker-trigger) { margin-top: 0; }
.ui-field > .ui-field-control > :is(.search-select-trigger, .date-picker-trigger),
.ui-document-form :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="date"], input[type="time"], select, textarea):not(.sr-only):not(.search-select-search),
.ui-document-form .ui-field-value {
  font-family: inherit;
  font-size: var(--ui-field-value-size);
  font-weight: 400;
  line-height: 1.4;
  min-height: var(--ui-field-height);
}
.ui-document-form .ui-field-value { display: flex; align-items: center; }
/* Native fields and legacy date fields with an external label use the same gap. */
.ui-document-form label ~ :is(input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], textarea, select:not(.sr-only), .ui-field, .ui-field-value) {
  margin-top: var(--ui-field-gap);
}
.ui-document-form label:has(input[type="checkbox"], input[type="radio"]) { font-size: var(--ui-field-label-size); }
.ui-field > .ui-field-control > :is(.search-select-trigger, .date-picker-trigger) > svg { flex-shrink: 0; }