/* Forms contract: Inter 14/20, controls 36px (small 32px), label gap 6px,
   field gap 16px. Neutral focus/selection; tenant colors belong to actions.
   Keep plugin wrappers, input names and validation/event hooks intact. */
.form-control,
.form-select {
  min-height: var(--mkp-control-height);
  padding-block: .4375rem;
  font-size: var(--mkp-font-size);
  line-height: 1.25rem;
  border-color: var(--mkp-border);
  border-radius: var(--mkp-radius);
  background-color: var(--mkp-surface);
  color: var(--mkp-foreground);
  box-shadow: var(--mkp-shadow);
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select {
  min-height: var(--mkp-control-height-sm);
  padding-block: .3125rem;
  font-size: var(--mkp-font-size);
}

/* MVC can copy .form-control onto both the Kendo wrapper and its input.
   The wrapper owns the border and height; Bootstrap padding here would add
   a second inset and make date fields taller in forms without .admin-form
   (for example, Banner de Revendedores). Leave multi-value widgets alone. */
.form-control:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-numerictextbox,.k-maskedtextbox,.k-combobox) {
  height: var(--mkp-control-height);
  min-height: var(--mkp-control-height);
  padding: 0;
  flex-shrink: 0;
}
.form-control.form-control-sm:is(.k-datepicker,.k-datetimepicker,.k-timepicker,.k-numerictextbox,.k-maskedtextbox,.k-combobox) {
  height: var(--mkp-control-height-sm);
  min-height: var(--mkp-control-height-sm);
}

textarea.form-control { min-height: 4rem; padding: .5rem .75rem; }
.form-control:focus,
.form-select:focus {
  border-color: var(--mkp-ring-color);
  box-shadow: var(--mkp-ring);
  outline: 0;
}
.form-control::placeholder { color: var(--mkp-muted-foreground); opacity: 1; }
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
  background-color: var(--mkp-muted);
  color: var(--mkp-muted-foreground);
  box-shadow: none;
}
.form-control:disabled,
.form-select:disabled { cursor: not-allowed; }
/* Read-only values are still information the operator needs to read. */
.form-control[readonly]:not(:disabled) { color: var(--mkp-foreground); }
.form-control-plaintext {
  min-height: var(--mkp-control-height);
  padding-block: .4375rem;
  font-size: var(--mkp-font-size);
  line-height: 1.25rem;
  color: var(--mkp-foreground);
  overflow-wrap: anywhere;
}

.form-label,
.control-label {
  display: block;
  margin-bottom: var(--mkp-label-gap);
  font-size: var(--mkp-font-size);
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--mkp-foreground);
}
/* A label inside an already stacked field must not retain a horizontal
   col-2 width (which splits even "Nome" over multiple lines on a phone). */
.admin-form .mb-3:not(.row) > .form-label[class*="col-"] {
  width: auto;
  max-width: 100%;
}
/* Only the legacy one-label/one-column rows become vertical. Multi-column
   rows and their responsive breakpoints retain the existing layout. */
.admin-form .row:has(> label.form-label:first-child + div[class*="col-"]:last-child) { row-gap: 0; }
.admin-form .row:has(> label.form-label:first-child + div[class*="col-"]:last-child) > label.form-label,
.admin-form .row:has(> label.form-label:first-child + div[class*="col-"]:last-child) > div[class*="col-"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
/* Boolean EditorFor already includes its own associated label. */
.admin-form .row > label.form-label:not([for]):has(+ div > .form-check:only-child) { display: none; }
/* A single text/select field does not need the width of a whole data page.
   Keep repeated choices, editors and multi-column rows at their full width. */
.admin-form .row:has(> label.form-label:first-child + div[class*="col-"]:last-child > :is(input.form-control,select.form-select,textarea.form-control)) {
  max-width: calc(var(--mkp-form-width) + var(--bs-gutter-x, 1.5rem));
}
/* Some AJAX forms do not carry admin-form. Their stacked Bootstrap columns
   still need space between the preceding control and the next label. */
form .mb-3.row:has(> [class*="col-"] > .form-label) {
  row-gap: var(--mkp-field-gap);
}
.form-text,
.help-block {
  display: block;
  margin-top: var(--mkp-label-gap);
  margin-bottom: 0;
  color: var(--mkp-muted-foreground);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.25rem;
}
.form-label .required,
.control-label .required,
.required-marker { color: var(--mkp-danger); font-weight: 500; }

/* Reflect the existing MVC validation metadata; CSS never invents a rule.
   Street already has a literal marker in AddressViewModel.DisplayName. */
form .form-label[for]:not([for="Street"],[for$="_Street"]):not(:has(.required,.required-marker)):is(
  :has(+ :is(input,select,textarea):is([data-val-required],[required]):not([type="hidden"],[type="checkbox"],[type="radio"],[disabled],[readonly])),
  :has(+ .input-group > :is(input,select,textarea):is([data-val-required],[required]):not([disabled],[readonly])),
  :has(+ div > :is(input,select,textarea):is([data-val-required],[required]):not([type="hidden"],[type="checkbox"],[type="radio"],[disabled],[readonly]))
)::after {
  content: " *";
  color: var(--mkp-muted-foreground);
  white-space: nowrap;
}

/* Both supported field layouts (row.mb-3 and row > .mb-3) need the same
   minimum width. Let short numeric columns wrap before their labels break. */
.admin-form .row > .mb-3:is(.col,[class*="col-"]):has(> .form-label) {
  display: flex;
  flex-direction: column;
  min-width: min(100%, var(--mkp-field-min-width));
}
.admin-form .row > .mb-3:is(.col,[class*="col-"]):has(> .form-label) > .form-label {
  width: auto;
  max-width: 100%;
}
.admin-form .row > .mb-3:is(.col,[class*="col-"]):has(> .form-label) > :is(.form-control,.form-select,.input-group) {
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .admin-form .row > .mb-3:is(.col-md-3,.col-md-4):has(> .form-label) {
    flex-grow: 1;
  }
  .admin-form .row > .mb-3.col-md-3:has(> .form-label) {
    flex-basis: max(12rem, 25%);
  }
}

/* A tab's columns of fields use available space, including older layouts
   with two one-third columns. Navigation and filter columns do not match. */
form .tab-pane > .row > :is(.col-md-6.col-lg-4):has(> .mb-3 > .form-label) {
  flex-grow: 1;
  min-width: min(100%, 20rem);
}

/* Keep messages in flow; never hide invalid fields or summaries. */
.field-validation-error,
.field-validation-error span,
.invalid-feedback,
.admin-form label.error {
  color: var(--mkp-danger);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.25rem;
}
.field-validation-error,
.admin-form label.error { display: block; margin-top: var(--mkp-label-gap); }
form .form-label:has(+ :is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])),
form .form-label:has(+ .input-group :is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])) { color: var(--mkp-danger); }
/* EditorFor can wrap a control (input group, date picker, etc.). Preserve
   the same label feedback when MVC validation marks that nested input. */
form .form-label:has(+ div :is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])) {
  color: var(--mkp-danger);
}
/* Kendo renders span wrappers, including for date and numeric editors.
   Their labels must reflect validation on either the shell or its input. */
form .form-label:has(+ :is(.k-input,.k-picker):is(.input-validation-error,.is-invalid,.error,.k-invalid,[aria-invalid="true"])),
form .form-label:has(+ :is(.k-input,.k-picker) > :is(input,select,textarea):is(.input-validation-error,.is-invalid,.error,.k-invalid,[aria-invalid="true"])) {
  color: var(--mkp-danger);
}
.field-validation-valid,
.validation-summary-valid { display: none; }
.validation-summary-errors ul {
  margin: 0 0 var(--mkp-field-gap);
  padding: .75rem 1rem .75rem 2rem;
  border: 1px solid rgb(185 28 28 / 25%);
  border-radius: var(--mkp-radius);
  background: #fef2f2;
  color: var(--mkp-danger);
  font-size: var(--mkp-font-size);
  line-height: 1.5;
  list-style: disc;
}
.validation-summary-errors ul li { margin: .125rem 0; }
.validation-summary-errors li:only-child { list-style: none; }
.validation-summary-errors ul:has(> li:only-child) { padding-left: 1rem; }
.form-control:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]),
.form-select:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]) {
  border-color: var(--mkp-danger);
  border-radius: var(--mkp-radius);
  box-shadow: none;
}
.form-control:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]):focus,
.form-select:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]):focus {
  border-color: var(--mkp-danger);
  box-shadow: 0 0 0 3px rgb(185 28 28 / 20%);
}
/* MVC, Bootstrap and Kendo can mark either the shell or the native field.
   Keep the error on the visible boundary, also in AJAX forms that do not
   use admin-form. Direct children avoid picking up a popup's search field. */
:is(.k-input,.k-picker):is(.input-validation-error,.is-invalid,.error,.k-invalid,[aria-invalid="true"]),
:is(.k-input,.k-picker):has(> :is(input,select,textarea):is(.input-validation-error,.is-invalid,.error,.k-invalid,[aria-invalid="true"])) {
  border-color: var(--mkp-danger);
}
:is(.k-input,.k-picker):is(.input-validation-error,.is-invalid,.error,.k-invalid,[aria-invalid="true"]):focus-within,
:is(.k-input,.k-picker):has(> :is(input,select,textarea):is(.input-validation-error,.is-invalid,.error,.k-invalid,[aria-invalid="true"])):focus-within {
  border-color: var(--mkp-danger);
  box-shadow: 0 0 0 3px rgb(185 28 28 / 20%);
}
/* The legacy MVC error rule adds a border and shadow to the native input.
   Numeric and masked templates do not always carry form-control, so they
   also need to leave that boundary to the Kendo shell. */
:is(.k-input,.k-picker) > .k-input-inner:is(.input-validation-error,.is-invalid,.error,.k-invalid,[aria-invalid="true"]),
:is(.k-input,.k-picker) > .k-input-inner:is(.input-validation-error,.is-invalid,.error,.k-invalid,[aria-invalid="true"]):focus {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}
/* Match the base form-control focus rule's specificity. The shell supplies
   the ring even when validation is attached only to that outer element. */
:is(.k-input,.k-picker):focus-within > .k-input-inner.form-control:focus {
  box-shadow: none;
}
.input-group { align-items: stretch; }
.input-group > .form-control,
.input-group > .form-select { min-width: 0; }
.input-group-text {
  padding: .4375rem .75rem;
  border-color: var(--mkp-border);
  background: var(--mkp-muted);
  color: var(--mkp-muted-foreground);
  font-size: var(--mkp-font-size);
  line-height: 1.25rem;
}
.input-group > .field-validation-error {
  flex: 0 0 100%;
  width: 100%;
  margin-left: 0;
}
/* MVC messages and hidden fallback inputs are not visual group segments.
   Keep the joined edges square, including while a field is invalid. */
.input-group > :is(.form-control,.form-select):has(~ :is(.input-group-text,.btn,.admin-input-addon)) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.input-group > :is(.input-group-text,.btn,.admin-input-prefix) ~ :is(.form-control,.form-select) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.input-group > :is(.form-control,.form-select):not(:has(~ :is(.form-control,.form-select,.input-group-text,.btn,.admin-input-addon))) {
  border-start-end-radius: var(--mkp-radius);
  border-end-end-radius: var(--mkp-radius);
}
.input-group > :is(.field-validation-error,.field-validation-valid,.invalid-feedback,.valid-feedback,.form-text) {
  order: 2;
  flex-basis: 100%;
  margin-left: 0;
}
/* Wrapped prefix/suffix actions are still segments of the same control.
   Keep their joined corners square, including disabled action buttons,
   and carry the field's invalid boundary through to the outer edge.
   Bootstrap's .border utility requires !important for its border color. */
.input-group > :is(.admin-input-prefix,.admin-input-addon) {
  display: flex;
  align-items: stretch;
}
.input-group > .admin-input-prefix > :is(.btn,.input-group-text) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.input-group > .admin-input-addon > :is(.btn,.input-group-text) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.input-group:has(> :is(.form-control,.form-select):is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])) > :is(.input-group-text,.admin-input-prefix,.admin-input-addon),
.input-group:has(> :is(.form-control,.form-select):is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])) > :is(.admin-input-prefix,.admin-input-addon) > :is(.btn,.input-group-text) {
  border-color: var(--mkp-danger) !important;
}
.form-check { min-height: 1.5rem; margin-bottom: .25rem; line-height: 1.5rem; }
.form-check-inline { margin-right: 1rem; }
.form-check:has(> .form-check-label):has(> .icheckbox_flat-green, > .iradio_flat-green) {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.form-check-inline:has(> .form-check-label):has(> .icheckbox_flat-green, > .iradio_flat-green) {
  display: inline-flex;
}
.form-check:has(> .form-check-label) > :is(.icheckbox_flat-green,.iradio_flat-green) {
  flex-shrink: 0;
  margin-top: .25rem;
  margin-right: 0;
}
input[type="checkbox"],
input[type="radio"] { accent-color: var(--mkp-foreground); }
.form-check-label {
  margin-bottom: 0;
  color: var(--mkp-foreground);
  font-size: var(--mkp-font-size);
  font-weight: 400;
  line-height: 1.5rem;
  cursor: pointer;
}
/* Checkboxes, radios and switches keep Metronic's native size and shape (1.75rem, rounded, light border).
   Only the checked color is bound to the tenant: the Metronic bundle hardcodes #1b84ff. */
.form-check-input:checked,
.form-check-input:indeterminate { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .25rem rgb(var(--bs-primary-rgb) / 20%); }
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%2371717a'/%3E%3C/svg%3E");
}
.form-check-input:disabled,
fieldset:disabled .form-check-label { cursor: not-allowed; }

/* TreeView checkbox templates intentionally opt out of iCheck. Style the
   actual input, retaining Kendo's parent/child and indeterminate handling. */
.admin-form .k-treeview input[type="checkbox"].noiCheck {
  appearance: none;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1px solid #a1a1aa;
  border-radius: .25rem;
  background-color: var(--mkp-surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1rem;
  box-shadow: var(--mkp-shadow);
  vertical-align: middle;
  cursor: pointer;
}
.admin-form .k-treeview input[type="checkbox"].noiCheck:checked {
  border-color: var(--mkp-foreground);
  background-color: var(--mkp-foreground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 8 3 3 5-6'/%3E%3C/svg%3E");
}
.admin-form .k-treeview input[type="checkbox"].noiCheck:indeterminate {
  border-color: var(--mkp-foreground);
  background-color: var(--mkp-foreground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
}
.admin-form .k-treeview input[type="checkbox"].noiCheck:focus-visible {
  outline: 0;
  border-color: var(--mkp-ring-color);
  box-shadow: var(--mkp-ring);
}
.admin-form .k-treeview input[type="checkbox"].noiCheck:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Checkbox trees are grouped form choices. Use an editorial section layout:
   parent at the left, its choices in readable columns at the right. Columns
   preserve DOM order and Kendo's inline display/animation/collapse handling;
   do not override group display or hide any node. Only two-level trees with
   the native checkbox template participate (not navigation/select widgets). */
.admin-form .k-treeview:has(input.noiCheck) > .k-treeview-group > .k-treeview-item {
  padding-block: 1rem;
  border-top: 1px solid var(--mkp-border);
}
.admin-form .k-treeview:has(input.noiCheck) > .k-treeview-group > .k-treeview-item > :is(.k-treeview-top,.k-treeview-mid,.k-treeview-bot) {
  min-height: 2rem;
  font-weight: 600;
}
.admin-form .k-treeview:has(input.noiCheck) .k-treeview-leaf {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.admin-form .k-treeview:has(input.noiCheck) .k-checkbox-wrap {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: .5rem;
}
.admin-form .k-treeview:has(input.noiCheck) > .k-treeview-group > .k-treeview-item > .k-treeview-group > .k-treeview-item {
  break-inside: avoid;
  padding-block: .125rem;
}
@media (min-width: 992px) {
  .admin-form .k-treeview:has(input.noiCheck) > .k-treeview-group > .k-treeview-item {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
  }
  .admin-form .k-treeview:has(input.noiCheck) > .k-treeview-group > .k-treeview-item > .k-treeview-group {
    padding-left: 0;
    column-width: 17rem;
    column-gap: 1.5rem;
    column-rule: 1px solid var(--mkp-border);
  }
  /* Kendo temporarily wraps a group during expand/collapse animation. */
  .admin-form .k-treeview:has(input.noiCheck) > .k-treeview-group > .k-treeview-item > .k-animation-container {
    grid-column: 2;
  }
}

/* Repeated choice groups are a section of the form, not a narrow sidebar.
   This legacy markup is h6 + row of form-check columns. Keep DOM/tab order,
   every input and every group visible, without a second scroll container. */
.admin-form .row:has(> [class*="col-"] > h6 + .row > .form-check) > [class*="col-"] {
  flex: 0 0 100%;
  width: 100%;
}
.admin-form [class*="col-"]:has(> h6 + .row > .form-check) {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  align-items: start;
  column-gap: 1.5rem;
  margin-top: .5rem;
}
.admin-form [class*="col-"]:has(> h6 + .row > .form-check) > h6 {
  margin: 0 !important;
  padding-block: 1.125rem;
  border-top: 1px solid var(--mkp-border);
  font-size: var(--mkp-font-size);
  font-weight: 600;
  line-height: 1.5rem;
  text-transform: none !important;
}
.admin-form [class*="col-"] > h6 + .row:has(> .form-check) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: .5rem 1rem;
  margin: 0;
  padding-block: 1rem;
  border-top: 1px solid var(--mkp-border);
}
.admin-form [class*="col-"] > h6 + .row > .form-check {
  width: auto;
  min-width: 0;
  min-height: 2rem;
  margin: 0 !important;
  padding: .25rem 0;
  align-items: flex-start;
}
.admin-form [class*="col-"] > h6 + .row > .form-check > .form-check-label {
  font-size: var(--mkp-font-size) !important;
  line-height: 1.5rem;
  overflow-wrap: normal;
  word-break: normal;
}

/* Lists rendered by EditorFor callers (profiles/stock units/etc.) keep
   label associations while using the width available to the field. */
.admin-form .row > [class*="col-"]:has(> div > .form-check-label):not(:has(> .form-check)) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .5rem 1rem;
}
.admin-form .row > [class*="col-"] > div:has(> .form-check-label):not(.form-check) {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  min-width: 0;
  padding: .5rem .75rem;
  border: 1px solid var(--mkp-border);
  border-radius: var(--mkp-radius);
}
.admin-form .row > [class*="col-"] > div:has(> .form-check-label):not(.form-check) > :is(.form-check-input,.icheckbox_flat-green,.iradio_flat-green) {
  flex-shrink: 0;
  margin: .25rem 0 0;
}
.admin-form .row > [class*="col-"] > div:has(> .form-check-label):not(.form-check):has(input:checked) {
  background: var(--mkp-muted);
  border-color: #a1a1aa;
}

/* Paired sections need enough room for a date, telephone or country field.
   Keep the DOM order and visibility controlled by the owning view; the
   old 8/4 split made the address fields much narrower than personal data.
   Semantic headings/descriptions belong in that view, never CSS content. */
@media (min-width: 1200px) {
  .admin-form .row:has(> .col-xl-8 + .col-xl-4 > .mb-3 .form-label) > :is(.col-xl-8,.col-xl-4) {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
  }
  .admin-form .row:has(> .col-xl-8 + .col-xl-4 > .mb-3 .form-label) > .col-xl-8 {
    padding-right: 1.5rem;
  }
  .admin-form .row > .col-xl-8 + .col-xl-4:has(> .mb-3 .form-label) {
    padding-left: 1.5rem;
    border-left: 1px solid var(--mkp-border);
  }
}
/* Repeated rows inside those sections share a two-column rhythm instead
   of mixing quarters and thirds. Full-width fields retain their span.
   Flex wrapping accommodates long labels without changing display:none
   on the person/company rows or the country-dependent address controls. */
@media (min-width: 768px) {
  .admin-form .row:has(> .col-xl-8 + .col-xl-4 > .mb-3 .form-label) > :is(.col-xl-8,.col-xl-4) > .mb-3.row > [class*="col-md-"]:has(> .form-label):not(.col-md-12) {
    flex: 1 0 50%;
    width: 50%;
    min-width: 0;
  }
}
/* Give the transition between image/identity and the next set of fields
   the same section spacing as fieldsets. Does not match filter rows. */
.admin-form .row:has(> .col-auto > .img-thumbnail) + .row {
  margin-top: .5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mkp-border);
}
/* Separate a paired section from the subsequent account/access fields. */
.admin-form .row:has(> .col-xl-8 + .col-xl-4 > .mb-3 .form-label):has(~ .mb-3) {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--mkp-border);
}
@media (max-width: 1199.98px) {
  .admin-form .row > .col-xl-8 + .col-xl-4:has(> .mb-3 .form-label) {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mkp-border);
  }
}
@media (max-width: 767.98px) {
  .admin-form .row:has(> .col-xl-8 + .col-xl-4 > .mb-3 .form-label) > :is(.col-xl-8,.col-xl-4) > .mb-3.row > [class*="col-md-"]:has(> .form-label) {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
  }
  .admin-form .card-body > .mb-3[class*="col-"]:has(> .form-label) {
    width: 100%;
    max-width: 100%;
  }
  /* A fixed thumbnail must not squeeze the adjacent fields on a phone. */
  .admin-form .row:has(> .col-auto > .img-thumbnail) > .col {
    flex: 0 0 100%;
    width: 100%;
    margin-top: var(--mkp-field-gap);
  }
  .admin-form [class*="col-"]:has(> h6 + .row > .form-check) {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-form [class*="col-"]:has(> h6 + .row > .form-check) > h6 {
    padding-bottom: .5rem;
  }
  .admin-form [class*="col-"] > h6 + .row:has(> .form-check) {
    border-top: 0;
    padding-top: 0;
  }
}

/* iCheck retains the native input, hit target, labels and ifChanged events.
   Replace only the colored bitmap skin, including keyboard/mixed states. */
.icheckbox_flat-green,
.iradio_flat-green {
  width: 1rem;
  height: 1rem;
  margin-right: .375rem;
  border: 1px solid #a1a1aa;
  border-radius: .25rem;
  background: var(--mkp-surface);
  box-shadow: var(--mkp-shadow);
  filter: none;
  vertical-align: -.125rem;
}
.iradio_flat-green { border-radius: 50%; }
.icheckbox_flat-green.checked,
.icheckbox_flat-green.indeterminate,
.iradio_flat-green.checked {
  border-color: var(--mkp-foreground);
  background: var(--mkp-foreground);
}
.icheckbox_flat-green.checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
.icheckbox_flat-green.indeterminate::after {
  content: "";
  position: absolute;
  inset: 6px 3px;
  width: auto;
  height: auto;
  border: 0;
  background: white;
  transform: none;
  pointer-events: none;
}
.iradio_flat-green.checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: white;
  pointer-events: none;
}
.icheckbox_flat-green:has(input:focus-visible),
.iradio_flat-green:has(input:focus-visible) { box-shadow: var(--mkp-ring); }
.icheckbox_flat-green.disabled,
.iradio_flat-green.disabled { opacity: .5; cursor: not-allowed; }

/* bootstrap5-toggle calculates its own width from the on/off text. Keep that
   geometry and both labels; neutralize every visual state of the switch. */
.toggle.btn {
  border-color: var(--mkp-border);
  border-radius: var(--mkp-radius-sm);
  box-shadow: var(--mkp-shadow);
}
.toggle .toggle-group > .toggle-on,
.toggle .toggle-group > .toggle-off {
  --bs-btn-hover-color: var(--mkp-foreground);
  --bs-btn-hover-bg: var(--mkp-muted);
  --bs-btn-hover-border-color: var(--mkp-border);
  color: var(--mkp-foreground);
  background: var(--mkp-muted);
  font-size: var(--mkp-font-size);
  font-weight: 500;
}
.toggle .toggle-group > .toggle-on {
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #27272a;
  color: #fff;
  background: var(--mkp-foreground);
}
.toggle.btn .toggle-group > .toggle-handle {
  background: var(--mkp-surface);
  border-color: var(--mkp-border);
  opacity: 1;
}
.toggle:focus-visible,
.toggle:focus-within { outline: 0; box-shadow: var(--mkp-ring); }

/* Error feedback must survive checked/indeterminate and keyboard focus.
   Keep the selected value visible; only the boundary and ring become red.
   iCheck/toggle own the visible surface while MVC marks the native input. */
.form-check-input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]),
.admin-form .k-treeview input[type="checkbox"].noiCheck:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]),
:is(.icheckbox_flat-green,.iradio_flat-green):has(input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])),
.toggle.btn:has(input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])) {
  border-color: var(--mkp-danger);
}
.form-check-input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]):focus,
.admin-form .k-treeview input[type="checkbox"].noiCheck:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]):focus-visible,
:is(.icheckbox_flat-green,.iradio_flat-green):has(input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"]):focus-visible),
.toggle.btn:has(input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])):is(:focus-visible,:focus-within) {
  box-shadow: 0 0 0 3px rgb(185 28 28 / 20%);
}
.form-check:has(input:is(.input-validation-error,.is-invalid,.error,[aria-invalid="true"])) > .form-check-label {
  color: var(--mkp-danger);
}

/* Size nested person/address sections by the space available in their card,
   rather than the viewport (Distribution places this inside a col-md-8). */
.admin-form .row.admin-person-fields:has(> .col-xl-8 + .col-xl-4 > .mb-3 .form-label) > :is(.col-xl-8,.col-xl-4) {
  flex: 1 0 min(100%, 360px);
  width: auto;
  max-width: 100%;
  padding-inline: calc(var(--bs-gutter-x) * .5);
  border-left: 0;
}
.admin-form .row.admin-person-fields:has(> .col-xl-8 + .col-xl-4 > .mb-3 .form-label) > :is(.col-xl-8,.col-xl-4) > .mb-3.row > [class*="col-md-"]:has(> .form-label):not(.col-md-12) {
  flex: 1 0 min(100%, 240px);
  width: auto;
  max-width: 100%;
}

/* Section/action hooks for page owners; no sticky positioning over content. */
.admin-form fieldset { min-width: 0; }
.admin-form legend,
.admin-form .form-section-title {
  float: none;
  width: 100%;
  margin-bottom: var(--mkp-field-gap);
  color: var(--mkp-foreground);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}
.admin-form fieldset + fieldset,
.admin-form .form-section + .form-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mkp-border);
}
.admin-form .form-section-description {
  max-width: var(--mkp-form-width);
  margin: -.5rem 0 1.25rem;
  color: var(--mkp-muted-foreground);
  font-size: var(--mkp-font-size);
  line-height: 1.5;
}
.admin-form .form-actions,
.admin-form > .card > .card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  background: var(--mkp-surface);
  border-color: var(--mkp-border);
}
.admin-form .form-actions { margin-top: 1.5rem; }

/* The shared HTML editor loads tokens.css and this file inside its iframe.
   Set presentation defaults only: authored inline formatting and the HTML
   submitted by Kendo remain untouched. Page-owned editors can opt in using
   the same StyleSheets configuration. Parent CSS cannot cross an iframe. */
body[contenteditable="true"] {
  margin: .75rem;
  background-color: var(--mkp-surface);
  color: var(--mkp-foreground);
  font-family: var(--mkp-font);
  font-size: var(--mkp-font-size);
  line-height: 1.5;
  overflow-wrap: break-word;
}

@media (forced-colors: active) {
  .admin-form .k-treeview input[type="checkbox"].noiCheck {
    appearance: auto;
    background-image: none;
  }
  .icheckbox_flat-green.checked,
  .icheckbox_flat-green.indeterminate,
  .iradio_flat-green.checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .icheckbox_flat-green.checked::after { border-color: HighlightText; }
  .icheckbox_flat-green.indeterminate::after,
  .iradio_flat-green.checked::after { background: HighlightText; }
}