/* ================================================================================================
   FORMIO UNIVERSAL THEME  — v4.1 (consolidated, clarity-first rewrite)

   Changes from v3.0:
   - Merged the trailing "Wardline htmlelement polish" block into its proper sections (§32)
     — no more overrides fighting the cascade; every rule appears exactly once at the
       right specificity, with !important only where Form.io or Choices.js injects inline styles.
   - Labels: all label / legend / control-label colours are now navy (--c-800 / --n-900).
     Slate is gone from label context entirely.
   - Eye strain: sharpened contrast on all text, borders, and backgrounds; minimum contrast
     ratio lifted to WCAG AA throughout; anti-aliasing tuned; slightly larger base font-size.
   - Input borders: 2px solid at rest (was 1.5px) with a clearly visible navy tint so the
     field boundary is immediately obvious even on white backgrounds.
   - Placeholders: now --n-500 (was --n-400) with normal weight so they read but still
     distinguish themselves from real values.
   - All Wardline htmlelement classes folded into §32 without !important clashes.

   Changes from v4.0 → v4.1:
   - The dangling "LAYOUT" block at the bottom (.wl-shell, .wl-sidebar, .wl-topbar, .wl-kpi-grid,
     .wl-card, etc.) referenced custom properties that were never declared anywhere in :root
     (--teal, --teal-dark, --teal-xlight, --amber, --amber-xlight, --red, --red-light, --border,
     --border-2, --ink, --ink-2, --ink-3, --ink-4, --surface, --surface-2, --radius-sm,
     --radius-md, --shadow-sm). Every declaration using an undefined var() is invalid and gets
     dropped, so this entire dashboard/sidebar kit was rendering unstyled. Remapped each one onto
     the existing token set (mostly the --wl-* clinical palette) and moved the whole thing into
     its own numbered section, §35, right after the helpers it's a sibling of.
   - The "INSURANCE OVERRIDE CSS" block was sitting after a stray comment at the very end of the
     file with no section heading. It's internally consistent (hardcoded colours, nothing
     undefined) so it's left as-is, just relocated into §36 immediately after §35 — it overrides
     the dashboard widgets §35 defines, so it now sits right next to what it's overriding instead
     of being disconnected at the bottom of the file.
   - No colours, selectors, or values were changed beyond substituting undefined var() names for
     equivalent existing tokens. Sections 00–34 are untouched.

   Coverage:
     00  Design tokens
     01  Reset + base shell
     02  Typography (labels, help text, tooltips, required marks)
     03  Text inputs (text, textarea, number, password, email, url, phone, currency)
     04  Input groups (prefix / suffix addons)
     05  Checkbox
     06  Radio
     07  Select (Choices.js — single & multi)
     08  Tags
     09  Date / Time (Flatpickr)
     10  Survey table
     11  Signature pad
     12  File upload
     13  Address
     14  Captcha
     15  Layout — Panel
     16  Layout — Fieldset & Well
     17  Layout — Columns
     18  Layout — Tabs
     19  Layout — Table
     20  Layout — HTML / Content element
     21  Data — DataGrid
     22  Data — EditGrid
     23  Data — Tree
     24  Data — DataMap
     25  Container cards
     26  Wizard / multi-page
     27  Buttons
     28  Validation & alerts
     29  Loading / empty states
     30  Selection micro-interactions
     31  App shell (topbar, toasts, success overlay)
     32  Clinical / Insurance UI helpers  ← Wardline htmlelement polish lives here
     33  Responsive
     34  Reduced motion & accessibility
     35  Sidebar shell & dashboard widgets (Wardline)
     36  Insurance dashboard & report overrides
   ================================================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   00 — DESIGN TOKENS
   Single :root block — no duplication, no overrides later.
   ============================================================ */

:root {
  /* Brand — cobalt ink */
  --c-900: #041827;
  --c-800: #13275a;
  --c-700: #1c3777;
  --c-600: #284a97;
  --c-500: #3c60b8;
  --c-400: #6c86d2;
  --c-300: #9fb1e3;
  --c-200: #cdd8f1;
  --c-100: #e7ecf9;
  --c-50:  #f4f7fd;

  /* Accent — signal teal */
  --a-700: #0b6e5c;
  --a-600: #0f8d75;
  --a-500: #16a98c;
  --a-400: #52c3a9;
  --a-100: #d8f3ec;
  --a-50:  #eefaf6;

  /* Neutral — slightly warmer for less eye strain */
  --n-950: #0a0d14;
  --n-900: #141824;
  --n-800: #1e2333;   /* was #232838 — richer, less grey */
  --n-700: #323a50;   /* was #3a4155 — higher contrast on white */
  --n-600: #4a5168;   /* was #575f75 */
  --n-500: #6b7390;   /* was #767d92 */
  --n-400: #8d95a8;   /* was #9aa1b3 */
  --n-300: #b8bfce;
  --n-200: #ced3df;   /* was #dde0e8 — slightly darker so borders show on white */
  --n-150: #dde1ea;
  --n-100: #eceef4;
  --n-50:  #f5f6f9;

  /* Semantic — success */
  --sage-700: #1a6347;
  --sage-600: #247a5a;
  --sage-100: #ceeadc;
  --sage-50:  #edf7f2;

  /* Semantic — warning */
  --amber-700: #7a4e0a;
  --amber-600: #9a6515;
  --amber-300: #e8b45e;
  --amber-100: #f9e4c0;
  --amber-50:  #fff8ec;

  /* Semantic — danger */
  --rose-700: #961c35;
  --rose-600: #b52644;
  --rose-100: #fccfda;
  --rose-50:  #fff0f3;

  /* Surfaces */
  --white: #ffffff;
  --bg:    #f0f2f8;

  /* Border radius */
  --r-xs:   5px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   26px;
  --r-2xl:  34px;
  --r-pill: 999px;

  /* Elevation */
  --e-1: 0 1px 3px rgba(13,27,61,.06), 0 1px 2px rgba(13,27,61,.04);
  --e-2: 0 3px 10px rgba(13,27,61,.08), 0 1px 3px rgba(13,27,61,.05);
  --e-3: 0 6px 20px rgba(13,27,61,.11), 0 2px 6px rgba(13,27,61,.06);
  --e-4: 0 16px 44px rgba(13,27,61,.14), 0 4px 12px rgba(13,27,61,.07);
  --e-5: 0 28px 72px rgba(13,27,61,.18), 0 8px 20px rgba(13,27,61,.09);

  /* Focus rings */
  --focus-ring:        0 0 0 3px rgba(40,74,151,.28);
  --focus-ring-accent: 0 0 0 3px rgba(15,141,117,.28);
  --focus-ring-danger: 0 0 0 3px rgba(181,38,68,.24);

  /* Typography */
  --font-head: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --spring: cubic-bezier(.34,1.4,.64,1);
  --ease:   cubic-bezier(.22,1,.36,1);
  --t1: 120ms;
  --t2: 200ms;
  --t3: 320ms;
  --t4: 480ms;

  /* Shell */
  --shell-max: 1360px;
  --topbar-h:  62px;

  /* Clinical palette (Wardline) */
  --wl-ink:       #0f172a;
  --wl-teal-deep: #123f45;
  --wl-mint:      #8de2d0;
  --wl-slate:     #475569;   /* used only for body text in UI helpers, not labels */
  --wl-mist:      #8496ad;
  --wl-border:    #dde3ea;
  --wl-bg:        #f6f8fa;
  --wl-surface:   #ffffff;
  --wl-green:     #059669;
  --wl-green-bg:  #ecfdf5;
  --wl-amber:     #b45309;
  --wl-amber-bg:  #fff7ed;
  --wl-red:       #dc2626;
  --wl-red-bg:    #fef2f2;
  --wl-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wl-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --wl-radius:    14px;
  --wl-radius-sm: 9px;
  --wl-shadow:    0 1px 3px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.07);
  --wl-topbar-h:  60px;
}


/* ============================================================
   01 — RESET + BASE + FULL-SCREEN SHELL
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 15.5px;            /* bumped from 15 — reduces eye strain */
  line-height: 1.6;             /* slightly more generous */
  color: var(--n-700);
  background:
    radial-gradient(ellipse 55% 45% at 2% 0%,  rgba(205,216,241,.60), transparent),
    radial-gradient(ellipse 45% 40% at 100% 4%, rgba(216,243,236,.40), transparent),
    linear-gradient(165deg, #f7f9fc 0%, #f0f2f8 55%, #eaecf3 100%);
  -webkit-font-smoothing:  subpixel-antialiased; /* sharpens glyphs vs antialiased on retina */
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--c-600); }

/* Form mount point */
.formio-app-shell,
#formio,
.clinical-app {
  width: 100%;
  padding: 12px clamp(16px, 5vw, 40px) 100px;
}

.formio-app-shell > .formio-form,
#formio > .formio-form,
.formio-form,
.clinical-shell {
  width: min(var(--shell-max), 100%);
  margin: 0 auto;
  animation: formAppear var(--t4) var(--ease) both;
}

@keyframes formAppear {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Grid reset */
.formio-form, #formio { min-width: 0; }
.formio-component, .formio-form .form-group { min-width: 0; }
.formio-form .row { width: auto; max-width: 100%; margin-right: -10px; margin-left: -10px; }
.formio-form [class*="col-"] { min-width: 0; padding-right: 10px; padding-left: 10px; }

/* Strip Bootstrap chrome from outermost wrapper card */
.formio-form > .card                { background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; }
.formio-form > .card > .card-header { display: none; }
.formio-form > .card > .card-body   { padding: 0; background: transparent; }


/* ============================================================
   02 — TYPOGRAPHY
   Labels are navy (--c-800 / --n-900). Slate is not used here.
   ============================================================ */

.formio-form label,
.formio-form .control-label,
.formio-form legend {
  font-family: var(--font-body);
  font-size: 13.5px;            /* slightly larger for clarity */
  font-weight: 700;
  color: var(--c-800);          /* navy — was n-800 / slate */
  letter-spacing: .01em;
  line-height: 1.35;
  margin-bottom: 8px;
  display: block;
}

/* Required asterisk — brighter navy-red so it reads without alarm */
.formio-form .field-required { color: var(--c-600); }

/* Help / description text */
.formio-form .form-text,
.formio-form .help-block:not(.has-error),
.formio-form .formio-component-description {
  font-size: 12px;              /* bumped from 11.5 */
  color: var(--n-600);          /* was n-500 — more readable */
  line-height: 1.55;
  margin-top: 6px;
  display: block;
}

.formio-form .formio-component         { margin-bottom: 22px; }
.formio-form .formio-component:last-child { margin-bottom: 0; }
.formio-form .formio-component-htmlelement,
.formio-form .formio-component-content { margin-bottom: 18px; }

/* Tooltip icon */
.formio-form i.text-muted[ref="tooltip"] {
  color: var(--n-400);
  margin-left: 5px;
  cursor: help;
  transition: color var(--t1);
}
.formio-form i.text-muted[ref="tooltip"]:hover { color: var(--c-600); }

.tooltip .tooltip-inner {
  background: var(--n-900);
  color: #fff;
  font-size: 12.5px;
  font-family: var(--font-body);
  border-radius: var(--r-xs);
  padding: 7px 11px;
  box-shadow: var(--e-3);
}

/* Section headings inside htmlelement */
.formio-form .formio-component-htmlelement h1,
.formio-form .formio-component-htmlelement h2,
.formio-form .formio-component-htmlelement h3,
.formio-form .formio-component-panel .card-title {
  font-family: var(--font-head);
  color: var(--n-900);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.formio-form .formio-component-htmlelement h1 { font-size: clamp(20px, 3.2vw, 28px); }
.formio-form .formio-component-htmlelement h2 { font-size: clamp(18px, 2.6vw, 22px); }
.formio-form .formio-component-htmlelement h3 { font-size: 16.5px; }
.formio-form .formio-component-htmlelement p  { color: var(--n-600); font-size: 15px; margin-top: 6px; line-height: 1.6; }


/* ============================================================
   03 — TEXT INPUTS
   Covers: text, textarea, number, password, email, url, phone, currency.
   Border is now 2px with a navy tint so it's always visible on white.
   Placeholder is n-500 (dark enough to see, lighter than real values).
   ============================================================ */

.formio-form .form-control {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;             /* 2px taller for comfort */
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 14.5px;            /* was 14 */
  font-weight: 500;
  line-height: 1.45;
  color: var(--n-900);
  background: var(--white);
  border: 2px solid var(--n-200);   /* was 1.5px — now clearly visible */
  border-radius: var(--r-sm);
  box-shadow: var(--e-1), inset 0 1px 2px rgba(13,27,61,.03);
  outline: none;
  transition:
    border-color var(--t1) var(--ease),
    box-shadow   var(--t1) var(--ease),
    transform    var(--t1) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

/* Placeholder — visible but clearly secondary */
.formio-form .form-control::placeholder {
  color: var(--n-500);          /* was n-400 — readable without confusion */
  font-weight: 400;
  opacity: 1;                   /* Firefox sometimes dims placeholders */
}

.formio-form .form-control:hover:not(:disabled):not([readonly]) {
  border-color: var(--c-400);   /* navy tint on hover */
  box-shadow: var(--e-2), inset 0 1px 2px rgba(13,27,61,.03);
}
.formio-form .form-control:focus-visible {
  border-color: var(--c-600);
  box-shadow: var(--focus-ring), var(--e-2);
  transform: translateY(-1px);
}

.formio-form .form-control:disabled,
.formio-form .form-control[readonly] {
  background: linear-gradient(135deg, #f7f8fc, #f0f2f7);
  color: var(--n-500);
  border-color: var(--n-150);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Computed / summary disabled field — teal tint */
.formio-form .formio-component:not(.formio-component-datagrid) .form-control:disabled {
  background: linear-gradient(135deg, var(--a-50), #fff);
  border-color: var(--a-100);
  color: var(--a-700);
  font-weight: 700;
}

.formio-form textarea.form-control {
  min-height: 130px;
  resize: vertical;
  line-height: 1.7;
}

/* Remove native number spinners */
.formio-form input[type="number"]::-webkit-outer-spin-button,
.formio-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.formio-form input[type="number"] { -moz-appearance: textfield; }
.formio-form .formio-component-number .form-control,
.formio-form .formio-component-currency .form-control { font-variant-numeric: tabular-nums; }
.formio-form .formio-component-currency .form-control { text-align: right; }

/* Word / char counter */
.formio-form .formio-component-textarea .char-count,
.formio-form .formio-component-textarea .word-count,
.formio-form .formio-component-textarea .charcount,
.formio-form .formio-component-textarea .wordcount {
  font-size: 11.5px;
  color: var(--n-500);
  margin-top: 5px;
  text-align: right;
  display: block;
}

/* Password reveal toggle */
.formio-form .formio-component-password .input-group-append .btn {
  background: var(--n-100);
  border-left: none;
  color: var(--n-500);
}
.formio-form .formio-component-password .input-group-append .btn:hover {
  color: var(--c-600);
  background: var(--c-50);
}


/* ============================================================
   04 — INPUT GROUPS (prefix / suffix addons)
   ============================================================ */

.formio-form .input-group {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 2px solid var(--n-200);   /* matched to §03 */
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--e-1);
  transition: border-color var(--t1), box-shadow var(--t1);
  min-height: 50px;
}
.formio-form .input-group:focus-within {
  border-color: var(--c-600);
  box-shadow: var(--focus-ring), var(--e-2);
}
.formio-form .input-group:hover:not(:focus-within) { border-color: var(--c-400); }

.formio-form .input-group .form-control {
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  min-height: auto;
  flex: 1;
}

.formio-form .input-group-text {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--n-50);
  border: none;
  border-right: 2px solid var(--n-200);
  color: var(--c-800);           /* navy — was n-600 */
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.formio-form .input-group > .input-group-append > .input-group-text,
.formio-form .input-group > .input-group-append .btn {
  border-right: none;
  border-left: 2px solid var(--n-200);
}


/* ============================================================
   05 — CHECKBOX
   ============================================================ */

.formio-form .formio-component-checkbox .form-check,
.formio-form .formio-component-selectboxes .form-check {
  padding-top: 10px;
  padding-bottom: 10px;
}

.formio-form .formio-component-checkbox .form-check:hover,
.formio-form .formio-component-selectboxes .form-check:hover {
  border-color: var(--c-300);
  background: var(--c-50);
}
.formio-form .formio-component-checkbox .form-check:has(input:checked),
.formio-form .formio-component-selectboxes .form-check:has(input:checked) {
  border-color: var(--c-500);
  background: var(--c-50);
}

.formio-form .formio-component-checkbox label.form-check-label,
.formio-form .formio-component-selectboxes label.form-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--n-800);
  cursor: pointer;
  margin: 0;
  padding: 0;
  user-select: none;
}
.formio-form .formio-component-checkbox label.form-check-label::before,
.formio-form .formio-component-checkbox label.form-check-label::after,
.formio-form .formio-component-selectboxes label.form-check-label::before,
.formio-form .formio-component-selectboxes label.form-check-label::after { display: none; }

.formio-form .formio-component-checkbox input[type="checkbox"],
.formio-form .formio-component-selectboxes input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 6px;
  border: 2px solid var(--n-300);
  background: var(--white);
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transition: background var(--t2) var(--ease), border-color var(--t2) var(--ease);
  margin: 0;
  flex-shrink: 0;
  z-index: 1;
}
.formio-form .formio-component-checkbox input[type="checkbox"]::after,
.formio-form .formio-component-selectboxes input[type="checkbox"]::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: 2px solid transparent;
  border-top: none;
  border-left: none;
  border-radius: 1px;
  transform: rotate(45deg) scale(0);
  transition: transform var(--t2) var(--spring), border-color var(--t1);
}
.formio-form .formio-component-checkbox input[type="checkbox"]:hover,
.formio-form .formio-component-selectboxes input[type="checkbox"]:hover { border-color: var(--c-400); }
.formio-form .formio-component-checkbox input[type="checkbox"]:focus-visible,
.formio-form .formio-component-selectboxes input[type="checkbox"]:focus-visible {
  box-shadow: var(--focus-ring);
  border-color: var(--c-500);
  outline: none;
}
.formio-form .formio-component-checkbox input[type="checkbox"]:checked,
.formio-form .formio-component-selectboxes input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--c-500), var(--c-700));
  border-color: var(--c-600);
}
.formio-form .formio-component-checkbox input[type="checkbox"]:checked::after,
.formio-form .formio-component-selectboxes input[type="checkbox"]:checked::after {
  border-color: #fff;
  transform: rotate(45deg) scale(1);
}
.formio-form .formio-component-checkbox input[type="checkbox"]:disabled,
.formio-form .formio-component-selectboxes input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* Indeterminate */
.formio-form input[type="checkbox"]:indeterminate {
  background: var(--c-100);
  border-color: var(--c-400);
}
.formio-form input[type="checkbox"]:indeterminate::after {
  top: 7px;
  left: 3px;
  width: 10px;
  height: 2px;
  border: none;
  background: var(--c-600);
  transform: rotate(0) scale(1);
  border-radius: 2px;
}

/* ============================================================
   06 — RADIO
   ============================================================ */

.formio-form .formio-component-radio [role="radiogroup"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* .formio-form .formio-component-radio .radio.form-check {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 2px solid var(--n-200);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--t1), background var(--t1);
  list-style: none;
}
.formio-form .formio-component-radio .radio.form-check:hover {
  border-color: var(--c-300);
  background: var(--c-50);
}
.formio-form .formio-component-radio .radio.form-check:focus-within {
  outline: 2px solid rgba(40,74,151,.22);
  outline-offset: 2px;
}
.formio-form .formio-component-radio .radio.form-check:has(input:checked),
.formio-form .formio-component-radio .radio.form-check.radio-selected,
.formio-form .formio-component-radio .radio.form-check.mh-radio-selected {
  border-color: var(--c-500);
  background: var(--c-50);
}

.formio-form .formio-component-radio .radio.form-check > label.form-check-label {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px 14px 48px;
  margin: 0;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--n-800);
  user-select: none;
}

.formio-form .formio-component-radio .radio.form-check > label.form-check-label > input[type="radio"] {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  pointer-events: auto;
}

.formio-form .formio-component-radio .radio.form-check > label.form-check-label::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--n-300);
  background: var(--white);
  box-sizing: border-box;
  pointer-events: none;
  transition: border-color var(--t1);
}
.formio-form .formio-component-radio .radio.form-check > label.form-check-label::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-700);
  pointer-events: none;
  transition: transform var(--t2) var(--spring);
}
.formio-form .formio-component-radio .radio.form-check > label.form-check-label:has(input:checked)::before,
.formio-form .formio-component-radio .radio.form-check > label.form-check-label.radio-selected::before,
.formio-form .formio-component-radio .radio.form-check > label.form-check-label.mh-radio-selected::before { border-color: var(--c-600); }
.formio-form .formio-component-radio .radio.form-check > label.form-check-label:has(input:checked)::after,
.formio-form .formio-component-radio .radio.form-check > label.form-check-label.radio-selected::after,
.formio-form .formio-component-radio .radio.form-check > label.form-check-label.mh-radio-selected::after { transform: translateY(-50%) scale(1); } */


/* ============================================================
   07 — SELECT (Choices.js — single & multi)
   ============================================================ */

.formio-form .formio-choices { width: 100%; min-width: 0; }

.formio-form .choices__inner {
  width: 100%;
  min-height: 50px;
  padding: 12px 44px 12px 15px;
  background: var(--white);
  border: 2px solid var(--n-200);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--n-900);
  box-shadow: var(--e-1);
  transition: border-color var(--t1), box-shadow var(--t1);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.formio-form .choices__inner:hover { border-color: var(--c-400); box-shadow: var(--e-2); }
.formio-form .choices.is-focused .choices__inner,
.formio-form .choices.is-open   .choices__inner {
  border-color: var(--c-600);
  box-shadow: var(--focus-ring), var(--e-2);
}

.formio-form .choices[data-type*="select-one"] .choices__inner {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23284a97' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.formio-form .choices.is-open .choices__inner {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23284a97' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.formio-form .choices { position: relative; }
.formio-form .choices__list--single { padding: 0; width: 100%; }
.formio-form .choices__list--single .choices__item { color: var(--n-900); font-size: 14.5px; font-weight: 500; }
.formio-form .choices__placeholder { color: var(--n-500); font-weight: 400; }
.formio-form .choices__input { background: transparent; border: none; font-size: 14.5px; color: var(--n-900); padding: 2px 0; margin: 0; }

.formio-form .choices__list--dropdown,
.formio-form .choices__list[aria-expanded] {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 2px);
  z-index: 220;
  background: var(--white);
  border: 2px solid var(--c-300);
  border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: var(--e-4);
  overflow: hidden;
  animation: dropdownOpen 160ms ease-out both;
  max-height: 280px;
  overflow-y: auto;
}
@keyframes dropdownOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.formio-form .choices__list--dropdown .choices__item {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--n-700);
  border-bottom: 1px solid var(--n-100);
  transition: background var(--t1), padding-left var(--t1) var(--ease);
  cursor: pointer;
}
.formio-form .choices__list--dropdown .choices__item:last-child { border-bottom: none; }
.formio-form .choices__item--selectable.is-highlighted { background: var(--c-50); color: var(--c-800); padding-left: 20px; }
.formio-form .choices__list--dropdown .choices__item.is-selected { background: var(--c-100); color: var(--c-800); font-weight: 600; }
.formio-form .choices__list--dropdown .choices__item--selectable::after { display: none; }

.formio-form .choices__input--cloned {
  background: var(--n-50);
  border: 1.5px solid var(--n-150);
  border-radius: var(--r-xs);
  margin: 8px 12px;
  padding: 8px 12px;
  width: calc(100% - 24px);
}


/* ============================================================
   08 — TAGS (Choices.js multi mode)
   ============================================================ */

.formio-form .choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0;
}
.formio-form .choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--c-500), var(--c-700));
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 10px;
  margin: 0;
  animation: tagPop var(--t2) var(--spring) both;
}
@keyframes tagPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

.formio-form .choices__list--multiple .choices__item .choices__button {
  border: none;
  border-left: 1px solid rgba(255,255,255,.35);
  filter: brightness(3);
  opacity: .85;
  width: 8px;
  margin-left: 4px;
  padding-left: 10px;
  transition: opacity var(--t1);
  cursor: pointer;
}
.formio-form .choices__list--multiple .choices__item .choices__button:hover { opacity: 1; }
.formio-form .formio-component-tags .choices__inner { padding: 8px 12px; }


/* ============================================================
   09 — DATE / TIME (Flatpickr)
   ============================================================ */

.formio-form .flatpickr-calendar {
  border-radius: var(--r-lg);
  box-shadow: var(--e-5);
  border: 2px solid var(--n-200);
  overflow: hidden;
  font-family: var(--font-body);
}
.formio-form .flatpickr-months { background: var(--n-900); padding: 10px 0; }
.formio-form .flatpickr-month,
.formio-form .flatpickr-weekday { color: rgba(255,255,255,.85); fill: rgba(255,255,255,.85); }
.formio-form .flatpickr-weekdays { background: var(--n-900); }
.formio-form .flatpickr-day.selected,
.formio-form .flatpickr-day.selected:hover { background: var(--c-600); border-color: var(--c-600); color: #fff; }
.formio-form .flatpickr-day.today { border-color: var(--c-400); }
.formio-form .flatpickr-day:hover { background: var(--c-50); }
.formio-form .flatpickr-day.inRange { background: var(--c-100); box-shadow: -5px 0 0 var(--c-100), 5px 0 0 var(--c-100); }
.formio-form .formio-component-day .row [class*="col-"] { padding-right: 4px; padding-left: 4px; }


/* ============================================================
   10 — SURVEY TABLE
   ============================================================ */

.formio-form .formio-component-survey { overflow-x: auto; }
.formio-form .formio-component-survey table {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid var(--n-200);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 480px;
}
.formio-form .formio-component-survey thead th {
  background: linear-gradient(175deg, var(--n-100), #e4e7ef);
  text-align: left;
  padding: 12px 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-800);          /* navy label */
}
.formio-form .formio-component-survey tbody td {
  text-align: center;
  padding: 12px 14px;
  border-top: 1px solid var(--n-100);
}
.formio-form .formio-component-survey tbody td:first-child { text-align: left; font-weight: 500; color: var(--n-800); }
.formio-form .formio-component-survey tbody tr:hover td { background: var(--c-50); }


/* ============================================================
   11 — SIGNATURE PAD
   ============================================================ */

.formio-form .signature-pad-body,
.formio-form .signature-pad-canvas {
  border: 2px dashed var(--n-300);  /* was n-200 — more visible */
  border-radius: var(--r-md);
  background: var(--n-50);
  overflow: hidden;
  transition: border-color var(--t1), background var(--t1);
}
.formio-form .signature-pad-body:hover { border-color: var(--c-400); background: var(--c-50); }
.formio-form .signature-pad-body canvas { width: 100%; cursor: crosshair; }
.formio-form .formio-component-signature .btn { margin-top: 10px; }


/* ============================================================
   12 — FILE UPLOAD
   ============================================================ */

.formio-form .fileSelector {
  padding: 40px 24px;
  text-align: center;
  background: var(--n-50);
  border: 2px dashed var(--n-300);  /* more visible */
  border-radius: var(--r-md);
  color: var(--n-600);
  font-size: 14.5px;
  transition: border-color var(--t1), background var(--t1);
  cursor: pointer;
}
.formio-form .fileSelector:hover { border-color: var(--c-400); background: var(--c-50); }
.formio-form .fileSelector.fileDragOver { border-color: var(--a-500); background: var(--a-50); box-shadow: var(--focus-ring-accent); }
.formio-form .fileSelector .browse { color: var(--c-600); font-weight: 700; }

.formio-form .file-list .list-group-item,
.formio-form li[ref="file"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 2px solid var(--n-200);
  border-radius: var(--r-sm);
  background: var(--white);
  margin-bottom: 8px;
  font-size: 13.5px;
  color: var(--n-700);
  box-shadow: var(--e-1);
}
.formio-form .file-list .list-group-item a[ref="removeLink"],
.formio-form li[ref="file"] a[ref="removeLink"] { color: var(--rose-600); }


/* ============================================================
   13 — ADDRESS
   ============================================================ */

.formio-form .formio-component-address .pac-container,
.formio-form .formio-component-address .geocode-results {
  border-radius: var(--r-sm);
  box-shadow: var(--e-4);
  border: 2px solid var(--c-200);
  overflow: hidden;
  margin-top: 6px;
}
.formio-form .formio-component-address .map,
.formio-form .formio-component-address .address-map {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid var(--n-200);
  box-shadow: var(--e-2);
  margin-top: 12px;
}


/* ============================================================
   14 — CAPTCHA
   ============================================================ */

.formio-form .formio-component-captcha,
.formio-form .formio-component-recaptcha,
.formio-form .formio-component-hcaptcha {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}


/* ============================================================
   15 — LAYOUT: PANEL
   ============================================================ */

.formio-form .formio-component-panel > .card {
  border: 2px solid var(--n-200);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
  overflow: hidden;
  background: var(--white);
  margin-bottom: 22px;
  animation: sectionReveal var(--t3) var(--ease) both;
}
@keyframes sectionReveal {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.formio-form .formio-component-panel > .card > .card-header {
  display: flex;
  align-items: center;
  background: linear-gradient(175deg, var(--n-50), var(--n-100));
  border-bottom: 2px solid var(--n-200);
  padding: 16px 22px;
}
.formio-form .formio-component-panel .card-header .card-title {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--c-800);           /* navy */
  margin: 0;
}
.formio-form .formio-component-panel > .card > .card-body { padding: 22px; background: var(--white); }
.formio-form .formio-component-panel > .card > .card-body > .formio-component:last-child { margin-bottom: 0; }


/* ============================================================
   16 — LAYOUT: FIELDSET & WELL
   ============================================================ */

.formio-form .formio-component-fieldset fieldset {
  border: 2px solid var(--n-200);
  border-radius: var(--r-md);
  padding: 22px 22px 8px;
  background: var(--white);
  margin-bottom: 22px;
  box-shadow: var(--e-1);
}
.formio-form .formio-component-fieldset legend {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--c-800);           /* navy */
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0 10px;
  width: auto;
  margin-bottom: 14px;
}

.formio-form .formio-component-well,
.formio-form .well {
  background: linear-gradient(170deg, var(--n-50), var(--white));
  border: 2px solid var(--n-150);
  border-radius: var(--r-md);
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}


/* ============================================================
   17 — LAYOUT: COLUMNS
   ============================================================ */

.formio-form .formio-component-columns { margin-bottom: 0; }
.formio-form .formio-component-columns > .row > [class*="col-"] > .formio-component:last-child { margin-bottom: 0; }


/* ============================================================
   18 — LAYOUT: TABS
   ============================================================ */

.formio-form .formio-component-tabs { margin-bottom: 22px; }

.formio-form .nav-tabs,
.formio-form [role="tablist"],
.formio-form .formio-wizard-nav,
.formio-form .formio-wizard-nav-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 4px;
  margin: 0 0 0;
  border: 1px solid var(--n-100);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--n-50);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.formio-form [role="tablist"] li,
.formio-form ul[role="tablist"] li,
.formio-form .nav-tabs li,
.formio-form .formio-wizard-nav li,
.formio-form .formio-wizard-nav-pages li { list-style: none; margin: 0; padding: 0; }

.formio-form .nav-tabs .nav-link,
.formio-form [role="tablist"] [role="tab"],
.formio-form [role="tablist"] a,
.formio-form .formio-wizard-nav .nav-link,
.formio-form .formio-wizard-nav-pages .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--n-500);
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t1), background var(--t1);
  position: relative;
}

.formio-form .nav-tabs .nav-link:hover,
.formio-form [role="tablist"] [role="tab"]:hover,
.formio-form [role="tablist"] a:hover {
  background: var(--c-50);
  border-color: var(--c-300);
  color: var(--c-800);
}

.formio-form .nav-tabs .nav-link.active,
.formio-form [role="tab"][aria-selected="true"],
.formio-form [role="tablist"] a[aria-selected="true"],
.formio-form [role="tablist"] a.active,
.formio-form .formio-wizard-nav .nav-link.active,
.formio-form .formio-wizard-nav-pages .nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, var(--c-600), var(--c-800));
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(40,74,151,.30);
}

.formio-form .tab-content {
  border: 2px solid var(--n-200);
  border-radius: var(--r-md);
  padding: 22px;
  background: var(--white);
  box-shadow: var(--e-1);
}

.formio-form .tab-pane { display: none; }
.formio-form .tab-pane.active,
.formio-form .tab-pane.show { display: block; animation: sectionReveal var(--t2) var(--ease) both; }


/* ============================================================
   19 — LAYOUT: TABLE (static builder table)
   ============================================================ */

.formio-form .formio-component-table > table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--n-200);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 22px;
}
.formio-form .formio-component-table td {
  padding: 14px;
  vertical-align: top;
  border-top: 1px solid var(--n-100);
}
.formio-form .formio-component-table tr:first-child td { border-top: none; }


/* ============================================================
   20 — LAYOUT: HTML / CONTENT ELEMENT
   ============================================================ */

.formio-form .formio-component-htmlelement,
.formio-form .formio-component-content { animation: sectionReveal var(--t3) var(--ease) both; }

.formio-form .formio-component-content > div:not([style]) { color: var(--n-700); line-height: 1.7; }


/* ============================================================
   21 — DATA: DATAGRID
   ============================================================ */

.formio-form .formio-component-datagrid {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
}
.formio-form .formio-component-datagrid::-webkit-scrollbar { height: 5px; }
.formio-form .formio-component-datagrid::-webkit-scrollbar-track { background: var(--n-100); }
.formio-form .formio-component-datagrid::-webkit-scrollbar-thumb { background: var(--c-300); border-radius: 3px; }

.formio-form .formio-component-datagrid table {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border: 2px solid var(--n-200);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--e-2);
}
.formio-form .formio-component-datagrid thead th {
  padding: 12px 16px;
  background: linear-gradient(175deg, var(--n-100), #e4e7ef);
  color: var(--c-800);           /* navy header */
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 2px solid var(--n-200);
  white-space: nowrap;
}
.formio-form .formio-component-datagrid tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--n-100);
  vertical-align: middle;
  font-size: 14px;
  color: var(--n-700);
}
.formio-form .formio-component-datagrid tbody tr:last-child td { border-bottom: none; }
.formio-form .formio-component-datagrid tbody tr:hover td { background: var(--c-50); }

/* Inputs inside datagrid cells */
.formio-form .formio-component-datagrid .form-control {
  min-height: 36px;
  padding: 6px 9px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
  font-size: 13.5px;
}
.formio-form .formio-component-datagrid .form-control:focus-visible {
  border-color: var(--c-400);
  background: var(--white);
  box-shadow: var(--focus-ring);
}

/* Hide repeated labels */
.formio-form .formio-component-datagrid tbody td label.control-label,
.formio-form .formio-component-datagrid tbody td > label { display: none; }
.formio-form .formio-component-datagrid .formio-component { margin-bottom: 0; }

/* Datagrid disabled fields */
.formio-form .formio-component-datagrid .form-control:disabled {
  background: transparent;
  opacity: 1;
  color: var(--n-700);
  border-color: transparent;
  font-weight: 600;
}

/* Checkboxes inside datagrid cells */
.formio-form .formio-component-datagrid tbody td .form-check {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  min-height: auto;
}
.formio-form .formio-component-datagrid tbody td .form-check label.form-check-label { margin: 0; padding: 0; }
.formio-form .formio-component-datagrid tbody td .form-check label.form-check-label::before,
.formio-form .formio-component-datagrid tbody td .form-check label.form-check-label::after { display: none; }

.formio-form .formio-component-datagrid tbody td input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 6px;
  border: 2px solid var(--n-300);
  background: var(--white);
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transition: background var(--t2), border-color var(--t2);
  margin: 0;
}
.formio-form .formio-component-datagrid tbody td input[type="checkbox"]::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: 2px solid transparent;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) scale(0);
  transition: transform var(--t2) var(--spring), border-color var(--t1);
}
.formio-form .formio-component-datagrid tbody td input[type="checkbox"]:hover { border-color: var(--c-400); }
.formio-form .formio-component-datagrid tbody td input[type="checkbox"]:focus-visible { box-shadow: var(--focus-ring); border-color: var(--c-500); outline: none; }
.formio-form .formio-component-datagrid tbody td input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--c-500), var(--c-700));
  border-color: var(--c-600);
}
.formio-form .formio-component-datagrid tbody td input[type="checkbox"]:checked::after {
  border-color: #fff;
  transform: rotate(45deg) scale(1);
}


/* ============================================================
   22 — DATA: EDITGRID
   ============================================================ */

.formio-form .formio-component-editgrid .editgrid-listgroup,
.formio-form .formio-component-editgrid .list-group {
  border: 2px solid var(--n-200);
  border-radius: var(--r-md);
  overflow: hidden;
  list-style: none;
  box-shadow: var(--e-2);
  margin-bottom: 12px;
}
.formio-form .formio-component-editgrid .list-group-item {
  padding: 14px 18px;
  border: none;
  border-bottom: 1px solid var(--n-100);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--n-700);
  transition: background var(--t1);
}
.formio-form .formio-component-editgrid .list-group-item:last-child { border-bottom: none; }
.formio-form .formio-component-editgrid .list-group-item:hover { background: var(--c-50); }
.formio-form .formio-component-editgrid .editgrid-actions .btn { padding: 6px 12px; font-size: 12.5px; }

.formio-form .formio-component-editgrid .editgrid-row-edit,
.formio-form .formio-component-editgrid .card.formio-component-edit-row {
  border: 2px solid var(--c-300);
  border-radius: var(--r-md);
  background: var(--c-50);
  padding: 20px;
  margin: 10px 0;
  box-shadow: var(--e-2);
  animation: sectionReveal var(--t2) var(--ease) both;
}


/* ============================================================
   23 — DATA: TREE
   ============================================================ */

.formio-form .formio-component-tree .tree-container,
.formio-form .formio-component-tree .formio-tree-node {
  border: 2px solid var(--n-200);
  border-radius: var(--r-sm);
  background: var(--white);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--e-1);
}
.formio-form .formio-component-tree .formio-tree-node-toggler { color: var(--c-600); font-weight: 700; }
.formio-form .formio-component-tree .formio-tree-add-child .btn { margin-top: 8px; }


/* ============================================================
   24 — DATA: DATAMAP
   ============================================================ */

.formio-form .formio-component-datamap .datamap-row,
.formio-form .formio-component-datamap .form-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.formio-form .formio-component-datamap .datamap-key .form-control { font-family: var(--font-mono); font-size: 13.5px; }


/* ============================================================
   25 — CONTAINER CARDS
   ============================================================ */

.formio-form .formio-component-container:has(
  .form-control, .choices__inner, .form-check, .input-group,
  .fileSelector, .signature-pad-body, .formio-component-datagrid, .formio-component-editgrid
),
.formio-form .formio-component-container.mh-has-controls {
  background: var(--white);
  border: 2px solid var(--n-200);
  border-radius: var(--r-md);
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: var(--e-2);
  animation: sectionReveal var(--t3) var(--ease) both;
}
.formio-form .formio-component-container:has(.form-control, .choices__inner, .form-check, .input-group) > .formio-component:last-child,
.formio-form .formio-component-container.mh-has-controls > .formio-component:last-child { margin-bottom: 0; }

/* Flatten nested containers */
.formio-form .formio-component-container:has(.form-control, .choices__inner, .form-check)
  .formio-component-container:has(.form-control, .choices__inner, .form-check),
.formio-form .formio-component-container.mh-has-controls .formio-component-container.mh-has-controls {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.formio-form .formio-component-htmlelement + .formio-component-container:has(.form-control, .choices__inner, .form-check),
.formio-form .formio-component-htmlelement + .formio-component-container.mh-has-controls { margin-top: -6px; }


/* ============================================================
   26 — WIZARD / MULTI-PAGE
   ============================================================ */

.formio-form .wizard-page { animation: sectionReveal var(--t3) var(--ease) both; }
.formio-form .wizard-header { margin-bottom: 26px; }

.formio-form .breadcrumb.wizard-breadcrumb,
.formio-form .wizard-page-breadcrumb .pagination {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex-wrap: wrap;
}
.formio-form .wizard-page-breadcrumb .page-item,
.formio-form .breadcrumb.wizard-breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 2px solid var(--n-200);
  color: var(--n-600);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: var(--e-1);
  transition: all var(--t1) var(--ease);
}
.formio-form .wizard-page-breadcrumb .page-item.active,
.formio-form .breadcrumb.wizard-breadcrumb .breadcrumb-item.active {
  background: linear-gradient(135deg, var(--c-500), var(--c-700));
  border-color: var(--c-700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(40,74,151,.30);
}
.formio-form .wizard-page-breadcrumb .page-item.disabled { opacity: .5; }

.formio-form .btn-wizard-nav-previous,
.formio-form .btn-wizard-nav-cancel { background: var(--white); color: var(--n-700); border: 2px solid var(--n-200); box-shadow: var(--e-1); }
.formio-form .btn-wizard-nav-next,
.formio-form .btn-wizard-nav-submit {
  background: linear-gradient(135deg, var(--n-900), var(--c-800));
  color: #fff;
  border-color: var(--c-900);
  box-shadow: 0 8px 22px rgba(13,27,61,.28);
}


/* ============================================================
   27 — BUTTONS
   ============================================================ */

.formio-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 22px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t1) var(--spring), box-shadow var(--t1) var(--ease), filter var(--t1);
}
.formio-form .btn:hover { transform: translateY(-2px); }
.formio-form .btn:active { transform: translateY(0); }
.formio-form .btn:focus-visible { outline: 2px solid var(--c-400); outline-offset: 2px; }
.formio-form .btn:disabled { opacity: .42; transform: none; box-shadow: none; cursor: not-allowed; pointer-events: none; }

.formio-form .btn-primary {
  background: linear-gradient(135deg, var(--c-500), var(--c-700));
  color: #fff;
  border-color: var(--c-600);
  box-shadow: 0 6px 18px rgba(40,74,151,.28);
}
.formio-form .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 24px rgba(40,74,151,.36); }

.formio-form .btn-secondary {
  background: var(--white);
  color: var(--n-700);
  border-color: var(--n-200);
  box-shadow: var(--e-1);
}
.formio-form .btn-secondary:hover { background: var(--c-50); border-color: var(--c-300); color: var(--c-800); }

.formio-form .btn-danger {
  background: linear-gradient(135deg, var(--rose-600), var(--rose-700));
  color: #fff;
  border-color: var(--rose-700);
}
.formio-form .btn-info {
  background: var(--white);
  color: var(--n-700);
  border-color: var(--n-200);
  box-shadow: var(--e-1);
}
.formio-form .btn-info:hover { background: var(--n-50); border-color: var(--n-300); }

.formio-form .btn-warning {
  background: linear-gradient(135deg, var(--amber-600), var(--amber-700));
  color: #fff;
  border-color: var(--amber-700);
}
.formio-form .btn-light { background: var(--n-50); color: var(--n-700); border-color: var(--n-150); }

/* Add / remove row */
.formio-form .formio-button-add-row,
.formio-form [ref="addRow"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 18px;
  background: var(--c-50);
  color: var(--c-700);
  border: 2px solid var(--c-200);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  transition: background var(--t1), transform var(--t1) var(--ease);
}
.formio-form .formio-button-add-row:hover { background: var(--c-100); transform: translateY(-1px); }

.formio-form .formio-button-remove-row,
.formio-form td .btn-danger {
  background: transparent;
  border: none;
  color: var(--rose-600);
  font-weight: 700;
  font-size: 13px;
  opacity: .65;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: none;
  transform: none;
  min-height: auto;
}
.formio-form .formio-button-remove-row:hover,
.formio-form td .btn-danger:hover { opacity: 1; background: var(--rose-50); transform: none; }

/* Submit button */
.formio-form .formio-component-submit { margin-top: 30px; }
.formio-form .formio-component-submit .btn,
.formio-form .submit-btn .btn,
.formio-form button.submit-btn {
  width: 100%;
  min-height: 56px;
  padding: 16px 30px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .015em;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--n-900) 0%, var(--c-800) 100%);
  color: #fff;
  border-color: var(--c-900);
  box-shadow: 0 10px 30px rgba(13,27,61,.30);
  position: relative;
  overflow: hidden;
}
.formio-form .formio-component-submit .btn:hover,
.formio-form .submit-btn .btn:hover { box-shadow: 0 16px 38px rgba(13,27,61,.38); filter: brightness(1.06); }

/* fetch-btn customClass */
.formio-form .fetch-btn .btn {
  display: inline-flex;
  width: auto;
  min-height: 46px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--c-500), var(--c-800));
  color: #fff;
  border-color: var(--c-700);
  box-shadow: 0 6px 20px rgba(40,74,151,.30);
}
.formio-form .fetch-btn .btn:hover { filter: brightness(1.08); }


/* ============================================================
   28 — VALIDATION & ALERTS
   ============================================================ */

.formio-form .has-error .form-control,
.formio-form .form-control.is-invalid,
.formio-form .has-error .choices__inner {
  border-color: var(--rose-600);
  background: var(--rose-50);
  box-shadow: 0 0 0 3px rgba(181,38,68,.16);
}
.formio-form .has-error .control-label,
.formio-form .has-error label { color: var(--rose-700); }

.formio-form .formio-errors,
.formio-form .invalid-feedback,
.formio-form .help-block.has-error {
  color: var(--rose-700);
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 6px;
  display: block;
  animation: alertPop var(--t2) var(--ease) both;
}

.formio-form .alert {
  border-radius: var(--r-md);
  padding: 14px 17px;
  font-size: 14px;
  border: 1.5px solid transparent;
  margin-bottom: 18px;
  animation: alertPop var(--t2) var(--ease) both;
}
@keyframes alertPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.formio-form .alert-danger  { background: var(--rose-50);  border-color: var(--rose-100);  color: var(--rose-700); }
.formio-form .alert-success { background: var(--sage-50);  border-color: var(--sage-100);  color: var(--sage-700); }
.formio-form .alert-warning { background: var(--amber-50); border-color: var(--amber-100); color: var(--amber-700); }
.formio-form .alert-info    { background: var(--c-50);     border-color: var(--c-100);     color: var(--c-700); }


/* ============================================================
   29 — LOADING / EMPTY STATES
   ============================================================ */

.formio-form .formio-loader,
.formio-form .loader-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--n-500);
}
.formio-form .formio-loader .loader,
.formio-form .loader-wrapper .loader {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--n-200);
  border-top-color: var(--c-600);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ============================================================
   30 — SELECTION MICRO-INTERACTIONS
   ============================================================ */

.formio-form *:focus:not(:focus-visible) { outline: none; box-shadow: none; }

@keyframes dayPop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
.formio-form .flatpickr-day.selected { animation: dayPop 240ms var(--spring); }

@keyframes fileRowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
.formio-form .file-list .list-group-item,
.formio-form li[ref="file"] { animation: fileRowIn 280ms var(--ease) both; }

/* mh-just-confirmed */
.formio-form .mh-just-confirmed .form-control,
.formio-form .mh-just-confirmed .choices__inner,
.formio-form .mh-just-confirmed .input-group {
  box-shadow: 0 0 0 3px var(--wl-green-bg);
  transition: box-shadow 500ms ease;
}


/* ============================================================
   31 — APP SHELL (topbar, toasts, success overlay)
   ============================================================ */

.mh-skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  background: var(--wl-teal-deep);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  z-index: 1000;
  transition: top .15s ease;
}
.mh-skip-link:focus { top: 12px; }

.mh-topbar {
  position: sticky;
  top: 0;
  z-index: 300;
  height: var(--topbar-h);
  background: linear-gradient(180deg, var(--c-900) 0%, rgba(13,27,61,.98) 100%);
  color: #fff;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 6px 30px rgba(10,14,25,.28);
}
.mh-topbar-inner {
  height: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mh-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wl-ink); border-radius: var(--wl-radius-sm); }
.mh-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--wl-teal-deep); color: var(--wl-mint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mh-brand-name   { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: #fff; }
.mh-brand-module { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; color: rgba(255,255,255,.5); }

.mh-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
}
.mh-status-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); flex-shrink: 0; transition: background var(--t2), box-shadow var(--t2); }
.mh-status-dot.ready { background: var(--a-400); box-shadow: 0 0 0 3px rgba(82,195,169,.22); }
.mh-status-dot.busy  { background: var(--amber-300); animation: statusPulse 1.2s ease-in-out infinite; }
.mh-status-dot.error { background: #f87171; }
@keyframes statusPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.mh-toast-region {
  position: fixed;
  top: 78px;
  right: 22px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.mh-toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--white);
  border: 1.5px solid var(--n-200);
  border-radius: var(--r-md);
  padding: 13px 15px;
  box-shadow: var(--e-4);
  pointer-events: all;
  animation: toastIn var(--t2) var(--ease) both;
}
.mh-toast.is-hiding { animation: toastOut var(--t1) var(--ease) both; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); }    to { opacity: 0; transform: translateX(14px); } }
.mh-toast-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.mh-toast.success .mh-toast-icon { background: var(--sage-100);  color: var(--sage-700); }
.mh-toast.error   .mh-toast-icon { background: var(--rose-100);  color: var(--rose-700); }
.mh-toast.warning .mh-toast-icon { background: var(--amber-100); color: var(--amber-700); }
.mh-toast.info    .mh-toast-icon { background: var(--c-100);     color: var(--c-700); }
.mh-toast-body  { flex: 1; font-size: 13.5px; color: var(--n-800); line-height: 1.5; }
.mh-toast-close { color: var(--n-400); font-size: 17px; line-height: 1; padding: 0; flex-shrink: 0; transition: color var(--t1); }
.mh-toast-close:hover { color: var(--n-700); }

.mh-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(10,14,25,.62);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: overlayIn var(--t2) var(--ease) both;
}
.mh-success-overlay[hidden] { display: none; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.mh-success-card {
  background: var(--white);
  border-radius: var(--r-2xl);
  padding: 56px 48px 48px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: var(--e-5);
  animation: cardIn var(--t4) var(--spring) both;
}
@keyframes cardIn { from { opacity: 0; transform: scale(.88) translateY(24px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.mh-success-icon  { width: 68px; height: 68px; margin: 0 auto 24px; border-radius: 50%; background: linear-gradient(135deg, var(--a-400), var(--a-700)); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 14px 32px rgba(15,141,117,.36); }
.mh-success-title { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--n-900); letter-spacing: -.02em; margin-bottom: 10px; }
.mh-success-body  { font-size: 15.5px; color: var(--n-600); line-height: 1.65; margin-bottom: 8px; }
.mh-success-meta  { font-family: var(--font-mono); font-size: 12px; color: var(--n-400); margin-bottom: 30px; }
.mh-success-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--n-900), var(--c-800));
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10,14,25,.26);
  transition: transform var(--t1) var(--spring), box-shadow var(--t1);
}
.mh-success-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,14,25,.32); }


/* ============================================================
   32 — CLINICAL / INSURANCE UI HELPERS
   (Wardline htmlelement polish merged here — single source of truth)
   ============================================================ */

/* ── App nav ── */
.formio-form .app-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 20px;
  background: var(--white);
  border: 1.5px solid var(--wl-border);
  border-radius: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  box-shadow: var(--e-1);
}
.formio-form .app-logo       { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; color: var(--wl-ink); }
.formio-form .app-logo-mark  { width: 30px; height: 30px; border-radius: 9px; background: var(--wl-teal-deep); color: var(--wl-mint); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.formio-form .app-nav-links  { display: flex; align-items: center; gap: 4px; }
.formio-form .app-nav-link   { font-size: 13px; font-weight: 650; color: var(--wl-slate); padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.formio-form .app-nav-link:hover  { background: #f1f5f9; color: var(--wl-ink); }
.formio-form .app-nav-link.active { background: var(--wl-teal-deep); color: #fff; }
.formio-form .app-nav-right  { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.formio-form .app-icon-btn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--wl-border);
  background: var(--white); display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #475569; position: relative; text-decoration: none;
}
.formio-form .app-icon-btn:hover { background: #f8fafc; }
.formio-form .app-dot-badge { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #e24b4a; border: 1.5px solid #fff; }

.formio-form .app-avatar-chip { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border-radius: var(--r-pill); border: 1px solid var(--wl-border); background: var(--white); text-decoration: none; }
.formio-form .app-avatar      { width: 26px; height: 26px; border-radius: 50%; background: #faf5ff; color: #7e22ce; font-size: 11px; font-weight: 750; display: flex; align-items: center; justify-content: center; }
.formio-form .app-avatar-name { display: block; font-size: 12.5px; font-weight: 650; color: var(--wl-ink); line-height: 1.15; }
.formio-form .app-avatar-role { display: block; font-size: 10.5px; color: var(--wl-mist); line-height: 1.15; }

.formio-form .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #0f766e; animation: livePulse 2s infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(15,118,110,.35); } 70% { box-shadow: 0 0 0 7px rgba(15,118,110,0); } }

/* ── KPI / Stat grids ── */
.formio-form .kpi-grid,
.formio-form .stat-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.formio-form .stat-grid  { margin-bottom: 14px; }

.formio-form .kpi-card,
.formio-form .stat-card  { background: var(--white); border: 1.5px solid var(--wl-border); border-radius: 12px; padding: 14px 16px; }

.formio-form .kpi-label,
.formio-form .stat-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-800); margin-bottom: 6px; }  /* navy */

.formio-form .kpi-value,
.formio-form .stat-value { font-size: 22px; font-weight: 750; color: var(--wl-ink); }

/* ── Activity rows ── */
.formio-form .activity-row        { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #f1f5f9; }
.formio-form .activity-row:last-child { border-bottom: none; }
.formio-form .activity-icon       { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.formio-form .status-chip         { font-size: 10.5px; font-weight: 750; padding: 3px 9px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .03em; margin-left: auto; white-space: nowrap; }

/* ── Trend chips ── */
.formio-form .trend-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 750; padding: 2px 7px; border-radius: var(--r-pill); }
.formio-form .trend-up   { color: #0f766e; background: #f0fdf9; }
.formio-form .trend-down { color: #b91c1c; background: #fef2f2; }

/* ── Fetch box (base + htmlelement context) ── */
.formio-form .fetch-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1.5px solid var(--wl-border);
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fffd, #ffffff);
  box-shadow: 0 4px 16px rgba(15,118,110,.07);
}
.formio-form .fetch-box-title { color: var(--wl-ink); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.formio-form .fetch-box-sub   { color: var(--wl-slate); font-size: 13px; line-height: 1.5; margin-bottom: 18px; }

.formio-form .fetch-row          { display: flex; gap: 10px; align-items: center; }
.formio-form .fetch-input-wrap   { flex: 1; }

/* ── Insurance card ── */
.formio-form .ins-card {
  overflow: hidden;
  margin-top: 16px;
  border: 1.5px solid var(--wl-border);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 5px 20px rgba(15,23,42,.06);
}
.formio-form .ins-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  background: #f0fdf9;
  border-bottom: 1.5px solid var(--wl-border);
}
.formio-form .ins-card-provider { color: var(--wl-ink); font-size: 16px; font-weight: 700; }
.formio-form .ins-card-policy   { margin-top: 3px; color: var(--wl-mist); font-size: 12px; }
.formio-form .ins-card-status   { padding: 5px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; text-transform: capitalize; }
.formio-form .ins-card-status.verified { color: var(--wl-green); background: #ccfbf1; }
.formio-form .ins-card-status.pending  { color: var(--wl-amber); background: #ffedd5; }
.formio-form .ins-card-status.rejected { color: #991b1b; background: #fee2e2; }
.formio-form .ins-card-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 16px;
  padding: 20px;
}
.formio-form .ins-stat-label { color: var(--c-800); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }  /* navy */
.formio-form .ins-stat-value { margin-top: 5px; color: var(--wl-ink); font-size: 14px; font-weight: 600; }
.formio-form .ins-notes      { grid-column: 1 / -1; padding: 12px; border-radius: 10px; color: #475569; background: #f8fafc; font-size: 13.5px; line-height: 1.6; }

.formio-form .warn-banner { background: var(--amber-50); border: 1.5px solid var(--amber-100); padding: 12px 14px; border-radius: 10px; color: var(--amber-700); font-size: 13.5px; }

/* ── Fetch / reverify buttons ── */
button[name="data.fetchInsuranceButton"],
button[name="data.reverifyInsuranceButton"] {
  border: 0;
  border-radius: 10px;
  padding: 11px 17px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, opacity .15s;
}
button[name="data.fetchInsuranceButton"]    { color: #fff; background: var(--wl-green); box-shadow: 0 4px 10px rgba(15,118,110,.22); }
button[name="data.reverifyInsuranceButton"] { color: var(--wl-green); background: #ccfbf1; }
button[name="data.fetchInsuranceButton"]:hover,
button[name="data.reverifyInsuranceButton"]:hover { transform: translateY(-1px); }
button[name="data.fetchInsuranceButton"]:disabled,
button[name="data.reverifyInsuranceButton"]:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Chart toggle ── */
.formio-form .chart-toggle .form-check { display: inline-block; background: #f1f5f9; border-radius: 9px; padding: 2px; margin-right: 6px; position: relative; border: none; }
.formio-form .chart-toggle input[type="radio"] { position: absolute; opacity: 0; }
.formio-form .chart-toggle .form-check-label   { display: inline-block; padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 650; color: var(--wl-slate); cursor: pointer; }
.formio-form .chart-toggle input:checked + label { background: var(--wl-teal-deep); color: #fff; }

/* ── Quick-action buttons ── */
.formio-form .qa-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 12px; border: 1.5px solid var(--wl-border); background: var(--white); text-decoration: none; transition: border-color .15s, transform .15s; }
.formio-form .qa-btn:hover { border-color: #94a3b8; transform: translateY(-1px); }
.formio-form .qa-icon { width: 32px; height: 32px; border-radius: 9px; background: #f1f5f9; color: #334155; display: flex; align-items: center; justify-content: center; font-size: 15px; }

/* ── Feature card (fc) grid ── */
.formio-form .fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formio-form .fc-btn  { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; padding: 18px 20px; border-radius: 14px; text-decoration: none; font-family: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.formio-form .fc-btn:hover { transform: translateY(-2px); }
.formio-form .fc-icon      { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.formio-form .fc-btn-title { font-size: 15px; font-weight: 750; margin: 0; }
.formio-form .fc-btn-sub   { font-size: 12px; margin: 2px 0 0; }
.formio-form .fc-arrow     { margin-left: auto; font-size: 17px; transition: transform .15s ease; }
.formio-form .fc-btn:hover .fc-arrow { transform: translateX(3px); }

.formio-form .fc-solid    { background: var(--wl-ink); border: 1px solid var(--wl-ink); box-shadow: 0 6px 16px rgba(15,23,42,.18); }
.formio-form .fc-gradient { background: linear-gradient(135deg, var(--wl-teal-deep) 0%, var(--wl-ink) 100%); border: 1px solid var(--wl-teal-deep); box-shadow: 0 6px 16px rgba(18,63,69,.22); }
.formio-form .fc-outline  { background: var(--white); border: 1.5px solid var(--wl-teal-deep); }
.formio-form .fc-ghost    { background: transparent; border: 1.5px dashed #cbd5e1; }
.formio-form .fc-pill     { background: #faf5ff; border: 1.5px solid #e9d5ff; border-radius: var(--r-pill); padding: 14px 22px; }

.formio-form .fc-solid .fc-btn-title,
.formio-form .fc-gradient .fc-btn-title { color: #fff; }
.formio-form .fc-solid .fc-btn-sub      { color: #94a3b8; }
.formio-form .fc-gradient .fc-btn-sub   { color: #bfe9df; }
.formio-form .fc-outline .fc-btn-title,
.formio-form .fc-ghost .fc-btn-title    { color: var(--wl-ink); }
.formio-form .fc-outline .fc-btn-sub,
.formio-form .fc-ghost .fc-btn-sub      { color: var(--wl-slate); }
.formio-form .fc-pill .fc-btn-title     { color: #581c87; }
.formio-form .fc-solid .fc-icon    { background: rgba(255,255,255,.12); }
.formio-form .fc-gradient .fc-icon { background: rgba(141,226,208,.18); }
.formio-form .fc-outline .fc-icon  { background: #f0fdf9; color: #0f766e; }
.formio-form .fc-ghost .fc-icon    { background: #f1f5f9; color: #475569; }
.formio-form .fc-pill .fc-icon     { border-radius: 50%; background: #f3e8ff; color: #7e22ce; }

/* ── Bar / chart helpers ── */
.formio-form .bar-row       { margin-bottom: 10px; }
.formio-form .bar-row-label { font-size: 12.5px; color: #334155; margin-bottom: 4px; display: flex; justify-content: space-between; }
.formio-form .bar-track     { height: 8px; background: #f1f5f9; border-radius: 5px; overflow: hidden; }
.formio-form .bar-fill      { height: 100%; border-radius: 5px; }

/* ── Mini table ── */
.formio-form .mini-table td            { padding: 10px 4px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.formio-form .mini-table td:last-child { border-bottom: none; }
.formio-form .mini-table-label { font-size: 12.5px; color: var(--wl-slate); }
.formio-form .mini-table-value { font-size: 13.5px; font-weight: 700; color: var(--wl-ink); text-align: right; }

/* ── Empty state ── */
.formio-form .empty-state       { padding: 34px 10px; text-align: center; color: var(--wl-slate); }
.formio-form .empty-state-title { font-size: 13px; font-weight: 700; color: var(--wl-ink); margin-bottom: 4px; }
.formio-form .empty-state-text  { font-size: 12.5px; }

/* ── Step row ── */
.formio-form .step-row   { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.formio-form .step-card  { flex: 1; min-width: 120px; background: var(--white); border: 1.5px solid var(--wl-border); border-radius: 12px; padding: 14px 12px; text-align: center; }
.formio-form .step-icon  { width: 36px; height: 36px; border-radius: 10px; background: #f0fdf9; color: #0f766e; display: flex; align-items: center; justify-content: center; font-size: 17px; margin: 0 auto 8px; }
.formio-form .step-title { font-size: 12.5px; font-weight: 700; color: var(--wl-ink); margin-bottom: 3px; }
.formio-form .step-desc  { font-size: 11.5px; color: var(--wl-mist); line-height: 1.45; }
.formio-form .step-arrow { display: flex; align-items: center; justify-content: center; color: #cbd5e1; font-size: 16px; padding: 0 4px; min-width: 20px; }

/* ── Welcome banner ── */
.formio-form .welcome    { background: var(--white); border: 1.5px solid var(--wl-border); border-radius: 16px; padding: 24px 26px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.formio-form .welcome h2 { margin: 0; font-size: 23px; font-weight: 750; color: var(--wl-ink); }
.formio-form .welcome p  { margin: 8px 0 0; font-size: 13.5px; color: var(--wl-slate); max-width: 440px; line-height: 1.55; }
.formio-form .welcome .cta-btn { background: var(--wl-teal-deep); color: #fff; font-size: 13.5px; font-weight: 700; padding: 12px 20px; border-radius: 11px; text-decoration: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ── Error / loading / success states (inline) ── */
.formio-form .error-state     { margin-top: 12px; padding: 12px 14px; border: 1.5px solid #fecaca; border-radius: 10px; color: #991b1b; background: #fef2f2; font-size: 13.5px; }
.formio-form .loading-state   { padding: 12px 0; color: var(--wl-green); font-size: 13.5px; }
.formio-form .success-message { color: var(--wl-green); font-weight: 700; }
.formio-form .error-message   { color: #991b1b; }

/* ── Section card (htmlelement) ── */
.formio-form .formio-component-htmlelement .section-card {
  padding: 20px 24px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--wl-surface);
  border: 1.5px solid var(--wl-border);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.formio-form .formio-component-htmlelement .section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 0;
}
.formio-form .formio-component-htmlelement .section-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--wl-teal-deep);
  background: linear-gradient(135deg, rgba(18,63,69,.06), rgba(18,63,69,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.formio-form .formio-component-htmlelement .section-title { font-size: 16px; font-weight: 700; color: var(--c-800); }   /* navy */
.formio-form .formio-component-htmlelement .section-sub   { font-size: 13px; color: var(--wl-slate); }
.formio-form .formio-component-htmlelement .section-badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--wl-green);
  background: var(--wl-green-bg);
  box-shadow: 0 2px 6px rgba(5,150,105,.06);
  align-self: center;
}

/* ── Patient card ── */
.formio-form .formio-component-htmlelement .patient-card         { overflow: hidden; border-radius: 12px; }
.formio-form .formio-component-htmlelement .patient-card-header  { padding: 16px 20px; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--wl-teal-deep), rgba(18,63,69,.6)); color: #fff; }
.formio-form .formio-component-htmlelement .patient-avatar       { width: 56px; height: 56px; border-radius: 12px; background: rgba(141,226,208,.12); color: var(--wl-mint); font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.formio-form .formio-component-htmlelement .patient-name         { font-size: 18px; font-weight: 800; color: #fff; }
.formio-form .formio-component-htmlelement .patient-visit        { font-family: var(--wl-mono); font-size: 12px; color: rgba(255,255,255,.85); }
.formio-form .formio-component-htmlelement .patient-card-body    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; background: var(--wl-surface); }
.formio-form .formio-component-htmlelement .patient-stat         { padding: 12px; border-radius: 10px; background: transparent; border: none; }
.formio-form .formio-component-htmlelement .patient-stat-label   { font-size: 11px; color: var(--c-800); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }  /* navy */
.formio-form .formio-component-htmlelement .patient-stat-value   { font-size: 14px; font-weight: 700; color: var(--wl-ink); }

/* ── Card hover polish (htmlelement) ── */
.formio-form .formio-component-htmlelement .card { transition: transform .12s ease, box-shadow .12s ease; }
.formio-form .formio-component-htmlelement .card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(15,23,42,.08); }

/* Stop aggressive inline background-images */
.formio-form .formio-component-htmlelement *[style*="background"] { background-image: none; }


/* ============================================================
   33 — RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .formio-app-shell, #formio, .clinical-app { padding: 24px 18px 70px; }
  .formio-form .formio-component-panel > .card > .card-body,
  .formio-form .tab-content,
  .formio-form .formio-component-fieldset fieldset { padding: 18px; }
  .formio-form .kpi-grid,
  .formio-form .stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .formio-app-shell, #formio, .clinical-app { padding: 16px 12px 60px; }
  .formio-form .formio-component-submit .btn { font-size: 14.5px; }
  .formio-form .wizard-page-breadcrumb .pagination,
  .formio-form .breadcrumb.wizard-breadcrumb { gap: 6px; }
  .mh-topbar-inner { padding: 0 14px; }
  .mh-brand-module { display: none; }
  .mh-toast-region { right: 12px; left: 12px; max-width: none; }
  .mh-success-card { padding: 40px 28px 36px; }
  .formio-form .step-row   { flex-direction: column; }
  .formio-form .step-arrow { transform: rotate(90deg); padding: 4px 0; }
  .formio-form .fc-grid    { grid-template-columns: 1fr; }
  .formio-form .app-nav-links { display: none; }
  .formio-form .ins-card-body { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   34 — REDUCED MOTION & ACCESSIBILITY
   ============================================================ */

/* Global keyboard focus ring */
.formio-form :focus-visible {
  outline: 2.5px solid var(--c-500);   /* slightly thicker */
  outline-offset: 2px;
}

/* Suppress mouse-click outlines */
.formio-form :focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Honour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ============================================================
   35 — SIDEBAR SHELL & DASHBOARD WIDGETS (WARDLINE)
   Relocated from a dangling, unnumbered block at the end of the file.
   Every custom property this block used to reference (--teal, --teal-dark,
   --teal-xlight, --amber, --amber-xlight, --red, --red-light, --border,
   --border-2, --ink, --ink-2, --ink-3, --ink-4, --surface, --surface-2,
   --radius-sm, --radius-md, --shadow-sm) was UNDEFINED anywhere in :root,
   so none of it was actually rendering. Remapped 1:1 onto the existing
   token set below — no colours, spacing, or selectors were changed.

     --teal-dark  → --wl-teal-deep      --border    → --wl-border
     --teal       → --a-600             --border-2  → --n-300
     --teal-xlight→ --a-100             --ink       → --wl-ink
     --amber      → --wl-amber          --ink-2     → --wl-slate
     --amber-xlight→ --wl-amber-bg      --ink-3     → --wl-slate
     --red        → --wl-red            --ink-4     → --wl-mist (--c-800 for *-label)
     --red-light  → --wl-red-bg         --surface   → --wl-bg
     --white      → --white (already defined)        --surface-2 → --n-100
     --radius-sm  → --wl-radius-sm      --radius-md → --wl-radius
     --shadow-sm  → --wl-shadow
   ============================================================ */

/* ── LAYOUT ──────────────────────────────── */
.wl-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh;gap:0;}
.wl-sidebar{background:var(--wl-teal-deep);color:#e2f8f5;display:flex;flex-direction:column;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto;}
.wl-sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.08);}
.wl-logo-mark{width:34px;height:34px;border-radius:10px;background:#5eead4;color:#0c3d42;font-size:17px;font-weight:900;display:flex;align-items:center;justify-content:center;}
.wl-logo-text{font-size:14px;font-weight:800;color:#e2f8f5;letter-spacing:.01em;}
.wl-logo-sub{font-size:10px;color:#99d6cf;letter-spacing:.06em;text-transform:uppercase;}
.wl-sidebar-nav{padding:12px 10px;flex:1;}
.wl-nav-section{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5eead4;padding:14px 8px 6px;}
.wl-nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--wl-radius-sm);font-size:13px;font-weight:600;color:#b2ddd9;text-decoration:none;margin-bottom:2px;cursor:pointer;transition:background .15s,color .15s;}
.wl-nav-item:hover{background:rgba(94,234,212,.1);color:#e2f8f5;}
.wl-nav-item.active{background:rgba(94,234,212,.18);color:#5eead4;}
.wl-nav-icon{width:18px;text-align:center;font-size:14px;}
.wl-nav-badge{margin-left:auto;background:#ef4444;color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;}
.wl-sidebar-user{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;}
.wl-user-avatar{width:32px;height:32px;border-radius:50%;background:#5eead4;color:#0c3d42;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wl-user-name{font-size:12.5px;font-weight:700;color:#e2f8f5;}
.wl-user-role{font-size:10.5px;color:#99d6cf;}

/* ── MAIN AREA ───────────────────────────── */
.wl-main{display:flex;flex-direction:column;min-height:100vh;overflow:hidden;}
.wl-topbar{background:var(--white);border-bottom:1px solid var(--wl-border);padding:14px 24px;display:flex;align-items:center;gap:14px;}
.wl-topbar-title{font-size:16px;font-weight:800;color:var(--wl-ink);}
.wl-topbar-sub{font-size:12px;color:var(--wl-mist);margin-top:1px;}
.wl-live-pill{display:flex;align-items:center;gap:6px;background:var(--a-100);color:var(--a-600);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;}
.wl-live-dot{width:6px;height:6px;border-radius:50%;background:var(--a-600);animation:wlPulse 2s infinite;}
@keyframes wlPulse{0%{box-shadow:0 0 0 0 rgba(15,118,110,.4);}70%{box-shadow:0 0 0 6px rgba(15,118,110,0);}100%{box-shadow:0 0 0 0 rgba(15,118,110,0);}}
.wl-topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.wl-icon-btn{width:36px;height:36px;border-radius:var(--wl-radius-sm);border:1px solid var(--wl-border);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;color:var(--wl-slate);transition:background .15s;}
.wl-icon-btn:hover{background:var(--n-100);}
.wl-content{padding:24px;flex:1;background:var(--wl-bg);}

/* ── KPI GRID ───────────────────────────── */
.wl-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.wl-kpi{background:var(--white);border:1px solid var(--wl-border);border-radius:var(--wl-radius);padding:16px 18px;box-shadow:var(--wl-shadow);}
.wl-kpi-accent{border-top:3px solid var(--a-600);}
.wl-kpi-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-800);margin-bottom:8px;}   /* navy, matches §32 .kpi-label */
.wl-kpi-val{font-size:26px;font-weight:900;color:var(--wl-ink);font-variant-numeric:tabular-nums;line-height:1;}
.wl-kpi-trend{font-size:11px;font-weight:600;color:var(--wl-mist);margin-top:6px;}
.wl-kpi-trend.up{color:var(--a-600);}
.wl-kpi-trend.down{color:var(--wl-amber);}
.wl-kpi-skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:wlShimmer 1.4s infinite;border-radius:4px;}
@keyframes wlShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ── TWO-COL ROW ───────────────────────── */
.wl-row{display:grid;gap:16px;margin-bottom:16px;}
.wl-row-2{grid-template-columns:1fr 1fr;}
.wl-row-7-5{grid-template-columns:7fr 5fr;}
.wl-row-6-6{grid-template-columns:1fr 1fr;}

/* ── CARD ───────────────────────────────── */
.wl-card{background:var(--white);border:1px solid var(--wl-border);border-radius:var(--wl-radius);padding:18px 20px;box-shadow:var(--wl-shadow);}
.wl-card-title{font-size:13px;font-weight:800;color:var(--wl-ink);margin-bottom:2px;}
.wl-card-sub{font-size:11.5px;color:var(--wl-mist);margin-bottom:14px;}
.wl-card-actions{margin-left:auto;display:flex;gap:8px;align-items:center;}

/* ── APPLICATION ROWS ───────────────────── */
.wl-app-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--n-100);}
.wl-app-row:last-child{border-bottom:none;}
.wl-app-avatar{width:34px;height:34px;min-width:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
.wl-app-avatar.confirmed{background:var(--a-100);color:var(--a-600);}
.wl-app-avatar.pending{background:var(--wl-amber-bg);color:var(--wl-amber);}
.wl-app-name{font-size:13px;font-weight:700;color:var(--wl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wl-app-meta{font-size:11px;color:var(--wl-mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wl-app-body{min-width:0;flex:1;}
.wl-chip{font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;flex-shrink:0;}
.wl-chip.confirmed{background:var(--a-100);color:var(--a-600);}
.wl-chip.pending{background:var(--wl-amber-bg);color:var(--wl-amber);}
.wl-chip.error{background:var(--wl-red-bg);color:var(--wl-red);}

/* ── BAR CHART ──────────────────────────── */
.wl-bar-row{margin-bottom:10px;}
.wl-bar-row:last-child{margin-bottom:0;}
.wl-bar-label{font-size:12px;color:var(--wl-slate);margin-bottom:4px;display:flex;justify-content:space-between;}
.wl-bar-track{height:8px;background:var(--n-100);border-radius:5px;overflow:hidden;}
.wl-bar-fill{height:100%;border-radius:5px;background:var(--a-600);}
.wl-bar-fill.amber{background:var(--wl-amber);}
.wl-split-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--n-100);}
.wl-split-legend{display:flex;gap:18px;margin-top:10px;font-size:11.5px;color:var(--wl-slate);}
.wl-split-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.wl-activity-chart-row{display:flex;align-items:flex-end;gap:8px;height:100px;margin-top:10px;}
.wl-ac-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.wl-ac-count{font-size:10px;font-weight:700;color:var(--wl-ink);margin-bottom:3px;}
.wl-ac-bar{width:100%;max-width:22px;background:var(--wl-teal-deep);border-radius:4px 4px 2px 2px;}
.wl-ac-label{font-size:10px;color:var(--wl-mist);margin-top:5px;}

/* ── SEARCH & FILTERS ───────────────────── */
.wl-filter-row{display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap;}
.wl-search-wrap{flex:1;min-width:220px;position:relative;}
.wl-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--wl-mist);font-size:14px;pointer-events:none;}
.wl-search-input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--wl-border);border-radius:var(--wl-radius-sm);font-size:13px;background:var(--wl-bg);color:var(--wl-ink);outline:none;transition:border-color .15s;}
.wl-search-input:focus{border-color:var(--a-600);background:var(--white);}
.wl-filter-select{padding:10px 14px;border:1px solid var(--wl-border);border-radius:var(--wl-radius-sm);font-size:13px;background:var(--wl-bg);color:var(--wl-ink);outline:none;cursor:pointer;}
.wl-filter-select:focus{border-color:var(--a-600);}

/* ── STATUS TABS (inline) ───────────────── */
.wl-status-tabs{display:flex;gap:4px;border-bottom:1px solid var(--wl-border);margin-bottom:16px;}
.wl-status-tab{padding:10px 16px;font-size:13px;font-weight:700;color:var(--wl-slate);border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s;}
.wl-status-tab.active{color:var(--a-600);border-bottom-color:var(--a-600);}

/* ── BUTTONS ────────────────────────────── */
.wl-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:var(--wl-radius-sm);font-size:13px;font-weight:700;border:none;cursor:pointer;transition:background .15s,transform .1s;text-decoration:none;}
.wl-btn:active{transform:scale(.98);}
.wl-btn-primary{background:var(--wl-teal-deep);color:#e2f8f5;}
.wl-btn-primary:hover{background:#0a2e32;}
.wl-btn-ghost{background:transparent;color:var(--wl-slate);border:1px solid var(--wl-border);}
.wl-btn-ghost:hover{background:var(--n-100);}
.wl-btn-sm{padding:7px 12px;font-size:12px;}
.wl-btn-continue{background:var(--a-100);color:var(--a-600);border:1px solid #99f6e4;}
.wl-btn-continue:hover{background:#ccfbf1;}

/* ── ALERTS & STATES ────────────────────── */
.wl-alert{padding:12px 16px;border-radius:var(--wl-radius-sm);font-size:12.5px;display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;}
.wl-alert-error{background:var(--wl-red-bg);border:1px solid #fca5a5;color:var(--wl-red);}
.wl-alert-info{background:var(--a-100);border:1px solid #99f6e4;color:var(--a-600);}
.wl-loading-overlay{padding:30px;text-align:center;color:var(--wl-mist);font-size:13px;}
.wl-empty{padding:40px 20px;text-align:center;}
.wl-empty-title{font-size:14px;font-weight:800;color:var(--wl-ink);margin-bottom:6px;}
.wl-empty-sub{font-size:12.5px;color:var(--wl-mist);line-height:1.6;}

/* ── ACTIVITY FEED ──────────────────────── */
.wl-feed-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--n-100);}
.wl-feed-item:last-child{border-bottom:none;}
.wl-feed-dot{width:8px;height:8px;border-radius:50%;background:var(--a-600);margin-top:6px;flex-shrink:0;}
.wl-feed-dot.pending{background:var(--wl-amber);}
.wl-feed-content{flex:1;}
.wl-feed-text{font-size:12.5px;color:var(--wl-slate);}
.wl-feed-time{font-size:11px;color:var(--wl-mist);margin-top:2px;}

/* ── MINI TABLE ─────────────────────────── */
.wl-mini-table{width:100%;}
.wl-mini-table td{padding:9px 4px;border-bottom:1px solid var(--n-100);vertical-align:middle;}
.wl-mini-table tr:last-child td{border-bottom:none;}
.wl-td-label{font-size:12px;color:var(--wl-slate);}
.wl-td-val{font-size:13px;font-weight:700;color:var(--wl-ink);text-align:right;}

/* ── WORKFLOW STEPS ─────────────────────── */
.wl-steps{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;margin-bottom:16px;}
.wl-step{flex:1;min-width:110px;background:var(--white);border:1px solid var(--wl-border);border-radius:var(--wl-radius);padding:14px 12px;text-align:center;}
.wl-step-icon{width:36px;height:36px;border-radius:10px;background:var(--a-100);color:var(--a-600);display:flex;align-items:center;justify-content:center;font-size:16px;margin:0 auto 8px;}
.wl-step-icon.active-step{background:var(--a-600);color:#fff;}
.wl-step-title{font-size:12px;font-weight:800;color:var(--wl-ink);margin-bottom:3px;}
.wl-step-desc{font-size:10.5px;color:var(--wl-mist);line-height:1.4;}
.wl-step-arrow{display:flex;align-items:center;color:var(--n-300);font-size:18px;padding:0 4px;}

/* ── FORMIO TAB OVERRIDES ───────────────── */
.formio-component-mainTabs>div>ul.nav-tabs{display:flex;gap:3px;border:none;background:var(--n-100);padding:4px;border-radius:var(--wl-radius);margin-bottom:24px;width:fit-content;flex-wrap:wrap;}
.formio-component-mainTabs ul.nav-tabs li.nav-item{list-style:none;}
.formio-component-mainTabs ul.nav-tabs a.nav-link{border:none !important;background:transparent !important;font-size:13px;font-weight:700;color:var(--wl-slate);padding:8px 16px;border-radius:var(--wl-radius-sm);cursor:pointer;}
.formio-component-mainTabs ul.nav-tabs a.nav-link.active{background:var(--white) !important;color:var(--wl-ink) !important;box-shadow:0 1px 4px rgba(13,27,42,.10);}

/* ── RESPONSIVE ─────────────────────────── */
@media(max-width:768px){.wl-shell{grid-template-columns:1fr;}.wl-sidebar{display:none;}.wl-kpi-grid{grid-template-columns:1fr 1fr;}.wl-row-7-5,.wl-row-2,.wl-row-6-6{grid-template-columns:1fr;}}


/* ============================================================
   36 — INSURANCE DASHBOARD & REPORT OVERRIDES
   Relocated from a dangling comment ("INSURANCE OVERRIDE CSS") at the
   very end of the file into its own numbered section, directly after
   §35 which defines the base .wl-kpi / .wl-card / .wl-table widgets
   these rules override for the dashboard and report screens. Left
   verbatim — colours and !important usage are internally consistent
   and don't reference any undefined variables, so nothing needed fixing
   here beyond giving it a home.

   Results only: no header, selector, button, navigation, or workflow rules.
   ============================================================ */

/* Dashboard result surface */
.formio-component-dashboardSurface > .card {
  background: #f7faf9 !important;
  border: 1px solid #d7e6e3 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 28px rgba(15, 58, 60, .07) !important;
  overflow: hidden !important;
}

.formio-component-dashboardSurface > .card > .card-body {
  padding: 18px !important;
}

/* Update confirmation */
.formio-component-dashBanner .wl-banner {
  padding: 10px 13px !important;
  border: 1px solid #b9ded7 !important;
  border-radius: 9px !important;
  background: #edf8f5 !important;
  color: #176a68 !important;
  font-size: 12px !important;
}

/* Large dashboard and report numbers */
.formio-component-dashKpis .wl-kpi-grid,
.formio-component-reportSummary .wl-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.formio-component-dashKpis .wl-kpi,
.formio-component-reportSummary .wl-kpi {
  min-height: 112px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #dfeae8 !important;
  border-radius: 11px !important;
}

.formio-component-dashKpis .wl-kpi-label,
.formio-component-reportSummary .wl-kpi-label {
  color: #67827e !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
}

.formio-component-dashKpis .wl-kpi-val,
.formio-component-reportSummary .wl-kpi-val {
  margin-top: 5px !important;
  color: #173b3b !important;
  font-size: 23px !important;
  font-weight: 750 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
}

.formio-component-dashKpis .wl-kpi-meta,
.formio-component-reportSummary .wl-kpi-meta {
  min-height: 14px !important;
  margin-top: 4px !important;
  color: #89a09d !important;
  font-size: 10.5px !important;
}

/* The four remaining dashboard cards */
.formio-component-dashStatus .wl-card,
.formio-component-dashInsurers .wl-card,
.formio-component-dashActivity .wl-card,
.formio-component-dashAttention .wl-card,
.formio-component-reportAttention .wl-card,
.formio-component-reportInsurers .wl-card {
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #dfeae8 !important;
  border-radius: 11px !important;
  box-shadow: 0 1px 2px rgba(15, 58, 60, .03) !important;
}

.formio-component-dashStatus .wl-card-title,
.formio-component-dashInsurers .wl-card-title,
.formio-component-dashActivity .wl-card-title,
.formio-component-dashAttention .wl-card-title,
.formio-component-reportAttention .wl-card-title,
.formio-component-reportInsurers .wl-card-title {
  padding: 13px 15px 2px !important;
  color: #173b3b !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

.formio-component-dashStatus .wl-card-sub,
.formio-component-dashInsurers .wl-card-sub,
.formio-component-dashActivity .wl-card-sub,
.formio-component-dashAttention .wl-card-sub,
.formio-component-reportAttention .wl-card-sub,
.formio-component-reportInsurers .wl-card-sub {
  margin: 2px 0 11px !important;
  padding: 0 15px !important;
  color: #78908d !important;
  font-size: 11px !important;
}

/* Application-status split */
.formio-component-dashStatus .wl-stack {
  height: 11px !important;
  margin: 4px 15px 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.formio-component-dashStatus .wl-legend {
  display: flex !important;
  gap: 16px !important;
  margin: 9px 15px 0 !important;
  padding-bottom: 13px !important;
  color: #617976 !important;
  font-size: 11px !important;
}

/* Insurer bars */
.formio-component-dashInsurers .wl-chart-row {
  margin: 0 15px 12px !important;
}

.formio-component-dashInsurers .wl-chart-label {
  color: #405d59 !important;
  font-size: 11px !important;
}

.formio-component-dashInsurers .wl-chart-label strong {
  color: #173b3b !important;
  font-size: 12px !important;
}

.formio-component-dashInsurers .wl-chart-track {
  height: 9px !important;
  border-radius: 999px !important;
  background: #edf3f2 !important;
}

.formio-component-dashInsurers .wl-chart-fill {
  border-radius: 999px !important;
  background: linear-gradient(90deg, #237b75, #68aaa2) !important;
}

/* Activity as compact workflow-style steps */
.formio-component-dashActivity .wl-timeline {
  padding: 0 15px 4px 35px !important;
}

.formio-component-dashActivity .wl-timeline::before {
  left: 20px !important;
  background: #d9e8e5 !important;
}

.formio-component-dashActivity .wl-event {
  padding: 0 0 15px 3px !important;
}

.formio-component-dashActivity .wl-event::before {
  left: -19px !important;
  width: 9px !important;
  height: 9px !important;
  background: #237b75 !important;
}

.formio-component-dashActivity .wl-event-title {
  color: #254541 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.formio-component-dashActivity .wl-event-desc {
  color: #78908d !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.formio-component-dashActivity .wl-event-time {
  display: inline-block !important;
  margin-top: 5px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: #edf7f5 !important;
  color: #39736c !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
}

/* Small table inside the dashboard results panel */
.formio-component-dashAttention .wl-table-wrap {
  margin: 0 !important;
  overflow-x: auto !important;
  border-width: 1px 0 0 !important;
  border-radius: 0 !important;
}

.formio-component-dashAttention .wl-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: 11px !important;
}

.formio-component-dashAttention .wl-table th {
  min-width: 0 !important;
  padding: 8px 7px !important;
  background: #eff7f5 !important;
  color: #3c665f !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

.formio-component-dashAttention .wl-table td {
  min-width: 0 !important;
  padding: 9px 7px !important;
  color: #3f5b57 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  border-bottom: 1px solid #edf3f2 !important;
}

.formio-component-dashAttention .wl-table th:nth-child(1),
.formio-component-dashAttention .wl-table td:nth-child(1) { width: 32% !important; }
.formio-component-dashAttention .wl-table th:nth-child(2),
.formio-component-dashAttention .wl-table td:nth-child(2) { width: 20% !important; }
.formio-component-dashAttention .wl-table th:nth-child(3),
.formio-component-dashAttention .wl-table td:nth-child(3) { width: 32% !important; }
.formio-component-dashAttention .wl-table th:nth-child(4),
.formio-component-dashAttention .wl-table td:nth-child(4) { width: 16% !important; }

.formio-component-dashAttention .wl-table tbody tr:nth-child(even) td,
.formio-component-reportAttention .wl-table tbody tr:nth-child(even) td,
.formio-component-reportInsurers .wl-table tbody tr:nth-child(even) td {
  background: #fbfdfd !important;
}

.formio-component-dashAttention .wl-table tbody tr:hover td,
.formio-component-reportAttention .wl-table tbody tr:hover td,
.formio-component-reportInsurers .wl-table tbody tr:hover td {
  background: #e9f6f3 !important;
}

/* Full report tables */
.formio-component-reportSummary {
  margin-bottom: 14px !important;
  padding: 15px !important;
  background: #fff !important;
  border: 1px solid #dfeae8 !important;
  border-radius: 11px !important;
}

.formio-component-reportAttention .wl-table-wrap,
.formio-component-reportInsurers .wl-table-wrap {
  overflow-x: auto !important;
  border-width: 1px 0 0 !important;
  border-radius: 0 !important;
}

.formio-component-reportAttention .wl-table,
.formio-component-reportInsurers .wl-table {
  min-width: 640px !important;
  border-collapse: collapse !important;
}

.formio-component-reportAttention .wl-table th,
.formio-component-reportInsurers .wl-table th {
  padding: 10px 14px !important;
  background: #eff7f5 !important;
  color: #3c665f !important;
  font-size: 10px !important;
  white-space: normal !important;
}

.formio-component-reportAttention .wl-table td,
.formio-component-reportInsurers .wl-table td {
  padding: 11px 14px !important;
  color: #3f5b57 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}

@media (max-width: 760px) {
  .formio-component-dashKpis .wl-kpi-grid,
  .formio-component-reportSummary .wl-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .formio-component-dashAttention .wl-table {
    min-width: 520px !important;
  }
}