/* ============================================================
 * NextGen MIS — Form controls
 * ------------------------------------------------------------
 * Warm, soft, friendly inputs (not stark cold grey). Consistent
 * warm strokes, gentle off-white fill, rounded corners, clear
 * focus. Covers native controls + Select2 so dropdowns match.
 *
 * (This is an early slice of what PR 4 — Forms — will expand:
 *  validation states, required markers, etc.)
 * ============================================================ */

/* ---------- TEXT INPUTS / SELECTS / TEXTAREAS ---------- */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.input-icon .form-control {
  background-color: var(--color-input-bg) !important;
  border: 1px solid var(--color-input-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  color: var(--color-text-default) !important;
  padding: var(--space-2) var(--space-3) !important;
  height: auto !important;
  min-height: 40px;
  font-size: var(--font-size-base) !important;
  transition: border-color var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}

.form-control:hover {
  border-color: var(--color-input-border-hover) !important;
}

.form-control:focus {
  border-color: var(--color-input-border-focus) !important;
  background-color: var(--color-input-bg-focus) !important;
  box-shadow: var(--shadow-input-focus) !important;
  outline: none;
}

.form-control::placeholder { color: var(--color-input-placeholder) !important; opacity: 1; }

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: var(--color-input-bg-disabled) !important;
  color: var(--color-text-faint) !important;
  cursor: not-allowed;
  opacity: 1;
}

textarea.form-control { min-height: 84px; line-height: var(--line-height-base); }

/* Normalise EVERY size variant (.input-sm/.input-lg/.input-xs + Metronic's
   material .form-md-line-input) to the standard 40px field used on the
   Beneficiary Registry, so form fields are one consistent size/style across
   the whole platform — no shrunken or oversized controls. */
.form-control.input-sm,  .input-sm.form-control,
.form-control.input-lg,  .input-lg.form-control,
.form-control.input-xs,  .input-xs.form-control,
.form-md-line-input .form-control {
  height: 40px !important;
  min-height: 40px !important;
  font-size: var(--font-size-base) !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
}

/* Every single-select gets the clean Phosphor chevron — not just .form-control —
   so no native OS triangle leaks through anywhere. (Skip select2's hidden
   source <select>, which is replaced by the styled widget below.) */
select:not([multiple]):not(.select2-hidden-accessible) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Same Phosphor caret as the table header, with a dark fill BAKED IN
     (a <select> can't carry a pseudo-element, and the file SVG is
     currentColor → renders faint as a background-image). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23272624'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 13px;                 /* match the table-header sort chevron */
  padding-right: var(--space-8) !important;
  /* vertically centre the option text in the 40px field */
  height: 40px;
  line-height: 1.2;
}
/* Hide IE/legacy native arrow if it slips through */
select::-ms-expand { display: none; }

/* bootstrap-select / .selectpicker render a .btn with a clunky CSS-triangle
   .caret — swap it for the same clean Phosphor chevron. */
.bootstrap-select > .dropdown-toggle .caret {
  border: none !important;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-color: var(--color-text-muted);
  -webkit-mask: url(/img/icons/phosphor/caret-down.svg) center / contain no-repeat;
          mask: url(/img/icons/phosphor/caret-down.svg) center / contain no-repeat;
}

/* Input-icon affordance (login + filters use .input-icon).
   ----------------------------------------------------------------
   Centring the masked icon is HARDER than it looks because Metronic's
   `components-rounded.css` ships THREE same-specificity rules on the
   same selector that fight us:
     1. `display: block`        → defeats `display: flex` centring
     2. `margin: 11px 2px 4px 10px` → pushes the icon ~11 px down from the top
     3. `width: 16px`            → caps the flex container narrower than its content
   None of those vendor rules use !important, but they live in the same
   cascade tier as ours. To guarantee a win regardless of stylesheet load
   order or future vendor edits, we use `!important` on every property we
   depend on for centring. Belt + braces: `top: 50%; transform: translateY(-50%)`
   is added on top of the flex centring so even if `display: flex` somehow
   loses, the absolute-positioned `<i>` still lands dead-centre. */
.input-icon { position: relative !important; display: block !important; }
.input-icon > i {
  position: absolute !important;
  margin: 0 !important;                              /* defeat vendor margin: 11px 2px 4px 10px */
  /* Belt + braces vertical centring. With `top: 50%; transform: translateY(-50%)`
     anchoring the centre of the <i> at the centre of the parent input
     (40 px tall), the icon is guaranteed centred even if a vendor rule
     somehow defeats `display: flex` + `align-items: center` below. */
  top: 50% !important;
  bottom: auto !important;                           /* defeat vendor bottom: 0 */
  transform: translateY(-50%) !important;
  height: auto !important;                           /* defeat any height computed from top:0/bottom:0 */
  /* Horizontal — 8 px from the left edge of the input. With the input's
     padding-left of 40 px, that leaves ~17 px clear between the icon and
     the in-field text. */
  left: var(--space-2) !important;
  /* Sized to its own intrinsic content (the 1 em mask) — defeat vendor width: 16px. */
  width: auto !important;
  display: inline-flex !important;                   /* defeat vendor display: block */
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: var(--font-size-md) !important;          /* 14.5 px — readable on a 40 px field */
  color: var(--color-text-faint) !important;
  z-index: 2;
  pointer-events: none;
  text-align: center;                                /* defeat vendor text-align: center if relevant */
}
.input-icon > i::before {
  vertical-align: middle !important;
  line-height: 1 !important;
  /* The masked ::before is 1 em × 1 em (from _icons.css). At font-size-md
     (14.5 px) that's a 14.5 × 14.5 mask box. align-items: center on the
     <i> places it dead centre vertically. */
}
/* Text padding-left tuned so the label/placeholder sits ~9 px right of the
   icon's bounding box — comfortable visual gap without leaving a slab of
   empty space. Math: icon at left 8 + ~14.5 mask = right edge ~22.5;
   text at padding-left 32 → ~9.5 px gap. */
.input-icon > .form-control { padding-left: var(--space-8) !important; }

/* ---------- LABELS ---------- */
.control-label,
label.control-label,
.form-group > label {
  color: var(--color-text-default) !important;
  font-family: var(--font-family-ui) !important;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm) !important;
}

/* ---------- SELECT2 (match native inputs) ---------- */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap .select2-selection--single,
.select2-selection--single {
  background-color: var(--color-input-bg) !important;
  border: 1px solid var(--color-input-border) !important;
  border-radius: var(--radius-md) !important;
  height: 40px !important;
  display: flex !important;          /* vertically centre the label */
  align-items: center !important;
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
/* Scope to EVERY single-select theme (default, bootstrap, un-themed). The filter
   dropdowns render with the --bootstrap theme — our old --default-only rules
   never applied, so the selected text ran straight into (overlapped) the ×. */
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;    /* was 40px — pushed text high; flex centres it now */
  padding: 0 28px 0 var(--space-3) !important;   /* just clears the chevron → placeholder isn't truncated */
  margin: 0 !important;
  color: var(--color-text-default) !important;
  font-family: var(--font-family-ui) !important;
  font-size: var(--font-size-base) !important;
  width: 100%;
}
/* Reserve the WIDE right padding ONLY when a value is selected (the × shows);
   otherwise the placeholder ("Select a province") was being cut to "Select a prov…". */
.select2-container .select2-selection--single .select2-selection__rendered:has(.select2-selection__clear) {
  padding-right: 64px !important;
}
.select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--color-input-placeholder) !important;
}
/* select2 keeps the original <select> in the DOM as .select2-hidden-accessible
   (visually clipped to 1px). Our filter width rules (#form-filter/.ng-filter
   .form-control { width:100% }) were stretching it to full width — as an
   absolutely-positioned element it then spilled ~300px and added a page-level
   horizontal scrollbar. Re-assert its 1px clip in those filter contexts. */
#form-filter .select2-hidden-accessible,
.ng-filter .select2-hidden-accessible,
.portlet .form-inline .select2-hidden-accessible {
  width: 1px !important;
  min-width: 0 !important;
}
/* Clear (×) — sits clearly left of the chevron, with space from the text;
   sized/weighted to match the dropdown chevron. */
.select2-container .select2-selection--single .select2-selection__clear {
  position: absolute !important;
  right: 34px !important;          /* clear gap from the chevron (~12px) AND from the selected text */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: var(--font-weight-regular);   /* thin, to match the dropdown chevron weight */
  line-height: 1;
  color: var(--color-text-default) !important;   /* dark, matching the chevron */
  cursor: pointer;
}
.select2-container .select2-selection--single .select2-selection__clear:hover {
  color: var(--color-feedback-danger) !important;
}
/* Arrow → clean chevron for EVERY select2 theme (default, bootstrap, or
   un-themed) so it always matches the native-select + table-header caret. */
.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow,
.select2-selection--single > .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: var(--space-3) !important;
  width: 16px !important;
  border: none !important;                  /* kill vendor grey divider + gradient box */
  /* Identical dark data-URI caret to the table header + native selects. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23272624'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 13px no-repeat !important;
}
/* hide select2's chunky CSS-triangle (any theme) */
.select2-selection__arrow b { display: none !important; }
/* (focus / open border state is defined once for every theme + single & multi, below) */

/* Multi-select — match the .form-control field box. The filter dropdowns render
   with the --bootstrap theme (see the single-select note above), whose vendor skin
   is white bg + #c2cad8 border. Scope to EVERY theme (default, bootstrap, un-themed)
   like the single rule — a --default-only rule never matched, so the location
   multis (province/district/LLG/ward) fell back to the vendor skin. #499. */
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap .select2-selection--multiple,
.select2-selection--multiple {
  background-color: var(--color-input-bg) !important;
  border: 1px solid var(--color-input-border) !important;
  border-radius: var(--radius-md) !important;
  min-height: 40px !important;
  display: flex !important;            /* vertically centre the rendered/placeholder (#499) */
  align-items: center !important;
  position: relative !important;       /* anchor the chevron ::after */
}
/* Centre + pad the rendered content so the multi-select reads like a .form-control. */
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered,
.select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  /* LEFT 0 on purpose: select2's inline search field respects this padding on fresh
     load (sitting box+24) but escapes it to the box border after the dropdown is
     opened — so any left padding here made the placeholder jump (49px → 25px). With
     left 0 the field is at the border in BOTH states and the inset comes purely from
     the field's own padding (stable). RIGHT 28 clears the chevron. #499 */
  padding: 0 var(--space-7) 0 0 !important;
  margin: 0 !important;
}
/* The infield label is the inline search field's native placeholder. select2 pins the
   field to the box's left BORDER (it ignores the rendered's padding) and re-positions it
   on focus/blur — so the label jumped ~12px and read at a different inset than the
   .form-control + single-select fields. Drop the float/margins, pin the inset on the
   field itself (stable across re-render → ~24px, matching the single-select boxes), and
   use the system placeholder colour. Vertical centring is handled by the flex box. #499 */
.select2-selection--multiple .select2-search--inline {
  float: none !important;
  margin: 0 !important;
  /* The multi container is a flex row and this <li> holds the search input. Left
     to itself it shrinks to the input's intrinsic ~20-character width, so a
     placeholder longer than that clips no matter what width the input is given.
     Take the leftover space instead, so the width rule below has a real field to
     fill. With chips present select2 pins the input to 0.75em, so the grown li is
     transparent slack and the chip layout is unchanged. */
  flex: 1 1 auto;
  min-width: 0;
}
.select2-selection--multiple .select2-search--inline .select2-search__field {
  margin: 0 !important;
  padding-left: var(--space-6) !important;
  height: auto !important;
  line-height: var(--line-height-base) !important;
  color: var(--color-text-default) !important;
  /* Vendor select2 sets border:none; re-assert so a theme/bootstrap rule can't
     paint a 1px box around the shrunken inline search (see focus ring below). */
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
  color: var(--color-input-placeholder) !important;
  opacity: 1;
}
/* Let a displayed placeholder use the whole field. With nothing chosen, select2
   sizes the inline search off the rendered list and writes an inline
   style="width:100px", which truncates the placeholder mid-word ("Select an au"
   in a 456px field). The :not() guard is what keeps this from touching the
   chips: select2 blanks the placeholder attribute the moment a selection exists
   and re-shrinks the field to 0.75em so a chip + search share one line (see the
   focus-ring note below) — placeholder="" fails the guard, so that path is
   untouched. A field with no placeholder configured is likewise set to "" and
   excluded. !important defeats select2's inline width. */
.select2-selection--multiple .select2-search--inline .select2-search__field:not([placeholder='']) {
  width: 100% !important;
}
/* The inline search is a real <input type="search">, so the global :focus-visible
   ring in _base.css paints a ~24px sage square next to chips once the field is
   collapsed (report builder sets min-width:0 so a chip + search share one line;
   select2 then sizes an empty field to 0.75em). The multi container already shows
   focus/open via border + --shadow-input-focus — suppress the input's own ring. */
.select2-selection--multiple .select2-search--inline .select2-search__field:focus,
.select2-selection--multiple .select2-search--inline .select2-search__field:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Selected tags tint via color-mix into the surface so they knock back in dark
   mode — a raw sage-50 fill stays light and glares there. !important defeats
   the vendor select2 / select2-bootstrap chip colours (same as before). */
.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,
.select2-selection--multiple .select2-selection__choice {
  background-color: color-mix(in srgb, var(--color-brand-secondary) 12%, var(--color-bg-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--color-brand-secondary) 35%, var(--color-bg-surface)) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-default) !important;
  padding: 2px var(--space-2) !important;
  margin-left: var(--space-3) !important;   /* inset chips (the rendered now has no left padding) */
}

/* Chevron on the multi-select too (it has no arrow element) — visual parity with the
   single-selects + date fields in the filter. Box is position:relative above. #499 */
.select2-selection--multiple::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--space-3);
  height: 100%;
  width: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23272624'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 13px no-repeat !important;
  pointer-events: none;
}
/* Focus / open — darker brand-green border + ring for EVERY select2 theme + single &
   multi. The old rule was scoped to `.select2-container--default ... --single`, so the
   `--bootstrap` filter dropdowns (single AND multi) never showed a focus state. #499 */
.select2-container--focus .select2-selection--single,
.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple {
  border-color: var(--color-input-border-focus) !important;
  box-shadow: var(--shadow-input-focus) !important;
}

/* Report filters (#form-filter): the date inputs are .form-control (12px inset) while
   the filter's select2 fields sit a touch wider — nudge the dates to match so every
   infield label down the WHEN/WHERE/WHO column lines up. Scoped on purpose:
   `.date-input` is shared by 30+ forms. #499 */
#form-filter .date-input {
  padding-left: var(--space-6) !important;   /* 24px → visual text aligns with the select2 fields' inset */
}
/* Darken the WHEN (date) + WHERE (multi) infield labels to the field text colour, so
   the filter's empty-state labels match the WHO / STATUS selects (which show their
   default "All" option in text-default). Scoped — other forms keep the standard,
   lighter placeholder. #499 */
#form-filter .date-input::placeholder,
#form-filter .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
  color: var(--color-text-default) !important;
  opacity: 1;
}

/* Dropdown panel */
.select2-dropdown {
  border: 1px solid var(--color-input-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--color-input-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-2) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: var(--color-brand-secondary-hover) !important;   /* sage-700 → white text 6.68:1 (sage-600 was 4.42, under AA) */
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--color-sage-50) !important;
  color: var(--color-brand-secondary-hover) !important;
}

/* ---------- CHECKBOX / RADIO ----------
   Custom appearance: bigger box (20×20) with a visible bordered surface,
   navy fill + white check on :checked, sage border on hover. Native
   `accent-color` alone was too small (~14 px on Safari) and rendered
   inconsistently across browsers; this version is uniform everywhere
   and stays accessible (label association + focus ring + keyboard
   intact, since we still render the native input — only `appearance:
   none` strips the OS chrome). */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-input-border-hover);    /* ~5:1 on white — beats 1.4.11 */
  background-color: var(--color-input-bg);
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
input[type="checkbox"] { border-radius: var(--radius-sm); }
input[type="radio"]    { border-radius: var(--radius-full); }

input[type="checkbox"]:hover:not(:checked):not(:disabled),
input[type="radio"]:hover:not(:checked):not(:disabled) {
  border-color: var(--color-brand-secondary);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

/* Phosphor check (white) drawn inside the checked checkbox. */
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
input[type="radio"]:checked {
  background-image: radial-gradient(circle at center, #fff 0 4px, transparent 5px);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--color-input-bg-disabled);
}

/* Bootstrap-3 hooks: re-balance the .checkbox / .radio label so the new
   20 px box sits cleanly with the text. The label is a flex row so the box
   and text are TRUE-centred on each other (`align-items: center`) — the old
   absolute box + magic `top` aligned to x-height and read ~2 px low. An 8 px
   gap stands in for BS3's `padding-left`/negative-margin pairing. */
.checkbox,
.radio {
  position: relative;
  /* Bumped 8 → 12 px (each side) so stacked options breathe: ≥ 24 px gap
     between centres of adjacent boxes, well clear of the 20 px box height. */
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
/* Tighten the first item's top + the last item's bottom so the group as a
   whole doesn't push outside the form-group's intended footprint. */
.form-group > .checkbox:first-child,
.form-group > .radio:first-child { margin-top: var(--space-2); }
.form-group > .checkbox:last-child,
.form-group > .radio:last-child  { margin-bottom: 0; }
.checkbox label,
.radio label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: 0;
  min-height: 20px;
  line-height: 1.4;
  cursor: pointer;
  font-weight: var(--font-weight-regular) !important;   /* defeat BS3's 700 on .checkbox label */
  color: var(--color-text-default);
  font-family: var(--font-family-ui) !important;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  position: static;       /* back into flow — flex centres it against the text */
  margin: 0;
}
/* Inline variant (`.checkbox-inline` + `.radio-inline` from BS3): same centred
   flex row, but inline-flex so several flow on one line. */
.checkbox-inline,
.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: 0;
}
.checkbox-inline input[type="checkbox"],
.radio-inline input[type="radio"] {
  position: static;
  margin: 0;
}

/* Metronic `.mt-checkbox` / `.mt-radio` (the option rows used across the
   registration, update, role/org admin and print-form modals) ALSO hide the
   native input and paint a grey <span> box (#E6E6E6 / #d9d9d9-outline + a grey
   tick) — so, like the table case below, they bypass the design-system control
   entirely. PR 578 only reached BS3 `.checkbox`/`.radio`; these never picked it
   up. Reveal the native input so it adopts the DS look (20px box, brand-primary
   checked, Phosphor tick, green focus), hide the vendor box, and lay the label
   out as a true-centred flex row — the same treatment `.checkbox label` gets
   above. !important defeats components-rounded.css, which hides the input
   (`position:absolute; z-index:-1; opacity:0`), pads the label `padding-left:30px`
   for the absolute box, and forces BS bold weight.
   (The in-table single-cell case keeps its own, more specific block below.) */
.mt-checkbox,
.mt-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  padding-left: 0 !important;          /* defeat vendor padding-left: 30px (room for the absolute box) */
  margin-bottom: var(--space-3);
  min-height: 20px;
  line-height: 1.4;
  cursor: pointer;
  font-weight: var(--font-weight-regular) !important;   /* defeat BS/vendor bold on option labels */
  color: var(--color-text-default);
  font-family: var(--font-family-ui) !important;
}
/* Match ANY input under the wrapper, not just the type that "matches" the class.
   Some markup pairs `.mt-checkbox` with a `type="radio"` input (e.g. the print
   modal's user-select rows) — a typed selector (`> input[type="checkbox"]`) would
   miss it, leaving the input hidden while the <span> below is removed → an
   invisible-but-clickable control. The vendor rule is itself untyped
   (`.mt-checkbox > input`), so mirror that; the global `input[type="checkbox"|"radio"]`
   styling then paints the correct box/circle from the input's real type. */
.mt-checkbox > input,
.mt-radio > input {
  position: static !important;         /* defeat vendor position:absolute */
  z-index: auto !important;            /* defeat vendor z-index:-1 (input buried behind the box) */
  opacity: 1 !important;               /* defeat vendor opacity:0 — reveal the real control */
  margin: 0 !important;
}
.mt-checkbox > span,
.mt-radio > span {
  display: none !important;            /* hide the vendor painted box + its grey tick */
}
/* Inline groups (`.mt-checkbox-inline` / `.mt-radio-inline` wrappers) flow several
   options on one line; keep a clear gap between adjacent labels. */
.mt-checkbox-inline .mt-checkbox,
.mt-checkbox-inline .mt-radio,
.mt-radio-inline .mt-checkbox,
.mt-radio-inline .mt-radio {
  display: inline-flex;
  margin-bottom: 0;
}
.mt-checkbox-inline .mt-checkbox:not(:last-child),
.mt-checkbox-inline .mt-radio:not(:last-child),
.mt-radio-inline .mt-checkbox:not(:last-child),
.mt-radio-inline .mt-radio:not(:last-child) {
  margin-right: var(--space-5);
}

/* Metronic `.mt-checkbox` (row-select / select-all in tables) hides the
   native input and paints its own grey <span> box, bypassing the design-
   system checkbox styling above. Inside tables, reveal the native input so
   it adopts the DS look (20 px, brand-primary checked, Phosphor tick, green
   focus) and hide the vendor box.
   !important defeats Metronic's components-rounded.css, which hides the input
   with `position:absolute; opacity:0; z-index:-1` (the z-index buries it behind
   the cell, so it must be re-stacked, not just un-hidden), the label's
   `padding-left:30px`, and the <span> box. */
.table .mt-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;   /* baseline (vendor default) sits the box ~3px high in the row */
  margin: 0 !important;
  padding-left: 0 !important;
  min-height: 0;
}
.table .mt-checkbox > input {   /* untyped: some rows pair .mt-checkbox with a radio (print user-select) */
  position: relative !important;   /* relative + z-index lifts the box above the
                                      cell; vendor buries it at z-index:-1 */
  z-index: 1 !important;
  opacity: 1 !important;
  left: auto !important;
}
.table .mt-checkbox > span {
  display: none !important;
}

/* ============================================================
 * FORM MODAL SHELL (.ng-form-modal)
 * ------------------------------------------------------------
 * Shared shell for create/generate/select workflows. Put the class on
 * `.modal-dialog`; width remains controlled by Bootstrap's modal-* class.
 * ============================================================ */
.ng-form-modal .modal-content {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.ng-form-modal .modal-header,
.ng-form-modal .modal-body,
.ng-form-modal .modal-footer {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.ng-form-modal .modal-header {
  position: relative;
  padding-top: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.ng-form-modal .modal-title {
  margin: 0;
  padding-right: var(--space-8);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-strong);
}
.ng-form-modal__subtitle {
  margin: var(--space-1) 0 0;
  padding-right: var(--space-8);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}
/* Metronic `.close` paints a 9px PNG and hides text with
   text-indent:-10000px (both !important). Remove it and draw one ×. */
.ng-form-modal .modal-header .close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  opacity: 1;
  font-size: 24px;
  line-height: 1;
  text-indent: 0 !important;          /* defeat vendor -10000px */
  background-image: none !important;  /* defeat vendor remove-icon png */
}
.ng-form-modal .modal-header .close::before {
  content: "\00d7";
}
.ng-form-modal .modal-header .close:hover,
.ng-form-modal .modal-header .close:focus {
  background-color: var(--color-bg-sunken);
  color: var(--color-text-strong);
}
.ng-form-modal .modal-body {
  max-height: calc(100vh - 180px);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  overflow-y: auto;
}
.ng-form-modal .modal-footer {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}
.ng-form-modal__section + .ng-form-modal__section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}
.ng-form-modal__section-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-family-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}
.ng-form-modal__section-text {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
}
.ng-form-modal__section .form-group:last-child {
  margin-bottom: 0;
}
.ng-form-modal__option-panel {
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-raised);
}
.ng-form-modal__option-panel .mt-checkbox-list,
.ng-form-modal__option-panel .mt-radio-inline {
  margin-bottom: 0;
}
.ng-form-modal__search-actions {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  min-height: 66px;
  padding-bottom: 0;
}
.ng-form-modal__columns {
  display: flex;
  flex-wrap: wrap;
}
.ng-form-modal__columns > [class*="col-"] {
  display: flex;
}
.ng-form-modal__conditional {
  display: none;
}
.ng-form-modal__toggle-row {
  padding-top: var(--space-2);
}
.ng-form-modal__toggle-row .mt-checkbox,
.ng-form-modal__toggle-row .mt-radio {
  margin-bottom: 0;
}
.ng-form-modal__selectable-row {
  cursor: pointer;
}

/* ---------- FORM MODAL: SEARCH PICKER (Add Update) ----------
   A search-and-pick block inside the form modal shell: the results area is a
   stateful surface (prompt before the first search → branded DT spinner while
   searching → table, or a no-match state), and a persistent selection strip
   names the picked record independent of the table page it sits on. */

/* Refusal notice with an action — a Feedback warning alert carrying the reason
   plus the one control that resolves it (Add Update's "an update is already
   open" → Continue that one). Same anatomy as `.ng-section-check-note`
   (_profile.css): flex so icon, reason and action share a line, action pinned
   right. `[hidden]` first, as with the selection strip below — display:flex
   would otherwise defeat the attribute this banner is toggled with. */
.ng-form-modal__notice[hidden] {
  display: none;
}
.ng-form-modal__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.ng-form-modal__notice-icon {
  margin-top: 2px;
  flex-shrink: 0;
}
.ng-form-modal__notice-body {
  flex: 1;
  min-width: 0;
}
.ng-form-modal__notice-action {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Prompt / no-match panels — quiet raised surface, same recipe as
   .ng-form-modal__option-panel so the empty states read as "the results area". */
.ng-form-modal__results-state {
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-raised);
}

/* Selection strip — who the update is for. Also serves the preset (profile)
   variant, which renders it server-side with the search half absent. */
.ng-form-modal__selection[hidden] {
  /* the author display:flex below would otherwise defeat the hidden attribute */
  display: none;
}
.ng-form-modal__selection {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--color-brand-secondary-soft);
}
.ng-form-modal__selection-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.ng-form-modal__selection-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}
.ng-form-modal__selection-meta {
  font-family: var(--font-family-data);
  font-size: var(--font-size-sm);
  color: var(--color-text-default);
}

/* Selected row — engaged tint + start bar. !important matches the vendor-strength
   hover rule (_data-display.css "Row hover"); this selector's four classes beat
   the hover's three, so the selected look holds while hovered. */
.ng-form-modal .table.table-hover > tbody > tr.ng-form-modal__selectable-row--selected > td {
  background-color: var(--color-brand-secondary-soft) !important;
}
.ng-form-modal .table.table-hover > tbody > tr.ng-form-modal__selectable-row--selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--color-brand-secondary);
}

/* Modal tables match the portlet lists' condensed rhythm (_data-display.css
   "List tables"); !important + the extra class out-compete the base cell-padding
   rule there, so file order doesn't matter. */
.ng-form-modal .dataTables_wrapper table.dataTable > tbody > tr:not(.child) > td,
.ng-form-modal .dataTables_wrapper table.dataTable > tbody > tr:not(.child) > th {
  padding-top: var(--space-1) !important;
  padding-bottom: var(--space-1) !important;
}

@media (max-width: 767px) {
  .ng-form-modal__columns,
  .ng-form-modal__columns > [class*="col-"] {
    display: block;
  }
  .ng-form-modal__columns > [class*="col-"] + [class*="col-"] {
    margin-top: var(--space-4);
  }
  .ng-form-modal__search-actions {
    min-height: 0;
  }
}

/* ---------- VALIDATION (resting hook; PR 4 expands) ---------- */
.form-group.has-error .form-control {
  border-color: var(--color-feedback-danger) !important;
  background-color: var(--color-feedback-danger-bg) !important;
}
.form-group.has-error .control-label,
.form-group.has-error .help-block {
  color: var(--color-feedback-danger) !important;
}
.form-group.has-success .form-control {
  border-color: var(--color-feedback-success) !important;
}
/* Bootstrap 3 hard-codes the warning state to a fixed brown that stays light in
   dark mode — pin it to the feedback token so it adapts. Both classes can sit on
   one field (custom.js leaves .has-warning in place when an error lands), so the
   :not() keeps the error red winning. */
.form-group.has-warning:not(.has-error) .form-control {
  border-color: var(--color-feedback-warning) !important;
}
.form-group.has-warning:not(.has-error) .control-label,
.form-group.has-warning:not(.has-error) .help-block {
  color: var(--color-feedback-warning) !important;
}

/* ---------- FORM WIZARD STEPS (Registration New Applicant) ---------- */
/* Drop the chunky striped progress bar sitting between the step nav and the
   fields — the numbered steps already convey progress. */
.form-wizard .form-body > .progress { display: none !important; }
/* Step labels shipped at weight 300 (too light); make them read clearly. */
.form-wizard .steps .step .desc {
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-default) !important;
}
.form-wizard .steps .step.active .desc {
  color: var(--color-text-strong) !important;
}
/* Wizard surfaces — vendor plugins.css hardcodes #fff bar + #eee circles; token-
   drive so the stepper flips in dark. Active/done circles (brand colours, more
   specific selectors) keep their fill. */
.form-wizard .steps,
.form-wizard .steps > li > a.step {
  background-color: var(--color-bg-surface) !important;
}
.form-wizard .steps > li > a.step > .number {
  background-color: var(--color-bg-sunken);
  color: var(--color-text-muted);
}

/* ---------- SELECT2 (dark-safe + DS surfaces) ----------
   Vendor select2-bootstrap hardcodes #fff box, #c2cad8 border, #555 text and a
   #fff dropdown — all break dark mode. Token-drive so they flip and match the
   .form-control fields everywhere select2 is used (reports, filters,
   registration). (The multi-select tags need no rule here: the choice rule
   further up tints them with color-mix into --color-bg-surface, so they flip
   on their own.) */
.select2-container--bootstrap .select2-selection,
.select2-container--default .select2-selection {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-text-default);
}
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection {
  border-color: var(--color-input-border-focus);
}
.select2-dropdown {
  background-color: var(--color-bg-surface);
  border-color: var(--color-input-border);
}
.select2-results__option { color: var(--color-text-default); }
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-brand-primary);   /* navy — white text ≈ 9:1 AA */
  color: var(--color-text-inverse);
}
.select2-results__option[aria-selected="true"] {
  background-color: var(--color-brand-secondary-soft);
  color: var(--color-text-strong);
}
.select2-selection__placeholder { color: var(--color-text-faint) !important; }
.select2-search--dropdown .select2-search__field {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-text-default);
}
.select2-container--disabled .select2-selection,
.select2-container--bootstrap.select2-container--disabled .select2-selection {
  background-color: var(--color-input-bg-disabled);
}

/* ---------- BOOTSTRAP-DATEPICKER (dark-safe) ----------
   Vendor bootstrap-datepicker3 hardcodes a #fff panel, #eee hover, #428bca
   selected, etc. Token-drive the panel + key states so the calendar flips.
   (Fine range-gradient cells are left to vendor — low traffic.) */
.datepicker.datepicker-dropdown,
.datepicker-dropdown,
.datepicker-inline {
  background-color: var(--color-bg-surface);
  border-color: var(--color-input-border);
  color: var(--color-text-default);
}
.datepicker table tr td,
.datepicker table tr th { color: var(--color-text-default); }
.datepicker table tr td.old,
.datepicker table tr td.new { color: var(--color-text-disabled); }
.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datepicker table tr th:hover,
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
  background: var(--color-bg-sunken);
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled {
  background-color: var(--color-brand-tertiary) !important;
  color: var(--color-text-inverse) !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.selected,
.datepicker table tr td span.active {
  background-color: var(--color-brand-primary) !important;
  background-image: none !important;
  color: var(--color-text-inverse) !important;
  text-shadow: none !important;
}
.datepicker-dropdown:after { border-bottom-color: var(--color-bg-surface); }
.datepicker-dropdown:before { border-bottom-color: var(--color-input-border); }
.datepicker-dropdown.datepicker-orient-top:after { border-top-color: var(--color-bg-surface); }
.datepicker-dropdown.datepicker-orient-top:before { border-top-color: var(--color-input-border); }
.input-daterange .input-group-addon {
  background-color: var(--color-bg-sunken);
  border-color: var(--color-input-border);
  color: var(--color-text-muted);
}

/* ---------- REPORT FILTER GROUP TITLE ----------
   The report pages set this inline (#666 / #eee), which won't flip. Override from
   the refinements layer (loaded after the page <style>) so it's token-driven —
   without touching the report templates (print-coupled). */
.filter-group-title {
  color: var(--color-text-muted);
  border-bottom-color: var(--color-border-default);
}

/* ---------- USER STATUS SECTION (activate / deactivate) ----------
   Legacy hook — profile modal styles live in _user-forms.css (.ng-user-profile). */