/* ============================================================
 * 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;
}

/* Results area — the block that follows the search form.
   Needs its own top margin because the section's
   `.form-group:last-child { margin-bottom: 0 }` above zeroes the trailing
   field's margin: every .form-group is the only child of its .col-md-*, so
   `:last-child` matches ALL of them, not just the final field. Without this the
   results surface butts straight up against the bottom row of inputs. Fixing it
   on the field rule instead would reintroduce trailing space at every section
   boundary, which is what that rule exists to remove. */
.ng-form-modal__results {
  margin-top: var(--space-5);
}

/* 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). */