/* XM 4 — forms.
   Rides on the shared renderer (lib/tag/xm/inc/form/_xm-3.cfm) and its inline .xm-modern rules.
   Every selector starts with .xm4 so it outranks those rules without needing !important, except
   where the renderer itself uses !important. DOM contracts (ids, XMFormRow, XMLabel, XMFieldWrapper,
   input-group-addon, xmFormButtonBar, validation hooks) are untouched. */
.xm4 form {
  --xmf-accent:var(--xm4-accent); --xmf-accent-2:var(--xm4-accent); --xmf-accent-dk:var(--xm4-accent-dark); --xmf-accent-bg:var(--xm4-tint);
  --xmf-bg:var(--xm4-surface); --xmf-surface:var(--xm4-surface); --xmf-text:var(--xm4-text); --xmf-ink:var(--xm4-text); --xmf-label:var(--xm4-ink-2);
  --xmf-mute:var(--xm4-muted); --xmf-faint:var(--xm4-faint); --xmf-border:var(--xm4-line); --xmf-input-border:var(--xm4-line); --xmf-addon-bg:var(--xm4-soft);
  --xmf-radius:10px; --xmf-radius-lg:14px; --xmf-focus-ring:color-mix(in srgb,var(--xm4-accent) 16%,transparent);
  --xmf-danger:var(--xm4-danger); --xmf-danger-ink:var(--xm4-danger); --xmf-danger-bg:color-mix(in srgb,var(--xm4-danger) 8%,var(--xm4-surface)); --xmf-danger-border:color-mix(in srgb,var(--xm4-danger) 30%,transparent); --xmf-danger-ring:color-mix(in srgb,var(--xm4-danger) 14%,transparent);
  --xmf-card-shadow:none; --xmf-card-shadow-hover:none; --xmf-bar-bg:color-mix(in srgb,var(--xm4-bg) 88%,transparent);
}

/* ---- sections ---- */
.xm4 .XMFormSection, .xm4 .XMFormSection.xm-modern {position:relative; margin:0 0 20px!important; border:1px solid var(--xm4-line); border-radius:var(--xm4-radius); background:var(--xm4-surface); color:var(--xm4-text); box-shadow:0 1px 2px rgba(15,23,42,.04); overflow:visible; transition:border-color .15s;}
.xm4 .XMFormSection.xm-modern:hover {box-shadow:0 1px 2px rgba(15,23,42,.04);}
.xm4 .XMFormGroupHeader, .xm4 .xm-modern .XMFormGroupHeader.panel-heading {display:flex; align-items:center; gap:10px; padding:16px 22px 12px; margin:0; background:transparent; color:var(--xm4-text); border:0; border-bottom:1px solid var(--xm4-line-2); border-radius:var(--xm4-radius) var(--xm4-radius) 0 0;}
.xm4 .XMFormGroupHeader .SectionLabel, .xm4 .xm-modern .XMFormGroupHeader .SectionLabel {flex:1 1 auto; min-width:0; font:650 .9375rem/1.35 var(--bs-body-font-family); letter-spacing:-.01em; color:var(--xm4-text);}
.xm4 .XMFormGroupHeader .SectionLabel i, .xm4 .xm-modern .XMFormGroupHeader .SectionLabel i.fa {margin-right:8px; color:var(--xm4-accent); font-size:.9em;}
.xm4 .XMFormGroupHeader .section-toggle-icon, .xm4 .xm-modern .section-toggle-icon {flex:none; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; color:var(--xm4-muted); font-size:11px; transition:transform .15s,background .15s;}
.xm4 form[data-toggle="true"] .XMFormGroupHeader:hover .section-toggle-icon {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .XMFormBody, .xm4 .xm-modern .XMFormBody.panel-body {padding:16px 22px 20px; background:transparent;}
.xm4 .XMFormGroupIntro, .xm4 .xm-modern .XMFormGroupIntro.help-block {margin:0 0 14px; color:var(--xm4-muted); font-size:.8125rem; line-height:1.5;}
.xm4 .XMFormSection.section-collapsed .XMFormGroupHeader {border-bottom-color:transparent;}
/* Sticky section headers. Each one parks under the sticky stack (theme header + title row + record
   toolbars, published as --xm4-sticky-stack by shell.js) while its own section is on screen, then
   leaves with it: position:sticky cannot escape its containing block, so headers never overlap the
   next section and no JS is needed. The header needs its own opaque background here — the section
   card's background sits behind the fields, not behind a stuck header.
   Scoped to .footer_bottom, the page column, so body-appended modals never pick it up. Containers
   that scroll on their own switch it off through an inherited custom property, which beats any
   selector-specificity fight. The assessment preset keeps flat headers: it has its own section guide. */
.xm4 .footer_bottom form:not(.xmf-theme-assessment) .XMFormSection > .XMFormGroupHeader,
.xm4 .footer_bottom form:not(.xmf-theme-assessment) .XMFormSection > .XMFormGroupHeader.panel-heading {position:var(--xm4-form-header-position,sticky); top:var(--xm4-sticky-stack,var(--xm4-header)); z-index:1; background:var(--xm4-surface);}
.xm4 .modal, .xm4 #XMSidePanel, .xm4 .control_panel_slider, .xm4 .xm4-rail-flyout, .xm4 .xm4-mega {--xm4-form-header-position:static;}

/* ---- rows & labels ---- */
.xm4 .XMFormRow:not(tr), .xm4 .xm-modern .XMFormRow:not(tr) {position:relative; display:block; margin:0 0 16px; padding:0; color:var(--xm4-text); border:0; background:transparent; box-shadow:none;}
/* The legacy sheet draws a 2px white left border on .XMFormRowChild and a blue/red focus-within band; both are off here. */
.xm4 .XMFormRowChild:not(tr), .xm4 .XMFormRowChild:not(tr):focus-within {border-left:0; background:transparent; box-shadow:none;}
.xm4 .XMFormRow:not(tr):last-child {margin-bottom:0;}
.xm4 .XMFormRow > label, .xm4 .XMFormRow .control-label, .xm4 .XMFormRow .XMFieldLabel, .xm4 .XMFormRow:not(tr) > .XMLabel, .xm4 .xm-modern .XMFormRow:not(tr) > .XMLabel {display:block; float:none; width:100%; max-width:100%; margin:0; padding:0 0 6px; text-align:left!important; color:var(--xm4-ink-2); font:600 .8125rem/1.4 var(--bs-body-font-family); letter-spacing:0;}
.xm4 .XMFormRow:not(tr) > .XMFieldWrapper, .xm4 .xm-modern .XMFormRow:not(tr) > .XMFieldWrapper {display:block; float:none; width:100%; max-width:100%; padding:0;}
/* The Flex Design view keeps a field's tags, rules and workflows beside its title so the metadata
   reads as belonging to that field. Its own rule in _design.cfm is one class short of the stacked
   label rule above, so the chips dropped to a line of their own on every tagged field. */
.xm4 .xm-modern .XMFormRow.xmDesignFieldRow:not(tr) > .XMLabel {display:inline-block; width:auto; max-width:100%; padding-right:8px; vertical-align:middle;}
.xm4 .XMFieldWrapper > i.xmTip, .xm4 .XMFieldWrapper i.fa-info-circle, .xm4 .XMFieldWrapper i.fa-circle-info, .xm4 .xm-modern .XMFieldWrapper i.fa-info-circle {position:relative!important; top:auto!important; left:auto!important; display:inline-block; margin:6px 0 0 2px; font-size:12px!important; color:var(--xm4-faint)!important; cursor:help;}
.xm4 .XMFieldWrapper > i.xmTip:hover {color:var(--xm4-accent)!important;}
/* Keep hint buttons adjacent to, rather than inside, the label or disabled field. */
.xm4 .xm-hint-label, .xm4 .XMFormRow:not(tr) > .XMLabel.xm-hint-label, .xm4 .xm-modern .XMFormRow:not(tr) > .XMLabel.xm-hint-label {display:inline; float:none; width:auto; max-width:100%; padding-bottom:0;}
.xm4 .XMFormRow > .XMLabel.xm-hint-label ~ .XMFieldWrapper {float:none;}
.xm4 button.xm-field-hint {display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; min-width:24px; margin:-2px 0 4px 4px; padding:0; vertical-align:middle; border:0; border-radius:50%; background:transparent; color:var(--xm4-muted); font:400 14px/1 var(--bs-body-font-family); cursor:help; touch-action:manipulation;}
.xm4 .xm-field-hint:hover, .xm4 .xm-field-hint[aria-describedby] {background:var(--xm4-tint); color:var(--xm4-accent);}
.xm4 .xm-field-hint:focus-visible {outline:2px solid var(--xm4-accent); outline-offset:1px; background:var(--xm4-tint); color:var(--xm4-accent);}
.xm-field-hint-tooltip {--bs-tooltip-max-width:min(320px,calc(100vw - 24px)); --bs-tooltip-bg:var(--xm4-text); --bs-tooltip-color:var(--xm4-surface); --bs-tooltip-opacity:1;}
.xm-field-hint-tooltip .tooltip-inner {padding:10px 12px; border-radius:9px; font-size:.8125rem; line-height:1.5; text-align:left; box-shadow:var(--xm4-shadow);}
.xm4 .xm-modern-req-marker, .xm4 .xm-modern .xm-modern-req-marker {display:inline-block; width:6px; height:6px; margin:0 0 2px 6px; border-radius:50%; background:var(--xm4-danger); vertical-align:middle;}
.xm4 img.xmReqField, .xm4 img[id^="ValImg"], .xm4 img[id^="ReqImg"] {display:none!important;}
.xm4 .XMFormRow .help-block, .xm4 .XMFieldPreText, .xm4 .help-block {display:block; margin:6px 0 0; color:var(--xm4-muted); font-size:.75rem; line-height:1.5;}
.xm4 .XMFormRow.highlighted {border:1px solid var(--xm4-accent)!important; background:var(--xm4-tint); border-radius:10px; padding:14px;}
.xm4 .XMFormRow.blurred {opacity:.35;}
/* classic horizontal layout (col-* labels) */
.xm4 .form-horizontal .control-label, .xm4 .form-horizontal .col-form-label {padding-top:10px;}
@media(min-width:768px) {.xm4 .form-horizontal .XMFormRow > .control-label {text-align:left!important;}}

/* ---- inputs ---- */
.xm4 .form-control, .xm4 .form-select, .xm4 .XMFormRow .form-control, .xm4 .XMFormRow select:not([multiple]), .xm4 .xm-modern .form-control, .xm4 .xm-modern select.form-control, .xm4 .xm-modern textarea.form-control,
.xm4 .xm-modern input[type="text"].form-control, .xm4 .xm-modern input[type="number"].form-control, .xm4 .xm-modern input[type="email"].form-control, .xm4 .xm-modern input[type="password"].form-control, .xm4 .xm-modern input[type="date"].form-control, .xm4 .xm-modern input[type="time"].form-control, .xm4 .xm-modern input[type="search"].form-control, .xm4 .xm-modern input[type="url"].form-control, .xm4 .xm-modern input[type="tel"].form-control {
  display:block; width:100%; min-height:42px; height:auto; padding:9px 12px; margin:0; color:var(--xm4-text); background-color:var(--xm4-surface); background-clip:padding-box; border:1px solid var(--xm4-line); border-radius:var(--xmf-radius,10px); box-shadow:none; font:400 .875rem/1.5 var(--bs-body-font-family); transition:border-color .15s,box-shadow .15s,background-color .15s;
}
.xm4 .form-control:hover:not(:focus):not(:disabled):not([readonly]), .xm4 .form-select:hover:not(:focus):not(:disabled) {border-color:var(--xm4-faint);}
.xm4 .form-control:focus, .xm4 .form-select:focus, .xm4 .XMFormRow .form-control:focus, .xm4 .xm-modern .form-control:focus, .xm4 .xm-modern select.form-control:focus, .xm4 .xm-modern textarea.form-control:focus {color:var(--xm4-text); background-color:var(--xm4-surface); border-color:var(--xm4-accent); box-shadow:0 0 0 3px var(--xmf-focus-ring); outline:none;}
.xm4 .form-control::placeholder, .xm4 .xm-modern .form-control::placeholder {color:var(--xm4-faint); opacity:1;}
.xm4 .form-control:disabled, .xm4 .form-control[readonly], .xm4 .form-select:disabled, .xm4 .xmFieldDisabled .form-control {background-color:var(--xm4-soft); color:var(--xm4-muted); opacity:1; cursor:default;}
.xm4 .form-control[readonly]:not(:disabled) {color:var(--xm4-text);}
.xm4 .form-control-sm {min-height:34px; padding:5px 10px; font-size:.8125rem; border-radius:8px;}
/* jQuery UI spinner (Flex "Placement" and other numeric fields): the widget wraps the input in its own box, so the
   input drops out of the .form-control sizing above and sat 14px shorter than every other field in the form. */
.xm4 .ui-spinner {display:inline-flex; align-items:stretch; width:auto; min-height:42px; padding:0; border:1px solid var(--xm4-line); border-radius:10px; background:var(--xm4-surface);}
.xm4 .ui-spinner:focus-within {border-color:var(--xm4-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--xm4-accent) 14%,transparent);}
.xm4 .ui-spinner input.ui-spinner-input {flex:1 1 auto; width:auto; min-width:64px; min-height:40px; margin:0; padding:8px 12px; color:var(--xm4-text); font-size:.875rem; background:transparent; border:0!important; box-shadow:none; outline:none;}
.xm4 .ui-spinner .ui-spinner-button {width:24px; border:0; border-left:1px solid var(--xm4-line); border-radius:0; background:var(--xm4-soft); color:var(--xm4-muted);}
.xm4 .ui-spinner .ui-spinner-button:hover {background:var(--xm4-line-2); color:var(--xm4-text);}
.xm4 .ui-spinner .ui-spinner-up {border-top-right-radius:9px;}
.xm4 .ui-spinner .ui-spinner-down {border-bottom-right-radius:9px;}
.xm4 .XMFormRow textarea.clTextArea, .xm4 textarea.form-control {min-height:96px; max-height:70vh; resize:vertical; line-height:1.55;}
.xm4 .xm-disable-edit textarea.clTextArea {max-height:none;}
/* native selects get the Bootstrap 5 chevron; select2 replaces its own */
.xm4 select.form-control:not([multiple]):not([size]):not(.select2-hidden-accessible), .xm4 select.form-control[size="1"]:not([multiple]):not(.select2-hidden-accessible), .xm4 .form-select:not([multiple]) {appearance:none; -webkit-appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px 12px;}
[data-bs-theme="dark"] .xm4 select.form-control:not([multiple]):not([size]):not(.select2-hidden-accessible), [data-bs-theme="dark"] .xm4 select.form-control[size="1"]:not([multiple]):not(.select2-hidden-accessible), [data-bs-theme="dark"] .xm4 .form-select:not([multiple]) {background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a4b2c7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");}
/* size="1" is still a drop-down (the grid quick filters emit it); only real list boxes get the tall box */
.xm4 select.form-control[multiple], .xm4 select.form-control[size]:not([size="1"]) {padding:6px; min-height:120px;}
.xm4 select.form-control option {padding:6px 8px;}
.xm4 input[type="date"].form-control, .xm4 input[type="time"].form-control, .xm4 input[type="datetime-local"].form-control {min-width:0;}
.xm4 input[type="color"].form-control {width:56px; padding:4px;}
.xm4 input[type="range"].form-control {min-height:0; padding:0; border:0; box-shadow:none; background:transparent; accent-color:var(--xm4-accent);}
.xm4 input[type="file"].form-control {padding:7px 12px;}

/* ---- input groups (prefix / suffix / pickers) ---- */
.xm4 .input-group, .xm4 .xm-modern .input-group {position:relative; display:flex; flex-wrap:nowrap; align-items:stretch; width:100%; min-width:0; border-radius:var(--xmf-radius,10px); border:0; background:transparent; box-shadow:none; transition:box-shadow .15s;}
/* Bootstrap 5 wraps input groups by default, and <xm:date> hard-codes width:75px;min-width:75px inline on
   the field: in a narrow cell (a matrix row's Start/End Date) the picker button wrapped onto its own line. */
.xm4 .input-group > input.flatpickr, .xm4 .input-group > input.datepicker, .xm4 .input-group > input.date-picker {width:auto!important; min-width:0!important;}
.xm4 .input-group:focus-within {box-shadow:0 0 0 3px var(--xmf-focus-ring); border-radius:var(--xmf-radius,10px);}
/* Match the typed modern controls above so their full width cannot wrap an addon onto a separate line. */
.xm4 .input-group > .form-control, .xm4 .xm-modern .input-group > :is(input,select,textarea).form-control {position:relative; flex:1 1 auto; width:1%; min-width:0; margin:0; border-radius:0!important;}
.xm4 .input-group > .form-control:focus {box-shadow:none; z-index:3;}
.xm4 .input-group:focus-within .input-group-addon, .xm4 .input-group:focus-within .input-group-btn .btn {border-color:var(--xm4-accent);}
.xm4 .input-group > :first-child, .xm4 .input-group > .form-control:first-child, .xm4 .xm-modern .input-group > .form-control:first-child, .xm4 .xm-modern .input-group > .input-group-addon:first-child {border-top-left-radius:var(--xmf-radius,10px)!important; border-bottom-left-radius:var(--xmf-radius,10px)!important;}
.xm4 .input-group > :last-child, .xm4 .input-group > .form-control:last-child, .xm4 .xm-modern .input-group > .form-control:last-child, .xm4 .xm-modern .input-group > .input-group-addon:last-child {border-top-right-radius:var(--xmf-radius,10px)!important; border-bottom-right-radius:var(--xmf-radius,10px)!important;}
.xm4 .input-group-addon, .xm4 .xm-modern .input-group-addon {display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:auto; min-width:42px; min-height:42px; padding:0 12px; margin:0; border:1px solid var(--xm4-line); border-radius:0!important; background:var(--xm4-soft); color:var(--xm4-muted); font-size:.8125rem; line-height:1; white-space:nowrap; transition:border-color .15s;}
.xm4 .input-group-addon i {font-size:14px; color:var(--xm4-muted);}
.xm4 .input-group > .input-group-addon:first-child, .xm4 .xm-modern .input-group > .input-group-addon:first-child {border-right:0;}
.xm4 .input-group > .input-group-addon:last-child, .xm4 .xm-modern .input-group > .input-group-addon:last-child {border-left:0;}
.xm4 .input-group-addon.picker {cursor:pointer;}
.xm4 .input-group-addon.picker:hover {color:var(--xm4-accent); background:var(--xm4-tint);}
.xm4 .input-group-btn {display:flex; align-items:stretch;}
.xm4 .input-group-btn .btn {height:auto; min-height:42px; border-radius:0; margin-left:-1px;}
.xm4 .input-group-btn:last-child .btn:last-child {border-radius:0 var(--xmf-radius,10px) var(--xmf-radius,10px) 0;}
.xm4 .input-group .xmMediaDrop, .xm4 .input-group .tagit {flex:1 1 auto;}
.xm4 .bootstrap-timepicker.input-group {display:flex!important; border:1px solid var(--xm4-line)!important; border-radius:var(--xmf-radius,10px)!important; padding:0!important; background:var(--xm4-surface)!important; overflow:hidden;}
.xm4 .bootstrap-timepicker.input-group > input {flex:1 1 auto; width:auto!important; min-height:40px; border:0!important;}
.xm4 .bootstrap-timepicker.input-group > .input-group-addon {border:0; border-left:1px solid var(--xm4-line);}

/* ---- checkboxes, radios, choice lists ---- */
.xm4 .XMFormRow input[type="checkbox"], .xm4 .XMFormRow input[type="radio"], .xm4 form .clRadioCheck {width:18px; height:18px; margin:0 8px 0 0; vertical-align:-3px; accent-color:var(--xm4-accent); cursor:pointer; flex:none;}
.xm4 .XMFormRow .checkbox, .xm4 .XMFormRow .radio {min-height:36px; padding:6px 0; margin:0;}
.xm4 .XMFormRow .checkbox label, .xm4 .XMFormRow .radio label {display:inline-flex; align-items:center; gap:8px; padding:0; font-weight:500; color:var(--xm4-text); cursor:pointer;}
.xm4 .chkRadOpt, .xm4 .chkRadOptInline {display:flex; align-items:center; gap:10px; width:100%; margin:0 0 6px; padding:9px 12px; border:1px solid var(--xm4-line); border-radius:10px; background:var(--xm4-surface); color:var(--xm4-text); font-size:.875rem; line-height:1.4; cursor:pointer; transition:border-color .12s,background .12s;}
.xm4 .chkRadOptInline {display:inline-flex; width:auto; margin-right:6px;}
.xm4 .chkRadOpt:hover, .xm4 .chkRadOptInline:hover {border-color:var(--xm4-faint); background:var(--xm4-soft);}
.xm4 .chkRadOpt:has(input:checked), .xm4 .chkRadOptInline:has(input:checked) {border-color:var(--xm4-accent); background:var(--xm4-tint);}
.xm4 .chkRadOpt:has(input:focus-visible), .xm4 .chkRadOptInline:has(input:focus-visible) {box-shadow:0 0 0 3px var(--xmf-focus-ring);}
.xm4 .chkRadOpt .clRadioCheck, .xm4 .chkRadOptInline .clRadioCheck {margin:0;}
.xm4 .clRadioCheck:checked + span {color:var(--xm4-accent); font-weight:600; text-decoration:none;}
/* Choice lists reuse .input-group, but their toolbar and scroll area stack vertically.
   Override the renderer's inline white background and Bootstrap's joined-control margins. */
.xm4 .cbWrapper, .xm4 .xm-modern .cbWrapper {display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; min-width:0; width:100%; background-color:transparent!important; box-shadow:none;}
.xm4 .cbWrapper:focus-within {box-shadow:none;}
.xm4 .cbWrapper:has(> .xmToolBar) {border:1px solid var(--xm4-line); border-radius:10px; background-color:var(--xm4-surface)!important;}
.xm4 .cbWrapper > .xmToolBar {display:flex; align-items:center; gap:4px; flex:0 0 auto; padding:8px; border:0; border-bottom:1px solid var(--xm4-line-2); color:var(--xm4-muted); background:var(--xm4-surface); text-shadow:none; line-height:1.4;}
.xm4 .cbWrapper > .xmToolBar:first-child {margin:0!important; border-radius:10px 10px 0 0!important;}
.xm4 .cbWrapper > .cbOptions {flex:1 1 auto; min-height:0; min-width:0; width:100%; margin:0!important; overflow:auto; scrollbar-width:thin;}
.xm4 .cbWrapper:has(> .xmToolBar) > .cbOptions {padding:6px; border-radius:0 0 10px 10px!important;}
.xm4 .cbWrapper > .xmToolBar > .dropdown {position:relative; display:flex; flex:0 0 auto; width:auto!important;}
.xm4 .cbWrapper > .xmToolBar .xm4-choice-search {position:relative; display:flex; flex:1 1 0; min-width:0; margin-right:4px;}
.xm4 .cbWrapper > .xmToolBar .xm4-choice-search > i {position:absolute; top:50%; left:12px; transform:translateY(-50%); color:var(--xm4-muted); font-size:13px; pointer-events:none;}
.xm4 .cbWrapper > .xmToolBar input[type="search"] {appearance:none; -webkit-appearance:none; flex:1 1 0; width:0; min-width:0; min-height:36px; padding:7px 10px; margin:0; border:1px solid transparent; border-radius:7px; color:var(--xm4-text); background:var(--xm4-soft); font:400 .875rem/1.4 var(--bs-body-font-family); box-shadow:none; outline:none; transition:border-color .15s,box-shadow .15s;}
.xm4 .cbWrapper > .xmToolBar .xm4-choice-search input {width:100%; padding-left:34px;}
.xm4 .cbWrapper > .xmToolBar input[type="search"]::placeholder {color:var(--xm4-faint); opacity:1;}
.xm4 .cbWrapper > .xmToolBar :is(.dropdown-toggle,[id$="_fullscreen"]) {display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:0 0 auto; min-width:36px; min-height:36px; margin:0; padding:7px; border:1px solid transparent; border-radius:7px; color:var(--xm4-muted); background:transparent; font:400 .875rem/1 var(--bs-body-font-family); box-shadow:none; cursor:pointer;}
.xm4 .cbWrapper > .xmToolBar :is(.dropdown-toggle,[id$="_fullscreen"]):hover {border-color:transparent; color:var(--xm4-text); background:var(--xm4-soft);}
.xm4 .cbWrapper > .xmToolBar .dropdown-toggle[aria-expanded="true"] {color:var(--xm4-accent); background:var(--xm4-tint);}
.xm4 .cbWrapper > .xmToolBar .dropdown-menu {--bs-dropdown-min-width:12rem; --bs-dropdown-link-hover-bg:var(--xm4-soft); --bs-dropdown-link-hover-color:var(--xm4-text); border:1px solid var(--xm4-line); border-radius:10px; padding:5px; box-shadow:var(--xm4-shadow-lg);}
.xm4 .cbWrapper > .xmToolBar .dropdown-menu > li > a {display:block; padding:9px 10px; border-radius:6px; font-size:.8125rem;}
.xm4 .cbWrapper > .xmToolBar input[type="search"]:focus, .xm4 .cbWrapper > .xmToolBar :is(.dropdown-toggle,[id$="_fullscreen"]):focus-visible {border-color:var(--xm4-accent); outline:none; box-shadow:0 0 0 2px var(--xmf-focus-ring);}
.xm4 .cbWrapper > .xmToolBar [id$="_fullscreen"] img {width:16px; height:16px; object-fit:contain;}
.xm4 .cbWrapper > .xmToolBar [aria-expanded="true"] .fa-expand::before {content:"\f066";}
.xm4 .cbWrapper .chkRadOpt {min-height:42px; margin:0; padding:9px 10px; gap:10px; border-color:transparent; border-radius:7px; background:transparent;}
.xm4 .cbWrapper .chkRadOpt:hover {background:var(--xm4-soft);}
.xm4 .cbWrapper .chkRadOpt:has(input:checked), .xm4 .cbWrapper label.ui-selecting {border-color:transparent; background:var(--xm4-tint);}
.xm4 .cbWrapper .chkRadOpt:has(input:focus-visible) {box-shadow:inset 0 0 0 2px var(--xm4-accent);}
.xm4 .cbWrapper .chkRadOpt:has(input:disabled) {opacity:.6; cursor:not-allowed;}
.xm4 .cbWrapper .chkRadOpt > .xmSiChk-label {flex:1 1 auto; min-width:0; overflow-wrap:anywhere;}
.xm4 .cbWrapper input[type="checkbox"].clRadioCheck {appearance:none; -webkit-appearance:none; width:18px; height:18px; border:1px solid var(--xm4-faint); border-radius:5px; background:var(--xm4-surface) center / 12px 12px no-repeat; box-shadow:0 1px 2px rgba(15,23,42,.04);}
.xm4 .cbWrapper input[type="checkbox"].clRadioCheck:checked {border-color:var(--xm4-accent); background-color:var(--xm4-accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6 2.5 2.5L10 3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
[data-bs-theme="dark"] .xm4 .cbWrapper input[type="checkbox"].clRadioCheck:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6 2.5 2.5L10 3' fill='none' stroke='%230f172a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.xm4 .cbWrapper input[type="checkbox"].clRadioCheck:focus-visible {outline:2px solid var(--xm4-accent); outline-offset:2px;}
.xm4 .cbWrapper .sortHandler {order:3; display:inline-flex; align-items:center; justify-content:center; flex:0 0 24px; min-height:24px; margin-left:auto; color:var(--xm4-muted); font-size:14px; opacity:.55; cursor:grab;}
.xm4 .cbWrapper .sortHandler.fa-bars::before {content:"\f58e";}
.xm4 .cbWrapper .chkRadOpt:hover .sortHandler, .xm4 .cbWrapper .ui-sortable-helper .sortHandler {opacity:1;}
.xm4 .cbWrapper .ui-sortable-helper {background:var(--xm4-surface); box-shadow:var(--xm4-shadow-lg);}
@media (forced-colors:active) {.xm4 .cbWrapper input[type="checkbox"].clRadioCheck {appearance:auto; -webkit-appearance:auto; background-image:none!important; box-shadow:none;}}
/* segmented radio button groups (labels carry --selected-bgcolor inline; the renderer's default #c9dfff becomes the accent) */
.xm4 .xm-radio-button-group, .xm4 .xm-radio-button-group-vertical {gap:0; overflow:visible; border-radius:10px;}
.xm4 .xm-radio-button-group label, .xm4 .xm-radio-button-group-vertical label {display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:8px 14px; margin:0 -1px 0 0; border:1px solid var(--xm4-line); background:var(--xm4-surface); color:var(--xm4-ink-2); font:500 .8125rem/1.3 var(--bs-body-font-family); line-height:1.3; cursor:pointer; transition:background .12s,color .12s,border-color .12s;}
.xm4 .xm-radio-button-group label:hover, .xm4 .xm-radio-button-group-vertical label:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .xm-radio-button-group label:first-of-type {border-radius:10px 0 0 10px;}
.xm4 .xm-radio-button-group label:last-of-type {border-radius:0 10px 10px 0;}
.xm4 .xm-radio-button-group-vertical label {margin:0 0 -1px; width:100%;}
.xm4 .xm-radio-button-group-vertical label:first-of-type {border-radius:10px 10px 0 0;}
.xm4 .xm-radio-button-group-vertical label:last-of-type {border-radius:0 0 10px 10px; border-bottom:1px solid var(--xm4-line);}
.xm4 .xm-radio-button-group label[style*="c9dfff"], .xm4 .xm-radio-button-group-vertical label[style*="c9dfff"] {--selected-bgcolor:var(--xm4-accent)!important; --selected-color:#fff!important;}
.xm4 .xm-radio-button-group input:checked + label, .xm4 .xm-radio-button-group-vertical input:checked + label {background-color:var(--selected-bgcolor); border-color:var(--selected-bgcolor); color:var(--selected-color); position:relative; z-index:1; box-shadow:none;}
.xm4 .xm-radio-button-group input:focus-visible + label, .xm4 .xm-radio-button-group-vertical input:focus-visible + label {box-shadow:0 0 0 3px var(--xmf-focus-ring); z-index:2;}
.xm4 .xm-radio-button-group input:checked + label:not(:has(i))::before, .xm4 .xm-radio-button-group-vertical input + label::before, .xm4 .xm-radio-button-group-vertical input:checked + label::before {font-family:"Font Awesome 7 Pro","Font Awesome 6 Pro","FontAwesome"; font-weight:900; margin-right:2px;}
/* toggle switch (jquery.switcher) */
.xm4 .ui-switcher {width:44px; height:24px; margin:0 8px 0 0; border-radius:14px; background:var(--xm4-faint); box-shadow:none; transition:background .2s;}
.xm4 .ui-switcher::before {display:none;}
.xm4 .ui-switcher::after {top:3px; width:18px; height:18px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .2s;}
.xm4 .ui-switcher[aria-checked="false"]::after {left:3px;}
.xm4 .ui-switcher[aria-checked="true"] {background:var(--xm4-accent);}
.xm4 .ui-switcher[aria-checked="true"]::after {left:23px;}
.xm4 .ui-switcher[data-on]:not([data-on=""]) {width:auto; min-width:64px; padding:0 30px 0 12px; color:#fff; font:700 .6875rem/24px var(--bs-body-font-family); text-transform:uppercase; letter-spacing:.04em;}
.xm4 .ui-switcher[data-on]:not([data-on=""])[aria-checked="true"]::before {display:block; position:static; content:attr(data-on); color:#fff; font:inherit; height:auto; width:auto; text-align:left;}
.xm4 .ui-switcher[data-on]:not([data-on=""])[aria-checked="false"] {padding:0 12px 0 30px; color:var(--xm4-ink-2);}
.xm4 .ui-switcher[data-on]:not([data-on=""])[aria-checked="false"]::before {display:block; position:static; content:attr(data-off); color:var(--xm4-ink-2); font:inherit; height:auto; width:auto; text-align:right;}
.xm4 .ui-switcher[data-on]:not([data-on=""])[aria-checked="true"]::after {left:auto; right:3px;}
.xm4 .ui-switcher:focus-visible {outline:2px solid var(--xm4-accent); outline-offset:2px;}
/* styled single checkboxes (xmSiChk) */
.xm4 .xmSiChk {--color-default:var(--xm4-line); --color-active:var(--xm4-accent); border-color:var(--xm4-line); background:var(--xm4-surface); color:var(--xm4-text); border-radius:10px; margin-bottom:6px; padding:8px 14px 8px 15px;}

/* ---- validation ---- */
.xm4 .XMFormRow.has-error .form-control, .xm4 .XMFieldWrapper.xm-field-error .form-control, .xm4 .XMFieldWrapper.xm-field-error select.form-control, .xm4 .XMFieldWrapper.xm-field-error textarea.form-control, .xm4 .xm-modern .XMFormRow.has-error .form-control, .xm4 .xm-modern .XMFieldWrapper.xm-field-error .form-control {border-color:var(--xm4-danger); box-shadow:0 0 0 3px var(--xmf-danger-ring);}
.xm4 .XMFormRow.has-error .XMLabel, .xm4 .xm-modern .XMFormRow.has-error .XMLabel {color:var(--xm4-danger);}
.xm4 .XMFieldWrapper.xm-field-error {background:transparent;}
.xm4 .xm-error-hint, .xm4 .xm-modern .xm-error-hint {position:relative; bottom:auto; display:flex; align-items:flex-start; gap:8px; margin:7px 0 0; padding:8px 12px; border:1px solid var(--xmf-danger-border); border-radius:8px; background:var(--xmf-danger-bg); color:var(--xm4-danger); font:500 .75rem/1.45 var(--bs-body-font-family); z-index:auto;}
.xm4 .xm-error-hint::before, .xm4 .xm-modern .xm-error-hint::before {content:"\f06a"; position:static; border:0; flex:none; margin-top:1px; font:900 12px/1.4 "Font Awesome 7 Pro","Font Awesome 6 Pro"; color:var(--xm4-danger);}
.xm4 .xm-error-hint::after {display:none;}
.xm4 .xm-error-hint .label, .xm4 .xm-error-hint .label-danger {display:inline; padding:0; background:transparent; color:inherit; font:inherit; border-radius:0; text-shadow:none;}

/* ---- action bar ---- */
.xm4 .xmFormButtonBar, .xm4 .xmFormButtonBar.xm-modern-button-bar {position:sticky; bottom:calc(var(--xm4-bottom) + var(--xpr-dock-height,0px)); display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:12px 0; border:0; border-top:1px solid var(--xm4-line); border-radius:0; background:var(--xmf-bar-bg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:none; z-index:9; white-space:normal;}
/* The renderer emits <div class="row xmFormButtonBar"><div class="col-sm-3 xmFormButtonBarLeft"></div><div class="col-sm-9 xmFormButtons">…</div></div>;
   in the stacked layout the spacer column goes and the buttons take the full row. */
.xm4 .xmFormButtonBar {--bs-gutter-x:0; --bs-gutter-y:0;}
.xm4 .xmFormButtonBar > .xmFormButtonBarLeft:empty {display:none;}
.xm4 .xmFormButtonBar > [class*="col-"] {flex:1 1 auto; width:auto; max-width:none; padding:0;}
.xm4 .xmFormButtonBar > .btn, .xm4 .xmFormButtonBar > .xm4-muted, .xm4 .xmFormButtonBar > span {flex:0 0 auto; width:auto;}
.xm4 .xmFormButtonBar .btn {display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 16px; border-radius:10px; font:600 .8125rem/1.3 var(--bs-body-font-family);}
.xm4 .xmFormButtonBar .btn-danger {float:none; margin-right:0; margin-left:auto;}
.xm4 .xmFormButtons {white-space:normal; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.xm4 .btn-primary, .xm4 .btn-primary:focus {--bs-btn-bg:var(--xm4-accent); --bs-btn-border-color:var(--xm4-accent); --bs-btn-hover-bg:var(--xm4-accent-dark); --bs-btn-hover-border-color:var(--xm4-accent-dark); --bs-btn-active-bg:var(--xm4-accent-dark); --bs-btn-focus-shadow-rgb:37,99,235; box-shadow:0 8px 20px -12px color-mix(in srgb,var(--xm4-accent) 80%,transparent);}
.xm4 .btn-secondary, .xm4 .btn-default {--bs-btn-color:var(--xm4-text); --bs-btn-bg:var(--xm4-surface); --bs-btn-border-color:var(--xm4-line); --bs-btn-hover-color:var(--xm4-text); --bs-btn-hover-bg:var(--xm4-soft); --bs-btn-hover-border-color:var(--xm4-faint); --bs-btn-active-bg:var(--xm4-soft); --bs-btn-active-color:var(--xm4-text); --bs-btn-active-border-color:var(--xm4-faint);}
.xm4 .btn-danger {--bs-btn-color:var(--xm4-danger); --bs-btn-bg:var(--xm4-surface); --bs-btn-border-color:color-mix(in srgb,var(--xm4-danger) 40%,transparent); --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--xm4-danger); --bs-btn-hover-border-color:var(--xm4-danger); --bs-btn-active-bg:var(--xm4-danger); --bs-btn-active-color:#fff;}
.xm4 .XMFormFooterArrow {display:none;}

/* ---- tabs & wizard layouts ---- */
.xm4 .xm-modern-tabs.nav-tabs, .xm4 .xm-modern-tabs {display:flex; gap:4px; margin:0 0 16px; padding:0 0 0; border:0; border-bottom:1px solid var(--xm4-line);}
.xm4 .xm-modern-tabs.nav-tabs > li {margin:0; float:none;}
.xm4 .xm-modern-tabs.nav-tabs > li > a {display:flex; align-items:center; gap:6px; margin:0; padding:10px 14px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--xm4-muted); font:600 .8125rem/1.3 var(--bs-body-font-family); text-decoration:none;}
.xm4 .xm-modern-tabs.nav-tabs > li > a:hover, .xm4 .xm-modern-tabs.nav-tabs > li > a:focus {color:var(--xm4-text); background:var(--xm4-soft); border-radius:8px 8px 0 0;}
.xm4 .xm-modern-tabs.nav-tabs > li.active > a, .xm4 .xm-modern-tabs.nav-tabs > li.active > a:hover, .xm4 .xm-modern-tabs.nav-tabs > li.active > a:focus {color:var(--xm4-accent); background:transparent; border-bottom-color:var(--xm4-accent);}
.xm4 .xm-modern-tabs.nav-tabs > li.has-error > a {color:var(--xm4-danger);}
.xm4 .xmf-wizard-head {background:var(--xm4-surface); color:var(--xm4-text); border-color:var(--xm4-line); border-radius:var(--xm4-radius);}
.xm4 .tab-pane .SectionLabel {color:var(--xm4-text);}

/* ---- matrix / dynamic-row tables ---- */
.xm4 .matrixTable, .xm4 .matrixTable.table {--bs-table-bg:var(--xm4-surface); --bs-table-color:var(--xm4-text); --bs-table-border-color:var(--xm4-line); --bs-table-striped-bg:var(--xm4-soft); border:1px solid var(--xm4-line); border-radius:10px; overflow:hidden; font-size:.8125rem;}
.xm4 .matrixTable thead th, .xm4 .matrixTable .xmLabelRow th {background:var(--xm4-soft)!important; color:var(--xm4-ink-2)!important; font:600 .75rem/1.4 var(--bs-body-font-family); letter-spacing:.02em; border-bottom:1px solid var(--xm4-line); padding:10px 12px; white-space:nowrap;}
.xm4 .matrixTable td {padding:8px 10px; vertical-align:middle; border-color:var(--xm4-line-2);}
.xm4 .matrixTable .form-control {min-height:36px; padding:6px 10px; font-size:.8125rem; border-radius:8px;}
.xm4 .matrixTable .input-group-addon {min-height:36px; min-width:36px; padding:0 10px;}
/* A <label> wrapped around a control (rather than beside it) is inline-block, so it shrink-wraps to the
   control's max-content width and carries it straight out of the column. Let the cell be the limit. */
.xm4 td > label, .xm4 th > label {max-width:100%;}
.xm4 .mtrxFCol {background:var(--xm4-surface); color:var(--xm4-text);}
.xm4 .mtrxFColSummary {font-weight:600;}
.xm4 .xmFormHorizontal .xmLabelRow th {background:var(--xm4-soft); color:var(--xm4-ink-2);}

/* ---- files, tokens, select2 ---- */
.xm4 .XMFileUploader {border:1px dashed var(--xm4-line); border-radius:10px; padding:10px 12px; background:var(--xm4-soft); color:var(--xm4-muted);}
.xm4 .XMFileUploader:hover {border-color:var(--xm4-accent); color:var(--xm4-text);}
.xm4 .list-group.FileUploadFieldListManager {--bs-list-group-bg:var(--xm4-surface); --bs-list-group-color:var(--xm4-text); --bs-list-group-border-color:var(--xm4-line); border-radius:10px; margin-top:8px;}
.xm4 .list-group.FileUploadFieldListManager .list-group-item {padding:10px 12px; font-size:.8125rem;}
.xm4 .progress {height:8px; border-radius:99px; background:var(--xm4-soft);}
.xm4 .progress-bar {background:var(--xm4-accent);}
.xm4 .XMFormRow .select2-container .select2-selection, .xm4 .select2-container--default .select2-selection--single, .xm4 .select2-container--default .select2-selection--multiple {min-height:42px; padding:4px 6px; background:var(--xm4-surface); border:1px solid var(--xm4-line); border-radius:var(--xmf-radius,10px); color:var(--xm4-text); box-shadow:none; transition:border-color .15s,box-shadow .15s;}
.xm4 .select2-container--default.select2-container--focus .select2-selection, .xm4 .select2-container--default.select2-container--open .select2-selection {border-color:var(--xm4-accent); box-shadow:0 0 0 3px var(--xmf-focus-ring);}
.xm4 .select2-container--default .select2-selection--single .select2-selection__rendered {line-height:32px; padding-left:6px; color:var(--xm4-text);}
.xm4 .select2-container--default .select2-selection--single .select2-selection__arrow {height:40px; right:6px;}
.xm4 .select2-container--default .select2-selection--multiple .select2-selection__choice {margin:3px 4px 3px 0; padding:2px 8px; border:1px solid var(--xm4-line); border-radius:7px; background:var(--xm4-soft); color:var(--xm4-text); font-size:.8125rem;}
.xm4 .select2-dropdown {border:1px solid var(--xm4-line); border-radius:10px; background:var(--xm4-surface); color:var(--xm4-text); box-shadow:var(--xm4-shadow-lg); overflow:hidden;}
.xm4 .select2-container--default .select2-results__option--highlighted[aria-selected], .xm4 .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {background:var(--xm4-tint); color:var(--xm4-accent);}
.xm4 .select2-container--default .select2-search--dropdown .select2-search__field {border:1px solid var(--xm4-line); border-radius:8px; padding:6px 10px; background:var(--xm4-surface); color:var(--xm4-text);}
.xm4 .xmTokenList, .xm4 .tagit {border:1px solid var(--xm4-line); border-radius:var(--xmf-radius,10px); background:var(--xm4-surface); padding:4px 6px; min-height:42px;}
.xm4 .xmTokenListItem, .xm4 .tagit-choice {border:1px solid var(--xm4-line); border-radius:7px; background:var(--xm4-soft); color:var(--xm4-text);}

/* ---- signature pad ---- */
/* The shared renderer builds the toolbar from <td class="btn"> cells inside a table that carries an inline
   grey background and border, so these overrides have to beat inline styles. */
.xm4 .sigPad {border:1px solid var(--xm4-line); border-radius:var(--xmf-radius,10px); background:var(--xm4-surface); overflow:hidden;}
.xm4 .sigPad .sigWrapper {height:auto!important; border:0; background:var(--xm4-surface);}
/* Never size this canvas. jquery.signaturepad draws with raw pointer offsets (e.pageX - offset.left)
   straight into the 380x200 backing store, so any CSS width -- including max-width on a narrow phone --
   scales every stroke away from the pen. The renderer clips instead (.sigPad has inline overflow:hidden). */
.xm4 .sigPad canvas.pad {display:block; background:transparent; cursor:crosshair; touch-action:none;}
.xm4 .sigPad table {width:100%; margin:0; background:var(--xm4-soft)!important; border-top:1px solid var(--xm4-line)!important; border-collapse:separate; border-spacing:0;}
.xm4 .sigPad td.btn {display:inline-flex; align-items:center; justify-content:center; width:38px; height:34px; margin:7px 0 7px 7px; padding:0; border:1px solid var(--xm4-line)!important; border-radius:8px; background:var(--xm4-surface); color:var(--xm4-ink-2); font-size:14px; line-height:1; box-shadow:none; vertical-align:middle; transition:background .12s,border-color .12s,color .12s;}
.xm4 .sigPad td.btn:hover {background:var(--xm4-tint); border-color:var(--xm4-accent)!important; color:var(--xm4-accent);}
.xm4 .sigPad td.btn:focus-visible {outline:2px solid var(--xm4-accent); outline-offset:2px;}
.xm4 .sigPad td.btn.disabled, .xm4 .sigPad td.btn[disabled] {background:var(--xm4-surface); color:var(--xm4-faint); opacity:.55; pointer-events:none;}
.xm4 .sigPad td.btn i {margin:0;}
.xm4 .sigPad td:not(.btn) {color:var(--xm4-muted); font-size:.75rem; padding-left:8px;}

/* ---- file upload ---- */
.xm4 .XMFileUploader .xmFilePickerAlt {display:inline-flex!important; align-items:center; gap:8px; vertical-align:middle;}
.xm4 .xmUploadMenuDrop {width:auto!important; display:inline-flex; align-items:center;}
.xm4 .xmUploadMenuDrop .dropdown-toggle::after {display:none;}
.xm4 .xmUploadMenuDrop .dropdown-toggle > span {display:inline-flex!important; align-items:center; justify-content:center; width:36px; height:36px; padding:0!important; border:1px solid var(--xm4-line)!important; border-radius:9px!important; background:var(--xm4-surface)!important; color:var(--xm4-ink-2); font-size:14px!important;}
.xm4 .xmUploadMenuDrop .dropdown-toggle > span:hover {background:var(--xm4-tint)!important; border-color:var(--xm4-accent)!important; color:var(--xm4-accent);}
/* Only the button part of a file input is themed: plupload overlays a transparent input on its own
   browse button, and restyling the control itself would make that invisible shim visible. */
.xm4 .XMFileUploader input[type=file] {max-width:100%; font-size:.8125rem; color:var(--xm4-muted);}
.xm4 .XMFileUploader input[type=file]::file-selector-button {margin-right:10px; padding:8px 14px; border:1px solid var(--xm4-line); border-radius:9px; background:var(--xm4-surface); color:var(--xm4-text); font:600 .8125rem/1 var(--bs-body-font-family); cursor:pointer; transition:background .12s,border-color .12s,color .12s;}
.xm4 .XMFileUploader input[type=file]::file-selector-button:hover {background:var(--xm4-tint); border-color:var(--xm4-accent); color:var(--xm4-accent);}

/* ---- misc widgets ---- */
.xm4 .xmToolBar {border:1px solid var(--xm4-line); border-radius:8px; background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .XMFormBody .alert {border-radius:10px; font-size:.8125rem;}
.xm4 .XMFormBody .alert-info {--bs-alert-bg:var(--xm4-tint); --bs-alert-border-color:color-mix(in srgb,var(--xm4-accent) 30%,transparent); --bs-alert-color:var(--xm4-ink-2);}
.xm4 .XMFormBody img {max-width:100%; height:auto!important;}
.xm4 form label.xmTip, .xm4 form .xmTip {text-decoration:none;}
.xm4 .form-group {position:relative; margin-bottom:0;}
.xm4 fieldset {border:1px solid var(--xm4-line); border-radius:10px; padding:14px 16px; margin:0 0 16px;}
.xm4 legend {float:none; width:auto; padding:0 6px; margin:0 0 6px; font:600 .8125rem/1.4 var(--bs-body-font-family); color:var(--xm4-ink-2);}

/* ---- responsive ---- */
@media(max-width:767.98px) {
  .xm4 button.xm-field-hint {width:28px; height:28px; min-width:28px; margin-top:0; font-size:15px;}
  .xm4 .XMFormGroupHeader, .xm4 .xm-modern .XMFormGroupHeader.panel-heading {padding:14px 16px 10px;}
  .xm4 .XMFormBody, .xm4 .xm-modern .XMFormBody.panel-body {padding:12px 16px 16px;}
  .xm4 .XMFormRow > [class*="col-"], .xm4 .XMFormRow > .control-label {width:100%; max-width:100%; flex:0 0 100%; text-align:left; padding-inline:0;}
  .xm4 .form-horizontal .control-label, .xm4 .form-horizontal .col-form-label {padding-top:0;}
  .xm4 .form-control, .xm4 .form-select, .xm4 .XMFormRow .form-control, .xm4 .XMFormRow select {min-height:46px; font-size:16px;}
  .xm4 .input-group-addon {min-height:46px;}
  .xm4 .cbWrapper > .xmToolBar input[type="search"] {min-height:44px; font-size:16px;}
  .xm4 .cbWrapper > .xmToolBar :is(.dropdown-toggle,[id$="_fullscreen"]) {min-width:44px; min-height:44px;}
  .xm4 .cbWrapper .chkRadOpt {min-height:48px;}
  .xm4 .XMFormSectionFlex {display:block;}
  .xm4 .XMFormSectionFlex > .XMFormRow {width:100%!important; max-width:100%!important;}
  .xm4 .xmFormButtonBar {padding:10px 0;}
  .xm4 .xmFormButtonBar .btn, .xm4 .xmFormButtonBar > .btn {min-height:44px; flex:1 1 auto; justify-content:center;}
  .xm4 .xmFormButtonBar .btn-danger {margin-left:0;}
  .xm4 .matrixTable {display:block; max-width:100%; overflow-x:auto;}
  .xm4 .xm-radio-button-group {flex-direction:column;}
  .xm4 .xm-radio-button-group label {width:100%; margin:0 0 -1px; border-radius:0!important;}
  .xm4 .xm-radio-button-group label:first-of-type {border-radius:10px 10px 0 0!important;}
  .xm4 .xm-radio-button-group label:last-of-type {border-radius:0 0 10px 10px!important;}
}
@media print {
  .xm4 .xmFormButtonBar {display:none!important;}
  .xm4 .XMFormSection {box-shadow:none; break-inside:avoid;}
  .xm4 .XMFormSection > .XMFormGroupHeader {position:static;}
}