/* Shared controls for Django forms and React editors. Keep widths/layout local. */
.ui-controls {
  --field-bg: #fff; --field-ink: #26382f; --field-border: #99a59c;
  --field-muted: #626b65; --field-accent: #286047; --field-ring: #28604726;
  --field-disabled: #edf0eb; --field-error: #a52c35; --field-success: #286047;
}
.ui-controls.dark-mode, [data-theme="dark"] .ui-controls {
  --field-bg: #202a24; --field-ink: #edf2ec; --field-border: #7c8d80;
  --field-muted: #b3bfb5; --field-accent: #a3d4b5; --field-ring: #a3d4b530;
  --field-disabled: #303a33; --field-error: #ff9da3; --field-success: #a3d4b5;
  color-scheme: dark;
}
body.ui-controls :is(.form-control, input, select, textarea):where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="image"])) {
  box-sizing: border-box; max-width: 100%; min-width: 0;
  min-height: 44px; height: auto; padding: 9px 12px;
  border: 1px solid var(--field-border); border-radius: 8px;
  background-color: var(--field-bg); color: var(--field-ink);
  font-family: inherit; font-size: 16px; line-height: 1.4; font-weight: 400;
  box-shadow: none; transition: border-color .12s, box-shadow .12s;
}
.ui-controls :is(input, textarea)::placeholder { color: var(--field-muted); opacity: 1; }
body.ui-controls textarea { resize: vertical; min-height: 108px; }
body.ui-controls select:not([multiple]) { padding-right: 30px; }
/* Inline editing reads like a table until the row is used. */
body.ui-controls .ie-field {
  min-height: 32px; padding: 4px 6px; border-color: transparent;
  border-radius: 4px; background-color: transparent; font-size: 14px;
}
body.ui-controls :is(tr, .list-group-item):hover .ie-field { border-color: var(--ew-border, var(--field-border)); }
body.ui-controls .ie-field:focus { background-color: var(--field-bg); }
body.ui-controls :is(.form-control, input, select, textarea):focus {
  border-color: var(--field-accent); outline: 2px solid var(--field-accent);
  outline-offset: 2px; box-shadow: 0 0 0 4px var(--field-ring);
}
body.ui-controls :is(.form-control, input, select, textarea):disabled {
  background-color: var(--field-disabled); color: var(--field-muted); cursor: not-allowed; opacity: 1;
}
body.ui-controls :is(.form-control, input, textarea)[readonly] { background-color: var(--field-disabled); }
body.ui-controls :is(.form-control, input, select, textarea):is([aria-invalid="true"], .is-invalid, .ie-save-error) {
  border-color: var(--field-error) !important; outline-color: var(--field-error);
}
body.ui-controls :is(.form-control, input, select, textarea).ie-saved { border-color: var(--field-success) !important; }
.ui-controls :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--field-accent); width: 18px; height: 18px; flex-shrink: 0;
  vertical-align: middle; cursor: pointer;
}
body.ui-controls input[type="color"] { width: 52px; height: 44px; padding: 4px; cursor: pointer; }
body.ui-controls input[type="file"] { padding: 5px; font-size: 14px; }
body.ui-controls input[type="file"]::file-selector-button {
  border: 0; border-radius: 5px; padding: 6px 10px; margin-right: 10px;
  background: var(--field-disabled); color: var(--field-ink); font: inherit; cursor: pointer;
}
body.ui-controls input[type="range"] { accent-color: var(--field-accent); min-height: 32px; }
.ui-controls .field-label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; color: var(--field-ink); }
.ui-controls .field-help { font-size: 13px; color: var(--field-muted); margin: 6px 0 0; }
.ui-controls .field-error { font-size: 13px; color: var(--field-error); margin-top: 6px; }
.ui-controls .text-danger { color: var(--field-error) !important; }
.ui-controls .form-group:has([aria-invalid="true"]) .text-danger { color: var(--field-error) !important; }
.ui-controls .form-inline { gap: 8px; align-items: flex-end; }
.ui-controls .form-inline .field-group { flex: 1 1 180px; min-width: 0; }
.ui-controls .form-inline .field-group :is(input,select) { width: 100%; }
.ui-controls .form-inline .field-group :is(input[type="checkbox"],input[type="radio"]) { width: 18px; }
/* Rows use gaps, not per-control Bootstrap margins, to stay aligned on wrap. */
.ui-controls .control-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.ui-controls .ew-guest-toolbar { align-items: center; gap: 12px 24px; }
.ui-controls .control-row > :is(input, select, button, a, label),
.ui-controls .control-row .field-group > :is(input, select) { margin: 0 !important; }
.ui-controls :is(.control-row, .control-grid) .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 9px 12px; border-radius: 8px; font-size: 14px; line-height: 1.4;
}
.ui-controls .control-grid { align-items: flex-start; row-gap: 8px; }
.ui-controls .control-grid :is(input, select, .btn) { margin-bottom: 0 !important; }
.ui-controls .control-row .field-group { flex: 1 1 180px; min-width: 0; }
.ui-controls .control-row .field-group input { width: 100%; }
@media (max-width: 767px) {
  .ui-controls .form-inline .field-group { flex-basis: 100%; }
  body.ui-controls input[type="date"], body.ui-controls input[type="datetime-local"] { min-width: 0; }
  body.ui-controls .ie-field { min-height: 44px; font-size: 16px; }
  .ui-controls .control-row .field-group { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-controls :is(input,select,textarea) { transition: none; }
}