/**
 * Modern UX � Pure CSS form modernization
 * Scope: only applies when an ancestor (typically body) has class "modern-ux"
 * No HTML changes required on individual form elements.
 * Top-tier UX: purposeful animation, validation feedback, accessibility.
 * A11y: visible focus (2.4.7) via outline + box-shadow; reduced-motion; placeholder contrast.
 */

/*
    C:\Medrio\medrio.subjectportal\src\Medrio.SubjectPortal\wwwroot\styles\modern-ux.css
    C:\Medrio\medrio.edc\src\Medrio.EDC\Medrio.Web\App_Themes\medrio\modern-ux.css
    C:\Medrio\medrio.edc\src\Medrio.EDC\Medrio.Web.EProSite\App_Themes\medrio\modern-ux.css
*/

/* -------------------------------------------------------------------------
   Keyframes (respect reduced motion in separate block below)
   ------------------------------------------------------------------------- */
@keyframes mux-focus-in {
    from {
        box-shadow: 0 0 0 0 transparent;
    }

    to {
        box-shadow: var(--mux-focus-ring);
    }
}

@keyframes mux-button-press {
    from {
        transform: translateY(-1px);
    }

    to {
        transform: translateY(0) scale(0.98);
    }
}

@keyframes mux-invalid-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 var(--mux-color-invalid-pulse);
    }

    50% {
        box-shadow: 0 0 0 4px var(--mux-color-invalid-pulse-mid);
    }
}

@keyframes mux-check-pop {
    from {
        transform: scale(0.9);
        opacity: 0.6;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes mux-section-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MUI-like touch ripple (CSS-only, center-origin) */
@keyframes mux-touch-ripple {
    from {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.4;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes mux-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* -------------------------------------------------------------------------
   CSS custom properties (theme) – UX designer spec / theme.tsx alignment
   Semantic (shadcn-style) + Mux Theme tokens (UI-v4). Scope: body.modern-ux.
   ------------------------------------------------------------------------- */
body.modern-ux {
    /* Semantic tokens (light) */
    /* Font-size scale (leaf values — tune density here) */
    --mux-fs-0: 0;
    --mux-fs-12: 12px;
    --mux-fs-13: 13px;
    --mux-fs-14: 14px;
    --mux-fs-15: 15px;
    --mux-fs-16: 16px;
    --mux-fs-18: 18px;
    --mux-fs-20: 20px;
    --mux-fs-24: 24px;
    --mux-fs-rem-6875: 0.6875rem;
    --mux-fs-rem-75: 0.75rem;
    --mux-fs-rem-8125: 0.8125rem;
    --mux-fs-rem-875: 0.875rem;
    --mux-fs-rem-9: 0.9rem;
    --mux-fs-rem-9375: 0.9375rem;
    --mux-fs-rem-95: 0.95rem;
    --mux-fs-rem-1: 1rem;
    --mux-fs-rem-10625: 1.0625rem;
    --mux-fs-rem-1125: 1.125rem;
    --mux-fs-rem-125: 1.25rem;
    --mux-fs-rem-15: 1.5rem;

    --font-size: var(--mux-fs-16);
    --background: #ffffff;
    --foreground: oklch(0.145 0 0);
    --card: #ffffff;
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: #030213;
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.95 0.0058 264.53);
    --secondary-foreground: #030213;
    --muted: #ececf0;
    --muted-foreground: #717182;
    --accent: #fcfcfc;
    --accent-foreground: #030213;
    /* Match CSS-Only-UI-2026 / .ds-input (--color-error) */
    --destructive: #DC2626;
    --destructive-foreground: #ffffff;
    --border: var(--mux-color-black-10);
    --input: transparent;
    /* .ds-input uses var(--bg) #FFFFFF */
    --input-background: var(--background);
    --switch-background: #cbced4;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    /*--radius: 0.4rem;*/
    --radius: 4px;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: #030213;
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);

    /* Mux Theme tokens – UI-v4 (primary brand #46B9FF) */
    --mux-primary-main: #46B9FF;
    --mux-primary-light: #7DCDFF;
    --brand-light: var(--mux-primary-light); /* Figma Brand Light — main nav strip / active tab */
    --mux-primary-dark: #2A9BE8;
    --mux-primary-darker: #1E7FCC;
    --brand-darker: var(--mux-primary-darker); /* Figma Brand Darker — subject ID / panel list links */
    --mux-primary-contrast: #000000;
    --mux-primary-hover: var(--mux-primary-dark);
    /* Semantic colors */
    --mux-error-main: #DC2626;
    --mux-error-light: #F87171;
    --mux-warning-main: #D97706;
    --mux-warning-light: #FBBF24;
    --mux-success-main: #059669;
    --mux-success-light: #34D399;
    --mux-info-main: #2563EB;
    --mux-info-light: #60A5FA;
    --mux-secondary-main: #6B7280;
    --mux-secondary-dark: #4B5563;
    /* Text, background, divider */
    --mux-color-text: var(--gray-900);
    --mux-color-text-muted: #9CA3AF;
    --mux-color-text-disabled: #9CA3AF;
    --mux-color-bg: #FFFFFF;
    --mux-color-bg-paper: var(--gray-50);
    --mux-color-divider: var(--gray-200);
    /* Invalid pulse animation */
    --mux-color-invalid-pulse: rgba(220, 38, 38, 0.4);
    --mux-color-invalid-pulse-mid: rgba(220, 38, 38, 0.2);
    /* Font-weight scale */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    /* Line-height scale (unitless ratios only; px/rem values stay inline) */
    --lh-none: 1;
    --lh-tight: 1.2;
    --lh-snug: 1.25;
    --lh-compact: 1.3;
    --lh-relaxed: 1.35;
    --lh-base: 1.4;
    --lh-loose: 1.45;
    --lh-normal: 1.5;
    --lh-wide: 1.6;
    /* Background surface palette */
    --mux-bg-chrome: #eef3f6;    /* body/sidebar page chrome */
    --mux-bg-subtle: #f5f5f5;    /* neutral muted surface (tables, wizard rows) */
    /* Mux aliases (map to theme) */
    --mux-font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    --mux-font-size: var(--mux-fs-rem-1);
    --mux-line-height: var(--lh-normal);
    --mux-radius: 8px;
    --mux-color-border: var(--border);
    --mux-color-border-hover: var(--mux-color-text-disabled);
    --mux-color-border-focus: var(--mux-primary-main);
    --mux-color-invalid: var(--mux-error-main);
    --mux-color-invalid-bg: #FEF2F2;
    --mux-color-required: var(--mux-primary-dark);
    --mux-color-bg-hover: var(--mux-color-bg-paper);
    --mux-color-bg-disabled: #F3F4F6;
    --gray-100: #F3F4F6;
    --mux-color-accent: var(--mux-primary-main);
    --mux-color-accent-hover: var(--mux-primary-hover);
    --mux-color-accent-active: var(--mux-primary-dark);
    --mux-color-accent-glow: rgba(70, 185, 255, 0.35);
    /* .ds-input: padding space-2 space-3 (8px 12px), line-height 1.5 */
    --mux-padding-x: 0.75rem;
    --mux-padding-y: 0.5rem;
    --mux-input-pad-y-focus: calc(var(--mux-padding-y) - 1px);
    --mux-input-pad-x-focus: calc(var(--mux-padding-x) - 1px);
    --mux-height: 2.5rem;
    /* Single-line text fields, native select, RadComboBox input, med-input — one knob set (buttons still use --ds-btn-height / --mux-touch-min where applicable) */
    --mux-field-control-height: 32px;
    --mux-field-control-min-height: 32px;
    --mux-field-control-font-size: var(--mux-fs-rem-875);
    --mux-field-control-padding-y: 5px;
    --mux-field-control-padding-x: 12px;
    --mux-field-control-padding: var(--mux-field-control-padding-y) var(--mux-field-control-padding-x);
    /* ul.paging sprite arrows — cell size matches text inputs / page-size select (not --mux-height / 40px) */
    --mux-paging-icon-size: var(--mux-field-control-height);
    /* .ds-select / med-select host — align with field control tokens + inline-end for caret */
    --mux-ds-select-pad-y: var(--mux-field-control-padding-y);
    --mux-ds-select-pad-inline-start: var(--mux-field-control-padding-x);
    --mux-ds-select-pad-inline-end: var(--space-6);
    --mux-ds-select-min-height: var(--mux-field-control-min-height);
    --mux-ds-select-height: var(--mux-field-control-height);
    /* Inner text line box: fixed host height + pad + 1px border — must not exceed or overflow:hidden clips (top-heavy label). */
    --mux-ds-select-line-height: calc(var(--mux-ds-select-height) - 2px - 2 * var(--mux-ds-select-pad-y));
    --mux-touch-min: 44px;
    /* Form editor: Add/Arrange (RadMenu) + eCRF/ePRO (med-button-toggle-group) — one row height */
    --mux-form-editor-segmented-min-height: 2rem;
    /* med-button-toggle primary checked: host tint (shadow inner button uses rgba; see segment rules below) */
    --mux-med-button-toggle-checked-primary-mix: 24%;
    /* Alpha surfaces & ink — Material-style on light (body.modern-ux.dark overrides) */
    --mux-color-black-05: rgba(0, 0, 0, 0.05);
    --mux-color-black-07: rgba(0, 0, 0, 0.07);
    --mux-color-black-08: rgba(0, 0, 0, 0.08);
    --mux-color-black-10: rgba(0, 0, 0, 0.1);
    --mux-color-black-12: rgba(0, 0, 0, 0.12);
    --mux-color-black-15: rgba(0, 0, 0, 0.15);
    --mux-color-on-surface: rgba(0, 0, 0, 0.87);
    --mux-color-on-surface-muted: rgba(0, 0, 0, 0.65);
    --mux-color-outline: rgba(0, 0, 0, 0.23);
    --mux-brand-accessible-06: rgba(13, 95, 168, 0.06);
    --mux-brand-accessible-08: rgba(13, 95, 168, 0.08);
    --mux-brand-accessible-10: rgba(13, 95, 168, 0.1);
    --mux-brand-accessible-12: rgba(13, 95, 168, 0.12);
    --mux-primary-20: rgba(70, 185, 255, 0.2);
    /* Shadows */
    --mux-shadow-sm: 0 1px 2px var(--mux-color-black-05);
    --mux-shadow: 0 1px 3px var(--mux-color-black-08);
    --mux-shadow-hover: 0 4px 12px var(--mux-color-black-10);
    --mux-focus-ring: 0 0 0 3px var(--mux-color-accent-glow);
    --mux-transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
    /* Links */
    --mux-color-link: var(--mux-color-accent);
    --mux-color-link-hover: var(--mux-color-accent-hover);
    --mux-color-link-active: var(--mux-color-accent-active);
    --mux-link-underline-offset: 0.2em;
    --mux-link-underline-thickness: 1px;
    /* Checkbox/radio — .ds-checkbox / .ds-radio: 2px solid gray-600 */
    --mux-color-checkbox-border: var(--mux-secondary-dark);
    --mux-color-checkbox-bg: transparent;
    /* med-checkbox (@medrio/core): SVG check lives in shadow + uses stroke="white"; js/modern-ux-theme.js reads this for all instances */
    --mux-med-checkbox-checkmark-stroke: #000000;
    /* Reset button */
    --mux-color-reset-bg: #6B7280;
    --mux-color-reset-bg-hover: #4B5563;
    --mux-color-reset-border: #4B5563;
    --mux-color-reset-border-hover: var(--gray-700);

    /* Design system tokens (shared names — Figma / component library) */
    --brand: var(--mux-primary-main);
    --brand-dark: var(--mux-primary-dark);
    --brand-accessible: #0D5FA8;
    --color-error: var(--mux-error-main);
    --color-error-light: var(--mux-error-light);
    --color-error-dark: #B91C1C;
    --color-warning: #F99E1C;
    --color-warning-light: var(--mux-warning-light);
    --color-warning-dark: #B45309;
    --color-success: var(--mux-success-main);
    --color-success-light: var(--mux-success-light);
    --color-success-dark: #047857;
    --color-info: var(--mux-info-main);
    --color-info-light: var(--mux-info-light);
    --color-info-dark: #1E40AF;
    --gray-50: #F9FAFB;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --bg: #FFFFFF;
    --bg-paper: var(--gray-50);
    --text-primary: var(--gray-900);
    --text-secondary: #6B7280;
    --text-disabled: #9CA3AF;
    --border-color: var(--gray-200);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    /* Phase E — .ds-dialog shell (canonical: 04a03c3e7dfb4eacdc1c1a22617e0606b4535c72.css; also d5671d3a… on figma.site) */
    --mux-ds-dialog-radius: 28px;
    --mux-ds-dialog-shadow:
        0 8px 10px 1px #00000024,
        0 3px 14px 2px #0000001f,
        0 5px 5px -3px #0003;
    --mux-ds-dialog-shadow-dark:
        0 8px 10px 1px #00000047,
        0 3px 14px 2px #0000003d,
        0 5px 5px -3px #0006;
    --shadow-sm: 0 1px 2px var(--mux-color-black-05);
    --shadow-md: 0 4px 6px -1px var(--mux-color-black-10), 0 2px 4px -2px var(--mux-color-black-10);
    --shadow-lg: 0 10px 15px -3px var(--mux-color-black-10), 0 4px 6px -4px var(--mux-color-black-10);
    --transition: .15s cubic-bezier(.4, 0, .2, 1);
    --font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* CSS-Only-UI-2026 .ds-btn default (md) — not the same as --mux-height (2.5rem / 40px form controls) */
    --ds-btn-height: 36px;
    /* Single source for .ds-btn + primary a.button label (override to e.g. 0.875rem for 14px DS) */
    --ds-btn-font-size: var(--mux-fs-14);
    /* Table column/row headers (thead + GridView first tbody row) */
    --table-header-font-size: var(--mux-fs-14);

    /* -------------------------------------------------------------------------
       Phase A — CSS-Only-UI-2026 token aliases (canonical spec: b05eeb…css on
       https://onion-steam-49836257.figma.site/ — see .cursor/rules/css-only-ui-2026-framework.mdc)
       These are non-breaking forwards: same computed values as existing Medrio / mux
       tokens above; use when pasting Figma rules that reference --ds-* names.
       Intentional deltas (do not “fix” without design review):
       • --radius (shadcn shell, 4px) ≠ --radius-md / --mux-radius (8px surfaces, DS buttons/cards).
       • --color-warning (#F99E1C, DS) ≠ --mux-warning-main (#D97706, legacy Mux); components use --color-*.
       ------------------------------------------------------------------------- */
    --ds-font-family: var(--font-family);
    --ds-font-size-base: var(--font-size);
    --ds-transition: var(--transition);
    --ds-shadow-sm: var(--shadow-sm);
    --ds-shadow-md: var(--shadow-md);
    --ds-shadow-lg: var(--shadow-lg);
    --ds-radius-sm: var(--radius-sm);
    --ds-radius-md: var(--radius-md);
    --ds-radius-lg: var(--radius-lg);
    --ds-radius-full: var(--radius-full);
    --ds-space-1: var(--space-1);
    --ds-space-2: var(--space-2);
    --ds-space-3: var(--space-3);
    --ds-space-4: var(--space-4);
    --ds-space-5: var(--space-5);
    --ds-space-6: var(--space-6);
    --ds-space-8: var(--space-8);
    --ds-space-10: var(--space-10);
    --ds-space-12: var(--space-12);
    --ds-color-brand: var(--brand);
    --ds-color-brand-light: var(--brand-light);
    --ds-color-brand-dark: var(--brand-dark);
    --ds-color-brand-darker: var(--brand-darker);
    --ds-color-brand-accessible: var(--brand-accessible);
    --ds-color-text-primary: var(--text-primary);
    --ds-color-text-secondary: var(--text-secondary);
    --ds-color-text-disabled: var(--text-disabled);
    --ds-color-bg: var(--bg);
    --ds-color-bg-paper: var(--bg-paper);
    --ds-color-border: var(--border-color);
    --ds-color-error: var(--color-error);
    --ds-color-error-light: var(--color-error-light);
    --ds-color-error-dark: var(--color-error-dark);
    --ds-color-warning: var(--color-warning);
    --ds-color-warning-light: var(--color-warning-light);
    --ds-color-warning-dark: var(--color-warning-dark);
    --ds-color-success: var(--color-success);
    --ds-color-success-light: var(--color-success-light);
    --ds-color-success-dark: var(--color-success-dark);
    --ds-color-info: var(--color-info);
    --ds-color-info-light: var(--color-info-light);
    --ds-color-info-dark: var(--color-info-dark);
    --ds-btn-height-md: var(--ds-btn-height);
    --ds-btn-font-size-md: var(--ds-btn-font-size);
    /* Shared by .ds-btn filled/outlined + legacy primary anchors — single knob for focus ring */
    --ds-btn-focus-visible-shadow: var(--mux-focus-ring), var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));

    font-size: var(--font-size);
    line-height: var(--mux-line-height);
    font-family: var(--mux-font-family);
}

/* Same tag list as base reset / Material typography — use mux stack instead of Roboto */
html:has(body.modern-ux) {
    font-family: var(--mux-font-family);
}

body.modern-ux :is(a, abbr, acronym, address, applet, big, blockquote, caption, cite, code, div, del, dfn, dl, dt, dd, em, fieldset, form, font, h1, h2, h3, h4, h5, h6, iframe, img, input, ins, kbd, li, label, legend, object, ol, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var) {
    font-family: var(--mux-font-family);
}

/* Material Symbols: tag reset above assigns mux stack to every span; ligature icons need the symbols font (see material-icons.css @font-face). */
body.modern-ux .material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Small devices: .Control full width (display block) */
@media (max-width: 768px) {
    body.modern-ux .Control {
        /*display: block;
        width: 100%;*/
    }
}

body.modern-ux .EditStudyMasterContent .am {
    display: inline-flex;
    align-items: center;
}

/* edit_forms_detail — ePRO page break: horizontal space between radio, label text, and “questions per page” input */
body.modern-ux #eproPageBreakConfiguration label.ml-15,
body.modern-ux #eproPageBreakConfiguration label.ml-40 {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    vertical-align: middle;
}

body.modern-ux #eproPageBreakConfiguration label .page-break-input {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Whitespace between </span> and <input> can become an anonymous flex item and steal label gap; margin on the field enforces space before the box. */
body.modern-ux label.ml-15 input.questions-per-page {
    margin-left: 0.5rem;
}

body.modern-ux .SubPageSubPanel.no-border br:first-of-type {
    display: none;
}

body.modern-ux #headerBorderDiv.header-border-div{
    display: none;   
}

body.modern-ux .SubPageSubPanel .leftTabBody {
    padding-top: 13px;
}

body.modern-ux .page-body .page-contents .pod.gc12 .leftTabBody .EditStudyMasterContent .TableWizard,
body.modern-ux .page-body .page-contents .pod.gc12 .leftTabBody .EditStudyMasterContent div.body,
body.modern-ux .page-body .page-contents .pod.gc12 .leftTabBody .EditStudyMasterContent div#deploy-content{
    padding-left: 0 !important;
}

/* Edit Study wizard — hooks on edit_study.aspx: .edit-study-wizard, .edit-study-subject-credentials,
   .edit-study-native-radio-table, .edit-study-wizard-save */

/* RadWindow-only top-level rows: base .TableWizardItem min-height:30px leaves a strip when the label card is display:none.
   Do not use :has(> .TableWizardItemForm) broadly — nested .TableWizardItem (Logo repeater, etc.) would get min-height:0 and break flex layout. */
body.modern-ux .edit-study-wizard #SubjectStatus.TableWizardItem,
body.modern-ux .edit-study-wizard #Features.TableWizardItem,
body.modern-ux .edit-study-wizard #FieldStatus.TableWizardItem,
body.modern-ux .edit-study-wizard #ReasonForChange.TableWizardItem,
body.modern-ux .edit-study-wizard #QueryDesignations.TableWizardItem,
body.modern-ux .edit-study-wizard #QReasonForChange.TableWizardItem {
    min-height: 0;
}

body.modern-ux .edit-study-subject-credentials .FlexRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    vertical-align: middle;
    margin-top: 10px;
}

/* Row radios + custom days field: strip page CSS padding so med-radio-group and med-form-field share one row axis */
body.modern-ux .edit-study-subject-credentials .FlexRow #SubjectPasswordExpiresIn {
    padding-top: 0 !important;
    margin: 0;
    align-self: center;
}

body.modern-ux .edit-study-subject-credentials .FlexRow #SubjectPasswordExpiresInDaysFormField {
    padding: 0 !important;
    margin: 0;
    width: auto;
    min-width: 6.75rem;
    max-width: 9rem;
    align-self: center;
    flex: 0 0 auto;
}

body.modern-ux .edit-study-subject-credentials .TableWizardItemSubtitle {
    margin-top: 1.25rem;
    margin-bottom: 0.35rem;
    padding-top: 0;
    color: var(--mux-color-on-surface-muted);
    letter-spacing: 0.01em;
}

body.modern-ux .edit-study-subject-credentials .TableWizardItemSubtitle:first-of-type {
    margin-top: 0.5rem;
}

body.modern-ux .edit-study-subject-credentials .SubjectUsernameAsPhiRadioTitle,
body.modern-ux .edit-study-subject-credentials .SubjectPasswordExpiresIn {
    font-weight: var(--fw-medium);
    font-size: var(--mux-fs-rem-875);
    color: var(--mux-color-on-surface-muted);
}

body.modern-ux .edit-study-subject-credentials .SubjectUsernameAsPhiRadioTitle {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
}

body.modern-ux .edit-study-subject-credentials #SubjectUsernameAsPhiRadioGroupDiv {
    display: block;
}

body.modern-ux .edit-study-subject-credentials #SubjectPasswordExpiresInDaysFormField {
    padding-top: 0;
    margin-top: 0;
}

/* Hint below “# of days” stays visually tied to the field without shifting row centering */
body.modern-ux .edit-study-subject-credentials .FlexRow #SubjectPasswordExpiresInDaysFormField .med-form-field-subscript-wrapper.sc-med-form-field {
    margin-top: 0.75rem;
}

body.modern-ux .edit-study-subject-credentials med-button.edit-study-wizard-save.action.button {
    margin-top: 0.25rem;
}

body.modern-ux .edit-study-wizard .TableWizardItemNav {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.modern-ux .edit-study-wizard a.edit-study-wizard-save.action.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mux-touch-min, 44px);
    padding: 0.5rem 1.25rem;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    text-decoration: none;
    color: var(--mux-primary-contrast, #000000);
    background-color: var(--mux-primary-main);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

body.modern-ux .edit-study-wizard a.edit-study-wizard-save.action.button:hover {
    filter: brightness(0.95);
}

body.modern-ux .edit-study-wizard a.edit-study-wizard-save.action.button:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring, 0 0 0 2px rgba(70, 185, 255, 0.45));
}

body.modern-ux .edit-study-wizard .TableWizardItemForm select {
    display: block;
    width: 100%;
    max-width: min(100%, 32rem);
    min-height: var(--mux-touch-min, 44px);
    margin-top: 0.75rem;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: var(--mux-fs-rem-1);
    line-height: var(--lh-normal);
    color: var(--mux-color-on-surface);
    background-color: var(--input-background, #ffffff);
    border: 1px solid var(--mux-color-outline);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.35rem center;
    background-size: 1.5rem;
}

body.modern-ux .edit-study-wizard .TableWizardItemForm select:hover {
    border-color: var(--mux-color-on-surface);
}

body.modern-ux .edit-study-wizard .TableWizardItemForm select:focus-visible {
    outline: none;
    border-color: var(--mux-primary-main);
    box-shadow: var(--mux-focus-ring, 0 0 0 2px rgba(70, 185, 255, 0.35));
}

body.modern-ux .edit-study-wizard .TableWizardItemForm input[type="text"]:not(.native-input),
body.modern-ux .edit-study-wizard .TableWizardItemForm input[type="number"]:not(.native-input) {
    display: block;
    width: 100%;
    max-width: min(100%, 12rem);
    min-height: var(--mux-touch-min, 44px);
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: var(--mux-fs-rem-1);
    line-height: var(--lh-normal);
    color: var(--mux-color-on-surface);
    background-color: var(--input-background, #ffffff);
    border: 1px solid var(--mux-color-outline);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

body.modern-ux .edit-study-wizard .TableWizardItemForm input[type="text"]:not(.native-input):focus-visible,
body.modern-ux .edit-study-wizard .TableWizardItemForm input[type="number"]:not(.native-input):focus-visible {
    outline: none;
    border-color: var(--mux-primary-main);
    box-shadow: var(--mux-focus-ring, 0 0 0 2px rgba(70, 185, 255, 0.35));
}

body.modern-ux .edit-study-wizard #DisplayQueryCreator .TableWizardItemForm input[type="text"]:not(.native-input) {
    max-width: min(100%, 28rem);
}

body.modern-ux .edit-study-wizard .edit-study-native-radio-table {
    width: 100%;
    max-width: 32rem;
    margin-top: 0.75rem;
    border-collapse: separate;
    border-spacing: 0;
}

body.modern-ux .edit-study-wizard .edit-study-native-radio-table tr {
    display: block;
    margin-bottom: 0.625rem;
}

body.modern-ux .edit-study-wizard .edit-study-native-radio-table td {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
}

body.modern-ux .edit-study-wizard .edit-study-native-radio-table input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--mux-primary-main);
    cursor: pointer;
}

body.modern-ux .edit-study-wizard .edit-study-native-radio-table label {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: var(--mux-fs-rem-1);
    line-height: var(--lh-normal);
    color: var(--mux-color-on-surface);
    cursor: pointer;
}

body.modern-ux .page-body .page-contents .pod.gc12 .leftTabBody .EditStudyMasterContent .SubPageSubPanel.mt-20{
    margin-top: 0;
}
/* .leftTabContainer is position:absolute; common.css uses margin-left:150px on .leftTabBody.
   common-lib $sidebar-width is 13rem (layout/sidebar + nav). Reserve that + gutter. */
body.modern-ux .buildStudyContent .leftTabBody {
    margin-left: calc(13rem) !important;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    overflow: auto;
    /* White content surface on #eef3f6 chrome (Angular list / detail panels) */
    background: var(--background);
    padding-right: 16px;
    padding-left: 16px;
}

/* -------------------------------------------------------------------------
   Configure / edit-*.aspx left rail — parity with medrio.js common-lib:
   - layout/sidebar/sidebar.scss + nav/nav-item.scss + core/theme/_variables.scss
   - $body-background: #eef3f6  |  $sidebar-width: 13rem  |  $hover-gray: rgba(0,0,0,.07)
   - .mc-nav-anchor: 14px, padding 8px 20px, $body-text-color, bg transition 400ms
   - .mc-nav-active: font-weight 700, background $hover-gray (same as hover; no blue bar in lib)
   - mc-nav-item :host margin-bottom: 5px between items
   Back row (mc-nav-home-item) still requires ASPX markup to mirror nav-home-item.scss.
   ------------------------------------------------------------------------- */
body.modern-ux .leftTabContainer {
    /* Match mc-sidebar rail width */
    width: 13rem !important;
    min-width: 13rem;
    max-width: 13rem;
    padding: 0 !important;
    box-sizing: border-box;
    background: var(--mux-bg-chrome);
    border-right: 1px solid var(--mux-color-black-12);
    display: flex;
    flex-direction: column;
    gap: 0;
    /* master.css .leftTabItem* uses text-align: right — force start alignment */
    text-align: left !important;
    z-index: 1;
    /* Stretch with #section1 min-height (parity with fixed full-height mc-sidebar column) */
    top: 0 !important;
    bottom: 0;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

body.modern-ux .leftTabContainer .leftTabItem,
body.modern-ux .leftTabContainer .leftTabItemSelected,
body.modern-ux .leftTabContainer .leftTabItemDisabled {
    width: 100% !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    text-align: left !important;
    cursor: pointer;
}

body.modern-ux .leftTabContainer .leftTabItem:last-child,
body.modern-ux .leftTabContainer .leftTabItemSelected:last-child {
    margin-bottom: 0 !important;
}

/* Inner wrapper — neutralise master.css layout; <a> padding drives the row height like mc-nav-item */
body.modern-ux .leftTabContainer .leftTabItem > div,
body.modern-ux .leftTabContainer .leftTabItemSelected > div,
body.modern-ux .leftTabContainer .leftTabItemDisabled > div {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    text-align: left !important;
    display: block;
}

/* Normal tab link — mc-nav-anchor baseline */
body.modern-ux .leftTabContainer .leftTabItem a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 20px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    text-align: left !important;
    color: var(--mux-color-on-surface) !important;
    transition: background-color 0.4s ease !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    cursor: pointer;
}

/* Selected tab — .mc-nav-active */
body.modern-ux .leftTabContainer .leftTabItemSelected a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: var(--fw-bold) !important;
    text-decoration: none !important;
    text-align: left !important;
    color: var(--mux-color-on-surface) !important;
    transition: background-color 0.4s ease !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    background: var(--mux-color-black-07) !important;
    cursor: pointer;
}

body.modern-ux .leftTabContainer .leftTabItemDisabled a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 20px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    text-align: left !important;
    color: rgba(0, 0, 0, 0.58) !important;
    transition: background-color 0.4s ease !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* :visited — prevent browser purple; keep same color as normal state */
body.modern-ux .leftTabContainer .leftTabItem a:visited,
body.modern-ux .leftTabContainer .leftTabItemSelected a:visited {
    color: var(--mux-color-on-surface) !important;
    text-decoration: none !important;
}

body.modern-ux .leftTabContainer .leftTabItemDisabled a:visited {
    color: rgba(0, 0, 0, 0.58) !important;
    text-decoration: none !important;
}

body.modern-ux.dark .leftTabContainer .leftTabItem a:visited,
body.modern-ux.dark .leftTabContainer .leftTabItemSelected a:visited {
    color: var(--foreground) !important;
    text-decoration: none !important;
}

body.modern-ux .leftTabContainer .leftTabItem a:hover,
body.modern-ux .leftTabContainer .leftTabItem a:focus,
body.modern-ux .leftTabContainer .leftTabItem a:active {
    color: var(--mux-color-on-surface) !important;
    font-weight: normal !important;
    text-decoration: none !important;
    background: var(--mux-color-black-07) !important;
    outline: none;
}

/* Selected: bold is preserved on hover — the actually-selected item must stay bold */
body.modern-ux .leftTabContainer .leftTabItemSelected a:hover,
body.modern-ux .leftTabContainer .leftTabItemSelected a:focus,
body.modern-ux .leftTabContainer .leftTabItemSelected a:active {
    color: var(--mux-color-on-surface) !important;
    /*font-weight: var(--fw-bold) !important;*/
    text-decoration: none !important;
    background: var(--mux-color-black-07) !important;
    cursor: pointer;
}

body.modern-ux .leftTabContainer .leftTabItem a:focus-visible,
body.modern-ux .leftTabContainer .leftTabItemSelected a:focus-visible {
    outline: 2px solid rgba(0, 174, 239, 0.55);
    outline-offset: 2px;
    box-shadow: none;
}

body.modern-ux.dark .leftTabContainer {
    background: var(--muted);
    border-right-color: var(--border);
}

body.modern-ux.dark .leftTabContainer .leftTabItem a,
body.modern-ux.dark .leftTabContainer .leftTabItemSelected a {
    color: var(--foreground) !important;
}

body.modern-ux.dark .leftTabContainer .leftTabItem a:hover,
body.modern-ux.dark .leftTabContainer .leftTabItem a:focus,
body.modern-ux.dark .leftTabContainer .leftTabItem a:active {
    background: rgba(255, 255, 255, 0.08) !important;
    font-weight: normal !important;
}

body.modern-ux.dark .leftTabContainer .leftTabItemSelected a {
    background: rgba(255, 255, 255, 0.1) !important;
    font-weight: var(--fw-bold) !important;
}

body.modern-ux.dark .leftTabContainer .leftTabItemSelected a:hover,
body.modern-ux.dark .leftTabContainer .leftTabItemSelected a:focus,
body.modern-ux.dark .leftTabContainer .leftTabItemSelected a:active {
    background: rgba(255, 255, 255, 0.1) !important;
    font-weight: var(--fw-bold) !important;
}

/* Configure study (BuildStudy / edit_*.aspx) — fill viewport below global nav like Angular config
   (flex column + full-height main). common.css .buildStudyContent { display:inline-block; min-height:707px }
   keeps the column short; grow .page → .page-body → .pod → .buildStudyContent → #section1. */
body.modern-ux .page:has(.buildStudyContent) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}

body.modern-ux .page-body {
    border-radius: var(--radius-md);
    margin-bottom: 10px;
}

body.modern-ux .page:has(.buildStudyContent) .page-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--mux-bg-chrome);
    border-radius: var(--radius-md);
}

body.modern-ux .page:has(.buildStudyContent) .page-contents {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    margin: 0;
}

body.modern-ux .page:has(.buildStudyContent) .pod.gc12 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    width: auto;
}

/* Page title row — align with Angular configure list toolbar (mat-toolbar + mc-toolbar-title h2) */
body.modern-ux .page:has(.buildStudyContent) .pod.gc12 > header.major {
    display: flex;
    align-items: center;
    min-height: 47px;
    padding: 0 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--mux-color-black-12);
    background: var(--mux-bg-subtle);
}

body.modern-ux .page:has(.buildStudyContent) .pod.gc12 > header.major h1 {
    margin: 0;
    padding: 0;
    font-size: var(--mux-fs-20);
    font-weight: var(--fw-medium);
    line-height: 32px;
    letter-spacing: normal;
    color: var(--mux-color-on-surface);
}

/* Same title strip as Configure Study for standard app shell pages (abstract, manage, docs, etc.).
   :where() keeps specificity below .analyze-app so analyze report headers keep space-between + actions. */
body.modern-ux :where(.page-body .page-contents .pod.gc12) > header.major {
    display: flex;
    align-items: center;
    min-height: 47px;
    padding: 0 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--mux-color-black-12);
    background: var(--mux-bg-subtle);
}

body.modern-ux :where(.page-body .page-contents .pod.gc12) > header.major h1 {
    margin: 0;
    padding: 0;
    font-size: var(--mux-fs-20);
    font-weight: var(--fw-medium);
    line-height: 32px;
    letter-spacing: normal;
    color: var(--mux-color-on-surface);
}

body.modern-ux.medrio.dark :where(.page-body .page-contents .pod.gc12) > header.major {
    background: var(--muted, rgba(255, 255, 255, 0.05));
    border-bottom-color: var(--border, rgba(255, 255, 255, 0.12));
}

body.modern-ux.medrio.dark :where(.page-body .page-contents .pod.gc12) > header.major h1 {
    color: var(--text-primary, rgba(255, 255, 255, 0.95));
}

/* -------------------------------------------------------------------------
   Analyze — app/analyze/* (Analyze8.master .analyze-app wrapper + .pod)
   Title row, “Report” label (replaces legacy .white on gray header), filter h2,
   filter table copy, RadGrid matrix thead/body (Geist / DS tokens).
   ------------------------------------------------------------------------- */
body.modern-ux .analyze-app .pod > header.major {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    min-height: 47px;
    padding: 0 var(--space-4, 16px);
    box-sizing: border-box;
    border-bottom: 1px solid var(--border, var(--mux-color-black-12));
    background: var(--muted, #f5f5f5);
}

body.modern-ux .analyze-app .pod > header.major .floatLeft,
body.modern-ux .analyze-app .pod > header.major .floatRight {
    float: none;
}

/* DataExport.aspx — the header contains a .row.between-xs wrapper instead of bare children.
   When header is display:flex its child .row is a flex item that shrinks to content width,
   leaving no room for space-between to push the Download button to the right.
   Scoped to .de-* wrappers (de-Create / de-Edit / de-View) which are unique to DataExport. */
body.modern-ux .de-Create .pod > header.major > .row.between-xs,
body.modern-ux .de-Edit   .pod > header.major > .row.between-xs,
body.modern-ux .de-View   .pod > header.major > .row.between-xs {
    width: 100%;
}

/* DataExport.aspx — #divClearedData (.selection-control) has a fixed width (190px / 172px) and
   18px padding-right from the page's inline <style> block. The checkbox + label + info icon
   overflow that space, pushing the icon onto a new line.
   Fix: use ID specificity to remove the width cap and right padding, then lay out the inner div
   as a flex row with nowrap so all three elements stay on one line. */
body.modern-ux #divClearedData {
    width: auto !important;
    max-width: none !important;
    padding-right: 0 !important;
}

body.modern-ux #divClearedData > div {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: var(--space-1, 4px);
}

body.modern-ux #divClearedData > div > label.vert-align-middle {
    flex: 1 1 0;
    min-width: 0;
}

body.modern-ux #divClearedData > div > med-icon {
    flex-shrink: 0;
    align-self: flex-start;
}

body.modern-ux #divClearedData > div > input[type="checkbox"] {
    flex-shrink: 0;
}

/* DataExport.aspx — Selections column: each row is checkbox (+ optional ASP.NET span) + label + info.
   align-items:center centers the control against multi-line labels; use flex-start so the box aligns
   with the first line. nowrap keeps the row from breaking; label flexes with min-width:0 so words
   wrap inside the label. Covers Include Operational Data (span.operational-data) and Only Locked Data. */
body.modern-ux .de-Create .selection-element > div > div:not(.margin-bottom-12),
body.modern-ux .de-Edit .selection-element > div > div:not(.margin-bottom-12),
body.modern-ux .de-View .selection-element > div > div:not(.margin-bottom-12) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--space-1, 4px);
}

body.modern-ux .de-Create .selection-element > div > div:not(.margin-bottom-12) > label.vert-align-middle,
body.modern-ux .de-Edit .selection-element > div > div:not(.margin-bottom-12) > label.vert-align-middle,
body.modern-ux .de-View .selection-element > div > div:not(.margin-bottom-12) > label.vert-align-middle {
    flex: 1 1 0;
    min-width: 0;
}

body.modern-ux .de-Create .selection-element > div > div:not(.margin-bottom-12) > med-icon,
body.modern-ux .de-Edit .selection-element > div > div:not(.margin-bottom-12) > med-icon,
body.modern-ux .de-View .selection-element > div > div:not(.margin-bottom-12) > med-icon {
    flex-shrink: 0;
    align-self: flex-start;
}

body.modern-ux .de-Create .selection-element span.operational-data,
body.modern-ux .de-Edit .selection-element span.operational-data,
body.modern-ux .de-View .selection-element span.operational-data {
    display: inline-flex;
    align-items: flex-start;
    flex-shrink: 0;
}

body.modern-ux .de-Create .selection-element > div > div:not(.margin-bottom-12) > input[type="checkbox"],
body.modern-ux .de-Edit .selection-element > div > div:not(.margin-bottom-12) > input[type="checkbox"],
body.modern-ux .de-View .selection-element > div > div:not(.margin-bottom-12) > input[type="checkbox"] {
    flex-shrink: 0;
}

/* DataExport.aspx — Name/Description med-form-fields in #dvExportControls.
   med-form-field reserves a large subscript area (min-height + padding-top) for error
   messages, pushing the word-count hint far below the input even when no error exists.
   Collapse to natural hint height so the counter sits flush under the underline. */
body.modern-ux #dvExportControls .med-form-field-subscript-wrapper {
    padding-top: 2px;
    min-height: auto;
}

/* h1 — parity with body.modern-ux .page:has(.buildStudyContent) .pod.gc12 > header.major h1 */
body.modern-ux .analyze-app .pod > header.major h1 {
    margin: 0;
    padding: 0;
    font-size: var(--mux-fs-20);
    font-weight: var(--fw-medium);
    line-height: 32px;
    letter-spacing: normal;
    color: var(--mux-color-on-surface);
}

body.modern-ux .analyze-app .pod > header.major .floatRight {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

body.modern-ux .analyze-app .pod > header.major label.analyze-report-header-label {
    margin: 0;
    color: var(--text-secondary, rgba(0, 0, 0, 0.6)) !important;
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

body.modern-ux.medrio.dark .analyze-app .pod > header.major {
    background: var(--muted, rgba(255, 255, 255, 0.05));
    border-bottom-color: var(--border, rgba(255, 255, 255, 0.12));
}

body.modern-ux.medrio.dark .analyze-app .pod > header.major h1 {
    color: var(--text-primary, rgba(255, 255, 255, 0.95));
}

/* Dashboard.aspx — common.css .divDashboardLandingReport > header { width:300px; left:30px; height:20px } drew a tab-sized strip; undo for full-width .pod title row. */
body.modern-ux .analyze-app .mux-dashboard .divDashboardLandingReport.pod {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .analyze-app .mux-dashboard .divDashboardLandingReport.pod > header.major {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 47px;
    left: auto !important;
    right: auto;
    top: auto;
    position: relative;
    box-sizing: border-box;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

body.modern-ux .analyze-app .mux-dashboard .divDashboardLandingReport.pod > header.major h1 {
    margin: 0 !important;
}

body.modern-ux .page-contents:has(.mux-dashboard) {
    background-color: var(--mux-bg-app, #eeeeee) !important;
}

body.modern-ux .analyze-app .mux-dashboard .divLandingReport.body {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    top: 0 !important;
    left: 0 !important;
    align-items: stretch;
    align-content: flex-start;
    gap: var(--space-4, 16px);
    box-sizing: border-box;
}

body.modern-ux .analyze-app .mux-dashboard .divChartCard,
body.modern-ux .analyze-app .mux-dashboard .divMonitoringCard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: min(438px, 100%);
    max-width: 100%;
    height: auto;
    min-height: 325px;
    margin-left: 0 !important;
    flex: 1 1 min(380px, 100%);
    box-sizing: border-box;
}

body.modern-ux .analyze-app .mux-dashboard .divChartSubMask,
body.modern-ux .analyze-app .mux-dashboard .divMonitoringSubMask {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 436px;
    min-height: 323px;
    height: auto;
    flex: 1 1 auto;
    box-sizing: border-box;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.12)) !important;
    background-color: var(--card, #fff);
}

body.modern-ux.medrio.dark .analyze-app .mux-dashboard .divChartSubMask,
body.modern-ux.medrio.dark .analyze-app .mux-dashboard .divMonitoringSubMask {
    background-color: var(--card, var(--muted, rgba(255, 255, 255, 0.05)));
    border-color: var(--border, rgba(255, 255, 255, 0.12)) !important;
}

body.modern-ux .analyze-app .mux-dashboard .consentSummaryBarHead,
body.modern-ux .analyze-app .mux-dashboard .monitoringSummaryBarHead {
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    margin: var(--space-4, 16px) var(--space-4, 16px) var(--space-3, 12px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug);
    color: var(--text-secondary, rgba(0, 0, 0, 0.7)) !important;
}

body.modern-ux .analyze-app .mux-dashboard .monitoringSummaryBarHead {
    margin-bottom: 0;
}

body.modern-ux .analyze-app .mux-dashboard .consentSummaryBarHead h6,
body.modern-ux .analyze-app .mux-dashboard .monitoringSummaryBarHead h6 {
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

body.modern-ux.medrio.dark .analyze-app .mux-dashboard .consentSummaryBarHead,
body.modern-ux.medrio.dark .analyze-app .mux-dashboard .monitoringSummaryBarHead {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7)) !important;
}

body.modern-ux .analyze-app .mux-dashboard .pnlConsentReport {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 180px;
    box-sizing: border-box;
}

body.modern-ux .analyze-app .mux-dashboard #imgPieChart {
    position: relative;
    top: auto;
    display: block;
    width: min(396px, calc(100% - 40px));
    max-width: calc(100% - 40px);
    height: auto;
    margin: var(--space-3, 12px) var(--space-4, 16px) var(--space-2, 8px);
    flex: 1 1 auto;
    object-fit: contain;
    align-self: center;
}

body.modern-ux .analyze-app .mux-dashboard #btnView,
body.modern-ux .analyze-app .mux-dashboard #btnChartView {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    float: none;
    align-self: flex-end;
    margin-top: auto;
    margin-right: var(--space-2, 8px);
    margin-bottom: var(--space-2, 8px);
    font-family: var(--font-family, var(--mux-font-family));
}

body.modern-ux.medrio.dark .analyze-app .pod > header.major label.analyze-report-header-label {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7)) !important;
}

/* .body h2 — do not use #divFilters (ASP.NET ClientID prefix breaks id match) */
body.modern-ux .analyze-app .pod .body h2 {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-1125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-base);
    color: var(--text-primary, var(--mux-color-on-surface));
    margin: var(--space-4, 16px) 0 var(--space-3, 12px);
}

body.modern-ux .analyze-app .pod .body h2:first-of-type {
    margin-top: 0;
}

body.modern-ux.medrio.dark .analyze-app .pod .body h2 {
    color: var(--text-primary, rgba(255, 255, 255, 0.95));
}

body.modern-ux .analyze-app .pod table.layout.pad-right td,
body.modern-ux .analyze-app .pod table.layout.pad-right td span {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-normal);
    color: var(--text-primary, var(--mux-color-on-surface));
}

body.modern-ux.medrio.dark .analyze-app .pod table.layout.pad-right td,
body.modern-ux.medrio.dark .analyze-app .pod table.layout.pad-right td span {
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
}

body.modern-ux .analyze-app .pod table.matrix th,
body.modern-ux .analyze-app .pod .rgMasterTable th,
body.modern-ux .analyze-app .pod .matrix .rgClipCells th,
body.modern-ux .analyze-app .pod table.rgMasterTable th {
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--table-header-font-size, var(--mux-fs-14)) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-snug) !important;
    color: var(--gray-600, var(--text-secondary)) !important;
    vertical-align: middle !important;
}

body.modern-ux .analyze-app .pod table.matrix td {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-normal);
    vertical-align: middle !important;
}

/* RadGrid body cells in analyze pods — same midline as plain matrix (Monitor Summary, etc.) */
body.modern-ux .analyze-app .pod .rgMasterTable td,
body.modern-ux .analyze-app .pod table.rgMasterTable td,
body.modern-ux .analyze-app .pod .matrix .rgClipCells td {
    vertical-align: middle !important;
}

/*
 * Monitor Summary (and similar) — RadGrid first column: two icon .ds-btn-text links.
 * Legacy td width:45px + default .ds-btn horizontal padding stacks them; img align="left" adds float.
 * Scope with :has(...) only — plain-text first columns (e.g. Monitor Log Medrio ID) must stay table-cells;
 * display:flex on td breaks row height / vertical alignment vs other tds.
 */
body.modern-ux .analyze-app .pod [class*="RadGrid"] table.rgMasterTable td:first-child:has(a.ds-btn.ds-btn-text) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--space-1, 4px) !important;
    width: auto !important;
    min-width: 2.5rem !important;
    max-width: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

body.modern-ux .analyze-app .pod [class*="RadGrid"] table.rgMasterTable td:first-child:has(a.ds-btn.ds-btn-text) a.ds-btn.ds-btn-text {
    flex: 0 0 auto !important;
    padding: 0.125rem !important;
    min-height: 0 !important;
    height: auto !important;
    min-width: auto !important;
    width: auto !important;
    overflow: visible !important;
    align-self: center !important;
}

body.modern-ux .analyze-app .pod [class*="RadGrid"] table.rgMasterTable td:first-child:has(a.ds-btn.ds-btn-text) a.ds-btn.ds-btn-text img {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Chart filter tables (SubjDataGraph, Histogram, meanchart, …): “( Add … )” uses .ds-btn-text inside
   parentheses; global .ds-btn padding (0 16px) and 36px min-height add gaps beside ( ) and misalign
   vs selects. Tertiary links to SelectAVariables / ManageSubGroups only — not CopyToClipboard / export. */
body.modern-ux .analyze-app .pod table.layout:has(td a.ds-btn.ds-btn-text[href*="SelectAVariables.aspx"]) td,
body.modern-ux .analyze-app .pod table.layout:has(td a.ds-btn.ds-btn-text[href*="ManageSubGroups.aspx"]) td {
    vertical-align: middle;
}

/*body.modern-ux .analyze-app .pod table.layout td a.ds-btn.ds-btn-text[href*="SelectAVariables.aspx"],
body.modern-ux .analyze-app .pod table.layout td a.ds-btn.ds-btn-text[href*="ManageSubGroups.aspx"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}*/

body.modern-ux.medrio.dark .analyze-app .pod table.matrix th,
body.modern-ux.medrio.dark .analyze-app .pod .rgMasterTable th,
body.modern-ux.medrio.dark .analyze-app .pod .matrix .rgClipCells th,
body.modern-ux.medrio.dark .analyze-app .pod table.rgMasterTable th {
    color: var(--text-secondary, rgba(255, 255, 255, 0.78)) !important;
}

/* -------------------------------------------------------------------------
   Manage SPA (Angular) — Areas/Manage: Labs, Users, Roles, etc.
   Host: <manage-app> under body.modern-ux. Bridges Material + mc-* to DS tokens.
   ------------------------------------------------------------------------- */
body.modern-ux:has(manage-app) {
    background-color: var(--mux-bg-chrome, #eef3f6);
}

body.modern-ux manage-app {
    display: block;
    box-sizing: border-box;
    background-color: var(--mux-bg-chrome, #eef3f6);
    color: var(--text-primary, var(--mux-color-on-surface));
}

body.modern-ux manage-app content-body {
    box-sizing: border-box;
    /* FlexLayout sets a pixel height; cap to viewport so inner panes scroll instead of clipping */
    max-height: 100dvh;
}

body.modern-ux manage-app mc-list-toolbar mat-toolbar.mat-toolbar {
    background: var(--card, #ffffff) !important;
    color: var(--text-primary, var(--mux-color-on-surface)) !important;
    border-bottom: 1px solid var(--border, var(--mux-color-black-12));
    box-shadow: none;
}

body.modern-ux manage-app mc-list-toolbar h2 {
    margin: 0;
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-20);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: inherit;
}

body.modern-ux manage-app #lab-list mat-list.mat-list {
    background: var(--card, #ffffff);
    border-right: 1px solid var(--border, var(--mux-color-black-12));
}

body.modern-ux manage-app #lab-list .mat-list-item .mat-line {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-normal, 1.5);
}

body.modern-ux manage-app #lab-list .list-item-active {
    background-color: color-mix(in srgb, var(--mux-primary-main) 14%, transparent) !important;
}

body.modern-ux manage-app #lab-list .list-item-active .mat-line {
    color: var(--text-primary, var(--mux-color-on-surface));
}

/* Details column: attribute bg-gray-dark + #details-section (Labs, Users, Roles, …) */
body.modern-ux manage-app #details-section,
body.modern-ux manage-app [bg-gray-dark]#details-section {
    background: var(--muted, #f5f5f5) !important;
    border-left: 1px solid var(--border, var(--mux-color-black-08));
    box-sizing: border-box;
}

body.modern-ux manage-app .details-card.mat-card {
    background: var(--card, #ffffff) !important;
    color: var(--text-primary, var(--mux-color-on-surface));
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px var(--mux-color-black-08) !important;
    border: 1px solid var(--border, var(--mux-color-black-08));
    box-sizing: border-box;
    /* Room for 3px focus ring inside overflow-y:auto (Lab Details / Lab Tests cards) */
    padding-left: 12px;
    padding-right: 14px;
}

body.modern-ux manage-app #details-section .mat-tab-header {
    border-bottom-color: var(--border, var(--mux-color-black-12));
}

body.modern-ux manage-app #details-section .mat-ink-bar {
    background-color: var(--mux-primary-main) !important;
}

body.modern-ux manage-app #details-section .mat-tab-label:not(.mat-tab-disabled) {
    font-family: var(--font-family, var(--mux-font-family));
    font-weight: var(--fw-medium, 500);
    opacity: 1;
}

body.modern-ux manage-app #details-section .mat-tab-label-active {
    color: var(--mux-primary-main);
}

/* -------------------------------------------------------------------------
   Manage — Labs .details-card (lab-details, lab-tests): legacy mat-form-field →
   .ds-input + .ds-input-sm + add-labs focus (mux-color-border-focus + 0 0 0 3px #bcedff).
   Labels: same pattern as role-details-tab (floated above the box).
   ------------------------------------------------------------------------- */
body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) {
    margin-top: 0.625rem;
    overflow: visible !important;
    align-self: stretch;
    width: 100%;
}

body.modern-ux manage-app .details-card > mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):first-of-type {
    margin-top: 0;
}

/* Horizontal rows: no extra vertical margin on each cell */
body.modern-ux manage-app .details-card .row-container mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) {
    margin-top: 0;
    margin-bottom: 0;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-wrapper {
    margin-top: 1.25rem;
    overflow: visible;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-flex {
    align-items: stretch;
    overflow: visible;
    position: relative;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix {
    position: relative;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    width: 100%;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 1px solid var(--gray-600) !important;
    border-radius: var(--radius-md);
    background-color: var(--bg);
    box-shadow: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    overflow: visible;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):not(.mat-form-field-disabled):not(:focus-within):not(.mat-focused):hover .mat-form-field-infix {
    border-color: var(--text-primary) !important;
    background-color: var(--bg) !important;
    box-shadow: none !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):focus-within .mat-form-field-infix,
body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-focused .mat-form-field-infix {
    outline: none !important;
    border-color: var(--mux-color-border-focus) !important;
    background-color: var(--bg);
    box-shadow: 0 0 0 3px #bcedff !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-infix,
body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched .mat-form-field-infix {
    border-color: var(--color-error) !important;
    background-color: var(--mux-color-invalid-bg);
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid:focus-within .mat-form-field-infix,
body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched:focus-within .mat-form-field-infix {
    border-color: var(--color-error) !important;
    box-shadow: none !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled .mat-form-field-infix {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--gray-100) !important;
    border: 1px solid var(--gray-600) !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled:hover .mat-form-field-infix {
    cursor: not-allowed;
}

body.modern-ux.medrio.dark manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled .mat-form-field-infix {
    background-color: var(--mux-color-bg-disabled) !important;
    border-color: var(--mux-color-border) !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-underline,
body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-underline .mat-form-field-ripple {
    display: none !important;
    height: 0 !important;
    border: none !important;
    visibility: hidden !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label {
    color: var(--text-primary) !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    pointer-events: none;
    background-color: transparent !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-label,
body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-label span,
body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched .mat-form-field-label {
    color: var(--color-error) !important;
}

body.modern-ux.medrio.dark manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-label,
body.modern-ux.medrio.dark manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched .mat-form-field-label {
    color: var(--color-error) !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label-wrapper {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    top: 10px !important;
    width: auto !important;
    max-width: 100%;
    padding: 0 !important;
    overflow: visible;
    transform: translateY(calc(-100% - 4px)) !important;
    pointer-events: none;
    z-index: 2;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-should-float .mat-form-field-label,
body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label.mat-empty {
    transform: none !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix input.mat-input-element {
    position: relative;
    z-index: 3;
    flex: 1 1 auto !important;
    align-self: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled .mat-form-field-infix input.mat-input-element {
    opacity: 1 !important;
    cursor: not-allowed !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-subscript-wrapper .mat-error {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-error) !important;
}

body.modern-ux manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-hint {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

body.modern-ux.medrio.dark manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix {
    border-color: var(--border, rgba(255, 255, 255, 0.23)) !important;
    background-color: var(--mux-color-bg-paper, var(--gray-800)) !important;
}

body.modern-ux.medrio.dark manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):not(.mat-form-field-disabled):not(:focus-within):not(.mat-focused):hover .mat-form-field-infix {
    border-color: var(--text-primary, var(--mux-color-text-muted, var(--gray-400))) !important;
    background-color: var(--mux-color-bg-paper, var(--gray-800)) !important;
}

body.modern-ux.medrio.dark manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):focus-within .mat-form-field-infix,
body.modern-ux.medrio.dark manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-focused .mat-form-field-infix {
    outline: none !important;
    border-color: var(--mux-color-border-focus) !important;
    background-color: var(--mux-color-bg-paper, var(--gray-800)) !important;
    box-shadow: 0 0 0 3px #bcedff !important;
}

body.modern-ux.medrio.dark manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix input.mat-input-element {
    color: var(--mux-color-text, var(--gray-50)) !important;
    -webkit-text-fill-color: var(--mux-color-text, var(--gray-50)) !important;
}

body.modern-ux.medrio.dark manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-infix,
body.modern-ux.medrio.dark manage-app .details-card mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched .mat-form-field-infix {
    background-color: color-mix(in srgb, var(--color-error) 12%, var(--mux-color-bg-paper, var(--gray-800))) !important;
}

/* Toolbar icon actions: WCAG touch target minimum */
body.modern-ux manage-app mc-list-toolbar .mat-icon-button.mat-button-base,
body.modern-ux manage-app #lab-list .mat-icon-button.mat-button-base {
    min-width: var(--mux-touch-min, 44px);
    min-height: var(--mux-touch-min, 44px);
}

body.modern-ux manage-app mc-list-toolbar .mat-icon-button.mat-button-base:focus-visible,
body.modern-ux manage-app #lab-list .mat-icon-button.mat-button-base:focus-visible {
    outline: 2px solid var(--mux-color-border-focus, var(--mux-primary-main));
    outline-offset: 2px;
}

/* Dark — Manage SPA */
body.modern-ux.medrio.dark:has(manage-app) {
    background-color: var(--mux-color-bg, var(--gray-900));
}

body.modern-ux.medrio.dark manage-app {
    background-color: var(--mux-color-bg, var(--gray-900));
    color: var(--mux-color-text, var(--gray-50));
}

body.modern-ux.medrio.dark manage-app mc-list-toolbar mat-toolbar.mat-toolbar {
    background: var(--mux-color-bg-paper, var(--gray-800)) !important;
    color: var(--mux-color-text, var(--gray-50)) !important;
    border-bottom-color: var(--mux-color-divider, var(--gray-700)) !important;
}

body.modern-ux.medrio.dark manage-app #lab-list mat-list.mat-list {
    background: var(--mux-color-bg-paper, var(--gray-800)) !important;
    border-right-color: var(--mux-color-divider, var(--gray-700)) !important;
}

body.modern-ux.medrio.dark manage-app #lab-list .list-item-active {
    background-color: color-mix(in srgb, var(--mux-primary-main) 22%, var(--mux-color-bg-paper, var(--gray-800))) !important;
}

body.modern-ux.medrio.dark manage-app #lab-list .list-item-active .mat-line {
    color: var(--mux-color-text, var(--gray-50));
}

body.modern-ux.medrio.dark manage-app #details-section,
body.modern-ux.medrio.dark manage-app [bg-gray-dark]#details-section {
    background: var(--mux-color-bg-hover, var(--gray-800)) !important;
    border-left-color: var(--mux-color-divider, var(--gray-700)) !important;
}

body.modern-ux.medrio.dark manage-app .details-card.mat-card {
    background: var(--mux-color-bg-paper, var(--gray-800)) !important;
    color: var(--mux-color-text, var(--gray-50));
    border-color: var(--mux-color-divider, var(--gray-700));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

body.modern-ux.medrio.dark manage-app #details-section .mat-tab-header {
    border-bottom-color: var(--mux-color-divider, var(--gray-700));
}

body.modern-ux.medrio.dark manage-app #details-section .mat-tab-label {
    color: var(--mux-color-text-muted, var(--gray-300));
}

body.modern-ux.medrio.dark manage-app #details-section .mat-tab-label-active {
    color: var(--mux-primary-light, #9dd9ff);
}

body.modern-ux.medrio.dark manage-app .details-card .mat-input-element {
    color: var(--mux-color-text, var(--gray-50)) !important;
    caret-color: var(--mux-color-text, var(--gray-50));
}

body.modern-ux.medrio.dark manage-app .details-card .mat-form-field-label,
body.modern-ux.medrio.dark manage-app .details-card .mat-form-field-label span {
    color: var(--mux-color-text-muted, var(--gray-300)) !important;
}

body.modern-ux.medrio.dark manage-app .details-card .mat-hint {
    color: var(--mux-color-text-muted, var(--gray-300));
}

body.modern-ux.medrio.dark manage-app mc-list-toolbar .mat-icon:not([style*="color"]),
body.modern-ux.medrio.dark manage-app #lab-list .mat-icon:not([style*="color"]) {
    color: var(--mux-color-text-muted, var(--gray-300));
}

/* -------------------------------------------------------------------------
   Manage — Create Labs (add-labs): mat-form-field inputs → .ds-input + .ds-input-sm
   (same infix metrics as role-details-tab; focus: mux-color-border-focus + 0 0 0 3px #bcedff).
   External “Name” label; mat-error for duplicates.
   ------------------------------------------------------------------------- */
body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) {
    margin-top: 0.625rem;
    overflow: visible !important;
    align-self: flex-start;
    width: 100%;
}

body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-wrapper {
    padding-bottom: 1.375rem;
    overflow: visible;
}

body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-flex {
    align-items: stretch;
    overflow: visible;
    position: relative;
}

/* .ds-input + .ds-input-sm chrome on the infix (height 32px, pad 6px 12px, var(--bg)) */
body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix {
    position: relative;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    width: 100%;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 1px solid var(--gray-600) !important;
    border-radius: var(--radius-md);
    background-color: var(--bg);
    box-shadow: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    overflow: visible;
}

/* .ds-input:hover */
body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):not(.mat-form-field-disabled):not(:focus-within):not(.mat-focused):hover .mat-form-field-infix {
    border-color: var(--text-primary) !important;
    background-color: var(--bg) !important;
    box-shadow: none !important;
}

/* .ds-input:focus — border + glow (spec ring on infix) */
body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):focus-within .mat-form-field-infix,
body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-focused .mat-form-field-infix {
    outline: none !important;
    border-color: var(--mux-color-border-focus) !important;
    background-color: var(--bg);
    box-shadow: 0 0 0 3px #bcedff !important;
}

body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-infix,
body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched .mat-form-field-infix {
    border-color: var(--color-error) !important;
    background-color: var(--mux-color-invalid-bg);
}

body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid:focus-within .mat-form-field-infix,
body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched:focus-within .mat-form-field-infix {
    border-color: var(--color-error) !important;
    box-shadow: none !important;
}

body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled .mat-form-field-infix {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--gray-100) !important;
    border: 1px solid var(--gray-600) !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled:hover .mat-form-field-infix {
    cursor: not-allowed;
}

body.modern-ux.medrio.dark manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled .mat-form-field-infix {
    background-color: var(--mux-color-bg-disabled) !important;
    border-color: var(--mux-color-border) !important;
}

body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-underline,
body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-underline .mat-form-field-ripple {
    display: none !important;
    height: 0 !important;
    border: none !important;
    visibility: hidden !important;
}

/* Inner text — .ds-input-sm: .875rem / 1.5; .ds-input: font-family + color */
body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix input.mat-input-element {
    position: relative;
    z-index: 3;
    flex: 1 1 auto !important;
    align-self: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled .mat-form-field-infix input.mat-input-element {
    opacity: 1 !important;
    cursor: not-allowed !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

body.modern-ux manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-subscript-wrapper .mat-error {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-error) !important;
}

body.modern-ux.medrio.dark manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix {
    border-color: var(--border, rgba(255, 255, 255, 0.23)) !important;
    background-color: var(--mux-color-bg-paper, var(--gray-800)) !important;
}

body.modern-ux.medrio.dark manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):not(.mat-form-field-disabled):not(:focus-within):not(.mat-focused):hover .mat-form-field-infix {
    border-color: var(--text-primary, var(--mux-color-text-muted, var(--gray-400))) !important;
    background-color: var(--mux-color-bg-paper, var(--gray-800)) !important;
}

body.modern-ux.medrio.dark manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):focus-within .mat-form-field-infix,
body.modern-ux.medrio.dark manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-focused .mat-form-field-infix {
    outline: none !important;
    border-color: var(--mux-color-border-focus) !important;
    background-color: var(--mux-color-bg-paper, var(--gray-800)) !important;
    box-shadow: 0 0 0 3px #bcedff !important;
}

body.modern-ux.medrio.dark manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix input.mat-input-element {
    color: var(--mux-color-text, var(--gray-50)) !important;
    -webkit-text-fill-color: var(--mux-color-text, var(--gray-50)) !important;
}

body.modern-ux.medrio.dark manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-infix,
body.modern-ux.medrio.dark manage-app add-labs mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched .mat-form-field-infix {
    background-color: color-mix(in srgb, var(--color-error) 12%, var(--mux-color-bg-paper, var(--gray-800))) !important;
}

/* Create Labs — .bulk-add-box shell = .ds-card (Phase D; canonical 04a03c3e… / body.modern-ux .ds-card) */
body.modern-ux manage-app add-labs .bulk-add-box {
    background-color: var(--bg-paper);
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    overflow: visible;
    max-height: none;
}

body.modern-ux.medrio.dark manage-app add-labs .bulk-add-box {
    background-color: var(--mux-color-bg-paper);
    border-color: var(--mux-color-divider);
}

/* Inner padding absorbed by card; avoid double gutter vs component % padding */
body.modern-ux manage-app add-labs .lab-entry-section {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    height: auto;
}

/* Header row — rhythm like .ds-card-header (title + actions) */
body.modern-ux manage-app add-labs .lab-entry-section > div:first-child {
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

/* Title — .ds-h5 */
body.modern-ux manage-app add-labs .create-lab-header {
    font-family: var(--mux-font-family);
    color: var(--foreground);
    font-size: var(--mux-fs-rem-125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    letter-spacing: -0.02em;
    margin: 0;
}

/* “Name” label row — .ds-caption tone */
body.modern-ux manage-app add-labs .name-row {
    margin-top: 0;
    margin-bottom: var(--space-2);
    font-size: var(--mux-fs-rem-75);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    color: var(--text-secondary);
}

body.modern-ux.medrio.dark manage-app add-labs .name-row {
    color: var(--mux-color-text-muted, var(--gray-300));
}

body.modern-ux manage-app add-labs .image-section {
    margin-top: var(--space-4);
    padding-left: 0;
    padding-right: 0;
}

/* Scrollport (.lab-name-section) has overflow-y:auto — box-shadow on .mat-form-field-infix needs horizontal inset or the ring clips (esp. left). */
body.modern-ux manage-app add-labs .lab-name-section {
    padding-top: 4px;
    padding-bottom: 12px;
    padding-left: 6px;
    padding-right: 12px;
    box-sizing: border-box;
}

body.modern-ux manage-app add-labs .lab-name-section > div {
    margin-bottom: 6px;
}

/* -------------------------------------------------------------------------
   Labs — Reference range slide panel (CDK overlay, outside <manage-app>)
   ref-range-details.component.scss sets .ng-star-inserted { padding-top: 10px }
   which hits mat-form-field internals and breaks legacy Material layout.
   Also: section h2 + mat-form-field duplicate the same text (hide field label).
   ------------------------------------------------------------------------- */
body.modern-ux ref-range-slide-panel .main-panel {
    background-color: var(--background, #ffffff);
    color: var(--foreground, var(--mux-color-on-surface));
}

body.modern-ux ref-range-slide-panel .toolbar.mat-toolbar.bbg,
body.modern-ux ref-range-slide-panel mat-toolbar.toolbar {
    background: var(--muted, #f5f5f5) !important;
    color: var(--foreground, var(--mux-color-on-surface)) !important;
    border-bottom: 1px solid var(--border, var(--mux-color-black-12));
    box-shadow: none;
}

body.modern-ux ref-range-slide-panel .variable-title {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-1125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    margin: 0;
}

/* Undo ref-range-details .ng-star-inserted padding inside Material fields (root cause of “broken” inputs) */
body.modern-ux ref-range-slide-panel mat-form-field.mat-form-field,
body.modern-ux ref-range-slide-panel mat-form-field.mat-form-field .ng-star-inserted,
body.modern-ux ref-range-slide-panel mat-form-field.mat-form-field .mat-form-field-wrapper,
body.modern-ux ref-range-slide-panel mat-form-field.mat-form-field .mat-form-field-flex,
body.modern-ux ref-range-slide-panel mat-form-field.mat-form-field .mat-form-field-infix,
body.modern-ux ref-range-slide-panel mat-form-field.mat-form-field .mat-form-field-subscript-wrapper,
body.modern-ux ref-range-slide-panel mat-form-field.mat-form-field .mat-form-field-underline {
    padding-top: 0 !important;
}

body.modern-ux ref-range-slide-panel mat-form-field.mat-form-field .mat-form-field-subscript-wrapper .ng-star-inserted {
    padding-top: 0 !important;
}

/* Keep toolbar / list structure un-padded by the same overly broad rule */
body.modern-ux ref-range-slide-panel mat-toolbar .ng-star-inserted,
body.modern-ux ref-range-slide-panel #ref-list header .ng-star-inserted,
body.modern-ux ref-range-slide-panel mat-list .mat-list-item .ng-star-inserted {
    padding-top: 0 !important;
}

/* Boxed mat-select: label chip background should match panel, not generic --card mismatch */
body.modern-ux ref-range-slide-panel mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label {
    background-color: var(--background, #ffffff) !important;
}

/* Duplicate section title + floating label (“Lab Test Unit”, “LOINC”, “Range Determinants”) */
body.modern-ux ref-range-slide-panel ref-range-details h2.bold + mat-form-field.mat-form-field-appearance-legacy .mat-form-field-label-wrapper {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

body.modern-ux ref-range-slide-panel ref-range-details h2.bold + mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy .mat-form-field-infix {
    border-top: 0 none !important;
    padding-top: 0.25rem !important;
}

body.modern-ux ref-range-slide-panel ref-range-details h2.bold + mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy .mat-form-field-infix {
    margin-top: 0 !important;
}

/* Range value row: keep numeric fields compact; underline follows control width */
body.modern-ux ref-range-slide-panel numeric-ref-range-editor mat-form-field.mat-form-field-type-mat-input {
    max-width: 100%;
}

body.modern-ux ref-range-slide-panel numeric-ref-range-editor .mat-form-field-underline {
    width: 100%;
}

body.modern-ux ref-range-slide-panel ref-range-details h2.bold {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--foreground, var(--mux-color-on-surface));
    margin-top: var(--space-2, 8px);
    margin-bottom: var(--space-2, 8px);
}

body.modern-ux ref-range-slide-panel ref-range-details h2.bold:first-of-type {
    margin-top: 0;
}

body.modern-ux ref-range-slide-panel .mat-icon-button.mat-button-base:focus-visible {
    outline: 2px solid var(--mux-color-border-focus, var(--mux-primary-main));
    outline-offset: 2px;
}

body.modern-ux ref-range-slide-panel .add-ref-range-button.mat-icon-button,
body.modern-ux ref-range-slide-panel #save-ref-range,
body.modern-ux ref-range-slide-panel mat-toolbar .mat-icon-button {
    min-width: var(--mux-touch-min, 44px);
    min-height: var(--mux-touch-min, 44px);
}

/* Dark — slide panel (overlay inherits body.modern-ux.medrio.dark tokens) */
body.modern-ux.medrio.dark ref-range-slide-panel .main-panel {
    background-color: var(--mux-color-bg-paper, var(--gray-800));
    color: var(--mux-color-text, var(--gray-50));
}

body.modern-ux.medrio.dark ref-range-slide-panel .toolbar.mat-toolbar.bbg,
body.modern-ux.medrio.dark ref-range-slide-panel mat-toolbar.toolbar {
    background: var(--mux-color-bg, var(--gray-900)) !important;
    color: var(--mux-color-text, var(--gray-50)) !important;
    border-bottom-color: var(--mux-color-divider, var(--gray-700)) !important;
}

body.modern-ux.medrio.dark ref-range-slide-panel mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label {
    background-color: var(--mux-color-bg-paper, var(--gray-800)) !important;
    color: var(--mux-color-text-muted, var(--gray-300)) !important;
}

body.modern-ux.medrio.dark ref-range-slide-panel mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) input.mat-input-element {
    color: var(--mux-color-text, var(--gray-50)) !important;
    caret-color: var(--mux-color-text, var(--gray-50));
}

body.modern-ux.medrio.dark ref-range-slide-panel mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label,
body.modern-ux.medrio.dark ref-range-slide-panel mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label span {
    color: var(--mux-color-text-muted, var(--gray-300)) !important;
}

body.modern-ux.medrio.dark ref-range-slide-panel ref-range-details h2.bold {
    color: var(--mux-color-text, var(--gray-50));
}

body.modern-ux.medrio.dark ref-range-slide-panel .mat-divider {
    border-top-color: var(--mux-color-divider, var(--gray-700));
}

body.modern-ux.medrio.dark ref-range-slide-panel #ref-list mat-list.mat-list,
body.modern-ux.medrio.dark ref-range-slide-panel #ref-list header.bbg {
    background: var(--mux-color-bg-paper, var(--gray-800)) !important;
}

body.modern-ux.medrio.dark ref-range-slide-panel #ref-list .list-item-active {
    background-color: color-mix(in srgb, var(--mux-primary-main) 18%, var(--mux-color-bg-paper, var(--gray-800))) !important;
}

/* config/epro toolbar row: align title + mat-select vertically */
body.modern-ux [mc-toolbar-title][fxlayout="row"] {
    display: flex;
    align-items: center !important;
}

body.modern-ux [mc-toolbar-title][fxlayout="row"] h1 {
    margin: 0 !important;
    align-self: center !important;
}

body.modern-ux [mc-toolbar-title][fxlayout="row"] mat-form-field.mat-form-field {
    margin: 0 10px !important;
    align-self: center !important;
}

/* Angular legacy mat-form-field reserves hint/error space; remove in toolbar context */
body.modern-ux [mc-toolbar-title][fxlayout="row"] mat-form-field.mat-form-field .mat-form-field-wrapper {
    padding-bottom: 0 !important;
}

body.modern-ux [mc-toolbar-title][fxlayout="row"] mat-form-field.mat-form-field .mat-form-field-subscript-wrapper {
    display: none !important;
}

body.modern-ux [mc-toolbar-title][fxlayout="row"] mat-form-field.mat-form-field .mat-form-field-infix {
    top: 0 !important;
}

body.modern-ux .page:has(.buildStudyContent) #SubPageContent.body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Match Angular configure shell: sidebar + main chrome share #eef3f6 (overrides master #SubPageContent #cde3fa) */
    background: var(--mux-bg-chrome);
    margin: 0 !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

body.modern-ux .buildStudyContent {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    /* common.css sets white — use same chrome as .leftTabContainer / Angular body-background */
    background: var(--mux-bg-chrome);
}

body.modern-ux .buildStudyContent > .SubPageSubPanel.no-border {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.modern-ux .buildStudyContent #section2 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--mux-bg-chrome);
}

body.modern-ux .buildStudyContent #section1 {
    flex: 1 1 auto;
    /* Master sets inline display:block when shown — must win for column flex + full-height rail */
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    position: relative;
    background: var(--background);
}

/* Legacy spacer between absolute rail and .leftTabBody — would block flex growth */
body.modern-ux .buildStudyContent #section1 > br {
    display: none;
}

/* Configure / edit-*.aspx — collapse left rail (parity with Angular config .sidebar-icon: fixed chip + mat-icon-button) */
body.modern-ux .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon {
    position: fixed;
    bottom: 15px;
    left: 160px;
    z-index: 99;
    height: 40px;
    width: 40px;
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    transition: left 0.3s, transform 150ms 150ms;
    pointer-events: none;
    line-height: 0;
}

body.modern-ux.mux-aspx-config-nav-collapsed .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon {
    left: 15px;
}

body.modern-ux.medrio.dark .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon,
body.modern-ux.dark .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon {
    background-color: rgba(40, 40, 40, 0.65);
}

/* Mirrors Angular Material mat-icon-button.mat-button-base (flat 40×40, circular hover ink) */
body.modern-ux .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle {
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    line-height: 40px;
    border: none;
    border-radius: 50%;
    color: rgba(0, 0, 0, 0.54);
    cursor: pointer;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}

body.modern-ux .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle .mat-button-wrapper {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    line-height: 0;
}

body.modern-ux .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle .material-icons.mat-icon {
    font-size: 24px;
    width: 24px;
    height: 24px;
    line-height: 24px;
}

body.modern-ux .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle .mat-button-ripple,
body.modern-ux .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle .mat-button-focus-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    pointer-events: none;
    box-sizing: border-box;
}

body.modern-ux .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle .mat-button-focus-overlay {
    background: #000;
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.35, 0, 0.25, 1);
}

body.modern-ux .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle:hover:not(:disabled) .mat-button-focus-overlay {
    opacity: 0.04;
}

body.modern-ux .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle:focus-visible {
    outline: none;
}

body.modern-ux .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle:focus-visible .mat-button-focus-overlay {
    opacity: 0.12;
}

body.modern-ux.medrio.dark .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle,
body.modern-ux.dark .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle {
    color: rgba(255, 255, 255, 0.7);
}

body.modern-ux.medrio.dark .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle .mat-button-focus-overlay,
body.modern-ux.dark .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle .mat-button-focus-overlay {
    background: #fff;
}

body.modern-ux.medrio.dark .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle:hover:not(:disabled) .mat-button-focus-overlay,
body.modern-ux.dark .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle:hover:not(:disabled) .mat-button-focus-overlay {
    opacity: 0.08;
}

body.modern-ux.medrio.dark .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle:focus-visible .mat-button-focus-overlay,
body.modern-ux.dark .buildStudyContent #section1 .sidebar-icon.mux-aspx-config-sidebar-icon button.mat-icon-button.mat-button-base.mux-aspx-config-nav-toggle:focus-visible .mat-button-focus-overlay {
    opacity: 0.12;
}

body.modern-ux.mux-aspx-config-nav-collapsed .buildStudyContent .leftTabContainer {
    display: none !important;
}

body.modern-ux.mux-aspx-config-nav-collapsed .buildStudyContent .leftTabBody {
    margin-left: 0 !important;
}

/* -------------------------------------------------------------------------
   ReorderableListbox.ascx — edit_forms_list_reorderforms.aspx, edit_visit_ReorderForms.aspx
   Single light “brand” frame around list + arrow strip; no per-cell chrome; compact hit targets.
   (Markup: table.mux-reorder-listbox / id *_tblContainer — inline td styles overridden here only.)
   ------------------------------------------------------------------------- */
body.modern-ux table.mux-reorder-listbox,
body.modern-ux table[id$="_tblContainer"] {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(70, 185, 255, 0.42);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-sizing: border-box;
    background: var(--input-background, #fff);
}

body.modern-ux table.mux-reorder-listbox td[rowspan],
body.modern-ux table[id$="_tblContainer"] td[rowspan] {
    vertical-align: top;
    padding: 0 !important;
    margin: 0;
    border: none !important;
    background: var(--input-background, #fff);
}

/* List fills left cell; border comes from table — avoids “double frame” vs arrow column */
body.modern-ux table.mux-reorder-listbox td[rowspan] select,
body.modern-ux table[id$="_tblContainer"] td[rowspan] select {
    display: block;
    border: none !important;
    border-radius: 0 !important;
    outline: none;
    box-shadow: none !important;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    background: var(--input-background, #fff) !important;
    color: var(--text-primary, var(--foreground));
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-snug);
    padding: 6px 8px !important;
    min-height: 9rem !important;
    height: auto !important;
}

body.modern-ux table.mux-reorder-listbox td[rowspan] select[multiple],
body.modern-ux table[id$="_tblContainer"] td[rowspan] select[multiple] {
    min-height: 9rem !important;
    padding: 6px 8px !important;
}

/* Strong selection = mock “primary” block (scoped so global pale :checked stays elsewhere) */
body.modern-ux table.mux-reorder-listbox select option,
body.modern-ux table[id$="_tblContainer"] select option {
    padding: 0.35rem 0.5rem;
}

body.modern-ux table.mux-reorder-listbox select option:checked,
body.modern-ux table[id$="_tblContainer"] select option:checked {
    background-color: var(--mux-primary-main) !important;
    color: #000 !important;
    font-weight: var(--fw-medium);
}

body.modern-ux table.mux-reorder-listbox select option:hover,
body.modern-ux table[id$="_tblContainer"] select option:hover {
    background-color: rgba(70, 185, 255, 0.14) !important;
    color: var(--foreground) !important;
}

body.modern-ux table.mux-reorder-listbox select[multiple]:focus option:checked,
body.modern-ux table.mux-reorder-listbox select[multiple]:focus-within option:checked,
body.modern-ux table[id$="_tblContainer"] select[multiple]:focus option:checked,
body.modern-ux table[id$="_tblContainer"] select[multiple]:focus-within option:checked {
    background-color: var(--mux-primary-main) !important;
    color: #000 !important;
}

body.modern-ux.medrio.dark table.mux-reorder-listbox,
body.modern-ux.medrio.dark table[id$="_tblContainer"] {
    border-color: rgba(70, 185, 255, 0.38);
    background: var(--card, rgba(255, 255, 255, 0.04));
}

body.modern-ux.medrio.dark table.mux-reorder-listbox td[rowspan],
body.modern-ux.medrio.dark table[id$="_tblContainer"] td[rowspan],
body.modern-ux.medrio.dark table.mux-reorder-listbox td[rowspan] select,
body.modern-ux.medrio.dark table[id$="_tblContainer"] td[rowspan] select {
    background: var(--card, rgba(255, 255, 255, 0.03)) !important;
}

body.modern-ux.medrio.dark table.mux-reorder-listbox select option:checked,
body.modern-ux.medrio.dark table[id$="_tblContainer"] select option:checked,
body.modern-ux.medrio.dark table.mux-reorder-listbox select[multiple]:focus option:checked,
body.modern-ux.medrio.dark table.mux-reorder-listbox select[multiple]:focus-within option:checked,
body.modern-ux.medrio.dark table[id$="_tblContainer"] select[multiple]:focus option:checked,
body.modern-ux.medrio.dark table[id$="_tblContainer"] select[multiple]:focus-within option:checked {
    background-color: var(--mux-primary-main) !important;
    color: #fff !important;
}

/* One gray strip: no row borders; only a hairline between list and controls */
body.modern-ux table.mux-reorder-listbox td:not([rowspan]),
body.modern-ux table[id$="_tblContainer"] td:not([rowspan]) {
    position: relative;
    background-color: var(--gray-100) !important;
    border: none !important;
    border-left: 1px solid var(--mux-color-black-12) !important;
    padding: 0 2px !important;
    width: 28px !important;
    min-width: 26px !important;
    max-width: 32px;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 0 !important;
}

/*
 * Legacy go-*.png icons carry heavy drop shadows; keep <img> for hit target + onclick, hide visually.
 * Flat Material-style glyphs (SVG data-URI) — no skeuomorphic chrome.
 */
body.modern-ux table.mux-reorder-listbox td:not([rowspan]) img,
body.modern-ux table[id$="_tblContainer"] td:not([rowspan]) img {
    display: block;
    margin: 0 auto;
    padding: 0;
    width: 100% !important;
    height: 17px !important;
    min-height: 17px !important;
    max-width: none;
    object-fit: contain;
    cursor: pointer;
    opacity: 0;
    position: relative;
    z-index: 2;
}

body.modern-ux table.mux-reorder-listbox tr:nth-child(1) td:not([rowspan])::after,
body.modern-ux table[id$="_tblContainer"] tr:nth-child(1) td:not([rowspan])::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 1;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234B5563' d='M8 11l4-4 4 4h-2.5V19h-3v-8H8zM8 4h8v2H8V4z'/%3E%3C/svg%3E");
}

body.modern-ux table.mux-reorder-listbox tr:nth-child(2) td:not([rowspan])::after,
body.modern-ux table[id$="_tblContainer"] tr:nth-child(2) td:not([rowspan])::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 1;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234B5563' d='M7%2014l5-5%205%205z'/%3E%3C/svg%3E");
}

body.modern-ux table.mux-reorder-listbox tr:nth-child(3) td:not([rowspan])::after,
body.modern-ux table[id$="_tblContainer"] tr:nth-child(3) td:not([rowspan])::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 1;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234B5563' d='M7%2010l5%205%205-5z'/%3E%3C/svg%3E");
}

body.modern-ux table.mux-reorder-listbox tr:nth-child(4) td:not([rowspan])::after,
body.modern-ux table[id$="_tblContainer"] tr:nth-child(4) td:not([rowspan])::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 1;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234B5563' d='M16 13h-2.5V5h-3v8H8l4 4 4-4zM8 19h8v-2H8z'/%3E%3C/svg%3E");
}

body.modern-ux:not(.medrio.dark) table.mux-reorder-listbox td:not([rowspan]):hover::after,
body.modern-ux:not(.medrio.dark) table[id$="_tblContainer"] td:not([rowspan]):hover::after {
    filter: brightness(0.45);
}

body.modern-ux.medrio.dark table.mux-reorder-listbox td:not([rowspan]),
body.modern-ux.medrio.dark table[id$="_tblContainer"] td:not([rowspan]) {
    background-color: var(--muted, rgba(255, 255, 255, 0.07)) !important;
    border-left-color: var(--border, rgba(255, 255, 255, 0.12)) !important;
}

body.modern-ux.medrio.dark table.mux-reorder-listbox tr:nth-child(1) td:not([rowspan])::after,
body.modern-ux.medrio.dark table.mux-reorder-listbox tr:nth-child(2) td:not([rowspan])::after,
body.modern-ux.medrio.dark table.mux-reorder-listbox tr:nth-child(3) td:not([rowspan])::after,
body.modern-ux.medrio.dark table.mux-reorder-listbox tr:nth-child(4) td:not([rowspan])::after,
body.modern-ux.medrio.dark table[id$="_tblContainer"] tr:nth-child(1) td:not([rowspan])::after,
body.modern-ux.medrio.dark table[id$="_tblContainer"] tr:nth-child(2) td:not([rowspan])::after,
body.modern-ux.medrio.dark table[id$="_tblContainer"] tr:nth-child(3) td:not([rowspan])::after,
body.modern-ux.medrio.dark table[id$="_tblContainer"] tr:nth-child(4) td:not([rowspan])::after {
    filter: brightness(0) invert(1);
    opacity: 0.72;
}

body.modern-ux.medrio.dark table.mux-reorder-listbox tr:nth-child(1) td:not([rowspan]):hover::after,
body.modern-ux.medrio.dark table.mux-reorder-listbox tr:nth-child(2) td:not([rowspan]):hover::after,
body.modern-ux.medrio.dark table.mux-reorder-listbox tr:nth-child(3) td:not([rowspan]):hover::after,
body.modern-ux.medrio.dark table.mux-reorder-listbox tr:nth-child(4) td:not([rowspan]):hover::after,
body.modern-ux.medrio.dark table[id$="_tblContainer"] tr:nth-child(1) td:not([rowspan]):hover::after,
body.modern-ux.medrio.dark table[id$="_tblContainer"] tr:nth-child(2) td:not([rowspan]):hover::after,
body.modern-ux.medrio.dark table[id$="_tblContainer"] tr:nth-child(3) td:not([rowspan]):hover::after,
body.modern-ux.medrio.dark table[id$="_tblContainer"] tr:nth-child(4) td:not([rowspan]):hover::after {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* -------------------------------------------------------------------------
   Edit form RadWindow popups — EditFormPopUpMaster.master
   Footer: .mux-popup-footer-actions = primary (optional PlaceHolder) + .button-container (Cancel).
   Copy Variables (.mux-copy-variables) keeps its own grid below.
   Scroll: prefer scrolling inside .popupContainer vs the iframe edge when content is tall.
   ------------------------------------------------------------------------- */
body.modern-ux .popupContainer:not(:has(.mux-copy-variables)) {
    box-sizing: border-box;
    padding: 8px 10px 10px !important;
    max-height: min(72vh, 100%);
    overflow-x: hidden;
    overflow-y: auto;
}

body.modern-ux .popupContainer:not(:has(.mux-copy-variables)) > .mux-popup-footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    gap: 12px;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* Primary (Add/Save) + Cancel: same cross-axis center (LinkButton vs .action.button often differ in line-box / padding). */
body.modern-ux .popupContainer:not(:has(.mux-copy-variables)) > .mux-popup-footer-actions > * {
    align-self: center;
}

body.modern-ux .popupContainer:not(:has(.mux-copy-variables)) > .mux-popup-footer-actions .button-container {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
    max-width: 100%;
    min-height: 0 !important;
}

body.modern-ux .popupContainer:not(:has(.mux-copy-variables)) > .mux-popup-footer-actions .button-container a {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    line-height: var(--lh-snug, 1.25) !important;
}

body.modern-ux .popupContainer:not(:has(.mux-copy-variables)) > .mux-popup-footer-actions a.action.button,
body.modern-ux .popupContainer:not(:has(.mux-copy-variables)) > .mux-popup-footer-actions a.button.action {
    margin: 0;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
}

body.modern-ux .popupContainer:not(:has(.mux-copy-variables)) > .mux-popup-footer-actions med-button {
    align-self: center !important;
    display: inline-flex !important;
}

/* -------------------------------------------------------------------------
   Edit-form RadWindow popups (EditFormPopUpMaster) — primary LinkButton before .mux-popup-footer-actions:
   stack primary above Cancel and left-align both. Applies when the primary is a direct child of
   .popupContainer (same pattern as legacy markup).
   • add_text.aspx — btnAddText (AddFormTextControl.ascx only).
   • add_library.aspx — btnAddVars (TemplateFormVarSelectorControl.ascx only).
   • arrange_reorder.aspx — ReorderableListbox: table.mux-reorder-listbox + btnSave (Save above Cancel).
   • add_custom.aspx — MultiVariableControl.ascx: bottom Add in div#spnAddButton (btnAdd) then Cancel.
   Not used: add_copy (grid footer), add_calculated (dedicated block), arrange_cattable (Create + footer
   rules elsewhere).
   ------------------------------------------------------------------------- */
body.modern-ux .popupContainer:has(> a[id*="btnAddText"]),
body.modern-ux .popupContainer:has(> a[id*="btnAddVars"]),
body.modern-ux .popupContainer:has(> table.mux-reorder-listbox):has(> a[id*="btnSave"]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.modern-ux .popupContainer:has(> a[id*="btnAddText"]) > a[id*="btnAddText"],
body.modern-ux .popupContainer:has(> a[id*="btnAddVars"]) > a[id*="btnAddVars"],
body.modern-ux .popupContainer:has(> table.mux-reorder-listbox):has(> a[id*="btnSave"]) > a[id*="btnSave"] {
    align-self: flex-start;
    float: none !important;
    clear: both;
    margin-top: 8px;
}

body.modern-ux .popupContainer:has(> a[id*="btnAddText"]) > .mux-popup-footer-actions,
body.modern-ux .popupContainer:has(> a[id*="btnAddVars"]) > .mux-popup-footer-actions,
body.modern-ux .popupContainer:has(> table.mux-reorder-listbox):has(> a[id*="btnSave"]) > .mux-popup-footer-actions {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
    clear: both;
}

body.modern-ux .popupContainer:has(> a[id*="btnAddText"]) > .mux-popup-footer-actions .button-container,
body.modern-ux .popupContainer:has(> a[id*="btnAddVars"]) > .mux-popup-footer-actions .button-container,
body.modern-ux .popupContainer:has(> table.mux-reorder-listbox):has(> a[id*="btnSave"]) > .mux-popup-footer-actions .button-container {
    align-self: flex-start;
}

/* add_custom.aspx — MultiVariableControl.ascx: primary Add is inside div#spnAddButton (not a direct
   child <a>), so it is excluded from the rules above. Match bottom Add + Cancel to the same vertical
   rhythm and left alignment. */
body.modern-ux .popupContainer:has(> div[id*="spnAddButton"]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Top “Add” is a direct child <a>; with align-items:stretch it was stretching to full width — keep it
   content-sized like other primary actions. */
body.modern-ux .popupContainer:has(> div[id*="spnAddButton"]) > a[id*="btnAddTop"] {
    align-self: flex-start;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .popupContainer:has(> div[id*="spnAddButton"]) > div[id*="spnAddButton"] {
    align-self: flex-start;
    float: none !important;
    clear: both;
    margin-top: 8px;
}

body.modern-ux .popupContainer:has(> div[id*="spnAddButton"]) > div[id*="spnAddButton"] a[id*="btnAdd"] {
    float: none !important;
}

body.modern-ux .popupContainer:has(> div[id*="spnAddButton"]) > .mux-popup-footer-actions {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
    clear: both;
}

body.modern-ux .popupContainer:has(> div[id*="spnAddButton"]) > .mux-popup-footer-actions .button-container {
    align-self: flex-start;
}

/* -------------------------------------------------------------------------
   form_popups/add_calculated.aspx — CalculatedVariableControl.ascx (Add Calculated Variable)
   “Test formula and save” must stack above footer Cancel; hook #POSTFIX_CALC_VAR_USE_CODED is unique to this ascx.
   ------------------------------------------------------------------------- */
body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Aligns with legacy .calcVarNameLabel/.calcVarValue (120px + gap) without float + magic 125px margin. */
    --mux-calcvar-label-w: 9.25rem;
    --mux-calcvar-field-gap: 12px;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) > h1 {
    margin: 0 0 12px;
    font-size: var(--mux-fs-rem-125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug, 1.25);
    color: var(--foreground);
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) .msg-container {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px var(--mux-calcvar-field-gap);
    padding-bottom: 10px;
    box-sizing: border-box;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) .msg-container .FormFieldLabelFloat.calcVarNameLabel {
    float: none;
    width: var(--mux-calcvar-label-w);
    flex: 0 0 var(--mux-calcvar-label-w);
    max-width: 42%;
    padding-right: 0;
    text-align: right;
    line-height: var(--lh-snug, 1.25);
    color: var(--foreground);
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) .msg-container > input:not([type="hidden"]),
body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) .msg-container > select {
    flex: 1 1 min(0, 100%);
    min-width: 0;
    max-width: 100%;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) .calcVarValue {
    float: none;
    margin: 0 0 10px 0;
    padding-left: calc(var(--mux-calcvar-label-w) + var(--mux-calcvar-field-gap));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px var(--mux-calcvar-field-gap);
    box-sizing: border-box;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) .calcVarValue > select {
    flex: 1 1 min(12rem, 100%);
    min-width: 0;
    max-width: 100%;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) .calcVarValue input[type="checkbox"] {
    flex: 0 0 auto;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) textarea[id*="txtFormula"] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 4px 0 10px;
    padding: 10px 12px;
    font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
    font-size: var(--mux-fs-rem-875);
    line-height: 1.45;
    border: 1px solid var(--mux-color-divider);
    border-radius: var(--radius);
    background-color: var(--muted) !important;
    color: var(--foreground);
    resize: vertical;
    min-height: 8.5rem;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) textarea[id*="txtFormula"]:focus-visible {
    outline: none;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) [id*="PnlEvaluator"] {
    margin-top: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) table[id*="GVEvalVars"] {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 8px 0 0;
}

/* GridView emits a spacer header row (&nbsp; th cells) — hide for cleaner layout. */
body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) table[id*="GVEvalVars"] tbody > tr:first-child {
    display: none;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) table[id*="GVEvalVars"] td {
    padding: 6px 8px 6px 0;
    vertical-align: middle;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) table[id*="GVEvalVars"] td:first-child {
    white-space: nowrap;
    padding-right: 10px;
}

body.modern-ux.medrio.dark .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) textarea[id*="txtFormula"] {
    background-color: var(--muted) !important;
    border-color: var(--border);
    color: var(--foreground);
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) > .mux-popup-footer-actions {
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 0;
    clear: both;
}

/* Primary Save (LinkButton btnAddVar) — footer or still under PnlEvaluator if relocate failed.
   Global a.button.action uses overflow:hidden; footer column+wrap could clip — force visible. */
body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) a[id*="btnAddVar"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) > .mux-popup-footer-actions a[id*="btnAddVar"] {
    align-self: flex-end;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) > .mux-popup-footer-actions .button-container {
    display: flex !important;
    width: 100%;
    justify-content: flex-end !important;
    margin: 0 !important;
    flex-direction: row-reverse;
}

body.modern-ux .popupContainer:has(#POSTFIX_CALC_VAR_USE_CODED) a[id*="btnTest"] {
    float: none;
    align-self: flex-start;
}

/* -------------------------------------------------------------------------
   form_popups/arrange_cattable.aspx — CategoricalTableLayoutWizard (Create + Cancel same row)
   Hook: LinkButton lnkMergeObjs (only in this wizard). Page inline CSS floats .action.button right so Create stacks
   above EditFormPopUpMaster footer. Grid: full-width rows for body; last row col2 = Cancel, col3 = Create (primary right).
   Hide ascx trailing <script> (after lnkMergeObjs) so it does not occupy its own grid row.
   ------------------------------------------------------------------------- */
body.modern-ux .popupContainer:has([id*="lnkMergeObjs"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px 12px;
    align-items: center;
}

body.modern-ux .popupContainer:has([id*="lnkMergeObjs"]) > *:not(a[id*="lnkMergeObjs"]):not(.mux-popup-footer-actions) {
    grid-column: 1 / -1;
}

body.modern-ux .popupContainer:has([id*="lnkMergeObjs"]) > a[id*="lnkMergeObjs"] + script {
    display: none;
}

body.modern-ux .popupContainer:has([id*="lnkMergeObjs"]) > .mux-popup-footer-actions {
    grid-column: 2;
    margin-top: 0 !important;
    width: auto;
    min-width: 0;
    justify-self: end;
    align-self: center;
    float: none;
}

body.modern-ux .popupContainer:has([id*="lnkMergeObjs"]) > a[id*="lnkMergeObjs"] {
    grid-column: 3;
    justify-self: end;
    float: none;
    margin-right: 0;
    align-self: center;
}

/* -------------------------------------------------------------------------
   form_popups/add_copy.aspx — CopyVariableControl.ascx (Copy Existing Variables)
   common.css: table.layout td { padding-bottom: 10px }, .popupContainer { padding: 10px } — tight DS layout, full-width fields.
   Hook: table.mux-copy-variables (ascx); :has() fallback for older markup without the class.
   Three tracks: 1fr | auto | auto (empty | Cancel | Copy). Table + label + textarea span full width (all 3). Footer: .button-container must use .mux-popup-footer-actions .button-container (not > .button-container — it is not a direct child of .popupContainer).
   EditFormPopUpMaster wraps Cancel in .mux-popup-footer-actions — display:contents here so Copy + .button-container stay on the grid’s last row.
   ------------------------------------------------------------------------- */
body.modern-ux .popupContainer:has(.mux-copy-variables) > .mux-popup-footer-actions,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) > .mux-popup-footer-actions {
    display: contents;
}

body.modern-ux .popupContainer:has(.mux-copy-variables),
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) {
    padding: 8px 10px 10px !important;
    box-sizing: border-box;
    max-height: min(72vh, 100%);
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 8px;
    align-items: start;
    row-gap: 0;
    grid-template-areas:
        "muxtitle muxtitle muxtitle"
        "muxtable muxtable muxtable"
        "muxlbl muxlbl muxlbl"
        "muxta muxta muxta"
        "muxmsg muxmsg muxmsg"
        ". muxcancel muxcopy";
}

body.modern-ux .popupContainer:has(.mux-copy-variables) > table.layout,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) > table.layout {
    grid-area: muxtable;
}

body.modern-ux .popupContainer:has(.mux-copy-variables) > label[for*="txtVarNames"],
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) > label[for*="txtVarNames"] {
    grid-area: muxlbl;
    margin: 0 0 4px !important;
}

body.modern-ux .popupContainer:has(.mux-copy-variables) > label[for*="txtVarNames"] + br,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) > label[for*="txtVarNames"] + br {
    display: none;
}

/* Grid placement only applies to direct children of the grid container */
body.modern-ux .popupContainer:has(.mux-copy-variables) > textarea[id*="txtVarNames"],
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) > textarea[id*="txtVarNames"] {
    grid-area: muxta;
}

/* If a wrapper is ever inserted, flatten it so the textarea participates in the grid */
body.modern-ux .popupContainer:has(.mux-copy-variables) > span:has(> textarea[id*="txtVarNames"]),
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) > span:has(> textarea[id*="txtVarNames"]) {
    display: contents;
}

body.modern-ux .popupContainer:has(.mux-copy-variables) > .msg-container,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) > .msg-container {
    grid-area: muxmsg;
    margin: 4px 0 !important;
    min-height: 0;
}

body.modern-ux .popupContainer:has(.mux-copy-variables) > .mux-popup-footer-actions .button-container,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) > .mux-popup-footer-actions .button-container {
    grid-area: muxcancel;
    justify-self: end;
    align-self: center;
    margin: 8px 0 0 !important;
    padding-top: 0 !important;
    width: auto;
    max-width: 100%;
}

body.modern-ux .popupContainer:has(.mux-copy-variables) > h1,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) > h1 {
    grid-area: muxtitle;
    margin: 0 0 6px !important;
    padding: 0;
    font-size: var(--mux-fs-rem-1125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--text-primary, var(--foreground));
}

body.modern-ux .popupContainer:has(.mux-copy-variables) table.layout,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) table.layout {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    margin: 0 0 6px;
}

body.modern-ux .popupContainer:has(.mux-copy-variables) table.layout td:last-child,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) table.layout td:last-child {
    width: 100%;
    min-width: 0;
}

body.modern-ux .popupContainer:has(.mux-copy-variables) table.layout td,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) table.layout td {
    padding: 3px 8px 3px 0 !important;
    vertical-align: middle;
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-snug);
}

body.modern-ux .popupContainer:has(.mux-copy-variables) table.layout td:first-child,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) table.layout td:first-child {
    width: auto;
    max-width: none;
    white-space: nowrap;
    padding-right: 8px !important;
    color: var(--text-secondary, var(--muted-foreground));
}

body.modern-ux .popupContainer:has(.mux-copy-variables) table.layout select,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) table.layout select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.modern-ux .popupContainer:has(.mux-copy-variables) label,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) label {
    display: block;
    margin: 8px 0 4px !important;
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--text-secondary, var(--muted-foreground));
    cursor: pointer;
}

body.modern-ux .popupContainer:has(.mux-copy-variables) textarea,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) textarea {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch;
    box-sizing: border-box;
    margin: 2px 0 0 !important;
    min-height: 7.5rem;
    padding: 6px 8px !important;
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-normal);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-600);
    resize: vertical;
    field-sizing: fixed;
}

body.modern-ux .popupContainer:has(.mux-copy-variables) > a.action.button,
body.modern-ux .popupContainer:has([id*="copyVariableControl"]) > a.action.button {
    grid-area: muxcopy;
    justify-self: end;
    align-self: center;
    margin-top: 8px;
    margin-bottom: 0;
    margin-right: 0;
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
}

body.modern-ux.medrio.dark .popupContainer:has(.mux-copy-variables) textarea,
body.modern-ux.medrio.dark .popupContainer:has([id*="copyVariableControl"]) textarea {
    border-color: var(--border, rgba(255, 255, 255, 0.23));
    background: var(--card, rgba(255, 255, 255, 0.04));
    color: var(--text-primary, rgba(255, 255, 255, 0.95));
}

/* -------------------------------------------------------------------------
   app/abstract/LaunchEPro.aspx — ePRO launch dialog (jQuery UI / iframe). Feature-flagged via body.modern-ux only.
   Fixes horizontal scroll: td.width100 (100%) in a 3-col table + flex min-width:auto inflated min width; align filters with mc-thin-table cell padding.
   ------------------------------------------------------------------------- */
body.modern-ux form#frmLaunchEPro.flex-column {
    min-width: 0;
}

body.modern-ux form#frmLaunchEPro #divFilter {
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
}

body.modern-ux form#frmLaunchEPro .launch-epro-scroll {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

body.modern-ux form#frmLaunchEPro table.tblForms {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

body.modern-ux form#frmLaunchEPro table.tblForms td:first-child {
    width: 2.25rem;
    vertical-align: middle;
}

body.modern-ux form#frmLaunchEPro table.tblForms td.width100 {
    width: auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* Clickable form name — <label for="formCheck_*"> (LaunchEPro.aspx); inherit cell typography */
body.modern-ux form#frmLaunchEPro label.launch-epro-form-label {
    cursor: pointer;
    color: inherit;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

body.modern-ux form#frmLaunchEPro table.tblForms td.tar {
    width: 6.5rem;
    white-space: nowrap;
    vertical-align: middle;
}

/* Form row checkboxes: global input[type=checkbox] rules exclude .ui-dialog * — mirror DS native checkbox here */
body.modern-ux form#frmLaunchEPro input[type="checkbox"].formCheck {
    -webkit-appearance: none;
    appearance: none;
    padding: 0 !important;
    width: 20px;
    height: 20px;
    margin: 5px;
    border: 2px solid var(--mux-color-checkbox-border) !important;
    border-width: 2px !important;
    border-radius: var(--radius);
    background-color: var(--background) !important;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease;
    box-sizing: border-box;
}

body.modern-ux form#frmLaunchEPro input[type="checkbox"].formCheck:hover:not(:disabled):not(:checked) {
    border-color: var(--brand-dark) !important;
    background-image: none;
}

body.modern-ux form#frmLaunchEPro input[type="checkbox"].formCheck:checked {
    border-color: var(--mux-color-accent) !important;
    background-color: var(--mux-color-accent) !important;
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

body.modern-ux form#frmLaunchEPro input[type="checkbox"].formCheck:checked:hover:not(:disabled) {
    border-color: var(--mux-color-accent-hover) !important;
    background-color: var(--mux-color-accent-hover) !important;
}

body.modern-ux form#frmLaunchEPro input[type="checkbox"].formCheck:focus {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux form#frmLaunchEPro input[type="checkbox"].formCheck:focus:not(:focus-visible) {
    box-shadow: none;
}

body.modern-ux form#frmLaunchEPro input[type="checkbox"].formCheck:disabled {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

body.modern-ux form#frmLaunchEPro input[type="checkbox"].formCheck:disabled:checked {
    background-color: var(--muted-foreground) !important;
    border-color: var(--muted-foreground) !important;
}

/* Footer actions — same 36px control height as .ds-btn / ManualQuery dialog (a#btnCreate / a#btnCancel) */
body.modern-ux form#frmLaunchEPro > div:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3, 12px);
    margin-top: var(--space-2, 8px);
    box-sizing: border-box;
}

body.modern-ux form#frmLaunchEPro a.btnLaunch.button.action,
body.modern-ux form#frmLaunchEPro a.btnLaunch.action.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    float: none !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-radius: var(--radius-md, 8px) !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    color: var(--mux-primary-contrast) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
    vertical-align: middle !important;
}

body.modern-ux form#frmLaunchEPro a.btnLaunch.button.action:hover:not(.disabled),
body.modern-ux form#frmLaunchEPro a.btnLaunch.action.button:hover:not(.disabled) {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    background-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux form#frmLaunchEPro a.btnLaunch.button.action:focus-visible:not(.disabled),
body.modern-ux form#frmLaunchEPro a.btnLaunch.action.button:focus-visible:not(.disabled) {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

body.modern-ux form#frmLaunchEPro a.btnLaunch.button.action.disabled,
body.modern-ux form#frmLaunchEPro a.btnLaunch.action.button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

body.modern-ux form#frmLaunchEPro a.btnCancel.button.action.secondary,
body.modern-ux form#frmLaunchEPro a.btnCancel.action.button.secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    float: none !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: var(--brand-dark) !important;
    border-radius: var(--radius-md, 8px) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
    vertical-align: middle !important;
}

body.modern-ux form#frmLaunchEPro a.btnCancel.button.action.secondary:hover,
body.modern-ux form#frmLaunchEPro a.btnCancel.action.button.secondary:hover {
    border-color: var(--brand-darker) !important;
    background: var(--mux-primary-dark)14 !important;
    background-color: var(--mux-primary-dark)14 !important;
    color: var(--brand-darker) !important;
}

body.modern-ux form#frmLaunchEPro a.btnCancel.button.action.secondary:focus-visible,
body.modern-ux form#frmLaunchEPro a.btnCancel.action.button.secondary:focus-visible {
    outline: 2px solid var(--brand-dark) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   app/build/edit/epro.aspx — EPROConfigControl (legacy WebForms + Telerik RadEditor)
   All DS / layout overrides live here (epro.css stays legacy-only; no feature styling there).
   Legacy epro.css .settingsContainer { width: 620px } — overridden below when .epro-build-config exists.
   ------------------------------------------------------------------------- */
body.modern-ux .buildStudyContent .epro-build-config {
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux .buildStudyContent .epro-build-schedule {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .buildStudyContent .epro-build-config > h2,
body.modern-ux .buildStudyContent .epro-build-schedule > h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--mux-fs-rem-125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-compact);
    color: var(--text-primary);
}

body.modern-ux .buildStudyContent .epro-build-config .settingsContainer {
    padding: var(--space-6);
    background: var(--bg-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 10px;
}

body.modern-ux .buildStudyContent .epro-build-config table.matrix.settingsTable {
    width: 100%;
    border-collapse: collapse;
}

body.modern-ux .buildStudyContent .epro-build-config table.matrix.settingsTable td {
    padding: var(--space-3) var(--space-2);
    vertical-align: top;
}

body.modern-ux .buildStudyContent .epro-build-config table.matrix.settingsTable tr > td:first-child:not([colspan]) {
    font-weight: var(--fw-medium);
    font-size: var(--mux-field-control-font-size);
    color: var(--text-secondary);
    padding-right: var(--space-4);
}

body.modern-ux .buildStudyContent .epro-build-config table.matrix.settingsTable td[colspan="2"] {
    padding-bottom: var(--space-2);
}

body.modern-ux .buildStudyContent .epro-build-config table.matrix.settingsTable label {
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}

body.modern-ux .buildStudyContent .epro-build-config select {
    max-width: min(24rem, 100%) !important;
    width: 100%;
}

body.modern-ux .buildStudyContent .epro-build-config span[id*="lblStudyUrl"] {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--mux-field-control-font-size);
    word-break: break-all;
}

body.modern-ux .buildStudyContent .epro-build-config .mc-alert {
    display: block;
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--mux-field-control-font-size);
    line-height: var(--lh-normal);
}

/* Telerik RadEditor — login page copy (config section) */
body.modern-ux .buildStudyContent .epro-build-config .RadEditor {
    width: 100% !important;
    max-width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reWrapper {
    border: none !important;
    background: var(--bg);
}

body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reToolbarWrapper,
body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reToolBar,
body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reToolbar {
    background: var(--bg-paper) !important;
    border-bottom: 1px solid var(--border-color);
}

body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reContentCell {
    background: var(--bg);
}

body.modern-ux .buildStudyContent .epro-build-config .Error,
body.modern-ux .buildStudyContent .epro-build-schedule .Error {
    display: block;
    margin-top: var(--space-2);
}

body.modern-ux .buildStudyContent .epro-build-config ~ a.action.button,
body.modern-ux .buildStudyContent .epro-build-config ~ br + a.action.button {
    margin-top: var(--space-4);
}

/* Schedule section — form picker + grids */
body.modern-ux .buildStudyContent .epro-build-schedule fieldset {
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-paper);
    box-shadow: var(--shadow-sm);
}

body.modern-ux .buildStudyContent .epro-build-schedule fieldset legend {
    font-weight: var(--fw-semibold);
    padding: 0 var(--space-2);
    color: var(--text-primary);
}

body.modern-ux .buildStudyContent .epro-build-schedule fieldset > span {
    color: var(--text-secondary);
    font-size: var(--mux-field-control-font-size);
}

body.modern-ux .buildStudyContent .epro-build-schedule #divDateVariable {
    padding-bottom: var(--space-4) !important;
    font-size: var(--mux-field-control-font-size);
    color: var(--text-secondary);
}

body.modern-ux .buildStudyContent .epro-build-schedule select[id*="ddlForms"] {
    max-width: min(24rem, 100%) !important;
}

body.modern-ux .buildStudyContent .epro-build-schedule .msg-container {
    margin-top: var(--space-2);
}

body.modern-ux .buildStudyContent .button-container {
    margin-top: var(--space-2);
}

body.modern-ux .buildStudyContent .button-container:first-of-type {
    margin-top: var(--space-4);
}

/* -------------------------------------------------------------------------
   Main nav – white background
   ------------------------------------------------------------------------- */
body.modern-ux site-toolbar.med-global-nav {
    height: 92px;
}

body.modern-ux site-toolbar .nav-flyout .sub-menu-backdrop{
    margin-top: 92px !important;
}

/* med-toolbar.med-primary defaults to brand fill — global nav row must stay white (UX reference) */
body.modern-ux site-toolbar.med-global-nav med-toolbar.med-primary {
    background: transparent !important;
}

body.modern-ux site-toolbar.med-global-nav .med-toolbar-container,
body.modern-ux site-toolbar.med-global-nav .med-toolbar-container.sc-med-toolbar,
body.modern-ux site-toolbar.med-global-nav .med-main-toolbar,
body.modern-ux site-toolbar.med-global-nav .med-main-toolbar.sc-med-toolbar,
body.modern-ux site-toolbar.med-global-nav header.med-toolbar-container {
    background-color: var(--background) !important;
    background-image: none !important;
    /* Row: logo | spacer | search + nav — center all parts on one baseline (edc-core nav had top:-4px). */
    align-items: center !important;
}

/* site-toolbar (edc-core): .right-top-nav { position: relative; top: -4px } — drops nav vs search row. */
body.modern-ux site-toolbar.med-global-nav .right-top-nav {
    top: 0 !important;
}

body.modern-ux .site-toolbar-right {
    display: flex;
    flex-direction: row-reverse;
    /* Default align-items: stretch makes .search-row as tall as the toolbar while the
       search box stays block-aligned to the top; nav buttons still center in .right-top-nav. */
    align-items: center;
    gap: 0.5rem;
}

/* Center the search chrome vertically when the row is still stretched by a parent. */
body.modern-ux .site-toolbar-right .search-row {
    display: flex;
    align-items: center;
    align-self: center;
}

/* Top-right nav triggers (Study / User / Help) + Logout — Figma: Geist 14px/500, lh 20px, #005DA6 */
body.modern-ux .right-top-nav {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0;
}

body.modern-ux .right-top-nav med-popover-trigger {
    display: inline-flex !important;
    align-items: center !important;
}

/* Long study titles: cap width + ellipsis so User / Help / Logout stay on one row (EDC long-name header bug). */
body.modern-ux .site-toolbar-right .right-top-nav med-popover-trigger[menu-id="study-menu"] {
    flex: 0 1 auto;
    max-width: min(20rem, 38vw);
    min-width: 0;
}

body.modern-ux .site-toolbar-right .right-top-nav med-popover-trigger[menu-id="study-menu"] med-button {
    max-width: 100%;
    min-width: 0;
}

body.modern-ux .site-toolbar-right .right-top-nav med-popover-trigger[menu-id="study-menu"] med-button::part(button) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

body.modern-ux .site-toolbar-right .right-top-nav med-popover-trigger[menu-id="study-menu"] med-button .button-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.modern-ux .qtip-wrapper .qtip-contentWrapper .qtip-title {
    height: auto !important;
}

/* Global nav — .ds-btn.ds-btn-text + home “More” (subject-listing-actions med-primary) parity */
body.modern-ux .site-toolbar-right .right-top-nav med-button::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--space-4) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    /* Label font on .button-label only — .nav-icon glyphs must use Material Icons */
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux .site-toolbar-right .right-top-nav med-button::part(button):hover {
    background-color: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .site-toolbar-right .right-top-nav med-button::part(button):focus-visible {
    outline: 3px solid var(--brand) !important;
    outline-offset: 2px !important;
}

body.modern-ux .site-toolbar-right .right-top-nav med-button::part(button):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Keep med-button internal focus/interaction overlays transparent in top-right nav */
body.modern-ux .site-toolbar-right .right-top-nav med-button::part(focus-overlay),
body.modern-ux .site-toolbar-right .right-top-nav med-button::part(button-focus-overlay),
body.modern-ux .site-toolbar-right .right-top-nav med-button::part(overlay) {
    background: transparent !important;
    background-color: transparent !important;
    opacity: 0 !important;
}

body.modern-ux .site-toolbar-right .right-top-nav med-button .button-label {
    color: inherit !important;
    font-family: var(--font-family) !important;
    font-size: var(--mux-fs-14) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
}

body.modern-ux .site-toolbar-right .right-top-nav med-button med-icon,
body.modern-ux .site-toolbar-right .right-top-nav med-button med-icon .material-icons,
body.modern-ux .site-toolbar-right .right-top-nav med-button med-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    font-size: var(--mux-fs-24) !important;
    line-height: 24px !important;
    color: inherit !important;
}

/* Popover triggers (Help, etc.): empty slot + component ::before — needs Material Icons, not body font */
body.modern-ux .site-toolbar-right .right-top-nav med-button .nav-icon {
    border-top: 4px solid var(--brand-accessible) !important;
    margin: 5px 0 2px 5px;
}

body.modern-ux .site-toolbar-right .right-top-nav med-button .nav-icon::before,
body.modern-ux .site-toolbar-right .right-top-nav med-button .nav-icon::after {
    font-family: "Material Icons", sans-serif !important;
    font-size: var(--mux-fs-24) !important;
    line-height: 24px !important;
    color: inherit !important;
}

body.modern-ux .search-container {
    padding: 0 4px;
    border-radius: var(--radius-md);
    background-color: var(--gray-100);
    border: 1px solid var(--gray-600);
    box-sizing: border-box;
    transition: border-color var(--transition);
}

body.modern-ux .search-container.med-focused {
    outline: none;
    border-color: var(--mux-color-border-focus);
}

body.modern-ux.medrio.dark .search-container {
    border-color: var(--border, rgba(255, 255, 255, 0.23));
}

body.modern-ux .search-input .search-text {
    width: 100% !important;
}

body.modern-ux role-permissions-tab .search-input .search-text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}
/*
 * role-permissions-tab — "Search Permissions..." bar:
 * The host div.display-flex.bgcw has no explicit width, so the flex-grow-1
 * on the inner med-form-field has nothing to grow into.  Force it to 100%.
 */
body.modern-ux role-permissions-tab .display-flex.bgcw {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/*
 * mc-list-toolbar (roles-and-permissions left panel) — right-align search + close:
 * 1. margin-left: auto on the search input absorbs all free space, pushing the
 *    input (and everything after it) to the right edge.
 * 2. Collapse span.fill (Angular Material flex spacer) so the close button
 *    sits immediately after the search bar with no gap between them.
 */
body.modern-ux mc-list-toolbar mat-toolbar input.search-input {
    margin-left: auto;
    align-self: center;
}

body.modern-ux mc-list-toolbar mat-toolbar input.search-input ~ span.fill {
    flex: 0 0 auto;
}

body.modern-ux mc-list-toolbar mat-toolbar input.search-input ~ span {
    align-self: center;
    display: inline-flex;
    align-items: center;
}

/*
 * role-permissions-tab: med-input.search-text full-width fix.
 * Only control the HOST element's outer dimensions; do NOT touch display or
 * override the native-input width.  The Stencil component manages its own
 * internal flex/absolute layout (prefix-slot | native-input | suffix).
 * Overriding display:block or forcing native-input width:100% breaks that
 * layout and causes typed text + the clear icon to render outside the box.
 */
body.modern-ux role-permissions-tab med-input.search-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

body.modern-ux role-permissions-tab med-form-field.search-input{
    padding: 8px 25px 0 25px !important;
}
/* med-form-field.search-input (e.g. role-permissions): component SCSS pads 25px L/R — inner field ~385px in a ~435px row; use full width */
body.modern-ux med-form-field.search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.modern-ux med-form-field.search-input .med-form-field-wrapper,
body.modern-ux med-form-field.search-input .med-form-field-flex,
body.modern-ux med-form-field.search-input .med-form-field-infix {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Angular Material mat-form-field.search-input (role-form-list-dialog, variable-permission-list-dialog, etc.) */
body.modern-ux mat-form-field.search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux mat-form-field.search-input .mat-form-field-wrapper,
body.modern-ux mat-form-field.search-input .mat-form-field-flex,
body.modern-ux mat-form-field.search-input .mat-form-field-infix {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .searchbox-subjectid .data-entry-search {
    max-width: 100% !important;
}

body.modern-ux .panel-search tbody tr {
    display: flex;
    align-items: center;
}

body.modern-ux .stat-value {
    font-size: var(--mux-fs-18);
}

body.modern-ux .stat-title {
    font-size: var(--mux-fs-12);
}

body.modern-ux med-card {
    border-radius: var(--radius-md);
}

body.modern-ux med-card med-toolbar {
    border-radius: var(--radius-md);
}

body.modern-ux section.main {
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

body.modern-ux .mat-toolbar.mat-toolbar-single-row {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

body.modern-ux .pod, body.modern-ux .pod header {
    border-radius: var(--radius-md);
}

body.modern-ux .pod .major {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

body.modern-ux .pod .body {
    margin: 12px !important;
}

/* -------------------------------------------------------------------------
   ePRO config — form-schedule (Angular): full-width “At [Visit]” + description field
   DOM unchanged; uses :has() + visit select name prefix. Only when modern-ux is on.
   ------------------------------------------------------------------------- */
body.modern-ux form-schedule .sentence-block.bold:has(med-select[name^="formCollectionScheduleId_"]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux form-schedule .sentence-block.bold:has(med-select[name^="formCollectionScheduleId_"]) > .sentence-label {
    padding-right: 0;
    align-self: flex-start;
}

body.modern-ux form-schedule .sentence-block.bold:has(med-select[name^="formCollectionScheduleId_"]) > med-form-field.pb-10 {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body.modern-ux form-schedule .sentence-block.bold:has(med-select[name^="formCollectionScheduleId_"]) .med-form-field-wrapper,
body.modern-ux form-schedule .sentence-block.bold:has(med-select[name^="formCollectionScheduleId_"]) .med-form-field-flex,
body.modern-ux form-schedule .sentence-block.bold:has(med-select[name^="formCollectionScheduleId_"]) .med-form-field-infix {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux form-schedule med-form-field.description {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}

body.modern-ux form-schedule med-form-field.description med-input.multiline-input {
    min-height: 80px;
    /* form-schedule.component.scss sets .multiline-input { height: 36px } — breaks textarea + hint row */
    height: auto !important;
}

body.modern-ux form-schedule med-form-field.description med-input.multiline-input .native-input,
body.modern-ux form-schedule med-input#schedule-placeholder.multiline-input .native-input {
    min-height: 80px !important;
    height: auto !important;
    resize: vertical;
    box-sizing: border-box;
}

/* Description textarea — character count (med-hint align-end) below the field, not over the text */
body.modern-ux form-schedule med-form-field.description .med-form-field-wrapper.sc-med-form-field,
body.modern-ux form-schedule med-form-field.description .med-form-field-flex.sc-med-form-field {
    overflow: visible !important;
}

body.modern-ux form-schedule med-form-field.description .med-form-field-subscript-wrapper.sc-med-form-field {
    margin-top: var(--space-2) !important;
    padding-top: var(--space-1) !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

body.modern-ux form-schedule med-form-field.description .med-form-field-hint-wrapper.sc-med-form-field {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    row-gap: 0.125rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.modern-ux form-schedule med-form-field.description .med-form-field-hint-wrapper med-hint[slot="align-end"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: right !important;
    padding-top: 0.25rem !important;
    box-sizing: border-box !important;
}

/* ePRO config — form-schedules-container shell modernization (CSS-Only-UI-2026 tokens) */
body.modern-ux form-schedules-container {
    display: block;
    height: 100%;
    background: var(--bg-paper);
}

/* Shell + header: base block + p.68–71 rhythm (max-width, horizontal padding); single source — avoid duplicate overrides later in file */
body.modern-ux form-schedules-container .container {
    position: relative !important;
    inset: auto !important;
    height: 100%;
    width: 100%;
    max-width: min(56rem, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
    box-sizing: border-box;
}

body.modern-ux form-schedules-container .schedules-container-form-name {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    gap: var(--space-2) !important;
    padding: var(--space-3) 0 !important;
    border-bottom: 1px solid var(--border-color);
}

body.modern-ux form-schedules-container .schedules-container-form-name .heavy {
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--text-primary);
}

body.modern-ux form-schedules-container .schedules-container {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

body.modern-ux form-schedules-container form-schedule med-card.schedule-card {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--bg);
    overflow: hidden;
}

body.modern-ux form-schedules-container form-schedule .schedule-card-content {
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
}

body.modern-ux form-schedules-container form-schedule .schedule-content-title {
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--text-primary);
}

body.modern-ux form-schedules-container .image-container {
    max-width: 320px;
    opacity: 0.9;
}

/* -------------------------------------------------------------------------
   Telerik RadMenu — form editor toolbar (#MenuContainer: Add / Arrange)
   Outlined top-level triggers; dropdown = elevated panel; rows = cards.
   ------------------------------------------------------------------------- */
body.modern-ux #MenuContainer {
    margin-bottom: 1rem;
}

body.modern-ux #MenuContainer .RadMenu.RadMenu_Default {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.modern-ux #MenuContainer .rmRootGroup.rmHorizontal {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
}

body.modern-ux #MenuContainer .rmRootGroup.rmHorizontal > .rmItem {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    z-index: 0;
    background: transparent !important;
    border: none !important;
}

body.modern-ux #MenuContainer .rmRootGroup.rmHorizontal > .rmItem:hover,
body.modern-ux #MenuContainer .rmRootGroup.rmHorizontal > .rmItem:focus-within {
    z-index: 1 !important;
}

/* Segmented group: no gap; shared vertical edge between segments (match med-button-toggle-group: 8px radius, dark label text). */
body.modern-ux #MenuContainer a.rmLink.rmRootLink {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: var(--mux-form-editor-segmented-min-height);
    padding: 0.25rem 1rem !important;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-font-size) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--mux-line-height) !important;
    color: var(--foreground) !important;
    background: transparent !important;
    background-image: none !important;
    border: 3px solid var(--brand-dark) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: var(--mux-transition);
    box-sizing: border-box;
}

body.modern-ux #MenuContainer .rmRootGroup.rmHorizontal > .rmItem:first-child a.rmLink.rmRootLink {
    border-radius: var(--mux-radius) 0 0 var(--mux-radius) !important;
}

body.modern-ux #MenuContainer .rmRootGroup.rmHorizontal > .rmItem:last-child a.rmLink.rmRootLink {
    border-radius: 0 var(--mux-radius) var(--mux-radius) 0 !important;
}

body.modern-ux #MenuContainer .rmRootGroup.rmHorizontal > .rmItem:only-child a.rmLink.rmRootLink {
    border-radius: var(--mux-radius) !important;
}

body.modern-ux #MenuContainer .rmRootGroup.rmHorizontal > .rmItem:not(:first-child) a.rmLink.rmRootLink {
    border-left-width: 0 !important;
}

body.modern-ux #MenuContainer a.rmLink.rmRootLink:hover,
body.modern-ux #MenuContainer a.rmLink.rmRootLink.rmExpanded {
    background: var(--mux-color-accent-glow) !important;
    background-image: none !important;
    border-color: var(--mux-color-accent) !important;
    color: var(--foreground) !important;
}

body.modern-ux #MenuContainer a.rmLink.rmRootLink .rmText {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    font: inherit !important;
    text-decoration: none !important;
}

body.modern-ux #MenuContainer .rmSlide {
    padding-top: 0.25rem !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    /* ~390px like default RadMenu; avoid oversized card column */
    min-width: min(100%, 18rem) !important;
    width: max-content !important;
    max-width: min(100vw - 2rem, 24.5rem) !important;
    box-sizing: border-box !important;
}

body.modern-ux #MenuContainer .rmVertical.rmGroup.rmLevel1 {
    width: 100% !important;
    min-width: min(100%, 18rem);
    max-width: 100%;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    background: var(--background) !important;
    /* High-contrast frame (was 1px var(--border) — too faint on white); radius matches app 8px token */
    border: 2px solid rgba(0, 0, 0, 0.28) !important;
    border-radius: var(--mux-radius) !important;
    box-shadow: 0 2px 8px var(--mux-color-black-12) !important;
    box-sizing: border-box;
}

body.modern-ux #MenuContainer .rmVertical.rmGroup.rmLevel1 .rmItem {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box;
}

body.modern-ux #MenuContainer .rmVertical.rmGroup.rmLevel1 .rmItem:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
}

body.modern-ux #MenuContainer .rmVertical.rmGroup.rmLevel1 .rmItem:last-child {
    margin-bottom: 0 !important;
}

body.modern-ux #MenuContainer .rmVertical.rmGroup.rmLevel1 .rmText {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Compact list (original RadMenu density): classic Medrio link blue; hover = light wash + darker teal (not bright cyan). */
body.modern-ux #MenuContainer .MenuItemLink {
    display: grid !important;
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.125rem;
    align-items: start;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0.35rem 0.5rem !important;
    text-align: left !important;
    text-decoration: none !important;
    color: #0076a2 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-rem-8125) !important;
    line-height: var(--lh-compact) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    overflow-wrap: break-word;
}

body.modern-ux #MenuContainer .MenuItemLink:hover,
body.modern-ux #MenuContainer .MenuItemLink:focus {
    background: rgba(0, 118, 162, 0.1) !important;
    color: #005a7a !important;
    box-shadow: none;
}

body.modern-ux #MenuContainer .MenuItemLink:focus-visible {
    outline: 2px solid #0076a2;
    outline-offset: -2px;
}

body.modern-ux #MenuContainer .MenuItemLink img {
    float: none !important;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: center;
    width: 48px !important;
    height: auto !important;
    max-height: 3rem;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain;
}

body.modern-ux #MenuContainer .MenuItemLink h3 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-bold) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
    line-height: var(--lh-snug) !important;
}

/* -------------------------------------------------------------------------
   med-button-toggle-group (@medrio/core) — same segmented chrome as #MenuContainer RadMenu:
   3px accent on each segment (not a single host frame), zero gap, collapsed inner vertical
   edge like a.rmLink.rmRootLink. Slotted med-icon / label unchanged.
   ------------------------------------------------------------------------- */
body.modern-ux med-button-toggle-group.med-primary-button-toggle-group,
body.modern-ux med-button-toggle-group#previewToggleGroup,
body.modern-ux med-button-toggle-group#screen-type-selector {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0 !important;
    vertical-align: middle;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow: visible;
}

body.modern-ux med-button-toggle-group.med-primary-button-toggle-group > med-button-toggle,
body.modern-ux med-button-toggle-group#previewToggleGroup > med-button-toggle,
body.modern-ux med-button-toggle-group#screen-type-selector > med-button-toggle {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    box-sizing: border-box !important;
    border: 3px solid var(--brand-dark) !important;
    box-shadow: none !important;
    /* Match #MenuContainer a.rmLink.rmRootLink min-height + vertical alignment (icons + label) */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: var(--mux-form-editor-segmented-min-height);
}

/* Segment corners match #MenuContainer a.rmLink.rmRootLink (8px on outer corners only). */
body.modern-ux med-button-toggle-group.med-primary-button-toggle-group > med-button-toggle:first-child,
body.modern-ux med-button-toggle-group#previewToggleGroup > med-button-toggle:first-child,
body.modern-ux med-button-toggle-group#screen-type-selector > med-button-toggle:first-child {
    border-radius: var(--mux-radius) 0 0 var(--mux-radius) !important;
}

body.modern-ux med-button-toggle-group.med-primary-button-toggle-group > med-button-toggle:last-child:not(:only-child),
body.modern-ux med-button-toggle-group#previewToggleGroup > med-button-toggle:last-child:not(:only-child),
body.modern-ux med-button-toggle-group#screen-type-selector > med-button-toggle:last-child:not(:only-child) {
    border-radius: 0 var(--mux-radius) var(--mux-radius) 0 !important;
}

body.modern-ux med-button-toggle-group.med-primary-button-toggle-group > med-button-toggle:only-child,
body.modern-ux med-button-toggle-group#previewToggleGroup > med-button-toggle:only-child,
body.modern-ux med-button-toggle-group#screen-type-selector > med-button-toggle:only-child {
    border-radius: var(--mux-radius) !important;
}

body.modern-ux med-button-toggle-group.med-primary-button-toggle-group > med-button-toggle:not(:first-child):not(:last-child),
body.modern-ux med-button-toggle-group#previewToggleGroup > med-button-toggle:not(:first-child):not(:last-child),
body.modern-ux med-button-toggle-group#screen-type-selector > med-button-toggle:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

body.modern-ux med-button-toggle-group.med-primary-button-toggle-group > med-button-toggle:not(:first-child),
body.modern-ux med-button-toggle-group#previewToggleGroup > med-button-toggle:not(:first-child),
body.modern-ux med-button-toggle-group#screen-type-selector > med-button-toggle:not(:first-child) {
    border-left-width: 0 !important;
}

/* med-button-toggle primary checked — stronger blue wash (eCRF/ePRO, preview, screen-type).
   @medrio/core uses Shadow DOM; rules cannot target :host(...) .med-button-toggle-button from here.
   The inner button uses background rgba(0, 174, 239, 0.1). A host background color-mix stacks with that
   semi-transparent layer so the selected segment reads more clearly blue. Tune globally via
   --mux-med-button-toggle-checked-primary-mix. */
body.modern-ux med-button-toggle-group.med-primary-button-toggle-group > med-button-toggle.med-button-toggle-checked.med-primary-button-toggle:not(.med-disabled),
body.modern-ux med-button-toggle-group#previewToggleGroup > med-button-toggle.med-button-toggle-checked.med-primary-button-toggle:not(.med-disabled),
body.modern-ux med-button-toggle-group#screen-type-selector > med-button-toggle.med-button-toggle-checked.med-primary-button-toggle:not(.med-disabled) {
    background-color: color-mix(in srgb, var(--mux-primary-main) var(--mux-med-button-toggle-checked-primary-mix), var(--mux-color-bg)) !important;
}

/* -------------------------------------------------------------------------
   med-button (@medrio/core) — internal control exposes part="button"
   ------------------------------------------------------------------------- */
body.modern-ux med-button::part(button) {
    font-size: var(--font-size) !important;
}

/* -------------------------------------------------------------------------
   med-button button-type="stroked" — DS .ds-btn-outlined (outlined secondary actions)

   Parity with body.modern-ux .ds-btn.ds-btn-outlined: --ds-btn-height (36px), 2px
   border, --brand-dark / --brand-darker hovers, --ds-btn-focus-visible-shadow.
   Scoped with :not([color="primary"]) so stroked + primary (e.g. home, button-group)
   keep @medrio/core primary stroke treatment.

   More specific contexts still win: epro med-button[button-type="stroked"] (compact 28px
   in config/ePRO block below), query-main-header-actions header, etc.
   ------------------------------------------------------------------------- */
body.modern-ux med-button[button-type="stroked"]:not([color="primary"])::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    /* Halo: use ::part(focus-overlay) opacity 0 — do not use overflow:hidden here; it clips long labels. */
    min-height: var(--ds-btn-height) !important;
    height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--brand-dark) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-clip: padding-box !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux med-button[button-type="stroked"]:not([color="primary"])::part(button):hover:not(:disabled) {
    border-color: var(--brand-darker) !important;
    background: var(--mux-primary-dark)14 !important;
    background-color: var(--mux-primary-dark)14 !important;
    color: var(--brand-darker) !important;
    background-image: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux med-button[button-type="stroked"]:not([color="primary"])::part(button):active:not(:disabled) {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--brand-darker) !important;
    background: var(--mux-primary-dark)24 !important;
    background-color: var(--mux-primary-dark)24 !important;
    color: var(--brand-darker) !important;
}

/* Inset focus ring avoids expanding scrollable overflow (horizontal scrollbar on hover/focus at viewport edge). */
body.modern-ux med-button[button-type="stroked"]:not([color="primary"])::part(button):focus-visible {
    outline: 2px solid var(--brand-dark) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
}

body.modern-ux med-button[button-type="stroked"]:not([color="primary"])::part(button):disabled {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux med-button[button-type="stroked"]:not([color="primary"]) med-icon,
body.modern-ux med-button[button-type="stroked"]:not([color="primary"]) med-icon .material-icons,
body.modern-ux med-button[button-type="stroked"]:not([color="primary"]) med-icon i {
    color: inherit !important;
}

body.modern-ux med-button[button-type="stroked"]:not([color="primary"]) span {
    color: inherit !important;
}

/* Stroked outlined buttons: DS hover uses ::part(button) fill only — hide shadow-DOM overlays that duplicate grey behind the border. */
body.modern-ux med-button[button-type="stroked"]:not([color="primary"])::part(focus-overlay),
body.modern-ux med-button[button-type="stroked"]:not([color="primary"])::part(button-focus-overlay) {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux med-button[button-type="stroked"]:not([color="primary"]) {
    background: transparent !important;
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
   med-paginator — incremental polish: compact nav controls + one shared control height
   @medrio/core uses scoped (light) DOM — class hooks + native buttons are themeable.
   Height matches theme form row (--mux-height, 2.5rem).

   Host position: page CSS (e.g. app/coding/CodeValues.css) sets `med-paginator { position: sticky }`
   and `#pagingCtrl { position: sticky }`. The bar follows #TableDiv in normal flow — sticky is wrong
   and fights theme; force the custom element off sticky (!important beats tag + id when id rule lacks tag).
   ------------------------------------------------------------------------- */
body.modern-ux med-paginator {
    --med-paginator-control-height: var(--mux-height);
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    z-index: auto !important;
}

body.modern-ux med-paginator button:not([class*="mat-"]),
body.modern-ux med-paginator button.button-native:not([class*="mat-"]) {
    font-family: var(--mux-font-family);
    font-size: var(--mux-font-size);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--foreground) !important;
    background: transparent none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-sizing: border-box;
    box-shadow: none;
    transform: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--med-paginator-control-height);
    min-height: var(--med-paginator-control-height);
    padding: 0 0.5rem;
}

body.modern-ux med-paginator button:not([class*="mat-"])::after,
body.modern-ux med-paginator button.button-native:not([class*="mat-"])::after {
    content: none;
    display: none;
}

body.modern-ux med-paginator button:not([class*="mat-"]):hover,
body.modern-ux med-paginator button.button-native:not([class*="mat-"]):hover {
    background: var(--muted);
    border-color: var(--border);
    color: var(--foreground) !important;
    box-shadow: none;
    transform: none;
}

body.modern-ux med-paginator button:not([class*="mat-"]):active,
body.modern-ux med-paginator button.button-native:not([class*="mat-"]):active {
    transform: none;
    box-shadow: none;
}

body.modern-ux med-paginator med-button::part(button) {
    font-size: var(--mux-font-size) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    height: var(--med-paginator-control-height) !important;
    min-height: var(--med-paginator-control-height) !important;
    padding: 0 !important;
    color: var(--foreground) !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: var(--med-paginator-control-height) !important;
}

body.modern-ux med-paginator med-button::part(button):hover:not(:disabled) {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
}

body.modern-ux med-paginator med-button::part(button):focus-visible {
    outline: none;
    box-shadow: var(--ds-btn-focus-visible-shadow, var(--mux-focus-ring)) !important;
}

/* Core sets 30px / 35px heights — align to --med-paginator-control-height (match med-button border box).
   CodeValues.css sets .med-paginator-page-input { height: 16px !important } — override with higher specificity. */
body.modern-ux med-paginator .med-paginator-page.sc-med-paginator {
    display: inline-flex !important;
    align-items: center !important;
    height: var(--med-paginator-control-height) !important;
    min-height: var(--med-paginator-control-height) !important;
    max-height: var(--med-paginator-control-height) !important;
    box-sizing: border-box !important;
}

body.modern-ux med-paginator .med-paginator-page-number-container.sc-med-paginator {
    height: var(--med-paginator-control-height) !important;
    min-height: var(--med-paginator-control-height) !important;
    max-height: none !important;
}

body.modern-ux med-paginator input.med-paginator-page-input.sc-med-paginator,
body.modern-ux med-paginator .med-paginator-page-input.sc-med-paginator {
    height: var(--med-paginator-control-height) !important;
    min-height: var(--med-paginator-control-height) !important;
    max-height: var(--med-paginator-control-height) !important;
    box-sizing: border-box !important;
    line-height: 1.25 !important;
    padding: 0 0.375rem !important;
    margin: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--background, var(--bg)) !important;
    color: var(--foreground) !important;
    font-family: var(--mux-font-family), var(--font-family), sans-serif !important;
    font-size: var(--mux-font-size) !important;
    font-weight: var(--fw-medium) !important;
    appearance: none;
    -webkit-appearance: none;
    vertical-align: middle;
}

body.modern-ux med-paginator .med-paginator-page-button {
    height: var(--med-paginator-control-height) !important;
    min-height: var(--med-paginator-control-height) !important;
    min-width: var(--med-paginator-control-height) !important;
    width: auto !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

body.modern-ux med-paginator .med-paginator-items-per-page-button {
    height: var(--med-paginator-control-height) !important;
    min-height: var(--med-paginator-control-height) !important;
    max-height: var(--med-paginator-control-height) !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* One vertical rhythm: “Show” row, chevrons, and page input share a center line */
body.modern-ux med-paginator .med-paginator-outer-container.sc-med-paginator {
    display: flex !important;
    align-items: center !important;
}

body.modern-ux med-paginator .med-paginator-container.sc-med-paginator {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    row-gap: var(--space-2);
}

body.modern-ux med-paginator .med-paginator-items-per-page-container.sc-med-paginator,
body.modern-ux med-paginator .med-paginator-range-actions.sc-med-paginator {
    display: flex !important;
    align-items: center !important;
}

body.modern-ux med-paginator .med-paginator-page-number-container.sc-med-paginator {
    display: flex !important;
    align-items: center !important;
}

/* -------------------------------------------------------------------------
   Dialog action rows (slot="actions", e.g. subject-detail / monitoring) — med-button host classes map to .ds-btn shells:
   med-basic-button.med-primary → .ds-btn.ds-btn-text (tertiary / ghost)
   med-raised-button.med-primary → .ds-btn.ds-btn-primary (filled primary)
   ------------------------------------------------------------------------- */
body.modern-ux [slot="actions"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    /* med-spacer is flex:1 in @medrio/core — collapses to 0 when the row is shrink-wrapped; gap gives consistent spacing */
    gap: var(--space-1);
}

body.modern-ux [slot="actions"] med-spacer {
    display: none !important;
}

body.modern-ux [slot="actions"] med-button.med-basic-button.med-primary:not(.med-disabled)::part(button),
body.modern-ux [slot="actions"] med-button.med-raised-button.med-primary::part(button) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    font-family: var(--font-family);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    border-radius: var(--radius-md);
    /* Clip shadow-DOM .med-button-focus-overlay (library uses 4px) to host radius without changing @medrio/core */
    overflow: hidden;
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4);
    font-size: var(--ds-btn-font-size) !important;
    line-height: var(--lh-none);
}

/* Tertiary — .ds-btn-text */
body.modern-ux [slot="actions"] med-button.med-basic-button.med-primary:not(.med-disabled)::part(button) {
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    border: none !important;
    box-shadow: none !important;
}

body.modern-ux [slot="actions"] med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):hover:not(:disabled) {
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux [slot="actions"] med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):active:not(:disabled) {
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux [slot="actions"] med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux [slot="actions"] med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Filled primary — .ds-btn-primary */
body.modern-ux [slot="actions"] med-button.med-raised-button.med-primary::part(button) {
    background: var(--brand) !important;
    color: var(--mux-primary-contrast) !important;
    border: 2px solid transparent !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux [slot="actions"] med-button.med-raised-button.med-primary::part(button):hover:not(:disabled) {
    background: var(--brand-dark) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux [slot="actions"] med-button.med-raised-button.med-primary::part(button):active:not(:disabled) {
    background: var(--brand-darker) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux [slot="actions"] med-button.med-raised-button.med-primary::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring), var(--shadow-sm);
}

body.modern-ux [slot="actions"] med-button.med-raised-button.med-primary.med-disabled::part(button),
body.modern-ux [slot="actions"] med-button.med-raised-button.med-primary::part(button):disabled {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed;
    opacity: 0.85;
    box-shadow: none;
}

body.modern-ux [slot="actions"] med-button::part(focus-overlay),
body.modern-ux [slot="actions"] med-button::part(button-focus-overlay) {
    opacity: 0 !important;
}

/* -------------------------------------------------------------------------
   config/epro — flex scrollport (schedule list + detail). Default min-height:auto
   on flex items blocks overflow-y:auto on .schedules-container; scope to Modern UX only.
   ------------------------------------------------------------------------- */
body.modern-ux config-app epro {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* Column host is not always content-body’s only child — key off Flex-Layout attrs */
body.modern-ux config-app epro content-body div[fxlayout="column"] {
    min-height: 0;
    min-width: 0;
}

/* Row sits after toolbar + progress wrapper, not a direct child of the column */
body.modern-ux config-app epro content-body div[fxlayout="column"] div[fxlayout="row"] {
    min-height: 0;
    min-width: 0;
}

body.modern-ux config-app epro content-body div[fxlayout="column"] div[fxlayout="row"] > section {
    min-height: 0;
    min-width: 0;
}

body.modern-ux config-app form-schedules-container {
    min-height: 0;
}

body.modern-ux config-app form-schedules-container .schedules-container {
    min-height: 0;
}

/* -------------------------------------------------------------------------
   config/epro (Angular <epro/>) — med-button DS parity
   Global rule above only sets font-size on ::part(button). Without this, stroked
   Add Trigger, toolbar Delete/Save, and menu triggers use @medrio/core defaults only.
   Stroked + metrics align with .home-page-content .subject-listing-actions; toolbar
   Delete/Save with [slot="actions"] dialog patterns.
   ------------------------------------------------------------------------- */
body.modern-ux epro med-button[button-type="stroked"]::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--brand-dark) !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family) !important;
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux epro med-button[button-type="stroked"]::part(button):hover:not(:disabled) {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
    background-image: none !important;
    filter: none !important;
    opacity: 1 !important;
}

body.modern-ux epro med-button[button-type="stroked"]::part(button):focus-visible {
    outline: 3px solid var(--mux-primary-main) !important;
    outline-offset: 2px !important;
}

body.modern-ux epro med-button[button-type="stroked"]::part(button):disabled {
    color: var(--muted-foreground) !important;
    border-color: var(--border) !important;
    background: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

body.modern-ux epro med-button[button-type="stroked"] med-icon,
body.modern-ux epro med-button[button-type="stroked"] med-icon .material-icons,
body.modern-ux epro med-button[button-type="stroked"] med-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: var(--mux-fs-16) !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    color: inherit !important;
    vertical-align: middle !important;
}

/* -------------------------------------------------------------------------
   config/localization landing — med-button DS parity (not under <epro/>)

   Stroked + primary is excluded from global .ds-btn-outlined rules; basic
   primary matches home listing toolbars (My Jobs next to stroked actions).
   ------------------------------------------------------------------------- */
body.modern-ux localization-landing-page .localization-buttons-wrapper med-button[button-type="stroked"]::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--brand-dark) !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family) !important;
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux localization-landing-page .localization-buttons-wrapper med-button[button-type="stroked"]::part(button):hover:not(:disabled) {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
    background-image: none !important;
    filter: none !important;
    opacity: 1 !important;
}

body.modern-ux localization-landing-page .localization-buttons-wrapper med-button[button-type="stroked"]::part(button):focus-visible {
    outline: 3px solid var(--mux-primary-main) !important;
    outline-offset: 2px !important;
}

body.modern-ux localization-landing-page .localization-buttons-wrapper med-button[button-type="stroked"]::part(button):disabled {
    color: var(--muted-foreground) !important;
    border-color: var(--border) !important;
    background: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

body.modern-ux localization-landing-page .localization-buttons-wrapper med-button[button-type="stroked"] med-icon,
body.modern-ux localization-landing-page .localization-buttons-wrapper med-button[button-type="stroked"] med-icon .material-icons,
body.modern-ux localization-landing-page .localization-buttons-wrapper med-button[button-type="stroked"] med-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: var(--mux-fs-16) !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    color: inherit !important;
    vertical-align: middle !important;
}

body.modern-ux localization-landing-page .localization-buttons-wrapper med-button[button-type="stroked"]::part(focus-overlay),
body.modern-ux localization-landing-page .localization-buttons-wrapper med-button[button-type="stroked"]::part(button-focus-overlay) {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux localization-landing-page .localization-buttons-wrapper med-button[button-type="stroked"] {
    background: transparent !important;
    vertical-align: middle;
}

body.modern-ux localization-landing-page .localization-buttons-wrapper med-button.med-basic-button.med-primary::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    font-family: var(--font-family) !important;
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux localization-landing-page .localization-buttons-wrapper med-button.med-basic-button.med-primary::part(button):hover {
    background-color: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux localization-landing-page .localization-buttons-wrapper med-button.med-basic-button.med-primary::part(button):focus-visible {
    outline: 3px solid var(--brand) !important;
    outline-offset: 2px !important;
}

/* -------------------------------------------------------------------------
   config/localization import + export — med-button DS parity

   These routes use localization-import / localization-export with
   .localization-import-content-wrapper / .localization-export-content-wrapper,
   not localization-landing-page .localization-buttons-wrapper. Without scoped
   rules, stroked+primary (Choose file), text primary (Cancel), and raised
   primary (Import/Export) keep default @medrio/core chrome.

   Align with localization-select-language-dialog footer + --ds-btn-height.
   ------------------------------------------------------------------------- */
body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button[button-type="stroked"]::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    min-height: var(--ds-btn-height) !important;
    height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--brand-dark) !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button[button-type="stroked"]::part(button):hover:not(:disabled) {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
    background-image: none !important;
    filter: none !important;
    opacity: 1 !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button[button-type="stroked"]::part(button):focus-visible {
    outline: 2px solid var(--brand-dark) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button[button-type="stroked"]::part(button):disabled {
    color: var(--muted-foreground) !important;
    border-color: var(--border) !important;
    background: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button[button-type="stroked"] med-icon,
body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button[button-type="stroked"] med-icon .material-icons,
body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button[button-type="stroked"] med-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: var(--mux-fs-16) !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    color: inherit !important;
    vertical-align: middle !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button[button-type="stroked"]::part(focus-overlay),
body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button[button-type="stroked"]::part(button-focus-overlay) {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button[button-type="stroked"] {
    background: transparent !important;
    vertical-align: middle;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-basic-button.med-primary:not(.med-disabled)::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-weight: var(--fw-semibold) !important;
    text-decoration: none !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    font-size: var(--ds-btn-font-size) !important;
    line-height: var(--lh-none) !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    border: none !important;
    box-shadow: none !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):hover:not(:disabled) {
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):active:not(:disabled) {
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-raised-button.med-primary::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-weight: var(--fw-semibold) !important;
    text-decoration: none !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    font-size: var(--ds-btn-font-size) !important;
    line-height: var(--lh-none) !important;
    background: var(--brand) !important;
    color: var(--mux-primary-contrast) !important;
    border: 2px solid transparent !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-raised-button.med-primary::part(button):hover:not(:disabled) {
    background: var(--brand-dark) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-raised-button.med-primary::part(button):active:not(:disabled) {
    background: var(--brand-darker) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-raised-button.med-primary::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring), var(--shadow-sm);
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-raised-button.med-primary.med-disabled::part(button),
body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button.med-raised-button.med-primary::part(button):disabled {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    box-shadow: none !important;
}

/* Continue import (overwrite warning): raised + accent (host may omit med-primary) */
body.modern-ux
    localization-import
    .localization-import-content-wrapper
    med-button.med-raised-button[color="accent"]::part(button),
body.modern-ux
    localization-import
    .localization-import-content-wrapper
    med-button[button-type="raised"][color="accent"]::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-weight: var(--fw-semibold) !important;
    text-decoration: none !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    font-size: var(--ds-btn-font-size) !important;
    line-height: var(--lh-none) !important;
    background: var(--color-warning) !important;
    color: #000000 !important;
    border: 2px solid transparent !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux
    localization-import
    .localization-import-content-wrapper
    med-button.med-raised-button[color="accent"]::part(button):hover:not(:disabled),
body.modern-ux
    localization-import
    .localization-import-content-wrapper
    med-button[button-type="raised"][color="accent"]::part(button):hover:not(:disabled) {
    background: var(--color-warning-dark) !important;
    color: #000000 !important;
    border-color: var(--color-warning-dark) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux
    localization-import
    .localization-import-content-wrapper
    med-button.med-raised-button[color="accent"]::part(button):active:not(:disabled),
body.modern-ux
    localization-import
    .localization-import-content-wrapper
    med-button[button-type="raised"][color="accent"]::part(button):active:not(:disabled) {
    background: var(--color-warning-dark) !important;
    color: #000000 !important;
    border-color: var(--color-warning-dark) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux
    localization-import
    .localization-import-content-wrapper
    med-button.med-raised-button[color="accent"]::part(button):focus-visible,
body.modern-ux
    localization-import
    .localization-import-content-wrapper
    med-button[button-type="raised"][color="accent"]::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring), var(--shadow-sm);
}

body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button::part(focus-overlay),
body.modern-ux
    :is(
        localization-import .localization-import-content-wrapper,
        localization-export .localization-export-content-wrapper
    )
    med-button::part(button-focus-overlay) {
    opacity: 0 !important;
}

/* Study Languages dialog — footer row is not slot="actions"; mirror [slot="actions"] med-button DS parity */
body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-basic-button.med-primary:not(.med-disabled)::part(button),
body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-raised-button.med-primary::part(button) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    font-family: var(--font-family);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4);
    font-size: var(--ds-btn-font-size) !important;
    line-height: var(--lh-none);
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-basic-button.med-primary:not(.med-disabled)::part(button) {
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    border: none !important;
    box-shadow: none !important;
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):hover:not(:disabled) {
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):active:not(:disabled) {
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-basic-button.med-primary:not(.med-disabled)::part(button):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    cursor: not-allowed;
    opacity: 0.7;
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-raised-button.med-primary::part(button) {
    background: var(--brand) !important;
    color: var(--mux-primary-contrast) !important;
    border: 2px solid transparent !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-raised-button.med-primary::part(button):hover:not(:disabled) {
    background: var(--brand-dark) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-raised-button.med-primary::part(button):active:not(:disabled) {
    background: var(--brand-darker) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-raised-button.med-primary::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring), var(--shadow-sm);
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-raised-button.med-primary.med-disabled::part(button),
body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-raised-button.med-primary::part(button):disabled {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed;
    opacity: 0.85;
    box-shadow: none;
}

body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-basic-button.med-primary::part(focus-overlay),
body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-basic-button.med-primary::part(button-focus-overlay),
body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-raised-button.med-primary::part(focus-overlay),
body.modern-ux localization-select-language-dialog .selected-languages-counter-wrapper med-button.med-raised-button.med-primary::part(button-focus-overlay) {
    opacity: 0 !important;
}

/* Toolbar: Delete — tertiary / ghost (.ds-btn-text parity; only non-typed text button in med-toolbar row) */
body.modern-ux :is(epro, analyze-app) med-toolbar med-button:not([button-type])::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    font-family: var(--font-family) !important;
    font-weight: var(--fw-semibold) !important;
    text-decoration: none !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    font-size: var(--ds-btn-font-size) !important;
    line-height: var(--lh-none) !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    border: none !important;
    box-shadow: none !important;
}

body.modern-ux :is(epro, analyze-app) med-toolbar med-button:not([button-type])::part(button):hover:not(:disabled) {
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux :is(epro, analyze-app) med-toolbar med-button:not([button-type])::part(button):active:not(:disabled) {
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux :is(epro, analyze-app) med-toolbar med-button:not([button-type])::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux :is(epro, analyze-app) med-toolbar med-button:not([button-type])::part(button):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Toolbar: Save — filled primary */
body.modern-ux :is(epro, analyze-app) med-toolbar med-button.med-raised-button.med-primary::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    font-family: var(--font-family) !important;
    font-weight: var(--fw-semibold) !important;
    text-decoration: none !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    font-size: var(--ds-btn-font-size) !important;
    line-height: var(--lh-none) !important;
    background: var(--brand) !important;
    color: var(--mux-primary-contrast) !important;
    border: 2px solid transparent !important;
    box-shadow: var(--shadow-sm) !important;
}

body.modern-ux :is(epro, analyze-app) med-toolbar med-button.med-raised-button.med-primary::part(button):hover:not(:disabled) {
    background: var(--brand-dark) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm) !important;
}

body.modern-ux :is(epro, analyze-app) med-toolbar med-button.med-raised-button.med-primary::part(button):active:not(:disabled) {
    background: var(--brand-darker) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm) !important;
}

body.modern-ux :is(epro, analyze-app) med-toolbar med-button.med-raised-button.med-primary::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring), var(--shadow-sm) !important;
}

body.modern-ux :is(epro, analyze-app) med-toolbar med-button.med-raised-button.med-primary.med-disabled::part(button),
body.modern-ux :is(epro, analyze-app) med-toolbar med-button.med-raised-button.med-primary::part(button):disabled {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    box-shadow: none !important;
}

/* Toolbar: close — icon control */
body.modern-ux :is(epro, analyze-app) med-toolbar med-button[button-type="icon"]::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    color: var(--brand-accessible) !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

body.modern-ux :is(epro, analyze-app) med-toolbar med-button[button-type="icon"]::part(button):hover:not(:disabled) {
    background: var(--mux-brand-accessible-08) !important;
}

body.modern-ux :is(epro, analyze-app) med-toolbar med-button[button-type="icon"]::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/* Analyze — .pod > header.major (e.g. DataExport.aspx #btnDownload): not inside med-toolbar, so map raised primary → .ds-btn-primary here too */
body.modern-ux .analyze-app .pod > header.major med-button.med-raised-button.med-primary::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    font-family: var(--font-family) !important;
    font-weight: var(--fw-semibold) !important;
    text-decoration: none !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    font-size: var(--ds-btn-font-size) !important;
    line-height: var(--lh-none) !important;
    background: var(--brand) !important;
    color: var(--mux-primary-contrast) !important;
    border: 2px solid transparent !important;
    box-shadow: var(--shadow-sm) !important;
}

body.modern-ux .analyze-app .pod > header.major med-button.med-raised-button.med-primary::part(button):hover:not(:disabled) {
    background: var(--brand-dark) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm) !important;
}

body.modern-ux .analyze-app .pod > header.major med-button.med-raised-button.med-primary::part(button):active:not(:disabled) {
    background: var(--brand-darker) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm) !important;
}

body.modern-ux .analyze-app .pod > header.major med-button.med-raised-button.med-primary::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring), var(--shadow-sm) !important;
}

body.modern-ux .analyze-app .pod > header.major med-button.med-raised-button.med-primary.med-disabled::part(button),
body.modern-ux .analyze-app .pod > header.major med-button.med-raised-button.med-primary::part(button):disabled {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    box-shadow: none !important;
}

body.modern-ux .analyze-app .pod > header.major med-button.med-raised-button.med-primary::part(focus-overlay),
body.modern-ux .analyze-app .pod > header.major med-button.med-raised-button.med-primary::part(button-focus-overlay) {
    opacity: 0 !important;
}

/* Schedule type menu trigger — parity with .ds-btn.ds-btn-text (CSS-Only-UI-2026 / Figma bundle) */
body.modern-ux epro med-popover-trigger.schedule-type-button med-button .menu-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
}

/* common.css .ml-5 (5px) stacks with flex gap; .ds-btn uses gap only */
body.modern-ux epro med-popover-trigger.schedule-type-button med-button .menu-button > .ml-5 {
    margin-left: 0 !important;
}

body.modern-ux epro med-popover-trigger.schedule-type-button med-button::part(button) {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    font-family: var(--font-family) !important;
    font-size: var(--ds-btn-font-size) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition:
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux epro med-popover-trigger.schedule-type-button med-button::part(button):hover:not(:disabled) {
    background: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux epro med-popover-trigger.schedule-type-button med-button::part(button):active:not(:disabled) {
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux epro med-popover-trigger.schedule-type-button med-button::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux epro med-popover-trigger.schedule-type-button med-button.med-disabled::part(button),
body.modern-ux epro med-popover-trigger.schedule-type-button med-button::part(button):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* .ds-btn .material-icons → 18px (override med-icon inline 24px) */
body.modern-ux epro med-popover-trigger.schedule-type-button med-button med-icon,
body.modern-ux epro med-popover-trigger.schedule-type-button med-button med-icon .material-icons,
body.modern-ux epro med-popover-trigger.schedule-type-button med-button med-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    font-size: var(--mux-fs-18) !important;
    line-height: 18px !important;
    color: inherit !important;
    vertical-align: middle !important;
}

body.modern-ux epro med-button::part(focus-overlay),
body.modern-ux epro med-button::part(button-focus-overlay) {
    opacity: 0 !important;
}

/* config/epro — time picker row (form-schedule .schedule-timepicker); Angular _ngcontent-* is unstable — scope via epro host */
body.modern-ux epro .schedule-timepicker {
    padding-left: 5px;
}

/* mc-time-picker (@medrio/common): library may cap .mc-timepicker-field max-width; inherit follows wrapper for layout */
body.modern-ux .mc-timepicker-wrapper .mc-timepicker-field {
    max-width: inherit !important;
}

body.modern-ux .material-icons {
    font-family: 'Material Icons' !important;
}

/* ePRO authenticated header: master.css forces .toolbar-right-menu > li { height:20px } + floats — 18px labels + close × can’t center. Flex the bar and list rows. */
body.modern-ux.authenticated-master-body .page-header .tool-bar.top-right {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    float: right;
    min-height: 64px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

body.modern-ux.authenticated-master-body .page-header .toolbar-right-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
}

body.modern-ux.authenticated-master-body .page-header .toolbar-right-menu > li {
    float: none !important;
    height: auto !important;
    display: flex;
    align-items: center;
}

/* Close: no Material Icons on shell — hide ligature text, × matches optical weight of bold 18px titles. */
body.modern-ux.authenticated-master-body .page-header .toolbar-right-menu a[id$="btnClose"].header-button.material-icons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important;
    margin: 0 5px;
    font-size: 0 !important;
    line-height: 1 !important;
    color: transparent !important;
}

body.modern-ux.authenticated-master-body .page-header .toolbar-right-menu a[id$="btnClose"].header-button.material-icons::before {
    content: "\00d7";
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
    color: #fff;
}

/* -------------------------------------------------------------------------
   Edit Subject Progress (EditSubjectProgress.aspx)
   SubjectBar: 14px in .subjBar (controls use .fs-12 = 12px in common.css — override here).
   Only this route includes med-edit-subject-progress.
   ------------------------------------------------------------------------- */
body.modern-ux:has(med-edit-subject-progress) header.expandableBar .subjBar {
    font-size: var(--mux-fs-14);
}

body.modern-ux:has(med-edit-subject-progress) header.expandableBar .subjBar .subjBarValue,
body.modern-ux:has(med-edit-subject-progress) header.expandableBar .subjBar a {
    font-size: var(--mux-fs-14) !important;
}

/* EditSubjectProgress matrix/grid headers — gray-600 + semibold/bold parity */
body.modern-ux:has(med-edit-subject-progress) .rgMasterTable th,
body.modern-ux:has(med-edit-subject-progress) .ac.MatrixView table th,
body.modern-ux:has(med-edit-subject-progress) .matrix .rgClipCells th,
body.modern-ux:has(med-edit-subject-progress) table.rgMasterTable th {
    color: var(--gray-600) !important;
    font-weight: var(--fw-bold) !important;
}

/* Toolbar Cancel / Update: full DSR chrome (global med-button rule is font-size only). */
body.modern-ux med-edit-subject-progress .tool-bar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

/* Update — filled brand primary (ids from update-button.tsx / cancel-button.tsx) */
body.modern-ux med-edit-subject-progress .tool-bar med-button#btnUpdate::part(button) {
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    min-height: 28px !important;
    padding: 4px 12px !important;
    border-radius: var(--mux-radius) !important;
    border: none !important;
    background: var(--mux-primary-main) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
}

body.modern-ux med-edit-subject-progress .tool-bar med-button#btnUpdate::part(button):hover:not(:disabled) {
    background: var(--mux-primary-hover) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux med-edit-subject-progress .tool-bar med-button#btnUpdate::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux med-edit-subject-progress .tool-bar med-button#btnUpdate::part(button):disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Cancel — outlined secondary next to primary */
body.modern-ux med-edit-subject-progress .tool-bar med-button#btnCancel::part(button) {
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    min-height: 28px !important;
    padding: 4px 12px !important;
    border-radius: var(--mux-radius) !important;
    border: 1px solid var(--brand-dark) !important;
    background: transparent !important;
    color: var(--brand-darker) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
}

body.modern-ux med-edit-subject-progress .tool-bar med-button#btnCancel::part(button):hover:not(:disabled) {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
}

body.modern-ux med-edit-subject-progress .tool-bar med-button#btnCancel::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/* EditCollectionPtData_New.aspx: message strip — width auto (overrides page .message-container width: 100%) */
body.modern-ux:has(#form-pod-container) #form-pod-container .pod .message-container {
    width: auto;
}

/*
 * LabSelectionBar.ascx: info icon + "Collection Lab" label.
 * common.css .icon.info.tooltip uses position:absolute — icon leaves normal flow and sits above/beside the label oddly.
 */
body.modern-ux .lab-selection-bar .lab-inline > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

body.modern-ux .lab-selection-bar .lab-inline > div > div {
    float: none !important;
}

body.modern-ux .lab-selection-bar .lab-inline > div > div + div {
    padding-left: 0 !important;
}

body.modern-ux .lab-selection-bar .lab-inline > div > div:first-child {
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* LabSelectionBar.ascx: inner label row (no extra class on markup) */
body.modern-ux .lab-selection-bar .lab-inline > div > div:first-child > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    float: none !important;
    width: auto !important;
    min-height: 0 !important;
}

body.modern-ux .lab-selection-bar .lab-inline > div > div:first-child > div span.icon.info.tooltip,
body.modern-ux .lab-selection-bar .lab-inline > div > div:first-child > div .icon.info.tooltip {
    position: static !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

body.modern-ux .lab-selection-bar .lab-inline > div > div:first-child > div label.label-inline {
    margin-top: 0 !important;
    vertical-align: middle !important;
    line-height: var(--lh-normal, 1.5) !important;
}

body.modern-ux .lab-selection-bar .lab-inline > div > div:first-child > div .icon.required-star {
    flex-shrink: 0 !important;
    align-self: center !important;
    vertical-align: middle !important;
}

/* EditCollectionPtData_New.aspx: title + toolbar on one row (legacy CSS stacks column + 100% widths) */
body.modern-ux:has(#form-pod-container) .pod > header#form-header {
    /* common.css .pod > header: min-height 44px + padding 4px 20px — extra cross-axis space reads as “top heavy” */
    min-height: 0 !important;
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
}

body.modern-ux:has(#form-pod-container) #form-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    align-content: center !important;
    justify-content: space-between;
    gap: var(--space-4);
    box-sizing: border-box;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-normal);
    line-height: var(--lh-wide);
}

body.modern-ux:has(#form-pod-container) #form-title-column {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: center;
    text-align: left;
}

/* common.css .pod header h1 { margin-top: 6px } — nudges title up in the row */
body.modern-ux:has(#form-pod-container) #form-header #form-title-column h1.formTitle,
body.modern-ux:has(#form-pod-container) #form-header #form-title-column h1.ds-h5 {
    margin: 0 !important;
    /* Match toolbar control row (28px) so title optically lines up with Filters / buttons */
    display: flex;
    align-items: center;
    min-height: 28px;
    line-height: var(--lh-snug);
}

body.modern-ux:has(#form-pod-container) #form-header #form-navigation.tool-bar {
    flex: 0 1 auto;
    width: auto !important;
    max-width: 100%;
    justify-content: flex-end;
    align-self: center !important;
    height: auto !important;
    min-height: 0;
}

/* Do not use #form-header > * { align-items: center } — it made #form-title-column center the h1 horizontally in the flex-1 column */
body.modern-ux:has(#form-pod-container) #form-header #form-subheader,
body.modern-ux:has(#form-pod-container) #form-header .tool-bar {
    align-items: center;
}

@media (max-width: 992px) {
    body.modern-ux:has(#form-pod-container) #form-header {
        flex-direction: column;
        align-items: stretch;
    }

    body.modern-ux:has(#form-pod-container) #form-title-column {
        width: 100% !important;
        max-width: none;
    }

    body.modern-ux:has(#form-pod-container) #form-header #form-navigation.tool-bar {
        width: 100% !important;
        justify-content: flex-end;
    }
}

/* Form header nav: flex row (common.css floats .tool-bar > ul / div); one compact control height vs global .ds-btn 36px + a.button.action 36px */
body.modern-ux #form-header #form-navigation {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    float: none !important;
}

body.modern-ux #form-header #form-navigation > ul,
body.modern-ux #form-header #form-navigation .divFormButtons {
    float: none !important;
    margin: 0 !important;
}

/* Top-level dropdown triggers only (Filters, Form Tools) — same 28px row as .divFormButtons; not nested menu links */
body.modern-ux #form-header #form-navigation > ul > li > a.ds-btn.ds-btn-text {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px) !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    border-radius: var(--mux-radius) !important;
    box-shadow: none !important;
}

/* tool-bar-filter (common.css): i { margin-top:-3px } + span { vertical-align:top } — breaks icon/label */
body.modern-ux #form-header #form-navigation > ul > li > a.ds-btn.ds-btn-text i,
body.modern-ux #form-header #form-navigation > ul > li > a.ds-btn.ds-btn-text [class*="-icons"] {
    margin-top: 0 !important;
    align-self: center;
    flex-shrink: 0;
}

body.modern-ux #form-header #form-navigation > ul > li > a.ds-btn.ds-btn-text span {
    vertical-align: unset !important;
}

/* EditCollectionPtData_New / form header: .divFormButtons anchors — parity with
   med-edit-subject-progress .tool-bar med-button#btnUpdate / #btnCancel (compact DSR). */
body.modern-ux #form-header #form-navigation .divFormButtons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.btn-small) {
    box-sizing: border-box !important;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--mux-radius) !important;
    border: none !important;
    background: var(--mux-primary-main) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
    transform: none !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.btn-small):hover {
    background: var(--mux-primary-hover) !important;
    color: var(--mux-primary-contrast) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.btn-small):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.btn-small):active {
    background: var(--mux-primary-hover) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.btn-small)[disabled],
body.modern-ux #form-header #form-navigation .divFormButtons a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.btn-small).disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* icon-pos-pre / icon-pos-post (common.css): sprite .icon is position:absolute; a.icon-pos-pre padding-left reserves space.
 * Compact padding:0 12px above wins over a.icon-pos-pre — label drew under the icon. Restore lane + anchor positioning. */
body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.icon-pos-pre:not(.btn-small) {
    position: relative !important;
    padding-left: 30px !important;
    padding-right: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.icon-pos-post:not(.btn-small) {
    position: relative !important;
    padding-right: 30px !important;
    padding-left: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.icon-pos-pre:not(.btn-small) {
    gap: 0 !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.icon-pos-pre:not(.btn-small) .icon.pre,
body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.icon-pos-post:not(.btn-small) .icon.post {
    position: relative !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.icon-pos-pre:not(.btn-small) .icon.pre {
    top: 0 !important;
    left: 0 !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.icon-pos-post:not(.btn-small) .icon.post {
    top: 6px !important;
    right: 7px !important;
}

/* Prev / Next icon-only — same 28px square as row (exclude from filled-primary text metrics) */
body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.btn-small {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    width: 28px !important;
    min-height: 28px !important;
    height: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    line-height: var(--lh-none) !important;
}

/* common.css [class*="-icons"] on chevrons — match button label/contrast color */
body.modern-ux #form-header #form-navigation .divFormButtons a.button.action [class*="-icons"] {
    color: currentColor !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.secondary {
    box-sizing: border-box !important;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--mux-radius) !important;
    border: 1px solid var(--brand-dark) !important;
    background: transparent !important;
    color: var(--brand-darker) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
    transform: none !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.secondary:hover {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.secondary:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux #form-header #form-navigation .divFormButtons a.button.action.secondary:active {
    transform: none !important;
    box-shadow: none !important;
}

/* SubjectBar — Forms toggle: .ds-btn + .ds-btn-outlined (EditCollectionPtData_New / form-pod header) */
body.modern-ux med-button#open-form-list::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    font-family: var(--font-family) !important;
    font-weight: var(--fw-semibold) !important;
    text-decoration: none !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--brand-dark) !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--space-4) !important;
    font-size: var(--mux-fs-14) !important;
    line-height: var(--lh-none) !important;
    box-shadow: none !important;
}

body.modern-ux med-button#open-form-list::part(button):hover:not(:disabled) {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
}

body.modern-ux med-button#open-form-list::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux med-button#open-form-list::part(button):disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* SubjectBar — override ascx .formList { margin-top: -7px } on form-pod data entry (EditCollectionPtData_New) */
body.modern-ux:has(#form-pod-container) .subjectBar header.expandableBar .formList {
    margin-top: 0;
}

/* #form-navigation: immediate ul children only (not nested menus) */
body.modern-ux #form-header #form-navigation > ul {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
}

/* Top-level toolbar row: each dropdown + divider aligns to the same centerline as Close/Save */
body.modern-ux #form-header #form-navigation > ul > li {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    min-height: 28px;
}

/*
 * Dropdown panels (nav li > ul): position absolute with top/left auto picks flex “static position”.
 * With align-items:center on the li, that centers the menu on the cross axis — the flyout sits on top
 * of the trigger (Form Tools / Filters). Anchor below the trigger instead.
 */
body.modern-ux #form-header #form-navigation > ul > li.dropdown > ul {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: var(--space-1, 4px) !important;
}

body.modern-ux #form-header #form-navigation > ul > li.dropdown > ul.tool-bar-menu-preview-mode {
    left: auto !important;
    right: 0 !important;
}

/* Filters / Form Tools flyouts: same row height + typography for every action (Download PDF, Query Log, Audit Log, …).
   common.css uses 48px + mixed rules; open-dialog-only links used to skip .ds-btn and looked different. */
body.modern-ux #form-header #form-navigation > ul > li > ul > li > a {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    color: var(--brand-accessible) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

body.modern-ux #form-header #form-navigation > ul > li > ul > li > a:hover:not(:disabled),
body.modern-ux #form-header #form-navigation > ul > li > ul > li > a:focus-visible {
    background-color: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

/* jQuery UI Datepicker — month/year: theme uses width:49% on each select (no gap; borders touch) */
body.modern-ux #ui-datepicker-div.ui-datepicker,
body.modern-ux .ui-datepicker {
    width: auto !important;
    min-width: 200px;
}

body.modern-ux .ui-datepicker .ui-datepicker-title {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    line-height: normal;
}

body.modern-ux .ui-datepicker select.ui-datepicker-month,
body.modern-ux .ui-datepicker select.ui-datepicker-year {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 5rem;
    margin: 0 !important;
    box-sizing: border-box;
    /* Native dropdown arrow: right padding reserves space so label does not overlap the chevron */
    padding-block: 4px;
    padding-inline-start: 8px;
    padding-inline-end: 2rem;
}

/* -------------------------------------------------------------------------
 * jQuery UI .ui-dialog — Phase E shell (all except .mux-dialog-annotated-forms iframe tool).
 * Centralizes radius/shadow/background with .ds-dialog + med-dialog; alerts/confirms inherit automatically.
 * ------------------------------------------------------------------------- */
body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) {
    border: none !important;
    border-radius: var(--mux-ds-dialog-radius) !important;
    overflow: hidden !important;
    background: var(--bg-paper) !important;
    box-shadow: var(--mux-ds-dialog-shadow) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.modern-ux.dark .ui-dialog:not(.mux-dialog-annotated-forms),
body.modern-ux.medrio.dark .ui-dialog:not(.mux-dialog-annotated-forms) {
    background: var(--mux-color-bg-paper) !important;
    box-shadow: var(--mux-ds-dialog-shadow-dark) !important;
}

/*
 * Titleless alerts (showAlertDialog / showConfirmWithOutCancel — MedrioJS.js dialogClass: mux-dialog-no-title):
 * shell + rhythm parity with .ds-dialog.ds-dialog-md (04a03c3e…css); non-resizable chrome like native DS modal.
 */
body.modern-ux .ui-dialog.mux-dialog-no-title:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) {
    max-width: min(560px, calc(100vw - 48px)) !important;
    min-width: 280px;
    animation: mux-ds-dialog-enter 0.25s cubic-bezier(0.2, 0, 0, 1);
}

body.modern-ux .ui-dialog.mux-dialog-no-title:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-resizable-handle {
    display: none !important;
}

/* Title strip — compact header; strip jQuery .ui-widget-header border/shadow/gradient (confirm dialogs, etc.) */
body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-titlebar {
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-paper) !important;
    background-image: none !important;
    color: var(--gray-900);
    padding: var(--space-3) var(--space-4) var(--space-2) var(--space-4) !important;
    min-height: 0;
    font-family: var(--mux-font-family);
    font-size: inherit;
    font-weight: inherit;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: var(--space-3);
}

/* Titleless alert/message dialogs — titlebar is close-only; gutters match .ds-dialog-header */
body.modern-ux .ui-dialog.mux-dialog-no-title:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-titlebar {
    padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6) !important;
    gap: var(--space-2);
    min-height: 0;
    justify-content: flex-end !important;
    border-bottom: none !important;
}

/*
 * Title is often literal &nbsp; — :empty does not match, so the “blank” title still took space.
 * mux-dialog-no-title means no real title: hide the span and keep only the close control.
 */
body.modern-ux .ui-dialog.mux-dialog-no-title:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-title {
    display: none !important;
}

body.modern-ux.dark .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-titlebar,
body.modern-ux.medrio.dark .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-titlebar {
    background: var(--mux-color-bg-paper) !important;
    color: var(--mux-color-text);
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-title {
    font-size: var(--mux-fs-rem-125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-compact);
    margin: 0;
    color: var(--gray-900);
    float: none !important;
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 0;
}

body.modern-ux.dark .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-title,
body.modern-ux.medrio.dark .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-title {
    color: var(--mux-color-text);
}

/* jQuery UI dialog close — one × glyph everywhere (hide legacy .ui-icon-closethick sprite) */
body.modern-ux .ui-dialog .ui-dialog-titlebar-close .ui-icon {
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    text-indent: -9999px !important;
}

body.modern-ux .ui-dialog .ui-dialog-titlebar-close::after {
    content: "\00d7";
    font-size: 1.125rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: var(--gray-900);
    display: block;
}

body.modern-ux.dark .ui-dialog .ui-dialog-titlebar-close::after,
body.modern-ux.medrio.dark .ui-dialog .ui-dialog-titlebar-close::after {
    color: var(--mux-color-text);
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-titlebar-close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    order: 1;
    border-radius: var(--radius-full) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border: none !important;
    background: transparent !important;
    /* jQuery UI 1.8 positions the hit target at 19×18; we use 44×44 + circular hover — center the sprite icon */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: none !important;
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-titlebar-close:hover {
    background: #0000000f !important;
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-titlebar-close:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/* .ui-dialog-content — .ds-dialog-body padding (sides + bottom only; header already has bottom padding) */
body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-content {
    min-height: 4rem !important;
    padding: 0 var(--space-6) var(--space-6) var(--space-6) !important;
    box-sizing: border-box;
    overflow: visible;
    color: var(--gray-900);
    font-size: var(--mux-fs-rem-875);
    line-height: 1.25rem;
    background: transparent !important;
}

body.modern-ux.dark .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-content,
body.modern-ux.medrio.dark .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-content {
    color: var(--mux-color-text);
}

/* Titleless alerts: jQuery UI sets a cramped inline height on content; body padding matches .ds-dialog-body */
body.modern-ux .ui-dialog.mux-dialog-no-title:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-content {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 var(--space-6) var(--space-6) var(--space-6) !important;
    font-size: var(--mux-fs-rem-875);
    line-height: 1.25rem;
}

/* Message is wrapped in <b> — match .ds-dialog-title scale (headline-style alert copy) */
body.modern-ux .ui-dialog.mux-dialog-no-title:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-content b {
    font-size: var(--mux-fs-rem-15);
    font-weight: var(--fw-normal);
    line-height: 2rem;
}

/* FLAT field-level audit log (flat-service popupCptFlatLog → #flat-log-report-service): long variable tables
   must scroll inside the jQuery UI modal. Global .ui-dialog-content { overflow: visible } plus .ui-dialog
   { overflow: hidden } clips overflow without a scrollport (LogReportService uses height: 700 on the dialog). */
body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms):not(.sessionLockoutDialog) .ui-dialog-content#flat-log-report-service {
    overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: min(620px, calc(100vh - 9rem));
    min-height: 0;
}

/* -------------------------------------------------------------------------
 * Legacy overlays: .pod.dialog inside .dialogs (DataEntryPopUp, Query Log, SubjectDataAudit,
 * FieldInfoPopUp content in #div1, viewRowInPortrait, subject dialogs, etc.) — same shell tokens
 * as jQuery UI .ui-dialog Phase E (--mux-ds-dialog-radius, shadow, paper). Skips .mux-compact-pod-dialog.
 * ------------------------------------------------------------------------- */
body.modern-ux .dialogs .pod.dialog:not(.mux-compact-pod-dialog) {
    border-radius: var(--mux-ds-dialog-radius) !important;
    border: none !important;
    background: var(--bg-paper) !important;
    box-shadow: var(--mux-ds-dialog-shadow) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body.modern-ux.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog),
body.modern-ux.medrio.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) {
    background: var(--mux-color-bg-paper) !important;
    box-shadow: var(--mux-ds-dialog-shadow-dark) !important;
}

/* Title strip — direct children (DataEntryPopUp, viewRowInPortrait, …); parity with compact .ui-dialog-titlebar */
body.modern-ux .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.major,
body.modern-ux .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.expandableBar,
body.modern-ux .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-2) var(--space-4) !important;
    min-height: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-paper) !important;
    background-image: none !important;
    box-sizing: border-box !important;
}

body.modern-ux.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.major,
body.modern-ux.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.expandableBar,
body.modern-ux.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.bar,
body.modern-ux.medrio.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.major,
body.modern-ux.medrio.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.expandableBar,
body.modern-ux.medrio.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.bar {
    background: var(--mux-color-bg-paper) !important;
}

/* FieldInfoDialog loads into #div1 — top header is not a direct child of .pod.dialog */
body.modern-ux .dialogs .FieldInfoPopUp.pod.dialog #div1 > header:first-of-type {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-2) var(--space-4) !important;
    min-height: 0 !important;
    margin: 0 !important;
    float: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: var(--bg-paper) !important;
    background-image: none !important;
    box-sizing: border-box !important;
}

body.modern-ux.dark .dialogs .FieldInfoPopUp.pod.dialog #div1 > header:first-of-type,
body.modern-ux.medrio.dark .dialogs .FieldInfoPopUp.pod.dialog #div1 > header:first-of-type {
    background: var(--mux-color-bg-paper) !important;
}

body.modern-ux .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.major h1,
body.modern-ux .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.expandableBar h1,
body.modern-ux .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.bar > h1,
body.modern-ux .dialogs .FieldInfoPopUp.pod.dialog #div1 > header:first-of-type h1 {
    float: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: var(--mux-fs-rem-125) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-compact) !important;
    color: var(--gray-900) !important;
}

body.modern-ux.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.major h1,
body.modern-ux.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.expandableBar h1,
body.modern-ux.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.bar > h1,
body.modern-ux.dark .dialogs .FieldInfoPopUp.pod.dialog #div1 > header:first-of-type h1,
body.modern-ux.medrio.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.major h1,
body.modern-ux.medrio.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.expandableBar h1,
body.modern-ux.medrio.dark .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header.bar > h1,
body.modern-ux.medrio.dark .dialogs .FieldInfoPopUp.pod.dialog #div1 > header:first-of-type h1 {
    color: var(--mux-color-text) !important;
}

body.modern-ux .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header .tool-bar,
body.modern-ux .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > header .tool-bar.top-right,
body.modern-ux .dialogs .FieldInfoPopUp.pod.dialog #div1 > header:first-of-type .tool-bar,
body.modern-ux .dialogs .FieldInfoPopUp.pod.dialog #div1 > header:first-of-type .tool-bar.top-right {
    float: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Primary scroll body: Query Log / Audit Log / similar (JS sets height on .body) */
body.modern-ux .dialogs .pod.dialog:not(.mux-compact-pod-dialog) > .body {
    box-sizing: border-box !important;
    padding: 0 var(--space-6) var(--space-6) var(--space-6) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

/* jQuery UI confirm dialogs (e.g. SelectForms): both actions use .ds-btn-primary look */
body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane {
    background: var(--bg-paper) !important;
    padding: var(--space-6) !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
}

body.modern-ux.dark .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane,
body.modern-ux.medrio.dark .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane {
    background: var(--mux-color-bg-paper) !important;
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane .ui-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2);
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--space-4) !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-md) !important;
    background: var(--brand) !important;
    color: #000 !important;
    font-family: var(--font-family) !important;
    font-size: var(--mux-fs-14) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    box-shadow: var(--shadow-sm) !important;
    text-shadow: none !important;
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane .ui-button .ui-button-text {
    color: inherit !important;
    padding: 0 !important;
    line-height: var(--lh-none) !important;
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane .ui-button:hover:not(.ui-state-disabled) {
    background: #3aa7f0 !important;
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane .ui-button:active:not(.ui-state-disabled) {
    background: var(--brand-dark) !important;
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane .ui-button:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane .ui-button.ui-state-disabled,
body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane .ui-button[disabled],
body.modern-ux .ui-dialog:not(.mux-dialog-annotated-forms) .ui-dialog-buttonpane .ui-button[aria-disabled="true"] {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    box-shadow: none !important;
    opacity: 0.85 !important;
    cursor: not-allowed !important;
}

/* -------------------------------------------------------------------------
   Manual Query — jQuery UI dialog (.ManualQueryCtrl); width 270px in JS.
   branding-medrio.css forces legacy #00aeef on .ManualQueryCtrl / a.button.action — override to DS tokens.
   Inline field popups: compact .ui-dialog-titlebar so strip height tracks the close control (~28px), not Phase E
   header padding + 44px close (JS may still set display:none; when visible, bar stays short).
   Same for MultiReasonsCtrl and legacy #divManualQueryContainer (MedrioJS.js).
   ------------------------------------------------------------------------- */
body.modern-ux .ui-dialog:has(.ui-dialog-content.ManualQueryCtrl) .ui-dialog-titlebar,
body.modern-ux .ui-dialog:has(#divManualQueryContainer.ui-dialog-content) .ui-dialog-titlebar,
body.modern-ux .ui-dialog:has(.ui-dialog-content.MultiReasonsCtrl) .ui-dialog-titlebar {
    padding: var(--space-1) var(--space-2) !important;
    gap: var(--space-2) !important;
    min-height: 0 !important;
}

body.modern-ux .ui-dialog:has(.ui-dialog-content.ManualQueryCtrl) .ui-dialog-title,
body.modern-ux .ui-dialog:has(#divManualQueryContainer.ui-dialog-content) .ui-dialog-title,
body.modern-ux .ui-dialog:has(.ui-dialog-content.MultiReasonsCtrl) .ui-dialog-title {
    line-height: 1.25rem !important;
    font-size: var(--mux-fs-rem-875) !important;
    margin: 0 !important;
}

body.modern-ux .ui-dialog:has(.ui-dialog-content.ManualQueryCtrl) .ui-dialog-titlebar-close,
body.modern-ux .ui-dialog:has(#divManualQueryContainer.ui-dialog-content) .ui-dialog-titlebar-close,
body.modern-ux .ui-dialog:has(.ui-dialog-content.MultiReasonsCtrl) .ui-dialog-titlebar-close {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: var(--radius-sm) !important;
}

body.modern-ux .ui-dialog:has(.ui-dialog-content.ManualQueryCtrl) {
    width: min(22rem, calc(100vw - 2rem)) !important;
    min-width: min(18rem, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem) !important;
    box-sizing: border-box !important;
}

body.modern-ux .ui-dialog .ui-dialog-content.ManualQueryCtrl {
    padding: var(--space-5) var(--space-6) var(--space-6) !important;
}

body.modern-ux .ui-dialog .ManualQueryCtrl > br {
    display: none;
}

body.modern-ux .ui-dialog .ManualQueryCtrl > div[style*="font-size:12px"] {
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--gray-900);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    line-height: var(--lh-snug);
}

body.modern-ux .ui-dialog .ManualQueryCtrl > div[style*="font-size:12px"]:first-child {
    margin-top: 0;
}

body.modern-ux .ui-dialog .ManualQueryCtrl .ManualQueryVarText {
    display: block;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-normal) !important;
    color: var(--text-secondary);
    padding-bottom: 0 !important;
    margin-bottom: var(--space-1);
    white-space: normal;
}

body.modern-ux .ui-dialog .ManualQueryCtrl .ReasonsCtrl {
    margin-top: var(--space-1);
}

body.modern-ux .ui-dialog .ManualQueryCtrl .ReasonsCtrl strong {
    display: block;
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-semibold);
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

body.modern-ux .ui-dialog .ManualQueryCtrl .ReasonsCtrl br {
    display: none;
}

body.modern-ux .ui-dialog .ManualQueryCtrl select.ReasonsList,
body.modern-ux .ui-dialog .ManualQueryCtrl select.UserAssignmentList {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.modern-ux .ui-dialog .ManualQueryCtrl textarea.ManualQueryDescription {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 6.5rem;
    resize: vertical;
    margin-top: 0;
}

body.modern-ux .ui-dialog .ManualQueryCtrl .manual-query-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-5) !important;
    padding-right: 0 !important;
    text-align: unset !important;
}

body.modern-ux .ui-dialog .ManualQueryCtrl .manual-query-actions > span {
    margin-left: 0 !important;
}

/* Cancel — .ds-btn-outlined; Add — .ds-btn-primary (beats branding-medrio .ManualQueryCtrl / a.button.action) */
body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCancel.action.button,
body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCancel.button.action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    float: none !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: var(--brand-dark) !important;
    border-radius: var(--radius-md, 8px) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCancel.action.button:hover,
body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCancel.button.action:hover {
    border-color: var(--brand-darker) !important;
    background: var(--mux-primary-dark)14 !important;
    background-color: var(--mux-primary-dark)14 !important;
    color: var(--brand-darker) !important;
}

body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCancel.action.button:focus-visible,
body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCancel.button.action:focus-visible {
    outline: 2px solid var(--brand-dark) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCreate.action.button,
body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCreate.button.action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    float: none !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-radius: var(--radius-md, 8px) !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    color: var(--mux-primary-contrast) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCreate.action.button:hover,
body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCreate.button.action:hover {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    background-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCreate.action.button:focus-visible,
body.modern-ux .ui-dialog .ManualQueryCtrl a#btnCreate.button.action:focus-visible {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

body.modern-ux.dark .ui-dialog .ManualQueryCtrl > div[style*="font-size:12px"],
body.modern-ux.medrio.dark .ui-dialog .ManualQueryCtrl > div[style*="font-size:12px"],
body.modern-ux.dark .ui-dialog .ManualQueryCtrl .ReasonsCtrl strong,
body.modern-ux.medrio.dark .ui-dialog .ManualQueryCtrl .ReasonsCtrl strong {
    color: var(--mux-color-text);
}

body.modern-ux.dark .ui-dialog .ManualQueryCtrl .ManualQueryVarText,
body.modern-ux.medrio.dark .ui-dialog .ManualQueryCtrl .ManualQueryVarText {
    color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   jQuery UI: Generate Annotated Forms (manage home — iframe in #dlgAnnotatedForms)
   Flat chrome, opaque shell (no page bleed-through), iframe fills width/height.
   Do not set width/height with !important — conflicts with jQuery UI 1.8 position math.
   When window.MEDRIO_MUX_ANNOTATED_FORMS_DIALOG === true (set from modern-ux-theme.js
   unless overridden), AnnotatedForms.js sets inline size + recenters after layout.
   Caps only below. No position: fixed; no !important on top/left/transform (draggable).
   ------------------------------------------------------------------------- */
body.modern-ux .ui-dialog.mux-dialog-annotated-forms {
    max-width: 95vw !important;
    max-height: 90vh !important;
    margin: 0 !important;
    border: none;
    border-radius: var(--mux-ds-dialog-radius);
    box-shadow: var(--mux-ds-dialog-shadow);
    overflow: hidden;
    padding: 0;
    font-family: var(--mux-font-family);
    background: var(--bg-paper);
    box-sizing: border-box;
    isolation: isolate;
}

body.modern-ux .ui-dialog.mux-dialog-annotated-forms .ui-dialog-titlebar {
    border: none !important;
    border-bottom: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: var(--bg-paper);
    background-image: none !important;
    color: var(--gray-900);
    padding: var(--space-3) var(--space-4) var(--space-2) var(--space-4);
    min-height: 0;
    font-weight: var(--fw-semibold);
    font-size: var(--mux-fs-rem-125);
    line-height: var(--lh-compact);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--space-3);
}

/* Title text duplicates the iframe page heading; close button stays in title bar */
body.modern-ux .ui-dialog.mux-dialog-annotated-forms .ui-dialog-title {
    display: none !important;
}

body.modern-ux .ui-dialog.mux-dialog-annotated-forms .ui-dialog-titlebar-close {
    float: none;
    border: 1px solid transparent;
    background: transparent;
    margin: 0;
    padding: 0;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0;
    right: 0;
}

body.modern-ux .ui-dialog.mux-dialog-annotated-forms .ui-dialog-titlebar-close:hover {
    background-color: #0000000f;
    border-color: var(--border);
}

body.modern-ux .ui-dialog.mux-dialog-annotated-forms .ui-dialog-titlebar-close:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

/* Let jQuery UI 1.8 own content height (px); height:100% !important broke the % base and collapsed the pane. */
body.modern-ux .ui-dialog.mux-dialog-annotated-forms .ui-dialog-content#dlgAnnotatedForms {
    /* Tall enough for form + post-download job status (multi-line) without iframe scrollbar */
    min-height: 580px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--bg-paper) !important;
    gap: 0;
}

body.modern-ux #dlgAnnotatedForms .annotatedFormsDialog {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
}

/* Full-pane overlay (was a top flex strip — spinner sat under title bar with empty iframe below) */
body.modern-ux #dlgAnnotatedForms .annotated-forms-loading {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: 0;
    text-align: center;
    font-size: var(--mux-font-size);
    color: var(--muted-foreground);
    border: none;
    background: color-mix(in srgb, var(--bg-paper) 92%, transparent);
    box-sizing: border-box;
}

body.modern-ux.medrio.dark #dlgAnnotatedForms .annotated-forms-loading,
body.modern-ux.dark #dlgAnnotatedForms .annotated-forms-loading {
    background: color-mix(in srgb, var(--bg-paper) 88%, transparent);
}

body.modern-ux #dlgAnnotatedForms .annotated-forms-loading[style*="display: none"],
body.modern-ux #dlgAnnotatedForms .annotated-forms-loading[style*="display:none"] {
    display: none !important;
    padding: 0 !important;
    border: none !important;
}

body.modern-ux #dlgAnnotatedForms iframe.annotated-forms-iframe {
    display: block;
    width: 100% !important;
    flex: 1 1 auto;
    min-height: 0;
    /* Slightly under-fill the flex slot so the dialog pane does not gain a second scrollbar */
    height: calc(100% - 1px);
    max-height: 100%;
    border: none;
    background: var(--bg-paper);
    box-sizing: border-box;
}

/* GenerateAnnotatedForms.aspx inside iframe (body.modern-ux from modern-ux-theme.js) */
/* Title matches jQuery dialog title — hide in-frame heading to save space and avoid duplicate chrome */
body.modern-ux .annotated-forms-iframe-page.iframePadding {
    padding: 0.75rem 1rem 1.5rem;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
}

/* Job status after “Download forms (PDF)” — extra room so text + link are not clipped at iframe bottom */
body.modern-ux .annotated-forms-iframe-page .jobStatusMessage {
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .annotated-forms-iframe-page .divOdsControlOnAnnotated {
    margin-bottom: 0.75rem;
}

body.modern-ux .annotated-forms-iframe-page .chkLstContainer {
    height: 120px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--mux-radius);
    background: var(--input-background);
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--mux-color-divider) transparent;
}

body.modern-ux .annotated-forms-iframe-page .chkLstContainer::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.modern-ux .annotated-forms-iframe-page .chkLstContainer::-webkit-scrollbar-thumb {
    background-color: var(--mux-color-divider);
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    background-clip: padding-box;
}

body.modern-ux .annotated-forms-iframe-page .chkLstContainer::-webkit-scrollbar-track {
    background: transparent;
}

body.modern-ux .annotated-forms-iframe-page table[width="98%"] {
    width: 100% !important;
}

/* Custom header (Add custom header) — global input[type=text] uses max-width:20rem; undo in iframe */
body.modern-ux .annotated-forms-iframe-page #divHeader {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.modern-ux .annotated-forms-iframe-page .ga-header-input,
body.modern-ux .annotated-forms-iframe-page #divHeader input.ga-header-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}

/* GenerateAnnotatedForms.aspx action: "Download forms (PDF)" — text button parity */
body.modern-ux .annotated-forms-iframe-page .m-action-button > a,
body.modern-ux .annotated-forms-iframe-page a[id*="lnkAnnotation"],
body.modern-ux .annotated-forms-iframe-page a[id*="GeneratePDF"],
body.modern-ux .annotated-forms-iframe-page a[id*="DownloadPDF"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    min-height: 36px;
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--brand-accessible) !important;
    font-family: var(--font-family);
    font-size: var(--mux-fs-14);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-none);
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    box-shadow: none;
    transition:
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

body.modern-ux .annotated-forms-iframe-page .m-action-button > a:hover,
body.modern-ux .annotated-forms-iframe-page a[id*="lnkAnnotation"]:hover,
body.modern-ux .annotated-forms-iframe-page a[id*="GeneratePDF"]:hover,
body.modern-ux .annotated-forms-iframe-page a[id*="DownloadPDF"]:hover {
    background-color: var(--mux-brand-accessible-08);
    color: var(--brand-accessible) !important;
}

body.modern-ux .annotated-forms-iframe-page .m-action-button > a:active,
body.modern-ux .annotated-forms-iframe-page a[id*="lnkAnnotation"]:active,
body.modern-ux .annotated-forms-iframe-page a[id*="GeneratePDF"]:active,
body.modern-ux .annotated-forms-iframe-page a[id*="DownloadPDF"]:active {
    background-color: var(--mux-brand-accessible-12);
    color: var(--brand-accessible) !important;
}

body.modern-ux .annotated-forms-iframe-page .m-action-button > a:focus-visible,
body.modern-ux .annotated-forms-iframe-page a[id*="lnkAnnotation"]:focus-visible,
body.modern-ux .annotated-forms-iframe-page a[id*="GeneratePDF"]:focus-visible,
body.modern-ux .annotated-forms-iframe-page a[id*="DownloadPDF"]:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

/*
body.modern-ux .annotated-forms-iframe-page table[cellpadding] td {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}*/

/* Full-width two-column row (override legacy td width="400") */
body.modern-ux .annotated-forms-iframe-page table[cellpadding="4px"] {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

body.modern-ux .annotated-forms-iframe-page table[cellpadding="4px"] > tbody > tr:first-child > td {
    width: 50% !important;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0.75rem;
    vertical-align: top;
}

body.modern-ux .annotated-forms-iframe-page table[cellpadding="4px"] > tbody > tr:first-child > td + td {
    padding-right: 0;
    padding-left: 0.75rem;
}

/* Iframe document: one vertical scroll (window), no horizontal bleed */
html:has(body.modern-ux .annotated-forms-iframe-page) {
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

body.modern-ux:has(.annotated-forms-iframe-page) {
    overflow-x: hidden;
}

body.modern-ux.dark .annotated-forms-iframe-page .chkLstContainer {
    background: var(--mux-color-bg-paper);
    border-color: var(--border);
}

body.modern-ux .DataTable .am #SubPageContent label {
    padding-right: 10px;
}

body.modern-ux .med-global-nav-placeholder {
    height: 92px;
}

body.modern-ux .nav-flyout {
    top: 92px;
}

/* Narrow viewports: fixed 92px on site-toolbar + placeholder clips when the top-right cluster wraps
   or the tab row grows — study/user/help can overlap .main-nav (see ~910px). Let chrome grow;
   nudge mega-menu / backdrop below logo row + tab row (tune 152px in QA if flyout misaligns). */
@media (max-width: 991px) {
    body.modern-ux site-toolbar.med-global-nav {
        height: auto !important;
        min-height: 92px;
    }

    body.modern-ux .med-global-nav-placeholder {
        height: auto !important;
        min-height: 92px;
    }

    body.modern-ux .nav-flyout {
        top: 152px !important;
    }

    body.modern-ux site-toolbar .nav-flyout .sub-menu-backdrop {
        margin-top: 152px !important;
    }

    body.modern-ux nav.main-nav a.nav-item,
    body.modern-ux .main-nav a.nav-item {
        white-space: nowrap;
    }
}

/* -------------------------------------------------------------------------
   Main nav mega-menu (nav-flyout + med-card submenus)
   Multi-column flex wrap; group headings + item links aligned with theme tokens.
   Configure: left .submenu-items | vertical .divider | .group columns (legacy spacing).
   ------------------------------------------------------------------------- */
body.modern-ux .nav-flyout .nav-flyout-content {
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: visible;
}

body.modern-ux .nav-flyout .flyout-arrow {
    filter: drop-shadow(0 -1px 2px var(--mux-color-black-08));
}

body.modern-ux .nav-flyout med-card.med-card {
    /* Closer to legacy inline padding (20px 40px) rhythm, slightly tighter horizontal than before. */
    padding: 1rem 1.5rem !important;
    border: 1px solid var(--mux-color-divider);
    background: var(--card);
    box-shadow: var(--mux-shadow-hover);
    box-sizing: border-box;
    /* Fill flyout width; columns wrap to new rows instead of forcing horizontal scroll. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
}

/* !important: global nav shell may set space-between / flex-grow on columns, which spreads
   columns horizontally (Manage, Configure, …). Keep a single dense row/column grid.
   Row vs column stacking: each top-level nav section is usually one .group sibling; flex lays
   them out in row order (Manage: many columns). Configure stacks “Sites” / “Groups” because
   those blocks live inside the same .group — that is markup/data shape, not something CSS can
   merge across sibling .group elements. */
body.modern-ux .nav-flyout .submenu,
body.modern-ux .nav-flyout med-card.med-card .submenu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    /* Stretch so the Configure vertical divider spans the full menu height like the legacy UI. */
    align-items: stretch !important;
    align-content: flex-start !important;
    /* row-gap | column-gap — wider column gutter for multi-column mega-menus (e.g. Manage). */
    gap: 0.5rem 1.125rem !important;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    min-height: 450px !important;
}

/* Left column (Configure): fixed-ish width; do not share the same flex basis as grouped columns. */
body.modern-ux .nav-flyout .submenu > .submenu-items {
    flex: 0 1 200px;
    min-width: 150px;
    max-width: 220px;
    flex-grow: 0 !important;
    margin-inline: 0 !important;
}

/* Grouped sections: flex-grow 0 so columns hug content — grow was stretching groups and misaligning vs. the left list.
   Column height matches the tallest .group (submenu align-items: stretch). If inner layout used space-between,
   sections were spread with huge vertical gaps; keep sections stacked from the top with consistent tight gaps. */
body.modern-ux .nav-flyout .submenu > .group {
    flex: 0 1 5rem;
    min-width: 12rem;
    max-width: 200px;
    flex-grow: 0 !important;
    margin-inline: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch;
    gap: 0.375rem;
}

/*
 * Legacy markup inserts an empty .divider between .submenu-items and .group columns.
 * As a flex item with align-self: stretch it can still throw off wrapped rows / leave a
 * dead band above the first .group. Remove it from layout and draw the vertical rule on
 * the left column instead (same look, no extra flex track).
 */
body.modern-ux .nav-flyout .submenu:has(> .divider) > .submenu-items {
    border-right: 1px solid var(--mux-color-divider);
    padding-right: 0.75rem;
    margin-right: 0.25rem;
}

body.modern-ux .nav-flyout .submenu > .divider {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    background: none !important;
}

body.modern-ux .nav-flyout .submenu-items {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

body.modern-ux .nav-flyout .group .title {
    font-size: var(--mux-fs-rem-6875);
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0.02em;
    /* Title case (not ALL CAPS); capitalize normalizes word boundaries for typical i18n strings. */
    text-transform: capitalize;
    color: #000 !important;
    margin: 0;
    padding-bottom: 0 !important;
    line-height: var(--lh-compact);
}

/* Mega-menu links — full .ds-btn.ds-btn-text parity (same !important + hover/active as a.ds-btn.ds-btn-text) */
body.modern-ux .nav-flyout a.item {
    display: block;
    padding: 0.3rem 0.5rem;
    margin: 0 -0.25rem;
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug);
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: var(--brand-accessible) !important;
    box-shadow: none;
    transform: none;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    transition:
        background-color var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)),
        border-color var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)),
        color var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)),
        box-shadow var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
}

body.modern-ux .nav-flyout a.item:hover:not(:disabled) {
    background-color: #0d5fa814 !important;
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
}

body.modern-ux .nav-flyout a.item:active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .nav-flyout a.item:focus {
    outline: none;
}

body.modern-ux .nav-flyout a.item:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
    color: var(--brand-accessible) !important;
}

body.modern-ux .main-nav {
    background-color: var(--background);
}

body.modern-ux .main-nav li {
    position: relative;
    display: flex;
    align-items: center;
    color: #000;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-16);
    font-style: normal;
    font-weight: var(--fw-normal);
    line-height: normal;
}

body.modern-ux .main-nav a.nav-item,
body.modern-ux .main-nav a.quick-links {
    font: inherit;
    color: inherit;
}

body.modern-ux .main-nav a.nav-item {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Bookmark control sits in the tab row — align with nav label (avoid fixed top; placeholder + default nav share layout) */
body.modern-ux .main-nav li .tab-bookmark {
    position: relative !important;
    top: auto !important;
    left: 10px !important;
    transform: none !important;
    align-self: center;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Telerik RadWindow (RadWindow_MedrioWindow skin) — Phase E shell parity
   Matches canonical .ds-dialog (d5671d3a…css) + shared tokens with .ui-dialog / med-dialog.
   ------------------------------------------------------------------------- */
body.modern-ux div.RadWindow.RadWindow_MedrioWindow {
    font-family: var(--mux-font-family);
    /* Phase E parity with .ds-dialog / .ui-dialog / med-dialog (CSS-Only-UI-2026 — onion-steam figma site) */
    border-radius: var(--mux-ds-dialog-radius);
    border: none;
    box-shadow: var(--mux-ds-dialog-shadow);
    overflow: hidden;
    /* Center in viewport; RadWindow sets position:absolute + inline coords — !important wins over inline */
    
    /*left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;*/
    margin: 0 !important;
    box-sizing: border-box;
}

body.modern-ux.dark div.RadWindow.RadWindow_MedrioWindow,
body.modern-ux.medrio.dark div.RadWindow.RadWindow_MedrioWindow {
    box-shadow: var(--mux-ds-dialog-shadow-dark);
}

/* RadWindowManager modal overlay — Telerik sets dark grey + opacity inline; guideline = flat app background */
body.modern-ux div[id*="RadWindowManager"][id$="_modal"],
body.modern-ux div[id*="radwindowmanager"][id$="_modal"] {
    background: var(--background) !important;
    background-color: var(--background) !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Centering and height of selectFileDialog are left to Telerik's own inline-style logic.
   Overriding top/left/height with !important here fights Telerik's repositioning on every
   content change (e.g. CSV/Excel radio switch) and causes visible dialog jumps. */

/* Strip GIF/PNG frame sprites (keep .rwControlButtons sprites for close/min/max icons) */
body.modern-ux .RadWindow_MedrioWindow .rwTopLeft,
body.modern-ux .RadWindow_MedrioWindow .rwTopRight,
body.modern-ux .RadWindow_MedrioWindow .rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow .rwFooterLeft,
body.modern-ux .RadWindow_MedrioWindow .rwFooterRight,
body.modern-ux .RadWindow_MedrioWindow .rwFooterCenter,
body.modern-ux .RadWindow_MedrioWindow .rwTopResize,
body.modern-ux .RadWindow_MedrioWindow .rwBodyLeft,
body.modern-ux .RadWindow_MedrioWindow .rwBodyRight,
body.modern-ux .RadWindow_MedrioWindow .rwStatusbar,
body.modern-ux .RadWindow_MedrioWindow .rwStatusbar div,
body.modern-ux .RadWindow_MedrioWindow .rwPopupButton,
body.modern-ux .RadWindow_MedrioWindow .rwPopupButton span,
body.modern-ux .RadWindow_MedrioWindow.rwMinimizedWindow .rwCorner,
body.modern-ux .RadWindow_MedrioWindow .rwStatusbarRow .rwCorner,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwTopLeft,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwTopRight,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwFooterLeft,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwFooterRight,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwFooterCenter,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwTopResize,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwBodyLeft,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwBodyRight,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwStatusbar,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwStatusbar div,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwPopupButton,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwPopupButton span,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwStatusbarRow .rwBodyLeft,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwStatusbarRow .rwBodyRight,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwStatusbarRow .rwCorner,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwTopLeft,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwTopRight,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwTitlebar,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwFooterLeft,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwFooterRight,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwFooterCenter,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwTopResize,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwStatusbar div,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwStatusbar,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwPopupButton,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwPopupButton span,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwBodyLeft,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwBodyRight,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow .rwStatusbarRow .rwCorner,
body.modern-ux .rwInactiveWindow.RadWindow_MedrioWindow .rwShadow.rwMinimizedWindow .rwCorner {
    background-image: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Undo tools.css “Aero” table opacity on chrome cells */
body.modern-ux .RadWindow_MedrioWindow table .rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow table .rwTopLeft,
body.modern-ux .RadWindow_MedrioWindow table .rwTopRight,
body.modern-ux .RadWindow_MedrioWindow table .rwFooterLeft,
body.modern-ux .RadWindow_MedrioWindow table .rwFooterRight,
body.modern-ux .RadWindow_MedrioWindow table .rwFooterCenter,
body.modern-ux .RadWindow_MedrioWindow table .rwBodyLeft,
body.modern-ux .RadWindow_MedrioWindow table .rwBodyRight,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTopLeft,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTopRight,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterLeft,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterRight,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterCenter,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwBodyLeft,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwBodyRight {
    filter: none !important;
    opacity: 1 !important;
}

/* Title row: flat bar */
body.modern-ux .RadWindow_MedrioWindow table .rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow table .rwTopResize,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow .rwShadow table.rwShadow .rwTitlebar,
body.modern-ux .rwMinimizedWindow.RadWindow_MedrioWindow tr.rwTitleRow td.rwTitlebar,
body.modern-ux .rwMinimizedWindow.RadWindow_MedrioWindow tr.rwTitleRow div.rwTopResize,
body.modern-ux .RadWindow_MedrioWindow.rwInactiveWindow .rwShadow .rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow.rwInactiveWindow .rwShadow .rwTopResize,
body.modern-ux .RadWindow_MedrioWindow.rwInactiveWindow .rwShadow tr.rwTitleRow td.rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow.rwInactiveWindow .rwShadow tr.rwTitleRow div.rwTopResize {
    background: var(--bg-paper) !important;
    background-image: none !important;
}

body.modern-ux .RadWindow_MedrioWindow.rwInactiveWindow .rwShadow .rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow.rwInactiveWindow .rwShadow .rwTopResize,
body.modern-ux .RadWindow_MedrioWindow.rwInactiveWindow .rwShadow tr.rwTitleRow td.rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow.rwInactiveWindow .rwShadow tr.rwTitleRow div.rwTopResize {
    opacity: 0.92;
}

/* Side / corner cells: paper surface (same as .ds-dialog) */
body.modern-ux .RadWindow_MedrioWindow table .rwTopLeft,
body.modern-ux .RadWindow_MedrioWindow table .rwTopRight,
body.modern-ux .RadWindow_MedrioWindow table .rwBodyLeft,
body.modern-ux .RadWindow_MedrioWindow table .rwBodyRight,
body.modern-ux .RadWindow_MedrioWindow table .rwFooterLeft,
body.modern-ux .RadWindow_MedrioWindow table .rwFooterRight,
body.modern-ux .RadWindow_MedrioWindow table .rwFooterCenter,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTopLeft,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTopRight,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwBodyLeft,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwBodyRight,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterLeft,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterRight,
body.modern-ux .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterCenter {
    background: var(--bg-paper) !important;
}

body.modern-ux div.RadWindow_MedrioWindow .rwTitlebarControls em {
    /* Compact title strip (RadWindow table chrome — not full .ds-dialog header scale) */
    color: var(--gray-900) !important;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-semibold);
    line-height: 1.25rem;
    font-style: normal;
    margin: 0;
}

body.modern-ux.dark div.RadWindow_MedrioWindow .rwTitlebarControls em,
body.modern-ux.medrio.dark div.RadWindow_MedrioWindow .rwTitlebarControls em {
    color: var(--mux-color-text) !important;
}

body.modern-ux div.RadWindow_MedrioWindow td.rwWindowContent {
    background-color: var(--bg-paper) !important;
    /* Iframe pages usually bring their own padding — outer cell stays flush to avoid double gutters */
    padding: 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}

/* Content row gutters: same surface as .ds-dialog body / iframe pane */
body.modern-ux .RadWindow_MedrioWindow tr.rwContentRow td.rwBodyLeft,
body.modern-ux .RadWindow_MedrioWindow tr.rwContentRow td.rwBodyRight,
body.modern-ux .RadWindow_MedrioWindow .rwShadow tr.rwContentRow td.rwBodyLeft,
body.modern-ux .RadWindow_MedrioWindow .rwShadow tr.rwContentRow td.rwBodyRight {
    background: var(--bg-paper) !important;
}

/* Dark: --bg-paper is not remapped on body; use mux paper like .ds-dialog */
body.modern-ux.dark .RadWindow_MedrioWindow table .rwTopLeft,
body.modern-ux.dark .RadWindow_MedrioWindow table .rwTopRight,
body.modern-ux.dark .RadWindow_MedrioWindow table .rwTitlebar,
body.modern-ux.dark .RadWindow_MedrioWindow table .rwTopResize,
body.modern-ux.dark .RadWindow_MedrioWindow table .rwBodyLeft,
body.modern-ux.dark .RadWindow_MedrioWindow table .rwBodyRight,
body.modern-ux.dark .RadWindow_MedrioWindow table .rwFooterLeft,
body.modern-ux.dark .RadWindow_MedrioWindow table .rwFooterRight,
body.modern-ux.dark .RadWindow_MedrioWindow table .rwFooterCenter,
body.modern-ux.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTopLeft,
body.modern-ux.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTopRight,
body.modern-ux.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTitlebar,
body.modern-ux.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterLeft,
body.modern-ux.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterRight,
body.modern-ux.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterCenter,
body.modern-ux.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwBodyLeft,
body.modern-ux.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwBodyRight,
body.modern-ux.dark .RadWindow_MedrioWindow td.rwWindowContent,
body.modern-ux.dark .RadWindow_MedrioWindow tr.rwContentRow td.rwBodyLeft,
body.modern-ux.dark .RadWindow_MedrioWindow tr.rwContentRow td.rwBodyRight,
body.modern-ux.dark .RadWindow_MedrioWindow .rwShadow tr.rwContentRow td.rwBodyLeft,
body.modern-ux.dark .RadWindow_MedrioWindow .rwShadow tr.rwContentRow td.rwBodyRight,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow table .rwTopLeft,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow table .rwTopRight,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow table .rwTitlebar,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow table .rwTopResize,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow table .rwBodyLeft,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow table .rwBodyRight,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow table .rwFooterLeft,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow table .rwFooterRight,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow table .rwFooterCenter,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTopLeft,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTopRight,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwTitlebar,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterLeft,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterRight,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwFooterCenter,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwBodyLeft,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow.rwShadow table.rwShadow .rwBodyRight,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow td.rwWindowContent,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow tr.rwContentRow td.rwBodyLeft,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow tr.rwContentRow td.rwBodyRight,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow .rwShadow tr.rwContentRow td.rwBodyLeft,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow .rwShadow tr.rwContentRow td.rwBodyRight {
    background: var(--mux-color-bg-paper) !important;
    background-color: var(--mux-color-bg-paper) !important;
}

/* Hide iframe URL / legacy status row (some builds still render the row; VisibleStatusbar="false" is still recommended) */
body.modern-ux .RadWindow_MedrioWindow tr.rwStatusbarRow,
body.modern-ux .RadWindow_MedrioWindow .rwShadow tr.rwStatusbarRow {
    display: none !important;
    height: 0 !important;
    line-height: 0 !important;
    visibility: hidden !important;
}

body.modern-ux .RadWindow_MedrioWindow .rwStatusbar,
body.modern-ux .RadWindow_MedrioWindow .rwShadow .rwStatusbar {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
}

body.modern-ux .RadWindow_MedrioWindow .rwStatusbar input {
    display: none !important;
}

/* Title bar — tighter than .ds-dialog-header (table row + iframe tool windows) */
body.modern-ux .RadWindow_MedrioWindow td.rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow div.rwTitlebar {
    padding: var(--space-2) var(--space-3) !important;
    min-height: 0;
    box-sizing: border-box;
    vertical-align: middle;
    border-bottom: none !important;
}

/*
 * edit_forms_detail.aspx RadWindows — no Title in markup; Telerik shows site name "Medrio" in <em>.
 * Hide that column (icon + close only). Scoped by client id so other RadWindows keep captions.
 * Restored when minimized (taskbar strip).
 */
body.modern-ux .RadWindow_MedrioWindow:not(.rwMinimizedWindow)[id*="editMainContent_test1"] .rwTitlebarControls tr > td:has(> em),
body.modern-ux .RadWindow_MedrioWindow:not(.rwMinimizedWindow)[id*="editMainContent_wdoDeleteVars"] .rwTitlebarControls tr > td:has(> em),
body.modern-ux .RadWindow_MedrioWindow:not(.rwMinimizedWindow)[id*="editMainContent_wdoDefineRows"] .rwTitlebarControls tr > td:has(> em),
body.modern-ux .RadWindow_MedrioWindow:not(.rwMinimizedWindow)[id*="editMainContent_wdoCalculatedVariable"] .rwTitlebarControls tr > td:has(> em) {
    display: none !important;
}

body.modern-ux .RadWindow_MedrioWindow ul.rwControlButtons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: var(--space-1) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.modern-ux .RadWindow_MedrioWindow .rwControlButtons li {
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/*
 * Title-bar sprites (CommandButtonSprites.gif) are authored for ~14–18px tiles.
 * Do not enlarge hit boxes without background-size — that shows multiple sprite cells (2×2 glitch).
 * Use background-color on hover only (never `background:` shorthand — it clears background-image).
 */
body.modern-ux .RadWindow_MedrioWindow .rwControlButtons a {
    position: relative !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    vertical-align: middle !important;
    border-radius: var(--radius-sm) !important;
    background-repeat: no-repeat !important;
}

body.modern-ux .RadWindow_MedrioWindow .rwControlButtons a span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.modern-ux .RadWindow_MedrioWindow .rwControlButtons a:hover {
    background-color: #0000000f !important;
}

/* Close only — match jQuery UI .ui-dialog-titlebar-close (flat ×; Telerik skin sprite is a red tile) */
body.modern-ux .RadWindow_MedrioWindow .rwControlButtons a.rwCloseButton {
    width: 44px !important;
    min-width: 44px !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: none !important;
    background: transparent none !important;
    background-image: none !important;
    border-radius: var(--radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/*
 * Close glyph: text U+00D7 often disappears with Geist / subset fonts (hit area + hover still work).
 * Use an inline SVG so the X is always visible; keep span screen-reader text via existing clip rules.
 */
body.modern-ux .RadWindow_MedrioWindow .rwControlButtons a.rwCloseButton::after {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23111827' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
}

body.modern-ux.dark .RadWindow_MedrioWindow .rwControlButtons a.rwCloseButton::after,
body.modern-ux.medrio.dark .RadWindow_MedrioWindow .rwControlButtons a.rwCloseButton::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23f9fafb' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

body.modern-ux .RadWindow_MedrioWindow .rwControlButtons a.rwCloseButton:hover {
    background-color: #0000000f !important;
    background-image: none !important;
}

body.modern-ux .RadWindow_MedrioWindow .rwControlButtons a.rwCloseButton:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux div.RadWindow_MedrioWindow.rwNoTitleBar tr.rwTitleRow td.rwTitlebar {
    background: var(--bg-paper) !important;
    background-image: none !important;
}

/*
 * RadWindow — borderless shell (replaces per-page <style> for .borderLessDialog).
 * Add CssClass="borderLessDialog" on RadWindow (often with TitleBarVisible=false, VisibleStatusbar=false).
 * Telerik uses .rwTitlebar / .rwStatusbar (lowercase); legacy markup sometimes uses .rwTitleBar / .rwStatusBar.
 */
body.modern-ux div.RadWindow.RadWindow_MedrioWindow.borderLessDialog,
body.modern-ux div.RadWindow.borderLessDialog.RadWindow_MedrioWindow {
    border: none !important;
    padding: 0 !important;
}

body.modern-ux div.RadWindow.RadWindow_MedrioWindow.borderLessDialog .rwTitlebar,
body.modern-ux div.RadWindow.RadWindow_MedrioWindow.borderLessDialog .rwTitleBar,
body.modern-ux div.borderLessDialog.RadWindow_MedrioWindow .rwTitlebar,
body.modern-ux div.borderLessDialog.RadWindow_MedrioWindow .rwTitleBar {
    margin: 0 !important;
    display: none !important;
}

body.modern-ux div.RadWindow.RadWindow_MedrioWindow.borderLessDialog .rwStatusbar,
body.modern-ux div.RadWindow.RadWindow_MedrioWindow.borderLessDialog .rwStatusBar,
body.modern-ux div.borderLessDialog.RadWindow_MedrioWindow .rwStatusbar,
body.modern-ux div.borderLessDialog.RadWindow_MedrioWindow .rwStatusBar {
    display: none !important;
}

body.modern-ux div.RadWindow.RadWindow_MedrioWindow.borderLessDialog .rwContent,
body.modern-ux div.borderLessDialog.RadWindow_MedrioWindow .rwContent {
    border: none !important;
}

/*
 * RadWindow — iframe / external content height helpers (avoids outer scrollbar + clipped footer when
 * AutoSizeBehaviors or inline height is a few px short). Add one utility to RadWindow CssClass:
 *
 *   mux-rw-iframe-lw-32     — RenderMode Lightweight: div.rwContent.rwExternalContent (≈512px+ min)
 *   mux-rw-iframe-tbl-36    — classic table shell: SubjectStatuses-style wide/tall iframe
 *   mux-rw-iframe-tbl-annot — ~800×wide annotation iframe (taller shell; overrides JS SetSize height in modern-ux)
 *   mux-rw-iframe-tbl-hv    — ManageHeaderVars–style 30rem shell
 */
body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-lw-32 {
    min-height: 32rem !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-lw-32 > div.rwContent.rwExternalContent {
    overflow: hidden !important;
    min-height: 32rem !important;
}

/*
 * edit_approval.aspx — editApprovalsWindow (EditApprovalStepRoles.aspx iframe).
 * Do not set min-height in rem here: RadWindow uses minHeight ~480px and often renders shorter (e.g. 474px);
 * 32rem (~512px) on .rwContent forced the content pane taller than the window → spurious vertical scrollbar.
 */
body.modern-ux div[id^="RadWindowWrapper_"][id$="_editApprovalsWindow"].RadWindow.RadWindow_MedrioWindow {
    box-sizing: border-box;
}

body.modern-ux div[id^="RadWindowWrapper_"][id$="_editApprovalsWindow"] > div.rwContent.rwExternalContent {
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-36 {
    min-height: 36rem !important;
    min-width: 35rem !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-36 table.rwTable {
    min-height: 36rem !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-36 td.rwWindowContent.rwExternalContent {
    overflow: hidden !important;
    min-height: 32rem !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot {
    min-height: 36rem !important;
    height: 36rem !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot table.rwTable {
    min-height: 36rem !important;
    height: 100% !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot td.rwWindowContent.rwExternalContent {
    overflow: hidden !important;
    min-height: 32rem !important;
}

/*
 * edit_forms_list.aspx — rwAnnotation (Generate Annotated Forms): Telerik sets the title <em> to a very
 * large inline width (~676px). In an ~800px window that steals space from the last column so the close
 * control is clipped or pushed out of view. The iframe page already has an H1 — hide the chrome title cell.
 */
body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot .rwTitlebarControls tr > td:nth-child(2) {
    display: none !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot .rwTitlebarControls tr > td:last-child {
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot .rwTitlebarControls ul.rwControlButtons {
    width: auto !important;
    min-width: 36px !important;
    max-width: none !important;
    overflow: visible !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot .rwControlButtons a.rwCloseButton {
    flex-shrink: 0 !important;
    /* Shorter title row than default 44px control + 12px vertical padding on bar */
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot .rwControlButtons a.rwCloseButton::after {
    width: 18px !important;
    height: 18px !important;
    background-size: 16px 16px !important;
}

/* Tighter chrome: iframe page carries the main heading */
body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot td.rwTitlebar,
body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot div.rwTitlebar {
    padding: var(--space-1) var(--space-3) !important;
    line-height: 1 !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot .rwTitlebarControls table td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
}

/* Telerik leaves an empty top-resize strip above the title controls; it adds dead vertical space here */
body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot td.rwTitlebar > div.rwTopResize {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    border: 0 !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-annot tr.rwTitleRow td.rwCorner {
    vertical-align: middle !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-hv {
    min-height: 30rem !important;
    height: 30rem !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-hv table.rwTable {
    min-height: 30rem !important;
    height: 100% !important;
}

body.modern-ux .RadWindow_MedrioWindow.mux-rw-iframe-tbl-hv td.rwWindowContent.rwExternalContent {
    overflow: hidden !important;
    min-height: 26rem !important;
}

/* -------------------------------------------------------------------------
   Headings (H1–H6) – modern scale, theme font and color
   ------------------------------------------------------------------------- */
body.modern-ux h1,
body.modern-ux h2,
body.modern-ux h3,
body.modern-ux h4,
body.modern-ux h5,
body.modern-ux h6 {
    font-family: var(--mux-font-family);
    color: var(--foreground);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-compact);
    margin: 0 0 0.5em;
    letter-spacing: -0.02em;
}

body.modern-ux h1 {
    font-size: var(--mux-fs-rem-15);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    margin-bottom: 0.5em !important;
}

body.modern-ux h2 {
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-medium);
    line-height: var(--lh-compact);
    margin-bottom: 0.45em;
}

body.modern-ux h3 {
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-base);
    margin-bottom: 0.4em;
}

body.modern-ux h4 {
    font-size: var(--mux-fs-rem-9375);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-base);
    margin-bottom: 0.35em;
}

body.modern-ux h5 {
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    margin-bottom: 0.3em;
}

body.modern-ux h6 {
    font-size: var(--mux-fs-rem-8125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--muted-foreground);
    margin-bottom: 0.25em;
}

body.modern-ux h1:last-child,
body.modern-ux h2:last-child,
body.modern-ux h3:last-child,
body.modern-ux h4:last-child,
body.modern-ux h5:last-child,
body.modern-ux h6:last-child {
    margin: 5px 0 !important;
}

/* Lists — override common.css ul, ol / .body li spacing */
body.modern-ux ul,
body.modern-ux ol {
    margin: 0 0 1em 20px;
}

body.modern-ux .body li {
    margin-bottom: 0.25em;
}

body.modern-ux .body li.rtLI {
    margin-bottom: 0;
}

/* Typography utility classes — CSS-Only-UI-2026 parity */
body.modern-ux .ds-body1 {
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
}

body.modern-ux .ds-body2 {
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-normal);
    line-height: var(--lh-wide);
}

body.modern-ux .ds-caption {
    font-size: var(--mux-fs-rem-75);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
}

body.modern-ux .ds-overline {
    font-size: var(--mux-fs-rem-75);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Data table — CSS-Only-UI-2026 .ds-table (opt-in on <table class="ds-table">; RadGrid/matrix use separate rules) */
body.modern-ux .ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mux-fs-rem-875);
}

body.modern-ux .ds-table th {
    text-align: left;
    font-weight: var(--fw-semibold);
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--border-color);
    color: var(--text-secondary);
}

body.modern-ux .ds-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

body.modern-ux .ds-table tbody tr:hover td {
    background-color: rgba(0, 0, 0, 0.02);
}

body.modern-ux.dark .ds-table tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.04);
}

/* -------------------------------------------------------------------------
   Phase D — CSS-Only-UI-2026 data display: .ds-card, .ds-chip, .ds-alert,
   .ds-divider, .ds-tabs (opt-in; RadGrid/matrix unchanged).
   Spec: https://onion-steam-49836257.figma.site/ (bundle: b05eeb…css)
   ------------------------------------------------------------------------- */

/* Cards */
body.modern-ux .ds-card {
    background-color: var(--bg-paper);
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

body.modern-ux .ds-card.ds-card-elevated {
    border: none;
    box-shadow: var(--shadow-md);
}

body.modern-ux .ds-card-header {
    margin-bottom: var(--space-4);
}

body.modern-ux .ds-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
    justify-content: flex-end;
    align-items: center;
}

body.modern-ux .ds-card.ds-card-active-primary {
    border-left: 4px solid var(--brand);
}

body.modern-ux .ds-card.ds-card-active-error {
    border-left: 4px solid var(--color-error);
}

body.modern-ux .ds-card.ds-card-active-warning {
    border-left: 4px solid var(--color-warning);
}

body.modern-ux .ds-card.ds-card-active-success {
    border-left: 4px solid var(--color-success);
}

body.modern-ux .ds-card.ds-card-active-info {
    border-left: 4px solid var(--color-info);
}

body.modern-ux.dark .ds-card,
body.modern-ux.medrio.dark .ds-card {
    background-color: var(--mux-color-bg-paper);
    border-color: var(--mux-color-divider);
}

/* Chips */
body.modern-ux .ds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 32px;
    padding: 0 var(--space-3);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-8125);
    font-weight: var(--fw-medium);
    line-height: var(--lh-none);
    border-radius: var(--radius-full);
    border: none;
    cursor: default;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
}

body.modern-ux .ds-chip.ds-chip-default {
    background: var(--gray-200);
    color: var(--gray-800);
}

body.modern-ux .ds-chip.ds-chip-primary {
    background: var(--brand);
    color: #000;
}

body.modern-ux .ds-chip.ds-chip-error {
    background: var(--color-error-light);
    color: #000;
}

body.modern-ux .ds-chip.ds-chip-success {
    background: var(--color-success-light);
    color: #000;
}

body.modern-ux .ds-chip.ds-chip-warning {
    background: var(--color-warning-light);
    color: #000;
}

body.modern-ux .ds-chip.ds-chip-info {
    background: var(--color-info-light);
    color: #fff;
}

body.modern-ux .ds-chip.ds-chip-outlined {
    background: transparent;
    border: 1px solid var(--gray-800);
    color: var(--text-primary);
}

body.modern-ux.dark .ds-chip.ds-chip-outlined,
body.modern-ux.medrio.dark .ds-chip.ds-chip-outlined {
    border-color: var(--mux-color-divider);
    color: var(--mux-color-text);
}

/* Alerts */
body.modern-ux .ds-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--mux-fs-rem-1);
    line-height: var(--lh-normal);
    box-sizing: border-box;
}

body.modern-ux .ds-alert.ds-alert-error {
    background: #fef2f2;
    color: var(--color-error-dark);
    border-left: 4px solid var(--color-error);
}

body.modern-ux .ds-alert.ds-alert-warning {
    background: #fffbeb;
    color: var(--color-warning-dark);
    border-left: 4px solid var(--color-warning);
}

body.modern-ux .ds-alert.ds-alert-success {
    background: #f0fdf4;
    color: var(--color-success-dark);
    border-left: 4px solid var(--color-success);
}

body.modern-ux .ds-alert.ds-alert-info {
    background: #eff6ff;
    color: var(--color-info-dark);
    border-left: 4px solid var(--color-info);
}

body.modern-ux.dark .ds-alert.ds-alert-error,
body.modern-ux.medrio.dark .ds-alert.ds-alert-error {
    background: rgba(127, 29, 29, 0.35);
    color: var(--mux-color-text);
    border-left-color: var(--mux-error-light);
}

body.modern-ux.dark .ds-alert.ds-alert-warning,
body.modern-ux.medrio.dark .ds-alert.ds-alert-warning {
    background: rgba(120, 53, 15, 0.35);
    color: var(--mux-color-text);
    border-left-color: var(--mux-warning-light);
}

body.modern-ux.dark .ds-alert.ds-alert-success,
body.modern-ux.medrio.dark .ds-alert.ds-alert-success {
    background: rgba(6, 78, 59, 0.35);
    color: var(--mux-color-text);
    border-left-color: var(--mux-success-light);
}

body.modern-ux.dark .ds-alert.ds-alert-info,
body.modern-ux.medrio.dark .ds-alert.ds-alert-info {
    background: rgba(30, 64, 175, 0.35);
    color: var(--mux-color-text);
    border-left-color: var(--mux-info-light);
}

/* Divider */
body.modern-ux hr.ds-divider,
body.modern-ux .ds-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: var(--space-4) 0;
    padding: 0;
    height: 0;
    background: transparent;
}

body.modern-ux.dark hr.ds-divider,
body.modern-ux.dark .ds-divider,
body.modern-ux.medrio.dark hr.ds-divider,
body.modern-ux.medrio.dark .ds-divider {
    border-top-color: var(--mux-color-divider);
}

/* Tabs — generic (CSS-Only-UI-2026 Basic Tabs: .ds-tab-list 2px rule; .ds-tab 2px inactive / 3px selected) */
body.modern-ux .ds-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux .ds-tab-list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-1);
    border-bottom: 2px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: thin;
    list-style: none;
    margin: 0;
    padding: 0 0 2px;
    box-sizing: border-box;
}

body.modern-ux .ds-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: var(--lh-normal);
    color: var(--gray-800);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

@media (hover: hover) {
    body.modern-ux .ds-tab:hover:not([aria-selected="true"]):not([aria-current="page"]):not(:disabled) {
        color: var(--mux-primary-darker);
        background-color: var(--mux-primary-darker)0a;
    }
}

body.modern-ux .ds-tab:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -3px;
    z-index: 1;
}

body.modern-ux .ds-tab[aria-selected="true"],
body.modern-ux .ds-tab[aria-current="page"] {
    color: #0d5fa8;
    font-weight: 600;
    background-color: var(--mux-primary-darker)26;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: var(--mux-primary-darker);
}

body.modern-ux .ds-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

body.modern-ux .ds-tab .material-icons {
    font-size: var(--mux-fs-18);
}

body.modern-ux .ds-tab-panel {
    padding: var(--space-6) var(--space-2);
    box-sizing: border-box;
}

body.modern-ux .ds-tab-panel[hidden] {
    display: none;
}

body.modern-ux .ds-tabs.ds-tabs-vertical {
    flex-direction: row;
}

body.modern-ux .ds-tabs.ds-tabs-vertical .ds-tab-list {
    flex-direction: column;
    align-items: stretch;
    border-bottom: none;
    border-right: 2px solid var(--border-color);
    min-width: 200px;
    overflow-x: visible;
    overflow-y: auto;
    padding: 0 2px 0 0;
}

body.modern-ux .ds-tabs.ds-tabs-vertical .ds-tab {
    justify-content: flex-start;
    border-bottom: none;
    border-right: 2px solid transparent;
    margin-bottom: 0;
    margin-right: -2px;
}

body.modern-ux .ds-tabs.ds-tabs-vertical .ds-tab[aria-selected="true"],
body.modern-ux .ds-tabs.ds-tabs-vertical .ds-tab[aria-current="page"] {
    color: #0d5fa8;
    font-weight: 600;
    background-color: var(--mux-primary-darker)26;
    border-bottom-color: transparent;
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: var(--mux-primary-darker);
}

body.modern-ux .ds-tab-list.ds-tab-list-contained {
    border-bottom: none;
    background-color: var(--bg-paper);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    gap: var(--space-1);
}

body.modern-ux .ds-tab-list.ds-tab-list-contained .ds-tab {
    border-radius: var(--radius-md);
    border: none;
    margin-bottom: 0;
}

body.modern-ux .ds-tab-list.ds-tab-list-contained .ds-tab[aria-selected="true"],
body.modern-ux .ds-tab-list.ds-tab-list-contained .ds-tab[aria-current="page"] {
    background-color: #0c4a6e;
    color: #fff;
    border-bottom-color: transparent;
    box-shadow: var(--shadow-sm);
}

body.modern-ux.dark .ds-tab,
body.modern-ux.medrio.dark .ds-tab {
    color: #9ca3af;
}

@media (hover: hover) {
    body.modern-ux.dark .ds-tab:hover:not([aria-selected="true"]):not([aria-current="page"]):not(:disabled),
    body.modern-ux.medrio.dark .ds-tab:hover:not([aria-selected="true"]):not([aria-current="page"]):not(:disabled) {
        color: var(--gray-200);
        background-color: #ffffff0d;
    }
}

body.modern-ux.dark .ds-tab[aria-selected="true"],
body.modern-ux.dark .ds-tab[aria-current="page"],
body.modern-ux.medrio.dark .ds-tab[aria-selected="true"],
body.modern-ux.medrio.dark .ds-tab[aria-current="page"] {
    color: var(--mux-primary-light);
    font-weight: 600;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: var(--mux-primary-light);
    background-color: color-mix(in srgb, var(--mux-primary-light) 15%, transparent);
}

body.modern-ux.dark .ds-tab-list.ds-tab-list-contained .ds-tab[aria-selected="true"],
body.modern-ux.dark .ds-tab-list.ds-tab-list-contained .ds-tab[aria-current="page"],
body.modern-ux.medrio.dark .ds-tab-list.ds-tab-list-contained .ds-tab[aria-selected="true"],
body.modern-ux.medrio.dark .ds-tab-list.ds-tab-list-contained .ds-tab[aria-current="page"] {
    background-color: #0369a1;
    color: #fff;
    border-bottom-color: transparent;
}

body.modern-ux.dark .ds-tab-list,
body.modern-ux.medrio.dark .ds-tab-list {
    border-bottom-color: var(--mux-color-divider);
}

body.modern-ux.dark .ds-tabs.ds-tabs-vertical .ds-tab-list,
body.modern-ux.medrio.dark .ds-tabs.ds-tabs-vertical .ds-tab-list {
    border-right-color: var(--mux-color-divider);
}

body.modern-ux.dark .ds-tabs.ds-tabs-vertical .ds-tab[aria-selected="true"],
body.modern-ux.medrio.dark .ds-tabs.ds-tabs-vertical .ds-tab[aria-selected="true"],
body.modern-ux.dark .ds-tabs.ds-tabs-vertical .ds-tab[aria-current="page"],
body.modern-ux.medrio.dark .ds-tabs.ds-tabs-vertical .ds-tab[aria-current="page"] {
    color: var(--mux-primary-light);
    background-color: color-mix(in srgb, var(--mux-primary-light) 15%, transparent);
    border-bottom-color: transparent;
    border-right-width: 3px;
    border-right-style: solid;
    border-right-color: var(--mux-primary-light);
}

/* -------------------------------------------------------------------------
   Phase E — CSS-Only-UI-2026 overlays & misc: .ds-dialog*, [data-tooltip],
   .ds-switch, .ds-badge (opt-in; does not replace Material/jQuery UI dialogs).
   Canonical .ds-dialog: https://onion-steam-49836257.figma.site/_components/v2/04a03c3e7dfb4eacdc1c1a22617e0606b4535c72.css
   (prior bundle: d5671d3a6bdcc58d36c5a6e007763cfc6f8aedcb.css)
   ------------------------------------------------------------------------- */
@keyframes mux-ds-dialog-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mux-ds-dialog-enter {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Backdrop: canonical .ds-dialog-overlay — semi-transparent scrim (matches DS dialog mock / figma bundle) */
body.modern-ux .ds-dialog-overlay {
    position: fixed;
    inset: 0;
    background-color: #00000052;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-6);
    box-sizing: border-box;
    animation: mux-ds-dialog-fade-in 0.2s cubic-bezier(0.2, 0, 0, 1);
}

body.modern-ux .ds-dialog-overlay[hidden] {
    display: none;
}

body.modern-ux .ds-dialog {
    position: relative;
    background-color: var(--bg-paper);
    border-radius: var(--mux-ds-dialog-radius);
    box-shadow: var(--mux-ds-dialog-shadow);
    max-width: 560px;
    min-width: 280px;
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    animation: mux-ds-dialog-enter 0.25s cubic-bezier(0.2, 0, 0, 1);
}

body.modern-ux .ds-dialog.ds-dialog-sm {
    max-width: 312px;
}

body.modern-ux .ds-dialog.ds-dialog-md {
    max-width: 560px;
}

body.modern-ux .ds-dialog.ds-dialog-lg {
    max-width: 700px;
}

body.modern-ux .ds-dialog.ds-dialog-xl {
    max-width: 900px;
}

body.modern-ux .ds-dialog.ds-dialog-full {
    max-width: calc(100vw - 48px);
}

body.modern-ux .ds-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-6) 0 var(--space-6);
    color: var(--text-secondary);
}

body.modern-ux .ds-dialog-icon .material-icons {
    font-size: var(--mux-fs-24);
}

body.modern-ux .ds-dialog-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6);
    box-sizing: border-box;
}

body.modern-ux .ds-dialog-icon + .ds-dialog-header {
    padding-top: var(--space-4);
}

body.modern-ux .ds-dialog-title {
    font-size: var(--mux-fs-rem-15);
    font-weight: var(--fw-normal);
    line-height: 2rem;
    margin: 0;
    color: var(--gray-900);
}

body.modern-ux .ds-dialog-body {
    padding: 0 var(--space-6) var(--space-6) var(--space-6);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    color: var(--gray-900);
    font-size: var(--mux-fs-rem-875);
    line-height: 1.25rem;
    box-sizing: border-box;
}

body.modern-ux .ds-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-6);
    padding-top: 0;
    box-sizing: border-box;
}

body.modern-ux .ds-dialog-footer.ds-dialog-footer-stacked {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-3);
}

body.modern-ux .ds-dialog-footer.ds-dialog-footer-stacked .ds-btn {
    width: 100%;
    justify-content: center;
}

body.modern-ux.dark .ds-dialog-overlay,
body.modern-ux.medrio.dark .ds-dialog-overlay {
    background-color: #0000008a;
}

body.modern-ux.dark .ds-dialog,
body.modern-ux.medrio.dark .ds-dialog {
    background-color: var(--mux-color-bg-paper);
    box-shadow: var(--mux-ds-dialog-shadow-dark);
}

body.modern-ux.dark .ds-dialog-title,
body.modern-ux.dark .ds-dialog-body,
body.modern-ux.medrio.dark .ds-dialog-title,
body.modern-ux.medrio.dark .ds-dialog-body {
    color: var(--mux-color-text);
}

/* -------------------------------------------------------------------------
   jQuery UI session timeout / lock — .sessionLockoutDialog → ds-dialog look
   (#ReloginForm, #TimeoutWarnDiv in ApplicationPage8.master). Modern UX only;
   non–modern-ux keeps legacy .sessionLockoutDialog from common.css / master.css.
   ------------------------------------------------------------------------- */

/* jQuery UI modal backdrop — same scrim as .ds-dialog-overlay (canonical DS dialog) */
body.modern-ux .ui-widget-overlay.ui-front {
    background: #00000052 !important;
    opacity: 1 !important;
}

body.modern-ux.dark .ui-widget-overlay.ui-front,
body.modern-ux.medrio.dark .ui-widget-overlay.ui-front {
    background: #0000008a !important;
}

/*
 * jQuery UI modal vs. in-page overlays (flat data entry, Reason for Field Change, etc.):
 * Angular CDK (.cdk-overlay-container) and Telerik RadCombo (.rcbSlide) often share the same z-index
 * band as the jQuery dialog stack (~1000). An open mat-select / combo list on the form can then paint
 * above the modal and dimmer. While a modal backdrop is present, pull those layers below the dialog
 * stack so the blocking UI reads correctly (modern-ux only).
 */
body.modern-ux:has(.ui-widget-overlay.ui-front) .cdk-overlay-container {
    z-index: 800 !important;
}

body.modern-ux:has(.ui-widget-overlay.ui-front) .rcbSlide {
    z-index: 800 !important;
}

/* Session lock: keep a dimmer so the lock modal reads as blocking */
body.modern-ux:has(.ui-dialog.sessionLockoutDialog.ui-front) .ui-widget-overlay.ui-front {
    background: rgba(0, 0, 0, 0.32) !important;
    opacity: 1 !important;
}

body.modern-ux.dark:has(.ui-dialog.sessionLockoutDialog.ui-front) .ui-widget-overlay.ui-front,
body.modern-ux.medrio.dark:has(.ui-dialog.sessionLockoutDialog.ui-front) .ui-widget-overlay.ui-front {
    background: rgba(0, 0, 0, 0.54) !important;
}

/* Session lock — width + enter animation (shell: shared .ui-dialog:not(.mux-dialog-annotated-forms) above) */
body.modern-ux .ui-dialog.sessionLockoutDialog {
    max-width: min(560px, calc(100vw - 48px)) !important;
    width: min(560px, calc(100vw - 48px)) !important;
    animation: mux-ds-dialog-enter 0.25s cubic-bezier(0.2, 0, 0, 1);
}

/*
 * med-dialog (Stencil / WC) — outer shell parity with Phase E .ds-dialog + .sessionLockoutDialog.
 * Default library pane radius was much smaller than --mux-ds-dialog-radius → stacked modals looked inconsistent.
 */
body.modern-ux med-dialog .med-dialog-pane.sc-med-dialog,
body.modern-ux med-dialog .med-dialog-pane {
    border-radius: var(--mux-ds-dialog-radius) !important;
    overflow: hidden !important;
    border: none !important;
    background: var(--bg-paper) !important;
    box-shadow: var(--mux-ds-dialog-shadow) !important;
}

body.modern-ux.dark med-dialog .med-dialog-pane.sc-med-dialog,
body.modern-ux.dark med-dialog .med-dialog-pane,
body.modern-ux.medrio.dark med-dialog .med-dialog-pane.sc-med-dialog,
body.modern-ux.medrio.dark med-dialog .med-dialog-pane {
    background: var(--mux-color-bg-paper) !important;
    box-shadow: var(--mux-ds-dialog-shadow-dark) !important;
}

/* med-dialog footer — same control radius as session lock #ReloginForm med-button::part(button) */
body.modern-ux med-dialog .med-dialog-actions med-button::part(button) {
    border-radius: var(--radius-md) !important;
}

/* Session locked only — hide titlebar when content is #ReloginForm (warning uses #TimeoutWarnDiv; no JS/markup class) */
body.modern-ux .ui-dialog.sessionLockoutDialog:has(#ReloginForm.ui-dialog-content) .ui-dialog-titlebar {
    display: none !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm.ui-dialog-content {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - 48px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box;
    background: transparent !important;
    text-align: left !important;
    color: var(--gray-900);
    font-size: var(--mux-fs-rem-875);
    line-height: 1.25rem;
}

body.modern-ux.dark .ui-dialog.sessionLockoutDialog #ReloginForm.ui-dialog-content,
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #ReloginForm.ui-dialog-content {
    color: var(--mux-color-text);
}

/* Pre-lock warning — shell that contains #TimeoutWarnDiv as .ui-dialog-content (legacy height:105 + resizable from MedrioJS unchanged) */
body.modern-ux .ui-dialog.sessionLockoutDialog:has(#TimeoutWarnDiv.ui-dialog-content) {
    height: auto !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog:has(#TimeoutWarnDiv.ui-dialog-content) .ui-resizable-handle {
    display: none !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog:has(#TimeoutWarnDiv.ui-dialog-content) .ui-dialog-titlebar {
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--muted) !important;
    background-image: none !important;
    color: var(--foreground);
    padding: var(--space-3) var(--space-4) var(--space-2) var(--space-4) !important;
    min-height: 0 !important;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-semibold);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: var(--space-3);
    box-sizing: border-box !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog:has(#TimeoutWarnDiv.ui-dialog-content) .ui-dialog-title {
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 0;
}

body.modern-ux .ui-dialog.sessionLockoutDialog:has(#TimeoutWarnDiv.ui-dialog-content) .ui-dialog-titlebar-close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    order: 1;
    border-radius: var(--radius-full) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border: none !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog:has(#TimeoutWarnDiv.ui-dialog-content) .ui-dialog-titlebar-close:hover {
    background: #0000000f !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog:has(#TimeoutWarnDiv.ui-dialog-content) .ui-dialog-titlebar-close:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #TimeoutWarnDiv.ui-dialog-content {
    display: block !important;
    padding: var(--space-6) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box;
    background: transparent !important;
    text-align: left !important;
    color: var(--gray-900);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-normal);
}

body.modern-ux.dark .ui-dialog.sessionLockoutDialog #TimeoutWarnDiv.ui-dialog-content,
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #TimeoutWarnDiv.ui-dialog-content {
    color: var(--mux-color-text);
}

/* Original markup uses <br> between lines — trim leading break; spacing from padding + line-height */
body.modern-ux .ui-dialog.sessionLockoutDialog #TimeoutWarnDiv.ui-dialog-content > br:first-of-type {
    display: none;
}

/* --- #ReloginForm (session locked) --- */
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm .session-timeout-msg {
    padding: var(--space-6) var(--space-6) var(--space-4);
    box-sizing: border-box;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm .session-timeout-msg h1 {
    font-size: var(--mux-fs-rem-15);
    font-weight: var(--fw-normal);
    line-height: 2rem;
    margin: 0 0 var(--space-4) 0;
    color: var(--gray-900);
}

body.modern-ux.dark .ui-dialog.sessionLockoutDialog #ReloginForm .session-timeout-msg h1,
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #ReloginForm .session-timeout-msg h1 {
    color: var(--mux-color-text);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm #timeoutLoginError:not(:empty) {
    padding: 0 var(--space-6) var(--space-2);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm .securityPromptField {
    padding: 0 var(--space-6);
    box-sizing: border-box;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm .securityPromptField + .securityPromptField {
    margin-top: var(--space-3);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm > .tar.mt-20 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-6) var(--space-6);
    margin-top: var(--space-4) !important;
    box-sizing: border-box;
}

/* Logout / Unlock — host classes are med-flat-button.med-secondary + med-raised-button.med-primary (not [slot="actions"] / med-basic-button) */
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-flat-button.med-secondary:not(.med-disabled)::part(button),
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-raised-button.med-primary::part(button) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    font-family: var(--font-family);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4);
    font-size: var(--ds-btn-font-size) !important;
    line-height: var(--lh-none);
}

/* .ds-btn-text — Logout (flat secondary) */
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-flat-button.med-secondary:not(.med-disabled)::part(button) {
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    border: none !important;
    box-shadow: none !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-flat-button.med-secondary:not(.med-disabled)::part(button):hover:not(:disabled) {
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-flat-button.med-secondary:not(.med-disabled)::part(button):active:not(:disabled) {
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-flat-button.med-secondary:not(.med-disabled)::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-flat-button.med-secondary.med-disabled::part(button),
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-flat-button.med-secondary::part(button):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* .ds-btn-primary — Unlock */
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-raised-button.med-primary::part(button) {
    background: var(--brand) !important;
    color: var(--mux-primary-contrast) !important;
    border: 2px solid transparent !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-raised-button.med-primary::part(button):hover:not(:disabled) {
    background: var(--brand-dark) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-raised-button.med-primary::part(button):active:not(:disabled) {
    background: var(--brand-darker) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-raised-button.med-primary::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring), var(--shadow-sm);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-raised-button.med-primary.med-disabled::part(button),
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button.med-raised-button.med-primary::part(button):disabled {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed;
    opacity: 0.85;
    box-shadow: none;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button::part(focus-overlay),
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-button::part(button-focus-overlay) {
    opacity: 0 !important;
}

/*
 * Session lock password: base med-input uses :not(.ui-dialog *) so jQuery UI dialogs get no field chrome.
 * Mirror med-form-field.email-form-field / page med-input — .ds-input-sm parity (--mux-field-control-*).
 */
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field .med-form-field-infix.sc-med-form-field {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field .med-form-field-underline {
    display: none !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input {
    /* @medrio/core may map shadow fill to these; keep in sync with host background */
    --background: var(--bg);
    --med-input-background: var(--bg);
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    vertical-align: middle;
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    color: var(--mux-color-text);
    /* Match dialog card: --input-background can read cool vs @medrio/core inner fill; use page white */
    background-color: var(--bg) !important;
    background: var(--bg) !important;
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    padding: var(--mux-field-control-padding);
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    box-shadow: none;
    transition: var(--mux-transition);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input:hover:not([disabled]):not([aria-disabled="true"]):not(:focus-within) {
    border-color: var(--mux-color-text);
    background-color: var(--bg) !important;
    background: var(--bg) !important;
    box-shadow: none;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input:focus-within {
    border-width: 1px;
    border-color: var(--mux-color-border-focus);
    outline: none;
    box-shadow: var(--mux-focus-ring);
    background-color: var(--bg) !important;
    background: var(--bg) !important;
    padding: var(--mux-field-control-padding);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input:focus-within:hover {
    border-color: var(--mux-color-border-focus);
    background-color: var(--bg) !important;
    background: var(--bg) !important;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input[disabled],
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input[aria-disabled="true"] {
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: 0.9;
    border-color: var(--border);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input med-label {
    position: absolute;
    top: 50%;
    left: var(--mux-field-control-padding-x);
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
    max-width: calc(100% - 2 * var(--mux-field-control-padding-x));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .med-input-underline {
    display: none;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .med-input-prefix-slot,
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .med-input-suffix {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input {
    flex: 1;
    min-width: 0;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    font: inherit;
    color: inherit;
    line-height: inherit;
    text-align: start !important;
    text-indent: 0;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:hover,
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:focus,
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:focus-visible,
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:active {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:focus-visible {
    outline: none;
}

/* Chrome / Edge autofill paints blue-gray over the value; mask with same fill as host (--bg). */
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill,
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill:hover,
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill:focus,
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
    box-shadow: 0 0 0 1000px var(--bg) inset !important;
    -webkit-text-fill-color: var(--mux-color-text) !important;
    caret-color: var(--mux-color-text);
    transition: background-color 50000s ease-in-out 0s;
}

body.modern-ux.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input,
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input {
    --background: var(--mux-color-bg);
    --med-input-background: var(--mux-color-bg);
    background-color: var(--mux-color-bg) !important;
    background: var(--mux-color-bg) !important;
}

body.modern-ux.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input:hover:not([disabled]):not([aria-disabled="true"]):not(:focus-within),
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input:hover:not([disabled]):not([aria-disabled="true"]):not(:focus-within) {
    background-color: var(--mux-color-bg) !important;
    background: var(--mux-color-bg) !important;
}

body.modern-ux.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input:focus-within,
body.modern-ux.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input:focus-within:hover,
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input:focus-within,
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input:focus-within:hover {
    background-color: var(--mux-color-bg) !important;
    background: var(--mux-color-bg) !important;
}

body.modern-ux.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill,
body.modern-ux.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill:hover,
body.modern-ux.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill:focus,
body.modern-ux.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill:active,
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill,
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill:hover,
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill:focus,
body.modern-ux.medrio.dark .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .native-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--mux-color-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--mux-color-bg) inset !important;
    -webkit-text-fill-color: var(--mux-color-text) !important;
    caret-color: var(--mux-color-text);
}

/* Password visibility toggle: keep icon aligned with field chrome */
body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .med-input-suffix med-button.med-icon-button::part(button) {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #ReloginForm med-form-field med-input .med-input-suffix med-icon .material-icons {
    font-size: var(--mux-fs-rem-125) !important;
    line-height: var(--lh-none);
}

/* --- #TimeoutWarnDiv (warning before lock) — body padding in #TimeoutWarnDiv.ui-dialog-content above --- */
body.modern-ux .ui-dialog.sessionLockoutDialog #TimeoutWarnDiv .tar.mt-20 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: var(--space-4) !important;
}

/* Continue — ds-btn-primary parity (same as jQuery .ui-dialog-buttonpane .ui-button) */
body.modern-ux .ui-dialog.sessionLockoutDialog #TimeoutWarnDiv #btnRenew.button.action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    min-height: var(--ds-btn-height);
    height: var(--ds-btn-height);
    padding: 0 var(--space-4) !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-md) !important;
    background: var(--brand) !important;
    color: var(--mux-primary-contrast) !important;
    font-family: var(--font-family) !important;
    font-size: var(--ds-btn-font-size) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    text-decoration: none !important;
    box-shadow: var(--shadow-sm) !important;
    text-shadow: none !important;
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

body.modern-ux .ui-dialog.sessionLockoutDialog #TimeoutWarnDiv #btnRenew.button.action:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux .ui-dialog.sessionLockoutDialog #TimeoutWarnDiv #btnRenew.button.action:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring), var(--shadow-sm) !important;
}

/* Tooltip — attribute-driven (bundle pattern); keep below modal z-index if both used */
body.modern-ux [data-tooltip] {
    position: relative;
    cursor: pointer;
}

body.modern-ux [data-tooltip]::before,
body.modern-ux [data-tooltip]::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 999;
}

body.modern-ux [data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -4px);
    margin-bottom: 8px;
    padding: var(--space-2) var(--space-3);
    background-color: var(--gray-800);
    color: #fff;
    font-size: var(--mux-fs-rem-8125);
    line-height: var(--lh-base);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    max-width: 300px;
}

body.modern-ux [data-tooltip]::after {
    content: "";
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -4px);
    margin-bottom: 2px;
    border: 5px solid transparent;
    border-top-color: var(--gray-800);
}

body.modern-ux [data-tooltip]:hover::before,
body.modern-ux [data-tooltip]:hover::after,
body.modern-ux [data-tooltip]:focus-visible::before,
body.modern-ux [data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.modern-ux [data-tooltip][data-tooltip-position="bottom"]::before {
    bottom: auto;
    top: 100%;
    margin-top: 8px;
    margin-bottom: 0;
    transform: translate(-50%, 4px);
}

body.modern-ux [data-tooltip][data-tooltip-position="bottom"]::after {
    bottom: auto;
    top: 100%;
    margin-top: 2px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: var(--gray-800);
    transform: translate(-50%, 4px);
}

body.modern-ux [data-tooltip][data-tooltip-position="bottom"]:hover::before,
body.modern-ux [data-tooltip][data-tooltip-position="bottom"]:hover::after,
body.modern-ux [data-tooltip][data-tooltip-position="bottom"]:focus-visible::before,
body.modern-ux [data-tooltip][data-tooltip-position="bottom"]:focus-visible::after {
    transform: translate(-50%, 0);
}

body.modern-ux [data-tooltip][data-tooltip-multiline]::before {
    white-space: normal;
    max-width: 250px;
}

body.modern-ux.dark [data-tooltip]::before,
body.modern-ux.medrio.dark [data-tooltip]::before {
    background-color: var(--gray-200);
    color: var(--gray-900);
}

body.modern-ux.dark [data-tooltip]::after,
body.modern-ux.medrio.dark [data-tooltip]::after {
    border-top-color: var(--gray-200);
}

body.modern-ux.dark [data-tooltip][data-tooltip-position="bottom"]::after,
body.modern-ux.medrio.dark [data-tooltip][data-tooltip-position="bottom"]::after {
    border-bottom-color: var(--gray-200);
    border-top-color: transparent;
}

/* Switch — native checkbox inside .ds-switch (bundle pattern) */
body.modern-ux .ds-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    vertical-align: middle;
    flex-shrink: 0;
}

body.modern-ux .ds-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    position: absolute;
}

body.modern-ux .ds-switch input:focus-visible + .ds-switch-slider {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

body.modern-ux .ds-switch-slider {
    position: absolute;
    inset: 0;
    background-color: var(--gray-400);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition);
}

body.modern-ux .ds-switch-slider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    background: var(--background);
    border-radius: 50%;
    transition: transform var(--transition);
    box-shadow: 0 1px 2px var(--mux-color-black-15);
}

body.modern-ux .ds-switch input:checked + .ds-switch-slider {
    background-color: var(--brand);
}

body.modern-ux .ds-switch input:checked + .ds-switch-slider::before {
    transform: translateX(20px);
}

body.modern-ux .ds-switch input:disabled + .ds-switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

body.modern-ux.dark .ds-switch-slider,
body.modern-ux.medrio.dark .ds-switch-slider {
    background-color: var(--gray-600);
}

body.modern-ux.dark .ds-switch input:checked + .ds-switch-slider,
body.modern-ux.medrio.dark .ds-switch input:checked + .ds-switch-slider {
    background-color: var(--brand);
}

/* Angular Material mat-slide-toggle — look/feel parity with .ds-switch (CSS-only; no template changes). */
body.modern-ux mat-slide-toggle {
    display: inline-flex;
    vertical-align: middle;
    flex-shrink: 0;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

body.modern-ux mat-slide-toggle .mat-slide-toggle-label {
    align-items: center;
    margin-bottom: 0;
    outline: none !important;
    box-shadow: none !important;
}

body.modern-ux mat-slide-toggle .mat-slide-toggle-bar {
    position: relative !important;
    width: 44px !important;
    height: 24px !important;
    min-width: 44px !important;
    border-radius: var(--radius-full) !important;
    background-color: var(--gray-400) !important;
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body.modern-ux mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color: var(--brand) !important;
}

body.modern-ux mat-slide-toggle.mat-disabled .mat-slide-toggle-bar {
    opacity: 0.5;
    cursor: not-allowed;
}

body.modern-ux mat-slide-toggle.mat-disabled .mat-slide-toggle-label {
    cursor: not-allowed;
}

body.modern-ux mat-slide-toggle .mat-slide-toggle-thumb-container {
    position: absolute !important;
    top: 50% !important;
    left: 2px !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: -10px !important;
    transform: translate3d(0, 0, 0) !important;
}

body.modern-ux mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(20px, 0, 0) !important;
}

body.modern-ux mat-slide-toggle .mat-slide-toggle-thumb {
    width: 20px !important;
    height: 20px !important;
    box-shadow: 0 1px 2px var(--mux-color-black-15) !important;
    background-color: var(--background) !important;
    border: none !important;
    outline: none !important;
}

body.modern-ux mat-slide-toggle .mat-slide-toggle-ripple,
body.modern-ux mat-slide-toggle .mat-slide-toggle-persistent-ripple,
body.modern-ux mat-slide-toggle .mat-slide-toggle-thumb-container .mat-ripple-element {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Match .ds-switch: focus ring only for keyboard (:focus-visible), not .mat-focus / .cdk-focused after click. */
body.modern-ux mat-slide-toggle .mat-slide-toggle-bar:has(.mat-slide-toggle-input:focus-visible) {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

body.modern-ux.dark mat-slide-toggle:not(.mat-checked) .mat-slide-toggle-bar,
body.modern-ux.medrio.dark mat-slide-toggle:not(.mat-checked) .mat-slide-toggle-bar {
    background-color: var(--gray-600) !important;
}

body.modern-ux.dark mat-slide-toggle.mat-checked .mat-slide-toggle-bar,
body.modern-ux.medrio.dark mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color: var(--brand) !important;
}

/* med-toggle (@medrio/core) uses shadow DOM — track/thumb cannot be targeted here. Theme parity with rules
   above is applied globally via constructable stylesheet in js/modern-ux-theme.js (initMedToggleModernUx). */

/* Align med-toggle to the midline when used inline alongside labels, icons, or text.
   vertical-align has no effect inside flex/grid containers so this is safe globally. */
body.modern-ux med-toggle {
    vertical-align: middle;
}

/* role-permissions tab — mat-slide-toggle sat at top of block wrapper inside td; center with row siblings. */
body.modern-ux tr.permission-row td {
    vertical-align: middle;
}

body.modern-ux tr.permission-row td.permission-switch > div {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    box-sizing: border-box;
}

/* Badge — dot + count */
body.modern-ux .ds-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

body.modern-ux .ds-badge-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--mux-fs-rem-75);
    font-weight: var(--fw-semibold);
    line-height: 20px;
    text-align: center;
    border-radius: var(--radius-full);
    background: var(--brand);
    color: #000;
    box-sizing: border-box;
}

body.modern-ux.dark .ds-badge-dot,
body.modern-ux.medrio.dark .ds-badge-dot {
    color: #000;
}

/* Heading 5 (CSS-Only-UI-2026): 20px semibold, line-height 1.5 */
body.modern-ux .ds-h5,
body.modern-ux #form-title-column h1 {
    font-family: var(--mux-font-family);
    color: var(--foreground);
    font-size: var(--mux-fs-rem-125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    letter-spacing: -0.02em;
}

body.modern-ux #form-title-column h1 span {
    font-weight: var(--fw-semibold);
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
}

/* -------------------------------------------------------------------------
   Dark theme (body.modern-ux.dark) – UX designer spec + theme.tsx dark palette
   ------------------------------------------------------------------------- */
body.modern-ux.dark {
    /* Semantic tokens (dark) */
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --input-background: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.269 0 0);
    --sidebar-ring: oklch(0.439 0 0);

    /* Mux dark palette */
    --mux-color-text: var(--gray-50);
    --mux-color-text-muted: var(--gray-300);
    --mux-color-text-disabled: #6B7280;
    --mux-color-bg: var(--gray-900);
    --mux-color-bg-paper: var(--gray-800);
    --mux-color-divider: var(--gray-700);
    --mux-color-border: var(--border);
    --mux-color-border-hover: #6B7280;
    --mux-color-border-focus: var(--mux-primary-main);
    --mux-color-invalid: var(--destructive);
    --mux-color-invalid-bg: #450a0a;
    --mux-color-invalid-pulse: rgba(248, 113, 113, 0.4);
    --mux-color-invalid-pulse-mid: rgba(248, 113, 113, 0.2);
    --mux-color-required: var(--mux-primary-main);
    --mux-color-bg-hover: var(--gray-800);
    --mux-color-bg-disabled: var(--gray-700);
    --mux-color-accent: var(--mux-primary-main);
    --mux-color-accent-hover: var(--mux-primary-light);
    --mux-color-accent-active: var(--mux-primary-light);
    --mux-color-accent-glow: rgba(70, 185, 255, 0.3);
    --mux-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --mux-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --mux-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
    --mux-focus-ring: 0 0 0 3px var(--mux-color-accent-glow);
    --mux-color-checkbox-border: var(--gray-300);
    --mux-color-checkbox-bg: transparent;
    --mux-color-reset-bg: var(--muted);
    --mux-color-reset-bg-hover: var(--mux-color-border-hover);
    --mux-color-reset-border: var(--border);
    --mux-color-reset-border-hover: var(--mux-color-border-hover);

    /* Alpha surfaces & ink — dark (replaces light black-alpha with white-alpha where shared vars are used) */
    --mux-color-on-surface: rgba(255, 255, 255, 0.87);
    --mux-color-on-surface-muted: rgba(255, 255, 255, 0.65);
    --mux-color-outline: rgba(255, 255, 255, 0.23);
    --mux-color-black-05: rgba(255, 255, 255, 0.05);
    --mux-color-black-07: rgba(255, 255, 255, 0.07);
    --mux-color-black-08: rgba(255, 255, 255, 0.08);
    --mux-color-black-10: rgba(255, 255, 255, 0.1);
    --mux-color-black-12: rgba(255, 255, 255, 0.12);
    --mux-color-black-15: rgba(255, 255, 255, 0.15);
}

/* Dark: file selector button */
body.modern-ux.dark input[type="file"]:not(.ui-dialog *, .cdk-overlay-container *)::file-selector-button,
body.modern-ux.dark input[type="file"]:not(.ui-dialog *, .cdk-overlay-container *)::-webkit-file-upload-button {
    background: var(--accent);
    border-color: var(--border);
    color: var(--foreground);
}

body.modern-ux.dark input[type="file"]:not(.ui-dialog *, .cdk-overlay-container *)::file-selector-button:hover {
    background: var(--muted);
}

/* Dark: range track */
body.modern-ux.dark input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *) {
    background: var(--border);
}

/* Dark: reset button */
body.modern-ux.dark input[type="reset"]:not(.ui-dialog *, .cdk-overlay-container *) {
    background: linear-gradient(180deg, var(--muted) 0%, var(--mux-color-bg-paper) 100%);
    border-color: var(--border);
}

body.modern-ux.dark input[type="reset"]:not(.ui-dialog *, .cdk-overlay-container *):hover {
    background: linear-gradient(180deg, var(--mux-color-border-hover) 0%, var(--muted) 100%);
    border-color: var(--mux-color-border-hover);
}

/* Dark: select arrow (lighter for contrast) */
body.modern-ux.dark select:not([multiple]) {
    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='%23D1D5DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Medrio brand theme (body.modern-ux.medrio)
   Brand Guide 2023: Medrio Blue #46B9FF, Dark Gray #384955,
   Geist typography, CTAs primary blue, Error #F85850
   design.medrio.com/color/: Use color strategically; primary for buttons/checkboxes;
   indicate state with color + icon/text (a11y); WCAG 2.0 AA contrast.
   ------------------------------------------------------------------------- */

/* Medrio Brand Guide 2023 – Primary palette (to white): HEX values for theming */
body.modern-ux.medrio {
    /* Medrio Blue = theme.tsx primary (Pantone 298C) */
    --medrio-blue: var(--mux-primary-main);
    --medrio-blue-90: #59C0FF;
    --medrio-blue-70: var(--mux-primary-light);
    --medrio-blue-50: #A3DCFF;
    --medrio-blue-30: #C8EAFF;
    --medrio-blue-10: #EDF8FF;
    /* Medrio Orange (Pantone 715C) */
    --medrio-orange: #FF8D2C;
    --medrio-orange-90: #FF9841;
    --medrio-orange-70: #FFAF6B;
    --medrio-orange-50: #FFC696;
    --medrio-orange-30: #FFDDC0;
    --medrio-orange-10: #FFF4EA;
    /* Medrio Purple (Pantone 7452C) */
    --medrio-purple: #748BFF;
    --medrio-purple-90: #8297FF;
    --medrio-purple-70: #9EAEFF;
    --medrio-purple-50: #BAC5FF;
    --medrio-purple-30: #D5DCFF;
    --medrio-purple-10: #F1F3FF;
    /* Medrio Cyan */
    --medrio-cyan: #00FFFF;
    --medrio-cyan-90: #1AFFFF;
    --medrio-cyan-70: #4DFFFF;
    --medrio-cyan-50: #80FFFF;
    --medrio-cyan-30: #B3FFFF;
    --medrio-cyan-10: #E6FFFF;
    /* design.medrio.com/color/ – Our Theme (Material Design): primary for buttons/checkboxes */
    --medrio-theme-primary: var(--mux-primary-main);
    --medrio-theme-secondary: #F99E1C;
    /* States: use for feedback; pair with icons/text for a11y (don’t rely on color alone) */
    --medrio-state-danger: var(--mux-error-main);
    --medrio-state-success: var(--mux-success-main);
    --medrio-state-hover: var(--mux-color-black-07);
    --medrio-text-primary: var(--gray-900);
    --medrio-text-secondary: var(--mux-color-text-muted);
    --mux-font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    --mux-color-text: var(--gray-900);
    --mux-color-text-muted: #6B7280;
    --mux-color-border: var(--gray-200);
    --mux-color-border-hover: #4B5563;
    --mux-color-border-focus: var(--mux-primary-main);
    --mux-color-invalid: var(--mux-error-main);
    --mux-color-invalid-bg: #FEF2F2;
    --mux-color-required: var(--mux-primary-dark);
    --mux-color-bg: #FFFFFF;
    --mux-color-bg-hover: var(--gray-50);
    --mux-color-bg-disabled: #F3F4F6;
    --gray-100: #F3F4F6;
    --mux-color-accent: var(--mux-primary-main);
    --mux-color-accent-hover: var(--mux-primary-hover);
    --mux-color-accent-active: var(--mux-primary-dark);
    --mux-color-accent-glow: rgba(70, 185, 255, 0.35);
    --mux-shadow-sm: 0 1px 2px var(--mux-color-black-05);
    --mux-shadow: 0 1px 3px var(--mux-color-black-08);
    --mux-shadow-hover: 0 4px 12px var(--mux-color-black-10);
    --mux-focus-ring: 0 0 0 3px var(--mux-color-accent-glow);
    --mux-color-link: var(--mux-primary-main);
    --mux-color-link-hover: var(--mux-primary-dark);
    --mux-color-link-active: var(--mux-primary-dark);
    /* Primary blue CTA (no black variant) */
    --medrio-cta-bg: var(--mux-primary-main);
    --medrio-cta-bg-hover: var(--mux-primary-hover);
    --medrio-cta-border: var(--mux-primary-dark);
    --medrio-cta-border-hover: var(--mux-primary-dark);
}

/* Medrio: primary CTA uses primary blue (submit and action buttons) */
body.modern-ux.medrio button[type="submit"],
body.modern-ux.medrio input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast) {
    background: linear-gradient(180deg, var(--medrio-cta-bg) 0%, var(--medrio-cta-border) 100%);
    border-color: var(--medrio-cta-border);
    color: #fff;
}

body.modern-ux.medrio button[type="submit"]:hover,
body.modern-ux.medrio input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):hover {
    background: linear-gradient(180deg, var(--medrio-cta-bg-hover) 0%, var(--medrio-cta-border-hover) 100%);
    border-color: var(--medrio-cta-border-hover);
}

/* Medrio dark theme – theme.tsx dark palette */
body.modern-ux.medrio.dark {
    --mux-color-text: var(--gray-50);
    --mux-color-text-muted: var(--gray-300);
    --mux-color-bg-paper: var(--gray-800);
    --mux-color-divider: var(--gray-700);
    --mux-color-border: var(--gray-700);
    --mux-color-border-hover: #6B7280;
    --mux-color-border-focus: var(--mux-primary-main);
    --mux-color-invalid: #F87171;
    --mux-color-invalid-bg: #450a0a;
    --mux-color-required: var(--mux-primary-main);
    --mux-color-bg: var(--gray-900);
    --mux-color-bg-hover: var(--gray-800);
    --mux-color-bg-disabled: var(--gray-700);
    --mux-color-accent: var(--mux-primary-main);
    --mux-color-accent-hover: var(--mux-primary-light);
    --mux-color-accent-active: var(--mux-primary-light);
    --mux-color-accent-glow: rgba(70, 185, 255, 0.3);
    --mux-color-link: var(--mux-primary-light);
    --mux-color-link-hover: var(--medrio-blue-70);
    --mux-color-link-active: #9DD9FF;
}

body.modern-ux.medrio.dark button[type="submit"],
body.modern-ux.medrio.dark input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast),
body.modern-ux.medrio.dark .ds-btn.ds-btn-primary,
body.modern-ux.medrio.dark a.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog),
body.modern-ux.medrio.dark a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    background: linear-gradient(180deg, var(--mux-primary-main) 0%, var(--medrio-blue-90) 100%);
    border-color: var(--mux-primary-main);
    color: var(--mux-primary-contrast);
}

body.modern-ux.medrio.dark button[type="submit"]:hover,
body.modern-ux.medrio.dark input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):hover,
body.modern-ux.medrio.dark .ds-btn.ds-btn-primary:hover:not(:disabled),
body.modern-ux.medrio.dark a.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):hover,
body.modern-ux.medrio.dark a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover {
    background: linear-gradient(180deg, var(--medrio-blue-90) 0%, var(--medrio-blue-70) 100%);
    border-color: var(--medrio-blue-90);
    color: var(--mux-primary-contrast);
}

body.modern-ux.medrio.dark .ds-btn.ds-btn-primary:active:not(:disabled),
body.modern-ux.medrio.dark a.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):active,
body.modern-ux.medrio.dark a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active {
    background: linear-gradient(180deg, var(--medrio-blue-90) 0%, var(--medrio-blue-70) 100%);
    border-color: var(--medrio-blue-70);
    box-shadow: var(--mux-shadow-sm);
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux.medrio.dark .ds-btn.ds-btn-secondary,
body.modern-ux.medrio.dark a.ds-btn.ds-btn-secondary {
    background: var(--gray-600);
    border-color: var(--gray-600);
    color: #fff !important;
}

body.modern-ux.medrio.dark .ds-btn.ds-btn-secondary:hover:not(:disabled),
body.modern-ux.medrio.dark a.ds-btn.ds-btn-secondary:hover:not(:disabled) {
    background: var(--gray-500);
    border-color: var(--gray-500);
    color: #fff !important;
}

body.modern-ux.medrio.dark .ds-btn.ds-btn-secondary:active:not(:disabled),
body.modern-ux.medrio.dark a.ds-btn.ds-btn-secondary:active:not(:disabled) {
    background: var(--gray-700);
    border-color: var(--gray-700);
    color: #fff !important;
}

/* -------------------------------------------------------------------------
   Links – scannable, accessible, Medrio blue palette when body.modern-ux.medrio
   (Medrio Brand Guide 2023: primary #46B9FF; hover/active in same blue family)
   Excluded: a.material-icons (icon-only links like header close button).
   ------------------------------------------------------------------------- */
body.modern-ux a:not(.material-icons) {
    font-family: var(--mux-font-family);
    font-weight: var(--fw-medium);
    text-decoration: none;
    text-underline-offset: var(--mux-link-underline-offset);
    text-decoration-thickness: var(--mux-link-underline-thickness);
    text-decoration-color: var(--mux-color-link);
    transition: color 0.2s ease, text-decoration-color 0.2s ease, text-underline-offset 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    outline-offset: 2px;
}

body.modern-ux a:not(.material-icons):hover {
    text-decoration-color: var(--mux-color-link-hover);
    text-underline-offset: 0.15em;
}

body.modern-ux a:not(.material-icons):active {
    color: var(--mux-color-link-active);
}

body.modern-ux a:not(.material-icons):focus {
    outline: none;
}

body.modern-ux a:not(.material-icons):focus-visible:not(:is(.leftTabContainer *)) {
    outline: 2px solid var(--mux-color-border-focus);
    outline-offset: 2px;
    box-shadow: var(--mux-focus-ring);
    border-radius: var(--radius);
}

/* Links inside buttons or nav: no underline by default, underline on hover only */
body.modern-ux a.mux-link-subtle,
body.modern-ux button:not([class*="mat-"]) a,
body.modern-ux [role="navigation"] a {
    text-decoration: none;
    text-decoration-color: transparent;
}

body.modern-ux a.mux-link-subtle:hover,
body.modern-ux button:not([class*="mat-"]) a:hover,
body.modern-ux [role="navigation"] a:hover {
    text-decoration: none;
    text-decoration-color: var(--mux-color-link-hover);
}

body.modern-ux.dark a:not(.material-icons):focus-visible:not(:is(.leftTabContainer *)) {
    box-shadow: var(--mux-focus-ring);
}

/* Medrio theme: link palette set in body.modern-ux.medrio block above */

/* Classless <a href> (ASP LinkButton default, e.g. LkUpDisplay “Add”, SubjectStatuses “Add”): kill inline dotted border-bottom; .ds-btn-text parity */
/* .leftTabContainer nav links have no class; exclude so rail styles win uncontested */
body.modern-ux a[href]:not([class]):not(.material-icons):not(:is(.leftTabContainer *)),
body.modern-ux a[href][class=""]:not(.material-icons):not(:is(.leftTabContainer *)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 36px;
    padding: 0 var(--space-4);
    font-family: var(--font-family, var(--mux-font-family));
    font-weight: var(--fw-semibold);
    font-size: var(--mux-fs-14);
    line-height: var(--lh-none);
    color: var(--brand-accessible) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    text-underline-offset: unset;
    text-decoration-thickness: unset;
    border-radius: var(--radius-md);
    vertical-align: middle;
    cursor: pointer;
    transition:
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

body.modern-ux a[href]:not([class]):not(.material-icons):not(:is(.leftTabContainer *)):hover,
body.modern-ux a[href][class=""]:not(.material-icons):not(:is(.leftTabContainer *)):hover {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
}

body.modern-ux a[href]:not([class]):not(.material-icons):not(:is(.leftTabContainer *)):active,
body.modern-ux a[href][class=""]:not(.material-icons):not(:is(.leftTabContainer *)):active {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux a[href]:not([class]):not(.material-icons):not(:is(.leftTabContainer *)):focus-visible,
body.modern-ux a[href][class=""]:not(.material-icons):not(:is(.leftTabContainer *)):focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux.medrio.dark a[href]:not([class]):not(.material-icons):hover,
body.modern-ux.medrio.dark a[href][class=""]:not(.material-icons):hover {
    background-color: color-mix(in srgb, var(--mux-primary-main) 14%, transparent) !important;
    color: var(--mux-color-link) !important;
}

body.modern-ux.medrio.dark a[href]:not([class]):not(.material-icons):active,
body.modern-ux.medrio.dark a[href][class=""]:not(.material-icons):active {
    background-color: color-mix(in srgb, var(--mux-primary-main) 20%, transparent) !important;
}

/* -------------------------------------------------------------------------
   Epro slider (VAS) – exclude from modern-ux
   No modern-ux styles on .epro-slider or its descendants so VAS and +/- buttons
   use default/site styles only. Higher specificity (.epro-slider.epro-slider)
   so these overrides win over body.modern-ux a:not(.material-icons).
   ------------------------------------------------------------------------- */
body.modern-ux .epro-slider.epro-slider a,
body.modern-ux .epro-slider.epro-slider a:hover,
body.modern-ux .epro-slider.epro-slider a:visited,
body.modern-ux .epro-slider.epro-slider a:active,
body.modern-ux .epro-slider.epro-slider a:focus,
body.modern-ux .epro-slider.epro-slider a:focus-visible {
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: var(--lh-none) !important;
    text-decoration: inherit !important;
    text-underline-offset: inherit !important;
    text-decoration-thickness: inherit !important;
    text-decoration-color: inherit !important;
    transition: none !important;
    cursor: pointer !important;
    outline-offset: 0 !important;
    outline: revert !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: inherit !important;
}

body.modern-ux .epro-slider.epro-slider label {
    cursor: inherit !important;
    display: inherit !important;
    align-items: inherit !important;
}

/* -------------------------------------------------------------------------
   Base: text inputs, textarea, select — CSS-Only-UI-2026 .ds-input / .ds-input-sm
   Tokens: --mux-field-control-* (32px height, 6px 12px pad, var(--mux-fs-rem-875)) — same as .ds-input-sm.
   !important on box metrics: RadTextBox/RadInput emit inline height (e.g. home.aspx Height="27px").
   (:not(.ui-dialog *, .cdk-overlay-container *) — skip jQuery UI dialogs & Angular CDK overlays)
   ------------------------------------------------------------------------- */
body.modern-ux input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput),
body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="date"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="time"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="month"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="week"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="datetime-local"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux select,
body.modern-ux .riSingle .riTextBox[type="text"]:not(.ui-dialog *, .cdk-overlay-container *) {
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size) !important;
    line-height: var(--mux-line-height);
    color: var(--mux-color-text);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    padding: var(--mux-field-control-padding) !important;
    height: var(--mux-field-control-height) !important;
    min-height: var(--mux-field-control-min-height) !important;
    box-sizing: border-box;
    transition: var(--mux-transition);
    max-width: 20rem;
    box-shadow: none;
    min-width: 5rem;
}

/* Textarea: same .ds-input-sm font/pad; no fixed height (multiline). */
body.modern-ux textarea:not([class*="mat-"]):not(.native-input) {
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size) !important;
    line-height: var(--mux-line-height);
    color: var(--mux-color-text);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    padding: var(--mux-field-control-padding) !important;
    box-sizing: border-box;
    transition: var(--mux-transition);
    max-width: 20rem;
    box-shadow: none;
    min-width: 5rem;
}

/* Telerik RadComboBox — table + .rcbInput; global text rules (max-width 24rem) break width/row height vs arrow cell */
body.modern-ux .RadComboBox {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: top;
}

body.modern-ux .RadComboBox > table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

body.modern-ux .RadComboBox td.rcbInputCell,
body.modern-ux .RadComboBox td.rcbArrowCell {
    vertical-align: top;
}

body.modern-ux .RadComboBox td.rcbInputCell {
    padding: 0;
}

/* Row height comes from input cell; anchor fills this cell (Telerik skins fix <a> height; inline position:relative prevents stretch). */
body.modern-ux .RadComboBox td.rcbArrowCell {
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    padding: 0;
    position: relative !important;
    background: transparent !important;
    background-image: none !important;
}

body.modern-ux .RadComboBox td.rcbArrowCellLeft,
body.modern-ux .RadComboBox td.rcbArrowCellRight {
    background: transparent !important;
    background-image: none !important;
}

body.modern-ux .RadComboBox input.rcbInput {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: var(--mux-field-control-min-height) !important;
    height: var(--mux-field-control-height) !important;
    margin: 0;
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size) !important;
    line-height: var(--mux-line-height);
    color: var(--mux-color-text);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-right: none;
    border-radius: var(--mux-radius) 0 0 var(--mux-radius);
    padding: var(--mux-field-control-padding) !important;
    box-sizing: border-box;
    transition: var(--mux-transition);
    box-shadow: none;
    text-overflow: ellipsis;
}

body.modern-ux .RadComboBox .rcbArrowCell a {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box;
    border: 1px solid var(--mux-secondary-dark);
    border-left: none;
    border-radius: 0 var(--mux-radius) var(--mux-radius) 0;
    background-color: var(--input-background);
    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='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
    box-shadow: none;
    font-size: var(--mux-fs-0) !important;
    line-height: 0 !important;
    color: transparent !important;
    text-decoration: none !important;
    outline: none;
    overflow: hidden;
    cursor: pointer;
}

body.modern-ux .RadComboBox.rcbHovered:not(.rcbDisabled) input.rcbInput:not(:disabled),
body.modern-ux .RadComboBox.rcbHovered:not(.rcbDisabled) .rcbArrowCell a {
    border-color: var(--mux-color-text);
    background-color: var(--input-background);
    box-shadow: none;
}

body.modern-ux .RadComboBox.rcbFocused:not(.rcbDisabled) input.rcbInput,
body.modern-ux .RadComboBox.rcbFocused:not(.rcbDisabled) .rcbArrowCell a {
    border-width: 1px;
    border-color: var(--mux-color-border-focus);
    border-style: solid;
    box-shadow: var(--mux-focus-ring);
    background-color: var(--input-background);
}

body.modern-ux .RadComboBox.rcbFocused:not(.rcbDisabled) input.rcbInput {
    padding: var(--mux-field-control-padding) !important;
    border-right: none;
}

body.modern-ux .RadComboBox.rcbDisabled input.rcbInput,
body.modern-ux .RadComboBox.rcbDisabled .rcbArrowCell a,
body.modern-ux #dvQryDefinations.disabled .RadComboBox input.rcbInput,
body.modern-ux #dvQryDefinations.disabled .RadComboBox .rcbArrowCell a {
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: 0.95;
}

/* Hover — .ds-input:hover: border text-primary only (no fill shift) */
body.modern-ux input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="date"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="time"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="month"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="week"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux input[type="datetime-local"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:read-only),
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):hover:not(:disabled):not(:read-only),
body.modern-ux select:hover:not(:disabled) {
    border-color: var(--mux-color-text);
    background-color: var(--input-background);
    box-shadow: none;
}

/* Focus / active — 1px border + box-shadow ring (same as home panel-search; avoids layout shift from 2px border) */
body.modern-ux input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):focus,
body.modern-ux input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):active,
body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="date"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="date"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="time"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="time"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="month"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="month"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="week"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="week"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="datetime-local"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="datetime-local"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):focus,
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):active,
body.modern-ux select:not([style*="position: absolute"]):focus,
body.modern-ux select:not([style*="position: absolute"]):active {
    border-width: 1px;
    border-color: var(--mux-color-border-focus);
    outline: none;
    box-shadow: var(--mux-focus-ring);
    background-color: var(--input-background);
}

body.modern-ux input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):focus,
body.modern-ux input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):active,
body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="date"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="date"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="time"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="time"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="month"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="month"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="week"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="week"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux input[type="datetime-local"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="datetime-local"]:not(.ui-dialog *, .cdk-overlay-container *):active,
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):focus,
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):active {
    /*padding: var(--mux-input-pad-y-focus) var(--mux-input-pad-x-focus);*/
}

body.modern-ux select:not([style*="position: absolute"]):focus,
body.modern-ux select:not([style*="position: absolute"]):active {
    padding: var(--mux-field-control-padding-y) 2.25rem var(--mux-field-control-padding-y) var(--mux-field-control-padding-x);
}

/* Focus/active + hover */
body.modern-ux input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="date"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="date"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="time"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="time"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="month"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="month"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="week"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="week"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="datetime-local"]:not(.ui-dialog *, .cdk-overlay-container *):focus:hover:not(:disabled):not(:read-only),
body.modern-ux input[type="datetime-local"]:not(.ui-dialog *, .cdk-overlay-container *):active:hover:not(:disabled):not(:read-only),
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):focus:hover:not(:disabled):not(:read-only),
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):active:hover:not(:disabled):not(:read-only),
body.modern-ux select:not([style*="position: absolute"]):focus:hover,
body.modern-ux select:not([style*="position: absolute"]):active:hover {
    border-width: 1px;
    border-color: var(--mux-color-border-focus);
    background-color: var(--input-background);
    box-shadow: var(--mux-focus-ring);
}

@media (prefers-reduced-motion: no-preference) {

    body.modern-ux input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):focus,
    body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux input[type="date"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux input[type="time"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux input[type="month"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux input[type="week"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux input[type="datetime-local"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux textarea:not([class*="mat-"]):not(.native-input):focus,
    body.modern-ux select:not([style*="position: absolute"]):focus {
        animation: mux-focus-in 0.25s ease-out;
    }
}

body.modern-ux input:not(.ui-dialog *, .cdk-overlay-container *):focus-visible,
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):focus-visible,
body.modern-ux select:not([style*="position: absolute"]):focus-visible {
    outline: none;
}

/* Placeholder — .ds-input::placeholder uses --text-disabled (#9CA3AF) */
body.modern-ux input:not(.ui-dialog *, .cdk-overlay-container *)::placeholder,
body.modern-ux textarea:not([class*="mat-"]):not(.native-input)::placeholder {
    color: var(--mux-color-text-disabled);
    opacity: 1;
    transition: opacity 0.2s ease;
}

body.modern-ux input:not(.ui-dialog *, .cdk-overlay-container *):focus::placeholder,
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):focus::placeholder {
    opacity: 0.5;
}

/* Validation: invalid state (user-friendly error feedback) */
body.modern-ux input:not(.ui-dialog *, .cdk-overlay-container *):invalid:not(:placeholder-shown):not(:focus):not([value=""]),
body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):invalid:not(:placeholder-shown):not(:focus),
body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):invalid:not(:placeholder-shown):not(:focus),
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):invalid:not(:placeholder-shown):not(:focus) {
    border-color: var(--mux-color-invalid);
    background-color: var(--mux-color-invalid-bg);
}

@media (prefers-reduced-motion: no-preference) {

    body.modern-ux input:not(.ui-dialog *, .cdk-overlay-container *):invalid:not(:placeholder-shown):not(:focus):not([value=""]),
    body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):invalid:not(:placeholder-shown):not(:focus),
    body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):invalid:not(:placeholder-shown):not(:focus),
    body.modern-ux textarea:not([class*="mat-"]):not(.native-input):invalid:not(:placeholder-shown):not(:focus) {
        animation: mux-invalid-pulse 1.5s ease-in-out 2;
    }
}

body.modern-ux input:not(.ui-dialog *, .cdk-overlay-container *):required:not(:placeholder-shown):valid,
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):required:not(:placeholder-shown):valid {
    border-color: var(--border);
}

/* Required: rely on label + HTML required semantics (matches .ds-field / no extra chrome per CSS-Only-UI-2026) */

/* -------------------------------------------------------------------------
   Phase C — CSS-Only-UI-2026 form primitives (opt-in .ds-* classes on top of
   native input/select/textarea rules above; same tokens — no new palette).
   Spec: https://onion-steam-49836257.figma.site/ (bundle: b05eeb…css)
   ------------------------------------------------------------------------- */
body.modern-ux .ds-field {
    margin-bottom: var(--space-4);
    box-sizing: border-box;
}

body.modern-ux .ds-label {
    display: block;
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

body.modern-ux .ds-helper {
    font-size: var(--mux-fs-rem-75);
    margin-top: var(--space-1);
    line-height: var(--lh-normal);
    color: var(--text-secondary);
}

body.modern-ux .ds-helper-error {
    color: var(--color-error);
}

/* Full-width block fields (bundle: .ds-input { display:block; width:100% }) */
body.modern-ux input.ds-input:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput),
body.modern-ux textarea.ds-input:not([class*="mat-"]):not(.native-input) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.modern-ux select.ds-select:not(.ui-dialog *, .cdk-overlay-container *) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Explicit “sm” — same metrics as --mux-field-control-* (global native inputs already match) */
body.modern-ux input.ds-input.ds-input-sm:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput),
body.modern-ux textarea.ds-input.ds-input-sm:not([class*="mat-"]):not(.native-input) {
    height: var(--mux-field-control-height) !important;
    min-height: var(--mux-field-control-min-height) !important;
    font-size: var(--mux-field-control-font-size) !important;
    padding: var(--mux-field-control-padding) !important;
}

body.modern-ux input.ds-input:disabled:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput),
body.modern-ux textarea.ds-input:disabled:not([class*="mat-"]):not(.native-input),
body.modern-ux select.ds-input:disabled:not(.ui-dialog *, .cdk-overlay-container *) {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--gray-100);
}

body.modern-ux.medrio.dark input.ds-input:disabled:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput),
body.modern-ux.medrio.dark textarea.ds-input:disabled:not([class*="mat-"]):not(.native-input),
body.modern-ux.medrio.dark select.ds-input:disabled:not(.ui-dialog *, .cdk-overlay-container *) {
    background-color: var(--mux-color-bg-disabled);
}

/* Error / success — border only; focus keeps ring + error hue (invalid UX) */
body.modern-ux input.ds-input.ds-input-error:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput),
body.modern-ux textarea.ds-input.ds-input-error:not([class*="mat-"]):not(.native-input) {
    border-color: var(--color-error) !important;
}

body.modern-ux input.ds-input.ds-input-error:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):focus,
body.modern-ux input.ds-input.ds-input-error:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):focus-visible,
body.modern-ux textarea.ds-input.ds-input-error:not([class*="mat-"]):not(.native-input):focus,
body.modern-ux textarea.ds-input.ds-input-error:not([class*="mat-"]):not(.native-input):focus-visible {
    border-color: var(--color-error) !important;
    box-shadow: var(--mux-focus-ring), 0 0 0 1px var(--color-error);
}

body.modern-ux input.ds-input.ds-input-success:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput),
body.modern-ux textarea.ds-input.ds-input-success:not([class*="mat-"]):not(.native-input) {
    border-color: var(--color-success) !important;
}

body.modern-ux input.ds-input.ds-input-success:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):focus,
body.modern-ux input.ds-input.ds-input-success:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):focus-visible,
body.modern-ux textarea.ds-input.ds-input-success:not([class*="mat-"]):not(.native-input):focus,
body.modern-ux textarea.ds-input.ds-input-success:not([class*="mat-"]):not(.native-input):focus-visible {
    border-color: var(--color-success) !important;
    box-shadow: var(--mux-focus-ring), 0 0 0 1px var(--color-success);
}

/* Label + control — bundle wraps input in .ds-checkbox / .ds-radio (flex + gap) */
body.modern-ux .ds-checkbox,
body.modern-ux .ds-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--mux-fs-rem-1);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    user-select: none;
    position: relative;
    box-sizing: border-box;
}

body.modern-ux .ds-checkbox input[type="checkbox"],
body.modern-ux .ds-radio input[type="radio"] {
    margin: 0 !important;
    flex-shrink: 0;
}

body.modern-ux textarea:not([class*="mat-"]):not(.native-input) {
    height: auto;
    min-height: 4.5rem;
    resize: vertical;
    width: 100%;
    max-width: 32rem;
}

/* -------------------------------------------------------------------------
   Select � custom arrow
   ------------------------------------------------------------------------- */
body.modern-ux select {
    appearance: none;
    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='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding: var(--mux-field-control-padding-y) 2.25rem var(--mux-field-control-padding-y) var(--mux-field-control-padding-x) !important;
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    font-size: var(--mux-field-control-font-size);
    cursor: pointer;
}

/* EditVariablePropSub / GVCatValues — numeric order; global select uses 2.25rem right pad + arrow inset (too much gap). */
body.modern-ux select.CategorySideInputs:not([multiple]):not([style*="position: absolute"]) {
    width: fit-content;
    max-width: 100%;
    /* Tight inline padding: ~1rem glyph + small inset; min tracks 2 digits + chevron column */
    padding: var(--mux-field-control-padding-y) 1.3125rem var(--mux-field-control-padding-y) 0.625rem !important;
    background-position: right 0.4375rem center;
    background-size: 1rem;
    min-width: calc(0.625rem + 2ch + 1.3125rem);
    text-align: center;
    box-sizing: border-box;
}

body.modern-ux select[multiple] {
    background-image: none !important;
    padding: 0.5rem var(--mux-field-control-padding-x) !important;
    min-height: 10rem !important;
    height: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--mux-color-divider) transparent;
}

/* WebKit/Blink: without inset, thumb border-radius is clipped flush to the track (top/bottom/right).
   Transparent border + background-clip: padding-box paints the thumb slightly inset so --radius-md shows. */
body.modern-ux select[multiple]::-webkit-scrollbar {
    width: 12px;
}

body.modern-ux select[multiple]::-webkit-scrollbar-track {
    background: transparent;
    margin: 2px 2px 2px 0;
}

body.modern-ux select[multiple]::-webkit-scrollbar-thumb {
    background-color: var(--mux-color-divider);
    border-radius: var(--radius-md, 8px);
    border: 2px solid transparent;
    background-clip: padding-box;
}

body.modern-ux select[multiple]::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-400);
}

/* SearchableDropDownList.js: popup <select size="N"> is position:absolute — not a single-row combobox.
   Global select rules (fixed height, custom chevron, combobox padding) break the listbox. */
body.modern-ux select[style*="position: absolute"][size] {
    appearance: auto !important;
    -webkit-appearance: listbox !important;
    background-image: none !important;
    color: var(--mux-color-text) !important;
    background-color: var(--input-background) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(20rem, 70vh) !important;
    padding: 0.25rem 0.35rem !important;
    cursor: default !important;
    line-height: 1.35 !important;
    font-size: var(--mux-field-control-font-size) !important;
    box-shadow: var(--mux-shadow-sm);
    max-width: none !important;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mux-color-divider) transparent;
}

body.modern-ux select[style*="position: absolute"][size]:focus,
body.modern-ux select[style*="position: absolute"][size]:focus-visible,
body.modern-ux select[style*="position: absolute"][size]:active {
    outline: none !important;
    border-color: var(--mux-color-border-focus) !important;
    box-shadow: var(--mux-shadow-sm), var(--mux-focus-ring) !important;
    padding: 0.25rem 0.35rem !important;
}

body.modern-ux.medrio.dark select[style*="position: absolute"][size],
body.modern-ux.dark select[style*="position: absolute"][size] {
    background-color: var(--mux-color-bg) !important;
    color: var(--mux-color-text) !important;
}

/* Option list: padding, height, selected/hover tint (Chromium/WebKit; multi-select in-page).
   Do not use --accent (#fcfcfc): it matches white --background so default selected rows (e.g. "All") look unselected. */
body.modern-ux select option {
    padding: 0.5rem 0.75rem;
    font-size: var(--mux-font-size);
    line-height: var(--lh-normal);
    color: var(--foreground);
    background-color: var(--background);
}

body.modern-ux select option:hover {
    background-color: rgba(70, 185, 255, 0.12) !important;
    color: var(--foreground);
}

body.modern-ux select option:checked {
    background-color: rgba(70, 185, 255, 0.24) !important;
    color: var(--foreground);
    font-weight: var(--fw-semibold);
}

/* Multi-select with focus: Chromium otherwise paints the active row with the OS accent
   (strong blue + white text), which looks unlike our pale :checked tint on unfocused lists. */
body.modern-ux select[multiple]:focus option:checked,
body.modern-ux select[multiple]:focus-within option:checked {
    background-color: rgba(70, 185, 255, 0.24) !important;
    color: var(--foreground) !important;
}

body.modern-ux.medrio.dark select option:hover {
    background-color: rgba(70, 185, 255, 0.14) !important;
}

body.modern-ux.medrio.dark select option:checked {
    background-color: rgba(70, 185, 255, 0.28) !important;
}

body.modern-ux.medrio.dark select[multiple]:focus option:checked,
body.modern-ux.medrio.dark select[multiple]:focus-within option:checked {
    background-color: rgba(70, 185, 255, 0.28) !important;
    color: var(--foreground) !important;
}

body.modern-ux select option:disabled {
    color: var(--muted-foreground);
    background-color: var(--muted);
}

/* -------------------------------------------------------------------------
   Angular Material mat-option (match native select option above)
   Panel lives in .cdk-overlay-container — themed to align with modern selects.
   ------------------------------------------------------------------------- */
body.modern-ux .mat-mdc-select-panel,
body.modern-ux .mat-select-panel {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--mux-shadow-hover);
    background-color: var(--background);
    padding: 0.25rem 0;
}

body.modern-ux .mat-mdc-option,
body.modern-ux .mat-option {
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem !important;
    font-family: var(--mux-font-family);
    font-size: var(--mux-font-size);
    line-height: var(--lh-normal);
    color: var(--foreground);
    background-color: var(--background) !important;
}

body.modern-ux .mat-mdc-option .mdc-list-item__primary-text,
body.modern-ux .mat-mdc-option .mat-mdc-option-text {
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

body.modern-ux .mat-mdc-option:hover:not(.mdc-list-item--disabled),
body.modern-ux .mat-mdc-option.mat-mdc-option-active,
body.modern-ux .mat-option:hover:not(.mat-option-disabled),
body.modern-ux .mat-option.mat-active {
    background-color: var(--accent) !important;
    color: var(--foreground) !important;
}

body.modern-ux .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled),
body.modern-ux .mat-mdc-option.mat-mdc-option-selected,
body.modern-ux .mat-option.mat-selected:not(.mat-option-disabled) {
    background-color: var(--accent) !important;
    color: var(--foreground) !important;
    font-weight: var(--fw-semibold);
}

body.modern-ux .mat-mdc-option.mdc-list-item--disabled,
body.modern-ux .mat-option.mat-option-disabled {
    color: var(--muted-foreground) !important;
    background-color: var(--muted) !important;
    opacity: 0.9;
}

/* -------------------------------------------------------------------------
   Angular Material legacy mat-form-field + mat-select (e.g. /config/notifications)
   Boxed field chrome aligned with med-select; underline removed. Excludes .search-input (dedicated rules).
   ------------------------------------------------------------------------- */
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) {
    overflow: visible !important;
    margin-top: 0;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-wrapper {
    padding-bottom: 0;
    overflow: visible;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-flex {
    align-items: stretch;
    overflow: visible;
    position: relative;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix {
    position: relative;
    /* Flex centers the value; legacy Material’s transparent border-top would otherwise push text down */
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--mux-field-control-min-height);
    width: 100%;
    margin: 0 !important;
    /* Symmetric padding — label sits above the box, not inside the top border */
    padding: var(--mux-field-control-padding-y) var(--mux-field-control-padding-x) !important;
    /* Full border replaces legacy Material border-top spacer; explicit top avoids cascade fights */
    border: 1px solid var(--mux-secondary-dark) !important;
    border-radius: var(--mux-radius);
    background-color: var(--input-background);
    box-shadow: none;
    transition: var(--mux-transition);
    overflow: visible;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input):not(:focus-within):not(.mat-focused):hover .mat-form-field-infix {
    border-color: var(--mux-color-text) !important;
    background-color: var(--input-background) !important;
    box-shadow: none !important;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input):focus-within .mat-form-field-infix,
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input).mat-focused .mat-form-field-infix {
    border-width: 1px !important;
    border-color: var(--mux-color-border-focus) !important;
    padding: var(--mux-padding-y) var(--mux-padding-x) !important;
    background-color: var(--input-background);
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-infix,
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched .mat-form-field-infix {
    border-color: var(--destructive) !important;
    background-color: var(--mux-color-invalid-bg);
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid:focus-within .mat-form-field-infix,
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched:focus-within .mat-form-field-infix {
    border-color: var(--destructive) !important;
    box-shadow: 0 0 0 1px var(--destructive) !important;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-underline,
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-underline .mat-form-field-ripple {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: 1 1 auto;
    width: 100%;
    min-width: 50px;
    min-height: 0;
    margin: 0;
    /* Above .mat-form-field-label-wrapper (z-index 1–2): legacy DOM order puts the label after the select; without this, the label layer paints over the selected value text. */
    position: relative;
    z-index: 3;
    font-size: var(--mux-fs-14);
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 100%;
    flex: 1 1 auto;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select-arrow-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select-value,
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select-value-text {
    display: flex;
    align-items: center;
    line-height: var(--lh-snug);
    min-width: 0;
}

/* Material sets .mat-select-value { max-width: 0 } for flex ellipsis; with our boxed .mat-select-trigger that can collapse the value to zero width. */
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select-value {
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select-value-text,
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select-placeholder {
    color: var(--foreground);
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label {
    color: var(--muted-foreground) !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 0.2rem 0 0 !important;
    line-height: var(--lh-snug) !important;
    font-size: var(--mux-fs-rem-8125) !important;
    pointer-events: none;
    /* Sit on page/card background so the border doesn’t run through the label */
    background-color: var(--card) !important;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-label,
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-label span,
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched .mat-form-field-label {
    color: var(--destructive) !important;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label-wrapper {
    position: absolute !important;
    left: var(--mux-padding-x) !important;
    right: auto !important;
    bottom: auto !important;
    top: 0 !important;
    width: auto !important;
    max-width: calc(100% - 1.5rem);
    padding: 0 !important;
    padding-top: 0 !important;
    overflow: visible;
    transform: translateY(calc(-100% - 6px)) !important;
    pointer-events: none;
    z-index: 2;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-should-float .mat-form-field-label,
body.modern-ux mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label.mat-empty {
    transform: none !important;
}

/* Legacy mat-input: same host offset as boxed mat-select (e.g. notification-item frequency number vs Condition/Frequency selects) */
body.modern-ux mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) {
    margin-top: 0.625rem;
    overflow: visible !important;
    align-self: flex-start;
}

/*
 * Strip global ASPX/modern-ux “boxed field” rules from Material legacy inputs.
 * input[type=email] (and friends) picked up border/radius/background; text fields often looked like pure legacy.
 * Result: email + username + all types match underline-only legacy; disabled share same muted text.
 */
body.modern-ux mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) input.mat-input-element {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-font-size) !important;
    line-height: var(--mux-line-height) !important;
    color: var(--foreground) !important;
    box-sizing: border-box;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) input.mat-input-element:hover:not(:disabled),
body.modern-ux mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) input.mat-input-element:focus:not(:disabled),
body.modern-ux mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) input.mat-input-element:active:not(:disabled) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.modern-ux mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled input.mat-input-element,
body.modern-ux mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) input.mat-input-element:disabled {
    color: var(--muted-foreground) !important;
    -webkit-text-fill-color: var(--muted-foreground) !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* Legacy mat-input + mat-datepicker (e.g. form-schedule): floatLabel never leaves label in infix; it can stay visible over the formatted date. Hide label when the input is non-empty (:placeholder-shown). */
body.modern-ux mat-form-field.schedule-datepicker.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix input.mat-input-element:not(:placeholder-shown) ~ .mat-form-field-label-wrapper,
body.modern-ux mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(mat-datepicker) .mat-form-field-infix input.mat-input-element:not(:placeholder-shown) ~ .mat-form-field-label-wrapper {
    display: none !important;
}

/* Ensure typed/selected date paints above any residual label stacking (mirrors mat-select .mat-select z-index). */
body.modern-ux mat-form-field.schedule-datepicker.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix input.mat-input-element,
body.modern-ux mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(mat-datepicker) .mat-form-field-infix input.mat-input-element {
    position: relative;
    z-index: 3;
}

/* form-schedule (ePRO): date + time sentence — date field only needs ~12rem; avoid stretching full flex row */
body.modern-ux mat-form-field.schedule-datepicker.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) {
    max-width: min(12rem, 100%);
    width: min(12rem, 100%);
    flex: 0 1 auto;
    box-sizing: border-box;
}

/* Row of Condition / Frequency / number field: align tops (Angular Flex emits fxlayout="row wrap") */
body.modern-ux notification-item [fxlayout="row wrap"] {
    align-items: flex-start !important;
    padding-bottom: 1rem !important;
}

/* notification-detail: reserve space so “Event Trigger” h3 is not covered by outline-style mat-select labels */
body.modern-ux notification-detail form > h3:first-of-type {
    margin-bottom: 2rem !important;
    position: relative;
    z-index: 4;
}

/* Stack above the Add Form row: its label uses translateY(-100%) and would otherwise paint over these selects */
body.modern-ux notification-detail form > div[fxlayout="row wrap"]:first-of-type {
    position: relative;
    z-index: 6;
    padding-top: 0.5rem;
}

/*
 * Floated labels above the boxed control; z-index + edge alignment with the bordered infix.
 * Global mat-select uses left: var(--mux-padding-x), which lines the label up with the *padded* value text —
 * labels look inset vs the box. Position at left: 0 so the label’s left edge matches the infix inner edge
 * (inside the 1px border), same as the section title / column edge.
 */
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label-wrapper,
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input):focus-within .mat-form-field-label-wrapper,
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input).mat-focused .mat-form-field-label-wrapper {
    z-index: 4 !important;
    left: 0 !important;
    right: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Event Category / Event — label text matches body.modern-ux .ds-label (same tokens as 7381–7388) */
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label,
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label span {
    display: block !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-rem-875) !important; /* .875rem */
    font-weight: var(--fw-medium) !important; /* 500 */
    line-height: var(--lh-normal) !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    margin-bottom: var(--space-1) !important;
    padding: 0 !important;
    background-color: var(--card) !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select {
    position: relative !important;
    z-index: 5 !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select-value,
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select-value-text {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--foreground) !important;
    -webkit-text-fill-color: var(--foreground) !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-select-value {
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/*
 * notification-detail — “Add Form” mat-autocomplete (active schedule): boxed field = same tokens as legacy mat-select
 * (CSS-Only-UI-2026 / https://onion-steam-49836257.figma.site/ ). Global mat-input rules strip borders; restore only here.
 * :has(input.mat-autocomplete-trigger) — panel <mat-autocomplete> is outside mat-form-field; the trigger class is on the input.
 */
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) {
    /*
     * Floated label sits above the infix (translateY -100%); needs margin ≥ label height or it overlaps
     * the Event row. Stay below that row in z-order (see form > div[fxlayout] first-of-type z-index: 6).
     */
    position: relative;
    z-index: 1 !important;
    margin-top: calc(var(--mux-fs-rem-875) + var(--space-4) + var(--space-3)) !important;
    overflow: visible !important;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-wrapper {
    /* Same as localization-select-language-dialog: do not zero padding-bottom or hints overlap boxed infix. */
    overflow: visible !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-flex {
    align-items: stretch !important;
    overflow: visible !important;
    position: relative !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-infix {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: var(--mux-field-control-min-height) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: var(--mux-field-control-padding-y) var(--mux-field-control-padding-x) !important;
    border: 1px solid var(--mux-secondary-dark) !important;
    border-radius: var(--mux-radius) !important;
    background-color: var(--input-background) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
    overflow: visible !important;
}

body.modern-ux
    notification-detail
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger):not(:focus-within):not(.mat-focused):hover
    .mat-form-field-infix {
    border-color: var(--mux-color-text) !important;
    background-color: var(--input-background) !important;
    box-shadow: none !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger):focus-within .mat-form-field-infix,
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-focused .mat-form-field-infix {
    border-width: 1px !important;
    border-color: var(--mux-color-border-focus) !important;
    padding: var(--mux-padding-y) var(--mux-padding-x) !important;
    background-color: var(--input-background) !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-form-field-invalid .mat-form-field-infix,
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).ng-invalid.ng-touched .mat-form-field-infix {
    border-color: var(--destructive) !important;
    background-color: var(--mux-color-invalid-bg) !important;
}

body.modern-ux
    notification-detail
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-form-field-invalid:focus-within
    .mat-form-field-infix,
body.modern-ux
    notification-detail
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).ng-invalid.ng-touched:focus-within
    .mat-form-field-infix {
    border-color: var(--destructive) !important;
    box-shadow: 0 0 0 1px var(--destructive) !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-underline,
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-underline .mat-form-field-ripple {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-label-wrapper {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    top: 0 !important;
    width: auto !important;
    max-width: calc(100% - 1.5rem);
    padding: 0 !important;
    overflow: visible !important;
    transform: translateY(calc(-100% - 6px)) !important;
    pointer-events: none !important;
    /* Below Event Category / Event row (parent host z-index: 1); avoids painting over the selects */
    z-index: 0 !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-label,
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-label span {
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-normal) !important;
    color: var(--text-secondary) !important;
    background-color: var(--card) !important;
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 0.2rem 0 0 !important;
}

body.modern-ux
    notification-detail
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-form-field-invalid
    .mat-form-field-label,
body.modern-ux
    notification-detail
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-form-field-invalid
    .mat-form-field-label
    span,
body.modern-ux
    notification-detail
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).ng-invalid.ng-touched
    .mat-form-field-label {
    color: var(--destructive) !important;
}

body.modern-ux
    notification-detail
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-form-field-should-float
    .mat-form-field-label,
body.modern-ux
    notification-detail
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger)
    .mat-form-field-label.mat-empty {
    transform: none !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) input.mat-input-element {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-14) !important;
    line-height: var(--lh-snug) !important;
    color: var(--foreground) !important;
}

body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) input.mat-input-element:hover:not(:disabled),
body.modern-ux notification-detail mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) input.mat-input-element:focus:not(:disabled) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/*
 * config — Localization: Study Languages dialog mat-autocomplete (same boxed field tokens as notification-detail).
 * Target :has(input.mat-autocomplete-trigger): <mat-autocomplete> is a sibling of mat-form-field, not inside it.
 */
body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) {
    position: relative;
    z-index: 1 !important;
    /*
     * Floated label uses translateY(calc(-100% - 6px)) on .mat-form-field-label-wrapper (below).
     * Reserve at least one label line + gap above the boxed .mat-form-field-flex, same order of
     * magnitude as notification-detail “Add Form” autocomplete — a smaller margin clips the label
     * against med-dialog-pane { overflow: hidden }.
     */
    margin-top: calc(var(--mux-fs-rem-875) + var(--space-4) + var(--space-3)) !important;
    overflow: visible !important;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-wrapper {
    /* Do not zero padding-bottom: legacy mat-form-field reserves space for hints; padding 0 pulls the hint
       lane up and overlaps the boxed .mat-form-field-infix (Study Languages dialog). */
    overflow: visible !important;
}

/*
 * One bordered control for prefix + input + suffix (icons inside the box). Border on .mat-form-field-infix
 * only left icons outside the focus ring; box the flex row instead.
 */
body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-flex {
    align-items: center !important;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
    min-height: var(--mux-field-control-min-height) !important;
    margin: 0 !important;
    padding: var(--mux-field-control-padding-y) var(--mux-field-control-padding-x) !important;
    border: 1px solid var(--mux-secondary-dark) !important;
    border-radius: var(--mux-radius) !important;
    background-color: var(--input-background) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
    gap: var(--space-2, 8px) !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-prefix,
body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-suffix {
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    align-self: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-infix {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: none !important;
    overflow: visible !important;
}

body.modern-ux
    localization-select-language-dialog
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger):not(:focus-within):not(.mat-focused):hover
    .mat-form-field-flex {
    border-color: var(--mux-color-text) !important;
    background-color: var(--input-background) !important;
    box-shadow: none !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger):focus-within .mat-form-field-flex,
body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-focused .mat-form-field-flex {
    border-width: 1px !important;
    border-color: var(--mux-color-border-focus) !important;
    padding: var(--mux-padding-y) var(--mux-padding-x) !important;
    background-color: var(--input-background) !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-form-field-invalid .mat-form-field-flex,
body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).ng-invalid.ng-touched .mat-form-field-flex {
    border-color: var(--destructive) !important;
    background-color: var(--mux-color-invalid-bg) !important;
}

body.modern-ux
    localization-select-language-dialog
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-form-field-invalid:focus-within
    .mat-form-field-flex,
body.modern-ux
    localization-select-language-dialog
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).ng-invalid.ng-touched:focus-within
    .mat-form-field-flex {
    border-color: var(--destructive) !important;
    box-shadow: 0 0 0 1px var(--destructive) !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-underline,
body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-underline .mat-form-field-ripple {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-label-wrapper {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    top: 0 !important;
    width: auto !important;
    max-width: calc(100% - 1.5rem);
    padding: 0 !important;
    overflow: visible !important;
    transform: translateY(calc(-100% - 6px)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-label,
body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-label span {
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-normal) !important;
    color: var(--text-secondary) !important;
    background-color: var(--card) !important;
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 0.2rem 0 0 !important;
}

body.modern-ux
    localization-select-language-dialog
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-form-field-invalid
    .mat-form-field-label,
body.modern-ux
    localization-select-language-dialog
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-form-field-invalid
    .mat-form-field-label
    span,
body.modern-ux
    localization-select-language-dialog
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).ng-invalid.ng-touched
    .mat-form-field-label {
    color: var(--destructive) !important;
}

body.modern-ux
    localization-select-language-dialog
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger).mat-form-field-should-float
    .mat-form-field-label,
body.modern-ux
    localization-select-language-dialog
    mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger)
    .mat-form-field-label.mat-empty {
    transform: none !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) input.mat-input-element {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-14) !important;
    line-height: var(--lh-snug) !important;
    color: var(--foreground) !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) input.mat-input-element:hover:not(:disabled),
body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) input.mat-input-element:focus:not(:disabled) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-subscript-wrapper mat-hint.autocomplete-hint,
body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-hint {
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-rem-8125) !important;
    line-height: var(--lh-normal) !important;
    color: var(--text-secondary) !important;
}

/*
 * Hint sits under the full field; icons are inside the boxed .mat-form-field-flex — no extra inline offset.
 */
body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-subscript-wrapper {
    padding-inline-start: 0 !important;
    box-sizing: border-box !important;
    margin-top: var(--space-1, 4px) !important;
}

body.modern-ux localization-select-language-dialog mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.mat-autocomplete-trigger) .mat-form-field-hint-wrapper {
    opacity: 1 !important;
}

/*
 * Panel aligns with trigger (input); boxed flex matches overlay width without prefix offset hack.
 */
body.modern-ux .mat-autocomplete-panel.mux-localization-language-autocomplete {
    box-sizing: border-box !important;
    margin-inline-start: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}

/*
 * config /localization — localization-items-table: last header cell is an empty flex row (actions column).
 * Shorter inner .localization-items-table-header-cell-content makes its border-bottom sit above the other
 * columns’ rules. Bottom-align th content and enforce a min-height matching label + sort icon row.
 */
body.modern-ux localization-items-table thead .localization-items-table-header-cell {
    vertical-align: bottom !important;
}

body.modern-ux localization-items-table .localization-items-table-header-cell-content {
    box-sizing: border-box !important;
    min-height: 2.5rem !important;
}

/*
 * notification-item: entity title (e.g. "Example Notification") must sit above the row of mat-selects.
 * Floated labels extend upward from the Condition field; without z-index on the title, they paint on top of it.
 * Label wrapper uses translateY(-100% - 6px) — needs extra vertical room so “Condition” does not crowd the title.
 */
body.modern-ux notification-item .mt-10 > .bold.mb-15 {
    position: relative;
    z-index: 4;
    margin-bottom: calc(var(--space-6) + var(--mux-fs-rem-8125) + var(--space-2)) !important;
}

body.modern-ux notification-item .mt-10 > [fxlayout="row wrap"] {
    position: relative;
    z-index: 1;
    margin-top: var(--space-2);
}

/* notification-item row: identical outer control height for Condition / Frequency / Every (mux token). */
body.modern-ux notification-item [fxlayout="row wrap"] mat-form-field.mat-form-field-type-mat-select.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix {
    max-height: var(--mux-height);
}

/*
 * notification-item: “Every” number field — box .mat-form-field-infix (see :has(input.frequency-number-input)).
 * role-details-tab: use mat-form-field.mux-boxed-mat-field (no :has(); reliable in all browsers).
 */
body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) .mat-form-field-flex {
    align-items: stretch;
    overflow: visible;
    position: relative;
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) .mat-form-field-infix {
    position: relative;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    /* Match mat-select infix outer height (min-only lets type=number + spinners grow the box). */
    min-height: var(--mux-field-control-min-height);
    max-height: var(--mux-field-control-height);
    width: 100%;
    margin: 0 !important;
    padding: var(--mux-field-control-padding-y) var(--mux-field-control-padding-x) !important;
    border: 1px solid var(--mux-secondary-dark) !important;
    border-radius: var(--mux-radius);
    background-color: var(--input-background);
    box-shadow: none;
    transition: var(--mux-transition);
    overflow: visible;
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):not(.mat-form-field-disabled):has(input.frequency-number-input):not(:focus-within):not(.mat-focused):hover .mat-form-field-infix {
    border-color: var(--mux-color-text) !important;
    background-color: var(--input-background) !important;
    box-shadow: none !important;
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input):focus-within .mat-form-field-infix,
body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input).mat-focused .mat-form-field-infix {
    border-width: 1px !important;
    border-color: var(--mux-color-border-focus) !important;
    padding: var(--mux-padding-y) var(--mux-padding-x) !important;
    background-color: var(--input-background);
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input).mat-form-field-invalid .mat-form-field-infix,
body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input).ng-invalid.ng-touched .mat-form-field-infix {
    border-color: var(--destructive) !important;
    background-color: var(--mux-color-invalid-bg);
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input).mat-form-field-invalid:focus-within .mat-form-field-infix,
body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input).ng-invalid.ng-touched:focus-within .mat-form-field-infix {
    border-color: var(--destructive) !important;
    box-shadow: 0 0 0 1px var(--destructive) !important;
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) .mat-form-field-underline,
body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) .mat-form-field-underline .mat-form-field-ripple {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) .mat-form-field-label {
    color: var(--muted-foreground) !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 0.2rem 0 0 !important;
    line-height: var(--lh-snug) !important;
    font-size: var(--mux-fs-rem-8125) !important;
    pointer-events: none;
    background-color: var(--card) !important;
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input).mat-form-field-invalid .mat-form-field-label,
body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input).mat-form-field-invalid .mat-form-field-label span,
body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input).ng-invalid.ng-touched .mat-form-field-label {
    color: var(--destructive) !important;
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) .mat-form-field-label-wrapper {
    position: absolute !important;
    left: var(--mux-padding-x) !important;
    right: auto !important;
    bottom: auto !important;
    top: 0 !important;
    width: auto !important;
    max-width: calc(100% - 1.5rem);
    padding: 0 !important;
    padding-top: 0 !important;
    overflow: visible;
    transform: translateY(calc(-100% - 6px)) !important;
    pointer-events: none;
    z-index: 2;
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input).mat-form-field-should-float .mat-form-field-label,
body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) .mat-form-field-label.mat-empty {
    transform: none !important;
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) .mat-form-field-infix input.mat-input-element {
    position: relative;
    z-index: 3;
    align-self: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    line-height: var(--mux-line-height) !important;
    appearance: textfield;
    -moz-appearance: textfield;
}

/*
 * role-details-tab — Name / Description fields as .ds-input + .ds-input-sm + .ds-input:disabled.
 * Targets Angular Material's own classes — no custom HTML classes needed, no rebuild required.
 * Spec: https://onion-steam-49836257.figma.site/_components/v2/04a03c3e7dfb4eacdc1c1a22617e0606b4535c72.css
 */

/* Shorthand for the long selector chain used repeatedly */
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) {
    margin-top: 1.25rem;
    overflow: visible !important;
    align-self: flex-start;
}

body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-wrapper {
    padding-bottom: 1.375rem; /* room for hint/error line below the box */
    overflow: visible;
}

body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-flex {
    align-items: stretch;
    overflow: visible;
    position: relative;
}

/* .ds-input + .ds-input-sm chrome on the infix box */
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix {
    position: relative;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    width: 100%;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 1px solid var(--gray-600) !important;
    border-radius: var(--radius-md);
    background-color: var(--bg);
    box-shadow: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    overflow: visible;
}

/* .ds-input:hover */
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):not(.mat-form-field-disabled):not(:focus-within):not(.mat-focused):hover .mat-form-field-infix {
    border-color: var(--text-primary) !important;
    background-color: var(--bg) !important;
    box-shadow: none !important;
}

/* .ds-input:focus — 2px brand border, padding shrinks by 1px each side */
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):focus-within .mat-form-field-infix,
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-focused .mat-form-field-infix {
    border-width: 2px !important;
    border-color: var(--brand) !important;
    padding: 5px 11px !important;
    background-color: var(--bg);
    box-shadow: none !important;
    outline: none !important;
}

/* .ds-input-error */
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-infix,
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched .mat-form-field-infix {
    border-color: var(--color-error) !important;
    background-color: var(--mux-color-invalid-bg);
}

body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid:focus-within .mat-form-field-infix,
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched:focus-within .mat-form-field-infix {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 1px var(--color-error) !important;
}

/* .ds-input:disabled — Material adds .mat-form-field-disabled to the host when the FormControl is disabled */
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled .mat-form-field-infix {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--gray-100) !important;
    border-color: var(--gray-600) !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled:hover .mat-form-field-infix {
    cursor: not-allowed;
}

body.modern-ux.medrio.dark role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled .mat-form-field-infix {
    background-color: var(--mux-color-bg-disabled) !important;
    border-color: var(--mux-color-border) !important;
}

/* Remove Material underline (border on infix replaces it) */
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-underline,
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-underline .mat-form-field-ripple {
    display: none !important;
    height: 0 !important;
    border: none !important;
    visibility: hidden !important;
}

/* Label — floated above the infix box, styled as .ds-label */
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label {
    color: var(--text-primary) !important;
    position: static !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    pointer-events: none;
    background-color: transparent !important;
}

body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-label,
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid .mat-form-field-label span,
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched .mat-form-field-label {
    color: var(--color-error) !important;
}

body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label-wrapper {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    top: 10px !important;
    width: auto !important;
    max-width: 100%;
    padding: 0 !important;
    overflow: visible;
    transform: translateY(calc(-100% - 4px)) !important;
    pointer-events: none;
    z-index: 2;
}

body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-should-float .mat-form-field-label,
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-label.mat-empty {
    transform: none !important;
}

/* Inner input — font/color; opacity stays 1 (infix box carries the disabled opacity) */
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix input.mat-input-element {
    position: relative;
    z-index: 3;
    flex: 1 1 auto !important;
    align-self: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled .mat-form-field-infix input.mat-input-element {
    opacity: 1 !important;
    cursor: not-allowed !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* hint / helper text — .ds-helper */
body.modern-ux role-details-tab mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-hint {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) input.frequency-number-input::-webkit-outer-spin-button,
body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) input.frequency-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Frequency field only: hide Material label when value present (number input has no persistent placeholder). */
body.modern-ux notification-item mat-form-field.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):has(input.frequency-number-input) .mat-form-field-infix input.mat-input-element:not(:placeholder-shown) ~ .mat-form-field-label-wrapper {
    display: none !important;
}


body.modern-ux notification-item .notification-item-every-column {
    align-items: center !important;
}

body.modern-ux notification-item .frequency-number-label {
    padding-top: 0 !important;
    align-self: center;
}

body.modern-ux notification-item .notification-item-hint {
    top: 0 !important;
    margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------
   med-select (@medrio/core) — match native select + med-input field chrome; popover matches mat panel above
   ------------------------------------------------------------------------- */
body.modern-ux med-select:not(.ui-dialog *, .cdk-overlay-container *) {
    position: relative;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    vertical-align: middle;
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-ds-select-line-height) !important;
    color: var(--mux-color-text);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    padding: var(--mux-ds-select-pad-y) var(--mux-ds-select-pad-inline-end) var(--mux-ds-select-pad-y)
        var(--mux-ds-select-pad-inline-start);
    height: var(--mux-ds-select-height);
    min-height: var(--mux-ds-select-height);
    max-height: var(--mux-ds-select-height);
    overflow: hidden;
    max-width: 24rem;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    transition: var(--mux-transition);
    cursor: pointer;
}

body.modern-ux med-dialog med-select:not(.ui-dialog *, .cdk-overlay-container *) {
    max-width: none;
}

body.modern-ux med-select:not(.ui-dialog *, .cdk-overlay-container *):hover:not([disabled]):not([aria-disabled="true"]):not(:focus-within):not([aria-expanded="true"]) {
    border-color: var(--mux-color-text);
    background-color: var(--input-background);
    box-shadow: none;
}

body.modern-ux med-select:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux med-select:not(.ui-dialog *, .cdk-overlay-container *):focus-within,
body.modern-ux med-select:not(.ui-dialog *, .cdk-overlay-container *)[aria-expanded="true"] {
    border-width: 1px;
    border-color: var(--mux-color-border-focus);
    outline: none;
    box-shadow: var(--mux-focus-ring);
    background-color: var(--input-background);
    padding: var(--mux-ds-select-pad-y) var(--mux-ds-select-pad-inline-end) var(--mux-ds-select-pad-y)
        var(--mux-ds-select-pad-inline-start);
}

body.modern-ux med-select:not(.ui-dialog *, .cdk-overlay-container *):focus-within:hover,
body.modern-ux med-select:not(.ui-dialog *, .cdk-overlay-container *)[aria-expanded="true"]:hover:not([disabled]) {
    border-color: var(--mux-color-border-focus);
    background-color: var(--input-background);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux med-select:not(.ui-dialog *, .cdk-overlay-container *)[disabled],
body.modern-ux med-select:not(.ui-dialog *, .cdk-overlay-container *)[aria-disabled="true"] {
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: 0.9;
}

body.modern-ux med-select:focus-visible {
    outline: none;
}

/* .med-select-value (shadow) inherits host line-height; use --mux-ds-select-line-height so label fits inner box. */

/* Dropdown panel (teleported; not under .cdk-overlay-container in all builds).
   Native-style list: gap under trigger, thin border, light blue row tint + dark text (ref: Country select).
   Theme --accent is near-white; do not use it for option highlight. */
body.modern-ux med-menu-popover.med-select-overlay {
    margin-top: 0.25rem;
    max-width: min(100vw - 2rem, 24rem) !important;
    box-sizing: border-box;
    /* Core positions with display:flex; without auto height the pane can stretch and leave dead space under few options */
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-start;
}

body.modern-ux med-menu-popover.med-select-overlay .med-menu-overlay-pane {
    border-radius: var(--mux-radius);
    border: 1px solid var(--mux-secondary-dark);
    box-shadow: var(--mux-shadow-sm);
    background-color: var(--input-background);
    box-sizing: border-box;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto;
}

body.modern-ux med-menu-popover.med-select-overlay .med-menu-panel {
    border-radius: inherit;
    background-color: var(--input-background);
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto;
}

body.modern-ux med-menu-popover.med-select-overlay .med-menu-content {
    padding: 0.125rem 0;
    height: auto !important;
    min-height: unset !important;
    flex: 0 0 auto;
    /* Scroll only this inner scroller for long lists; pane/panel must not reserve a tall min-height */
    max-height: min(18rem, calc(100vh - 6rem)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-content: flex-start;
}

body.modern-ux med-menu-popover.med-select-overlay .med-menu-content > div {
    height: auto !important;
    min-height: 0 !important;
    flex-grow: 0 !important;
}

/* Inner Stencil wrapper can carry a list min-height; collapse when only one (or few) med-item */
body.modern-ux med-menu-popover.med-select-overlay .med-menu-content div.sc-med-menu-popover {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
}

/* Teleported overlay pane often fills the fixed container; don’t stretch the popover’s column to that height */
body.modern-ux .med-overlay-pane:has(med-menu-popover.med-select-overlay) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
}

body.modern-ux med-menu-popover.med-select-overlay med-item.item,
body.modern-ux med-menu-popover.med-select-overlay med-item {
    max-height: 2.25rem;
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size);
    font-weight: var(--fw-normal);
    line-height: var(--mux-ds-select-line-height);
    color: var(--mux-color-text);
    background-color: var(--input-background) !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
}

body.modern-ux med-menu-popover.med-select-overlay med-item span {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

body.modern-ux med-menu-popover.med-select-overlay med-item:hover:not([aria-disabled="true"]),
body.modern-ux med-menu-popover.med-select-overlay med-item:focus {
    background-color: rgba(70, 185, 255, 0.16) !important;
    color: var(--mux-color-text) !important;
}

body.modern-ux med-menu-popover.med-select-overlay med-item.med-selected,
body.modern-ux med-menu-popover.med-select-overlay med-item[aria-selected="true"] {
    color: var(--mux-color-text) !important;
    font-weight: var(--fw-semibold);
}

body.modern-ux med-menu-popover.med-select-overlay med-item[aria-disabled="true"] {
    color: var(--muted-foreground) !important;
    background-color: var(--muted) !important;
    opacity: 0.9;
}

/* Site chrome — med-menu-popover.med-menu-overlay (User menu on home.aspx, etc.).
   :not(.med-select-overlay): med-select popovers carry BOTH classes; without this, bold/brand nav-item rules override native-select-like med-select-overlay. */
body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) {
    max-width: min(100vw - 2rem, 40rem);
    box-sizing: border-box;
}

body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) .med-menu-overlay-pane {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--mux-shadow-hover);
    background-color: var(--background);
    box-sizing: border-box;
}

body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) .med-menu-panel {
    border-radius: inherit;
    background-color: var(--background);
}

body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) .med-menu-content {
    padding: 0.25rem 0;
}

body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) med-item.item,
body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) med-item {
    min-height: 44px !important;
    /*padding: 0 16px !important;*/
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    color: var(--brand-accessible) !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) med-item span {
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) med-item:hover:not([aria-disabled="true"]),
body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) med-item:focus-visible {
    background-color: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
    outline: none;
    box-shadow: none;
}

body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) med-item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--brand) !important;
}

body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) med-item[aria-selected="true"] {
    background-color: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
    font-weight: var(--fw-semibold) !important;
}

body.modern-ux med-menu-popover.med-menu-overlay:not(.med-select-overlay) med-item[aria-disabled="true"] {
    color: var(--muted-foreground) !important;
    background-color: transparent !important;
    opacity: 0.7;
}

/* -------------------------------------------------------------------------
   Disabled & readonly
   ------------------------------------------------------------------------- */
body.modern-ux input:not(.ui-dialog *, .cdk-overlay-container *):disabled,
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):disabled,
body.modern-ux select:disabled {
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: 0.9;
}

body.modern-ux input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput):read-only,
body.modern-ux input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *):read-only,
body.modern-ux input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *):read-only,
body.modern-ux input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *):read-only,
body.modern-ux input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *):read-only,
body.modern-ux input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *):read-only,
body.modern-ux input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *):read-only,
body.modern-ux textarea:not([class*="mat-"]):not(.native-input):read-only {
    background-color: var(--muted);
    color: var(--foreground);
    cursor: default;
}

/* -------------------------------------------------------------------------
   Color input
   ------------------------------------------------------------------------- */
body.modern-ux input[type="color"]:not(.ui-dialog *, .cdk-overlay-container *) {
    width: 3.25rem;
    height: var(--mux-height);
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--background);
    box-sizing: border-box;
    box-shadow: var(--mux-shadow-sm);
    transition: var(--mux-transition);
}

body.modern-ux input[type="color"]:not(.ui-dialog *, .cdk-overlay-container *):hover {
    border-color: var(--mux-color-border-hover);
    box-shadow: var(--mux-shadow);
}

body.modern-ux input[type="color"]:not(.ui-dialog *, .cdk-overlay-container *):focus {
    border-color: var(--mux-color-border-focus);
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

/* -------------------------------------------------------------------------
   Range input
   ------------------------------------------------------------------------- */
body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *) {
    width: 100%;
    max-width: 16rem;
    height: 0.5rem;
    padding: 0;
    margin: 0.6rem 0;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: var(--radius-full);
    vertical-align: middle;
    transition: box-shadow 0.2s ease;
}

body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *):hover {
    box-shadow: 0 0 0 1px var(--mux-color-border-hover);
}

body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *):focus {
    outline: none;
}

body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *)::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--mux-color-accent) 0%, var(--mux-color-accent-hover) 100%);
    border: 2px solid var(--background);
    box-shadow: var(--mux-shadow);
    cursor: pointer;
    margin-top: -0.4rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *)::-moz-range-thumb {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--mux-color-accent) 0%, var(--mux-color-accent-hover) 100%);
    border: 2px solid var(--background);
    box-shadow: var(--mux-shadow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *):hover::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: var(--mux-shadow-hover);
}

body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *):hover::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: var(--mux-shadow-hover);
}

body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *):focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--mux-color-accent-glow), var(--mux-shadow);
}

body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *):focus::-moz-range-thumb {
    box-shadow: 0 0 0 2px var(--mux-color-accent-glow), var(--mux-shadow);
}

/* -------------------------------------------------------------------------
   File input
   ------------------------------------------------------------------------- */
body.modern-ux input[type="file"]:not(.ui-dialog *, .cdk-overlay-container *) {
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-9);
    padding: var(--mux-padding-y) var(--mux-padding-x);
    max-width: 24rem;
    width: 100%;
}

body.modern-ux input[type="file"]:not(.ui-dialog *, .cdk-overlay-container *)::file-selector-button {
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-9);
    font-weight: var(--fw-medium);
    padding: 0.45rem 0.85rem;
    margin-right: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--foreground);
    cursor: pointer;
    transition: var(--mux-transition);
    box-shadow: var(--mux-shadow-sm);
}

body.modern-ux input[type="file"]:not(.ui-dialog *, .cdk-overlay-container *)::file-selector-button:hover {
    background: var(--muted);
    border-color: var(--mux-color-border-hover);
    box-shadow: var(--mux-shadow);
}

body.modern-ux input[type="file"]:not(.ui-dialog *, .cdk-overlay-container *):focus {
    outline: none;
}

body.modern-ux input[type="file"]:not(.ui-dialog *, .cdk-overlay-container *):focus::file-selector-button {
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

/* WebKit file button */
body.modern-ux input[type="file"]:not(.ui-dialog *, .cdk-overlay-container *)::-webkit-file-upload-button {
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-9);
    font-weight: var(--fw-medium);
    padding: 0.45rem 0.85rem;
    margin-right: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--foreground);
    cursor: pointer;
    transition: var(--mux-transition);
}

/* -------------------------------------------------------------------------
   Study documents — StudyDocuments.aspx (#divUpload is unique to this page)
   ------------------------------------------------------------------------- */
body.modern-ux .page-contents:has(#divUpload) {
    background: var(--mux-bg-chrome);
    box-sizing: border-box;
}

body.modern-ux #divAddNew:has(#divUpload) .pod.gc12 {
    box-shadow: var(--mux-shadow-sm);
}

body.modern-ux #divAddNew:has(#divUpload) .pod.gc12 > header.major {
    display: flex;
    align-items: center;
    min-height: 47px;
    padding: 0 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--mux-color-black-12);
    background: var(--mux-bg-subtle);
}

body.modern-ux #divAddNew:has(#divUpload) .pod.gc12 > header.major h1 {
    margin: 0;
    padding: 0;
    font-size: var(--mux-fs-rem-10625);
    font-weight: var(--fw-medium);
    line-height: var(--lh-relaxed);
    letter-spacing: normal;
    color: var(--mux-color-on-surface);
}

body.modern-ux #divAddNew:has(#divUpload) .pod > .body {
    margin: 0.75rem !important;
    padding: 1rem 1.25rem 1.5rem;
    box-sizing: border-box;
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload {
    background: var(--background);
    border: 1px solid var(--mux-color-border);
    border-radius: var(--mux-radius);
    box-shadow: var(--mux-shadow-sm);
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.25rem;
    box-sizing: border-box;
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload > p:first-of-type {
    margin: 0 0 0.75rem;
    color: var(--mux-color-text-muted);
    font-size: var(--mux-fs-rem-8125);
    line-height: var(--lh-loose);
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload > h2 {
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: var(--mux-fs-rem-9375);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-relaxed);
    color: var(--foreground);
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload table.layout.study-doc-upload-table {
    width: 100%;
    margin-top: 0.5rem !important;
    border-collapse: collapse;
}

/* Row 1: label baseline with file control (same height as .ds-input-sm / text fields) */
body.modern-ux #divAddNew:has(#divUpload) #divUpload table.study-doc-upload-table tr.study-doc-upload-row td {
    vertical-align: top;
    padding: 0 0.5rem 0 0;
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload table.study-doc-upload-table tr.study-doc-upload-row td.study-doc-label-cell {
    white-space: nowrap;
    padding-top: 0;
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload table.study-doc-upload-table tr.study-doc-upload-row td.study-doc-label-cell label {
    display: inline-flex;
    align-items: center;
    min-height: var(--mux-field-control-min-height);
    margin: 0;
    font-size: var(--mux-field-control-font-size);
    font-weight: var(--fw-medium);
    line-height: var(--mux-line-height);
    color: var(--foreground);
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload table.study-doc-upload-table td.study-doc-file-input-cell {
    width: 99%;
    vertical-align: top;
    padding-top: 0;
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload .study-doc-file-cell-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* Row 2: max-size hint under the file field, aligned with file column */
body.modern-ux #divAddNew:has(#divUpload) #divUpload table.study-doc-upload-table tr.study-doc-hint-row td {
    vertical-align: top;
    padding: 0.35rem 0 0 0;
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload table.study-doc-upload-table tr.study-doc-hint-row td.width75px {
    padding: 0;
}

/* Match native text/select field height (32px) — overrides looser global file input padding */
body.modern-ux #divAddNew:has(#divUpload) #divUpload input[type="file"] {
    max-width: 100%;
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size) !important;
    line-height: var(--lh-tight) !important;
    padding: 0 0.5rem 0 0 !important;
    margin: 0 !important;
    height: var(--mux-field-control-height) !important;
    min-height: var(--mux-field-control-min-height) !important;
    max-height: var(--mux-field-control-height) !important;
    box-sizing: border-box !important;
    vertical-align: middle;
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    background-color: var(--input-background);
    color: var(--mux-color-text);
    transition: var(--mux-transition);
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload input[type="file"]:hover:not(:disabled) {
    border-color: var(--mux-color-border-hover);
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload input[type="file"]:focus {
    outline: none;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload input[type="file"]::file-selector-button,
body.modern-ux #divAddNew:has(#divUpload) #divUpload input[type="file"]::-webkit-file-upload-button {
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size) !important;
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight) !important;
    padding: var(--mux-field-control-padding-y) var(--mux-field-control-padding-x) !important;
    margin-right: 0.5rem !important;
    box-sizing: border-box !important;
    min-height: calc(var(--mux-field-control-min-height) - 2px) !important;
    height: calc(var(--mux-field-control-height) - 2px) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--foreground);
    cursor: pointer;
    transition: var(--mux-transition);
    box-shadow: var(--mux-shadow-sm);
    vertical-align: middle;
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload input[type="file"]::file-selector-button:hover,
body.modern-ux #divAddNew:has(#divUpload) #divUpload input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--muted);
    border-color: var(--mux-color-border-hover);
    box-shadow: var(--mux-shadow);
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload .study-doc-max-size {
    display: inline-block;
    margin: 0;
    font-size: var(--mux-fs-rem-75);
    line-height: var(--lh-relaxed);
    color: var(--mux-color-text-muted);
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload .ErrorStudyDoc {
    margin: 0.75rem 0 0;
}

body.modern-ux #divAddNew:has(#divUpload) #divUpload a.button.action {
    margin-top: 1rem;
}

body.modern-ux #divAddNew:has(#divUpload) .margin-top-15px {
    margin-top: 1.25rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mux-color-border);
}

body.modern-ux #divAddNew:has(#divUpload) .margin-top-15px table.layout {
    width: 100%;
}

body.modern-ux #divAddNew:has(#divUpload) .margin-top-15px table.layout td {
    padding: 0;
}

body.modern-ux #divAddNew:has(#divUpload) .margin-top-15px .study-doc-recycle-row {
    width: 100%;
    padding: 0;
}

body.modern-ux #divAddNew:has(#divUpload) .margin-top-15px a[href*="RecycleBin"] {
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

body.modern-ux #divAddNew:has(#divUpload) .margin-top-15px a[href*="RecycleBin"]:hover {
    text-decoration: underline;
    text-decoration-color: var(--mux-color-link-hover);
}

body.modern-ux #divAddNew:has(#divUpload) .margin-top-15px p.strong {
    margin: 0.75rem 0 0;
    font-size: var(--mux-fs-rem-8125);
    line-height: var(--lh-loose);
    color: var(--mux-color-text-muted);
}

body.modern-ux #divAddNew:has(#divUpload) table.matrix {
    margin-top: 0.25rem;
    border-radius: var(--mux-radius);
    overflow: hidden;
    border: 1px solid var(--mux-color-border);
    background: var(--background);
}

/* Study documents grid — edit link touch target + focus (StudyDocsGV .study-docs-gv) */
body.modern-ux #divAddNew:has(#divUpload) table.matrix.study-docs-gv td a[id$="lnkEdit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--mux-touch-min);
    min-height: var(--mux-touch-min);
    box-sizing: border-box;
}

body.modern-ux #divAddNew:has(#divUpload) table.matrix.study-docs-gv td a[id$="lnkEdit"]:focus-visible {
    outline: 2px solid var(--mux-color-border-focus, var(--mux-color-link));
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Checkbox & Radio � custom styling
   ------------------------------------------------------------------------- */
/* med-checkbox (@medrio/core): tick is in shadow DOM; stroke from --mux-med-checkbox-checkmark-stroke via js/modern-ux-theme.js */
/* Checkbox & Radio — CSS-Only-UI-2026 .ds-checkbox / .ds-radio: 20×20, 2px gray-600 border */
body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *) {
    -webkit-appearance: none;
    appearance: none;
    /* common.css input { padding: 2px } otherwise shrinks the custom-drawn box */
    padding: 0 !important;
    width: 20px;
    height: 20px;
    margin: 5px;
    border: 2px solid var(--mux-color-checkbox-border) !important;
    border-width: 2px !important;
    background-color: var(--background) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease;
    box-sizing: border-box;
}

body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *) {
    border-radius: 50%;
    background-image: none;
}

/* Checkbox: same radius and border-based unchecked as option-circle (consistent with survey-multichoice) */
body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *) {
    border-radius: var(--radius);
    background-image: none;
}

body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):not(:checked) {
    background-image: none;
}

/* Table checkboxes (e.g. Delete column): force visible border/background so they’re never lost on white */
body.modern-ux table.ListControl td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):not(:checked),
body.modern-ux table.ControlListControl td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):not(:checked),
body.modern-ux table input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *):not(:checked) {
    border: 2px solid var(--gray-600) !important;
    background-color: var(--bg) !important;
}

/* Unchecked hover — .ds-checkbox/:hover uses brand-dark border */
body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:checked) {
    border-color: var(--brand-dark) !important;
    background-image: none;
}

body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:checked) {
    border-color: var(--mux-primary-dark) !important;
    background-color: var(--background);
}

/* Checked: filled with accent, black checkmark (align with .ds-checkbox :checked:after; !important so checked overrides base) */
body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):checked,
body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *):checked {
    border-color: var(--mux-color-accent) !important;
    background-color: var(--mux-color-accent) !important;
    box-shadow: none;
}

body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):checked:hover:not(:disabled),
body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *):checked:hover:not(:disabled) {
    border-color: var(--mux-color-accent-hover) !important;
    background-color: var(--mux-color-accent-hover) !important;
}

/* Check-pop animation removed: it made the (hidden) input briefly visible as a small circle on survey-multichoice */

/* Checkbox checked – black checkmark (same SVG and size as survey-multichoice .option-circle; stroke matches .ds-checkbox) */
body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *):checked,
body.modern-ux .survey-multichoice-option input:not(.ui-dialog *, .cdk-overlay-container *):checked+label .option-circle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle fill='black' cx='4' cy='4' r='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* med-radio (@medrio/core) — same tokens as native radio + .survey-multichoice-option .option-circle */
body.modern-ux med-radio.interactive:not(.med-disabled) .med-radio-outer-circle {
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--mux-color-checkbox-border);
    background-color: var(--background);
}

body.modern-ux med-radio.interactive:not(.med-disabled):not(.med-radio-checked):hover .med-radio-outer-circle {
    border-color: var(--mux-primary-dark) !important;
    background-color: var(--background);
}

body.modern-ux med-radio.interactive.med-radio-checked:not(.med-disabled) .med-radio-outer-circle {
    border-color: var(--mux-color-accent) !important;
    background-color: var(--mux-color-accent) !important;
    box-shadow: none;
}

body.modern-ux med-radio.interactive.med-radio-checked:not(.med-disabled):hover .med-radio-outer-circle {
    border-color: var(--mux-color-accent-hover) !important;
    background-color: var(--mux-color-accent-hover) !important;
}

body.modern-ux med-radio.interactive.med-radio-checked:not(.med-disabled) .med-radio-inner-circle {
    border-radius: 50%;
    background-color: #000000 !important;
}

body.modern-ux med-radio.interactive.med-disabled .med-radio-outer-circle,
body.modern-ux med-radio.interactive.med-radio-checked.med-disabled .med-radio-outer-circle {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    opacity: 0.7;
}

body.modern-ux med-radio.interactive.med-radio-checked.med-disabled .med-radio-inner-circle {
    background-color: var(--muted-foreground) !important;
}

/* A11y: visible focus for keyboard (WCAG 2.4.7); optional: no ring on mouse-only focus */
body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *):focus {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):focus:not(:focus-visible),
body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *):focus:not(:focus-visible) {
    box-shadow: none;
}

body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):disabled,
body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *):disabled {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):disabled:checked,
body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *):disabled:checked {
    background-color: var(--muted-foreground) !important;
    border-color: var(--muted-foreground) !important;
}

/* -------------------------------------------------------------------------
   Tables — global header row typography (gray-600, weight 700)
   - Standard: thead th/td
   - ASP.NET GridView: often omits <thead>; header is first tbody row of <th>
   Links in sortable headers need inherit so theme anchor colors do not win.
   Page-specific blocks below may add icons/hover; equal or higher specificity wins.
   ------------------------------------------------------------------------- */
body.modern-ux table thead th,
body.modern-ux table thead td,
body.modern-ux table > tbody > tr:first-child > th {
    color: var(--gray-600) !important;
    font-weight: var(--fw-bold) !important;
    font-size: var(--table-header-font-size) !important;
    vertical-align: middle;
}

body.modern-ux table thead th a,
body.modern-ux table thead td a,
body.modern-ux table > tbody > tr:first-child > th a {
    color: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}

body.modern-ux table thead th .material-icons,
body.modern-ux table thead td .material-icons,
body.modern-ux table > tbody > tr:first-child > th .material-icons {
    color: inherit !important;
}

/* VisitEditor.ascx — Collection Event Label: tr.height40px forces 40px (common.css); content overflows and help reads beside the input. */
body.modern-ux [id$="pnlCollectionEventLabel"] tr.height40px {
    height: auto;
}

body.modern-ux [id$="pnlCollectionEventLabel"] tr.height40px > td {
    vertical-align: top;
}

body.modern-ux [id$="pnlCollectionEventLabel"] tr.height40px span.helpText {
    display: block;
    margin-top: 0.35rem;
}

/* Visit editor RadGrid (VisitEditor.ascx / edit_visit.aspx): visits table thead — gray-600, weight 700 */
body.modern-ux table.visits-list.mc-table thead th,
body.modern-ux table.visits-list.mc-table.mc-thin-table thead th {
    color: var(--gray-600) !important;
    font-weight: var(--fw-bold) !important;
}

body.modern-ux table.visits-list.mc-table thead th .material-icons,
body.modern-ux table.visits-list.mc-table.mc-thin-table thead th .material-icons {
    color: inherit !important;
}

/* edit_forms_list.aspx RadGrid — config form list thead: gray-600, weight 700 (parity with visits-list) */
body.modern-ux table.config-form-list.mc-table thead th,
body.modern-ux table.config-form-list.mc-table.mc-thin-table thead th {
    color: var(--gray-600) !important;
    font-weight: var(--fw-bold) !important;
}

body.modern-ux table.config-form-list.mc-table thead th .material-icons,
body.modern-ux table.config-form-list.mc-table.mc-thin-table thead th .material-icons {
    color: inherit !important;
}

/* edit_forms_list.aspx — Form column: lnkForm has no CssClass, so it matches the global
   classless-<a> ghost-button rule (inline-flex + 36px min-height + horizontal padding).
   That separates the form name from the plain-text “(var count)” in the same <td>. */
body.modern-ux table.config-form-list.mc-table tbody a[id$="lnkForm"] {
    display: inline !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-weight: var(--fw-medium) !important;
    font-size: inherit !important;
    line-height: inherit !important;
    border-radius: 0 !important;
    vertical-align: baseline !important;
}

body.modern-ux table.config-form-list.mc-table tbody a[id$="lnkForm"]:hover,
body.modern-ux table.config-form-list.mc-table tbody a[id$="lnkForm"]:active {
    background-color: transparent !important;
    background: transparent !important;
}

/* EditApprovalStepRoles.aspx — role checklist (RadWindow iframe; WizardContent8.master).
 * Scoped via CheckBoxList ID lstRoles (client id contains "lstRoles") — no extra class on the aspx page. */
body.modern-ux:has(table.chkboxlist[id*="lstRoles"]) form {
    min-height: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
}

/* Root .m-15 margin + flex master can exceed iframe height → window scrollbar; use padding inset instead */
body.modern-ux:has(table.chkboxlist[id*="lstRoles"]) div.m-15 {
    margin: 0;
    padding: 15px;
    box-sizing: border-box;
}

body.modern-ux table.chkboxlist[id*="lstRoles"] td {
    padding: 4px;
}

body.modern-ux table.chkboxlist[id*="lstRoles"] input {
    margin-right: 4px;
}

body.modern-ux:has(table.chkboxlist[id*="lstRoles"]) .aspNetDisabled {
    color: #bbb;
}

body.modern-ux:has(table.chkboxlist[id*="lstRoles"]) .role-list-frame {
    border: 1px solid #c0c0c0;
    height: 350px;
    overflow: auto;
}

body.modern-ux:has(table.chkboxlist[id*="lstRoles"]) .steps-footnote {
    color: #444;
    font-size: 11px;
}

/*
 * Telerik RadUpload (edit_forms_list GVForms, FileVarValUploadSubPage iframe on data entry):
 * Exclude .ruButton from global primary input[type=button]; style browse as muted secondary.
 * .ruFakeInput is read-only (Telerik) but should match normal field fill, not global :read-only muted.
 */
body.modern-ux .RadUpload,
body.modern-ux .RadUpload .ruInputs,
body.modern-ux .RadUpload .ruInputs > li {
    overflow: visible !important;
}

body.modern-ux .rgEditForm table tr:has(.RadUpload) {
    overflow: visible !important;
}

body.modern-ux .rgEditForm table td:has(.RadUpload) {
    overflow: visible !important;
    vertical-align: middle !important;
}

body.modern-ux .RadUpload span.ruFileWrap {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    overflow: visible !important;
    min-height: var(--mux-field-control-min-height) !important;
    box-sizing: border-box;
}

body.modern-ux .RadUpload input.ruButton.ruBrowse,
body.modern-ux .RadUpload input.ruButton {
    overflow: visible !important;
    min-height: var(--mux-field-control-min-height) !important;
    height: var(--mux-field-control-height) !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    line-height: var(--lh-snug) !important;
    font-size: var(--mux-field-control-font-size) !important;
    align-self: center;
    color: var(--foreground) !important;
    background: var(--muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--mux-radius) !important;
    box-shadow: none !important;
    font-weight: var(--fw-medium) !important;
    cursor: pointer !important;
}

body.modern-ux .RadUpload input.ruButton.ruBrowse:hover:not(:disabled),
body.modern-ux .RadUpload input.ruButton:hover:not(:disabled) {
    background: var(--mux-color-bg-hover) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
    box-shadow: none !important;
}

body.modern-ux .RadUpload input.ruButton.ruBrowse:active:not(:disabled),
body.modern-ux .RadUpload input.ruButton:active:not(:disabled) {
    background: var(--mux-brand-accessible-08) !important;
    box-shadow: none !important;
}

body.modern-ux .RadUpload input.ruButton.ruBrowse:focus-visible,
body.modern-ux .RadUpload input.ruButton:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .RadUpload input.ruFakeInput {
    max-width: none !important;
    align-self: center;
}

/* Telerik read-only fake path: same surface as other text fields (not global input:read-only muted). */
body.modern-ux .RadUpload input.ruFakeInput:read-only {
    background-color: var(--input-background) !important;
    color: var(--mux-color-text) !important;
    cursor: default !important;
    opacity: 1 !important;
}

body.modern-ux .RadUpload input.ruFakeInput:read-only:hover {
    border-color: var(--mux-color-text);
    background-color: var(--input-background) !important;
}

body.modern-ux .RadUpload input.ruFakeInput:read-only:focus,
body.modern-ux .RadUpload input.ruFakeInput:read-only:active {
    border-width: 1px;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
    background-color: var(--input-background) !important;
}

/* edit_queries*.aspx (gvVariables): header typography + Select All links */
body.modern-ux#editQueries table.mc-table th[scope="col"],
body.modern-ux#editQueries table.mc-thin-table th[scope="col"],
body.modern-ux#editQueriesCustom table.mc-table th[scope="col"],
body.modern-ux#editQueriesCustom table.mc-thin-table th[scope="col"],
body.modern-ux#editQueriesAutomatic table.mc-table th[scope="col"],
body.modern-ux#editQueriesAutomatic table.mc-thin-table th[scope="col"] {
    color: var(--gray-600) !important;
    font-weight: var(--fw-bold) !important;
}

body.modern-ux#editQueries table.mc-table th[scope="col"] a,
body.modern-ux#editQueries table.mc-thin-table th[scope="col"] a,
body.modern-ux#editQueriesCustom table.mc-table th[scope="col"] a,
body.modern-ux#editQueriesCustom table.mc-thin-table th[scope="col"] a,
body.modern-ux#editQueriesAutomatic table.mc-table th[scope="col"] a,
body.modern-ux#editQueriesAutomatic table.mc-thin-table th[scope="col"] a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2);
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--space-3) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    font-size: var(--mux-fs-14) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

body.modern-ux#editQueries table.mc-table th[scope="col"] a:hover,
body.modern-ux#editQueries table.mc-thin-table th[scope="col"] a:hover,
body.modern-ux#editQueriesCustom table.mc-table th[scope="col"] a:hover,
body.modern-ux#editQueriesCustom table.mc-thin-table th[scope="col"] a:hover,
body.modern-ux#editQueriesAutomatic table.mc-table th[scope="col"] a:hover,
body.modern-ux#editQueriesAutomatic table.mc-thin-table th[scope="col"] a:hover {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
}

body.modern-ux#editQueries table.mc-table th[scope="col"] a:active,
body.modern-ux#editQueries table.mc-thin-table th[scope="col"] a:active,
body.modern-ux#editQueriesCustom table.mc-table th[scope="col"] a:active,
body.modern-ux#editQueriesCustom table.mc-thin-table th[scope="col"] a:active,
body.modern-ux#editQueriesAutomatic table.mc-table th[scope="col"] a:active,
body.modern-ux#editQueriesAutomatic table.mc-thin-table th[scope="col"] a:active {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux#editQueries table.mc-table th[scope="col"] a:focus-visible,
body.modern-ux#editQueries table.mc-thin-table th[scope="col"] a:focus-visible,
body.modern-ux#editQueriesCustom table.mc-table th[scope="col"] a:focus-visible,
body.modern-ux#editQueriesCustom table.mc-thin-table th[scope="col"] a:focus-visible,
body.modern-ux#editQueriesAutomatic table.mc-table th[scope="col"] a:focus-visible,
body.modern-ux#editQueriesAutomatic table.mc-thin-table th[scope="col"] a:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/* Visit editor RadGrid (VisitEditor.ascx): row + inline edit form checkboxes — same as native mux / .ds-checkbox (higher specificity vs common.css border-width + Telerik) */
body.modern-ux table.visits-list input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux .rgEditForm table.form-table input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *) {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin: 5px !important;
    border: 2px solid var(--mux-color-checkbox-border) !important;
    border-width: 2px !important;
    background-color: var(--background) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease;
    box-sizing: border-box;
    border-radius: var(--radius);
    background-image: none;
}

body.modern-ux table.visits-list input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):not(:checked),
body.modern-ux .rgEditForm table.form-table input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):not(:checked) {
    background-image: none;
}

body.modern-ux table.visits-list td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):not(:checked),
body.modern-ux .rgEditForm table.form-table td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):not(:checked) {
    border: 2px solid var(--gray-600) !important;
    background-color: var(--bg) !important;
}

body.modern-ux table.visits-list input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:checked),
body.modern-ux .rgEditForm table.form-table input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):hover:not(:disabled):not(:checked) {
    border-color: var(--brand-dark) !important;
    background-image: none;
}

body.modern-ux table.visits-list input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):checked,
body.modern-ux .rgEditForm table.form-table input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):checked {
    border-color: var(--mux-color-accent) !important;
    background-color: var(--mux-color-accent) !important;
    box-shadow: none;
    /* stroke-width 1.5 in SVG; full tile on 20×20 control (visit grid) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

body.modern-ux table.visits-list input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):checked:hover:not(:disabled),
body.modern-ux .rgEditForm table.form-table input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):checked:hover:not(:disabled) {
    border-color: var(--mux-color-accent-hover) !important;
    background-color: var(--mux-color-accent-hover) !important;
}

body.modern-ux table.visits-list input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux .rgEditForm table.form-table input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):focus {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux table.visits-list input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):focus:not(:focus-visible),
body.modern-ux .rgEditForm table.form-table input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):focus:not(:focus-visible) {
    box-shadow: none;
}

body.modern-ux table.visits-list input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):disabled,
body.modern-ux .rgEditForm table.form-table input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):disabled {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

body.modern-ux table.visits-list input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):disabled:checked,
body.modern-ux .rgEditForm table.form-table input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):disabled:checked {
    background-color: var(--muted-foreground) !important;
    border-color: var(--muted-foreground) !important;
}

/* Visit grid (VisitEditor.ascx): Baseline / Repeat / Multiple — replace checkmark.gif ImageButton with DS “checked” look (same fill + SVG as mux checkbox :checked) */
body.modern-ux table.visits-list td:has(input[type="image"][src*="checkmark"]) {
    position: relative;
    text-align: center;
    vertical-align: middle;
}

body.modern-ux table.visits-list td:has(input[type="image"][src*="checkmark"])::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    background-color: var(--mux-color-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 0;
}

body.modern-ux table.visits-list td:has(input[type="image"][src*="checkmark"]:focus-visible)::before {
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux table.visits-list input[type="image"][src*="checkmark"] {
    opacity: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    z-index: 1;
    cursor: inherit;
}

/*
 * Telerik RadTreeView (CheckBoxes / TriStateCheckBoxes): “checkboxes” are spans
 * (.rtChecked | .rtUnchecked | .rtIndeterminate), not input[type=checkbox].
 * Default skin uses sprites; redraw to match native mux checkbox geometry above.
 */
body.modern-ux .RadTreeView span.rtChecked,
body.modern-ux .RadTreeView span.rtUnchecked,
body.modern-ux .RadTreeView span.rtIndeterminate {
    display: inline-block !important;
    box-sizing: border-box !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 6px 0 0;
    padding: 0 !important;
    border: 2px solid var(--mux-color-checkbox-border) !important;
    border-radius: var(--radius) !important;
    vertical-align: middle !important;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, background-image 0.2s ease;
    background-color: var(--background) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    text-indent: 0 !important;
    overflow: hidden;
}

body.modern-ux .RadTreeView span.rtUnchecked {
    background-image: none !important;
}

body.modern-ux .RadTreeView span.rtUnchecked:hover {
    border-color: var(--mux-color-accent) !important;
}

body.modern-ux .RadTreeView span.rtChecked {
    border-color: var(--mux-color-accent) !important;
    background-color: var(--mux-color-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/%3E%3C/svg%3E") !important;
}

body.modern-ux .RadTreeView span.rtChecked:hover {
    border-color: var(--mux-color-accent-hover) !important;
    background-color: var(--mux-color-accent-hover) !important;
}

/* Tri-state: some children checked (partial) — white dash on accent, same as common indeterminate pattern */
body.modern-ux .RadTreeView span.rtIndeterminate {
    border-color: var(--mux-color-accent) !important;
    background-color: var(--mux-color-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M3 7h8'/%3E%3C/svg%3E") !important;
}

body.modern-ux .RadTreeView span.rtIndeterminate:hover {
    border-color: var(--mux-color-accent-hover) !important;
    background-color: var(--mux-color-accent-hover) !important;
}

/* Telerik RadRadioButtonList / RadCheckBoxList — buttons styled as bordered “pills”; match native mux checkbox/radio (no outer button chrome). */
body.modern-ux .RadRadioButtonList.rbHorizontalList,
body.modern-ux .RadCheckBoxList.rbHorizontalList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

body.modern-ux .RadRadioButtonList.rbVerticalList,
body.modern-ux .RadCheckBoxList.rbVerticalList {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: stretch;
}

body.modern-ux .RadRadioButtonList .RadRadioButton.RadButton,
body.modern-ux .RadCheckBoxList .RadCheckBox.RadButton {
    -webkit-appearance: none;
    appearance: none;
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0.35rem 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto;
    max-width: 100%;
    min-height: var(--mux-touch-min);
    border-radius: 0 !important;
    text-align: left;
    color: inherit;
    font: inherit;
    line-height: inherit;
    vertical-align: middle;
    cursor: pointer;
    transition: none;
}

body.modern-ux .RadRadioButtonList.rbVerticalList .RadRadioButton.RadButton,
body.modern-ux .RadCheckBoxList.rbVerticalList .RadCheckBox.RadButton {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

body.modern-ux .RadRadioButtonList .RadRadioButton.RadButton .rbText,
body.modern-ux .RadCheckBoxList .RadCheckBox.RadButton .rbText {
    /* Reserve room for the mux glyph + gap; Telerik skins often zero margins on ::before or load after this file. */
    --mux-rad-toggle-size: 1.25rem;
    --mux-rad-toggle-gap: 0.625rem;
    display: inline-flex !important;
    align-items: center;
    position: relative !important;
    box-sizing: border-box;
    background: none !important;
    background-image: none !important;
    padding-block: 0 !important;
    padding-inline-end: 0 !important;
    padding-inline-start: calc(var(--mux-rad-toggle-size) + var(--mux-rad-toggle-gap)) !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit;
    font: inherit;
    line-height: inherit;
    vertical-align: middle;
}

/* Telerik sometimes uses ::after on .rbText; hide so it cannot sit between glyph and caption. */
body.modern-ux .RadRadioButtonList .RadRadioButton .rbText::after,
body.modern-ux .RadCheckBoxList .RadCheckBox .rbText::after {
    content: none !important;
    display: none !important;
}

/* Custom indicator — same geometry and tokens as input[type=checkbox|radio] above */
body.modern-ux .RadRadioButtonList .RadRadioButton .rbText::before,
body.modern-ux .RadCheckBoxList .RadCheckBox .rbText::before {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    box-sizing: border-box !important;
    border: 2px solid var(--mux-color-checkbox-border) !important;
    background-color: var(--background) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease;
}

body.modern-ux .RadRadioButtonList .RadRadioButton .rbText::before {
    border-radius: 50% !important;
    background-image: none !important;
}

body.modern-ux .RadCheckBoxList .RadCheckBox .rbText::before {
    border-radius: var(--radius) !important;
    background-image: none !important;
}

body.modern-ux .RadRadioButtonList .RadRadioButton:hover .rbText.rbToggleRadio::before,
body.modern-ux .RadCheckBoxList .RadCheckBox:hover .rbText.rbToggleCheckbox::before {
    border-color: var(--mux-color-accent) !important;
    background-color: var(--background) !important;
}

body.modern-ux .RadRadioButtonList .RadRadioButton .rbText.rbToggleRadioChecked::before,
body.modern-ux .RadCheckBoxList .RadCheckBox .rbText.rbToggleCheckboxChecked::before {
    border-color: var(--mux-color-accent) !important;
    background-color: var(--mux-color-accent) !important;
}

body.modern-ux .RadRadioButtonList .RadRadioButton:hover .rbText.rbToggleRadioChecked::before,
body.modern-ux .RadCheckBoxList .RadCheckBox:hover .rbText.rbToggleCheckboxChecked::before {
    border-color: var(--mux-color-accent-hover) !important;
    background-color: var(--mux-color-accent-hover) !important;
}

body.modern-ux .RadCheckBoxList .RadCheckBox .rbText.rbToggleCheckboxChecked::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/%3E%3C/svg%3E") !important;
    background-size: 20px 20px !important;
}

body.modern-ux .RadRadioButtonList .RadRadioButton .rbText.rbToggleRadioChecked::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle fill='black' cx='4' cy='4' r='2'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
}

body.modern-ux .RadRadioButtonList .RadRadioButton:focus,
body.modern-ux .RadCheckBoxList .RadCheckBox:focus {
    outline: none;
}

body.modern-ux .RadRadioButtonList .RadRadioButton:focus-visible,
body.modern-ux .RadCheckBoxList .RadCheckBox:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
    border-radius: var(--radius);
}

body.modern-ux .RadRadioButtonList .RadRadioButton:focus:not(:focus-visible),
body.modern-ux .RadCheckBoxList .RadCheckBox:focus:not(:focus-visible) {
    box-shadow: none;
}

body.modern-ux .RadRadioButtonList .RadRadioButton.rbDisabled,
body.modern-ux .RadCheckBoxList .RadCheckBox.rbDisabled {
    cursor: not-allowed;
    opacity: 0.7;
}

body.modern-ux .RadRadioButtonList .RadRadioButton.rbDisabled .rbText::before,
body.modern-ux .RadCheckBoxList .RadCheckBox.rbDisabled .rbText::before {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    background-image: none !important;
}

body.modern-ux .RadRadioButtonList .RadRadioButton.rbDisabled .rbText.rbToggleRadioChecked::before,
body.modern-ux .RadCheckBoxList .RadCheckBox.rbDisabled .rbText.rbToggleCheckboxChecked::before {
    background-color: var(--muted-foreground) !important;
    border-color: var(--muted-foreground) !important;
}

body.modern-ux .RadCheckBoxList .RadCheckBox.rbDisabled .rbText.rbToggleCheckboxChecked::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}

body.modern-ux .RadRadioButtonList .RadRadioButton.rbDisabled .rbText.rbToggleRadioChecked::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle fill='black' cx='4' cy='4' r='2'/%3E%3C/svg%3E");
    background-size: contain;
}

body.modern-ux label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* Prevent text selection on checkbox/radio labels (avoid selection on repeated clicks) */
body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *)+label,
body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *)+label {
    -webkit-user-select: none;
    user-select: none;
}

/* Sibling label after checkbox/radio (e.g. checkbox list): align with control */
body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *)+label,
body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *)+label {
    vertical-align: middle;
}

body.modern-ux .CDISCDCheckboxControl{
    display: flex;
    align-items: center;
}
/* Survey multichoice layout (medrio.ux reference) */
body.modern-ux .survey-multichoice-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body.modern-ux .survey-multichoice-option {
    position: relative;
}

body.modern-ux .survey-multichoice-option input:not(.ui-dialog *, .cdk-overlay-container *) {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    outline: none;
    box-shadow: none;
    pointer-events: none;
}

body.modern-ux .survey-multichoice-option input:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux .survey-multichoice-option input:not(.ui-dialog *, .cdk-overlay-container *):focus-visible {
    outline: none;
    box-shadow: none;
}

body.modern-ux .survey-multichoice-option label,
body.modern-ux div.QuestionControlDiv .eproFormList.lstRadioBtn.Vertical tr td,
body.modern-ux div.QuestionControlDiv .eproFormList.lstChkBox.Vertical tr td {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: var(--mux-fs-rem-95);
    font-weight: var(--fw-medium);
    color: var(--foreground);
    background: var(--background);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

body.modern-ux div.QuestionControlDiv .eproFormList.lstRadioBtn.Vertical tr td,
body.modern-ux div.QuestionControlDiv .eproFormList.lstChkBox.Vertical tr td {
    border: none;
    box-shadow: none;
    transition: background 0.2s ease;
}

/* Survey multichoice label: no border (prototype – only checkbox has border when unchecked) */
body.modern-ux .survey-multichoice-option label {
    border: none;
    box-shadow: none;
}

body.modern-ux div.QuestionControlDiv .eproFormList.lstRadioBtn.Vertical tr td:has(input:not(.ui-dialog *, .cdk-overlay-container *):checked),
body.modern-ux div.QuestionControlDiv .eproFormList.lstChkBox.Vertical tr td:has(input:not(.ui-dialog *, .cdk-overlay-container *):checked) {
    border: none;
    box-shadow: none;
}

body.modern-ux div.QuestionControlDiv .eproFormList.lstRadioBtn.Vertical tr td,
body.modern-ux div.QuestionControlDiv .eproFormList.lstChkBox.Vertical tr td {
    gap: 0;
    padding: 0.5rem 0;
    margin: 5px 0;
    height: auto;
}

body.modern-ux div.QuestionControlDiv .eproFormList.lstRadioBtn.Vertical tr {
    margin-bottom: auto;
}

body.modern-ux div.QuestionControlDiv .eproFormList.lstRadioBtn.Vertical input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *) {
    margin-top: revert;
}

body.modern-ux.dark .survey-multichoice-option label {
    background: var(--background);
    color: var(--foreground);
}

body.modern-ux .survey-multichoice-option label:hover {
    background: var(--accent);
}

body.modern-ux.dark .survey-multichoice-option label:hover {
    background: var(--accent);
}

body.modern-ux .survey-multichoice-option .option-circle {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--mux-color-checkbox-border);
    background: var(--background);
}

/* Radio: round circle; checkbox: square */
body.modern-ux .survey-multichoice-option input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *)+label .option-circle {
    border-radius: 50%;
}

body.modern-ux .survey-multichoice-option input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *)+label .option-circle {
    border-radius: var(--radius);
}

/*body.modern-ux.dark .survey-multichoice-option .option-circle {
    background: #2B3337;
    border-color: #64748b;
}*/

body.modern-ux .survey-multichoice-option input:not(.ui-dialog *, .cdk-overlay-container *):checked+label {
    background: var(--accent);
}

body.modern-ux.dark .survey-multichoice-option input:not(.ui-dialog *, .cdk-overlay-container *):checked+label {
    background: var(--mux-primary-20);
}

body.modern-ux .survey-multichoice-option input:not(.ui-dialog *, .cdk-overlay-container *):checked+label .option-circle {
    background-color: var(--mux-color-accent);
    border-color: var(--mux-color-accent);
}

/* Checkbox checked: show checkmark in square; radio stays filled circle (same 14px size as standalone checkbox) */
body.modern-ux .survey-multichoice-option input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):checked+label .option-circle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

body.modern-ux .survey-multichoice-option input:not(.ui-dialog *, .cdk-overlay-container *):focus-visible+label {
    outline: none;
    box-shadow: 0 0 0 2px var(--mux-color-accent-glow);
}

body.modern-ux.medrio .survey-multichoice-option input:not(.ui-dialog *, .cdk-overlay-container *):checked+label {
    background: transparent;
}

body.modern-ux.medrio .survey-multichoice-option label:hover {
    background: transparent;
}

/*    body.modern-ux.medrio .survey-multichoice-option input:checked + label .option-circle {
        background: var(--mux-color-accent);
        border-color: var(--mux-color-accent);
    }*/

/* eCRF categorical lists: table.ListControl — vertical = one td per tr; horizontal = one tr, many tds.
   Do not force width:100% on every td or horizontal options stack like a column (RadioBtnListRenderer). */
body.modern-ux table.ListControl,
body.modern-ux table.ControlListControl {
    border-collapse: separate;
    border: none;
    background: transparent;
    box-sizing: border-box;
}

body.modern-ux table.ListControl:not(:has(tr > td:nth-child(2))),
body.modern-ux table.ControlListControl:not(:has(tr > td:nth-child(2))) {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border-spacing: 0 0.5rem;
}

body.modern-ux table.ListControl:has(tr > td:nth-child(2)),
body.modern-ux table.ControlListControl:has(tr > td:nth-child(2)) {
    width: auto;
    min-width: 0;
    max-width: 100%;
    table-layout: auto;
    border-spacing: 0.5rem 0;
}

body.modern-ux table.ListControl:not(:has(tr > td:nth-child(2))) td,
body.modern-ux table.ControlListControl:not(:has(tr > td:nth-child(2))) td {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    vertical-align: middle;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

/* One row, many cells (RadioListHoriz / CheckboxListHoriz): flex on <td> breaks table layout and stacks
   options vertically in the UI — keep real table cells; align control + label inside the cell. */
body.modern-ux table.ListControl:has(tr > td:nth-child(2)) td,
body.modern-ux table.ControlListControl:has(tr > td:nth-child(2)) td {
    display: table-cell;
    position: relative;
    width: auto;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    vertical-align: middle;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

body.modern-ux table.ListControl:has(tr > td:nth-child(2)) td input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux table.ListControl:has(tr > td:nth-child(2)) td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux table.ControlListControl:has(tr > td:nth-child(2)) td input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux table.ControlListControl:has(tr > td:nth-child(2)) td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *) {
    margin-right: 0.5rem;
    vertical-align: middle;
}

body.modern-ux.dark table.ListControl td,
body.modern-ux.dark table.ControlListControl td {
    border: none;
}

body.modern-ux.medrio table.ListControl td,
body.modern-ux.medrio table.ControlListControl td {
    border: none;
}

/* Input + gap so label text does not touch the control; label positioned after input+gap for visible space */
body.modern-ux table.ListControl td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux table.ListControl td input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux table.ControlListControl td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux table.ControlListControl td input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *) {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

body.modern-ux table.ListControl td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *)+label,
body.modern-ux table.ListControl td input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *)+label,
body.modern-ux table.ControlListControl td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *)+label,
body.modern-ux table.ControlListControl td input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *)+label {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: break-word;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-normal);
    color: var(--foreground);
    line-height: var(--lh-normal);
    -webkit-user-select: none;
    user-select: none;
}

/* RadioListHoriz / CheckboxListHoriz: <td> is table-cell, not flex — display:flex on label is block-level and drops text below the input */
body.modern-ux table.ListControl:has(tr > td:nth-child(2)) td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *)+label,
body.modern-ux table.ListControl:has(tr > td:nth-child(2)) td input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *)+label,
body.modern-ux table.ControlListControl:has(tr > td:nth-child(2)) td input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *)+label,
body.modern-ux table.ControlListControl:has(tr > td:nth-child(2)) td input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *)+label {
    display: inline-flex;
    vertical-align: middle;
}

body.modern-ux table.ListControl td:hover,
body.modern-ux table.ControlListControl td:hover {
    background: transparent;
}

body.modern-ux table.ListControl td:has(input:not(.ui-dialog *, .cdk-overlay-container *):checked),
body.modern-ux table.ControlListControl td:has(input:not(.ui-dialog *, .cdk-overlay-container *):checked) {
    background: transparent;
}

body.modern-ux.dark table.ListControl td:has(input:not(.ui-dialog *, .cdk-overlay-container *):checked),
body.modern-ux.dark table.ControlListControl td:has(input:not(.ui-dialog *, .cdk-overlay-container *):checked) {
    background: transparent;
}

body.modern-ux.medrio table.ListControl td:has(input:not(.ui-dialog *, .cdk-overlay-container *):checked),
body.modern-ux.medrio table.ControlListControl td:has(input:not(.ui-dialog *, .cdk-overlay-container *):checked) {
    background: transparent;
}

/* Checkbox/radio labels: no extra padding/min-height here — they broke vertical alignment for
   mat-slide-toggle and similar (label wraps visually-hidden input). Touch size comes from the control. */

/* Hover on these labels removed: it used negative margins which shifted layout on hover
   and caused flicker as the pointer left the element. */

/* -------------------------------------------------------------------------
   Buttons: native button/input + CSS-Only-UI-2026 .ds-btn / .ds-btn-primary + a.button / a.button.action
   Excluded: any button with a class containing "mat-" (Angular Material buttons).
   Excluded: Telerik RadGrid pager image submits (.rgPageFirst/Prev/Next/Last) — keep page-level / skin background-image.
   ------------------------------------------------------------------------- */
body.modern-ux button:not([class*="mat-"]),
body.modern-ux button.button-native:not([class*="mat-"]),
body.modern-ux input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast),
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(.browse-button):not(.ruButton),
body.modern-ux input[type="reset"]:not(.ui-dialog *, .cdk-overlay-container *),
body.modern-ux a.button,
body.modern-ux a.button.action,
body.modern-ux a.action.button {
    position: relative;
    overflow: hidden;
    font-family: var(--mux-font-family);
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-medium);
    line-height: var(--mux-line-height);
    color: var(--mux-primary-contrast) !important;
    background: linear-gradient(180deg, var(--mux-color-accent) 0%, var(--mux-color-accent-hover) 100%);
    border: 1px solid var(--mux-color-accent-hover);
    border-radius: var(--radius);
    padding: var(--mux-padding-y) 0.75rem;
    min-height: var(--mux-height);
    cursor: pointer;
    transition: var(--mux-transition);
    box-sizing: border-box;
    box-shadow: var(--mux-shadow);
}

/* RadGrid pager — “Go” / “Change” use input[type=submit].rgPagerButton; only arrow buttons were excluded
   from global DS primary styling (.rgPageFirst/Prev/Next/Last). Without this, min-height/padding/transform
   overlap Telerik RadInput boxes in .rgAdvPart (e.g. SubjectDataReport.aspx rgReport).
   With .ds-btn.ds-btn-text (added in rgReport_PreRender), colors/hover follow DS text button; rules below set layout only. */
body.modern-ux .rgPager input[type="submit"].rgPagerButton,
body.modern-ux .rgPager input[type="submit"].rgPagerButton.ds-btn.ds-btn-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    height: auto !important;
    min-width: auto !important;
    padding: 0.2rem var(--space-2) !important;
    font-size: var(--ds-btn-font-size, var(--mux-fs-rem-875)) !important;
    line-height: 1.25 !important;
    border-radius: var(--radius-md) !important;
    background-image: none !important;
    overflow: visible !important;
    transform: none !important;
    vertical-align: middle !important;
}

/* Fallback when markup has not yet added .ds-btn (non–SubjectDataReport / older cache) */
body.modern-ux .rgPager input[type="submit"].rgPagerButton:not(.ds-btn) {
    color: var(--foreground) !important;
    background: var(--muted) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    font-weight: var(--fw-medium) !important;
}

body.modern-ux .rgPager input[type="submit"].rgPagerButton:not(.ds-btn):hover {
    background: var(--mux-color-bg-hover) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux .rgPager input[type="submit"].rgPagerButton:not(.ds-btn):active {
    background: var(--mux-brand-accessible-08) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux .rgPager input[type="submit"].rgPagerButton:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .rgPager .rgAdvPart {
    display: inline-flex !important;
    float: left !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.35rem 0.5rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

body.modern-ux .rgPager .rgAdvPart .RadInput,
body.modern-ux .rgPager .rgAdvPart .riSingle {
    vertical-align: middle !important;
}

/* RadGrid pager — page index links: most are classless <a href>, so they alone matched the global
   classless-link rule (inline-flex + 36px min-height). .rgCurrentPage did not — uneven sizing vs
   “of N”, Go/Change. Restore one consistent inline link row inside .rgNumPart. */
body.modern-ux .rgPager .rgNumPart a {
    display: inline !important;
    min-height: 0 !important;
    padding: 0 0.2rem !important;
    font-size: inherit !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-normal) !important;
    border-radius: 0 !important;
    vertical-align: baseline !important;
    align-items: unset !important;
    justify-content: unset !important;
    box-sizing: border-box !important;
    color: var(--brand-accessible) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: underline !important;
    text-decoration-color: var(--mux-color-link) !important;
    text-underline-offset: var(--mux-link-underline-offset);
    cursor: pointer !important;
}

body.modern-ux .rgPager .rgNumPart a span {
    vertical-align: inherit !important;
    line-height: inherit !important;
    font-size: inherit !important;
}

body.modern-ux .rgPager .rgNumPart a:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mux-color-link-hover) !important;
    text-decoration: underline !important;
}

body.modern-ux .rgPager .rgNumPart a:active {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mux-color-link-active) !important;
}

body.modern-ux .rgPager .rgNumPart a.rgCurrentPage {
    font-weight: var(--fw-semibold) !important;
    color: var(--foreground) !important;
    text-decoration: none !important;
    cursor: default !important;
}

body.modern-ux .rgPager .rgNumPart a.rgCurrentPage:hover,
body.modern-ux .rgPager .rgNumPart a.rgCurrentPage:active {
    background: transparent !important;
    color: var(--foreground) !important;
}

/* Single flex row for floated .rgWrap segments — matches legacy linear pager without float overlap. */
body.modern-ux .rgPager td.rgPagerCell {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    gap: 0.5rem 0.75rem !important;
    vertical-align: middle !important;
}

body.modern-ux .rgPager td.rgPagerCell > .rgWrap {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.15rem 0.25rem !important;
}

/* -------------------------------------------------------------------------
   Toast panels (ApplicationPage8 — LoginActivityPanel, StudyDeploymentPanel)
   Close control is input.icon.toast-button-icon; global button rules replaced sprite + overflow:hidden clipped it.
   :not(.toast-button-icon) and :not(.rgPageFirst/Prev/Next/Last) on native submit/button exclude toast close + RadGrid pager from primary chrome.
   Sprite: SVG viewBox 142×216 — legacy CSS -128px/-32px targeted a raster grid; #close-box is at translate(131,3).
   ------------------------------------------------------------------------- */
body.modern-ux .toast-panel {
    height: auto;
    min-height: 0;
    max-width: min(100vw - 1rem, 42rem);
    overflow: visible;
    border-radius: var(--mux-radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    box-shadow: var(--mux-shadow);
    box-sizing: border-box;
}

body.modern-ux .toast-panel table {
    width: 100%;
    border-collapse: collapse;
    /* fixed + explicit outer column widths — otherwise col2/col3 split remainder 50/50 (huge close gutter) */
    table-layout: fixed;
}

body.modern-ux .toast-panel td {
    vertical-align: middle;
}

/* Left: narrow strip + info glyph (matches legacy layout) */
body.modern-ux .toast-panel .toast-icon {
    width: 1.5rem;
    max-width: 2rem;
    padding: 0.5rem 0.25rem;
    background-color: var(--gray-100);
    text-align: center;
}

body.modern-ux .toast-panel .toast-icon .icon.info-context {
    display: inline-block;
    vertical-align: middle;
    background-image: url(../img/sprite-16-by-16-button-tab-icons.svg) !important;
    background-repeat: no-repeat !important;
    background-size: 142px 216px !important;
    /* SVG <g id="info" transform="translate(66, 17)"> — aligns with legacy -64px -16px */
    background-position: -64px -16px !important;
}

/* Center: message on white/paper — takes all space between fixed icon/close columns */
body.modern-ux .toast-panel .toast-message {
    width: auto;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    background-color: var(--card);
    font-size: var(--mux-font-size);
    line-height: var(--mux-line-height);
    color: var(--foreground);
}

body.modern-ux .toast-panel .toast-message .ref-link {
    color: var(--mux-color-link);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.modern-ux .toast-panel .toast-message .ref-link:hover {
    color: var(--mux-color-link-hover);
}

/*
 * a.ref-link — Text/Ghost (Tertiary) button: .ds-btn + .ds-btn-text.
 * Applied globally in modern-ux; toast panel rule above takes precedence via specificity.
 * Spec: https://onion-steam-49836257.figma.site/_components/v2/04a03c3e7dfb4eacdc1c1a22617e0606b4535c72.css
 */
body.modern-ux a.ref-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    min-height: 36px;
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--brand-accessible);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}

body.modern-ux a.ref-link:hover {
    color: var(--brand-accessible);
    background-color: #0d5fa814;
}

body.modern-ux a.ref-link:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

/* Right: compact column — same fixed width as icon strip (not half the bar) */
body.modern-ux .toast-panel .toast-button {
    width: 1.75rem;
    max-width: 2.75rem;
    padding: 0.3rem 0.2rem;
    text-align: center;
    vertical-align: middle;
    border-radius: var(--mux-radius);
    box-sizing: border-box;
}

/* Icon-only close: 16×16 viewport into 142×216 SVG; #close-box at translate(131, 3) — not legacy -128/-32 */
body.modern-ux .toast-panel input.toast-button-icon.icon.close,
body.modern-ux .toast-panel input[type="submit"].toast-button-icon,
body.modern-ux .toast-panel input[type="button"].toast-button-icon {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px !important;
    transform: scale(1.2);
    transform-origin: center center;
    line-height: 0;
    font-size: var(--mux-fs-0);
    color: transparent;
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box;
    overflow: visible !important;
    border: none !important;
    border-radius: var(--mux-radius);
    box-shadow: none !important;
    cursor: pointer;
    background-color: transparent !important;
    background-image: url(../img/sprite-16-by-16-button-tab-icons.svg) !important;
    background-repeat: no-repeat !important;
    background-size: 142px 216px !important;
    background-position: -128px -2px !important;
    transition: opacity 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

body.modern-ux .toast-panel input.toast-button-icon:hover,
body.modern-ux .toast-panel input.toast-button-icon:focus-visible {
    opacity: 0.95;
    outline: none;
    box-shadow: var(--mux-focus-ring);
    filter: brightness(0.95);
}

body.modern-ux .toast-panel input.toast-button-icon:active {
    opacity: 0.85;
    filter: brightness(0.9);
}

/* mc-display-status (Angular/Material) — style as DS info alert */
body.modern-ux mc-display-status .toast-panel.mat-card {
    background: #eff6ff;
    color: var(--color-info-dark);
    border: 1px solid color-mix(in srgb, var(--color-info) 28%, transparent);
    border-left: 4px solid var(--color-info);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

body.modern-ux mc-display-status .toast-panel.mat-card .mat-card-content {
    margin: 0;
    padding: 0.25rem 0.5rem;
    align-items: center;
    gap: 0.375rem;
}

body.modern-ux mc-display-status .toast-panel .text-inside-grid {
    margin: 0;
    color: var(--color-info-dark);
    line-height: var(--lh-snug);
}

body.modern-ux mc-display-status .toast-panel .p-10 {
    padding: 0 !important;
    max-width: 1.5rem !important;
    min-width: 1.5rem !important;
    flex: 0 0 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.modern-ux mc-display-status .toast-panel .p-5 {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 24px;
}

body.modern-ux mc-display-status .toast-panel .tac {
    padding: 0 !important;
    max-width: 2rem !important;
    min-width: 2rem !important;
    flex: 0 0 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.modern-ux mc-display-status .toast-panel .text-inside-grid a.mat-button {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    min-height: 0;
    padding: 0;
    margin-left: 0.25rem;
    line-height: inherit;
    color: var(--brand-accessible);
    text-decoration: underline;
    text-underline-offset: 2px;
    background: transparent;
    border: none;
    box-shadow: none;
}

body.modern-ux mc-display-status .toast-panel .text-inside-grid a.mat-button:hover {
    color: var(--mux-color-link-hover);
}

body.modern-ux mc-display-status .toast-panel mat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: var(--color-info-dark);
    width: 1.125rem;
    height: 1.125rem;
    font-size: var(--mux-fs-rem-1125);
    line-height: 1.125rem;
}

body.modern-ux mc-display-status .toast-panel button.mat-icon-button.mat-button-base {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--color-info-dark);
}

body.modern-ux mc-display-status .toast-panel button.mat-icon-button.mat-button-base .mat-button-wrapper {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: var(--lh-none);
}

body.modern-ux mc-display-status .toast-panel button.mat-icon-button.mat-button-base .mat-button-ripple,
body.modern-ux mc-display-status .toast-panel button.mat-icon-button.mat-button-base .mat-button-focus-overlay {
    inset: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

body.modern-ux mc-display-status .toast-panel button.mat-icon-button.mat-button-base:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-info) 12%, transparent);
}

body.modern-ux.dark mc-display-status .toast-panel.mat-card,
body.modern-ux.medrio.dark mc-display-status .toast-panel.mat-card {
    background: rgba(30, 64, 175, 0.22);
    color: var(--mux-color-text);
    border-color: color-mix(in srgb, var(--mux-info-light) 35%, transparent);
    border-left-color: var(--mux-info-light);
}

body.modern-ux.dark mc-display-status .toast-panel .text-inside-grid,
body.modern-ux.medrio.dark mc-display-status .toast-panel .text-inside-grid,
body.modern-ux.dark mc-display-status .toast-panel mat-icon,
body.modern-ux.medrio.dark mc-display-status .toast-panel mat-icon {
    color: var(--mux-color-text);
}

/* Legacy markup: secondary / cancel — ghost same as .ds-btn-text (brand-accessible + #0d5fa814 hover) */
body.modern-ux a.button.secondary,
body.modern-ux a.button.action.secondary,
body.modern-ux a.action.button.secondary {
    color: var(--brand-accessible) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: var(--fw-semibold);
}

body.modern-ux a.button.secondary:hover,
body.modern-ux a.button.action.secondary:hover,
body.modern-ux a.action.button.secondary:hover {
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

/* ConfigureSkipRule Cancel; edit_approval Update; skipRules Create; edit_queries(_custom) toggles; MedrioActionButton alinkReport; CreateFormRule “Show List…” (DefineRuleControl); BulkUploadConfig “Add new mappings”; BulkUploadPart2 Cancel (b-Width+secondary); wizard/RadWindow footers (.tar.mt-10) — .panel-command a / .ds-btn-text parity */
body.modern-ux .tar.mt-10 a.action.button.secondary,
body.modern-ux a.action.button.secondary[href*="$lnkCancel"],
body.modern-ux a.action.button.secondary[href*="$lnkUpdate"],
body.modern-ux a.action.button.secondary[id$="btnClose"],
body.modern-ux a[href*="$lnkCreateSkipRule"],
body.modern-ux a[href*="$btnToggleDisable"],
body.modern-ux a[href*="$alinkReport$_actionLink"],
body.modern-ux .m-action-button a[href*="$alinkReport$_actionLink"],
body.modern-ux a[id$="btnShowFormRuleList"],
body.modern-ux a#lnkAddMapping,
body.modern-ux a.button.action.secondary.b-Width[href*="$btnCancel"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
    height: 36px;
    min-height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--mux-fs-14);
    line-height: var(--lh-none);
    box-sizing: border-box;
    position: relative;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    text-underline-offset: unset;
    text-decoration-thickness: unset;
}

body.modern-ux .tar.mt-10 a.action.button.secondary:hover,
body.modern-ux a.action.button.secondary[href*="$lnkCancel"]:hover,
body.modern-ux a.action.button.secondary[href*="$lnkUpdate"]:hover,
body.modern-ux a.action.button.secondary[id$="btnClose"]:hover,
body.modern-ux a[href*="$lnkCreateSkipRule"]:hover,
body.modern-ux a[href*="$btnToggleDisable"]:hover,
body.modern-ux a[href*="$alinkReport$_actionLink"]:hover,
body.modern-ux .m-action-button a[href*="$alinkReport$_actionLink"]:hover,
body.modern-ux a[id$="btnShowFormRuleList"]:hover,
body.modern-ux a#lnkAddMapping:hover,
body.modern-ux a.button.action.secondary.b-Width[href*="$btnCancel"]:hover {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
}

body.modern-ux .tar.mt-10 a.action.button.secondary:active,
body.modern-ux a.action.button.secondary[href*="$lnkCancel"]:active,
body.modern-ux a.action.button.secondary[href*="$lnkUpdate"]:active,
body.modern-ux a.action.button.secondary[id$="btnClose"]:active,
body.modern-ux a[href*="$lnkCreateSkipRule"]:active,
body.modern-ux a[href*="$btnToggleDisable"]:active,
body.modern-ux a[href*="$alinkReport$_actionLink"]:active,
body.modern-ux .m-action-button a[href*="$alinkReport$_actionLink"]:active,
body.modern-ux a[id$="btnShowFormRuleList"]:active,
body.modern-ux a#lnkAddMapping:active,
body.modern-ux a.button.action.secondary.b-Width[href*="$btnCancel"]:active {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .tar.mt-10 a.action.button.secondary:focus-visible,
body.modern-ux a.action.button.secondary[href*="$lnkCancel"]:focus-visible,
body.modern-ux a.action.button.secondary[href*="$lnkUpdate"]:focus-visible,
body.modern-ux a.action.button.secondary[id$="btnClose"]:focus-visible,
body.modern-ux a[href*="$lnkCreateSkipRule"]:focus-visible,
body.modern-ux a[href*="$btnToggleDisable"]:focus-visible,
body.modern-ux a[href*="$alinkReport$_actionLink"]:focus-visible,
body.modern-ux .m-action-button a[href*="$alinkReport$_actionLink"]:focus-visible,
body.modern-ux a[id$="btnShowFormRuleList"]:focus-visible,
body.modern-ux a#lnkAddMapping:focus-visible,
body.modern-ux a.button.action.secondary.b-Width[href*="$btnCancel"]:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .tar.mt-10 a.action.button.secondary *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a.action.button.secondary[href*="$lnkCancel"] *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a.action.button.secondary[href*="$lnkUpdate"] *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a.action.button.secondary[id$="btnClose"] *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a[href*="$lnkCreateSkipRule"] *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a[href*="$btnToggleDisable"] *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a[href*="$alinkReport$_actionLink"] *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux .m-action-button a[href*="$alinkReport$_actionLink"] *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a[id$="btnShowFormRuleList"] *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a#lnkAddMapping *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a.button.action.secondary.b-Width[href*="$btnCancel"] *:not(.material-icons):not([class*="material-icons"]) {
    font-size: inherit;
}

/* -------------------------------------------------------------------------
   BulkUploadConfig.aspx — mappings list filter (common.css .filter-list-* legacy)
   Card + search use DS field / surface tokens; row accent uses brand (not #0094cb / #FF9900)
   ------------------------------------------------------------------------- */
body.modern-ux .buildStudyContent .list-filter-container {
    margin: 0 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .buildStudyContent .filter-list-wrapper .filter-list-card {
    background-color: var(--bg-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--mux-shadow-sm);
}

body.modern-ux.medrio.dark .buildStudyContent .filter-list-wrapper .filter-list-card,
body.modern-ux.dark .buildStudyContent .filter-list-wrapper .filter-list-card {
    background-color: var(--card);
    border-color: var(--mux-color-divider);
}

body.modern-ux .buildStudyContent .filter-list-wrapper input.filter-search {
    display: block;
    width: 100%;
    max-width: 28rem;
    margin-bottom: var(--space-3);
    padding: var(--mux-field-control-padding);
    min-width: 0 !important;
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    color: var(--foreground);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

body.modern-ux .buildStudyContent .filter-list-wrapper input.filter-search:hover:not(:disabled):not(:read-only) {
    border-color: var(--text-primary);
}

body.modern-ux .buildStudyContent .filter-list-wrapper input.filter-search:focus,
body.modern-ux .buildStudyContent .filter-list-wrapper input.filter-search:focus-visible {
    outline: none;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux.medrio.dark .buildStudyContent .filter-list-wrapper input.filter-search,
body.modern-ux.dark .buildStudyContent .filter-list-wrapper input.filter-search {
    background-color: var(--mux-color-bg);
    color: var(--mux-color-text);
    border-color: var(--mux-color-divider);
}

body.modern-ux .buildStudyContent .filter-list-wrapper .filter-msg,
body.modern-ux .buildStudyContent .filter-list-wrapper span[id*="lblNoResultsMessage"] {
    display: block;
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    color: var(--text-secondary);
    margin: var(--space-2) 0;
}

body.modern-ux .buildStudyContent .filter-list-wrapper .filter-list .filter-list-item {
    height: auto;
    min-height: 2.375rem;
    margin-bottom: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    border-left: 4px solid var(--brand);
    background-color: var(--background);
    box-shadow: var(--mux-shadow-sm);
    transition:
        background-color var(--transition),
        border-color var(--transition),
        padding-left var(--transition);
}

body.modern-ux .buildStudyContent .filter-list-wrapper .filter-list .filter-list-item:hover {
    color: var(--foreground);
    background-color: var(--accent);
    padding-left: var(--space-5);
    border-left-color: var(--brand-dark);
}

body.modern-ux.medrio.dark .buildStudyContent .filter-list-wrapper .filter-list .filter-list-item,
body.modern-ux.dark .buildStudyContent .filter-list-wrapper .filter-list .filter-list-item {
    background-color: var(--card);
    border-bottom-color: var(--mux-color-divider);
    color: var(--mux-color-text);
}

body.modern-ux.medrio.dark .buildStudyContent .filter-list-wrapper .filter-list .filter-list-item:hover,
body.modern-ux.dark .buildStudyContent .filter-list-wrapper .filter-list .filter-list-item:hover {
    background-color: color-mix(in srgb, var(--foreground) 8%, transparent);
    border-left-color: var(--brand-light);
}

body.modern-ux .buildStudyContent .filter-list-wrapper .filter-list .filter-list-item .filter-list-item-name {
    border-left-color: var(--border-color);
}

body.modern-ux .buildStudyContent .filter-list-wrapper .filter-list .filter-list-item input.list-button {
    border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------
   BulkUploadPart2.aspx — hook: .bulk-upload-part2-page on div.auto-height (markup); styles scoped below
   ------------------------------------------------------------------------- */
body.modern-ux .bulk-upload-part2-page .bulk-upload-container {
    padding: var(--space-4);
    box-sizing: border-box;
}

/*
 * Scroll: common.js sets fixed heights on .page-contents / .pod / .body when .auto-height exists.
 * Page hook .bulk-upload-part2-page — single document scroll (no nested pane scroll).
 */
body.modern-ux .page-body .page-contents:has(.bulk-upload-part2-page) {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
}

body.modern-ux .bulk-upload-part2-page > .pod.gc12 {
    height: auto !important;
    min-height: 0;
}

body.modern-ux .bulk-upload-part2-page > .pod.gc12 > .body {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .spanColor {
    display: block;
    margin: 0 0 var(--space-3);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-1125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--foreground);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .floatRight.tar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .floatRight.tar label.error.block {
    flex: 1 0 100%;
    margin: 0;
    text-align: right;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container fieldset.field-set {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: none;
    padding: var(--space-4) var(--space-4) var(--space-3);
    box-sizing: border-box;
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container fieldset.field-set,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container fieldset.field-set {
    background-color: var(--card);
    border-color: var(--mux-color-divider);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container fieldset.field-set legend {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-semibold);
    color: var(--foreground);
    padding: 0 var(--space-2);
}

/* BulkUpload.css pins Sources to 128px; extra fieldset padding clips Form/Grid/File — allow growth */
body.modern-ux .bulk-upload-part2-page .bulk-upload-container fieldset.field-set.fs-height {
    height: auto;
    min-height: 8rem;
}

/* Float grid (gc6/gc1/gc5): contain clears without markup changes */
body.modern-ux .bulk-upload-part2-page .bulk-upload-container fieldset.field-set > .paddingTop15 {
    display: flow-root;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    color: var(--foreground);
    vertical-align: top;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fFields,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout textarea.ff-layout2,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fil-up-file {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    color: var(--foreground);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--radius-md);
    padding: var(--mux-field-control-padding);
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fFields:hover:not(:disabled):not(:read-only),
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout textarea.ff-layout2:hover:not(:disabled):not(:read-only),
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fil-up-file:hover:not(:disabled):not(:read-only) {
    border-color: var(--text-primary);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fFields:focus,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fFields:focus-visible,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout textarea.ff-layout2:focus,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout textarea.ff-layout2:focus-visible,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fil-up-file:focus,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fil-up-file:focus-visible {
    outline: none;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fFields,
body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout textarea.ff-layout2,
body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fil-up-file,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fFields,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout textarea.ff-layout2,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout input.fil-up-file {
    background-color: var(--mux-color-bg);
    color: var(--mux-color-text);
    border-color: var(--mux-color-divider);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout select.ddlLikeSearchable,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout select.ddlSearchable {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    color: var(--foreground);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    box-sizing: border-box;
    min-height: 2.25rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout select.ddlLikeSearchable:hover:not(:disabled),
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout select.ddlSearchable:hover:not(:disabled) {
    border-color: var(--text-primary);
}

/* Grid Name: Chromium paints box-shadow focus only on part of native <select>; outline wraps the full control. */
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout select.ddlLikeSearchable:focus,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout select.ddlLikeSearchable:focus-visible {
    outline: 2px solid var(--mux-color-border-focus);
    outline-offset: 2px;
    border-color: var(--mux-color-border-focus);
    box-shadow: none;
}

/* Form Name (SearchableDropDownList.js): ring on wrapper — inner select + overlay share one box; select:focus box-shadow can miss the chevron zone. */
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"]:has(> select.ddlSearchable) {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    border-radius: var(--radius-md);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"]:has(> select.ddlSearchable):focus-within {
    box-shadow: var(--mux-focus-ring);
    outline: none;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"]:has(> select.ddlSearchable) select.ddlSearchable:focus,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"]:has(> select.ddlSearchable) select.ddlSearchable:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--mux-color-border-focus);
}

/* SearchableDropDownList.js: filter <input type="text"> sits on top of the select; global input[type=text] border + wrapper :focus-within ring = double box. */
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"]:has(> select.ddlSearchable) > input[type="text"] {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
    background: transparent !important;
    max-width: none !important;
    min-width: 0 !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"]:has(> select.ddlSearchable) > input[type="text"]:focus,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"]:has(> select.ddlSearchable) > input[type="text"]:focus-visible,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"]:has(> select.ddlSearchable) > input[type="text"]:hover {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout select.ddlLikeSearchable,
body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout select.ddlSearchable,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout select.ddlLikeSearchable,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout select.ddlSearchable {
    background-color: var(--mux-color-bg);
    color: var(--mux-color-text);
    border-color: var(--mux-color-divider);
}

/* SearchableDropDownList.js: sibling list <select size="…"> uses inline border 1px solid #333 */
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"] > select[size] {
    border: 1px solid var(--mux-secondary-dark) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--mux-shadow-sm);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-field-control-font-size) !important;
    color: var(--foreground) !important;
    background-color: var(--input-background) !important;
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"] > select[size],
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.paddingLeft5 div[style*="position: relative"] > select[size] {
    border-color: var(--mux-color-divider) !important;
    background-color: var(--mux-color-bg) !important;
    color: var(--mux-color-text) !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.padding-left-5px:has(#filUpFile) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* File path input stretches to fill the flex row */
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #formFields.layout td.padding-left-5px:has(#filUpFile) input.fil-up-file {
    flex: 1 1 12rem;
    min-width: 0;
}

/* DS icon-button style for input[type="button"]#browse-file (CSS-only, no ASPX change).
   Excluded from global primary input[type=button] via :not(.browse-button).
   <input> has no ::before/::after, so we hide "..." text and paint the
   more_horiz Material icon via an inline-SVG background-image.
   Optional .ds-btn-icon on markup: neutralize filled-button expectations. */
body.modern-ux .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button.ds-btn-icon {
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: stretch;   /* match sibling input height in the flex row */
    width: 44px;
    min-width: 44px;
    min-height: var(--mux-field-control-min-height) !important;
    height: auto;
    margin: 0;
    padding: 0 !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    background-color: transparent !important;
    cursor: pointer;
    vertical-align: middle;
    transform: none !important;
    box-shadow: none !important;
    /* Clip value text; avoid overflow:visible or hover background shorthand leaks "..." as extra dots */
    overflow: hidden !important;
    /* Hide the "..." value text */
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    font-weight: var(--fw-normal) !important;
    /* more_horiz icon — brand blue fill */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e7fcc'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    transition: background-color var(--transition);
    appearance: none !important;
    -webkit-appearance: none !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button:hover,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button.ds-btn-icon:hover {
    /* Do not use background: shorthand — it resets size/position/repeat and breaks the SVG + shows stray dots */
    background-color: #0000000f !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e7fcc'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button:focus-visible,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button.ds-btn-icon:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button:disabled,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button.ds-btn-icon:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Dark mode: swap icon fill to brand-light (~#7fc4f7) */
body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button,
body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button.ds-btn-icon,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button.ds-btn-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237fc4f7'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") !important;
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button:hover,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button:hover,
body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button.ds-btn-icon:hover,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container input[type="button"].browse-button.ds-btn-icon:hover {
    background-color: color-mix(in srgb, var(--foreground) 10%, transparent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237fc4f7'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .bulk-upload-fields .table-header .table-cell {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-8125);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-1);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .bulk-upload-fields .table-header .table-cell strong {
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .bulk-upload-fields .table-body {
    /* BulkUpload.css uses max-height:350px + overflow:auto — drop inner scrollbars; page scrolls */
    max-height: none !important;
    overflow: visible !important;
    min-height: 10rem;
    background-color: var(--bg-paper);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--mux-shadow-sm);
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container .bulk-upload-fields .table-body,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container .bulk-upload-fields .table-body {
    background-color: var(--card);
    border-color: var(--mux-color-divider);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .dragable-row .table-cell {
    border-color: var(--border-color) !important;
    background-color: var(--background) !important;
    background-image: url(../../images/drag-handle.png);
    background-repeat: no-repeat;
    background-position: 5px center;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .dragable-row .table-cell:hover {
    background-color: var(--accent) !important;
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container .dragable-row .table-cell,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container .dragable-row .table-cell {
    background-color: var(--mux-color-bg) !important;
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container .dragable-row .table-cell:hover,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container .dragable-row .table-cell:hover {
    background-color: color-mix(in srgb, var(--foreground) 8%, transparent) !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .mapped-cell {
    border-color: var(--border-color) !important;
    background-color: var(--bg-paper) !important;
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container .mapped-cell,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container .mapped-cell {
    background-color: var(--card) !important;
    border-color: var(--mux-color-divider) !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .dragdropzone {
    border-left-color: var(--border-color);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .dragoverzone {
    border-color: var(--brand-accessible) !important;
    border-right-color: var(--brand-accessible) !important;
    background-color: color-mix(in srgb, var(--brand) 12%, transparent);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .table-cell.provide-at-upload-field,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container .mapped-cell.provide-at-upload-field {
    background-color: color-mix(in srgb, var(--warning, #f59e0b) 18%, var(--bg-paper)) !important;
    color: var(--foreground);
    font-style: italic;
    font-weight: var(--fw-semibold);
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container .table-cell.provide-at-upload-field,
body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container .mapped-cell.provide-at-upload-field,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container .table-cell.provide-at-upload-field,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container .mapped-cell.provide-at-upload-field {
    background-color: color-mix(in srgb, var(--warning, #f59e0b) 22%, var(--card)) !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .form-field-ctrls {
    background-color: var(--accent);
    border-left-color: var(--border-color);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .form-field-edit,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container .form-field-key,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container .form-field-delete {
    border-left-color: var(--border-color);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .table-row.selected-form-row,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container .dragable-row .selected-file-column {
    background-color: color-mix(in srgb, var(--brand) 14%, var(--bg-paper)) !important;
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container .table-row.selected-form-row,
body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container .dragable-row .selected-file-column,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container .table-row.selected-form-row,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container .dragable-row .selected-file-column {
    background-color: color-mix(in srgb, var(--brand) 18%, var(--card)) !important;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container a.disableLink,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container a.disableLink:visited {
    color: var(--text-secondary);
    cursor: not-allowed;
    text-decoration: none;
    font-size: var(--mux-fs-rem-875);
}

/* Server toggles class to link-underline when a mapping exists (BulkUploadPart2.aspx.cs) */
body.modern-ux .bulk-upload-part2-page .bulk-upload-container a.link-underline {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-semibold);
    color: var(--brand-accessible);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container a.link-underline:hover {
    color: var(--brand-dark);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container .bulk-upload-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    /* BulkUpload.css used 150px to drop the control below the list headers */
    margin-top: clamp(4.5rem, 12vh, 9.375rem);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #add-mapping-btn.action.button {
    min-width: 3rem;
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-md);
}

body.modern-ux .bulk-upload-part2-page .bulk-upload-container #edit-mapping select.datetime-format-select-js,
body.modern-ux .bulk-upload-part2-page .bulk-upload-container #edit-mapping input.mapping-format[type="text"] {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-field-control-font-size);
    color: var(--foreground);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    min-height: 2.25rem;
    box-sizing: border-box;
}

body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container #edit-mapping select.datetime-format-select-js,
body.modern-ux.medrio.dark .bulk-upload-part2-page .bulk-upload-container #edit-mapping input.mapping-format[type="text"],
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container #edit-mapping select.datetime-format-select-js,
body.modern-ux.dark .bulk-upload-part2-page .bulk-upload-container #edit-mapping input.mapping-format[type="text"] {
    background-color: var(--mux-color-bg);
    color: var(--mux-color-text);
    border-color: var(--mux-color-divider);
}

/* Wizard / RadWindow footers: align row + give primary Save same 36px chrome as ghost secondaries (SubjectStatuses, FieldStatuses, LookUpValues, HeaderColor, etc.) */
/* SelectFile.aspx — suppress horizontal scrollbar and prevent RadWindow repositioning.
   BulkUpload.css sets .parent-div { width:560px; overflow:auto } which overflows the 576px
   iframe. overflow-x:hidden removes the horizontal scrollbar.
   min-height:100% ensures the iframe page never shrinks when CSV/Excel radio toggles
   content visibility — without it Telerik detects the scroll-height change and re-centers
   the dialog on every file-type switch. */
body.modern-ux #innerDiv.parent-div {
    overflow-x: hidden;
    min-height: 100%;
}

/* -------------------------------------------------------------------------
   GenerateAnnotatedForms.aspx — "rwAnnotation" RadWindow iframe content
   (edit_forms_list.aspx → Generate annotated forms dialog)
   Scoped to body.modern-ux .annotated-forms-iframe-page
   ------------------------------------------------------------------------- */

body.modern-ux .annotated-forms-iframe-page {
    padding: var(--space-5);
    box-sizing: border-box;
}

body.modern-ux h1.annotated-forms-iframe-title {
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-125);
    font-weight: var(--fw-semibold);
    color: var(--foreground);
    margin: 0 0 var(--space-4) 0;
}

/* Forms / Visits checklist scrollable containers */
body.modern-ux .annotated-forms-iframe-page .chkLstContainer {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    background-color: var(--input-background);
    padding: var(--space-2);
}

body.modern-ux.medrio.dark .annotated-forms-iframe-page .chkLstContainer,
body.modern-ux.dark .annotated-forms-iframe-page .chkLstContainer {
    background-color: var(--mux-color-bg);
    border-color: var(--mux-color-divider) !important;
}

/* Checkbox labels inside the lists */
body.modern-ux .annotated-forms-iframe-page .chkLstContainer label {
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-875);
    color: var(--foreground);
}

/* Option checkboxes below the lists */
body.modern-ux .annotated-forms-iframe-page td[colspan="2"] label {
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-875);
    color: var(--foreground);
    vertical-align: middle;
}

/* SelectFile.aspx — radio + label alignment in Header Row / Data Row fieldsets.
   Row 1: radio + label + text-input share one inline line → vertical-align: middle.
   Row 2 (long label that wraps): float the radio left + BFC on the label so
   wrapped text indents past the radio icon instead of sliding under it. */

/* Row 1 — inline alignment */
body.modern-ux #ctl00__mainContent_rdoHeaderRow {
    vertical-align: middle;
}
body.modern-ux label[for="ctl00__mainContent_rdoHeaderRow"] {
    vertical-align: middle;
}

/* Row 2 — float + BFC pattern for wrapping label */
body.modern-ux #headerRows .padding-top-10 {
    display: flow-root; /* contain the float without clipping */
}
body.modern-ux #ctl00__mainContent_rdoShowColumnNumbers {
    float: left;
    margin-right: 6px;
    margin-top: 2px;
}
body.modern-ux label[for="ctl00__mainContent_rdoShowColumnNumbers"] {
    display: block;
    overflow: hidden; /* BFC: text wraps within label, never under the radio */
}

body.modern-ux .tar.mt-10 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Wizard footers — primary Save: .ds-btn + .ds-btn-primary (spec: flat brand fill, #000 label, 2px transparent border, 600/14/36px) */
body.modern-ux.medrio .tar.mt-10 a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
    height: 36px;
    min-height: 36px;
    padding: 0 var(--space-4);
    border: 2px solid #0000;
    font-size: var(--mux-fs-14);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-none);
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    background-color: var(--brand);
    color: #000;
    box-shadow: none;
}

body.modern-ux.medrio .tar.mt-10 a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover {
    background-color: var(--brand-dark);
    color: #000;
    border-color: #0000;
}

body.modern-ux.medrio .tar.mt-10 a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active {
    background-color: var(--brand-darker);
    color: #000;
    border-color: #0000;
    box-shadow: none;
}

body.modern-ux.medrio .tar.mt-10 a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux.medrio.dark .tar.mt-10 a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    border: 2px solid #0000;
    background-color: var(--brand);
    color: var(--mux-primary-contrast);
    box-shadow: none;
}

body.modern-ux.medrio.dark .tar.mt-10 a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover {
    background-color: var(--brand-dark);
    color: var(--mux-primary-contrast);
    border-color: #0000;
}

body.modern-ux.medrio.dark .tar.mt-10 a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active {
    background-color: var(--brand-darker);
    color: var(--mux-primary-contrast);
    border-color: #0000;
    box-shadow: none;
}

/* SubjectStatuses matrix: vertical rhythm + undo Priority th inline width:100% */
body.modern-ux td.statuses-container table.matrix th,
body.modern-ux td.statuses-container table.matrix td {
    vertical-align: middle;
}

body.modern-ux td.statuses-container table.matrix table td {
    vertical-align: middle;
}

body.modern-ux td.statuses-container table.matrix tr:first-child > th[id$="thPriority"] {
    width: 2.25rem !important;
    max-width: 5rem;
}

/* config/forms/rules — empty state “Create new rule” (mat-button): .panel-command a parity */
body.modern-ux form-rules article.rule-placeholder button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-14) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition:
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux form-rules article.rule-placeholder button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-none) !important;
}

body.modern-ux form-rules article.rule-placeholder button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux form-rules article.rule-placeholder button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux form-rules article.rule-placeholder button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux form-rules article.rule-placeholder button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux form-rules article.rule-placeholder button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* config/forms/rules — empty state heading (Material h4.h3): page title token parity */
body.modern-ux form-rules article.rule-placeholder h4.h3 {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-1125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--foreground);
    margin: 0 0 var(--space-4) 0;
}

body.modern-ux.medrio.dark form-rules article.rule-placeholder h4.h3,
body.modern-ux.dark form-rules article.rule-placeholder h4.h3 {
    color: var(--mux-color-text);
}

/* config/forms/rules — list toolbar page title (matches configure study / .pod header.major rhythm) */
body.modern-ux form-rules mc-list-toolbar h1[mc-toolbar-title] {
    margin: 0;
    padding: 0;
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-20);
    font-weight: var(--fw-medium);
    line-height: 32px;
    letter-spacing: normal;
    color: var(--foreground);
}

body.modern-ux.medrio.dark form-rules mc-list-toolbar h1[mc-toolbar-title],
body.modern-ux.dark form-rules mc-list-toolbar h1[mc-toolbar-title] {
    color: var(--mux-color-text);
}

/* config/forms/rules + config/subject-status-rules — Active / Inactive: Material tabs → same Basic Tabs as edit_queries #editQueriesNav
 * Hosts: form-rules | subject-status-rules. (border-bottom on labels; mat-ink-bar hidden.) */
body.modern-ux :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table.mat-tab-group {
    font-family: var(--font-family, var(--mux-font-family));
}

body.modern-ux :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-tab-header {
    border-bottom: 2px solid var(--border-color);
    background: transparent;
    overflow: visible !important;
}

/* Let label bottom borders paint; Material often sets overflow hidden on the label track */
body.modern-ux :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-tab-label-container {
    overflow: visible !important;
}

body.modern-ux :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-tab-label {
    position: relative !important;
    z-index: 0 !important;
    height: auto !important;
    min-width: 0 !important;
    padding: var(--space-3) var(--space-4) !important;
    opacity: 1 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--gray-800) !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    /* Basic Tabs / .ds-tab — ink bar hidden; border on label */
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
}

body.modern-ux :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-tab-label.mat-tab-label-active {
    z-index: 1 !important;
    color: #0d5fa8 !important;
    font-weight: 600 !important;
    background-color: var(--mux-primary-darker)26 !important;
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--mux-primary-darker) !important;
}

@media (hover: hover) {
    body.modern-ux
        :is(form-rules, subject-status-rules)
        mat-tab-group.subject-form-rules-table
        .mat-tab-label:hover:not(.mat-tab-disabled):not(.mat-tab-label-active) {
        color: var(--mux-primary-darker) !important;
        background-color: var(--mux-primary-darker)0a !important;
    }
}

/* Material sets inline styles on .mat-ink-bar (visibility/width/left) — must override with !important */
body.modern-ux :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table mat-ink-bar.mat-ink-bar,
body.modern-ux :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-ink-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    border: none !important;
    pointer-events: none !important;
}

body.modern-ux.medrio.dark :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-tab-header,
body.modern-ux.dark :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-tab-header {
    border-bottom-color: var(--mux-color-divider);
}

body.modern-ux.medrio.dark :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-tab-label,
body.modern-ux.dark :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-tab-label {
    color: #9ca3af !important;
}

body.modern-ux.medrio.dark :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-tab-label.mat-tab-label-active,
body.modern-ux.dark :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-tab-label.mat-tab-label-active {
    color: var(--mux-primary-light) !important;
    font-weight: 600 !important;
    background-color: color-mix(in srgb, var(--mux-primary-light) 15%, transparent) !important;
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--mux-primary-light) !important;
}

body.modern-ux.medrio.dark :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table mat-ink-bar.mat-ink-bar,
body.modern-ux.medrio.dark :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-ink-bar,
body.modern-ux.dark :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table mat-ink-bar.mat-ink-bar,
body.modern-ux.dark :is(form-rules, subject-status-rules) mat-tab-group.subject-form-rules-table .mat-ink-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    border: none !important;
    pointer-events: none !important;
}

@media (hover: hover) {
    body.modern-ux.medrio.dark
        :is(form-rules, subject-status-rules)
        mat-tab-group.subject-form-rules-table
        .mat-tab-label:hover:not(.mat-tab-disabled):not(.mat-tab-label-active),
    body.modern-ux.dark
        :is(form-rules, subject-status-rules)
        mat-tab-group.subject-form-rules-table
        .mat-tab-label:hover:not(.mat-tab-disabled):not(.mat-tab-label-active) {
        color: var(--gray-200) !important;
        background-color: #ffffff0d;
    }
}

/* config/notifications — mc-list-toolbar “Discard Changes” (.mc-toolbar-secondary-action mat-button): .panel-command a parity */
body.modern-ux medrio-notifications button.mat-button.mat-primary.mc-toolbar-secondary-action:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-14) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition:
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux medrio-notifications button.mat-button.mat-primary.mc-toolbar-secondary-action:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-none) !important;
}

body.modern-ux medrio-notifications button.mat-button.mat-primary.mc-toolbar-secondary-action:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux medrio-notifications button.mat-button.mat-primary.mc-toolbar-secondary-action:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux medrio-notifications button.mat-button.mat-primary.mc-toolbar-secondary-action:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux medrio-notifications button.mat-button.mat-primary.mc-toolbar-secondary-action:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux medrio-notifications button.mat-button.mat-primary.mc-toolbar-secondary-action:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* -------------------------------------------------------------------------
   config/notifications — med-form-field (Notification Title, Subject): UI-v4 labels + layout.
   Scoped to medrio-notifications only (same page). No extra host class required — works without rebuilding config JS.
   Overrides global med-label hide-on-value (modern-ux ~18029) so labels stay visible with text.
   ------------------------------------------------------------------------- */
body.modern-ux medrio-notifications med-form-field.width-100 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.modern-ux medrio-notifications med-form-field.width-100 .med-form-field-wrapper.sc-med-form-field,
body.modern-ux medrio-notifications med-form-field.width-100 .med-form-field-flex.sc-med-form-field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/*
 * med-label: keep “Notification Title” / “Subject” visible when filled or focused, and float above
 * the bordered med-input — same pattern as email-form-field invalid+value (~17450). Global ~17162 centers
 * the label in the field; unhiding without repositioning stacks label on top of the value.
 */
body.modern-ux medrio-notifications med-form-field.med-has-value:not(.med-err-invalid):not(:has(med-input.med-err-invalid)) med-input med-label,
body.modern-ux medrio-notifications med-form-field:not(.med-err-invalid):not(:has(med-input.med-err-invalid)) med-input:focus-within med-label {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    position: absolute !important;
    top: auto !important;
    bottom: 100% !important;
    /* left: 0 — edge-align with bordered med-input (same as notification-detail mat-select labels ~7909) */
    left: 0 !important;
    transform: translateY(-0.375rem) !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

/* Room for the floated label above the control (see email-form-field.med-has-value invalid block) */
body.modern-ux medrio-notifications med-form-field.med-has-value:not(.med-err-invalid):not(:has(med-input.med-err-invalid)),
body.modern-ux medrio-notifications med-form-field:not(.med-err-invalid):not(:has(med-input.med-err-invalid)):has(med-input:focus-within) {
    padding-top: calc(var(--mux-fs-rem-875) + var(--space-2)) !important;
    box-sizing: border-box !important;
}

body.modern-ux medrio-notifications med-form-field.med-has-value:not(.med-err-invalid):not(:has(med-input.med-err-invalid)) .med-form-field-wrapper.sc-med-form-field,
body.modern-ux medrio-notifications med-form-field:not(.med-err-invalid):not(:has(med-input.med-err-invalid)):has(med-input:focus-within) .med-form-field-wrapper.sc-med-form-field,
body.modern-ux medrio-notifications med-form-field.med-has-value:not(.med-err-invalid):not(:has(med-input.med-err-invalid)) .med-form-field-infix.sc-med-form-field,
body.modern-ux medrio-notifications med-form-field:not(.med-err-invalid):not(:has(med-input.med-err-invalid)):has(med-input:focus-within) .med-form-field-infix.sc-med-form-field {
    overflow: visible !important;
}

body.modern-ux medrio-notifications med-form-field.med-has-value:not(.med-err-invalid):not(:has(med-input.med-err-invalid)) med-input,
body.modern-ux medrio-notifications med-form-field:not(.med-err-invalid):not(:has(med-input.med-err-invalid)):has(med-input:focus-within) med-input {
    overflow: visible !important;
}

body.modern-ux medrio-notifications med-form-field med-input med-label label.native-label,
body.modern-ux medrio-notifications med-form-field med-input med-label .med-input-labe-text-content {
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-normal) !important;
    color: var(--text-primary) !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}

/* Subject row: input + Placeholders icon — flex infix; icon sits beside the control, not over the count */
body.modern-ux medrio-notifications med-form-field:has(.subject-tokens-button-wrapper) .med-form-field-infix.sc-med-form-field {
    align-items: center !important;
    gap: var(--space-2, 8px) !important;
}

body.modern-ux medrio-notifications med-form-field:has(.subject-tokens-button-wrapper) .med-form-field-infix.sc-med-form-field > med-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Character count (align-end med-hint) — full width row below the control (Notification Title + Subject) */
body.modern-ux medrio-notifications med-form-field .med-form-field-hint-wrapper.sc-med-form-field {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    row-gap: 0.125rem !important;
}

body.modern-ux medrio-notifications med-form-field .med-form-field-hint-wrapper med-hint[slot="align-end"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: right !important;
    justify-content: flex-end !important;
    padding-top: 0.25rem !important;
    box-sizing: border-box !important;
}

body.modern-ux medrio-notifications med-form-field .med-form-field-hint-wrapper med-spacer {
    display: none !important;
}

/* mc-card-toolbar — gap between Save / Discard (and other non–icon-button pairs); skips mat-icon-button */
body.modern-ux mc-card-toolbar button.mat-button-base:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab)
    + button.mat-button-base:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    margin-inline-start: var(--space-3, 12px) !important;
}

/* Fallback when each CTA is wrapped (e.g. sibling spans) */
body.modern-ux mc-card-toolbar span:has(button.mat-button-base:not(.mat-icon-button))
    + span:has(button.mat-button-base:not(.mat-icon-button)) {
    margin-inline-start: var(--space-3, 12px) !important;
}

/* manage/role-administration — mc-card-toolbar “Discard Changes” (flat mat-primary beside raised Save): .ds-btn-text / tertiary parity */
body.modern-ux mc-card-toolbar button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-14) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition:
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux mc-card-toolbar button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-none) !important;
}

body.modern-ux mc-card-toolbar button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux mc-card-toolbar button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux mc-card-toolbar button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux mc-card-toolbar button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux mc-card-toolbar button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* roles-permissions — permission-status-label “Edit Forms” (mat-button primary) → .ds-btn-text / mc-card-toolbar flat parity */
body.modern-ux permission-status-label button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-14) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    height: auto !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-2) !important;
    margin: 0 !important;
    border-radius: var(--radius-md) !important;
    border: none !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    box-shadow: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    transition:
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
    min-width: auto !important;
}

body.modern-ux permission-status-label button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-none) !important;
}

body.modern-ux permission-status-label button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux permission-status-label button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux permission-status-label button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux permission-status-label button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux permission-status-label button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* reports /list-reports — “Build report” empty state: button.mcp + mat-button mat-primary → .ds-btn.ds-btn-text parity
 * (.mcp on non-buttons is common; selector requires button.mat-button so list rows etc. are unaffected) */
body.modern-ux button.mcp.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px) !important;
    box-sizing: border-box !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4, 16px) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    border-radius: var(--radius-md, 8px) !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    background: transparent !important;
    color: var(--brand-accessible) !important;
    box-shadow: none !important;
    transform: none !important;
}

body.modern-ux button.mcp.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-snug) !important;
    color: inherit !important;
}

body.modern-ux button.mcp.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) {
    background-color: #0d5fa814 !important;
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux button.mcp.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux button.mcp.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux button.mcp.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux button.mcp.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* manage/role-administration — mc-card-toolbar Save: mat-raised-button.mat-primary → .ds-btn.ds-btn-primary parity
 * config list toolbars (e.g. form-rules #create-new-btn): mc-list-toolbar — same primary CTA tokens
 * Also: reports list-reports toolbar “Build report” (mat-raised-button + .ds-btn.ds-btn-primary on same element)
 * Manage — Labs add-labs #create (Create): same primary CTA (not under mc-card-toolbar) */
body.modern-ux mc-card-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab),
body.modern-ux mc-list-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab),
body.modern-ux button.mat-raised-button.mat-primary.ds-btn.ds-btn-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab),
body.modern-ux manage-app add-labs button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4, 16px) !important;
    border-radius: var(--radius-md, 8px) !important;
    border: 1px solid var(--brand-dark, var(--mux-primary-dark)) !important;
    box-sizing: border-box !important;
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

body.modern-ux mc-card-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper,
body.modern-ux mc-list-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper,
body.modern-ux button.mat-raised-button.mat-primary.ds-btn.ds-btn-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper,
body.modern-ux manage-app add-labs button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-snug) !important;
    color: inherit !important;
}

body.modern-ux mc-card-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-focus-overlay,
body.modern-ux mc-list-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-focus-overlay,
body.modern-ux button.mat-raised-button.mat-primary.ds-btn.ds-btn-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-focus-overlay,
body.modern-ux manage-app add-labs button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-focus-overlay {
    background: transparent !important;
}

body.modern-ux mc-card-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled),
body.modern-ux mc-list-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled),
body.modern-ux button.mat-raised-button.mat-primary.ds-btn.ds-btn-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled),
body.modern-ux manage-app add-labs button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled) {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    background-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
}

body.modern-ux mc-card-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled) .mat-button-focus-overlay,
body.modern-ux mc-list-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled) .mat-button-focus-overlay,
body.modern-ux button.mat-raised-button.mat-primary.ds-btn.ds-btn-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled) .mat-button-focus-overlay,
body.modern-ux manage-app add-labs button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux mc-card-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):active:not(:disabled):not(.mat-button-disabled),
body.modern-ux mc-list-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):active:not(:disabled):not(.mat-button-disabled),
body.modern-ux button.mat-raised-button.mat-primary.ds-btn.ds-btn-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):active:not(:disabled):not(.mat-button-disabled),
body.modern-ux manage-app add-labs button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):active:not(:disabled):not(.mat-button-disabled) {
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    background: var(--brand-darker, var(--mux-primary-darker)) !important;
    background-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux mc-card-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible,
body.modern-ux mc-list-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible,
body.modern-ux button.mat-raised-button.mat-primary.ds-btn.ds-btn-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible,
body.modern-ux manage-app add-labs button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

body.modern-ux mc-card-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled,
body.modern-ux mc-card-toolbar button.mat-raised-button.mat-primary.mat-button-disabled:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab),
body.modern-ux mc-list-toolbar button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled,
body.modern-ux mc-list-toolbar button.mat-raised-button.mat-primary.mat-button-disabled:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab),
body.modern-ux button.mat-raised-button.mat-primary.ds-btn.ds-btn-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled,
body.modern-ux button.mat-raised-button.mat-primary.mat-button-disabled.ds-btn.ds-btn-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab),
body.modern-ux manage-app add-labs button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled,
body.modern-ux manage-app add-labs button.mat-raised-button.mat-primary.mat-button-disabled:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    background: var(--muted) !important;
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    transform: none !important;
    box-shadow: none !important;
}

/*
 * add-labs: Angular Flex sets flex:1 1 0% on #create; component SCSS caps .create-button at max-width:15%.
 * That breaks DS primary sizing — shrink-wrapped .ds-btn-primary parity (CSS-Only-UI-2026 Buttons).
 */
body.modern-ux manage-app add-labs .lab-entry-section > div:first-child button.create-button.mat-raised-button.mat-primary {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Cancel — mat flat primary → .ds-btn-outlined-secondary (card actions pattern on design site) */
body.modern-ux manage-app add-labs button#create ~ button#create,
body.modern-ux manage-app add-labs .lab-entry-section > div:first-child button.create-button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: var(--brand-dark) !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body.modern-ux manage-app add-labs .lab-entry-section > div:first-child button.create-button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button) .mat-button-wrapper {
    color: inherit !important;
}

body.modern-ux manage-app add-labs .lab-entry-section > div:first-child button.create-button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button) .mat-button-focus-overlay {
    background: transparent !important;
}

body.modern-ux manage-app add-labs .lab-entry-section > div:first-child button.create-button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):hover:not(:disabled):not(.mat-button-disabled) {
    background: color-mix(in srgb, var(--brand) 12%, transparent) !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
}

body.modern-ux manage-app add-labs .lab-entry-section > div:first-child button.create-button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):focus-visible {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

/* -------------------------------------------------------------------------
   Subject Portal (medrio.subjectportal) — site-coordinator-review (Angular Material).
   Loaded when portal links modern-ux.css; body.modern-ux from FeaturesService.modernUX.
   Cancel / Start + checkbox: parity with Manual Query dialog + mc-card-toolbar DS buttons.
   ------------------------------------------------------------------------- */
body.modern-ux site-coordinator-review mat-card-actions footer > div {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: var(--space-3, 12px) !important;
}

body.modern-ux site-coordinator-review #btn-cancel.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    float: none !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: var(--brand-dark) !important;
    border-radius: var(--radius-md, 8px) !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

body.modern-ux site-coordinator-review #btn-cancel.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-snug) !important;
}

body.modern-ux site-coordinator-review #btn-cancel.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled) {
    border-color: var(--brand-darker) !important;
    background: var(--mux-primary-dark)14 !important;
    background-color: var(--mux-primary-dark)14 !important;
    color: var(--brand-darker) !important;
}

body.modern-ux site-coordinator-review #btn-cancel.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux site-coordinator-review #btn-cancel.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible {
    outline: 2px solid var(--brand-dark) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

body.modern-ux site-coordinator-review #btn-cancel.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled,
body.modern-ux site-coordinator-review #btn-cancel.mat-button.mat-primary.mat-button-disabled:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

body.modern-ux site-coordinator-review #btn-start.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab),
body.modern-ux :is(sign-off, consent-sign-off) #signoff-btn.sign-off-button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4, 16px) !important;
    border-radius: var(--radius-md, 8px) !important;
    border: 1px solid var(--brand-dark, var(--mux-primary-dark)) !important;
    box-sizing: border-box !important;
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

body.modern-ux site-coordinator-review #btn-start.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper,
body.modern-ux :is(sign-off, consent-sign-off) #signoff-btn.sign-off-button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-snug) !important;
    color: inherit !important;
}

body.modern-ux site-coordinator-review #btn-start.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-focus-overlay,
body.modern-ux :is(sign-off, consent-sign-off) #signoff-btn.sign-off-button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-focus-overlay {
    background: transparent !important;
}

body.modern-ux site-coordinator-review #btn-start.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled),
body.modern-ux :is(sign-off, consent-sign-off) #signoff-btn.sign-off-button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled) {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    background-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
}

body.modern-ux site-coordinator-review #btn-start.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled) .mat-button-focus-overlay,
body.modern-ux :is(sign-off, consent-sign-off) #signoff-btn.sign-off-button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled):not(.mat-button-disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux site-coordinator-review #btn-start.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible,
body.modern-ux :is(sign-off, consent-sign-off) #signoff-btn.sign-off-button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

body.modern-ux site-coordinator-review #btn-start.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled,
body.modern-ux site-coordinator-review #btn-start.mat-raised-button.mat-primary.mat-button-disabled:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab),
body.modern-ux :is(sign-off, consent-sign-off) #signoff-btn.sign-off-button.mat-raised-button.mat-primary:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled,
body.modern-ux :is(sign-off, consent-sign-off) #signoff-btn.sign-off-button.mat-raised-button.mat-primary.mat-button-disabled:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    background: var(--muted) !important;
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux site-coordinator-review .portal-card-content .mat-checkbox {
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    color: var(--text-primary, var(--foreground)) !important;
}

body.modern-ux site-coordinator-review .portal-card-content .mat-checkbox .mat-checkbox-label {
    line-height: var(--lh-snug) !important;
}

/* Angular Material ships stroke="white" on the SVG path; DS checkboxes use black tick on accent fill (see input[type=checkbox]:checked above). */
body.modern-ux site-coordinator-review .portal-card-content .mat-checkbox.mat-checkbox-checked .mat-checkbox-checkmark-path {
    stroke: var(--mux-med-checkbox-checkmark-stroke, #000000) !important;
}

/* -------------------------------------------------------------------------
   Subject Portal (medrio.subjectportal) — route / layout hooks (class-only in
   ClientApp). Scope new rules under body.modern-ux. Replica: sync this file.

   Shell: main.mux-portal-shell (in-clinic-portal-app).

   Page roots (use for route-specific modern-ux without broadening selectors):
   .mux-portal-page-completed-forms — /completed-forms (+ mux-completed-forms-root)
   .mux-portal-page-site-coordinator-review — /epro|/consent …/site-coordinator-review
   .mux-portal-page-patient-review — …/patient-review
   .mux-portal-page-form-finished — …/form-finished
   .mux-portal-page-consent-document — consent …/document/:id (progress + mat-card)
   .mux-portal-page-view-document — completed-forms document preview panel
   .mux-portal-page-review-data — epro-remote/review-data, epro/patient-review-data
   .mux-portal-page-epro-remote-home — default '' ePRO remote landing
   .mux-portal-page-pending-forms — epro-remote/pending-items
   .mux-portal-page-content-hub — epro-remote/content
   .mux-portal-page-content-detail — epro-remote/content/:id
   .mux-portal-page-review-prior-entries — epro-remote/review-prior-entries

   Sign-off / consent-sign-off + .mux-portal-page-completed-forms: shared rules for the
   comment mat-form-field.full-width (boxed field, no legacy underline). Toolbar: header.mux-portal-toolbar.
   ------------------------------------------------------------------------- */
body.modern-ux :is(sign-off, consent-sign-off) .portal-card-header-full-width {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: var(--space-3, 12px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.modern-ux :is(sign-off, consent-sign-off) .portal-card-header-full-width .review {
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    color: var(--text-primary, var(--foreground)) !important;
}

/* Component ::ng-deep adds margin-left on .mat-form-field-type-select — use gap on the flex row instead */
body.modern-ux :is(sign-off, consent-sign-off) mat-form-field.select-type.mat-form-field-type-mat-select {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    flex: 0 1 auto !important;
    min-width: min(12rem, 100%) !important;
    max-width: 100% !important;
}

body.modern-ux :is(sign-off, consent-sign-off) .no-sign-offs {
    font-family: var(--font-family, var(--mux-font-family)) !important;
    color: var(--muted-foreground) !important;
}

body.modern-ux :is(sign-off, consent-sign-off) .item-container.mat-expansion-panel {
    border: 1px solid var(--border, var(--mux-secondary-dark)) !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    overflow: hidden;
}

/* No bottom border: a line here sits where the comment mat-form-field label floats up and reads as a clash */
body.modern-ux :is(sign-off, consent-sign-off) .section.bold,
body.modern-ux .mux-portal-page-completed-forms .section.bold {
    background-image: none !important;
    border-bottom: none !important;
    padding-bottom: var(--space-3, 12px) !important;
    margin-bottom: 0 !important;
}

body.modern-ux :is(sign-off, consent-sign-off) .signature-pad-wrapper {
    border-color: var(--border, var(--mux-secondary-dark)) !important;
    border-radius: var(--radius-md, 8px) !important;
}

/* Comment field: legacy mat-input global rules strip borders; box like legacy mat-select (notification-detail autocomplete pattern). */
/* Label is absolute bottom:100% on infix; mat-list margin-bottom + field margin-top keep it off the last row */
body.modern-ux :is(sign-off, consent-sign-off) form.sections-form mat-list.mat-list-base,
body.modern-ux .mux-portal-page-completed-forms form.sections-form mat-list.mat-list-base {
    margin-bottom: var(--space-5, 20px) !important;
    padding-bottom: var(--space-1, 4px) !important;
}

body.modern-ux :is(sign-off, consent-sign-off) mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input),
body.modern-ux .mux-portal-page-completed-forms mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) {
    position: relative;
    z-index: 1 !important;
    /* List already has margin-bottom; label sits just above infix (bottom:100%) — avoid a tall empty band */
    margin-top: calc(var(--mux-fs-rem-875) + var(--space-2, 8px)) !important;
    overflow: visible !important;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux :is(sign-off, consent-sign-off) mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-wrapper,
body.modern-ux .mux-portal-page-completed-forms mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-wrapper {
    /* Legacy appearance reserves padding-top for in-field labels; we float the label above the boxed infix — kill the dead band */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

body.modern-ux :is(sign-off, consent-sign-off) mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-flex,
body.modern-ux .mux-portal-page-completed-forms mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-flex {
    align-items: stretch !important;
    overflow: visible !important;
    position: relative !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Empty legacy prefix/suffix cells can still reserve a row of height in the flex row */
body.modern-ux :is(sign-off, consent-sign-off) mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-prefix,
body.modern-ux :is(sign-off, consent-sign-off) mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-suffix,
body.modern-ux .mux-portal-page-completed-forms mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-prefix,
body.modern-ux .mux-portal-page-completed-forms mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-suffix {
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
}

body.modern-ux :is(sign-off, consent-sign-off) mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix,
body.modern-ux .mux-portal-page-completed-forms mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input) .mat-form-field-infix {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    /* Textarea supplies height; avoid single-line control min-height + symmetric padding (reads as a gap under the floated label) */
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2px var(--mux-field-control-padding-x) var(--mux-field-control-padding-y) !important;
    /* Kill legacy em-based transparent border-top that reads as label↔control dead space */
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--mux-secondary-dark) !important;
    border-radius: var(--mux-radius) !important;
    background-color: var(--input-background) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
    overflow: visible !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):not(:focus-within):not(.mat-focused):hover
    .mat-form-field-infix,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):not(:focus-within):not(.mat-focused):hover
    .mat-form-field-infix {
    border-color: var(--mux-color-text) !important;
    background-color: var(--input-background) !important;
    box-shadow: none !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):focus-within
    .mat-form-field-infix,
body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-focused
    .mat-form-field-infix,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input):focus-within
    .mat-form-field-infix,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-focused
    .mat-form-field-infix {
    border-width: 1px !important;
    border-color: var(--mux-color-border-focus) !important;
    /* Keep padding identical to unfocused (.mat-form-field-infix base); changing it shifts the floated label */
    background-color: var(--input-background) !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid
    .mat-form-field-infix,
body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched
    .mat-form-field-infix,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid
    .mat-form-field-infix,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched
    .mat-form-field-infix {
    border-color: var(--destructive) !important;
    background-color: var(--mux-color-invalid-bg) !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid:focus-within
    .mat-form-field-infix,
body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched:focus-within
    .mat-form-field-infix,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid:focus-within
    .mat-form-field-infix,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched:focus-within
    .mat-form-field-infix {
    border-color: var(--destructive) !important;
    box-shadow: 0 0 0 1px var(--destructive) !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-underline,
body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-underline
    .mat-form-field-ripple,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-underline,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-underline
    .mat-form-field-ripple {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-label-wrapper,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-label-wrapper {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    /* Anchor to top of infix (not translateY) so label sits flush above the boxed control */
    top: auto !important;
    bottom: 100% !important;
    width: auto !important;
    max-width: calc(100% - 1.5rem);
    padding: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 2 !important;
    height: auto;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-label,
body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-label
    span,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-label,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-label
    span {
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-normal) !important;
    color: var(--text-secondary, var(--muted-foreground)) !important;
    background-color: var(--card) !important;
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 0.2rem 0 0 !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid
    .mat-form-field-label,
body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid
    .mat-form-field-label
    span,
body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched
    .mat-form-field-label,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid
    .mat-form-field-label,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-invalid
    .mat-form-field-label
    span,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).ng-invalid.ng-touched
    .mat-form-field-label {
    color: var(--destructive) !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-should-float
    .mat-form-field-label,
body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-label.mat-empty,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-should-float
    .mat-form-field-label,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-label.mat-empty {
    transform: none !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    textarea.mat-input-element,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    textarea.mat-input-element {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
    /* CDK autosize sets inline height/min-height — override so boxed field matches other mux controls */
    height: auto !important;
    max-height: none !important;
    min-height: 3.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 3 !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-14) !important;
    line-height: var(--lh-snug) !important;
    color: var(--foreground) !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-subscript-wrapper,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    .mat-form-field-subscript-wrapper {
    margin-top: var(--space-1, 4px) !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    textarea.mat-input-element:hover:not(:disabled),
body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    textarea.mat-input-element:focus:not(:disabled),
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    textarea.mat-input-element:hover:not(:disabled),
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    textarea.mat-input-element:focus:not(:disabled) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled
    textarea.mat-input-element,
body.modern-ux
    :is(sign-off, consent-sign-off)
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    textarea.mat-input-element:disabled,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input).mat-form-field-disabled
    textarea.mat-input-element,
body.modern-ux .mux-portal-page-completed-forms
    mat-form-field.full-width.mat-form-field-type-mat-input.mat-form-field-appearance-legacy:not(.search-input)
    textarea.mat-input-element:disabled {
    color: var(--muted-foreground) !important;
    -webkit-text-fill-color: var(--muted-foreground) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

body.modern-ux portal-toolbar header.mux-portal-toolbar .right-menu-item-button.mat-flat-button:focus-visible,
body.modern-ux portal-toolbar header.mux-portal-toolbar .button-drawer-menu.mat-icon-button:focus-visible,
body.modern-ux portal-toolbar header.mux-portal-toolbar .content-management-button.mat-icon-button:focus-visible {
    outline: 2px solid var(--mux-primary-contrast, #ffffff) !important;
    outline-offset: 2px !important;
}

/* Dialog chrome: icon-only close (class "button close-dialog" without "action") */
body.modern-ux a.button.close-dialog:not(.action) {
    color: var(--mux-color-text-muted) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-width: auto;
    min-height: auto;
    padding: 0.25rem;
    font-weight: var(--fw-medium);
}

body.modern-ux a.button.close-dialog:not(.action):hover {
    background: var(--mux-color-bg-hover) !important;
    color: var(--mux-color-text) !important;
}

/* CSS-Only-UI-2026 .ds-btn / .ds-btn-primary — real <button>; anchors get same look via overrides below */
body.modern-ux .ds-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    box-sizing: border-box;
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    border-radius: var(--radius-md, 8px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
}

/* common.css [class*="-icons"] matches "material-icons" (substring —icons) and forces rgba black; icons follow .ds-btn color */
body.modern-ux .ds-btn [class*="-icons"],
body.modern-ux a.ds-btn [class*="-icons"] {
    color: currentColor !important;
}

/* Text button — .ds-btn-text (Figma bundle b05eeb…: transparent, brand-accessible, 600, no border; hover #0d5fa814) */
body.modern-ux .ds-btn.ds-btn-text,
body.modern-ux a.ds-btn.ds-btn-text,
body.modern-ux input.ds-btn.ds-btn-text,
body.modern-ux input[type="submit"].ds-btn.ds-btn-text,
body.modern-ux input[type="button"].ds-btn.ds-btn-text {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: var(--brand-accessible) !important;
    font-weight: var(--fw-semibold) !important;
    box-shadow: none;
    transform: none;
}

body.modern-ux .ds-btn.ds-btn-text:hover:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-text:hover:not(:disabled),
body.modern-ux input.ds-btn.ds-btn-text:hover:not(:disabled),
body.modern-ux input[type="submit"].ds-btn.ds-btn-text:hover:not(:disabled),
body.modern-ux input[type="button"].ds-btn.ds-btn-text:hover:not(:disabled) {
    background-color: #0d5fa814 !important;
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .ds-btn.ds-btn-text:active:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-text:active:not(:disabled),
body.modern-ux input.ds-btn.ds-btn-text:active:not(:disabled),
body.modern-ux input[type="submit"].ds-btn.ds-btn-text:active:not(:disabled),
body.modern-ux input[type="button"].ds-btn.ds-btn-text:active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .ds-btn.ds-btn-text:focus-visible,
body.modern-ux a.ds-btn.ds-btn-text:focus-visible,
body.modern-ux input.ds-btn.ds-btn-text:focus-visible,
body.modern-ux input[type="submit"].ds-btn.ds-btn-text:focus-visible,
body.modern-ux input[type="button"].ds-btn.ds-btn-text:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .ds-btn.ds-btn-text:disabled,
body.modern-ux a.ds-btn.ds-btn-text.disabled,
body.modern-ux input.ds-btn.ds-btn-text:disabled,
body.modern-ux input[type="submit"].ds-btn.ds-btn-text:disabled,
body.modern-ux input[type="button"].ds-btn.ds-btn-text:disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Manage Default.aspx (etc.): .bulletless-list in floated .gc# — base .ds-btn uses white-space:nowrap,
   so long .ds-btn-text links spill into the next column; allow wrap + shrink flex child (span). */
body.modern-ux .bulletless-list > li {
    max-width: 100%;
}

body.modern-ux .bulletless-list a.ds-btn.ds-btn-text {
    white-space: normal;
    height: auto;
    min-height: var(--ds-btn-height);
    max-width: 100%;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
}

body.modern-ux .bulletless-list a.ds-btn.ds-btn-text > span {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
   ResearchSiteEditor (edit_sites.aspx): primary LinkButtons (a.action.button).
   branding-medrio.css loads after modern-ux and sets a.button.action background-color
   (#00aeef); SubPageSubPanel + !important locks DS primary + metrics.
   ConfigWizardNavigation Continue = .ConfigSectionComplete input[type=submit].
   ------------------------------------------------------------------------- */
body.modern-ux .buildStudyContent .SubPageSubPanel a.ds-btn.ds-btn-primary,
body.modern-ux .buildStudyContent .SubPageSubPanel a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline),
body.modern-ux .buildStudyContent .SubPageSubPanel a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    border: 1px solid var(--brand-dark, var(--mux-primary-dark)) !important;
    border-radius: var(--radius-md, 8px) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4, 16px) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-fs-rem-875)) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transform: none !important;
}

body.modern-ux .buildStudyContent .SubPageSubPanel a.ds-btn.ds-btn-primary:hover:not(:disabled),
body.modern-ux .buildStudyContent .SubPageSubPanel a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover,
body.modern-ux .buildStudyContent .SubPageSubPanel a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    background-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    transform: none !important;
}

body.modern-ux .buildStudyContent .SubPageSubPanel a.ds-btn.ds-btn-primary:active:not(:disabled),
body.modern-ux .buildStudyContent .SubPageSubPanel a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active,
body.modern-ux .buildStudyContent .SubPageSubPanel a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active {
    background: var(--brand-darker, var(--mux-primary-darker)) !important;
    background-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
    transform: none !important;
}

body.modern-ux .buildStudyContent .SubPageSubPanel a.ds-btn.ds-btn-primary:focus-visible,
body.modern-ux .buildStudyContent .SubPageSubPanel a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):focus-visible,
body.modern-ux .buildStudyContent .SubPageSubPanel a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):focus-visible {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

body.modern-ux .buildStudyContent .ConfigSectionComplete input[type="submit"] {
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    border: 1px solid var(--brand-dark, var(--mux-primary-dark)) !important;
    border-radius: var(--radius-md, 8px) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4, 16px) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-fs-rem-875)) !important;
    font-weight: var(--fw-medium) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
}

body.modern-ux .buildStudyContent .ConfigSectionComplete input[type="submit"]:hover {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    background-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux .buildStudyContent .ConfigSectionComplete input[type="submit"]:focus-visible {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

/* Forms list command row (edit_forms_list.aspx): align like .panel-command */
body.modern-ux .tall-action-button.overflowHidden.no-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* Visit editor (VisitEditor.ascx): command row + “Add multiple Visits”; forms list; visits grid “Forms and variables”; edit_forms_list grid links — same DS text-button look as .tall-action-button.overflowHidden.no-wrap a */
body.modern-ux .panel-command a,
body.modern-ux .tall-action-button.overflowHidden.no-wrap a,
body.modern-ux a.visit-editor-ds-text-link,
body.modern-ux .jobStatusMessage a,
body.modern-ux a[id$="returnToForms"],
body.modern-ux a[id$="deleteVariables"],
body.modern-ux a[id$="defineExportTables"],
body.modern-ux a[id$="lnkVisits_anchorLink"],
body.modern-ux a[id$="actionReturnToFormsList__actionLink"],
body.modern-ux a[id$="lnkRecoverFormsAndVariables"],
body.modern-ux a[onclick*="toggleAllVisits"],
body.modern-ux table.visits-list.mc-table a[id$="lnkSelectForms"],
body.modern-ux table.config-form-list.mc-table a[id$="lnkToSelectFormsLogic"],
body.modern-ux table.config-form-list.mc-table a[id$="lnkToSelectVisitsLogic"],
body.modern-ux .buildStudyContent a[id$="lnkRecover"],
body.modern-ux .buildStudyContent a[id$="lnkSiteManagement"],
body.modern-ux .buildStudyContent a[onclick*="showAddMultiple"],
body.modern-ux .buildStudyContent .button-container a.button.text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
    height: 36px;
    min-height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--mux-fs-14);
    line-height: var(--lh-none);
    box-sizing: border-box;
    background-color: transparent;
    color: var(--brand-accessible);
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    text-underline-offset: unset;
    text-decoration-thickness: unset;
    box-shadow: none;
}

body.modern-ux .panel-command a:hover,
body.modern-ux .tall-action-button.overflowHidden.no-wrap a:hover,
body.modern-ux a.visit-editor-ds-text-link:hover,
body.modern-ux .jobStatusMessage a:hover,
body.modern-ux a[id$="returnToForms"]:hover,
body.modern-ux a[id$="deleteVariables"]:hover,
body.modern-ux a[id$="defineExportTables"]:hover,
body.modern-ux a[id$="lnkVisits_anchorLink"]:hover,
body.modern-ux a[id$="actionReturnToFormsList__actionLink"]:hover,
body.modern-ux a[id$="lnkRecoverFormsAndVariables"]:hover,
body.modern-ux a[onclick*="toggleAllVisits"]:hover,
body.modern-ux table.visits-list.mc-table a[id$="lnkSelectForms"]:hover,
body.modern-ux table.config-form-list.mc-table a[id$="lnkToSelectFormsLogic"]:hover,
body.modern-ux table.config-form-list.mc-table a[id$="lnkToSelectVisitsLogic"]:hover,
body.modern-ux .buildStudyContent a[id$="lnkRecover"]:hover,
body.modern-ux .buildStudyContent a[id$="lnkSiteManagement"]:hover,
body.modern-ux .buildStudyContent a[onclick*="showAddMultiple"]:hover,
body.modern-ux .buildStudyContent .button-container a.button.text:hover {
    background-color: var(--mux-brand-accessible-08);
    color: var(--brand-accessible);
    text-decoration: none !important;
}

body.modern-ux .panel-command a:active,
body.modern-ux .tall-action-button.overflowHidden.no-wrap a:active,
body.modern-ux a.visit-editor-ds-text-link:active,
body.modern-ux .jobStatusMessage a:active,
body.modern-ux a[id$="returnToForms"]:active,
body.modern-ux a[id$="deleteVariables"]:active,
body.modern-ux a[id$="defineExportTables"]:active,
body.modern-ux a[id$="lnkVisits_anchorLink"]:active,
body.modern-ux a[id$="actionReturnToFormsList__actionLink"]:active,
body.modern-ux a[id$="lnkRecoverFormsAndVariables"]:active,
body.modern-ux a[onclick*="toggleAllVisits"]:active,
body.modern-ux table.visits-list.mc-table a[id$="lnkSelectForms"]:active,
body.modern-ux table.config-form-list.mc-table a[id$="lnkToSelectFormsLogic"]:active,
body.modern-ux table.config-form-list.mc-table a[id$="lnkToSelectVisitsLogic"]:active,
body.modern-ux .buildStudyContent a[id$="lnkRecover"]:active,
body.modern-ux .buildStudyContent a[id$="lnkSiteManagement"]:active,
body.modern-ux .buildStudyContent a[onclick*="showAddMultiple"]:active,
body.modern-ux .buildStudyContent .button-container a.button.text:active {
    background-color: var(--mux-brand-accessible-12);
    color: var(--brand-accessible);
}

body.modern-ux .panel-command a:focus-visible,
body.modern-ux .tall-action-button.overflowHidden.no-wrap a:focus-visible,
body.modern-ux a.visit-editor-ds-text-link:focus-visible,
body.modern-ux .jobStatusMessage a:focus-visible,
body.modern-ux a[id$="returnToForms"]:focus-visible,
body.modern-ux a[id$="deleteVariables"]:focus-visible,
body.modern-ux a[id$="defineExportTables"]:focus-visible,
body.modern-ux a[id$="lnkVisits_anchorLink"]:focus-visible,
body.modern-ux a[id$="actionReturnToFormsList__actionLink"]:focus-visible,
body.modern-ux a[id$="lnkRecoverFormsAndVariables"]:focus-visible,
body.modern-ux a[onclick*="toggleAllVisits"]:focus-visible,
body.modern-ux table.visits-list.mc-table a[id$="lnkSelectForms"]:focus-visible,
body.modern-ux table.config-form-list.mc-table a[id$="lnkToSelectFormsLogic"]:focus-visible,
body.modern-ux table.config-form-list.mc-table a[id$="lnkToSelectVisitsLogic"]:focus-visible,
body.modern-ux .buildStudyContent a[id$="lnkRecover"]:focus-visible,
body.modern-ux .buildStudyContent a[id$="lnkSiteManagement"]:focus-visible,
body.modern-ux .buildStudyContent a[onclick*="showAddMultiple"]:focus-visible,
body.modern-ux .buildStudyContent .button-container a.button.text:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

/* edit_forms_detail + SelectForms — “Return to Forms List”: DS text-button (parity with divRecoverDataContainer; beats global link rules) */
body.modern-ux a[id$="returnToForms"],
body.modern-ux a.visit-editor-ds-text-link[href*="edit_forms_list"],
body.modern-ux a[id$="actionReturnToFormsList__actionLink"],
body.modern-ux a[id$="actionReturnToFormsList_actionLink"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-weight: var(--fw-semibold) !important;
    font-size: var(--ds-btn-font-size, var(--mux-fs-rem-875)) !important;
    line-height: var(--lh-snug) !important;
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-sizing: border-box;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    text-underline-offset: unset !important;
    text-decoration-thickness: unset !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        background-color var(--transition, 0.15s ease),
        color var(--transition, 0.15s ease),
        box-shadow var(--transition, 0.15s ease);
    white-space: nowrap;
    outline-offset: 0 !important;
}

body.modern-ux a[id$="returnToForms"]:hover,
body.modern-ux a.visit-editor-ds-text-link[href*="edit_forms_list"]:hover,
body.modern-ux a[id$="actionReturnToFormsList__actionLink"]:hover,
body.modern-ux a[id$="actionReturnToFormsList_actionLink"]:hover {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
}

body.modern-ux a[id$="returnToForms"]:active,
body.modern-ux a.visit-editor-ds-text-link[href*="edit_forms_list"]:active,
body.modern-ux a[id$="actionReturnToFormsList__actionLink"]:active,
body.modern-ux a[id$="actionReturnToFormsList_actionLink"]:active {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux a[id$="returnToForms"]:focus-visible,
body.modern-ux a.visit-editor-ds-text-link[href*="edit_forms_list"]:focus-visible,
body.modern-ux a[id$="actionReturnToFormsList__actionLink"]:focus-visible,
body.modern-ux a[id$="actionReturnToFormsList_actionLink"]:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/*
 * edit_approval.aspx — GVSteps Forms column (FormsDd): radio + Material Symbols info + med-tooltip.
 * No ItemStyle on the column: scope with :has(.rdoFormsTooltip) (edit row only).
 */
body.modern-ux .MonitoringStepsRadGrid td:has(.rdoFormsTooltip) .rdoForms {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body.modern-ux .MonitoringStepsRadGrid td:has(.rdoFormsTooltip) .rdoForms input[type="radio"] {
    height: 13px;
    width: 13px;
    margin: 0;
    flex-shrink: 0;
}

body.modern-ux .MonitoringStepsRadGrid td:has(.rdoFormsTooltip) .rdoFormsTooltip {
    font-size: var(--mux-fs-16);
    line-height: var(--lh-none);
    margin: 0;
    vertical-align: middle;
}

/* RadGrid inline edit actions (edit_approval GVSteps, edit_forms_list): Save = .ds-btn-primary, Cancel = .ds-btn-text (replaces legacy branding-medrio #00aeef) */
body.modern-ux tr.actionButtonRadGrid td {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

body.modern-ux tr.actionButtonRadGrid a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-weight: var(--fw-semibold);
    text-decoration: none !important;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4);
    font-size: var(--ds-btn-font-size);
    line-height: var(--lh-none);
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
}

body.modern-ux tr.actionButtonRadGrid a:nth-of-type(1) {
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    border: 2px solid transparent !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux tr.actionButtonRadGrid a:nth-of-type(1):hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux tr.actionButtonRadGrid a:nth-of-type(1):active {
    background: var(--brand-darker) !important;
    border-color: var(--brand-darker) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux tr.actionButtonRadGrid a:nth-of-type(1):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring), var(--shadow-sm);
}

body.modern-ux tr.actionButtonRadGrid a:nth-of-type(2) {
    background: transparent !important;
    color: var(--brand-accessible) !important;
    border: none !important;
    box-shadow: none !important;
}

body.modern-ux tr.actionButtonRadGrid a:nth-of-type(2):hover {
    background: var(--mux-brand-accessible-08) !important;
    color: var(--brand-darker) !important;
}

body.modern-ux tr.actionButtonRadGrid a:nth-of-type(2):active {
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-darker) !important;
}

body.modern-ux tr.actionButtonRadGrid a:nth-of-type(2):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/* edit_forms_list.aspx: Study Configuration Documents action links — text button parity */
body.modern-ux div[id$="_pnlDynOptions"] .m-action-button > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
    height: 36px;
    min-height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--mux-fs-14);
    line-height: var(--lh-none);
    box-sizing: border-box;
    background-color: transparent;
    color: var(--brand-accessible);
    white-space: nowrap;
    text-decoration-color: transparent !important;
    box-shadow: none;
}

body.modern-ux div[id$="_pnlDynOptions"] .m-action-button > a:hover {
    background-color: var(--mux-brand-accessible-08);
    color: var(--brand-accessible);
    text-decoration: none !important;
}

body.modern-ux div[id$="_pnlDynOptions"] .m-action-button > a:active {
    background-color: var(--mux-brand-accessible-12);
    color: var(--brand-accessible);
}

body.modern-ux div[id$="_pnlDynOptions"] .m-action-button > a:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

/* Same page — Study Configuration Documents: legacy inline padding-top on UpdatePanels + progress wrappers;
   spacing between actions comes from block flow; non–modern-ux keeps inline styles unchanged. */
body.modern-ux div[id$="_pnlDynOptions"] [id$="pnlDataDictionary"],
body.modern-ux div[id$="_pnlDynOptions"] [id$="pnlExcelDataDictionary"] {
    padding-top: 0 !important;
}

body.modern-ux div[id$="_pnlDynOptions"] [id$="pnlDataDictionary"] div[style*="padding-left: 25px"],
body.modern-ux div[id$="_pnlDynOptions"] [id$="pnlExcelDataDictionary"] div[style*="padding-left: 25px"] {
    padding-top: 0 !important;
}

/* edit_forms_list.aspx: floated “Update” is not cleared by <br>; next panel was flowing beside it — narrow fieldset.
   Clear + explicit width so Study Configuration Documents spans the same column as the grid / Update row. */
body.modern-ux .leftTabBody .EditStudyMasterContent div[id$="_pnlDynOptions"] {
    clear: both;
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.modern-ux .leftTabBody .EditStudyMasterContent div[id$="_pnlDynOptions"] > fieldset {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* VisitEditor.ascx — Delete selected Visits: same row as .panel-command a (brand-accessible + rgba hovers); disabled ↔ .ds-btn.ds-btn-text */
body.modern-ux .panel-command med-button#btnDeleteVisits {
    align-items: center !important;
    vertical-align: middle;
    margin: 0;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.modern-ux .panel-command med-button#btnDeleteVisits::part(button) {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    margin: 0 !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    border-radius: var(--radius-md, 8px) !important;
    border: none !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: none !important;
    overflow: hidden;
    white-space: nowrap;
    transform: none;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* Slotted row: common .display-flex is only `display:flex` — center icon + label like .panel-command a */
body.modern-ux .panel-command med-button#btnDeleteVisits .display-flex {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px);
    height: 100%;
    line-height: var(--lh-none) !important;
}

body.modern-ux .panel-command med-button#btnDeleteVisits.med-primary::part(button) {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--brand-accessible) !important;
    cursor: pointer;
}

body.modern-ux .panel-command med-button#btnDeleteVisits.med-primary::part(button):hover:not(:disabled) {
    background-color: var(--mux-brand-accessible-08) !important;
    background-image: none !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .panel-command med-button#btnDeleteVisits.med-primary::part(button):active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    background-image: none !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .panel-command med-button#btnDeleteVisits.med-primary::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .panel-command med-button#btnDeleteVisits.med-primary::part(button)::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200%;
    height: 200%;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

body.modern-ux .panel-command med-button#btnDeleteVisits.med-primary::part(button):active:not(:disabled)::after {
    animation: mux-touch-ripple 0.55s ease-out forwards;
}

body.modern-ux .panel-command med-button#btnDeleteVisits.med-disabled::part(button),
body.modern-ux .panel-command med-button#btnDeleteVisits::part(button):disabled {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Match mat-18 icons on sibling .panel-command hyperlinks; flex box kills Material baseline offset */
body.modern-ux .panel-command med-button#btnDeleteVisits med-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    line-height: var(--lh-none) !important;
    vertical-align: middle !important;
}

body.modern-ux .panel-command med-button#btnDeleteVisits med-icon .material-icons,
body.modern-ux .panel-command med-button#btnDeleteVisits med-icon i.material-icons,
body.modern-ux .panel-command med-button#btnDeleteVisits med-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    font-size: var(--mux-fs-18) !important;
    line-height: 18px !important;
    vertical-align: middle !important;
}

body.modern-ux .panel-command med-button#btnDeleteVisits.med-primary med-icon,
body.modern-ux .panel-command med-button#btnDeleteVisits.med-primary med-icon .material-icons,
body.modern-ux .panel-command med-button#btnDeleteVisits.med-primary med-icon i {
    color: inherit !important;
}

body.modern-ux .panel-command med-button#btnDeleteVisits.med-disabled med-icon,
body.modern-ux .panel-command med-button#btnDeleteVisits.med-disabled med-icon .material-icons,
body.modern-ux .panel-command med-button#btnDeleteVisits.med-disabled med-icon i,
body.modern-ux .panel-command med-button#btnDeleteVisits[disabled] med-icon,
body.modern-ux .panel-command med-button#btnDeleteVisits[disabled] med-icon .material-icons,
body.modern-ux .panel-command med-button#btnDeleteVisits[disabled] med-icon i {
    color: inherit !important;
}

body.modern-ux .panel-command med-button#btnDeleteVisits .display-flex *:not(.material-icons):not([class*="material-icons"]) {
    font-size: inherit;
}

/* edit_deploy.aspx — “Report History” + “Deployment History” med-buttons: .visit-editor-ds-text-link / .panel-command a parity */
body.modern-ux med-button[href*="PendingChangesReportHistory"],
body.modern-ux med-button[href*="DeploymentHistory.aspx"] {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle;
    margin: 0;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.modern-ux med-button[href*="PendingChangesReportHistory"]::part(button),
body.modern-ux med-button[href*="DeploymentHistory.aspx"]::part(button) {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    margin: 0 !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    border-radius: var(--radius-md, 8px) !important;
    border: none !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: none !important;
    overflow: hidden;
    white-space: nowrap;
    transform: none;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none !important;
}

body.modern-ux med-button[href*="PendingChangesReportHistory"].med-primary::part(button),
body.modern-ux med-button[href*="DeploymentHistory.aspx"].med-primary::part(button) {
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    cursor: pointer;
}

body.modern-ux med-button[href*="PendingChangesReportHistory"].med-primary::part(button):hover:not(:disabled),
body.modern-ux med-button[href*="DeploymentHistory.aspx"].med-primary::part(button):hover:not(:disabled) {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux med-button[href*="PendingChangesReportHistory"].med-primary::part(button):active:not(:disabled),
body.modern-ux med-button[href*="DeploymentHistory.aspx"].med-primary::part(button):active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux med-button[href*="PendingChangesReportHistory"].med-primary::part(button):focus-visible,
body.modern-ux med-button[href*="DeploymentHistory.aspx"].med-primary::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux med-button[href*="PendingChangesReportHistory"].med-disabled::part(button),
body.modern-ux med-button[href*="PendingChangesReportHistory"]::part(button):disabled,
body.modern-ux med-button[href*="DeploymentHistory.aspx"].med-disabled::part(button),
body.modern-ux med-button[href*="DeploymentHistory.aspx"]::part(button):disabled {
    background-color: transparent !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

body.modern-ux med-button[href*="PendingChangesReportHistory"] .display-flex,
body.modern-ux med-button[href*="DeploymentHistory.aspx"] .display-flex {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px);
    line-height: var(--lh-none) !important;
}

body.modern-ux med-button[href*="PendingChangesReportHistory"] .display-flex *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux med-button[href*="DeploymentHistory.aspx"] .display-flex *:not(.material-icons):not([class*="material-icons"]) {
    font-size: inherit;
}

/* DeploymentMethodSelectorControl.ascx — #cancel-sites (edit deploy): .visit-editor-ds-text-link / .panel-command a parity (host keeps .pr-30 for sibling gap) */
body.modern-ux med-button#cancel-sites {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle;
    margin: 0;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.modern-ux med-button#cancel-sites::part(button) {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    margin: 0 !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    border-radius: var(--radius-md, 8px) !important;
    border: none !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: none !important;
    overflow: hidden;
    white-space: nowrap;
    transform: none;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none !important;
    color: var(--brand-accessible) !important;
    cursor: pointer;
}

body.modern-ux med-button#cancel-sites::part(button):hover:not(:disabled) {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux med-button#cancel-sites::part(button):active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux med-button#cancel-sites::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux med-button#cancel-sites.med-disabled::part(button),
body.modern-ux med-button#cancel-sites::part(button):disabled {
    background-color: transparent !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

body.modern-ux med-button#cancel-sites .display-flex {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px);
    line-height: var(--lh-none) !important;
}

body.modern-ux med-button#cancel-sites .display-flex *:not(.material-icons):not([class*="material-icons"]) {
    font-size: inherit;
}

body.modern-ux .panel-command a *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux .tall-action-button.overflowHidden.no-wrap a *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a.visit-editor-ds-text-link *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux table.visits-list.mc-table a[id$="lnkSelectForms"] *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux table.config-form-list.mc-table a[id$="lnkToSelectFormsLogic"] *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux table.config-form-list.mc-table a[id$="lnkToSelectVisitsLogic"] *:not(.material-icons):not([class*="material-icons"]) {
    font-size: inherit;
}

/* Nested labels (legacy markup) inherit button type scale — matches .ds-btn (skip Material Icons) */
body.modern-ux .ds-btn *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog) *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) *:not(.material-icons):not([class*="material-icons"]),
body.modern-ux a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) *:not(.material-icons):not([class*="material-icons"]) {
    font-size: inherit;
}

/* Filled primary — hex fallbacks if custom props fail in some contexts */
body.modern-ux .ds-btn.ds-btn-primary,
body.modern-ux a.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog),
body.modern-ux a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    color: var(--mux-primary-contrast) !important;
    background: var(--brand);
    border-color: var(--brand-dark, var(--mux-primary-dark));
    border-radius: var(--radius-md, 8px);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
}

/*
 * ASP LinkButton CssClass="action button" renders class="action button". In CSS, .button.action matches the same
 * elements as .action.button; this block is the explicit a.action.button alias for the guideline (.ds-btn-primary).
 * !important on fill/border beats branding-medrio.css (loads after modern-ux).
 */
body.modern-ux a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border-style: solid !important;
    border-width: 1px !important;
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    border-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-radius: var(--radius-md, 8px) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4, 16px) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

body.modern-ux a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):hover {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    background-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
}

body.modern-ux a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):active {
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    background: var(--brand-darker, var(--mux-primary-darker)) !important;
    background-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):focus-visible {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

body.modern-ux a.action.button.disabled:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline),
body.modern-ux a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline)[disabled] {
    background: var(--muted) !important;
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux.medrio.dark a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog) {
    background: linear-gradient(180deg, var(--mux-primary-main) 0%, var(--medrio-blue-90) 100%) !important;
    border-color: var(--mux-primary-main) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux.medrio.dark a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):hover {
    background: linear-gradient(180deg, var(--medrio-blue-90) 0%, var(--medrio-blue-70) 100%) !important;
    border-color: var(--medrio-blue-90) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux.medrio.dark a.action.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):active {
    background: linear-gradient(180deg, var(--medrio-blue-90) 0%, var(--medrio-blue-70) 100%) !important;
    border-color: var(--medrio-blue-70) !important;
    box-shadow: var(--mux-shadow-sm) !important;
    color: var(--mux-primary-contrast) !important;
}

/* Filled secondary — CSS-Only-UI-2026 .ds-btn-secondary (gray-500 / #fff; hover gray-600) */
body.modern-ux .ds-btn.ds-btn-secondary,
body.modern-ux a.ds-btn.ds-btn-secondary {
    color: #fff !important;
    background: var(--gray-500);
    border-color: var(--gray-500);
    border-radius: var(--radius-md, 8px);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
}

/* Filled semantic — CSS-Only-UI-2026 .ds-btn-error / .ds-btn-success / .ds-btn-warning
   Source: https://onion-steam-49836257.figma.site/_components/v2/b05eeb259a18f26d9d2d504426f494bb0c6dbe30.css */
body.modern-ux .ds-btn.ds-btn-error,
body.modern-ux a.ds-btn.ds-btn-error {
    color: #fff !important;
    background: var(--color-error);
    border-color: var(--color-error);
    border-radius: var(--radius-md, 8px);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
}

body.modern-ux .ds-btn.ds-btn-success,
body.modern-ux a.ds-btn.ds-btn-success {
    color: #fff !important;
    background: var(--color-success);
    border-color: var(--color-success);
    border-radius: var(--radius-md, 8px);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
}

body.modern-ux .ds-btn.ds-btn-warning,
body.modern-ux a.ds-btn.ds-btn-warning {
    color: #000 !important;
    background: var(--color-warning);
    border-color: var(--color-warning);
    border-radius: var(--radius-md, 8px);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
}

/* Outlined — .ds-btn-outlined / .ds-btn-outlined-secondary / .ds-btn-outlined-error (2px border; no fill; spec hovers) */
body.modern-ux .ds-btn.ds-btn-outlined,
body.modern-ux a.ds-btn.ds-btn-outlined {
    background: transparent !important;
    border: 2px solid var(--brand-dark);
    color: var(--brand-dark) !important;
    box-shadow: none;
    border-radius: var(--radius-md, 8px);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
}

body.modern-ux .ds-btn.ds-btn-outlined-secondary,
body.modern-ux a.ds-btn.ds-btn-outlined-secondary {
    background: transparent !important;
    border: 2px solid var(--gray-400);
    color: var(--text-secondary) !important;
    box-shadow: none;
    border-radius: var(--radius-md, 8px);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
}

body.modern-ux .ds-btn.ds-btn-outlined-error,
body.modern-ux a.ds-btn.ds-btn-outlined-error {
    background: transparent !important;
    border: 2px solid var(--color-error);
    color: var(--color-error) !important;
    box-shadow: none;
    border-radius: var(--radius-md, 8px);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-font-size));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
}

/* Button variants: Contained (default above), Outlined, Text, Flat */
body.modern-ux button.contained:not([class*="mat-"]),
body.modern-ux button.button-native.contained:not([class*="mat-"]),
body.modern-ux input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast).contained,
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast).contained,
body.modern-ux a.button.contained {
    box-shadow: 0 2px 4px var(--mux-color-black-12), 0 1px 2px var(--mux-color-black-08);
}

body.modern-ux button.outlined:not([class*="mat-"]),
body.modern-ux button.button-native.outlined:not([class*="mat-"]),
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast).outlined,
body.modern-ux a.button.outlined {
    background: transparent;
    border: 2px solid var(--brand-dark);
    color: var(--brand-dark) !important;
    box-shadow: none;
}

body.modern-ux button.outlined:not([class*="mat-"]):hover,
body.modern-ux button.button-native.outlined:not([class*="mat-"]):hover,
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast).outlined:hover,
body.modern-ux a.button.outlined:hover {
    background: var(--mux-primary-dark)14;
    border-color: var(--brand-darker);
    color: var(--brand-darker) !important;
}

body.modern-ux button.text:not([class*="mat-"]),
body.modern-ux button.button-native.text:not([class*="mat-"]),
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast).text,
body.modern-ux a.button.text {
    background: transparent;
    border: none;
    color: var(--brand-accessible) !important;
    font-weight: var(--fw-semibold);
    box-shadow: none;
}

body.modern-ux button.text:not([class*="mat-"]):hover,
body.modern-ux button.button-native.text:not([class*="mat-"]):hover,
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast).text:hover,
body.modern-ux a.button.text:hover {
    background: #0d5fa814;
    color: var(--brand-accessible) !important;
}

body.modern-ux button.flat:not([class*="mat-"]),
body.modern-ux button.button-native.flat:not([class*="mat-"]),
body.modern-ux input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast).flat,
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast).flat,
body.modern-ux a.button.flat {
    box-shadow: none;
}

body.modern-ux a.button.flat {
    background: transparent !important;
    border: none !important;
    color: var(--brand-accessible) !important;
    font-weight: var(--fw-semibold);
}

body.modern-ux a.button.flat:hover {
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

/* MUI-like touch ripple (CSS-only ::after; <input> has no pseudo-elements so no ripple there) */
body.modern-ux button:not([class*="mat-"])::after,
body.modern-ux button.button-native:not([class*="mat-"])::after,
body.modern-ux .ds-btn::after,
body.modern-ux a.button::after,
body.modern-ux a.button.action::after,
body.modern-ux a.action.button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200%;
    height: 200%;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

body.modern-ux button:not([class*="mat-"]):active::after,
body.modern-ux button.button-native:not([class*="mat-"]):active::after,
body.modern-ux .ds-btn:active::after,
body.modern-ux a.button:active::after,
body.modern-ux a.button.action:active::after,
body.modern-ux a.action.button:active::after {
    animation: mux-touch-ripple 0.55s ease-out forwards;
}

/* Med button focus overlay lives in shadow DOM. Use exposed parts when available. */
body.modern-ux .home-page-content .subject-listing-actions med-button::part(focus-overlay),
body.modern-ux .home-page-content .data-listing-actions med-button::part(focus-overlay),
body.modern-ux .home-page-content .query-listing-actions med-button::part(focus-overlay),
body.modern-ux .home-page-content .approval-listing-actions med-button::part(focus-overlay),
body.modern-ux .home-page-content .subject-listing-actions med-button::part(button-focus-overlay),
body.modern-ux .home-page-content .data-listing-actions med-button::part(button-focus-overlay),
body.modern-ux .home-page-content .query-listing-actions med-button::part(button-focus-overlay),
body.modern-ux .home-page-content .approval-listing-actions med-button::part(button-focus-overlay) {
    background: transparent !important;
    opacity: 0 !important;
}

/* Angular Material buttons (mat-button, mat-raised-button, mat-icon-button, mat-menu-item, etc.):
   Excluded above via :not([class*="mat-"]) so Material's own styles apply. */

/* CDK flex centering — keep dialogs viewport-centered if host/page CSS perturbs defaults */
body.modern-ux .cdk-overlay-container .cdk-global-overlay-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* mat-dialog-container — Phase E shell for all Angular Material dialogs in CDK overlay (Form Permissions,
   Variable Permissions, and similar). Radius matches .cdk-overlay-pane:has(.mat-dialog-container); shadow lives
   on the pane so corners stay round. Clips inner overflow; avoids horizontal bar on wide layouts. */
body.modern-ux .cdk-overlay-container .mat-dialog-container {
    overflow-x: hidden;
    overflow-y: hidden;
    box-sizing: border-box;
    min-height: 0;
    border-radius: var(--mux-ds-dialog-radius) !important;
    /* Elevation on .cdk-overlay-pane:has(.mat-dialog-container) so radius + overflow match (no square “lip”). */
    box-shadow: none !important;
    background: var(--bg-paper) !important;
    border: none !important;
}

body.modern-ux.dark .cdk-overlay-container .mat-dialog-container,
body.modern-ux.medrio.dark .cdk-overlay-container .mat-dialog-container {
    background: var(--mux-color-bg-paper) !important;
}

/* Negative horizontal margin + padding on mat-dialog-content breaks alignment when a header <table> sits
   outside mat-dialog-content (split grid). Safe to normalize for all overlay dialogs — container padding remains. */
body.modern-ux .cdk-overlay-container .mat-dialog-container mat-dialog-content.mat-dialog-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Native permission / list tables inside dialogs (role-form-list-dialog, variable-permission-list-dialog med-list, etc.) */
body.modern-ux .cdk-overlay-container .mat-dialog-container table {
    border-collapse: collapse;
    box-sizing: border-box;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container table th,
body.modern-ux .cdk-overlay-container .mat-dialog-container table td {
    vertical-align: middle !important;
    box-sizing: border-box;
}

/* Reserve scrollbar width so thead + scrollable tbody columns stay aligned (variable-permission-list-dialog). */
body.modern-ux .cdk-overlay-container .mat-dialog-container .variables-height {
    scrollbar-gutter: stable;
}

body.modern-ux .cdk-overlay-container .cdk-overlay-pane:has(.mat-dialog-container) {
    border-radius: var(--mux-ds-dialog-radius) !important;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100% !important;
    box-shadow: var(--mux-ds-dialog-shadow) !important;
}

body.modern-ux.dark .cdk-overlay-container .cdk-overlay-pane:has(.mat-dialog-container),
body.modern-ux.medrio.dark .cdk-overlay-container .cdk-overlay-pane:has(.mat-dialog-container) {
    box-shadow: var(--mux-ds-dialog-shadow-dark) !important;
}

/* Dialog footer: Material actions live in CDK overlay — align with mux contained + outlined CTAs */
body.modern-ux .cdk-overlay-container .mat-dialog-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: var(--space-4) var(--space-6) var(--space-6) !important;
    margin: 0 !important;
    min-height: auto;
    box-sizing: border-box;
}

/*
 * download-dialog (@medrio/common job export — e.g. Roles/Permission audit log): success state uses a fixed
 * inline height on mat-dialog-content → excess whitespace; title vs .tac body feel mismatched. Scoped polish only.
 */
body.modern-ux .cdk-overlay-container download-dialog h2.mat-dialog-title {
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-1125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-relaxed);
    margin: 0 0 var(--space-4) 0 !important;
    color: var(--foreground);
}

body.modern-ux.dark .cdk-overlay-container download-dialog h2.mat-dialog-title,
body.modern-ux.medrio.dark .cdk-overlay-container download-dialog h2.mat-dialog-title {
    color: var(--mux-color-text);
}

body.modern-ux .cdk-overlay-container download-dialog mat-dialog-content.mat-dialog-content:has(.success-msg) {
    height: auto !important;
    min-height: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--space-2) !important;
    padding-bottom: var(--space-4) !important;
}

body.modern-ux .cdk-overlay-container download-dialog .success-msg {
    width: 100%;
}

body.modern-ux .cdk-overlay-container download-dialog .success-msg p.mb-10 {
    margin-bottom: 0 !important;
}

body.modern-ux .cdk-overlay-container download-dialog mc-success-message {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium);
    line-height: var(--lh-relaxed);
    color: var(--color-success-dark);
}

body.modern-ux .cdk-overlay-container download-dialog mc-success-message mat-icon.material-icons {
    font-size: var(--mux-fs-20) !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    color: var(--color-success) !important;
}

body.modern-ux.dark .cdk-overlay-container download-dialog mc-success-message,
body.modern-ux.medrio.dark .cdk-overlay-container download-dialog mc-success-message {
    color: var(--mux-success-light);
}

body.modern-ux.dark .cdk-overlay-container download-dialog mc-success-message mat-icon.material-icons,
body.modern-ux.medrio.dark .cdk-overlay-container download-dialog mc-success-message mat-icon.material-icons {
    color: var(--mux-success-light) !important;
}

body.modern-ux .cdk-overlay-container download-dialog mat-dialog-actions.mat-dialog-actions {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions .mat-button-focus-overlay {
    background: transparent;
}

/* Primary raised (e.g. Apply) */
body.modern-ux .cdk-overlay-container .mat-dialog-actions button.mat-raised-button.mat-primary,
body.modern-ux .cdk-overlay-container .mat-dialog-actions a.mat-raised-button.mat-primary {
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-font-size) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--mux-line-height) !important;
    color: var(--mux-primary-contrast) !important;
    background: linear-gradient(180deg, var(--mux-color-accent) 0%, var(--mux-color-accent-hover) 100%) !important;
    border: 1px solid var(--mux-color-accent-hover) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--mux-padding-y) var(--mux-padding-x) !important;
    min-height: var(--mux-touch-min) !important;
    min-width: 5rem;
    box-shadow: var(--mux-shadow) !important;
    transition: var(--mux-transition) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions button.mat-raised-button.mat-primary:hover:not(:disabled),
body.modern-ux .cdk-overlay-container .mat-dialog-actions a.mat-raised-button.mat-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--mux-color-accent-hover) 0%, var(--mux-color-accent-active) 100%) !important;
    border-color: var(--mux-color-accent-active) !important;
    box-shadow: var(--mux-shadow-hover) !important;
    transform: none;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions button.mat-raised-button.mat-primary:active:not(:disabled),
body.modern-ux .cdk-overlay-container .mat-dialog-actions a.mat-raised-button.mat-primary:active:not(:disabled) {
    transform: none;
    box-shadow: var(--mux-shadow-sm) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions button.mat-raised-button.mat-primary:focus-visible,
body.modern-ux .cdk-overlay-container .mat-dialog-actions a.mat-raised-button.mat-primary:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring), var(--mux-shadow) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions button.mat-raised-button.mat-primary:disabled,
body.modern-ux .cdk-overlay-container .mat-dialog-actions a.mat-raised-button.mat-primary.mat-button-disabled {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    opacity: 0.85;
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Flat/text primary in dialog footers — outlined CTA; omit mat-dialog-close (dismiss = .ds-btn-text below) */
body.modern-ux .cdk-overlay-container .mat-dialog-actions button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):not([mat-dialog-close]),
body.modern-ux .cdk-overlay-container .mat-dialog-actions a.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button) {
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-font-size) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--mux-line-height) !important;
    color: var(--brand-dark) !important;
    background: transparent !important;
    border: 2px solid var(--brand-dark) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--mux-padding-y) var(--mux-padding-x) !important;
    min-height: var(--mux-touch-min) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):not([mat-dialog-close]):hover:not(:disabled),
body.modern-ux .cdk-overlay-container .mat-dialog-actions a.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):hover:not(:disabled) {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
    transform: none;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions button.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):not([mat-dialog-close]):focus-visible,
body.modern-ux .cdk-overlay-container .mat-dialog-actions a.mat-button.mat-primary:not(.mat-raised-button):not(.mat-icon-button):focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring) !important;
}

/*
 * mat-dialog-close (Cancel / dismiss) — body.modern-ux .ds-btn.ds-btn-text, a.ds-btn.ds-btn-text parity.
 * .mat-dialog-container raises specificity; must follow outlined dialog rule above and exclude [mat-dialog-close] there.
 */
body.modern-ux .cdk-overlay-container .mat-dialog-container .mat-dialog-actions button.mat-button[mat-dialog-close]:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px) !important;
    box-sizing: border-box !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4, 16px) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    border-radius: var(--radius-md, 8px) !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    background-color: transparent !important;
    background: transparent !important;
    color: var(--brand-accessible) !important;
    box-shadow: none !important;
    transform: none !important;
    min-width: auto !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container .mat-dialog-actions button.mat-button[mat-dialog-close]:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-snug) !important;
    color: inherit !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container .mat-dialog-actions button.mat-button[mat-dialog-close]:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) {
    background-color: #0d5fa814 !important;
    background: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container .mat-dialog-actions button.mat-button[mat-dialog-close]:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):hover:not(:disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container .mat-dialog-actions button.mat-button[mat-dialog-close]:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    background: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container .mat-dialog-actions button.mat-button[mat-dialog-close]:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container .mat-dialog-actions button.mat-button[mat-dialog-close]:not(.mat-raised-button):not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab):disabled {
    color: var(--muted-foreground) !important;
    background: transparent !important;
    background-color: transparent !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* med-button secondary (flat / basic / text — e.g. Logout, Cancel): outlined CTA, same as mat-button primary text */
body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button:not(.med-raised-button.med-primary)::part(button) {
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-font-size) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--mux-line-height) !important;
    color: var(--brand-dark) !important;
    background: transparent !important;
    border: 2px solid var(--brand-dark) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--mux-padding-y) var(--mux-padding-x) !important;
    min-height: var(--mux-touch-min) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button:not(.med-raised-button.med-primary)::part(button):hover:not(:disabled) {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button:not(.med-raised-button.med-primary)::part(button):focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring) !important;
}

/* med-button primary raised (e.g. Unlock) — matches mat-raised-button.mat-primary above */
body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button.med-raised-button.med-primary::part(button) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-font-size) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--mux-line-height) !important;
    color: var(--mux-primary-contrast) !important;
    background: linear-gradient(180deg, var(--mux-color-accent) 0%, var(--mux-color-accent-hover) 100%) !important;
    border: 1px solid var(--mux-color-accent-hover) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--mux-padding-y) var(--mux-padding-x) !important;
    min-height: var(--mux-touch-min) !important;
    min-width: 5rem;
    box-shadow: var(--mux-shadow) !important;
    transition: var(--mux-transition) !important;
    overflow: hidden;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button.med-raised-button.med-primary::part(button):hover:not(:disabled) {
    background: linear-gradient(180deg, var(--mux-color-accent-hover) 0%, var(--mux-color-accent-active) 100%) !important;
    border-color: var(--mux-color-accent-active) !important;
    box-shadow: var(--mux-shadow-hover) !important;
    transform: none;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button.med-raised-button.med-primary::part(button):active:not(:disabled) {
    transform: none;
    box-shadow: var(--mux-shadow-sm) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button.med-raised-button.med-primary::part(button):focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring), var(--mux-shadow) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button.med-raised-button.med-primary.med-disabled::part(button),
body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button.med-raised-button.med-primary::part(button):disabled {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    opacity: 0.85;
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button::part(focus-overlay),
body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button::part(button-focus-overlay) {
    background: transparent !important;
    opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {

    body.modern-ux .cdk-overlay-container .mat-dialog-actions button.mat-raised-button.mat-primary:hover:not(:disabled),
    body.modern-ux .cdk-overlay-container .mat-dialog-actions a.mat-raised-button.mat-primary:hover:not(:disabled) {
        transform: none;
    }

    body.modern-ux .cdk-overlay-container .mat-dialog-actions button.mat-raised-button.mat-primary:active:not(:disabled),
    body.modern-ux .cdk-overlay-container .mat-dialog-actions a.mat-raised-button.mat-primary:active:not(:disabled) {
        transform: none;
    }

    body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button.med-raised-button.med-primary::part(button):hover:not(:disabled),
    body.modern-ux .cdk-overlay-container .mat-dialog-actions med-button.med-raised-button.med-primary::part(button):active:not(:disabled) {
        transform: none;
    }
}

/* mc-discard-changes-dialog — one-to-one with .ds-dialog (header / body / footer) + spec Discard = black on brand */
body.modern-ux .cdk-overlay-container .mat-dialog-container:has(mc-discard-changes-dialog) {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    overflow-y: visible !important;
}

/* Headline: .ds-dialog-title + extra top inset like DS “Dialog headline” mock (--space-10) */
body.modern-ux .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-title {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-15);
    color: var(--gray-900);
    margin: 0;
    font-weight: var(--fw-normal);
    line-height: 2rem;
    color: var(--gray-900);
    margin: 0;
    padding: var(--space-1) var(--space-2) var(--space-2) 0;
    box-sizing: border-box;
}

body.modern-ux.dark .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-title,
body.modern-ux.medrio.dark .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-title {
    color: var(--mux-color-text);
}

/* Body: .ds-dialog-body typography + bottom padding before inset rule */
body.modern-ux .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-content {
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    line-height: 1.25rem;
    color: var(--gray-900);
    padding: 0 var(--space-6) var(--space-6) !important;
    margin: 0 !important;
    box-sizing: border-box;
    max-height: none !important;
    height: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
}

body.modern-ux.dark .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-content,
body.modern-ux.medrio.dark .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-content {
    color: var(--mux-color-text-muted, var(--muted-foreground));
}

/* Footer: .ds-dialog-footer rhythm; horizontal inset so rule lines up with title/body gutters */
body.modern-ux .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions {
    gap: var(--space-6) !important;
    justify-content: flex-end !important;
    padding: 0 0 0 0 !important;
    padding-top: var(--space-4) !important;
    box-sizing: border-box;
}

body.modern-ux .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions .spacer,
body.modern-ux .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions .mr-5 {
    display: none !important;
}

/* Cancel: global mat-dialog-close + brand text (spec ~ #007BFF / DS accessible blue) — already fw-semibold */

/* Discard — .ds-btn-primary fill + spec black label (light); other mat-dialogs keep mux-primary-contrast above */
body.modern-ux:not(.dark):not(.medrio.dark) .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4, 16px) !important;
    border-radius: var(--radius-md, 8px) !important;
    border: 1px solid var(--brand-dark, var(--mux-primary-dark)) !important;
    box-sizing: border-box !important;
    color: #000000 !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    min-width: 5rem;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
    transform: none !important;
}

body.modern-ux:not(.dark):not(.medrio.dark) .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-snug) !important;
    color: inherit !important;
}

body.modern-ux:not(.dark):not(.medrio.dark) .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]) .mat-button-focus-overlay {
    background: transparent !important;
}

body.modern-ux:not(.dark):not(.medrio.dark) .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]):hover:not(:disabled):not(.mat-button-disabled) {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    background-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: #000000 !important;
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
}

body.modern-ux:not(.dark):not(.medrio.dark) .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]):hover:not(:disabled):not(.mat-button-disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux:not(.dark):not(.medrio.dark) .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]):active:not(:disabled):not(.mat-button-disabled) {
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    background: var(--brand-darker, var(--mux-primary-darker)) !important;
    background-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: #000000 !important;
}

body.modern-ux:not(.dark):not(.medrio.dark) .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]):focus-visible {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

body.modern-ux:not(.dark):not(.medrio.dark) .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]):disabled,
body.modern-ux:not(.dark):not(.medrio.dark) .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary.mat-button-disabled:not([mat-dialog-close]) {
    background: var(--muted) !important;
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Dark theme: keep high-contrast label on filled primary */
body.modern-ux.dark .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]),
body.modern-ux.medrio.dark .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4, 16px) !important;
    border-radius: var(--radius-md, 8px) !important;
    border: 1px solid var(--brand-dark, var(--mux-primary-dark)) !important;
    box-sizing: border-box !important;
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    min-width: 5rem;
    transform: none !important;
}

body.modern-ux.dark .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]) .mat-button-wrapper,
body.modern-ux.medrio.dark .cdk-overlay-container mc-discard-changes-dialog .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]) .mat-button-wrapper {
    color: inherit !important;
}

/* Other mat-dialog footers: .ds-btn.ds-btn-primary parity (exclude mc-discard — black label rules above) */
body.modern-ux .cdk-overlay-container .mat-dialog-container:not(:has(mc-discard-changes-dialog)) .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2, 8px);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4, 16px) !important;
    border-radius: var(--radius-md, 8px) !important;
    border: 1px solid var(--brand-dark, var(--mux-primary-dark)) !important;
    box-sizing: border-box !important;
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    min-width: 5rem;
    transition: var(--transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1)) !important;
    transform: none !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container:not(:has(mc-discard-changes-dialog)) .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]) .mat-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    line-height: var(--lh-snug) !important;
    color: inherit !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container:not(:has(mc-discard-changes-dialog)) .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]) .mat-button-focus-overlay {
    background: transparent !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container:not(:has(mc-discard-changes-dialog)) .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]):hover:not(:disabled):not(.mat-button-disabled) {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    background-color: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container:not(:has(mc-discard-changes-dialog)) .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]):hover:not(:disabled):not(.mat-button-disabled) .mat-button-focus-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container:not(:has(mc-discard-changes-dialog)) .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]):active:not(:disabled):not(.mat-button-disabled) {
    transform: none !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    background: var(--brand-darker, var(--mux-primary-darker)) !important;
    background-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container:not(:has(mc-discard-changes-dialog)) .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]):focus-visible {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

body.modern-ux .cdk-overlay-container .mat-dialog-container:not(:has(mc-discard-changes-dialog)) .mat-dialog-actions button.mat-raised-button.mat-primary:not([mat-dialog-close]):disabled,
body.modern-ux .cdk-overlay-container .mat-dialog-container:not(:has(mc-discard-changes-dialog)) .mat-dialog-actions button.mat-raised-button.mat-primary.mat-button-disabled:not([mat-dialog-close]) {
    background: var(--muted) !important;
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.85 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* mat-icon-button in CDK overlays (permission dialogs: column “select all”, etc.) — compact, DS-aligned */
body.modern-ux .cdk-overlay-container button.mat-icon-button.mat-button-base {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: 0;
    line-height: 2.5rem;
    border-radius: var(--mux-radius);
    color: var(--mux-color-text);
    transition: var(--mux-transition);
}

body.modern-ux .cdk-overlay-container button.mat-icon-button.mat-button-base .mat-button-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

body.modern-ux .cdk-overlay-container button.mat-icon-button.mat-button-base .mat-icon {
    font-size: var(--mux-fs-rem-125) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    line-height: 1.25rem !important;
}

body.modern-ux .cdk-overlay-container button.mat-icon-button.mat-button-base:hover:not(:disabled) {
    background-color: var(--muted);
    color: var(--mux-color-text);
}

body.modern-ux .cdk-overlay-container button.mat-icon-button.mat-button-base .mat-button-focus-overlay {
    background: transparent;
}

body.modern-ux .cdk-overlay-container button.mat-icon-button.mat-button-base:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .cdk-overlay-container button.mat-icon-button.mat-button-base:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Anchor as button: remove link styling (layout matches .ds-btn) */
body.modern-ux a.button,
body.modern-ux a.button.action,
body.modern-ux a.action.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-medium);
    text-decoration: none;
    text-underline-offset: unset;
    text-decoration-thickness: unset;
}

body.modern-ux button:not([class*="mat-"]):hover,
body.modern-ux button.button-native:not([class*="mat-"]):hover,
body.modern-ux input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):hover,
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(.browse-button):not(.ruButton):hover {
    background: linear-gradient(180deg, var(--mux-color-accent-hover) 0%, var(--mux-color-accent-active) 100%);
    border-color: var(--mux-color-accent-active);
    transform: translateY(-1px);
    box-shadow: var(--mux-shadow-hover);
    color: var(--mux-primary-contrast);
}

/* .ds-btn-primary — state parity: .ds-btn.ds-btn-primary + same a.button / a.button.action selectors throughout.
   Light: default --brand/--brand-dark | hover --brand-dark/--brand-darker | active --brand-darker
   Focus: --mux-focus-ring + --shadow-sm | Disabled: --muted/--border/--muted-foreground
   Dark: body.modern-ux.medrio.dark overrides (gradient) below. */
/* .ds-btn-primary hover — CSS-Only-UI-2026: darker fill, same elevation (no lift) */
body.modern-ux .ds-btn.ds-btn-primary:hover:not(:disabled),
body.modern-ux a.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):hover,
body.modern-ux a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover {
    background: var(--brand-dark, var(--mux-primary-dark));
    border-color: var(--brand-darker, var(--mux-primary-darker));
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux .ds-btn.ds-btn-secondary:hover:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-secondary:hover:not(:disabled) {
    background: var(--gray-600);
    border-color: var(--gray-600);
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    color: #fff !important;
}

/* Filled semantic + outlined — hover (must follow generic button:hover; matches Figma bundle) */
body.modern-ux .ds-btn.ds-btn-error:hover:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-error:hover:not(:disabled) {
    background: var(--color-error-dark);
    border-color: var(--color-error-dark);
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    color: #fff !important;
}

body.modern-ux .ds-btn.ds-btn-success:hover:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-success:hover:not(:disabled) {
    background: var(--color-success-dark);
    border-color: var(--color-success-dark);
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    color: #fff !important;
}

body.modern-ux .ds-btn.ds-btn-warning:hover:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-warning:hover:not(:disabled) {
    background: var(--color-warning-dark);
    border-color: var(--color-warning-dark);
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    color: #000 !important;
}

body.modern-ux .ds-btn.ds-btn-outlined:hover:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-outlined:hover:not(:disabled) {
    border-color: var(--brand-darker);
    background: var(--mux-primary-dark)14 !important;
    background-color: var(--mux-primary-dark)14 !important;
    color: var(--brand-darker) !important;
    transform: none;
    box-shadow: none;
}

body.modern-ux .ds-btn.ds-btn-outlined-secondary:hover:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-outlined-secondary:hover:not(:disabled) {
    border-color: var(--gray-500);
    background: #6b728014 !important;
    background-color: #6b728014 !important;
    color: var(--text-primary) !important;
    transform: none;
    box-shadow: none;
}

body.modern-ux .ds-btn.ds-btn-outlined-error:hover:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-outlined-error:hover:not(:disabled) {
    border-color: var(--color-error-dark);
    background: #dc262614 !important;
    background-color: #dc262614 !important;
    color: var(--color-error-dark) !important;
    transform: none;
    box-shadow: none;
}

body.modern-ux button:not([class*="mat-"]):active,
body.modern-ux button.button-native:not([class*="mat-"]):active,
body.modern-ux input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):active,
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(.browse-button):not(.ruButton):active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--mux-shadow-sm);
    color: var(--mux-primary-contrast);
}

body.modern-ux .ds-btn.ds-btn-primary:active:not(:disabled),
body.modern-ux a.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):active,
body.modern-ux a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active {
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    background: var(--brand-darker, var(--mux-primary-darker));
    border-color: var(--brand-darker, var(--mux-primary-darker));
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux .ds-btn.ds-btn-secondary:active:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-secondary:active:not(:disabled) {
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    background: var(--gray-700);
    border-color: var(--gray-700);
    color: #fff !important;
}

body.modern-ux .ds-btn.ds-btn-error:active:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-error:active:not(:disabled) {
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    background: #991b1b;
    border-color: #991b1b;
    color: #fff !important;
}

body.modern-ux .ds-btn.ds-btn-success:active:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-success:active:not(:disabled) {
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    background: #065f46;
    border-color: #065f46;
    color: #fff !important;
}

body.modern-ux .ds-btn.ds-btn-warning:active:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-warning:active:not(:disabled) {
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    background: #92400e;
    border-color: #92400e;
    color: #000 !important;
}

body.modern-ux .ds-btn.ds-btn-outlined:active:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-outlined:active:not(:disabled) {
    transform: none;
    box-shadow: none;
    border-color: var(--brand-darker);
    background: var(--mux-primary-dark)24 !important;
    background-color: var(--mux-primary-dark)24 !important;
    color: var(--brand-darker) !important;
}

body.modern-ux .ds-btn.ds-btn-outlined-secondary:active:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-outlined-secondary:active:not(:disabled) {
    transform: none;
    box-shadow: none;
    border-color: var(--gray-600);
    background: #6b728024 !important;
    background-color: #6b728024 !important;
    color: var(--text-primary) !important;
}

body.modern-ux .ds-btn.ds-btn-outlined-error:active:not(:disabled),
body.modern-ux a.ds-btn.ds-btn-outlined-error:active:not(:disabled) {
    transform: none;
    box-shadow: none;
    border-color: #991b1b;
    background: #dc262628 !important;
    background-color: #dc262628 !important;
    color: #991b1b !important;
}

@media (prefers-reduced-motion: no-preference) {

    body.modern-ux button:not([class*="mat-"]):active,
    body.modern-ux button.button-native:not([class*="mat-"]):active,
    body.modern-ux input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):active,
    body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(.browse-button):not(.ruButton):active,
    body.modern-ux .ds-btn.ds-btn-primary:active:not(:disabled),
    body.modern-ux .ds-btn.ds-btn-secondary:active:not(:disabled),
    body.modern-ux .ds-btn.ds-btn-error:active:not(:disabled),
    body.modern-ux .ds-btn.ds-btn-success:active:not(:disabled),
    body.modern-ux .ds-btn.ds-btn-warning:active:not(:disabled),
    body.modern-ux .ds-btn.ds-btn-outlined:active:not(:disabled),
    body.modern-ux .ds-btn.ds-btn-outlined-secondary:active:not(:disabled),
    body.modern-ux .ds-btn.ds-btn-outlined-error:active:not(:disabled),
    body.modern-ux a.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):active,
    body.modern-ux a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active,
    body.modern-ux a.ds-btn.ds-btn-secondary:active:not(:disabled),
    body.modern-ux a.ds-btn.ds-btn-error:active:not(:disabled),
    body.modern-ux a.ds-btn.ds-btn-success:active:not(:disabled),
    body.modern-ux a.ds-btn.ds-btn-warning:active:not(:disabled),
    body.modern-ux a.ds-btn.ds-btn-outlined:active:not(:disabled),
    body.modern-ux a.ds-btn.ds-btn-outlined-secondary:active:not(:disabled),
    body.modern-ux a.ds-btn.ds-btn-outlined-error:active:not(:disabled) {
        animation: mux-button-press 0.15s ease-out;
    }
}

body.modern-ux input[type="reset"]:not(.ui-dialog *, .cdk-overlay-container *) {
    background: linear-gradient(180deg, var(--mux-color-reset-bg) 0%, var(--mux-color-reset-border) 100%);
    border-color: var(--mux-color-reset-border);
    color: #fff;
}

body.modern-ux input[type="reset"]:not(.ui-dialog *, .cdk-overlay-container *):hover {
    background: linear-gradient(180deg, var(--mux-color-reset-bg-hover) 0%, var(--mux-color-reset-border-hover) 100%);
    border-color: var(--mux-color-reset-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--mux-shadow-hover);
}

body.modern-ux input[type="reset"]:not(.ui-dialog *, .cdk-overlay-container *):active {
    transform: translateY(0);
}

/* Focus: no outline, no box-shadow ring (Figma: clean focus) */
body.modern-ux button:not([class*="mat-"]):focus,
body.modern-ux button.button-native:not([class*="mat-"]):focus,
body.modern-ux button.button-native:not([class*="mat-"]):focus-visible,
body.modern-ux input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):focus,
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(.browse-button):not(.ruButton):focus,
body.modern-ux input[type="reset"]:not(.ui-dialog *, .cdk-overlay-container *):focus,
body.modern-ux a.button:focus,
body.modern-ux a.button:focus-visible,
body.modern-ux a.button.action:focus,
body.modern-ux a.button.action:focus-visible {
    outline: none;
}

/* Phase B — DS .ds-btn + legacy primary links: one focus-visible stack (token: --ds-btn-focus-visible-shadow).
   .ds-btn-text keeps ring-only focus (see .ds-btn.ds-btn-text:focus-visible). */
body.modern-ux .ds-btn.ds-btn-primary:focus-visible,
body.modern-ux .ds-btn.ds-btn-secondary:focus-visible,
body.modern-ux a.ds-btn.ds-btn-secondary:focus-visible,
body.modern-ux .ds-btn.ds-btn-error:focus-visible,
body.modern-ux a.ds-btn.ds-btn-error:focus-visible,
body.modern-ux .ds-btn.ds-btn-success:focus-visible,
body.modern-ux a.ds-btn.ds-btn-success:focus-visible,
body.modern-ux .ds-btn.ds-btn-warning:focus-visible,
body.modern-ux a.ds-btn.ds-btn-warning:focus-visible,
body.modern-ux .ds-btn.ds-btn-outlined:focus-visible,
body.modern-ux a.ds-btn.ds-btn-outlined:focus-visible,
body.modern-ux .ds-btn.ds-btn-outlined-secondary:focus-visible,
body.modern-ux a.ds-btn.ds-btn-outlined-secondary:focus-visible,
body.modern-ux .ds-btn.ds-btn-outlined-error:focus-visible,
body.modern-ux a.ds-btn.ds-btn-outlined-error:focus-visible,
body.modern-ux a.button:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog):focus-visible,
body.modern-ux a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):focus-visible {
    outline: none;
    box-shadow: var(--ds-btn-focus-visible-shadow);
}

body.modern-ux button:not([class*="mat-"]):disabled,
body.modern-ux button.button-native:not([class*="mat-"]):disabled,
body.modern-ux input[type="submit"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):disabled,
body.modern-ux input[type="button"]:not(.ui-dialog *, .cdk-overlay-container *):not(.toast-button-icon):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(.browse-button):not(.ruButton):disabled,
body.modern-ux input[type="reset"]:not(.ui-dialog *, .cdk-overlay-container *):disabled,
body.modern-ux .ds-btn.ds-btn-primary:disabled,
body.modern-ux a.button.disabled:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):not(.close-dialog),
body.modern-ux a.button.action.disabled:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    background: var(--muted);
    border-color: var(--border);
    color: var(--muted-foreground) !important;
    cursor: not-allowed;
    opacity: 0.85;
    transform: none;
    box-shadow: none;
}

body.modern-ux .ds-btn.ds-btn-secondary:disabled,
body.modern-ux a.ds-btn.ds-btn-secondary.disabled,
body.modern-ux .ds-btn.ds-btn-error:disabled,
body.modern-ux a.ds-btn.ds-btn-error.disabled,
body.modern-ux .ds-btn.ds-btn-success:disabled,
body.modern-ux a.ds-btn.ds-btn-success.disabled,
body.modern-ux .ds-btn.ds-btn-warning:disabled,
body.modern-ux a.ds-btn.ds-btn-warning.disabled {
    background: var(--muted);
    border-color: var(--border);
    color: var(--muted-foreground) !important;
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

body.modern-ux .ds-btn.ds-btn-outlined:disabled,
body.modern-ux a.ds-btn.ds-btn-outlined.disabled,
body.modern-ux .ds-btn.ds-btn-outlined-secondary:disabled,
body.modern-ux a.ds-btn.ds-btn-outlined-secondary.disabled,
body.modern-ux .ds-btn.ds-btn-outlined-error:disabled,
body.modern-ux a.ds-btn.ds-btn-outlined-error.disabled {
    background: transparent !important;
    border-color: var(--border);
    color: var(--muted-foreground) !important;
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

/* edit_queries / edit_deploy MedrioActionButton(alinkReport): text action when LinkButton uses .button.action (IsDisplayAsButton) — after filled-primary + hover/active */
body.modern-ux a.button.action[href*="$alinkReport$_actionLink"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2);
    font-family: var(--font-family) !important;
    font-weight: var(--fw-semibold) !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--space-4) !important;
    font-size: var(--mux-fs-14) !important;
    line-height: var(--lh-none) !important;
    box-sizing: border-box !important;
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-decoration-color: transparent !important;
    text-underline-offset: unset !important;
    text-decoration-thickness: unset !important;
    transform: none !important;
}

body.modern-ux a.button.action[href*="$alinkReport$_actionLink"]:hover {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

body.modern-ux a.button.action[href*="$alinkReport$_actionLink"]:active {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

body.modern-ux a.button.action[href*="$alinkReport$_actionLink"]:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux a.button.action[href*="$alinkReport$_actionLink"]::after {
    display: none !important;
}

body.modern-ux a.button.action[href*="$alinkReport$_actionLink"] *:not(.material-icons):not([class*="material-icons"]) {
    font-size: inherit !important;
}

/* EditQueries.master (edit_queries*.aspx): horizontal tabs — Basic Tabs + .ds-tab-list / .ds-tab
 * (CSS-Only-UI-2026: https://onion-steam-49836257.figma.site/ — underline indicator, pale active fill)
 * Nav shell: no gray “card” frame — tabs + rule sit on page background (UX: match Form Rules / DS Basic Tabs). */
body.modern-ux nav.tab-set:has(> ul#editQueriesNav) {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: var(--space-5) !important;
    box-sizing: border-box;
}

body.modern-ux.dark nav.tab-set:has(> ul#editQueriesNav) {
    border: none !important;
    background: transparent !important;
}

body.modern-ux nav.tab-set ul#editQueriesNav {
    display: flex;
    align-items: flex-end;
    gap: var(--space-1);
    /* Basic Tabs: same 2px rule as .ds-tab-list */
    border-bottom: 2px solid var(--border-color) !important;
    overflow-x: auto;
    scrollbar-width: thin;
    list-style: none;
    margin: 0;
    padding: 0 0 2px;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
}

body.modern-ux nav.tab-set ul#editQueriesNav > li {
    float: none;
    margin: 0;
    list-style: none;
    white-space: nowrap;
}

/* Drop legacy “card” tab chrome from edit_queries.css; indicator lives on the link */
/* body id is set on <body> in edit_queries*.aspx — use body#id, not body #id */
body.modern-ux#editQueries #editQueriesNav_EditChecks,
body.modern-ux#editQueriesCustom #editQueriesNav_CustomQueries,
body.modern-ux#editQueriesAutomatic #editQueriesNav_AutomaticQueries {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-color: transparent !important;
}

/* .ds-tab (Basic Tabs — same as .ds-tab: 2px inactive / 3px selected) */
body.modern-ux nav.tab-set ul#editQueriesNav > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-800);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
    box-sizing: border-box;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

@media (hover: hover) {
    /* .ds-tab:hover — inactive tabs only (body id = selected panel) */
    body.modern-ux#editQueries nav.tab-set ul#editQueriesNav > li:not(#editQueriesNav_EditChecks) > a:hover,
    body.modern-ux#editQueriesCustom nav.tab-set ul#editQueriesNav > li:not(#editQueriesNav_CustomQueries) > a:hover,
    body.modern-ux#editQueriesAutomatic nav.tab-set ul#editQueriesNav > li:not(#editQueriesNav_AutomaticQueries) > a:hover {
        color: var(--mux-primary-darker);
        background-color: var(--mux-primary-darker)0a;
    }
}

/* .ds-tab:focus-visible */
body.modern-ux nav.tab-set ul#editQueriesNav > li > a:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -3px;
    z-index: 1;
}

/* .ds-tab[aria-selected=true] — body id from edit_queries*.aspx replaces aria-selected */
body.modern-ux#editQueries #editQueriesNav_EditChecks > a,
body.modern-ux#editQueriesCustom #editQueriesNav_CustomQueries > a,
body.modern-ux#editQueriesAutomatic #editQueriesNav_AutomaticQueries > a {
    color: #0d5fa8;
    font-weight: 600;
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--mux-primary-darker) !important;
    background-color: var(--mux-primary-darker)26;
}

body.modern-ux.dark nav.tab-set ul#editQueriesNav {
    border-bottom: 2px solid var(--mux-color-divider) !important;
}

/* .ds-dark .ds-tab */
body.modern-ux.dark nav.tab-set ul#editQueriesNav > li > a {
    color: #9ca3af;
}

@media (hover: hover) {
    /* .ds-dark .ds-tab:hover — inactive tabs only */
    body.modern-ux.dark#editQueries nav.tab-set ul#editQueriesNav > li:not(#editQueriesNav_EditChecks) > a:hover,
    body.modern-ux.dark#editQueriesCustom nav.tab-set ul#editQueriesNav > li:not(#editQueriesNav_CustomQueries) > a:hover,
    body.modern-ux.dark#editQueriesAutomatic nav.tab-set ul#editQueriesNav > li:not(#editQueriesNav_AutomaticQueries) > a:hover {
        color: var(--gray-200);
        background-color: #ffffff0d;
    }
}

/* .ds-dark .ds-tab[aria-selected=true] */
body.modern-ux.dark#editQueries #editQueriesNav_EditChecks > a,
body.modern-ux.dark#editQueriesCustom #editQueriesNav_CustomQueries > a,
body.modern-ux.dark#editQueriesAutomatic #editQueriesNav_AutomaticQueries > a {
    color: var(--mux-primary-light);
    font-weight: 600;
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--mux-primary-light) !important;
    background-color: color-mix(in srgb, var(--mux-primary-light) 15%, transparent);
}

/* edit_queries.aspx: top missing-data grid headers — .ds-label parity */
body.modern-ux #rages-top-panel .edit-queries-missing-grid > tbody > tr:first-child > td > label {
    display: inline-block;
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    margin: 0 var(--space-1) 0 0;
    line-height: var(--lh-normal);
}

body.modern-ux #rages-top-panel .edit-queries-missing-grid > tbody > tr:first-child > td > label strong {
    font-weight: inherit;
}

body.modern-ux #rages-top-panel .edit-queries-missing-grid > tbody > tr:first-child > td > med-icon {
    color: var(--text-secondary);
}

/* edit_queries.aspx: keep Missing Message / Designation controls bottom-aligned */
body.modern-ux #rages-top-panel .edit-queries-missing-grid > tbody > tr:nth-child(2) > td.edit-queries-control-cell {
    
    padding-bottom: 0 !important;
}

body.modern-ux #rages-top-panel .edit-queries-missing-grid > tbody > tr:nth-child(2) > td.edit-queries-control-cell > med-form-field.edit-queries-missing-data-field {
    display: block;
    margin: 0 !important;
}

body.modern-ux #rages-top-panel .edit-queries-missing-grid > tbody > tr:nth-child(2) > td.edit-queries-control-cell > med-form-field.edit-queries-missing-data-field .med-form-field-wrapper {
    min-height: 0;
    display: flex;
    align-items: stretch;
}

body.modern-ux #rages-top-panel .edit-queries-missing-grid > tbody > tr:nth-child(2) > td.edit-queries-control-cell > med-form-field.edit-queries-missing-data-field .med-form-field-flex,
body.modern-ux #rages-top-panel .edit-queries-missing-grid > tbody > tr:nth-child(2) > td.edit-queries-control-cell > med-form-field.edit-queries-missing-data-field .med-form-field-infix {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux #rages-top-panel .edit-queries-missing-grid > tbody > tr:nth-child(2) > td.edit-queries-control-cell > med-form-field.edit-queries-missing-data-field med-input:has(textarea.native-input) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Float label to top — centered label in a tall textarea host looked broken next to placeholder */
body.modern-ux #rages-top-panel .edit-queries-missing-grid med-form-field.edit-queries-missing-data-field med-input:has(textarea.native-input) med-label,
body.modern-ux #rages-top-panel .edit-queries-missing-grid med-form-field.edit-queries-missing-data-field .sc-med-form-field-s > med-input:has(textarea.native-input) med-label {
    top: var(--mux-field-control-padding-y);
    transform: none;
}

/* edit_queries.aspx: remove select infix top offset so input/select baselines align */
body.modern-ux #rages-top-panel .edit-queries-missing-grid .med-form-field-select.sc-med-form-field-h .med-form-field-infix.sc-med-form-field {
    top: 0 !important;
}

/* -------------------------------------------------------------------------
   Fieldset & legend
   ------------------------------------------------------------------------- */
body.modern-ux fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1rem 0;
    min-width: 0;
    background: var(--accent);
    box-shadow: var(--mux-shadow-sm);
    transition: box-shadow 0.2s ease;
    overflow: auto;
}

body.modern-ux fieldset:hover {
    box-shadow: var(--mux-shadow);
}

body.modern-ux legend {
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-semibold);
    color: var(--foreground);
    padding: 0 0.5rem;
    margin-left: -0.25rem;
}

/* -------------------------------------------------------------------------
   Build / edit — PendingChangesReportHistory.aspx (PCR history grid + paging)
   ------------------------------------------------------------------------- */
body.modern-ux fieldset:has(table.pending-changes-history) > div:first-of-type {
    margin-bottom: 1rem;
}

body.modern-ux fieldset:has(table.pending-changes-history) > div:first-of-type span,
body.modern-ux fieldset:has(table.pending-changes-history) > div:first-of-type label {
    font-size: var(--mux-fs-rem-9375);
    line-height: var(--mux-line-height);
    color: var(--mux-color-text-muted);
}

body.modern-ux table.pending-changes-history.mc-table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--mux-color-border);
    border-radius: var(--mux-radius);
    overflow: hidden;
    background: var(--mux-color-bg);
    font-family: var(--mux-font-family);
    font-size: var(--mux-font-size);
    line-height: var(--mux-line-height);
    box-shadow: var(--mux-shadow-sm);
    margin: 0 0 0.5rem 0;
}

body.modern-ux table.pending-changes-history tbody tr:first-child th {
    background: var(--mux-color-bg-hover);
    color: var(--mux-color-text);
    font-weight: var(--fw-semibold);
    text-align: center;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--mux-color-border);
    vertical-align: middle;
}

body.modern-ux table.pending-changes-history tbody tr:not(:first-child) td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--mux-color-border);
    vertical-align: middle;
    color: var(--mux-color-text);
    text-align: center;
}

body.modern-ux table.pending-changes-history tbody tr:not(:first-child) td:first-child {
    text-align: left;
}

body.modern-ux table.pending-changes-history tbody tr:last-child:not(:first-child) td {
    border-bottom: none;
}

body.modern-ux table.pending-changes-history[table-striped] tbody tr:not(:first-child):nth-child(odd) {
    background: var(--mux-color-bg);
}

body.modern-ux table.pending-changes-history[table-striped] tbody tr:not(:first-child):nth-child(even) {
    background: var(--mux-color-bg-hover);
}

body.modern-ux table.pending-changes-history a {
    color: var(--mux-color-link);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: var(--mux-link-underline-offset, 0.2em);
}

body.modern-ux table.pending-changes-history a:hover {
    color: var(--mux-color-link-hover);
}

body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mux-color-border);
}

body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing ul.paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing ul.paging li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: var(--lh-snug);
}

/*
 * Paging arrows: sprite-16-by-16-button-tab-icons.svg (142×216) with 16×16 cells.
 * Match field control height (--mux-paging-icon-size) by scaling the whole background + positions (never use background: shorthand).
 */
body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing a.icon[class*="paging-"] {
    display: inline-block;
    width: var(--mux-paging-icon-size);
    height: var(--mux-paging-icon-size);
    min-width: var(--mux-paging-icon-size);
    min-height: var(--mux-paging-icon-size);
    vertical-align: middle;
    box-sizing: border-box;
    border: none !important;
    background-color: transparent !important;
    border-radius: calc(var(--mux-radius) - 2px);
    background-repeat: no-repeat;
    /* Intrinsic sprite 142×216; scale so one 16px cell becomes var(--mux-paging-icon-size) */
    background-size: calc(142px * var(--mux-paging-icon-size) / 16px) calc(216px * var(--mux-paging-icon-size) / 16px);
}

body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing a.icon.paging-first {
    background-position: 0 calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing a.icon.paging-previous {
    background-position: calc(-1 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing a.icon.paging-next {
    background-position: calc(-2 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing a.icon.paging-last {
    background-position: calc(-3 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing input.paging-pagenum {
    text-align: center;
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    box-sizing: border-box;
}

body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing select.paging-dropdown {
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    margin-left: 0.35rem;
    padding: var(--mux-field-control-padding-y) 1.75rem var(--mux-field-control-padding-y) var(--mux-field-control-padding-x);
    line-height: var(--mux-line-height);
    vertical-align: middle;
}

body.modern-ux fieldset:has(table.pending-changes-history) .divTopPagingQueryListing .ar.float-right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* -------------------------------------------------------------------------
   BulkUpload.aspx — toolbar (search / Show radios / Upload / Archive) + grid paging
   Legacy BulkUpload.css uses .div-mapping-options { display: inline } and .right { float };
   flex + inline-flex restores a single baseline; radios use compact labels so row height matches inputs.
   ------------------------------------------------------------------------- */

/* Grid headers: sort links (classless <a>) get display:inline-flex from the global rule;
   the non-sortable "Archive" <span> stays display:inline — mismatched baseline.
   Give th cells vertical-align:middle and promote the span to inline-flex so
   all header cells share the same formatting context and height. */
body.modern-ux table#gvBulkUpload th[scope="col"] {
    vertical-align: middle;
}

body.modern-ux table#gvBulkUpload th[scope="col"] > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.modern-ux table#gvBulkUpload td {
    vertical-align: middle;
    text-align: center;
}
body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) > div:first-of-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    row-gap: 0.75rem;
    margin-bottom: 0.35rem;
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .div-mapping-options {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    padding-bottom: 0;
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .div-mapping-options.right {
    float: none;
    margin-left: auto;
}

/* Match global radio label touch targets to this row’s control height */
body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) [id$="dvShowOptions"] label:has(input[type="radio"]) {
    min-height: var(--mux-height);
    padding: 0 0.45rem 0 0;
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) [id$="dvShowOptions"] {
    font-size: var(--mux-fs-rem-9375);
    line-height: var(--mux-line-height);
    color: var(--mux-color-text-muted);
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .div-mapping-options input[type="image"][id$="btnSearch"] {
    /*
     * Image inputs often paint the bitmap into the full border box; padding does not shrink the GIF.
     * Use a small content width/height and transparent border so the glyph is ~18px and the hit area ~44px.
     */
    width: 1.125rem !important;
    height: 1.125rem !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: max(0px, calc((var(--mux-touch-min) - 1.125rem) / 2)) solid transparent !important;
    box-sizing: content-box !important;
    vertical-align: middle;
    object-fit: contain;
    cursor: pointer;
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mux-color-border);
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing ul.paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing ul.paging li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: var(--lh-snug);
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing a.icon[class*="paging-"] {
    display: inline-block;
    width: var(--mux-paging-icon-size);
    height: var(--mux-paging-icon-size);
    min-width: var(--mux-paging-icon-size);
    min-height: var(--mux-paging-icon-size);
    vertical-align: middle;
    box-sizing: border-box;
    border: none !important;
    background-color: transparent !important;
    border-radius: calc(var(--mux-radius) - 2px);
    background-repeat: no-repeat;
    background-size: calc(142px * var(--mux-paging-icon-size) / 16px) calc(216px * var(--mux-paging-icon-size) / 16px);
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing a.icon.paging-first {
    background-position: 0 calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing a.icon.paging-previous {
    background-position: calc(-1 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing a.icon.paging-next {
    background-position: calc(-2 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing a.icon.paging-last {
    background-position: calc(-3 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing input.paging-pagenum {
    text-align: center;
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    box-sizing: border-box;
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing select.paging-dropdown {
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    margin-left: 0.35rem;
    padding: var(--mux-field-control-padding-y) 1.75rem var(--mux-field-control-padding-y) var(--mux-field-control-padding-x);
    line-height: var(--mux-line-height);
    vertical-align: middle;
}

body.modern-ux fieldset.field-set.fieldset-top-round-corners.padding-top-15:has(.dvGrid.paddingTop10) .divTopPagingQueryListing .ar.float-right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* ul.paging arrows — common.css a.icon { border: 1px solid #c0c0c0 }; branding-medrio ul.paging a.paging-button.icon { fill }.
   Icon-only: no border/chip; all pages using PagingOptions.ascx / .divTopPagingQueryListing. */
body.modern-ux ul.paging a.icon.paging-button,
body.modern-ux ul.paging a.icon[class*="paging-"] {
    border: none !important;
    border-width: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

body.modern-ux ul.paging a.icon.paging-button.disabled,
body.modern-ux ul.paging a.icon[class*="paging-"].disabled {
    background-color: transparent !important;
    border: none !important;
    opacity: 0.38;
}

body.modern-ux ul.paging a.icon[class*="paging-"]:not(.disabled):hover {
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: 0.82;
}

body.modern-ux ul.paging a.icon[class*="paging-"]:not(.disabled):focus-visible {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: 2px solid var(--mux-color-border-focus);
    outline-offset: 2px;
}

body.modern-ux.medrio.dark ul.paging a.icon[class*="paging-"]:not(.disabled):hover {
    background-color: transparent !important;
    opacity: 0.88;
}

body.modern-ux.medrio.dark ul.paging a.icon[class*="paging-"]:not(.disabled):focus-visible {
    background-color: transparent !important;
    outline-color: var(--mux-color-border-focus);
}

/* -------------------------------------------------------------------------
   Global .divTopPagingQueryListing — EnterDataListing.aspx, etc. (no .SiteMatrixView wrapper).
   Same flex + control metrics as SiteMatrix / manage-dcfs; scoped rules below override when needed.
   ------------------------------------------------------------------------- */
body.modern-ux .divTopPagingQueryListing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 0.65rem 0;
    padding-top: 0;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux .divTopPagingQueryListing ul.paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    float: none;
}

body.modern-ux .divTopPagingQueryListing ul.paging li {
    display: inline-flex;
    align-items: center;
    float: none;
    margin: 0;
    padding: 0;
    line-height: var(--lh-snug);
}

body.modern-ux .divTopPagingQueryListing ul.paging li > div {
    display: inline-flex;
    align-items: center;
}

body.modern-ux .divTopPagingQueryListing a.icon[class*="paging-"] {
    display: inline-block;
    width: var(--mux-paging-icon-size);
    height: var(--mux-paging-icon-size);
    min-width: var(--mux-paging-icon-size);
    min-height: var(--mux-paging-icon-size);
    vertical-align: middle;
    box-sizing: border-box;
    border: none !important;
    background-color: transparent !important;
    border-radius: calc(var(--mux-radius) - 2px);
    background-repeat: no-repeat;
    background-size: calc(142px * var(--mux-paging-icon-size) / 16px) calc(216px * var(--mux-paging-icon-size) / 16px);
}

body.modern-ux .divTopPagingQueryListing a.icon.paging-first {
    background-position: 0 calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .divTopPagingQueryListing a.icon.paging-previous {
    background-position: calc(-1 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .divTopPagingQueryListing a.icon.paging-next {
    background-position: calc(-2 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .divTopPagingQueryListing a.icon.paging-last {
    background-position: calc(-3 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .divTopPagingQueryListing input.paging-pagenum {
    float: none;
    text-align: center;
    width: auto;
    min-width: 2.75rem;
    max-width: 5rem;
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    color: var(--mux-color-text);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    padding: var(--mux-field-control-padding);
    height: var(--mux-field-control-height);
    min-height: var(--mux-field-control-min-height);
    box-sizing: border-box;
    transition: var(--mux-transition);
}

body.modern-ux .divTopPagingQueryListing input.paging-pagenum:focus-visible {
    outline: none;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .divTopPagingQueryListing select.paging-dropdown {
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    margin-left: 0.35rem;
    padding: var(--mux-field-control-padding-y) 2.25rem var(--mux-field-control-padding-y) var(--mux-field-control-padding-x);
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    vertical-align: middle;
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    background-color: var(--input-background);
    color: var(--mux-color-text);
    transition: var(--mux-transition);
}

body.modern-ux .divTopPagingQueryListing select.paging-dropdown:focus-visible {
    outline: none;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .divTopPagingQueryListing .ar.float-right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    float: none;
}

/* -------------------------------------------------------------------------
   Upload File dialog (.ui-dialog.upload-file-dialog) — inner-control overrides.
   Global input / checkbox / radio rules carry :not(.ui-dialog *, .cdk-overlay-container *)
   which excludes all form controls inside jQuery UI dialogs.
   This block opts them back in for this specific dialog, using the same token set.
   ------------------------------------------------------------------------- */

/* --- Text input (Email Address) ---------------------------------------- */
body.modern-ux .ui-dialog.upload-file-dialog input[type="text"],
body.modern-ux .ui-dialog.upload-file-dialog input[type="email"] {
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size) !important;
    line-height: var(--mux-line-height);
    color: var(--mux-color-text);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    padding: var(--mux-field-control-padding) !important;
    height: var(--mux-field-control-height) !important;
    min-height: var(--mux-field-control-min-height) !important;
    box-sizing: border-box !important;
    transition: var(--mux-transition);
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none;
    display: block;
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="text"]:hover:not(:disabled),
body.modern-ux .ui-dialog.upload-file-dialog input[type="email"]:hover:not(:disabled) {
    border-color: var(--mux-color-text);
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="text"]:focus,
body.modern-ux .ui-dialog.upload-file-dialog input[type="email"]:focus {
    border-color: var(--mux-color-border-focus);
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="text"]:focus-visible,
body.modern-ux .ui-dialog.upload-file-dialog input[type="email"]:focus-visible {
    outline: none;
}

/* --- Checkbox row: keep checkbox + label on one line ------------------- */
body.modern-ux .ui-dialog.upload-file-dialog td:has(#chkSendUpdates) {
    white-space: nowrap;
}

/* --- Checkbox (Send email status updates) ------------------------------ */
body.modern-ux .ui-dialog.upload-file-dialog input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px !important;
    height: 20px !important;
    margin: 0 var(--space-2) 0 0;
    vertical-align: middle;
    display: inline-block;
    border: 2px solid var(--mux-color-checkbox-border) !important;
    border-width: 2px !important;
    background-color: var(--background) !important;
    border-radius: var(--radius);
    background-image: none;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box !important;
    transition: border-color var(--transition), background-color var(--transition);
}

body.modern-ux .ui-dialog.upload-file-dialog td:has(#chkSendUpdates) label {
    vertical-align: middle;
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="checkbox"]:hover:not(:disabled) {
    border-color: var(--brand-dark) !important;
    background-image: none;
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="checkbox"]:checked {
    border-color: var(--mux-color-accent) !important;
    background-color: var(--mux-color-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7l3 3 5-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="checkbox"]:disabled {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Radio inputs (Upload Behavior: Add New / Update / Overwrite) ------- */
body.modern-ux .ui-dialog.upload-file-dialog input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px !important;
    height: 20px !important;
    margin: 5px;
    border: 2px solid var(--mux-color-checkbox-border) !important;
    border-width: 2px !important;
    border-radius: 50%;
    background-color: var(--background) !important;
    background-image: none;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box !important;
    transition: border-color var(--transition), background-color var(--transition);
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="radio"]:hover:not(:disabled) {
    border-color: var(--mux-primary-dark) !important;
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="radio"]:checked {
    border-color: var(--mux-color-accent) !important;
    background-color: var(--mux-color-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle fill='black' cx='4' cy='4' r='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

/* --- File input --------------------------------------------------------- */
body.modern-ux .ui-dialog.upload-file-dialog input[type="file"] {
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size);
    color: var(--mux-color-text);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="file"]::file-selector-button {
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size);
    font-weight: var(--fw-medium);
    color: var(--brand-accessible);
    background-color: transparent;
    border: 1px solid var(--brand-accessible);
    border-radius: var(--radius-md);
    padding: 4px var(--space-3);
    height: calc(var(--mux-field-control-height) - 4px);
    cursor: pointer;
    transition: var(--mux-transition);
    margin-right: var(--space-2);
}

body.modern-ux .ui-dialog.upload-file-dialog input[type="file"]::file-selector-button:hover {
    background-color: var(--mux-brand-accessible-08);
    border-color: var(--brand-dark);
}

/* --- Close button — full .ds-btn-text geometry -------------------------- */
body.modern-ux .ui-dialog.upload-file-dialog a.button.action.secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--brand-accessible) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size) !important;
    font-weight: var(--fw-medium) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
}

body.modern-ux .ui-dialog.upload-file-dialog a.button.action.secondary:hover {
    background-color: var(--mux-brand-accessible-08) !important;
    border-color: var(--brand-dark) !important;
}

body.modern-ux .ui-dialog.upload-file-dialog a.button.action.secondary:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/* --- Button footer row -------------------------------------------------- */
body.modern-ux .ui-dialog.upload-file-dialog .upload-file-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--space-2) !important;
    padding-top: var(--space-4) !important;
    margin-top: var(--space-4) !important;
}

/* Hide the leading <br> inside the scroll wrapper (top gap before Map Name) */
body.modern-ux .ui-dialog.upload-file-dialog .mycustomclass > div > br:first-child {
    display: none !important;
}

/* Hide the <br> spacing shim between the error span and the buttons */
body.modern-ux .ui-dialog.upload-file-dialog .upload-file-buttons > br {
    display: none !important;
}

/* --- Label styling ------------------------------------------------------ */
body.modern-ux .ui-dialog.upload-file-dialog .bulkupload-label {
    display: block;
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-field-control-font-size);
    font-weight: var(--fw-medium);
    color: var(--mux-color-text);
    margin-bottom: var(--space-1);
}

/* Hide the <br> that follows each label (spacing done via margin-bottom above) */
body.modern-ux .ui-dialog.upload-file-dialog .bulkupload-label + br {
    display: none !important;
}

/* --- Table: always fills content width so field widths are stable ------- */
body.modern-ux .ui-dialog.upload-file-dialog .upload-file-table {
    width: 100%;
    table-layout: fixed;
}

body.modern-ux .ui-dialog.upload-file-dialog .upload-file-table td {
    width: 100%;
}

/* --- Consistent vertical rhythm between table rows --------------------- */
body.modern-ux .ui-dialog.upload-file-dialog .upload-file-table tr + tr > td {
    padding-top: var(--space-4);
}

/* --- Select widths — all selects fill the td; Reason for Change is narrower */
body.modern-ux .ui-dialog.upload-file-dialog select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.modern-ux .ui-dialog.upload-file-dialog select.width190px {
    width: auto !important;
    max-width: 14rem !important;
}

/* -------------------------------------------------------------------------
   SiteMatrix.aspx — same paging bar as pending-changes / BulkUpload (flex, no float)
   Legacy ul.paging li { float:left } + ul.paging input { height:16px } misaligns icons vs page # + Page Size.
   Arrow hit targets use --mux-paging-icon-size (same as field controls), not --mux-height (40px).
   ------------------------------------------------------------------------- */
body.modern-ux .SiteMatrixView .divTopPagingQueryListing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 0.65rem 0;
    padding-top: 0;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing ul.paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    float: none;
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing ul.paging li {
    display: inline-flex;
    align-items: center;
    float: none;
    margin: 0;
    padding: 0;
    line-height: var(--lh-snug);
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing ul.paging li > div {
    display: inline-flex;
    align-items: center;
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing a.icon[class*="paging-"] {
    display: inline-block;
    width: var(--mux-paging-icon-size);
    height: var(--mux-paging-icon-size);
    min-width: var(--mux-paging-icon-size);
    min-height: var(--mux-paging-icon-size);
    vertical-align: middle;
    box-sizing: border-box;
    border: none !important;
    background-color: transparent !important;
    border-radius: calc(var(--mux-radius) - 2px);
    background-repeat: no-repeat;
    background-size: calc(142px * var(--mux-paging-icon-size) / 16px) calc(216px * var(--mux-paging-icon-size) / 16px);
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing a.icon.paging-first {
    background-position: 0 calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing a.icon.paging-previous {
    background-position: calc(-1 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing a.icon.paging-next {
    background-position: calc(-2 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing a.icon.paging-last {
    background-position: calc(-3 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing input.paging-pagenum {
    float: none;
    text-align: center;
    width: auto;
    min-width: 2.75rem;
    max-width: 5rem;
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    color: var(--mux-color-text);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    padding: var(--mux-field-control-padding);
    height: var(--mux-field-control-height);
    min-height: var(--mux-field-control-min-height);
    box-sizing: border-box;
    transition: var(--mux-transition);
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing input.paging-pagenum:focus-visible {
    outline: none;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing select.paging-dropdown {
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    margin-left: 0.35rem;
    padding: var(--mux-field-control-padding-y) 2.25rem var(--mux-field-control-padding-y) var(--mux-field-control-padding-x);
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    vertical-align: middle;
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    background-color: var(--input-background);
    color: var(--mux-color-text);
    transition: var(--mux-transition);
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing select.paging-dropdown:focus-visible {
    outline: none;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .SiteMatrixView .divTopPagingQueryListing .ar.float-right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    float: none;
}

/*
 * SiteMatrix.aspx: app/abstract/SubjectMatrixView.css sets .SiteMatrixView { margin-left: 10px }.
 * The RadGrid table is width:100%; margin is outside that box, so scroll width exceeds client width by ~10px
 * and .pod .body (common.css overflow:auto) shows a horizontal scrollbar with no useful pan range.
 */
body.modern-ux .body.custombody:has(#GVSubjects) .SiteMatrixView {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   SiteMatrix.aspx / EditSubjectMatrix — collapsible #filters + table.matrix
   (shared pattern; DS-aligned shell + controls; paging above grid is .SiteMatrixView)
   ------------------------------------------------------------------------- */
body.modern-ux #filters .filters-body {
    background-color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--mux-radius);
    padding: 0.75rem;
    box-sizing: border-box;
}

body.modern-ux #filters .filters-inner-body {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--mux-radius) - 2px);
    padding: 1rem;
    box-sizing: border-box;
}

body.modern-ux #filters .field table.matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

body.modern-ux #filters .field table.matrix td.filterCell {
    padding: 0.35rem 1rem 0.75rem 0;
    vertical-align: top;
}

body.modern-ux #filters .field table.matrix strong {
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-semibold);
    color: var(--foreground);
}

body.modern-ux #filters .field table.matrix select {
    max-width: min(100%, 24rem);
    margin-top: 0.35rem;
}

body.modern-ux #filters .field table.matrix .vAlignTop {
    margin-bottom: 0.25rem;
}

body.modern-ux #filters .filters-inner-body .button.action {
    margin-top: 0.75rem;
}

body.modern-ux #filters > a.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding: 0.5rem 0.75rem;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-relaxed);
    min-height: 2.25rem;
    color: var(--foreground);
    text-decoration: none;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--mux-radius);
    box-sizing: border-box;
    transition: var(--mux-transition);
    vertical-align: middle;
    overflow: visible;
}

/* Sprite .icon uses negative margins — avoid clipping label/chevron inside flex tab */
body.modern-ux #filters > a.filter-tab .icon {
    flex-shrink: 0;
    margin-top: 0 !important;
    margin-right: 0 !important;
}

/* EditSubjectMatrix.aspx: inline margin-left:-10px pulls #filters past .pod .body { overflow:auto } — tab clips */
body.modern-ux .pod .body:has(> med-edit-subject-matrix) > #filters {
    margin-left: 0 !important;
}

body.modern-ux #filters > a.filter-tab:hover {
    background: var(--mux-color-bg-hover);
    border-color: var(--mux-color-border-hover);
}

body.modern-ux #filters > a.filter-tab:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux #filters .field table.matrix table label,
body.modern-ux #filters .field table.matrix span label {
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium);
    color: var(--foreground);
}

/* app/abstract/default.aspx — subject listing result grid */
body.modern-ux #trResult table.matrix td,
body.modern-ux #trResult table.matrix th {
    vertical-align: middle;
}

/* SiteMatrix.aspx — markup unchanged (.header-no-border). body.modern-ux only: title row matches BuildStudy .pod.gc12 > header.major. */
body.modern-ux .pod:has(#GVSubjects) > header.header-no-border {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    box-sizing: border-box;
    min-height: 47px;
    padding: 0 16px;
    border-bottom: 1px solid var(--mux-color-black-12) !important;
    background: var(--mux-bg-subtle);
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border h1 {
    margin: 0;
    margin-top: 0 !important;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-20);
    font-weight: var(--fw-medium);
    line-height: 32px;
    letter-spacing: normal;
    color: var(--mux-color-on-surface);
}

body.modern-ux.medrio.dark .pod:has(#GVSubjects) > header.header-no-border {
    background: var(--muted, rgba(255, 255, 255, 0.05));
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.12)) !important;
}

body.modern-ux.medrio.dark .pod:has(#GVSubjects) > header.header-no-border h1 {
    color: var(--text-primary, rgba(255, 255, 255, 0.95));
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border .tool-bar.top-right {
    position: static;
    top: auto;
    right: auto;
    float: none;
    margin-top: 0;
    margin-left: auto;
    padding-right: 0;
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border .tool-bar .button {
    float: none;
    margin-left: 0;
}

/* EditSubject.master — markup unchanged; hook: server h1 ClientID ends with hSubjectView (avoids #GVSubjects pods). */
body.modern-ux .pod > header.header-no-border:has(h1[id$="hSubjectView"]) {
    display: flex;
    align-items: center;
    min-height: 47px;
    padding: 0 16px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--mux-color-black-12) !important;
    background: var(--mux-bg-subtle);
}

body.modern-ux .pod > header.header-no-border:has(h1[id$="hSubjectView"]) h1 {
    margin: 0;
    padding: 0;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-20);
    font-weight: var(--fw-medium);
    line-height: 32px;
    letter-spacing: normal;
    color: var(--mux-color-on-surface);
}

body.modern-ux.medrio.dark .pod > header.header-no-border:has(h1[id$="hSubjectView"]) {
    background: var(--muted, rgba(255, 255, 255, 0.05));
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.12)) !important;
}

body.modern-ux.medrio.dark .pod > header.header-no-border:has(h1[id$="hSubjectView"]) h1 {
    color: var(--text-primary, rgba(255, 255, 255, 0.95));
}

/* SiteMatrix filter panel — DS buttons (header toolbar uses listing rules below + .header-no-border selector). */
body.modern-ux .body.custombody:has(#GVSubjects) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    border: 1px solid var(--brand-dark, var(--mux-primary-dark)) !important;
    border-radius: var(--radius-md, 8px);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-fs-14));
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}

body.modern-ux .body.custombody:has(#GVSubjects) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
}

body.modern-ux .body.custombody:has(#GVSubjects) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active {
    background: var(--brand-darker, var(--mux-primary-darker)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
}

body.modern-ux .body.custombody:has(#GVSubjects) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):focus-visible {
    outline: none;
    box-shadow: var(--ds-btn-focus-visible-shadow);
}

body.modern-ux.medrio.dark .body.custombody:has(#GVSubjects) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    background: linear-gradient(180deg, var(--mux-primary-main) 0%, var(--medrio-blue-90) 100%) !important;
    border-color: var(--mux-primary-main) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux.medrio.dark .body.custombody:has(#GVSubjects) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover {
    background: linear-gradient(180deg, var(--medrio-blue-90) 0%, var(--medrio-blue-70) 100%) !important;
    border-color: var(--medrio-blue-90) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux.medrio.dark .body.custombody:has(#GVSubjects) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active {
    background: linear-gradient(180deg, var(--medrio-blue-90) 0%, var(--medrio-blue-70) 100%) !important;
    border-color: var(--medrio-blue-70) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--mux-shadow-sm) !important;
}

/* -------------------------------------------------------------------------
   Listing pods: header.major + .tool-bar.top-right; SiteMatrix toolbar uses .header-no-border (same button rules).
   Title row typography matches BuildStudy.master .pod.gc12 > header.major h1 (Configure Study).
   ------------------------------------------------------------------------- */
body.modern-ux .pod > header.major:has(.tool-bar.top-right) {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    box-sizing: border-box;
}

body.modern-ux .pod > header.major:has(.tool-bar.top-right) h1 {
    margin: 0;
    margin-top: 0 !important;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-20);
    font-weight: var(--fw-medium);
    line-height: 32px;
    letter-spacing: normal;
    color: var(--mux-color-on-surface);
}

body.modern-ux.medrio.dark .pod > header.major:has(.tool-bar.top-right) h1 {
    color: var(--text-primary, rgba(255, 255, 255, 0.95));
}

body.modern-ux .pod > header.major:has(.tool-bar.top-right) .tool-bar.top-right {
    position: static;
    top: auto;
    right: auto;
    float: none;
    margin-top: 0;
    margin-left: auto;
    padding-right: 0;
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* SubjectDataAudit.aspx (Audit Log in .pod.dialog / DataEntryPopUp): #divODSForAuditLog sits
   immediately below header.major (not inside the flex title row), matching legacy second-line layout. */
body.modern-ux .pod.dialog #divODSForAuditLog.subject-data-audit-ods,
body.modern-ux .pod.dialog #divODSForAuditLog {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-bottom: 1px solid var(--border, var(--mux-color-black-12));
}

body.modern-ux.medrio.dark .pod.dialog #divODSForAuditLog {
    border-bottom-color: var(--border, rgba(255, 255, 255, 0.12));
}

body.modern-ux .pod > header.major:has(.tool-bar.top-right) .tool-bar .button {
    float: none;
    margin-left: 0;
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline),
body.modern-ux .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline),
body.modern-ux .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    border: 1px solid var(--brand-dark, var(--mux-primary-dark)) !important;
    border-radius: var(--radius-md, 8px);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-fs-14));
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05));
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover,
body.modern-ux .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover,
body.modern-ux .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active,
body.modern-ux .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active,
body.modern-ux .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active {
    background: var(--brand-darker, var(--mux-primary-darker)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
    transform: none;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):focus-visible,
body.modern-ux .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):focus-visible,
body.modern-ux .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):focus-visible {
    outline: none;
    box-shadow: var(--ds-btn-focus-visible-shadow);
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action.secondary,
body.modern-ux .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action.secondary,
body.modern-ux .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4, 16px);
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--ds-btn-font-size, var(--mux-fs-14));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--brand-accessible) !important;
    background: transparent !important;
    border: 2px solid var(--brand-accessible) !important;
    border-radius: var(--radius-md, 8px);
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action.secondary:hover,
body.modern-ux .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action.secondary:hover,
body.modern-ux .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action.secondary:hover {
    background: var(--mux-brand-accessible-08) !important;
    border-color: var(--brand-accessible) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action.secondary:active,
body.modern-ux .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action.secondary:active,
body.modern-ux .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action.secondary:active {
    background: var(--mux-brand-accessible-12) !important;
}

body.modern-ux .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action.secondary:focus-visible,
body.modern-ux .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action.secondary:focus-visible,
body.modern-ux .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action.secondary:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux.medrio.dark .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline),
body.modern-ux.medrio.dark .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline),
body.modern-ux.medrio.dark .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    background: linear-gradient(180deg, var(--mux-primary-main) 0%, var(--medrio-blue-90) 100%) !important;
    border-color: var(--mux-primary-main) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux.medrio.dark .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover,
body.modern-ux.medrio.dark .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover,
body.modern-ux.medrio.dark .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover {
    background: linear-gradient(180deg, var(--medrio-blue-90) 0%, var(--medrio-blue-70) 100%) !important;
    border-color: var(--medrio-blue-90) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux.medrio.dark .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active,
body.modern-ux.medrio.dark .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active,
body.modern-ux.medrio.dark .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):active {
    background: linear-gradient(180deg, var(--medrio-blue-90) 0%, var(--medrio-blue-70) 100%) !important;
    border-color: var(--medrio-blue-70) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: var(--mux-shadow-sm) !important;
}

body.modern-ux.medrio.dark .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action.secondary,
body.modern-ux.medrio.dark .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action.secondary,
body.modern-ux.medrio.dark .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action.secondary {
    color: var(--mux-primary-light) !important;
    border-color: var(--mux-primary-light) !important;
    background: transparent !important;
}

body.modern-ux.medrio.dark .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action.secondary:hover,
body.modern-ux.medrio.dark .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action.secondary:hover,
body.modern-ux.medrio.dark .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action.secondary:hover {
    background: rgba(157, 217, 255, 0.12) !important;
    border-color: var(--mux-primary-light) !important;
    color: var(--mux-primary-light) !important;
}

body.modern-ux.medrio.dark .pod:has(#GVSubjects) > header.header-no-border .tool-bar a.button.action.secondary:active,
body.modern-ux.medrio.dark .pod > header.major:has(.tool-bar.top-right) .tool-bar a.button.action.secondary:active,
body.modern-ux.medrio.dark .pod:has([id$="gvCalculatedVariables"]) #filters .filters-inner-body a.button.action.secondary:active {
    background: rgba(157, 217, 255, 0.18) !important;
}

/* -------------------------------------------------------------------------
   Query listing — QueryMain.aspx / QueryDisplayControl.ascx (table#gvQueries).
   Header med-buttons (no .tool-bar), Define/Manage links, Filters Apply, grid shell + query-name LinkButton.
   ------------------------------------------------------------------------- */
body.modern-ux .pod > header.major:has(.query-main-header-actions) > .row.between-xs.middle-xs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem 1rem;
    box-sizing: border-box;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) h1 {
    margin: 0;
    margin-top: 0 !important;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-relaxed);
    color: var(--foreground);
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) .query-main-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) .query-main-header-actions > .col-xs {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) med-button::part(focus-overlay),
body.modern-ux .pod > header.major:has(.query-main-header-actions) med-button::part(button-focus-overlay) {
    opacity: 0 !important;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) med-button[button-type="stroked"]::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--brand-dark) !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family) !important;
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) med-button[button-type="stroked"]::part(button):hover:not(:disabled) {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) med-button[button-type="stroked"]::part(button):focus-visible {
    outline: 3px solid var(--mux-primary-main) !important;
    outline-offset: 2px !important;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) med-button[button-type="stroked"] .material-icons-outlined {
    font-size: var(--mux-fs-16) !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    color: inherit !important;
    vertical-align: middle !important;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) med-button[button-type="flat"][color="primary"]::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    /* Match stroked Export (size=small) in this row; default markup stays full-size for non–modern-ux */
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-md, 8px) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    color: var(--mux-primary-contrast) !important;
    background: var(--brand) !important;
    border: 1px solid var(--brand-dark, var(--mux-primary-dark)) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px var(--mux-color-black-05)) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) med-button[button-type="flat"][color="primary"]::part(button):hover:not(:disabled) {
    background: var(--brand-dark, var(--mux-primary-dark)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) med-button[button-type="flat"][color="primary"]::part(button):active:not(:disabled) {
    background: var(--brand-darker, var(--mux-primary-darker)) !important;
    border-color: var(--brand-darker, var(--mux-primary-darker)) !important;
}

body.modern-ux .pod > header.major:has(.query-main-header-actions) med-button[button-type="flat"][color="primary"]::part(button):focus-visible {
    outline: none !important;
    box-shadow: var(--ds-btn-focus-visible-shadow) !important;
}

body.modern-ux.medrio.dark .pod > header.major:has(.query-main-header-actions) med-button[button-type="flat"][color="primary"]::part(button) {
    background: linear-gradient(180deg, var(--mux-primary-main) 0%, var(--medrio-blue-90) 100%) !important;
    border-color: var(--mux-primary-main) !important;
}

body.modern-ux.medrio.dark .pod > header.major:has(.query-main-header-actions) med-button[button-type="flat"][color="primary"]::part(button):hover:not(:disabled) {
    background: linear-gradient(180deg, var(--medrio-blue-90) 0%, var(--medrio-blue-70) 100%) !important;
    border-color: var(--medrio-blue-90) !important;
}

body.modern-ux.medrio.dark .pod > header.major:has(.query-main-header-actions) med-button[button-type="stroked"]::part(button) {
    border-color: var(--mux-primary-light) !important;
    color: var(--mux-primary-light) !important;
    background: transparent !important;
}

body.modern-ux.medrio.dark .pod > header.major:has(.query-main-header-actions) med-button[button-type="stroked"]::part(button):hover:not(:disabled) {
    background: rgba(157, 217, 255, 0.12) !important;
}

body.modern-ux .pod:has(table#gvQueries) .query-page-link-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

body.modern-ux .pod:has(table#gvQueries) .query-page-link-sep {
    color: var(--muted-foreground);
    user-select: none;
}

body.modern-ux .pod:has(table#gvQueries) .query-page-link-actions med-button.med-basic-button.med-primary::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    font-family: var(--font-family) !important;
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    box-shadow: none !important;
    transition:
        background-color var(--transition),
        color var(--transition) !important;
}

body.modern-ux .pod:has(table#gvQueries) .query-page-link-actions med-button.med-basic-button.med-primary::part(button):hover:not(:disabled) {
    background-color: #0d5fa814 !important;
}

body.modern-ux .pod:has(table#gvQueries) .query-page-link-actions med-button::part(focus-overlay),
body.modern-ux .pod:has(table#gvQueries) .query-page-link-actions med-button::part(button-focus-overlay) {
    opacity: 0 !important;
}

body.modern-ux .pod:has(table#gvQueries) med-expansion-panel {
    border-radius: var(--radius-md, 8px);
    border-color: var(--border);
}

body.modern-ux .pod:has(table#gvQueries) med-expansion-panel med-button[button-type="stroked"]::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--brand-dark) !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family) !important;
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    box-shadow: none !important;
}

body.modern-ux .pod:has(table#gvQueries) med-expansion-panel med-button[button-type="stroked"]::part(button):hover:not(:disabled) {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
}

body.modern-ux .pod:has(table#gvQueries) med-expansion-panel med-button[button-type="stroked"]::part(button):focus-visible {
    outline: 3px solid var(--mux-primary-main) !important;
    outline-offset: 2px !important;
}

body.modern-ux .pod:has(table#gvQueries) med-expansion-panel med-button::part(focus-overlay),
body.modern-ux .pod:has(table#gvQueries) med-expansion-panel med-button::part(button-focus-overlay) {
    opacity: 0 !important;
}

body.modern-ux.medrio.dark .pod:has(table#gvQueries) med-expansion-panel med-button[button-type="stroked"]::part(button) {
    border-color: var(--mux-primary-light) !important;
    color: var(--mux-primary-light) !important;
}

body.modern-ux table#gvQueries.matrix th {
    background: var(--muted) !important;
    color: var(--foreground);
    border-color: var(--border) !important;
}

body.modern-ux.medrio.dark table#gvQueries.matrix th {
    background: var(--card) !important;
}

body.modern-ux table#gvQueries.matrix td {
    border-color: var(--border) !important;
}

body.modern-ux table#gvQueries tbody a[id*="lnkDetail"] {
    font-family: var(--font-family, var(--mux-font-family));
    font-weight: var(--fw-semibold);
    color: var(--brand-accessible) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

body.modern-ux table#gvQueries tbody a[id*="lnkDetail"]:hover {
    color: var(--brand-dark) !important;
    background: #0d5fa814;
}

body.modern-ux table#gvQueries tbody a[id*="lnkDetail"]:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

/* -------------------------------------------------------------------------
   dde_setup.aspx — Double Data Entry: subject query builder + search + RadGrid
   Scope: .pod:has(> header#hdrDDE) (HTML header on this page only; not PanelHeader ids elsewhere)
   ------------------------------------------------------------------------- */
body.modern-ux .pod:has(> header#hdrDDE) > .body {
    box-sizing: border-box;
}

body.modern-ux .pod:has(> header#hdrDDE) > header#hdrDDE.major,
body.modern-ux .pod:has(> header#hdrDDE) > header#hdrDDE.header-no-border {
    box-sizing: border-box;
}

body.modern-ux .pod:has(> header#hdrDDE) > header#hdrDDE h1 {
    margin: 0;
    padding: 0.15rem 0 0;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-relaxed);
    color: var(--foreground);
}

body.modern-ux .pod:has(> header#hdrDDE) .SubPageSubPanel {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}

body.modern-ux .pod:has(> header#hdrDDE) #PnlSubjSearch table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

body.modern-ux .pod:has(> header#hdrDDE) #PnlSubjSearch table td {
    vertical-align: top;
    padding: 0 0.75rem 0 0;
}

body.modern-ux .pod:has(> header#hdrDDE) #PnlSubjSearch a.button.action {
    margin-top: 0.75rem;
}

body.modern-ux .pod:has(> header#hdrDDE) .SubjQueryControl {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
    white-space: normal;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

body.modern-ux .pod:has(> header#hdrDDE) .SubjQueryPanel {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .pod:has(> header#hdrDDE) .VarSelector {
    border: 1px solid var(--border);
    border-radius: var(--mux-radius);
    background: var(--card);
    box-shadow: var(--mux-shadow-sm);
    margin-top: 0.5rem;
    height: auto;
    max-height: min(320px, 55vh);
    min-height: 12rem;
    width: min(100%, 280px);
    box-sizing: border-box;
}

body.modern-ux .pod:has(> header#hdrDDE) .VarSelector ul li a {
    color: var(--foreground);
    border-radius: calc(var(--mux-radius) - 2px);
}

body.modern-ux .pod:has(> header#hdrDDE) .VarSelExpanded ul li {
    border: 1px solid var(--border);
    border-radius: var(--mux-radius);
    background: var(--background);
}

body.modern-ux .pod:has(> header#hdrDDE) .VarSelCollapsed a {
    color: var(--foreground) !important;
}

body.modern-ux .pod:has(> header#hdrDDE) #OPTGROUPCLAUSE {
    border: 1px solid var(--border);
    border-radius: var(--mux-radius);
    background: var(--background);
}

body.modern-ux .pod:has(> header#hdrDDE) .QueryBuilderMain {
    flex: 1 1 320px;
    min-width: 18rem;
    max-width: none;
    margin-right: 0;
    box-sizing: border-box;
}

body.modern-ux .pod:has(> header#hdrDDE) .QueryClauseHolder,
body.modern-ux .pod:has(> header#hdrDDE) .QueryCompClauseHolder {
    border: 1px dashed var(--mux-color-border);
    border-radius: var(--mux-radius);
    background: var(--card);
    box-sizing: border-box;
}

body.modern-ux .pod:has(> header#hdrDDE) .QueryClause {
    border: 1px solid var(--border);
    border-radius: var(--mux-radius);
    background: var(--background);
    white-space: normal;
    box-sizing: border-box;
}

body.modern-ux .pod:has(> header#hdrDDE) .QueryGroupClause {
    border: 1px solid var(--border);
    border-radius: var(--mux-radius);
    background: var(--muted);
    box-sizing: border-box;
}

body.modern-ux .pod:has(> header#hdrDDE) .QueryGroupClause .QueryGroupClause {
    border: 1px solid var(--border);
    border-radius: var(--mux-radius);
    background: var(--card);
}

body.modern-ux .pod:has(> header#hdrDDE) .clauseholder-active {
    border-color: var(--mux-color-border-focus);
    background: var(--mux-color-bg-hover);
}

body.modern-ux .pod:has(> header#hdrDDE) .clauseholder-hover {
    background: var(--accent);
}

body.modern-ux .pod:has(> header#hdrDDE) select.ClauseSelect {
    max-width: min(100%, 28rem);
}

body.modern-ux .pod:has(> header#hdrDDE) .m-action-button > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family, var(--mux-font-family));
    font-weight: var(--fw-semibold);
    font-size: var(--ds-btn-font-size, var(--mux-fs-rem-875));
    line-height: var(--lh-snug);
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        background-color var(--transition, 0.15s ease),
        color var(--transition, 0.15s ease),
        box-shadow var(--transition, 0.15s ease);
    border: none;
    box-shadow: none;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
    color: var(--brand-accessible) !important;
    background-color: transparent !important;
}

body.modern-ux .pod:has(> header#hdrDDE) .m-action-button > a:hover {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .pod:has(> header#hdrDDE) .m-action-button > a:active {
    background-color: var(--mux-brand-accessible-12) !important;
}

body.modern-ux .pod:has(> header#hdrDDE) .m-action-button > a:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux .pod:has(> header#hdrDDE) input[type="image"][id$="btnPrevious"],
body.modern-ux .pod:has(> header#hdrDDE) input[type="image"][id$="btnNext"] {
    padding: 0.35rem;
    border-radius: var(--mux-radius);
    border: 1px solid var(--border);
    background: var(--background);
    vertical-align: middle;
    cursor: pointer;
    box-sizing: border-box;
}

body.modern-ux .pod:has(> header#hdrDDE) input[type="image"][id$="btnPrevious"]:hover,
body.modern-ux .pod:has(> header#hdrDDE) input[type="image"][id$="btnNext"]:hover {
    background: var(--mux-color-bg-hover);
}

body.modern-ux .pod:has(> header#hdrDDE) table.rgMasterTable th.rgHeader,
body.modern-ux .pod:has(> header#hdrDDE) table.rgMasterTable th {
    color: var(--gray-600) !important;
    font-weight: var(--fw-bold) !important;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-relaxed);
    background: var(--muted) !important;
    background-image: none !important;
    border-bottom: 2px solid var(--mux-color-border) !important;
    vertical-align: middle;
    padding: var(--space-3) var(--space-4);
}

body.modern-ux .pod:has(> header#hdrDDE) table.rgMasterTable th a {
    color: inherit !important;
    font-weight: inherit;
    text-decoration: none !important;
}

body.modern-ux .pod:has(> header#hdrDDE) table.rgMasterTable th a:hover {
    color: var(--brand-accessible) !important;
    text-decoration: underline !important;
}

body.modern-ux .pod:has(> header#hdrDDE) table.rgMasterTable td {
    padding: var(--space-3) var(--space-4);
    vertical-align: top;
    border-bottom: 1px solid var(--mux-color-border);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-loose);
}

body.modern-ux .pod:has(> header#hdrDDE) table.rgMasterTable tr.rgRow:last-child td,
body.modern-ux .pod:has(> header#hdrDDE) table.rgMasterTable tr.rgAltRow:last-child td {
    border-bottom: none;
}

body.modern-ux .pod:has(> header#hdrDDE) table.rgMasterTable td a {
    color: var(--brand-accessible);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

body.modern-ux .pod:has(> header#hdrDDE) table.rgMasterTable td a:hover {
    color: var(--mux-color-link-hover);
    text-decoration: underline;
}

/* SubjectExecQuery — GridView.matrix (subject search results) */
body.modern-ux .pod:has(> header#hdrDDE) table.matrix th,
body.modern-ux .pod:has(> header#hdrDDE) table.matrix thead td {
    color: var(--gray-600) !important;
    font-weight: var(--fw-bold) !important;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-relaxed);
    background: var(--muted) !important;
    border-bottom: 2px solid var(--mux-color-border) !important;
    vertical-align: middle;
    padding: var(--space-3) var(--space-4);
}

body.modern-ux .pod:has(> header#hdrDDE) table.matrix td {
    padding: var(--space-3) var(--space-4);
    vertical-align: top;
    border-bottom: 1px solid var(--mux-color-border);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-loose);
}

body.modern-ux .pod:has(> header#hdrDDE) table.matrix tbody tr:last-child td {
    border-bottom: none;
}

/* SubjectGV HyperLink — “Select subject”: text button (.panel-command parity).
   Table id contains QueryExecControl_SubjectGV (stable) so we do not rely only on .pod:has(> header#hdrDDE). */
body.modern-ux .pod:has(> header#hdrDDE) table.matrix td a[id$="lnkEdit"],
body.modern-ux table.matrix[id*="QueryExecControl_SubjectGV"] td a[id$="lnkEdit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-weight: var(--fw-semibold) !important;
    font-size: var(--mux-fs-rem-875) !important;
    line-height: var(--lh-snug) !important;
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-sizing: border-box;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    text-underline-offset: unset !important;
    text-decoration-thickness: unset !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        background-color var(--transition, 0.15s ease),
        color var(--transition, 0.15s ease),
        box-shadow var(--transition, 0.15s ease);
    white-space: nowrap;
    outline-offset: 0 !important;
}

body.modern-ux .pod:has(> header#hdrDDE) table.matrix td a[id$="lnkEdit"]:hover,
body.modern-ux table.matrix[id*="QueryExecControl_SubjectGV"] td a[id$="lnkEdit"]:hover {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
}

body.modern-ux .pod:has(> header#hdrDDE) table.matrix td a[id$="lnkEdit"]:active,
body.modern-ux table.matrix[id*="QueryExecControl_SubjectGV"] td a[id$="lnkEdit"]:active {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .pod:has(> header#hdrDDE) table.matrix td a[id$="lnkEdit"]:focus-visible,
body.modern-ux table.matrix[id*="QueryExecControl_SubjectGV"] td a[id$="lnkEdit"]:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .pod:has(> header#hdrDDE) .link-underline {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* SubjectQueryControl — keep .QueryGroupClause / builder inside table.layout (legacy .SubjQueryControl{white-space:nowrap} overflows) */
body.modern-ux .SubjQueryControl {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1rem 1.25rem;
    white-space: normal;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    /* Horizontal scroll lives in .QueryBuilderMain / .QueryClause — avoid whole-page overflow */
    overflow-x: visible;
    overflow-y: visible;
}

body.modern-ux .SubjQueryControl .SubjQueryPanel {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

/* Var-selector column + .QueryBuilderMain stay on one row; builder flexes and scrolls horizontally when narrow */
body.modern-ux .SubjQueryControl > .SubjQueryPanel:not(.QueryBuilderMain) {
    flex: 0 0 auto;
    flex-shrink: 0;
}

body.modern-ux .SubjQueryControl .QueryBuilderMain {
    /* flex: 1 1 0% + min-width: 0 lets this column take remaining width and scroll inside instead of expanding <table> / page */
    flex: 1 1 0%;
    min-width: 0;
    max-width: 100%;
    margin-right: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

body.modern-ux table.layout td:has(.SubjQueryControl) {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.modern-ux .SubjQueryControl #RootQueryClause,
body.modern-ux .SubjQueryControl .QueryGroupClause {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: visible;
}

/* Help layout tables respect content width so the builder column can shrink + scroll */
body.modern-ux table.layout:has(.SubjQueryControl) {
    width: 100%;
    max-width: 100%;
}

/* SubjectQueryControl.ascx — clause row: flex (remove stays in-flow; legacy absolute + right:2px overflowed the border) */
body.modern-ux .SubjQueryControl .QueryClause {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.5rem 0.75rem;
    min-height: var(--ds-btn-height);
    white-space: normal;
    box-sizing: border-box;
    border-radius: var(--radius-md);
}

body.modern-ux .SubjQueryControl .QueryClause .QueryOperandValue {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Compact <select multiple> listboxes in clause rows: global body.modern-ux select[multiple]{min-height:10rem}
   is for large pickers; here size=2/5 must stay short or controls overlap operators / drag targets. */
body.modern-ux .SubjQueryControl select[multiple].ClauseSelect {
    min-height: 0 !important;
    max-height: min(12rem, 45vh);
    height: auto !important;
    appearance: auto !important;
    -webkit-appearance: listbox !important;
    background-image: none !important;
    padding: 0.25rem 0.35rem !important;
    cursor: default;
    align-self: center;
}

body.modern-ux .SubjQueryControl .QueryClause:has(select[multiple].ClauseSelect) {
    align-items: center;
    min-height: 0;
}

body.modern-ux .SubjQueryControl .QueryClause select{
    max-width: 200px !important;
}

body.modern-ux .SubjQueryControl .QueryOperandValue:has(select[multiple].ClauseSelect) {
    align-items: center;
}

body.modern-ux .SubjQueryControl .QueryClauseValueCell {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    vertical-align: top;
    max-width: 100%;
    box-sizing: border-box;
}

/* Subject search / query builder — wide viewports: keep one clause row on a single line; scroll inside the clause box if needed */
@media (min-width: 1440px) {
    body.modern-ux .SubjQueryControl .QueryClause {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.modern-ux .SubjQueryControl .QueryClause .QueryOperandValue {
        flex-wrap: nowrap;
    }

    body.modern-ux .SubjQueryControl .QueryClauseValueCell {
        flex-wrap: nowrap;
    }

    /* Default 200px max is tight for visit labels (“at Baseline Visit”); a bit more room helps one-line layout */
    body.modern-ux .SubjQueryControl .QueryClause select {
        max-width: min(280px, 24vw) !important;
    }

    body.modern-ux .SubjQueryControl .QueryCompClauseHolder {
        white-space: nowrap;
        flex: 0 1 auto;
    }
}

body.modern-ux .SubjQueryControl .RemoveClauseBox {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    margin-left: auto;
    line-height: 0;
}

/* SubjectQueryControl.ascx — “remove condition”: compact text-style icon (not a 36×36 tile; stays inside clause border) */
body.modern-ux .SubjQueryControl .RemoveClauseBox a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 2.25rem;
    height: auto;
    min-height: var(--mux-field-control-min-height);
    padding: 0.2rem 0.35rem !important;
    margin: 0;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-sizing: border-box;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    text-underline-offset: unset !important;
    text-decoration-thickness: unset !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        background-color var(--transition, 0.15s ease),
        color var(--transition, 0.15s ease),
        box-shadow var(--transition, 0.15s ease);
    outline-offset: 0 !important;
}

body.modern-ux .SubjQueryControl .RemoveClauseBox a .material-icons,
body.modern-ux .SubjQueryControl .RemoveClauseBox a .trash-material-icon {
    font-size: var(--mux-fs-rem-1125) !important;
    line-height: var(--lh-none) !important;
    color: inherit !important;
}

body.modern-ux .SubjQueryControl .RemoveClauseBox a:hover {
    background-color: var(--mux-brand-accessible-06) !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
}

body.modern-ux .SubjQueryControl .RemoveClauseBox a:active {
    background-color: var(--mux-brand-accessible-10) !important;
}

body.modern-ux .SubjQueryControl .RemoveClauseBox a:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/* SubjectQueryControl.js — “Advanced Find” (.divSwitchAdvFind on abstract default.aspx, etc.): DS text button (parity with home “More” / .panel-command) */
body.modern-ux .divSwitchAdvFind a,
body.modern-ux .divSwitchAdvFind button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    height: var(--ds-btn-height) !important;
    min-height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--brand-accessible) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition:
        background-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux .divSwitchAdvFind a:hover,
body.modern-ux .divSwitchAdvFind button:hover:not(:disabled) {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .divSwitchAdvFind a:active,
body.modern-ux .divSwitchAdvFind button:active:not(:disabled) {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .divSwitchAdvFind a:focus-visible,
body.modern-ux .divSwitchAdvFind button:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .divSwitchAdvFind button:disabled {
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* -------------------------------------------------------------------------
   recover_data.aspx — Restore / nav actions (LinkButtons + HyperLinks; no CssClass on markup)
   Scope: server id divRecoverDataContainer (all obj=* recover editors)
   ------------------------------------------------------------------------- */
body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRecover"],
body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRestoreSites"],
body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRestoreGroups"],
body.modern-ux [id$="divRecoverDataContainer"] a[id$="_actionLink"],
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkSites"],
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkGroups"],
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkVisits"],
body.modern-ux [id$="divRecoverDataContainer"] med-recover-consent-form a[href*="edit_forms_list"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-weight: var(--fw-semibold) !important;
    font-size: var(--ds-btn-font-size, var(--mux-fs-rem-875)) !important;
    line-height: var(--lh-snug) !important;
    height: var(--ds-btn-height);
    min-height: var(--ds-btn-height);
    padding: 0 var(--space-4) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-sizing: border-box;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    text-underline-offset: unset !important;
    text-decoration-thickness: unset !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        background-color var(--transition, 0.15s ease),
        color var(--transition, 0.15s ease),
        box-shadow var(--transition, 0.15s ease);
    white-space: nowrap;
    outline-offset: 0 !important;
}

body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRecover"]:hover,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRestoreSites"]:hover,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRestoreGroups"]:hover,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="_actionLink"]:hover,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkSites"]:hover,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkGroups"]:hover,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkVisits"]:hover,
body.modern-ux [id$="divRecoverDataContainer"] med-recover-consent-form a[href*="edit_forms_list"]:hover {
    background-color: var(--mux-brand-accessible-08) !important;
    color: var(--brand-accessible) !important;
    text-decoration: none !important;
}

body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRecover"]:active,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRestoreSites"]:active,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRestoreGroups"]:active,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="_actionLink"]:active,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkSites"]:active,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkGroups"]:active,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkVisits"]:active,
body.modern-ux [id$="divRecoverDataContainer"] med-recover-consent-form a[href*="edit_forms_list"]:active {
    background-color: var(--mux-brand-accessible-12) !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRecover"]:focus-visible,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRestoreSites"]:focus-visible,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="btnRestoreGroups"]:focus-visible,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="_actionLink"]:focus-visible,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkSites"]:focus-visible,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkGroups"]:focus-visible,
body.modern-ux [id$="divRecoverDataContainer"] a[id$="lnkVisits"]:focus-visible,
body.modern-ux [id$="divRecoverDataContainer"] med-recover-consent-form a[href*="edit_forms_list"]:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/* -------------------------------------------------------------------------
   manage_dcfs.aspx — filters, toolbar, RadGrid matrix, paging (AbstractV8 / paper queries)
   ------------------------------------------------------------------------- */
/* Filters — CSS-Only-UI-2026 .ds-field / .ds-label / .ds-input / .ds-select (stacked label above control) */
body.modern-ux .manage-dcfs-page .manage-dcfs-filters {
    margin: 0 0 1rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

body.modern-ux .manage-dcfs-page .manage-dcfs-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 1rem 1.25rem;
    align-items: end;
}

body.modern-ux .manage-dcfs-page .manage-dcfs-filters .ds-field {
    margin: 0;
    width: 100%;
    max-width: 25rem;
    min-width: 0;
    box-sizing: border-box;
}

/* .ds-label — global Phase C rule; filters rely on same typography */

body.modern-ux .manage-dcfs-page .manage-dcfs-filters select.ds-select {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

body.modern-ux .manage-dcfs-page .manage-dcfs-filters input.ds-input {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

body.modern-ux .manage-dcfs-page .manage-dcfs-filter-submit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-width: 2.75rem;
}

body.modern-ux .manage-dcfs-page .manage-dcfs-filter-submit-spacer {
    display: block;
    min-height: calc(0.875rem * 1.5 + var(--space-1, 4px));
    margin-bottom: var(--space-1, 4px);
    width: 1px;
}

body.modern-ux .manage-dcfs-page input[type="image"][id$="btnSearch"] {
    padding: 0.35rem;
    border-radius: var(--mux-radius);
    border: 1px solid var(--border);
    background: var(--background);
    vertical-align: middle;
    cursor: pointer;
    box-sizing: border-box;
}

body.modern-ux .manage-dcfs-page input[type="image"][id$="btnSearch"]:hover {
    background: var(--mux-color-bg-hover);
}

body.modern-ux .manage-dcfs-page .FormMessageContainer.Failure {
    height: auto;
    min-height: unset;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    border-radius: var(--mux-radius);
    font-weight: var(--fw-semibold);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-loose);
    box-sizing: border-box;
}

body.modern-ux .manage-dcfs-page table.manage-dcfs-actions {
    margin: 0.25rem 0 0.5rem;
    border-collapse: separate;
    border-spacing: 0;
}

body.modern-ux .manage-dcfs-page table.manage-dcfs-actions td {
    padding: 0 0.15rem 0 0;
    vertical-align: middle;
    white-space: nowrap;
}

body.modern-ux .manage-dcfs-page table.manage-dcfs-actions .toolbar-sep {
    display: inline-block;
    margin: 0 0.15rem;
    color: var(--muted-foreground);
    font-weight: var(--fw-normal);
    user-select: none;
}

body.modern-ux .manage-dcfs-page .m-action-button > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
    height: 36px;
    min-height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--mux-fs-14);
    line-height: var(--lh-none);
    box-sizing: border-box;
    background-color: transparent;
    color: var(--brand-accessible);
    white-space: nowrap;
    text-decoration-color: transparent !important;
    box-shadow: none;
}

body.modern-ux .manage-dcfs-page .m-action-button > a:hover {
    background-color: var(--mux-brand-accessible-08);
    color: var(--brand-accessible);
    text-decoration: none !important;
}

body.modern-ux .manage-dcfs-page .m-action-button > a:active {
    background-color: var(--mux-brand-accessible-12);
    color: var(--brand-accessible);
}

body.modern-ux .manage-dcfs-page .m-action-button > a:focus-visible {
    outline: none;
    box-shadow: var(--mux-focus-ring);
}

/* Paging — same flex treatment as SiteMatrixView / pending-changes */
body.modern-ux .manage-dcfs-page .divTopPagingQueryListing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 0.65rem 0;
    padding-top: 0;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing ul.paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    float: none;
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing ul.paging li {
    display: inline-flex;
    align-items: center;
    float: none;
    margin: 0;
    padding: 0;
    line-height: var(--lh-snug);
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing ul.paging li > div {
    display: inline-flex;
    align-items: center;
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing a.icon[class*="paging-"] {
    display: inline-block;
    width: var(--mux-paging-icon-size);
    height: var(--mux-paging-icon-size);
    min-width: var(--mux-paging-icon-size);
    min-height: var(--mux-paging-icon-size);
    vertical-align: middle;
    box-sizing: border-box;
    border: none !important;
    background-color: transparent !important;
    border-radius: calc(var(--mux-radius) - 2px);
    background-repeat: no-repeat;
    background-size: calc(142px * var(--mux-paging-icon-size) / 16px) calc(216px * var(--mux-paging-icon-size) / 16px);
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing a.icon.paging-first {
    background-position: 0 calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing a.icon.paging-previous {
    background-position: calc(-1 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing a.icon.paging-next {
    background-position: calc(-2 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing a.icon.paging-last {
    background-position: calc(-3 * var(--mux-paging-icon-size)) calc(-8 * var(--mux-paging-icon-size));
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing input.paging-pagenum {
    float: none;
    text-align: center;
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    box-sizing: border-box;
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing select.paging-dropdown {
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    margin-left: 0.35rem;
    padding: var(--mux-field-control-padding-y) 1.75rem var(--mux-field-control-padding-y) var(--mux-field-control-padding-x);
    line-height: var(--mux-line-height);
    vertical-align: middle;
}

body.modern-ux .manage-dcfs-page .divTopPagingQueryListing .ar.float-right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    float: none;
}

body.modern-ux .manage-dcfs-page #divTableContainer {
    margin-top: 0.35rem;
    border-radius: var(--mux-radius);
    overflow: auto;
    border: 1px solid var(--mux-color-border);
    background: var(--background);
    box-sizing: border-box;
}

/* RadGrid — strip legacy HTML border="1" / rules="all" (double lines); outer chrome is #divTableContainer */
body.modern-ux .manage-dcfs-page table.rgMasterTable {
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .manage-dcfs-page table.rgMasterTable > thead > tr > th,
body.modern-ux .manage-dcfs-page table.rgMasterTable > tbody > tr > td,
body.modern-ux .manage-dcfs-page table.rgMasterTable > tfoot > tr > td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

body.modern-ux .manage-dcfs-page table.rgMasterTable th.rgHeader,
body.modern-ux .manage-dcfs-page table.rgMasterTable th {
    color: var(--gray-600) !important;
    font-weight: var(--fw-bold) !important;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-relaxed);
    background: var(--muted) !important;
    background-image: none !important;
    border-bottom: 2px solid var(--mux-color-border) !important;
    text-align: left;
    vertical-align: top;
    padding: var(--space-3) var(--space-4);
}

body.modern-ux .manage-dcfs-page table.rgMasterTable thead th:first-child {
    vertical-align: middle;
    width: 1%;
    white-space: nowrap;
}

body.modern-ux .manage-dcfs-page table.rgMasterTable thead th a[onclick*="Grid.Sort"] {
    display: inline;
    white-space: nowrap;
}

body.modern-ux .manage-dcfs-page table.rgMasterTable thead th .handcursor {
    display: inline-block;
    vertical-align: middle;
    margin: 0.15rem 0 0 0.25rem;
    line-height: 0;
}

body.modern-ux .manage-dcfs-page table.rgMasterTable thead th .handcursor img {
    display: block;
    max-width: 100%;
    height: auto;
}

body.modern-ux .manage-dcfs-page table.rgMasterTable thead th .bulkreasonCtrl {
    margin-top: 0.5rem;
    max-width: min(100%, 18rem);
    box-sizing: border-box;
}

body.modern-ux .manage-dcfs-page table.rgMasterTable th a {
    color: inherit !important;
    font-weight: inherit;
    text-decoration: none !important;
}

body.modern-ux .manage-dcfs-page table.rgMasterTable th a:hover {
    color: var(--brand-accessible) !important;
    text-decoration: underline !important;
}

body.modern-ux .manage-dcfs-page table.rgMasterTable td {
    padding: var(--space-3) var(--space-4);
    vertical-align: top;
    border-bottom: 1px solid var(--mux-color-border);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-loose);
}

body.modern-ux .manage-dcfs-page table.rgMasterTable tr.rgRow:last-child td,
body.modern-ux .manage-dcfs-page table.rgMasterTable tr.rgAltRow:last-child td {
    border-bottom: none;
}

body.modern-ux .manage-dcfs-page .panelStyleManageDcf {
    float: none;
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .manage-dcfs-page .resizableQueryDescription {
    width: auto;
    max-width: 22rem;
    min-width: 6rem;
    min-height: 2.25rem;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--mux-radius);
    background: var(--muted);
    padding: 0.4rem 0.5rem;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
}

body.modern-ux .manage-dcfs-page .handcursor img {
    border-radius: calc(var(--mux-radius) - 2px);
    vertical-align: middle;
}

body.modern-ux .manage-dcfs-page .bulkreasonCtrl {
    border-radius: var(--mux-radius);
    border: 1px solid var(--mux-color-border);
    box-shadow: var(--mux-shadow-hover);
    background: var(--background);
}

/* -------------------------------------------------------------------------
   edit_forms_add.aspx — Add a New Form: primary Continue actions match control scale + rhythm
   Selects use 1px borders + --mux-height; anchors match native select chrome.
   ------------------------------------------------------------------------- */
body.modern-ux #PnlFormDefine fieldset.box .button-container {
    margin-top: 1rem;
    margin-bottom: 0;
}

body.modern-ux #PnlFormDefine fieldset.box .button-container a.button.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    min-height: 36px;
    padding: 0 var(--space-4);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--brand);
    color: #000 !important;
    font-family: var(--font-family);
    font-size: var(--mux-fs-14);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-none);
    text-decoration: none;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

body.modern-ux #PnlFormDefine fieldset.box .button-container a.button.action:hover:not(.disabled) {
    background-color: #3aa7f0;
    color: #000 !important;
}

body.modern-ux #PnlFormDefine fieldset.box .button-container a.button.action:focus-visible:not(.disabled) {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    box-shadow: none;
}

body.modern-ux #PnlFormDefine fieldset.box .button-container a.button.action.disabled,
body.modern-ux #PnlFormDefine fieldset.box .button-container a.button.action.disabled:hover,
body.modern-ux #PnlFormDefine fieldset.box .button-container a.button.action.disabled:active {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

body.modern-ux #PnlFormDefine .col-md-6 fieldset.box table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

body.modern-ux #PnlFormDefine .col-md-6 fieldset.box table td:first-child {
    width: 7rem;
    max-width: 42%;
    padding-right: 0.5rem;
    vertical-align: top;
    box-sizing: border-box;
}

body.modern-ux #PnlFormDefine .col-md-6 fieldset.box .button-container {
    padding-left: calc(7rem + 0.5rem);
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Table-rendered forms (e.g. EDC FormRenderer tr/td layout): label cells and alignment
   ------------------------------------------------------------------------- */
body.modern-ux .FieldLabel,
body.modern-ux .FieldLabelSide,
body.modern-ux .FieldLabelTop {
    box-sizing: border-box;
    font-family: var(--mux-font-family);
    font-size: var(--mux-font-size);
    line-height: var(--mux-line-height);
    color: var(--foreground);
}

body.modern-ux .FieldLabelContent,
body.modern-ux .FormLabelCell,
body.modern-ux .spnVar {
    font-family: var(--mux-font-family);
    font-size: var(--mux-font-size);
    line-height: var(--mux-line-height);
    color: var(--foreground);
    box-sizing: border-box;
}

/* FieldLabelContent is often on the <td> itself (e.g. categorical matrix). display:block breaks table layout
   and overlaps the next column; keep table cells as table-cell and only block-wrap nested label nodes. */
body.modern-ux table :is(td, th).FieldLabelContent {
    display: table-cell;
    float: none;
    width: auto;
    max-width: 100%;
    padding: 0.25rem 0.5rem 0.25rem 0;
    box-sizing: border-box;
}

body.modern-ux table .FieldLabelContent:not(td):not(th) {
    display: block;
    padding: 0.25rem 0;
}

/* Table label cells — ds-label parity */
body.modern-ux table .FormLabelCell {
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

body.modern-ux span.FieldLabelContent {
    float: none;
}

body.modern-ux div.SideContainer {
    display: inline-flex;
    align-items: center;
}

/* Categorical checkbox matrix: center row content with SideContainer (legacy cells use vertical-align: top) */
body.modern-ux .CategoricalTable tr.FieldCell > td,
body.modern-ux .CategoricalTable > tbody > tr:first-child > td {
    vertical-align: middle;
}

body.modern-ux .CategoricalTable .CategoricalTableCatHdrCell,
body.modern-ux .CategoricalTable .CategoricalTableVarNameCell,
body.modern-ux .CategoricalTable .CategoricalTableCtrlCell {
    vertical-align: middle;
}

body.modern-ux td.SideContainer {
    display: table-cell;
    vertical-align: middle;
}

/* Override EditMeasurePtData_New.css .SideContainer / .SideContainer * { vertical-align: top } in categorical rows */
body.modern-ux .CategoricalTable td.SideContainer * {
    vertical-align: middle;
}

/* Categorical matrix: even option columns (rich-text headers no longer stretch some columns more than others).
   eCRF uses table.CategoricalTable; ePRO uses table.form-table-layout (see BaseStudyDataEditorControl). */
body.modern-ux table.CategoricalTable,
body.modern-ux table.form-table-layout:has(.CategoricalTableCatHdrCell) {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux table.CategoricalTable > tbody > tr > :first-child,
body.modern-ux table.form-table-layout:has(.CategoricalTableCatHdrCell) > tbody > tr > :first-child {
    width: 26%;
    min-width: 10rem;
    max-width: 40%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    vertical-align: middle;
}

/* Option column headers: legacy .table-column-auto-size used word-break:break-word and crushed short labels */
body.modern-ux table.CategoricalTable .CategoricalTableCatHdrCell,
body.modern-ux table.form-table-layout:has(.CategoricalTableCatHdrCell) .CategoricalTableCatHdrCell {
    word-break: normal;
    overflow-wrap: break-word;
}

body.modern-ux table.CategoricalTable .CategoricalTableCtrlCell,
body.modern-ux table.form-table-layout:has(.CategoricalTableCatHdrCell) .CategoricalTableCtrlCell {
    min-width: 4.5rem;
}

body.modern-ux table.CategoricalTable > tbody > tr > td.CategoricalTableValdCell,
body.modern-ux table.form-table-layout:has(.CategoricalTableCatHdrCell) > tbody > tr > td.CategoricalTableValdCell {
    width: 3.25rem;
    max-width: 6%;
    min-width: 2.5rem;
    vertical-align: middle;
}

body.modern-ux table.form-table-layout:has(.CategoricalTableCatHdrCell) > tbody > tr > td,
body.modern-ux table.form-table-layout:has(.CategoricalTableCatHdrCell) > tbody > tr > th {
    vertical-align: middle;
}

body.modern-ux table.form-table-layout:has(.CategoricalTableCatHdrCell) .CategoricalTableCatHdrCell,
body.modern-ux table.form-table-layout:has(.CategoricalTableCatHdrCell) .CategoricalTableVarNameCell,
body.modern-ux table.form-table-layout:has(.CategoricalTableCatHdrCell) .CategoricalTableCtrlCell {
    vertical-align: middle;
}

/* Tabular subform grid (table.SubFormTable): vertically center all top-level cells (header, RowNumberCell,
   FieldCell, footer). Nested .DatePicker tables are not direct tbody>tr>td children, so inner layout unchanged. */
body.modern-ux table.SubFormTable > tbody > tr > td,
body.modern-ux table.SubFormTable > tbody > tr > th {
    vertical-align: middle;
}

/* Tabular subform grid: first column plain .Control vs DatePicker/time/select —
   legacy td/Control use vertical-align:top; date cells use input + img.ui-datepicker-trigger (common.css top:3px), so q1 sat high. */
body.modern-ux table.SubFormTable tr.SubFormRow .Control {
    vertical-align: middle;
}

body.modern-ux table.SubFormTable td.FieldCell .SideContainer,
body.modern-ux table.SubFormTable td.FieldCell .SideContainer * {
    vertical-align: middle;
}

body.modern-ux table.SubFormTable .DatePicker tr:first-child td {
    vertical-align: middle;
}

body.modern-ux table.SubFormTable .DatePicker img.ui-datepicker-trigger {
    position: relative;
    top: 0;
    vertical-align: middle;
}

/* EditCollectionPtData_New: #form-pod-container > div:first-child { overflow-x:auto } clips --mux-focus-ring on first-column fields */
body.modern-ux #form-pod-container > div:first-child {
    padding-inline: 6px;
    padding-block: 4px;
    box-sizing: border-box;
}

/* EditCollectionPtData_New: form list open — split column radii (global .pod uses --radius-md; #form-list used 4px in page CSS) */
body.modern-ux #form-pod-container:has(#form-list-container.form-list-opened) > .pod {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

body.modern-ux #form-pod-container:has(#form-list-container.form-list-opened) > .pod > header#form-header {
    border-radius: var(--radius-md) 0 0 0;
}

body.modern-ux #form-pod-container:has(#form-list-container.form-list-opened) > #form-list-container.form-list-opened {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    overflow: hidden;
    box-sizing: border-box;
}

body.modern-ux #form-pod-container:has(#form-list-container.form-list-opened) #form-list {
    border-radius: var(--radius-md);
}

/* EditCollectionPtData_New: align FieldLabel + Control + SideContainer on one row (avoid table-row .FieldCell) */
/*body.modern-ux #PnlPageContent #DivFormContents > div.FieldCell {
    display: flex;
    align-items: center;
}*/

/* Data entry: query / approval / toolbar icons — EditMeasurePtData_New.css .SideContainer * { vertical-align: top }
   misaligns items vs each other and vs .Control (e.g. DatePicker + UnambiguousDate two-row block). */
body.modern-ux #PnlPageContent .FieldCell > .SideContainer {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center;
    flex-wrap: nowrap;
    vertical-align: middle !important;
}

body.modern-ux #PnlPageContent .FieldCell > .SideContainer * {
    vertical-align: middle !important;
}

body.modern-ux #PnlPageContent .FieldCell > .SideContainer .tool-bar.mini {
    display: inline-flex !important;
    align-items: center !important;
}

/* DatePicker: common.css trigger top:3px fights middle alignment next to modern input height */
body.modern-ux #PnlPageContent .FieldCell .DatePicker img.ui-datepicker-trigger {
    top: 0 !important;
    vertical-align: middle !important;
}

body.modern-ux #PnlPageContent .FieldCell .DatePicker tr:first-child td {
    vertical-align: middle !important;
}

/* -------------------------------------------------------------------------
 * EditMultipleSubjectData.aspx — matrix (medrio_id=subjectsResultList) + AutoFill (#pnlAutoFill).
 * Column headers (th) vs ul.FieldCell controls: reset list indent and center row content with headers.
 * AutoFill: EditMultipleSubjectData.css used different margin-top on .FieldLabel (10px) vs .FieldCell (4px).
 * ------------------------------------------------------------------------- */
body.modern-ux .resultTblContainer table.matrix[medrio_id="subjectsResultList"] thead th,
body.modern-ux .resultTblContainer table.matrix[medrio_id="subjectsResultList"] tbody td {
    vertical-align: middle;
    text-align: start;
}

body.modern-ux .resultTblContainer table.matrix[medrio_id="subjectsResultList"] ul.FieldCell,
body.modern-ux .resultTblContainer table.matrix[medrio_id="subjectsResultList"] ul.HeaderFieldCell {
    margin: 0;
    padding: 0;
    padding-inline-start: 0;
    list-style: none;
    box-sizing: border-box;
}

body.modern-ux .resultTblContainer table.matrix[medrio_id="subjectsResultList"] ul.FieldCell > li,
body.modern-ux .resultTblContainer table.matrix[medrio_id="subjectsResultList"] ul.HeaderFieldCell > li {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

body.modern-ux .resultTblContainer table.matrix[medrio_id="subjectsResultList"] ul.FieldCell > li:has(textarea),
body.modern-ux .resultTblContainer table.matrix[medrio_id="subjectsResultList"] ul.HeaderFieldCell > li:has(textarea) {
    align-items: flex-start;
}

body.modern-ux .resultTblContainer table.matrix[medrio_id="subjectsResultList"] ul.FieldCell > li .Control,
body.modern-ux .resultTblContainer table.matrix[medrio_id="subjectsResultList"] ul.HeaderFieldCell > li .Control {
    vertical-align: middle;
}

body.modern-ux #pnlAutoFill .FieldLabel,
body.modern-ux #pnlAutoFill .FieldCell {
    margin-top: 0;
}

body.modern-ux #pnlAutoFill table td {
    vertical-align: middle;
}

body.modern-ux #pnlAutoFill .FieldLabel {
    display: inline-flex;
    align-items: center;
}

/* Keep label table layout stable (label is in table > tr > td > .FieldLabelContent) */
body.modern-ux .FieldLabel table {
    table-layout: fixed;
    width: 100%;
}

body.modern-ux .FieldLabel td {
    vertical-align: top;
    box-sizing: border-box;
}

/* Optional: labels as block (often used in forms) */
body.modern-ux label:has(input[type="text"]:not(.ui-dialog *, .cdk-overlay-container *):not(.rcbInput)),
body.modern-ux label:has(input[type="email"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="password"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="number"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="tel"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="url"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="search"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="date"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="time"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="month"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="week"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="datetime-local"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(textarea),
body.modern-ux label:has(select) {
    display: block;
}

/* Native + Angular labels that wrap checkbox/radio (excl. dialog/overlay). No padding/min-height on this rule. */
body.modern-ux label:has(input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *)),
body.modern-ux label:has(input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *)) {
    display: inline-flex;
    border-radius: var(--radius);
}

body.modern-ux input#chkSDTMVariable:not(.ui-dialog *, .cdk-overlay-container *) {
    margin: 12px;
}

/* med-input: medrio-core input shell — host padding + borderless .native-input; empty affix slots + gap:0 so
   text meets the inner edge like design.medrio.com/medrio-core/input (Stencil: prefix/suffix divs, no flex gap). */
body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    /* Affix spacing only via .med-input-prefix-slot:has(> *) / suffix (below), not uniform flex gap */
    gap: 0;
    box-sizing: border-box;
    vertical-align: middle;
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    color: var(--mux-color-text);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    height: var(--mux-field-control-height);
    min-height: var(--mux-field-control-min-height);
    padding: var(--mux-field-control-padding);
    max-width: 24rem;
    box-shadow: none;
    transition: var(--mux-transition);
}

/* med-input multiline (textarea): single-line height + centered alignment breaks layout; inline
   width/height from the component leave the resize grip misaligned with the host border-radius. */
body.modern-ux med-input:has(textarea.native-input):not(.ui-dialog *, .cdk-overlay-container *) {
    height: auto !important;
    /* Host padding + textarea min-height so inner box isn’t clipped */
    min-height: calc(80px + 2 * var(--mux-field-control-padding-y));
    align-items: flex-start;
    align-self: flex-start;
    max-width: none;
}

body.modern-ux med-input:has(textarea.native-input):not(.ui-dialog *, .cdk-overlay-container *) .native-input {
    flex: 1 1 auto;
    width: 100% !important;
    min-height: 80px !important;
    height: auto !important;
    resize: vertical;
    box-sizing: border-box;
    padding-top: 0.125rem;
}

body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *):hover:not([disabled]):not([aria-disabled="true"]):not(:focus-within) {
    border-color: var(--mux-color-text);
    background-color: var(--input-background);
    box-shadow: none;
}

body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *):focus-within {
    border-width: 1px;
    border-color: var(--mux-color-border-focus);
    outline: none;
    box-shadow: var(--mux-focus-ring);
    background-color: var(--input-background);
}

body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *):focus-within:hover {
    border-color: var(--mux-color-border-focus);
    background-color: var(--input-background);
    box-shadow: var(--mux-focus-ring);
}

/* :focus-within — keep same padding as unfocused (1px border + ring; no 2px compensation) */
body.modern-ux med-input.med-input-with-prefix-icon:not(.ui-dialog *, .cdk-overlay-container *):focus-within {
    padding-left: calc(var(--mux-field-control-padding-x) + 0.125rem);
    padding-right: var(--mux-field-control-padding-x);
    padding-top: var(--mux-field-control-padding-y);
    padding-bottom: var(--mux-field-control-padding-y);
}

body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *)[disabled],
body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *)[aria-disabled="true"] {
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: 0.9;
}

body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) med-label,
body.modern-ux .sc-med-form-field-s>.med-input:not(.ui-dialog *, .cdk-overlay-container *) med-label,
body.modern-ux .sc-med-form-field-s>.med-password-input:not(.ui-dialog *, .cdk-overlay-container *) med-label {
    position: absolute;
    top: 50%;
    left: var(--mux-field-control-padding-x);
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
    max-width: calc(100% - 2 * var(--mux-field-control-padding-x));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prefix: label clears icon — uses same horizontal inset token as host padding */
body.modern-ux .sc-med-form-field-s > .med-input.med-input-with-prefix-icon:not(.ui-dialog *, .cdk-overlay-container *) med-label,
body.modern-ux med-input.med-input-with-prefix-icon:not(.ui-dialog *, .cdk-overlay-container *) med-label {
    left: calc(var(--mux-field-control-padding-x) + 1.5rem + 0.375rem);
    max-width: calc(100% - var(--mux-field-control-padding-x) - 1.5rem - 0.375rem - var(--mux-field-control-padding-x));
}

/* Prefix icon: asymmetric horizontal padding + field vertical padding */
body.modern-ux med-input.med-input-with-prefix-icon:not(.ui-dialog *, .cdk-overlay-container *) {
    padding-left: calc(var(--mux-field-control-padding-x) + 0.125rem);
    padding-right: var(--mux-field-control-padding-x);
    padding-top: var(--mux-field-control-padding-y);
    padding-bottom: var(--mux-field-control-padding-y);
}

body.modern-ux med-input.med-input-with-prefix-icon:not(.ui-dialog *, .cdk-overlay-container *) .med-input-prefix-slot:not(:empty) {
    width: auto !important;
    min-width: 1.5rem;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    box-sizing: border-box;
    /* Match the field’s text line so the icon centers with med-label / caret, not only the inner input box */
    min-height: calc(var(--mux-line-height) * 1em);
}

body.modern-ux med-input.med-input-with-prefix-icon:not(.ui-dialog *, .cdk-overlay-container *) .med-input-prefix-slot med-icon,
body.modern-ux med-input.med-input-with-prefix-icon:not(.ui-dialog *, .cdk-overlay-container *) .med-input-prefix-slot .material-icons {
    margin: 0 !important;
    left: auto !important;
    transform: none !important;
}

/* Material Icons glyphs often sit optically high vs. Geist label text — nudge down to align with med-label */
body.modern-ux med-input.med-input-with-prefix-icon:not(.ui-dialog *, .cdk-overlay-container *) .med-input-prefix-slot med-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

body.modern-ux med-input.med-input-with-prefix-icon:not(.ui-dialog *, .cdk-overlay-container *) .med-input-prefix-slot .material-icons {
    display: block;
    line-height: var(--lh-none);
    position: relative;
    top: 0.08em;
}

body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) .med-input-prefix-slot,
body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) .med-input-suffix {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

/* Collapse affix columns when no projected element content (:empty misses whitespace-only slots; matches medrio-core “simple input”). */
body.modern-ux med-input .med-input-prefix-slot:not(:has(> *)),
body.modern-ux med-input .med-input-suffix:not(:has(> *)) {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: none !important;
    flex: 0 0 0 !important;
}

/* Inset between affix columns and .native-input only when a slot renders content (gap:0 avoids space after empty prefix). */
body.modern-ux med-input .med-input-prefix-slot:has(> *) {
    margin-inline-end: 0.35rem;
}

body.modern-ux med-input .med-input-suffix:has(> *) {
    margin-inline-start: 0.35rem;
}

/* Material-style bottom line not used when using full border */
body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) .med-input-underline {
    display: none;
}

/* Inner input: no second box (global input[type=text] rules also match this node — reset with !important) */
body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) .native-input {
    flex: 1;
    min-width: 0;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0;
    /* Horizontal inset comes from the host — inner left padding shifts the caret away from index 0 visually */
    padding: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    font: inherit;
    color: inherit;
    line-height: inherit;
    text-align: start !important;
    text-indent: 0;
}

body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) .native-input:hover,
body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) .native-input:focus,
body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) .native-input:focus-visible,
body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) .native-input:active {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none;
}

/* Host med-input already shows :focus-within border; inner outline duplicates and can look broken with prefix layout */
body.modern-ux med-input:not(.ui-dialog *, .cdk-overlay-container *) .native-input:focus-visible {
    outline: none;
}

/*
 * med-input inside CDK overlays (dialogs): base med-input rules use :not(.cdk-overlay-container *) so
 * border/background never apply in subject-detail and similar — restore full enclosing chrome (match page inputs).
 */
body.modern-ux med-form-field.email-form-field {
    display: block;
    width: 100%;
    max-width: none;
}

body.modern-ux med-form-field.email-form-field med-input.email-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    /* gap would insert space after a zero-width prefix slot (overlay slots skip global :empty collapse) */
    gap: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    vertical-align: middle;
    font-family: var(--mux-font-family);
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    color: var(--mux-color-text);
    background-color: var(--input-background);
    border: 1px solid var(--mux-secondary-dark);
    border-radius: var(--mux-radius);
    padding: var(--mux-field-control-padding);
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    box-shadow: none;
    transition: var(--mux-transition);
}

body.modern-ux med-form-field.email-form-field med-input.email-input:hover:not([disabled]):not([aria-disabled="true"]):not(:focus-within) {
    border-color: var(--mux-color-text);
    background-color: var(--input-background);
    box-shadow: none;
}

body.modern-ux med-form-field.email-form-field med-input.email-input:focus-within {
    border-width: 1px;
    border-color: var(--mux-color-border-focus);
    outline: none;
    box-shadow: var(--mux-focus-ring);
    background-color: var(--input-background);
    padding: var(--mux-field-control-padding);
}

body.modern-ux med-form-field.email-form-field med-input.email-input:focus-within:hover {
    border-color: var(--mux-color-border-focus);
    background-color: var(--input-background);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux med-form-field.email-form-field med-input.email-input[disabled],
body.modern-ux med-form-field.email-form-field med-input.email-input[aria-disabled="true"] {
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: 0.9;
    border-color: var(--border);
}

body.modern-ux med-form-field.email-form-field med-input.email-input med-label {
    position: absolute;
    top: 50%;
    left: var(--mux-field-control-padding-x);
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
    max-width: calc(100% - 2 * var(--mux-field-control-padding-x));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.modern-ux med-form-field.email-form-field med-input.email-input .med-input-underline {
    display: none;
}

body.modern-ux med-form-field.email-form-field med-input.email-input .native-input {
    flex: 1;
    min-width: 0;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    font: inherit;
    color: inherit;
    line-height: inherit;
    text-align: start !important;
    text-indent: 0;
}

body.modern-ux med-form-field.email-form-field med-input.email-input .native-input:hover,
body.modern-ux med-form-field.email-form-field med-input.email-input .native-input:focus,
body.modern-ux med-form-field.email-form-field med-input.email-input .native-input:focus-visible,
body.modern-ux med-form-field.email-form-field med-input.email-input .native-input:active {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none;
}

body.modern-ux med-form-field.email-form-field med-input.email-input .native-input:focus-visible {
    outline: none;
}

body.modern-ux med-form-field.email-form-field .med-form-field-infix.sc-med-form-field {
    padding: 0;
    width: 100%;
}

body.modern-ux med-form-field.email-form-field .med-form-field-underline {
    display: none !important;
}

/* Subscript / med-hint: keep error text below the bordered med-input (no overlap with bottom edge) */
body.modern-ux med-form-field.email-form-field .med-form-field-wrapper.sc-med-form-field,
body.modern-ux med-form-field.email-form-field .med-form-field-flex.sc-med-form-field {
    overflow: visible !important;
}

body.modern-ux med-form-field.email-form-field .med-form-field-subscript-wrapper.sc-med-form-field {
    margin-top: var(--space-3) !important;
    padding-top: var(--space-2) !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

body.modern-ux med-form-field.email-form-field .med-form-field-hint-wrapper.sc-med-form-field {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.modern-ux med-form-field.email-form-field med-hint.med-default-hint {
    display: block;
    line-height: 1.25rem;
    padding-top: 0;
}

body.modern-ux med-form-field.email-form-field:is(.med-err-invalid, :has(med-input.med-err-invalid)) med-hint.med-default-hint {
    color: var(--destructive) !important;
}

/* Let floated label + hints paint outside the fixed-height input / infix (Stencil defaults often clip) */
body.modern-ux med-form-field.email-form-field:is(.med-err-invalid, :has(med-input.med-err-invalid)) med-input.email-input {
    overflow: visible !important;
}

body.modern-ux med-form-field.email-form-field:is(.med-err-invalid, :has(med-input.med-err-invalid)) .med-form-field-infix.sc-med-form-field {
    overflow: visible !important;
}

/* Invalid + value: float label above the box (global med-has-value rule skips errors — see below) */
body.modern-ux med-form-field.email-form-field.med-has-value:is(.med-err-invalid, :has(med-input.med-err-invalid)) med-input.email-input med-label,
body.modern-ux med-form-field.email-form-field.med-has-value:is(.med-err-invalid, :has(med-input.med-err-invalid)) med-input.email-input:focus-within med-label {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    top: auto !important;
    bottom: 100% !important;
    left: var(--mux-field-control-padding-x) !important;
    transform: translateY(-0.375rem) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    color: var(--text-secondary) !important;
    max-width: calc(100% - 2 * var(--mux-field-control-padding-x)) !important;
}

body.modern-ux.dark med-form-field.email-form-field.med-has-value:is(.med-err-invalid, :has(med-input.med-err-invalid)) med-input.email-input med-label,
body.modern-ux.dark med-form-field.email-form-field.med-has-value:is(.med-err-invalid, :has(med-input.med-err-invalid)) med-input.email-input:focus-within med-label,
body.modern-ux.medrio.dark med-form-field.email-form-field.med-has-value:is(.med-err-invalid, :has(med-input.med-err-invalid)) med-input.email-input med-label,
body.modern-ux.medrio.dark med-form-field.email-form-field.med-has-value:is(.med-err-invalid, :has(med-input.med-err-invalid)) med-input.email-input:focus-within med-label {
    color: var(--mux-color-text-muted) !important;
}

/* Floated label sits above the bordered input (bottom:100%); pad the field so it does not draw over the prior row (e.g. Remote radios in Add Subject). */
body.modern-ux med-form-field.email-form-field.med-has-value:is(.med-err-invalid, :has(med-input.med-err-invalid)) {
    padding-top: calc(var(--mux-fs-rem-875) + var(--space-3)) !important;
    box-sizing: border-box;
}

/*
 * Notifications — Email tab: subject + “Placeholders” icon (sibling of med-input in infix).
 * Without a flex row, the icon aligns to the text baseline and sits visually low vs. the input chrome.
 */
body.modern-ux med-form-field:has(.subject-tokens-button-wrapper) .med-form-field-flex {
    display: flex;
    align-items: center;
}

body.modern-ux med-form-field .med-form-field-infix:has(.subject-tokens-button-wrapper) {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.modern-ux med-form-field .med-form-field-infix:has(.subject-tokens-button-wrapper) > med-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
}

body.modern-ux .subject-tokens-button-wrapper {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    margin: 0 !important;
    line-height: 0;
}

body.modern-ux .subject-tokens-button-wrapper med-button.subject-tokens-button,
body.modern-ux .subject-tokens-button-wrapper med-button {
    margin: 0 !important;
    vertical-align: middle;
}

/* Angular Material mat-form-field.search-input (legacy + med-icon prefix): Form/variable permission dialogs, config search — same --mux-field-control-* as med-input */
body.modern-ux mat-form-field.search-input.mat-form-field .mat-form-field-wrapper {
    padding-bottom: 0;
    overflow: visible;
}

body.modern-ux mat-form-field.search-input.mat-form-field .mat-form-field-flex {
    display: flex;
    align-items: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Border + fill on infix (icon + input + label) — same --mux-field-control-* as med-input / legacy mat-select */
body.modern-ux mat-form-field.search-input.mat-form-field.mat-form-field-appearance-legacy .mat-form-field-infix {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem;
    position: relative;
    box-sizing: border-box;
    /* visible: overflow:hidden clips the absolute .clear (mat-mini-fab) on the right; prefix icon kept by padding + med-icon rules */
    overflow: visible;
    min-height: var(--mux-field-control-min-height);
    height: var(--mux-field-control-height);
    width: 100%;
    margin: 0 !important;
    padding: var(--mux-field-control-padding) !important;
    padding-left: calc(var(--mux-field-control-padding-x) + 0.125rem) !important;
    padding-right: calc(var(--mux-field-control-padding-x) + 0.125rem) !important;
    border: 1px solid var(--mux-secondary-dark) !important;
    border-radius: var(--mux-radius);
    background-color: var(--input-background);
    box-shadow: none;
    transition: var(--mux-transition);
}

body.modern-ux mat-form-field.search-input.mat-form-field:not(:focus-within):not(.mat-focused):hover .mat-form-field-infix {
    border-color: var(--mux-color-text) !important;
    background-color: var(--input-background) !important;
    box-shadow: none !important;
}

body.modern-ux mat-form-field.search-input.mat-form-field:focus-within .mat-form-field-infix,
body.modern-ux mat-form-field.search-input.mat-form-field.mat-focused .mat-form-field-infix {
    border-width: 1px !important;
    border-color: var(--mux-color-border-focus) !important;
    padding: var(--mux-field-control-padding) !important;
    padding-left: calc(var(--mux-field-control-padding-x) + 0.125rem) !important;
    padding-right: calc(var(--mux-field-control-padding-x) + 0.125rem) !important;
    background-color: var(--input-background);
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux mat-form-field.search-input.mat-form-field:focus-within:hover .mat-form-field-infix,
body.modern-ux mat-form-field.search-input.mat-form-field.mat-focused:hover .mat-form-field-infix {
    border-color: var(--mux-color-border-focus) !important;
    background-color: var(--input-background);
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux mat-form-field.search-input .mat-form-field-label-wrapper {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    overflow: hidden;
    padding-top: 0 !important;
}

body.modern-ux mat-form-field.search-input .mat-form-field-label {
    left: calc(var(--mux-field-control-padding-x) + 0.125rem + 1.5rem + 0.35rem) !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100% - 2 * var(--mux-field-control-padding-x) - 2 * 0.125rem - 1.5rem - 0.35rem) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    line-height: var(--mux-line-height) !important;
    overflow: visible !important;
}

/* Empty label: center vertically in infix without Material’s legacy translateY that clips text */
body.modern-ux mat-form-field.search-input .mat-form-field-label.mat-empty {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

body.modern-ux mat-form-field.search-input .mat-form-field-label mat-placeholder.placeholder {
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--mux-field-control-font-size) !important;
    color: var(--muted-foreground) !important;
}

body.modern-ux mat-form-field.search-input .mat-form-field-underline,
body.modern-ux mat-form-field.search-input .mat-form-field-underline .mat-form-field-ripple {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

body.modern-ux mat-form-field.search-input input.mat-input-element {
    flex: 1 1 auto;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-field-control-font-size) !important;
    line-height: var(--mux-line-height) !important;
    color: var(--foreground) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
}

body.modern-ux mat-form-field.search-input input.mat-input-element:focus-visible {
    outline: none;
}

/* Component sets med-icon.search-icon { top: 4px }; neutralize inside legacy mat-form-field search */
body.modern-ux mat-form-field.search-input.mat-form-field .mat-form-field-wrapper med-icon.search-icon {
    top: 0 !important;
}

body.modern-ux mat-form-field.search-input med-icon.search-icon,
body.modern-ux mat-form-field.search-input med-icon {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 0;
    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    left: auto !important;
    transform: none !important;
    position: relative !important;
    box-sizing: border-box;
}

body.modern-ux mat-form-field.search-input med-icon .material-icons {
    display: block;
    line-height: var(--lh-none);
    margin: 0 !important;
    position: relative;
    top: 0.08em;
    left: auto !important;
    transform: none !important;
}

/* Template: div[mat-mini-fab].clear — position absolute; infix overflow was clipping the circle */
body.modern-ux mat-form-field.search-input.mat-form-field .mat-form-field-infix .clear[mat-mini-fab],
body.modern-ux mat-form-field.search-input .mat-form-field-infix .clear {
    flex-shrink: 0;
    z-index: 1;
    right: 0.125rem !important;
    box-sizing: border-box;
}

body.modern-ux .med-form-field-infix.sc-med-form-field {
    padding: 5px 0;
}

body.modern-ux .med-form-field-wrapper.sc-med-form-field {
    padding-bottom: 0.5em;
}

/* Duplicate bottom line: med-input / med-select already use full border chrome */
body.modern-ux med-form-field:has(med-input) .med-form-field-underline.sc-med-form-field,
body.modern-ux med-form-field:has(med-select) .med-form-field-underline.sc-med-form-field {
    display: none !important;
}

/*
 * edit_deploy.aspx — #select-study: stack label above control (ds-field), not Material floating label.
 * med-form-field-select defaults (narrow infix, scaled label) fight @medrio/core; override here only.
 * Fixed column width + float both columns — width:100% on the field was expanding the float and letting
 * #deploy-to overlap “Deploy from”, which blocked reopening the select.
 */
body.modern-ux #select-study #deploy-from,
body.modern-ux #select-study #deploy-to {
    float: left;
}

body.modern-ux #select-study::after {
    content: "";
    display: table;
    clear: both;
}

body.modern-ux #select-study med-form-field.med-form-field-select {
    display: inline-block;
    width: 350px;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: top;
}

body.modern-ux #select-study med-form-field.med-form-field-select .med-form-field-flex.sc-med-form-field {
    display: block;
    width: 100%;
}

body.modern-ux #select-study med-form-field.med-form-field-select .med-form-field-infix.sc-med-form-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 !important;
    border-top: none !important;
    width: 100% !important;
    max-width: none;
    min-width: 0 !important;
    position: relative;
    top: auto !important;
}

body.modern-ux #select-study med-form-field.med-form-field-select .med-form-field-wrapper.sc-med-form-field {
    padding-bottom: 0;
}

/* ds-label parity — reset med-form-field-should-float positioning on slotted med-label */
body.modern-ux #select-study med-form-field.med-form-field-select med-label {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 0 var(--space-1) 0 !important;
    pointer-events: none !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    color: var(--text-primary) !important;
}

body.modern-ux #select-study med-form-field.med-form-field-select.med-focused med-label {
    color: var(--text-primary) !important;
}

body.modern-ux #select-study med-form-field.med-form-field-select med-label label.native-label {
    display: block;
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    margin: 0;
    padding: 0 !important;
}

/* ds-input / .ds-select parity on med-select host (caret: @medrio/core shadow .nav-icon) */
body.modern-ux #select-study med-form-field.med-form-field-select med-select {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: none;
    min-width: 0 !important;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-1);
    line-height: var(--mux-ds-select-line-height) !important;
    color: var(--text-primary);
    background-color: var(--bg);
    border: 1px solid var(--gray-600);
    border-radius: var(--radius-md);
    padding: var(--mux-ds-select-pad-y) var(--mux-ds-select-pad-inline-end) var(--mux-ds-select-pad-y)
        var(--mux-ds-select-pad-inline-start);
    height: var(--mux-ds-select-height);
    min-height: var(--mux-ds-select-height);
    max-height: var(--mux-ds-select-height);
    overflow: hidden;
    appearance: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

body.modern-ux #select-study med-form-field.med-form-field-select med-select:hover:not([disabled]):not([aria-disabled="true"]):not(:focus-within):not([aria-expanded="true"]) {
    border-color: var(--text-primary);
    background-color: var(--bg);
    box-shadow: none;
}

body.modern-ux #select-study med-form-field.med-form-field-select med-select:focus,
body.modern-ux #select-study med-form-field.med-form-field-select med-select:focus-within,
body.modern-ux #select-study med-form-field.med-form-field-select med-select[aria-expanded="true"] {
    border-width: 1px;
    border-color: var(--mux-color-border-focus);
    outline: none;
    box-shadow: var(--mux-focus-ring);
    background-color: var(--bg);
    padding: var(--mux-ds-select-pad-y) var(--mux-ds-select-pad-inline-end) var(--mux-ds-select-pad-y)
        var(--mux-ds-select-pad-inline-start);
}

body.modern-ux #select-study med-form-field.med-form-field-select med-select:focus-within:hover,
body.modern-ux #select-study med-form-field.med-form-field-select med-select[aria-expanded="true"]:hover:not([disabled]) {
    border-color: var(--mux-color-border-focus);
    background-color: var(--bg);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux #select-study med-form-field.med-form-field-select med-select[disabled],
body.modern-ux #select-study med-form-field.med-form-field-select med-select[aria-disabled="true"] {
    background-color: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: 0.9;
}

/* -------------------------------------------------------------------------
   edit_deploy.aspx — page chrome beyond #select-study (Configure Study > Deployment).
   Shell (.buildStudyContent, left rail, header.major) is covered above; this block adds
   section titles, step cards, active-users tabs, mc-table, PCR copy, dialogs.
   ------------------------------------------------------------------------- */
body.modern-ux #deploy-content > h4.mc-header {
    margin: 0 0 var(--space-4) 0;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

body.modern-ux #deploy-content .getting-started-title {
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    margin: var(--space-2) 0 var(--space-2) 0;
}

body.modern-ux #deploy-content .getting-started-title + ul {
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-wide);
    color: var(--text-primary);
}

body.modern-ux #deploy-content-section med-toolbar .med-main-toolbar span.mc-header {
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-1);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--text-primary);
}

body.modern-ux #deploy-content-section med-radio-group {
    font-family: var(--font-family);
}

body.modern-ux #pending-changes-report-message {
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-normal);
    line-height: var(--lh-wide);
    color: var(--text-primary);
    width: 100%;
    max-width: 100%;
}

/* Suppress horizontal scrollbar on the Current Active Users med-tab panel */
body.modern-ux #deploy-content .med-tab-body-content {
    overflow-x: hidden;
}

body.modern-ux #deploy-content .text-14 {
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-normal);
}

body.modern-ux #deploy-content .jobStatusMessageText {
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-875);
    color: var(--text-secondary);
}

body.modern-ux #deploy-content-section med-card.med-flat-card {
    border: 1px solid var(--border-color);
    background: var(--bg);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
}

body.modern-ux #deploy-content .med-card-active {
    border-color: var(--brand-dark) !important;
    box-shadow: var(--shadow-sm);
}

body.modern-ux #deploy-content-section table.mc-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-normal);
    color: var(--text-primary);
}

body.modern-ux #deploy-content-section table.mc-table thead th {
    text-align: left;
    font-weight: var(--fw-bold);
    color: var(--gray-600);
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--border-color);
}

body.modern-ux #deploy-content-section table.mc-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

body.modern-ux #deploy-content-section table.mc-table tbody tr:last-child td {
    border-bottom: none;
}

/* med-tab-group — ds-tab-list / ds-tab parity (Material ink bar hidden; underline on label) */
body.modern-ux #current-active-users med-tab-group .med-tab-list.sc-med-tab-group {
    position: relative;
    border-bottom: 2px solid var(--border-color);
    box-sizing: border-box;
}

body.modern-ux #current-active-users med-tab-group .med-ink-bar.sc-med-tab-group {
    display: none !important;
}

body.modern-ux #current-active-users med-tab-group .med-tab-label.sc-med-tab-group {
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: var(--lh-normal);
    color: var(--gray-800);
    padding: var(--space-3) var(--space-4);
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition);
}

@media (hover: hover) {
    body.modern-ux #current-active-users med-tab-group .med-tab-label.sc-med-tab-group:not([aria-selected="true"]):hover {
        color: var(--mux-primary-darker);
        background-color: var(--mux-primary-darker)0a;
    }
}

body.modern-ux #current-active-users med-tab-group .med-tab-label.sc-med-tab-group[aria-selected="true"] {
    color: #0d5fa8;
    font-weight: 600;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: var(--mux-primary-darker);
    background-color: var(--mux-primary-darker)26;
}

body.modern-ux #current-active-users med-tab-group .med-tab-label.sc-med-tab-group:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -3px;
    z-index: 1;
}

body.modern-ux #deploy-content-section .med-dialog-content .dialog-header-20 {
    margin: 0 0 var(--space-3) 0;
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-125);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-base);
    color: var(--text-primary);
}

body.modern-ux #deploy-content-section .med-dialog-content .dialog-content-size {
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-normal);
    color: var(--text-primary);
}

body.modern-ux #deploy-content-section .med-dialog-content .dialog-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
    vertical-align: middle;
    accent-color: var(--brand);
    cursor: pointer;
}

body.modern-ux #deploy-content-section .med-dialog-content label {
    font-family: var(--font-family);
    font-size: var(--mux-fs-rem-875);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    cursor: pointer;
}

body.modern-ux #deploy-content .warning-icon,
body.modern-ux #deploy-content .download-warning {
    vertical-align: middle;
}

/* edit_deploy — Skip step confirm: icon + h3 row (block h3 + material-icons metrics read visually high) */
body.modern-ux #deploy-content-section med-dialog#confirmSkipStepdialog .med-dialog-content .row.pl-10 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2);
}

body.modern-ux #deploy-content-section med-dialog#confirmSkipStepdialog .med-dialog-content .row.pl-10 .dialog-header-20 {
    margin: 0;
}

body.modern-ux #deploy-content-section med-dialog#confirmSkipStepdialog .med-dialog-content .row.pl-10 .material-icons.warning-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    font-size: var(--mux-fs-rem-125);
}

/* Floating med-label over input: hide when the field has a value.
   Skip invalid fields so “Email *” (etc.) stays meaningful; email-form-field floats label above when invalid+value. */
body.modern-ux med-form-field.med-has-value:not(.med-err-invalid):not(:has(med-input.med-err-invalid)) med-input med-label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Floating med-label: hide while focused — except invalid email-form-field (floated label rules above). */
body.modern-ux med-input:focus-within med-label,
body.modern-ux .sc-med-form-field-s > .med-input:focus-within med-label,
body.modern-ux .sc-med-form-field-s > .med-password-input:focus-within med-label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Invalid Email: never hide label on focus (empty or filled); empty stays centered, filled uses float rules above */
body.modern-ux med-form-field.email-form-field:is(.med-err-invalid, :has(med-input.med-err-invalid)) med-input.email-input:focus-within med-label {
    opacity: 1 !important;
    visibility: visible !important;
}

body.modern-ux med-form-field.email-form-field:is(.med-err-invalid, :has(med-input.med-err-invalid)):not(.med-has-value) med-input.email-input:focus-within med-label {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    font-size: var(--mux-field-control-font-size) !important;
}

body.modern-ux .sc-med-subject-detail-dialog-h .epro-remote.sc-med-subject-detail-dialog {
    padding-bottom: 0;
}

body.modern-ux .time-input {
    width: 86px;
}

body.modern-ux .action-footer {
    height: 45px;
}

/* -------------------------------------------------------------------------
   Home dashboard only — app/home/home.aspx (matches .home-page-content layout)
   Cool gray canvas, white stat + panel cards, blue links. Does not alter other routes.
   ------------------------------------------------------------------------- */
body.modern-ux .page:has(.home-page-content) .page-body,
body.modern-ux .page:has(.home-page-content) .page-contents {
    background-color: #f4f7f9 !important;
}

body.modern-ux .home-page-content {
    padding: 1rem 1.25rem 1.5rem;
    box-sizing: border-box;
}

body.modern-ux .home-page-content .stats-container {
    display: none !important;
}

/* Subjects / Queries: icon + label + value below med-main-toolbar (inside header; JS may move into shadow DOM) */
body.modern-ux .home-page-content .home-panel > med-card.home-panel-inline-stat med-toolbar .med-toolbar-container,
body.modern-ux .home-page-content .home-panel > med-card.home-panel-inline-stat med-toolbar .med-main-toolbar {
    border-bottom: none !important;
}

/* Light-DOM path only — when .panel-inline-stat stays under .home-page-content (no shadow) */
body.modern-ux .home-page-content .panel-inline-stat {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.75rem 0.65rem 0.75rem;
    background: var(--mux-bg-subtle) !important;
    border-bottom: 1px solid var(--mux-color-divider);
}

body.modern-ux .home-page-content .panel-inline-stat med-icon {
    flex-shrink: 0;
}

body.modern-ux .home-page-content .panel-inline-stat-copy {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium);
    line-height: var(--lh-relaxed);
    color: var(--mux-color-text);
}

body.modern-ux .home-page-content .panel-inline-stat-label {
    color: var(--mux-secondary-main);
}

body.modern-ux .home-page-content .panel-inline-stat-value {
    font-weight: var(--fw-semibold);
    color: var(--mux-color-text) !important;
}

/* Same column gutters as .panels-container + .home-panel so stat cards line up with med-cards below */
body.modern-ux .home-page-content .stats-container > .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

body.modern-ux .home-page-content .stats-container > .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

body.modern-ux .home-page-content .stat-container {
    background: var(--background);
    border: 1px solid var(--mux-color-divider);
    border-radius: var(--mux-radius);
    box-shadow: var(--mux-shadow-sm);
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    height: 100%;
}

body.modern-ux .home-page-content .stat-title {
    font-size: var(--mux-fs-rem-75) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mux-secondary-main) !important;
    margin: 0 0 0.25rem 0 !important;
}

body.modern-ux .home-page-content .stat-value {
    font-size: var(--mux-fs-rem-15) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--mux-color-text) !important;
    line-height: var(--lh-tight);
}

body.modern-ux .home-page-content .panels-container {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

/* Equal-height columns + bottom-aligned cards: flex row (BS3 clearfix ::before/::after must not be flex items) */
body.modern-ux .home-page-content .panels-container.row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

body.modern-ux .home-page-content .panels-container.row::before,
body.modern-ux .home-page-content .panels-container.row::after {
    display: none;
    content: "";
}

body.modern-ux .home-page-content .home-panel {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    float: none;
}

/* All home column cards (Subjects uses class="panel"; Data Entry / Queries / Approval use plain med-card — same shell + header chrome) */
body.modern-ux .home-page-content .home-panel > med-card {
    border: 1px solid var(--mux-color-divider) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--mux-shadow-sm) !important;
    background: var(--background) !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

body.modern-ux .home-page-content .home-panel > med-card med-toolbar .med-toolbar-container,
body.modern-ux .home-page-content .home-panel > med-card med-toolbar .med-main-toolbar {
    background: var(--mux-bg-subtle) !important;
    border-bottom: 1px solid var(--mux-color-divider) !important;
}

body.modern-ux .home-page-content .panel-title {
    font-family: var(--mux-font-family);
    font-size: var(--mux-fs-rem-1125) !important;
    font-weight: var(--fw-semibold) !important;
    color: var(--mux-color-text) !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}

body.modern-ux .home-page-content .panel-item-link {
    display: flex !important;
    align-items: center !important;
    color: var(--brand-darker) !important;
    text-decoration: none !important;
    padding: 0.65rem 0.75rem !important;
    margin: 0 !important;
    min-width: 0;
    box-sizing: border-box;
    border-radius: calc(var(--mux-radius) - 2px);
    transition: background-color 0.12s ease, color 0.12s ease;
}

/* Long subject IDs (flex row) must shrink inside med-section scroll area — avoids horizontal scrollbar */
body.modern-ux .home-page-content .panel-item-link > span:first-child {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.modern-ux .home-page-content .panel-item-link:hover {
    background: rgba(30, 127, 204, 0.1) !important;
    color: var(--brand-darker) !important;
}

body.modern-ux .home-page-content .panel-item-link span {
    color: inherit !important;
}

body.modern-ux .home-page-content .panel-search {
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid var(--mux-color-divider);
    background: var(--background);
}

body.modern-ux .home-page-content .panel-search input.riTextBox,
body.modern-ux .home-page-content .panel-search input.data-entry-search {
    border: 1px solid var(--gray-300) !important;
    border-radius: var(--mux-radius) !important;
    font-size: var(--mux-fs-rem-875) !important;
    color: var(--mux-color-text) !important;
    background: var(--background) !important;
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    font-style: normal !important;
}

body.modern-ux .home-page-content .panel-search input.riEmpty {
    color: var(--mux-color-text-muted) !important;
}

body.modern-ux .home-page-content .panel-search input.riFocused {
    border-color: var(--mux-primary-main) !important;
    box-shadow: 0 0 0 3px var(--mux-primary-20) !important;
}

/* Subjects Add — match [CSS-Only-UI-2026](https://onion-steam-49836257.figma.site/) “Small Buttons with Icons” outlined sm (.ds-btn-outlined.ds-btn-sm + icon) */
body.modern-ux .home-page-content .subject-listing-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.modern-ux .home-page-content .subject-listing-actions > span {
    display: inline-flex !important;
    align-items: center !important;
}

/* Subjects — standalone filter med-icon (after Add when visible); same 28px row box as stroked / More (parity with data-listing first column) */
body.modern-ux .home-page-content .subject-listing-actions > span > med-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--mux-fs-18) !important;
    line-height: var(--lh-none) !important;
    vertical-align: middle !important;
}

body.modern-ux .home-page-content .subject-listing-actions > span > med-icon .material-icons,
body.modern-ux .home-page-content .subject-listing-actions > span > med-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--mux-fs-18) !important;
    line-height: var(--lh-none) !important;
    vertical-align: middle !important;
}

/* Data / Query toolbars: flex row so filter_alt med-icon + More med-button share vertical center (match subject-listing-actions) */
body.modern-ux .home-page-content .data-listing-actions,
body.modern-ux .home-page-content .query-listing-actions,
body.modern-ux .home-page-content .approval-listing-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}

body.modern-ux .home-page-content .data-listing-actions > span,
body.modern-ux .home-page-content .query-listing-actions > span,
body.modern-ux .home-page-content .approval-listing-actions > span {
    display: inline-flex !important;
    align-items: center !important;
}

body.modern-ux .home-page-content .data-listing-actions > span span {
    display: inline-flex !important;
    align-items: center !important;
}

/* Filter icon (first column): same 28px row box as More; avoids baseline / line-box drift vs med-button */
body.modern-ux .home-page-content .data-listing-actions > span:first-child med-icon,
body.modern-ux .home-page-content .query-listing-actions > span:first-child med-icon,
body.modern-ux .home-page-content .approval-listing-actions > span:first-child med-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--mux-fs-18) !important;
    line-height: var(--lh-none) !important;
    vertical-align: middle !important;
}

body.modern-ux .home-page-content .data-listing-actions > span:first-child med-icon .material-icons,
body.modern-ux .home-page-content .data-listing-actions > span:first-child med-icon i,
body.modern-ux .home-page-content .query-listing-actions > span:first-child med-icon .material-icons,
body.modern-ux .home-page-content .query-listing-actions > span:first-child med-icon i,
body.modern-ux .home-page-content .approval-listing-actions > span:first-child med-icon .material-icons,
body.modern-ux .home-page-content .approval-listing-actions > span:first-child med-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--mux-fs-18) !important;
    line-height: var(--lh-none) !important;
    vertical-align: middle !important;
}

body.modern-ux .home-page-content .subject-listing-actions med-button[button-type="stroked"]::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--brand-dark) !important;
    background-color: transparent !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family) !important;
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux .home-page-content .subject-listing-actions med-button[button-type="stroked"]::part(button):hover {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

body.modern-ux .home-page-content .subject-listing-actions med-button[button-type="stroked"]::part(button):focus-visible {
    outline: 3px solid var(--mux-primary-main) !important;
    outline-offset: 2px !important;
}

body.modern-ux .home-page-content .subject-listing-actions med-button[button-type="stroked"] med-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    font-size: var(--mux-fs-16) !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    color: inherit !important;
    vertical-align: middle !important;
}

body.modern-ux .home-page-content .subject-listing-actions med-button[button-type="stroked"] med-icon .material-icons,
body.modern-ux .home-page-content .subject-listing-actions med-button[button-type="stroked"] med-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: var(--mux-fs-16) !important;
    width: 16px !important;
    height: 16px !important;
    /* Match line box to box — reduces Material Icons vertical offset vs label */
    line-height: 16px !important;
    color: inherit !important;
    vertical-align: middle !important;
}

/* Home page "More" links — subject / data / query toolbars: one small height (28px sm, matches stroked Add) */
body.modern-ux .home-page-content .subject-listing-actions med-button.med-basic-button.med-primary::part(button),
body.modern-ux .home-page-content .data-listing-actions med-button.med-basic-button.med-primary::part(button),
body.modern-ux .home-page-content .query-listing-actions med-button.med-basic-button.med-primary::part(button),
body.modern-ux .home-page-content .approval-listing-actions med-button.med-basic-button.med-primary::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background-color: transparent !important;
    color: var(--brand-accessible) !important;
    font-family: var(--font-family) !important;
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-none) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux .home-page-content .subject-listing-actions med-button.med-basic-button.med-primary::part(button):hover,
body.modern-ux .home-page-content .data-listing-actions med-button.med-basic-button.med-primary::part(button):hover,
body.modern-ux .home-page-content .query-listing-actions med-button.med-basic-button.med-primary::part(button):hover,
body.modern-ux .home-page-content .approval-listing-actions med-button.med-basic-button.med-primary::part(button):hover {
    background-color: #0d5fa814 !important;
    color: var(--brand-accessible) !important;
}

body.modern-ux .home-page-content .subject-listing-actions med-icon,
body.modern-ux .home-page-content .data-listing-actions med-icon,
body.modern-ux .home-page-content .query-listing-actions med-icon,
body.modern-ux .home-page-content .approval-listing-actions med-icon {
    color: var(--brand-accessible) !important;
}

body.modern-ux .home-page-content .subject-listing-actions med-button.med-basic-button.med-primary::part(button):focus-visible,
body.modern-ux .home-page-content .data-listing-actions med-button.med-basic-button.med-primary::part(button):focus-visible,
body.modern-ux .home-page-content .query-listing-actions med-button.med-basic-button.med-primary::part(button):focus-visible,
body.modern-ux .home-page-content .approval-listing-actions med-button.med-basic-button.med-primary::part(button):focus-visible {
    outline: 3px solid var(--brand) !important;
    outline-offset: 2px !important;
}

body.modern-ux .home-page-content .subject-listing-actions med-button.med-basic-button.med-primary med-icon,
body.modern-ux .home-page-content .subject-listing-actions med-button.med-basic-button.med-primary med-icon .material-icons,
body.modern-ux .home-page-content .subject-listing-actions med-button.med-basic-button.med-primary med-icon i,
body.modern-ux .home-page-content .data-listing-actions med-button.med-basic-button.med-primary med-icon,
body.modern-ux .home-page-content .data-listing-actions med-button.med-basic-button.med-primary med-icon .material-icons,
body.modern-ux .home-page-content .data-listing-actions med-button.med-basic-button.med-primary med-icon i,
body.modern-ux .home-page-content .query-listing-actions med-button.med-basic-button.med-primary med-icon,
body.modern-ux .home-page-content .query-listing-actions med-button.med-basic-button.med-primary med-icon .material-icons,
body.modern-ux .home-page-content .query-listing-actions med-button.med-basic-button.med-primary med-icon i,
body.modern-ux .home-page-content .approval-listing-actions med-button.med-basic-button.med-primary med-icon,
body.modern-ux .home-page-content .approval-listing-actions med-button.med-basic-button.med-primary med-icon .material-icons,
body.modern-ux .home-page-content .approval-listing-actions med-button.med-basic-button.med-primary med-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    font-size: var(--mux-fs-16) !important;
    line-height: 16px !important;
    color: inherit !important;
}

body.modern-ux .home-page-content med-section .body.panel-list-container {
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* med-section host: constrain width when inner scroll region is sized from slotted content */
body.modern-ux .home-page-content .panels-container > .home-panel:first-child med-section {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* Secondary tab row — Figma: li inline-flex, gap 10px; tab pad 4px 16px; active var(--mux-primary-light) (all routes, not only home) */
body.modern-ux .main-nav {
    background-color: var(--background) !important;
    border-top: 3px solid var(--brand-light) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.modern-ux .main-nav li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

body.modern-ux .main-nav a.nav-item {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-16) !important;
    font-weight: var(--fw-normal) !important;
    line-height: normal !important;
    color: var(--gray-900) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 16px !important;
}

body.modern-ux .main-nav a.nav-item:hover {
    background: var(--mux-color-bg-disabled) !important;
    color: var(--gray-900) !important;
}

body.modern-ux .leftTabBody .EditStudyMasterContent .SubPageSubPanel.mlcssGroups .mc-table.mc-thin-table td{
    padding: 10px 5px !important;
}

body.modern-ux .leftTabBody .EditStudyMasterContent .SubPageSubPanel.mlcssGroups .action.button{
    margin: 10px 0 !important;
}

body.modern-ux .mc-table{
    margin: 10px !important;
}

body.modern-ux #frmLaunchEPro .mc-table{
    margin: 0 !important;
}

/* Active tab: site-toolbar may set `active` on li, on a.nav-item, or aria-current — cover all */
body.modern-ux .main-nav li.active a.nav-item,
body.modern-ux .main-nav li.active > a.nav-item,
body.modern-ux .main-nav a.nav-item.active,
body.modern-ux .main-nav a.nav-item.selected,
body.modern-ux .main-nav a.nav-item[aria-current="page"],
body.modern-ux .main-nav a.nav-item[aria-current="true"],
body.modern-ux .main-nav li[aria-current="page"] a.nav-item,
body.modern-ux .main-nav li[aria-current="page"] > a.nav-item,
body.modern-ux .main-nav li.selected a.nav-item,
body.modern-ux .main-nav li.selected > a.nav-item,
body.modern-ux .main-nav li.current a.nav-item,
body.modern-ux .main-nav li.current > a.nav-item {
    background: var(--mux-primary-light) !important;
    color: var(--gray-900) !important;
    font-size: var(--mux-fs-16) !important;
    font-weight: var(--fw-semibold) !important;
}

/* Hover must not override active tab background */
body.modern-ux .main-nav li.active a.nav-item:hover,
body.modern-ux .main-nav li.active > a.nav-item:hover,
body.modern-ux .main-nav a.nav-item.active:hover,
body.modern-ux .main-nav a.nav-item.selected:hover,
body.modern-ux .main-nav a.nav-item[aria-current="page"]:hover,
body.modern-ux .main-nav a.nav-item[aria-current="true"]:hover,
body.modern-ux .main-nav li[aria-current="page"] a.nav-item:hover,
body.modern-ux .main-nav li.selected a.nav-item:hover,
body.modern-ux .main-nav li.current a.nav-item:hover {
    background: var(--mux-primary-light) !important;
    color: var(--gray-900) !important;
    font-size: var(--mux-fs-16) !important;
    font-weight: var(--fw-semibold) !important;
}

body.modern-ux .main-nav a.quick-links {
    box-sizing: border-box !important;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-16) !important;
    font-weight: var(--fw-normal) !important;
    line-height: normal !important;
    color: #000000 !important;
    padding: 4px 16px !important;
}

body.modern-ux .main-nav a.quick-links:hover {
    background: var(--mux-color-bg-disabled) !important;
}

/* Final nav typography lock: default 16 / normal / gray-900; selected uses --fw-semibold below */
body.modern-ux nav.main-nav a.nav-item,
body.modern-ux nav.main-nav li > a.nav-item {
    font-size: var(--mux-fs-16) !important;
    font-weight: var(--fw-normal) !important;
    color: var(--gray-900, var(--gray-900)) !important;
}

body.modern-ux nav.main-nav a.nav-item .nav-icon{
    margin: 5px 0 2px 5px !important;
}

/* -------------------------------------------------------------------------
   Popup dialog: override inline width so dialog sizes to content
   ------------------------------------------------------------------------- */
body.modern-ux .popupDialog {
    width: auto !important;
}

/* -------------------------------------------------------------------------
   Compact .pod.dialog (EditSubject master — Unscheduled Visit, etc.)

   Markup lives in DialogPlaceHolder (not under .dialogs), so legacy overlay rules at
   `.dialogs .pod.dialog:not(.mux-compact-pod-dialog)` never apply — use the same DS dialog
   shell + title strip tokens as Phase E pod overlays (see block ~5080).

   Structure: .pod.dialog > header (h1 + .tool-bar.top-right) > .auxiliary > .ml-10.

   Date row (.cfx): flex aligns calendar img with field (legacy floats skew icon).

   Visibility: never override display:none — inline or [hidden] stays authoritative.
   ------------------------------------------------------------------------- */
body.modern-ux .mux-compact-pod-dialog.pod.dialog {
    font-size: var(--mux-fs-13);
    line-height: var(--lh-base);
    font-family: var(--font-family, var(--mux-font-family, inherit));
    border-radius: var(--mux-ds-dialog-radius) !important;
    border: none !important;
    background: var(--bg-paper) !important;
    box-shadow: var(--mux-ds-dialog-shadow) !important;
    box-sizing: border-box !important;
    /* visible: overflow:hidden clips inline calendar / popup layers in the same subtree as Phase E .ui-dialog */
    overflow: visible !important;
}

body.modern-ux.dark .mux-compact-pod-dialog.pod.dialog,
body.modern-ux.medrio.dark .mux-compact-pod-dialog.pod.dialog {
    background: var(--mux-color-bg-paper) !important;
    box-shadow: var(--mux-ds-dialog-shadow-dark) !important;
}

/* Title strip — parity with `.dialogs .pod.dialog` > header.major (plain <header> in master) */
body.modern-ux .mux-compact-pod-dialog.pod.dialog > header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-2) var(--space-4) !important;
    min-height: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    border: none !important;
    border-bottom: none !important;
    /* Match shell top corners (--mux-ds-dialog-radius); flat bottom where header meets body (was border-radius:0 and hid top curve). */
    border-radius: var(--mux-ds-dialog-radius) var(--mux-ds-dialog-radius) 0 0 !important;
    box-shadow: none !important;
    background: var(--bg-paper) !important;
    background-image: none !important;
    box-sizing: border-box !important;
}

body.modern-ux.dark .mux-compact-pod-dialog.pod.dialog > header,
body.modern-ux.medrio.dark .mux-compact-pod-dialog.pod.dialog > header {
    background: var(--mux-color-bg-paper) !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog > header > h1 {
    float: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: var(--mux-fs-rem-125) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-compact) !important;
    color: var(--gray-900) !important;
}

body.modern-ux.dark .mux-compact-pod-dialog.pod.dialog > header > h1,
body.modern-ux.medrio.dark .mux-compact-pod-dialog.pod.dialog > header > h1 {
    color: var(--mux-color-text) !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog > header .tool-bar,
body.modern-ux .mux-compact-pod-dialog.pod.dialog > header .tool-bar.top-right {
    float: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog > .auxiliary {
    box-sizing: border-box !important;
    padding: var(--space-1) var(--space-4) var(--space-3) !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog > .ml-10 {
    box-sizing: border-box !important;
    /* Master inline height:115px squeezes date + hint + actions; let content define height (Phase E .ui-dialog-content parity). */
    height: auto !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-6) var(--space-6) !important;
}

/* Action row — match .ui-dialog-buttonpane: primary actions end-aligned */
body.modern-ux .mux-compact-pod-dialog.pod.dialog .ml-10 > div:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-2);
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog .auxiliary .msg-body {
    font-size: var(--mux-fs-13);
    line-height: var(--lh-loose);
    color: var(--foreground);
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog [id$="lblVisitDateHintText"],
body.modern-ux .mux-compact-pod-dialog.pod.dialog .ml-10 .tcl.pl-5 {
    font-size: var(--mux-fs-12);
    color: var(--muted-foreground, #6b7280);
}

/* Date + calendar row: float columns misalign ico_calendar vs MedrioTextBox */
body.modern-ux .mux-compact-pod-dialog.pod.dialog .ml-10 > .cfx {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 6px;
    height: auto !important;
    min-height: 0;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog .ml-10 > .cfx > .float-left {
    float: none !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog .ml-10 > .cfx > .float-left + .float-left {
    align-self: center;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog .ml-10 > .cfx img[id$="btnDateCal"] {
    display: block;
    margin: 0;
    padding: 0 !important;
    max-height: 22px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    cursor: pointer;
}

/* Keep Save (etc.) hidden when markup/JS sets display:none — wins over rules that use display:!important */
body.modern-ux .mux-compact-pod-dialog.pod.dialog a.button.action[style*="display: none"],
body.modern-ux .mux-compact-pod-dialog.pod.dialog a.button.action[style*="display:none"],
body.modern-ux .mux-compact-pod-dialog.pod.dialog a.button.action[hidden] {
    display: none !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline) {
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--mux-radius) !important;
    border: none !important;
    background: var(--mux-primary-main) !important;
    color: var(--mux-primary-contrast) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):hover:not(.disabled) {
    background: var(--mux-primary-hover) !important;
    color: var(--mux-primary-contrast) !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog a.button.action:not(.secondary):not(.outlined):not(.text):not(.flat):not(.btn-outline):focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog a.button.action.disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog a.button.action.secondary {
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-medium) !important;
    line-height: var(--lh-snug) !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border-radius: var(--mux-radius) !important;
    border: 1px solid var(--brand-dark) !important;
    background: transparent !important;
    color: var(--brand-darker) !important;
    box-shadow: none !important;
    transition: var(--mux-transition) !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog a.button.action.secondary:hover {
    background: var(--mux-primary-dark)14 !important;
    border-color: var(--brand-darker) !important;
    color: var(--brand-darker) !important;
}

body.modern-ux .mux-compact-pod-dialog.pod.dialog a.button.action.secondary:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/* Field Information dialog — compact typography (markup uses multiple h1/h2 for rows) */
body.modern-ux .FieldInfoPopUp.pod.dialog {
    font-size: var(--mux-fs-13);
    line-height: var(--lh-base);
    font-family: var(--font-family, var(--mux-font-family, inherit));
}

body.modern-ux .FieldInfoPopUp.pod.dialog > header > h1 {
    font-size: var(--mux-fs-15) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-compact) !important;
    margin: 0 0 0.25em 0 !important;
}

/* Subject / Form / Visit and Variable rows — not page titles */
body.modern-ux .FieldInfoPopUp .auxiliary h1 {
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-normal) !important;
    line-height: var(--lh-loose) !important;
    margin: 0 0 0.35em 0 !important;
}

body.modern-ux .FieldInfoPopUp .auxiliary h1 strong {
    font-weight: var(--fw-semibold) !important;
}

body.modern-ux .FieldInfoPopUp header.bar h1,
body.modern-ux .FieldInfoPopUp .bar h1 {
    font-size: var(--mux-fs-14) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-relaxed) !important;
    margin: 8px 0 !important;
}

body.modern-ux .FieldInfoPopUp .out-of-range-title h1 {
    font-size: var(--mux-fs-14) !important;
    font-weight: var(--fw-semibold) !important;
    margin: 0 !important;
}

body.modern-ux .FieldInfoPopUp h1.mc-line.ref-range-name {
    font-size: var(--mux-fs-13) !important;
    font-weight: var(--fw-semibold) !important;
    margin: 0.25em 0 !important;
}

body.modern-ux .FieldInfoPopUp .QueryDetailsMaster header h2 {
    font-size: var(--mux-fs-14) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-relaxed) !important;
}

body.modern-ux .FieldInfoPopUp table.matrix th,
body.modern-ux .FieldInfoPopUp table.matrix td {
    font-size: var(--mux-fs-12) !important;
    line-height: var(--lh-relaxed) !important;
}

body.modern-ux .FieldInfoPopUp fieldset legend {
    font-size: var(--mux-fs-13) !important;
}

body.modern-ux .FieldInfoPopUp .empty-lab-flags {
    font-size: var(--mux-fs-14) !important;
}

body.modern-ux .FieldInfoPopUp .scenario-no-queries p,
body.modern-ux .FieldInfoPopUp .add-comment-area p.strong,
body.modern-ux .FieldInfoPopUp p.strong {
    font-size: var(--mux-fs-13) !important;
}

/* Try applying the variable to the host element instead of the part */
body.modern-ux .home-page-content .subject-listing-actions med-button {
    --background: #0d5fa814 !important; /* Look for the actual variable name used by med-button */
    --color: var(--brand-accessible) !important;
  }

/* -------------------------------------------------------------------------
   Coding — app/coding/Coding.aspx (#CodingSummary), SelectValues.aspx (#gvCodingSummary),
   and CodeValues.aspx (GridView id ends with dlistTerms — ASP.NET prefixes client id).

   Coding.css keeps layout (scroll region height, sticky headers). Here: undo global
   .pod .body / .mc-table margins, align paginator with sticky bar + theme tokens.

   Variable Coding (#CodingSummary): keep common.js full-height .page-contents / .pod / .body,
   replace Coding.css vh + nested overflow with a single flex column — table region flex-grows,
   #TableDiv scrolls when needed, med-paginator stays at bottom of the white card.

   Horizontal inset uses padding (not margin) so .body cannot exceed .pod.gc12 — legacy
   .gc12 float + width:100% children otherwise spill past the pod (SelectValues / Coding).
   ------------------------------------------------------------------------- */
body.modern-ux .auto-height > .pod.gc12:has(#CodingSummary),
body.modern-ux .auto-height > .pod.gc12:has(#gvCodingSummary) {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    justify-content: flex-start !important;
}

/* Coding.css .codingTotalRecords { display: table-header-group } on Variable Coding only (div.box) —
   anonymous table fixup inside the flex UpdatePanel vertically centers the following .divTableBorder / grid.
   SelectValues uses .codingTotalRecords on <td>; do not override display there. */
body.modern-ux .pod.gc12:has(#CodingSummary) .box.codingTotalRecords {
    display: block !important;
}

body.modern-ux .auto-height > .pod.gc12:has(#CodingSummary) > header.major {
    flex-shrink: 0;
}

body.modern-ux .auto-height > .pod.gc12:has(#gvCodingSummary) > med-toolbar {
    flex-shrink: 0;
}

body.modern-ux .page-body:has(#CodingSummary),
body.modern-ux .page-body:has(#gvCodingSummary) {
    min-height: 0;
    overflow: hidden !important;
}

body.modern-ux .page-body .page-contents:has(#CodingSummary),
body.modern-ux .page-body .page-contents:has(#gvCodingSummary) {
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Code Values: med-toolbar + .body stack from top of JS-sized pod (prevents body block “floating” mid-pod). */
body.modern-ux .auto-height > .pod.gc12:has(table[id$="dlistTerms"]) {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
}

body.modern-ux .auto-height > .pod.gc12:has(table[id$="dlistTerms"]) > med-toolbar {
    flex-shrink: 0;
}

body.modern-ux .pod.gc12:has(#CodingSummary) > .body,
body.modern-ux .pod.gc12:has(#gvCodingSummary) > .body,
body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) > .body {
    margin: var(--space-4) 0 !important;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

body.modern-ux .pod.gc12:has(#CodingSummary) > .body,
body.modern-ux .pod.gc12:has(#gvCodingSummary) > .body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden !important;
}

/* CodeValues.css — .pod .body { overflow: inherit !important } — must not break flex fill + inner scroll */
body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) > .body {
    overflow: hidden !important;
}

body.modern-ux .pod.gc12:has(#CodingSummary) .SubPageSubPanel,
body.modern-ux .pod.gc12:has(#gvCodingSummary) .SubPageSubPanel {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    min-height: 0;
    max-width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    justify-content: flex-start !important;
}

/* Coding.aspx — UpdatePanel: column stack; paginator in normal flow below #TableDiv (see end-of-file overrides). */
body.modern-ux .pod.gc12:has(#CodingSummary) .SubPageSubPanel > [id*="UpdatePanel"] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    justify-content: flex-start !important;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux .pod.gc12:has(#CodingSummary) .SubPageSubPanel > [id*="UpdatePanel"] > *:not(.divTableBorder):not(med-paginator) {
    flex-grow: initial;
    flex-shrink: 0;
}

/* SelectValues.aspx — table + UpdatePanel + .bottom-container(med-paginator); panel grows, paginator stays low. */
body.modern-ux .pod.gc12:has(#gvCodingSummary) .SubPageSubPanel > div:not([id*="UPanel"]):not(.bottom-container):first-of-type {
    flex-shrink: 0;
}

body.modern-ux .pod.gc12:has(#gvCodingSummary) .SubPageSubPanel > [id*="UPanelSelectValues"] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    justify-content: flex-start !important;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux .pod.gc12:has(#gvCodingSummary) .SubPageSubPanel > .bottom-container {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Code Values: column layout for divTableBorder / #TableDiv; do NOT flex-grow this panel — flex: 1 made it
   fill the update panel height so inner flex:1 regions grew and the small grid looked vertically centered. */
body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) .SubPageSubPanel {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    min-height: 0;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    place-content: flex-start !important;
}

/* Shell does not grow (flex:1 made #TableDiv a tall scrollport — grid looked vertically centered).
   Long lists: scroll inside #TableDiv via max-height. */
body.modern-ux .pod.gc12:has(#CodingSummary) .divTableBorder,
body.modern-ux .pod.gc12:has(#gvCodingSummary) .divTableBorder {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex: 0 0 auto !important;
    height: auto !important;
    display: block !important;
    overflow: visible;
    margin-top: 0 !important;
}

body.modern-ux .pod.gc12:has(#gvCodingSummary) [id*="UPanelSelectValues"] > *:not(.divTableBorder) {
    flex-shrink: 0;
}

body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) .divTableBorder {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* CodeValues.css uses height: calc(100vh - 320px) — huge empty band + paginator “floating” low */
    height: auto !important;
    min-height: 0;
    overflow-x: hidden !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    place-content: flex-start !important;
}

body.modern-ux .pod.gc12:has(#CodingSummary) #TableDiv,
body.modern-ux .pod.gc12:has(#gvCodingSummary) #TableDiv {
    max-width: 100%;
    box-sizing: border-box;
    min-height: 0;
    height: auto !important;
    max-height: min(72vh, calc(100vh - 14rem));
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: block !important;
}

body.modern-ux .pod.gc12:has(#CodingSummary) #TableDiv > div,
body.modern-ux .pod.gc12:has(#gvCodingSummary) #TableDiv > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.modern-ux .pod.gc12:has(#CodingSummary) #pagingCtrl,
body.modern-ux .pod.gc12:has(#gvCodingSummary) #pagingCtrl,
body.modern-ux .pod.gc12:has(#CodingSummary) .SubPageSubPanel med-paginator#pagingCtrl,
body.modern-ux .pod.gc12:has(#gvCodingSummary) .SubPageSubPanel med-paginator#pagingCtrl {
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: relative !important;
    right: auto !important;
    left: auto !important;
}

body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) #TableDiv {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    /* CodeValues.css sets overflow: auto — wins cascade unless !important; kill horizontal scroll */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Block layout: GridView wraps the table in a bare <div>; flex on #TableDiv can still vertically
       center the wrapper vs. tall scrollport (place-content / UA). Use block + full-width wrapper. */
    display: block !important;
    place-content: unset !important;
    justify-content: unset !important;
    align-content: unset !important;
}

/* ASP.NET GridView: single wrapper div around <table> inside #TableDiv */
body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) #TableDiv > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    align-self: stretch !important;
}

/* Grow with .body (JS height) so med-paginator stays at bottom inside .body padding, not mid-column */
body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) > .body > [id$="UPanelCodeSelectValues"] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    place-content: flex-start !important;
}

body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) > .body > [id$="UPanelCodeSelectValues"] > div {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    place-content: flex-start !important;
}

body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) #pagingCtrl,
body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) > .body > med-paginator#pagingCtrl {
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux #TableDiv table.mc-table#CodingSummary,
body.modern-ux #TableDiv table.mc-table#gvCodingSummary {
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux #TableDiv table.mc-table[id$="dlistTerms"] {
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    table-layout: fixed;
}

body.modern-ux #TableDiv table[id$="dlistTerms"] th,
body.modern-ux #TableDiv table[id$="dlistTerms"] td {
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
    min-width: 0;
}

body.modern-ux #TableDiv table[id$="dlistTerms"] th a,
body.modern-ux #TableDiv table[id$="dlistTerms"] td a {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

body.modern-ux #TableDiv {
    border-top: 1px solid var(--border-color) !important;
}

body.modern-ux #TableDiv table#CodingSummary th,
body.modern-ux #TableDiv table#gvCodingSummary th,
body.modern-ux #TableDiv table[id$="dlistTerms"] th {
    background-color: var(--background, var(--bg));
    border-color: var(--border-color) !important;
}

body.modern-ux .pod.gc12:has(#CodingSummary) .container.row.pb-16,
body.modern-ux .pod.gc12:has(#gvCodingSummary) .container.row.pb-16,
body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) .container.row.pb-16 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-2);
}

body.modern-ux .pod.gc12:has(#CodingSummary) .container.row.pb-16:has(#lnkImportSynonym),
body.modern-ux .pod.gc12:has(#gvCodingSummary) .container.row.pb-16:has(#lnkImportSynonym),
body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) .container.row.pb-16:has(#lnkImportSynonym) {
    position: relative;
    max-width: 100%;
}

/* Coding.css .btnImportSynonym { flex-basis: 0% } collapses the flex column and truncates stroked med-button text. */
body.modern-ux .pod.gc12:has(#CodingSummary) .btnImportSynonym,
body.modern-ux .pod.gc12:has(#gvCodingSummary) .btnImportSynonym,
body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) .btnImportSynonym {
    flex-basis: auto !important;
    flex-grow: 0;
    flex-shrink: 0;
    min-width: min-content;
}

body.modern-ux .pod.gc12:has(#CodingSummary) .col-md-2:has(#lnkImportSynonym),
body.modern-ux .pod.gc12:has(#gvCodingSummary) .col-md-2:has(#lnkImportSynonym),
body.modern-ux .pod.gc12:has(table[id$="dlistTerms"]) .col-md-2:has(#lnkImportSynonym) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: min-content;
}

body.modern-ux .codingTotalRecords:not(td):not(th) {
    display: block;
}

body.modern-ux .codingTotalRecords {
    width: auto;
    min-height: 0;
    height: auto;
    line-height: var(--lh-normal);
    font-size: var(--mux-fs-14);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
    text-align: left;
}

body.modern-ux .coding-progress-text {
    color: var(--text-secondary);
    font-size: var(--mux-fs-14);
    line-height: var(--lh-normal);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
}

body.modern-ux .upversion-message .info-color {
    color: var(--brand-accessible);
}

body.modern-ux .upversion-error {
    color: var(--color-error-dark) !important;
}

/* -------------------------------------------------------------------------
   Code Values — nested modal z-index (CodeValues.aspx: jQuery UI + Telerik RadWindow)

   “View and Create Queries” opens RadWindow (ViewValueQueries.aspx) while Coding Control stays open.
   TelerikModalOverlay is z-index 9999; jQuery UI gives #CodingControl ~1002 — overlay covered the
   parent dialog (grey bar on top of Coding). Lift parent above overlay; lift Queries above parent.
   (CodeValues.css .viewQueryWindow { z-index: 10000 } — override for modern-ux stack.)
   ------------------------------------------------------------------------- */
body.modern-ux .ui-dialog:has(#CodingControl) {
    z-index: 10050 !important;
}

body.modern-ux .RadWindow.RadWindow_MedrioWindow.viewQueryWindow {
    z-index: 10100 !important;
    /* CodeValues.aspx sets Height="350px" — too short for ViewValueQueries grid + create form (inner scroll) */
    min-height: 32rem !important;
    height: min(36rem, 85vh) !important;
}

body.modern-ux .RadWindow.RadWindow_MedrioWindow.viewQueryWindow table.rwTable {
    height: 100% !important;
}

/* -------------------------------------------------------------------------
   Code Values — Coding Control dialog (app/coding/CodeValues.aspx, #CodingControl in jQuery UI)

   • Dictionary search: default block layout stacked ImageButton under the text field; wrapper
     .mux-coding-dictionary-search-row is flex so the search icon stays beside the input.
   • RadioButtonList / CheckBoxList (Flow): span.paddingLeft5 — top-align control with label text.
   • Verbatim “( View and Create Queries )”: trim oversized .ds-btn-style padding on the link.
   • Title row: CodeValues.css .DictionaryVersion { padding-left: 250px } crowds the dialog title.
   • Legacy markup keeps <br class="mux-coding-dictionary-label-break" /> after “DictionarySearch:”
     (parity with master); hide it here so flex row + gap/margin do not double stack vertically.
   ------------------------------------------------------------------------- */
body.modern-ux #CodingControl br.mux-coding-dictionary-label-break {
    display: none;
}

body.modern-ux #CodingControl .mux-coding-dictionary-search-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-top: var(--space-1, 4px);
}

body.modern-ux #CodingControl .mux-coding-dictionary-search-row > div {
    flex: 1 1 auto;
    min-width: 0;
}

body.modern-ux #CodingControl .mux-coding-dictionary-search-row input[type="image"] {
    flex: 0 0 auto;
    align-self: center;
}

/* CodeValues.css has unscoped `th { position: sticky; border: … }` and `table.termSearchRes` rules;
   the dialog’s first table is a label row only — no grid borders on th/td. */
body.modern-ux #CodingControl table:first-of-type {
    border-collapse: collapse;
    border: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux #CodingControl table:first-of-type tbody,
body.modern-ux #CodingControl table:first-of-type tr {
    border: none;
}

body.modern-ux #CodingControl table:first-of-type th {
    position: static !important;
    z-index: auto;
    top: auto;
    vertical-align: bottom;
    text-align: left;
    padding: 0 0 var(--space-2, 8px) 0;
    border: none !important;
    outline: none;
    background: transparent;
    font-weight: var(--fw-semibold);
    font-size: var(--mux-fs-14);
    line-height: var(--lh-normal);
    color: var(--text-secondary, var(--mux-color-on-surface-variant));
}

body.modern-ux #CodingControl table:first-of-type td {
    vertical-align: top;
    border: none !important;
    outline: none;
    background: transparent;
}

/* Native dictionary search field — match med-input / DS field tokens (dialog has no med-input). */
body.modern-ux #CodingControl #txtSearchTerm,
body.modern-ux #CodingControl .mux-coding-dictionary-search-row input[type="text"] {
    appearance: none;
    -webkit-appearance: none;
    max-width: 100% !important;
    box-sizing: border-box;
    min-height: var(--mux-field-control-min-height);
    height: auto;
    padding: var(--mux-field-control-padding);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
    font-size: var(--mux-field-control-font-size);
    line-height: var(--mux-line-height);
    color: var(--foreground, var(--mux-color-text));
    background-color: var(--bg);
    border: 1px solid var(--border, var(--mux-secondary-dark));
    border-radius: var(--mux-radius);
    box-shadow: none;
    transition: var(--mux-transition);
}

body.modern-ux #CodingControl #txtSearchTerm:hover:not(:disabled):not(:focus-visible),
body.modern-ux #CodingControl .mux-coding-dictionary-search-row input[type="text"]:hover:not(:disabled):not(:focus-visible) {
    border-color: var(--mux-color-text);
}

body.modern-ux #CodingControl #txtSearchTerm:focus,
body.modern-ux #CodingControl #txtSearchTerm:focus-visible,
body.modern-ux #CodingControl .mux-coding-dictionary-search-row input[type="text"]:focus,
body.modern-ux #CodingControl .mux-coding-dictionary-search-row input[type="text"]:focus-visible {
    outline: none;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

body.modern-ux #CodingControl #txtSearchTerm:disabled,
body.modern-ux #CodingControl .mux-coding-dictionary-search-row input[type="text"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--muted);
}

/* Footer action select — native select aligned with field chrome. */
body.modern-ux #CodingControl #lstAction,
body.modern-ux #CodingControl select#lstAction {
    appearance: auto;
    min-height: var(--mux-field-control-min-height);
    padding: var(--mux-field-control-padding-y, 0.5rem) var(--mux-field-control-padding-x, 0.75rem);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
    font-size: var(--mux-fs-14);
    line-height: var(--lh-normal);
    color: var(--foreground);
    background-color: var(--bg);
    border: 1px solid var(--border, var(--mux-secondary-dark));
    border-radius: var(--mux-radius);
    box-sizing: border-box;
    max-width: 100%;
}

body.modern-ux #CodingControl #lstAction:focus,
body.modern-ux #CodingControl #lstAction:focus-visible {
    outline: none;
    border-color: var(--mux-color-border-focus);
    box-shadow: var(--mux-focus-ring);
}

/* Verbatim + selected-term panels — replace legacy hard black / IE blues. */
body.modern-ux #CodingControl .CodingVerbatimBox {
    border: 1px solid var(--border, var(--mux-color-black-12)) !important;
    border-radius: var(--mux-radius);
    background: var(--muted, var(--mux-bg-subtle));
    box-sizing: border-box;
}

body.modern-ux #CodingControl .selectedTerms {
    border: 1px solid var(--border, var(--mux-color-black-12)) !important;
    border-radius: var(--mux-radius);
    background: var(--bg);
    box-sizing: border-box;
}

body.modern-ux #CodingControl .searchResult {
    border-radius: var(--mux-radius);
    box-sizing: border-box;
}

body.modern-ux.medrio.dark #CodingControl #txtSearchTerm,
body.modern-ux.dark #CodingControl #txtSearchTerm,
body.modern-ux.medrio.dark #CodingControl .mux-coding-dictionary-search-row input[type="text"],
body.modern-ux.dark #CodingControl .mux-coding-dictionary-search-row input[type="text"] {
    background-color: var(--bg);
    color: var(--foreground);
    border-color: var(--border);
}

body.modern-ux.medrio.dark #CodingControl #lstAction,
body.modern-ux.dark #CodingControl #lstAction {
    background-color: var(--bg);
    color: var(--foreground);
    border-color: var(--border);
}

/* Radio / checkbox lists — theme accent, readable hit area. */
body.modern-ux #CodingControl input[type="radio"],
body.modern-ux #CodingControl input[type="checkbox"] {
    accent-color: var(--brand-accessible, var(--mux-primary));
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

/* Dictionary / selected-term grids: drop per-cell grid lines (legacy #cde3fa); use row dividers only. */
body.modern-ux #CodingControl table.termSearchRes {
    border-collapse: collapse;
    width: 100%;
}

body.modern-ux #CodingControl table.termSearchRes th,
body.modern-ux #CodingControl table.termSearchRes td {
    border: none !important;
    border-bottom: 1px solid var(--border, var(--mux-color-black-12));
    padding: var(--space-2, 8px);
    vertical-align: middle;
}

/* Results grid: sticky header inside .searchResult (scroll container). */
body.modern-ux #CodingControl table.termSearchRes thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
}

body.modern-ux #CodingControl table.termSearchRes tbody tr:last-child td {
    border-bottom: none;
}

body.modern-ux #CodingControl span.paddingLeft5:has(> input[type="radio"]),
body.modern-ux #CodingControl span.paddingLeft5:has(> input[type="checkbox"]) {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.35rem;
    vertical-align: top;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux #CodingControl span.paddingLeft5:has(> input[type="radio"]) input[type="radio"],
body.modern-ux #CodingControl span.paddingLeft5:has(> input[type="checkbox"]) input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

body.modern-ux #CodingControl span.paddingLeft5:has(> input[type="radio"]) label,
body.modern-ux #CodingControl span.paddingLeft5:has(> input[type="checkbox"]) label {
    flex: 1 1 auto;
    min-width: 0;
    line-height: var(--lh-normal);
}

body.modern-ux #CodingControl a.m-action-button {
    display: inline !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    box-shadow: none !important;
}

body.modern-ux .ui-dialog .ui-dialog-title .DictionaryVersion {
    padding-left: var(--space-3, 12px) !important;
    display: inline;
}

/* Coding.css sets #pagingCtrl { position: absolute }; CodeValues.css also sets #pagingCtrl { sticky }.
   med-paginator host is overridden above — keep id hook for any legacy rules targeting #pagingCtrl only. */
body.modern-ux #pagingCtrl,
body.modern-ux med-paginator#pagingCtrl {
    position: relative !important;
    bottom: auto !important;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 0;
    background: var(--background, var(--bg));
    border-top: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    z-index: auto;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

body.modern-ux.medrio.dark #TableDiv table#CodingSummary th,
body.modern-ux.medrio.dark #TableDiv table#gvCodingSummary th,
body.modern-ux.medrio.dark #TableDiv table[id$="dlistTerms"] th {
    background-color: var(--background, var(--bg));
}

body.modern-ux.medrio.dark #pagingCtrl {
    background: var(--background, var(--bg));
    border-top-color: var(--border-color);
}

/* -------------------------------------------------------------------------
   Auto-coding — app/coding/AutoCode.aspx

   AutoCode.css keeps layout (SubPageSubPanel height, divtableborder, floats).
   Scoped with #GVSynonyms (static). Complements shared #TableDiv / #pagingCtrl rules above.
   ------------------------------------------------------------------------- */
body.modern-ux .auto-height > .pod.gc12:has(#GVSynonyms) {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

body.modern-ux .pod.gc12:has(#GVSynonyms) > .body {
    margin: var(--space-4) 0 !important;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/*
 * AutoCode.aspx (#GVSynonyms + #lnkImportSynonym): AutoCode.css uses calc(100vh-*) on .SubPageSubPanel and
 * .divtableborder while common.js also sets .page-contents / .pod / .body — independent vh calcs fight the
 * JS height and can show a vertical scrollbar with little content. Keep pod full height (JS); size the inner
 * panel to the .body column and only scroll when the grid overflows.
 */
body.modern-ux .pod.gc12:has(#GVSynonyms):has(#lnkImportSynonym) > .body {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.modern-ux .pod.gc12:has(#GVSynonyms):has(#lnkImportSynonym) .SubPageSubPanel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.modern-ux .pod.gc12:has(#GVSynonyms):has(#lnkImportSynonym) .divtableborder {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 1 auto;
}

body.modern-ux .pod.gc12:has(#GVSynonyms):has(#lnkImportSynonym) #TableDiv {
    height: auto !important;
}

/* AutoCode.css .SubPageSubPanel { overflow-y: auto } — deployed builds sometimes use overflow: auto (both axes),
   which shows a horizontal bar for subpixel overflow. Vertical scroll only when content exceeds height; no panel-level x scroll. */
body.modern-ux .pod.gc12:has(#GVSynonyms):not(:has(#lnkImportSynonym)) .SubPageSubPanel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 0;
}

body.modern-ux .pod.gc12:has(#GVSynonyms) .divtableborder {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.modern-ux .pod.gc12:has(#GVSynonyms) #TableDiv {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: visible;
}

body.modern-ux #TableDiv table.mc-table#GVSynonyms,
body.modern-ux .divDuplicateSynonymsList table.mc-table#DuplicateSynonymsGV {
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

body.modern-ux #TableDiv table#GVSynonyms th {
    background-color: var(--background, var(--bg)) !important;
    border-color: var(--border-color) !important;
}

body.modern-ux .pod.gc12:has(#GVSynonyms) .container.row:has(.auto-coding-drop-down) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--space-2);
}

/* AutoCode.css #lnkImportSynonym { position:absolute; right:0 } + .btnRight { float:right } — conflicts with grid
   width and causes horizontal scrollbar under modern-ux. Keep flow layout: relative + flex column alignment. */
body.modern-ux .pod.gc12:has(#GVSynonyms) .container.row:has(#lnkImportSynonym) {
    position: relative;
    max-width: 100%;
}

body.modern-ux .pod.gc12:has(#GVSynonyms) .col-md-2:has(#lnkImportSynonym) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: min-content;
}

/* Shared: override AutoCode.css #lnkImportSynonym { position:absolute; right:0 } + .btnRight { float:right } */
body.modern-ux .pod.gc12:has(#CodingSummary) #lnkImportSynonym,
body.modern-ux .pod.gc12:has(#gvCodingSummary) #lnkImportSynonym,
body.modern-ux .pod.gc12:has(#GVSynonyms) #lnkImportSynonym {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux .pod.gc12:has(#GVSynonyms) .headerLbls.autoCodeVariableLabel {
    font-size: var(--mux-fs-20) !important;
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
    color: var(--text-primary);
}

body.modern-ux .pod.gc12:has(#GVSynonyms) .headerLbls.autoCodeDictLbl {
    font-size: var(--mux-fs-16) !important;
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
    color: var(--text-secondary);
}

body.modern-ux .pod.gc12:has(#GVSynonyms) med-toolbar.med-slim-toolbar,
body.modern-ux .pod.gc12:has(#GVSynonyms) med-toolbar[height="slim"] {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-paper, var(--background));
    box-sizing: border-box;
}

body.modern-ux .definedSynonym {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    font-size: var(--mux-fs-14);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    color: var(--text-secondary);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
}

body.modern-ux .auto-code-label {
    color: var(--text-secondary);
    font-size: var(--mux-fs-14);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
}

body.modern-ux .auto-coding-progress-text {
    color: var(--text-secondary);
    font-size: var(--mux-fs-14);
    line-height: var(--lh-normal);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
}

body.modern-ux .import-synonym-list-text {
    color: var(--text-primary);
    font-size: var(--mux-fs-14);
    font-weight: var(--fw-medium);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
}

body.modern-ux .auto-code-text {
    color: var(--brand-accessible);
}

body.modern-ux .auto-code-expand {
    color: var(--foreground);
}

body.modern-ux .auto-code-error {
    color: var(--color-error-dark) !important;
}

body.modern-ux .divErrorMsgForDuplicateSynonyms {
    background-color: var(--color-error-light, #ffe4e6);
    color: var(--color-error-dark);
    border-radius: var(--radius-sm);
}

/*
 * AutoCode.aspx — Import Synonym List (med-dialog#importSynonymListDialog): med-form-field-select
 * floats labels into the control; empty med-select makes “Study” / “Dictionary” effectively invisible.
 * Stack label above control — same pattern as coding-dictionaries / #select-study (edit_deploy).
 */
body.modern-ux med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select .med-form-field-flex.sc-med-form-field {
    display: block;
    width: 100%;
}

body.modern-ux med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select .med-form-field-infix.sc-med-form-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 !important;
    border-top: none !important;
    width: 100% !important;
    max-width: none;
    min-width: 0 !important;
    position: relative;
    top: auto !important;
}

body.modern-ux med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select .med-form-field-wrapper.sc-med-form-field {
    padding-bottom: 0;
}

body.modern-ux med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select med-label {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 0 var(--space-1) 0 !important;
    pointer-events: none !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.modern-ux med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select.med-focused med-label {
    color: var(--text-primary) !important;
}

body.modern-ux med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select med-label label.native-label {
    display: block;
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    margin: 0;
    padding: 0 !important;
}

body.modern-ux med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select med-select {
    width: 100% !important;
    max-width: none;
    min-width: 0 !important;
    z-index: 1;
}

body.modern-ux.medrio.dark med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select med-label,
body.modern-ux.dark med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select med-label {
    color: var(--text-primary, var(--mux-color-text)) !important;
}

body.modern-ux.medrio.dark med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select med-label label.native-label,
body.modern-ux.dark med-dialog#importSynonymListDialog med-form-field.auto-coding-popup-drop-down.med-form-field-select med-label label.native-label {
    color: var(--text-primary, var(--mux-color-text));
}

body.modern-ux.medrio.dark #TableDiv table#GVSynonyms th {
    background-color: var(--background, var(--bg)) !important;
}

body.modern-ux.medrio.dark #GVSynonyms tbody tr:nth-child(even) {
    background: var(--muted) !important;
}

body.modern-ux.medrio.dark .pod.gc12:has(#GVSynonyms) med-toolbar.med-slim-toolbar,
body.modern-ux.medrio.dark .pod.gc12:has(#GVSynonyms) med-toolbar[height="slim"] {
    background: var(--background, var(--bg));
    border-bottom-color: var(--border-color);
}

/* -------------------------------------------------------------------------
   Config — coding-dictionaries (Angular: public/src/config/.../coding-dictionaries)

   Table scroll wrapper, grid, th/td: here only (not in component SCSS). Empty-state overrides below.
   Scoped to body.modern-ux coding-dictionaries.
   ------------------------------------------------------------------------- */
body.modern-ux coding-dictionaries .coding-bottom-border {
    border-bottom-color: var(--border-color) !important;
}

body.modern-ux coding-dictionaries .coding-header-label {
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
    font-size: var(--mux-fs-20);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}

body.modern-ux coding-dictionaries .coding-header-note {
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
    font-size: var(--mux-fs-16);
    font-weight: var(--fw-normal);
    color: var(--text-secondary);
}

body.modern-ux coding-dictionaries .coding-arraw-color {
    color: var(--text-secondary) !important;
}

body.modern-ux coding-dictionaries .coding-progress-text {
    color: var(--text-secondary);
    font-size: var(--mux-fs-14);
    font-family: var(--mux-font-family), var(--font-family), sans-serif;
}

body.modern-ux coding-dictionaries med-card.mdCardCss {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    bottom: auto;
    height: calc(100vh - 409px) !important;
    overflow: visible;
}

/* Component SCSS uses padding-bottom: 0 on .coding-space — card bottom border sat flush with the scroll clip. */
body.modern-ux coding-dictionaries .coding-space {
    padding-bottom: var(--space-6) !important;
    box-sizing: border-box;
    min-width: 0;
}

/* Flex column can clip the card’s right edge when the table is wide; allow horizontal scroll instead of cropping. */
body.modern-ux coding-dictionaries section.main {
    min-width: 0;
    overflow-x: auto;
    box-sizing: border-box;
}

/* Scroll wrapper + table grid (moved from coding-dictionaries.component.scss — modern-ux only). */
body.modern-ux coding-dictionaries .variablesDetailsTable-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    width: 100%;
}

body.modern-ux coding-dictionaries table.variablesDetailsTable tbody{
    display: table-row-group;
}

body.modern-ux coding-dictionaries table.variablesDetailsTable {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    margin: 0 !important;
}

body.modern-ux coding-dictionaries table.variablesDetailsTable td {
    word-wrap: break-word;
    font-size: var(--mux-fs-14, 14px);
}

/* Empty card: flex-layout sets inline place-content/justify on host — override for vertical centering */
body.modern-ux coding-dictionaries med-card.mdCardCss.md-card--empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    place-content: center !important;
}

body.modern-ux coding-dictionaries table.variablesDetailsTable th {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--background, var(--bg)) !important;
    border-top: unset !important;
    border-left: 1px solid var(--border-color, rgba(192, 192, 192, 0.5)) !important;
    border-bottom: 1px solid var(--border-color, rgba(192, 192, 192, 0.5)) !important;
    color: var(--gray-600) !important;
}

/* Empty state: drop fixed left:526px from component SCSS; fill card + center content (see .md-card--empty) */
body.modern-ux coding-dictionaries .emptyTable {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    min-height: 0;
    height: auto !important;
    width: 50% !important;
    margin: 25px auto !important;
}

body.modern-ux coding-dictionaries med-card.mdCardCss.md-card--empty .emptyTable {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    padding-block: var(--space-6);
}

body.modern-ux coding-dictionaries med-card.mdCardCss.md-card--empty .emptyTable img {
    max-width: min(100%, 20rem);
    height: auto;
}

body.modern-ux coding-dictionaries .emptyTableText,
body.modern-ux coding-dictionaries .emptyTableText2 {
    color: var(--text-secondary) !important;
    max-width: 100%;
    width: auto !important;
    margin: 0 auto !important;
}

/* Single row like legacy UI: nowrap + shrinkable dropdown columns (fixed 352px was forcing wrap). */
body.modern-ux coding-dictionaries #dictionary-dropdown {
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    min-width: 0;
}

body.modern-ux coding-dictionaries #dictionary-dropdown .coding-drop-down {
    flex: 1 1 0;
    min-width: 0;
    max-width: 352px;
    width: auto !important;
}

body.modern-ux coding-dictionaries #dictionary-dropdown .coding-colum-space,
body.modern-ux coding-dictionaries #dictionary-dropdown .pt-25.pb-25,
body.modern-ux coding-dictionaries #dictionary-dropdown .pt-20.pb-20.pr-20 {
    flex-shrink: 0;
}

/*
 * Coding dictionaries — med-form-field-select + empty med-select: core floats the label inside the
 * control; without value / should-float it is effectively invisible. Stack label above control
 * (same pattern as #select-study / edit_deploy).
 */
body.modern-ux coding-dictionaries .coding-drop-down med-form-field.med-form-field-select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

body.modern-ux coding-dictionaries med-form-field.med-form-field-select .med-form-field-flex.sc-med-form-field {
    display: block;
    width: 100%;
}

body.modern-ux coding-dictionaries med-form-field.med-form-field-select .med-form-field-infix.sc-med-form-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 !important;
    border-top: none !important;
    width: 100% !important;
    max-width: none;
    min-width: 0 !important;
    position: relative;
    top: auto !important;
}

body.modern-ux coding-dictionaries med-form-field.med-form-field-select .med-form-field-wrapper.sc-med-form-field {
    padding-bottom: 0;
}

body.modern-ux coding-dictionaries med-form-field.med-form-field-select med-label {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 0 var(--space-1) 0 !important;
    pointer-events: none !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.modern-ux coding-dictionaries med-form-field.med-form-field-select.med-focused med-label {
    color: var(--text-primary) !important;
}

body.modern-ux coding-dictionaries med-form-field.med-form-field-select med-label label.native-label {
    display: block;
    font-family: var(--font-family, var(--mux-font-family));
    font-size: var(--mux-fs-rem-875);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    margin: 0;
    padding: 0 !important;
}

body.modern-ux coding-dictionaries med-form-field.med-form-field-select med-select {
    width: 100% !important;
    max-width: none;
    min-width: 0 !important;
    z-index: 1;
}

/* Update Dictionary — stroked+primary otherwise keeps core primary stroke; match .ds-btn.ds-btn-outlined */
body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"]::part(button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    box-sizing: border-box !important;
    min-height: var(--ds-btn-height) !important;
    height: var(--ds-btn-height) !important;
    padding: 0 var(--space-4) !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--brand-dark) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-clip: padding-box !important;
    color: var(--brand-dark) !important;
    font-family: var(--font-family, var(--mux-font-family)) !important;
    font-size: var(--ds-btn-font-size, var(--mux-font-size)) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-snug) !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition) !important;
}

body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"]::part(button):hover:not(:disabled) {
    border-color: var(--brand-darker) !important;
    background: var(--mux-primary-dark)14 !important;
    background-color: var(--mux-primary-dark)14 !important;
    color: var(--brand-darker) !important;
    background-image: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"]::part(button):active:not(:disabled) {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--brand-darker) !important;
    background: var(--mux-primary-dark)24 !important;
    background-color: var(--mux-primary-dark)24 !important;
    color: var(--brand-darker) !important;
}

body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"]::part(button):focus-visible {
    outline: 2px solid var(--brand-dark) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
}

body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"]::part(button):disabled {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"] med-icon,
body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"] med-icon .material-icons,
body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"] med-icon i {
    color: inherit !important;
}

body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"] span {
    color: inherit !important;
}

body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"]::part(focus-overlay),
body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"]::part(button-focus-overlay) {
    opacity: 0 !important;
    background: transparent !important;
}

body.modern-ux coding-dictionaries med-button#updateDictionaryBtn[button-type="stroked"] {
    background: transparent !important;
    vertical-align: middle;
}

body.modern-ux.medrio.dark coding-dictionaries table.variablesDetailsTable th {
    background: var(--background, var(--bg)) !important;
}

/* -------------------------------------------------------------------------
   CSS-Only UI patch PDF (pages 60+) — config / ePRO / filters / RadEditor
   Scope: body.modern-ux only. Replica: copy this block to sibling modern-ux.css as needed.
   ------------------------------------------------------------------------- */

/* p.59 (adjacent) / p.60 — notifications: scrollable main column; tabs match Edit Checks Basic Tabs (no gray chrome) */
body.modern-ux content-body:has(medrio-notifications.mux-notifications-config) {
    min-height: 0 !important;
    overflow: auto !important;
    box-sizing: border-box;
}

body.modern-ux medrio-notifications.mux-notifications-config {
    display: block;
    min-height: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* med-tab-group — parity with nav.tab-set #editQueriesNav / #current-active-users (underline, pale active fill) */
body.modern-ux medrio-notifications.mux-notifications-config med-tab-group .med-tab-list.sc-med-tab-group,
body.modern-ux .mux-notifications-config med-tab-group .med-tab-list.sc-med-tab-group {
    position: relative;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 2px solid var(--border-color) !important;
    box-sizing: border-box;
}

body.modern-ux medrio-notifications.mux-notifications-config med-tab-group .med-ink-bar.sc-med-tab-group,
body.modern-ux .mux-notifications-config med-tab-group .med-ink-bar.sc-med-tab-group {
    display: none !important;
}

body.modern-ux medrio-notifications.mux-notifications-config med-tab-group .med-tab-label.sc-med-tab-group,
body.modern-ux .mux-notifications-config med-tab-group .med-tab-label.sc-med-tab-group {
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: var(--lh-normal);
    color: var(--gray-800);
    padding: var(--space-3) var(--space-4);
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition);
}

@media (hover: hover) {
    body.modern-ux
        medrio-notifications.mux-notifications-config
        med-tab-group
        .med-tab-label.sc-med-tab-group:not([aria-selected="true"]):hover,
    body.modern-ux
        .mux-notifications-config
        med-tab-group
        .med-tab-label.sc-med-tab-group:not([aria-selected="true"]):hover {
        color: var(--mux-primary-darker);
        background-color: var(--mux-primary-darker)0a;
    }
}

body.modern-ux medrio-notifications.mux-notifications-config med-tab-group .med-tab-label.sc-med-tab-group[aria-selected="true"],
body.modern-ux .mux-notifications-config med-tab-group .med-tab-label.sc-med-tab-group[aria-selected="true"] {
    color: #0d5fa8;
    font-weight: 600;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: var(--mux-primary-darker);
    background-color: var(--mux-primary-darker)26;
}

body.modern-ux medrio-notifications.mux-notifications-config med-tab-group .med-tab-label.sc-med-tab-group:focus-visible,
body.modern-ux .mux-notifications-config med-tab-group .med-tab-label.sc-med-tab-group:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -3px;
    z-index: 1;
}

body.modern-ux.medrio.dark medrio-notifications.mux-notifications-config med-tab-group .med-tab-list.sc-med-tab-group,
body.modern-ux.dark medrio-notifications.mux-notifications-config med-tab-group .med-tab-list.sc-med-tab-group {
    border-bottom-color: var(--mux-color-divider) !important;
}

body.modern-ux.medrio.dark medrio-notifications.mux-notifications-config med-tab-group .med-tab-label.sc-med-tab-group,
body.modern-ux.dark medrio-notifications.mux-notifications-config med-tab-group .med-tab-label.sc-med-tab-group {
    color: #9ca3af;
}

body.modern-ux.medrio.dark
    medrio-notifications.mux-notifications-config
    med-tab-group
    .med-tab-label.sc-med-tab-group[aria-selected="true"],
body.modern-ux.dark
    medrio-notifications.mux-notifications-config
    med-tab-group
    .med-tab-label.sc-med-tab-group[aria-selected="true"] {
    color: var(--mux-primary-light) !important;
    font-weight: 600 !important;
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--mux-primary-light) !important;
    background-color: color-mix(in srgb, var(--mux-primary-light) 15%, transparent);
}

/* p.61 — form editor RadMenu dropdown: hide preview thumbnails; single-column text */
body.modern-ux #MenuContainer .MenuItemLink img {
    display: none !important;
}

body.modern-ux #MenuContainer .MenuItemLink {
    grid-template-columns: minmax(0, 1fr) !important;
}

body.modern-ux #MenuContainer .MenuItemLink h3 {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* p.62 — stronger row hover wash; drop extra rule line on menu rows */
body.modern-ux #MenuContainer .MenuItemLink:hover,
body.modern-ux #MenuContainer .MenuItemLink:focus {
    background: rgba(0, 118, 162, 0.18) !important;
}

body.modern-ux #MenuContainer .rmVertical.rmGroup.rmLevel1 .rmItem .MenuItemLink {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* p.63–64 — Filter Options: same chrome on all #filters pages (beats inline padding on e.g. EditSubjectMatrix) */
body.modern-ux #filters a.filter-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin-top: 0.35rem !important;
    padding: 0.5rem 0.75rem !important;
    font-family: var(--mux-font-family) !important;
    font-size: var(--mux-fs-rem-875) !important;
    font-weight: var(--fw-semibold) !important;
    line-height: var(--lh-relaxed) !important;
    min-height: 2.25rem !important;
    color: var(--foreground) !important;
    text-decoration: none !important;
    background: var(--muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--mux-radius) !important;
    box-sizing: border-box !important;
    transition: var(--mux-transition) !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

body.modern-ux #filters a.filter-tab .icon {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
}

body.modern-ux #filters a.filter-tab:hover {
    background: var(--mux-color-bg-hover) !important;
    border-color: var(--mux-color-border-hover) !important;
}

body.modern-ux #filters a.filter-tab:focus-visible {
    outline: none !important;
    box-shadow: var(--mux-focus-ring) !important;
}

/* p.65 — filters panel frame: visible gray-500 edge (PDF) */
body.modern-ux #filters .filters-inner-body {
    border-color: var(--gray-500) !important;
}

/* p.66–67, p.70 — ePRO build RadEditor: usable editing surface; icon tools without gray tile */
body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reMiddleCell {
    overflow: visible !important;
}

body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reContentCell,
body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reContentArea {
    min-height: 12rem !important;
    overflow: auto !important;
}

body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reContentArea iframe {
    min-height: 11rem !important;
}

body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reToolbarWrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reToolbar li,
body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reToolBar li,
body.modern-ux .buildStudyContent .epro-build-config .RadEditor ul.reToolbar > li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reToolbar a,
body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reToolBar a,
body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reToolbar .reToolText,
body.modern-ux .buildStudyContent .epro-build-config .RadEditor .reToolBar .reToolText {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Global page loading overlay (MedrioLoadingMessage — Modern UX only markup)
   Replaces legacy animated GIF when Features.ModernUX is enabled.
   Card + conic arc (visually distinct from legacy GIF); tokens + hex fallbacks.
   ------------------------------------------------------------------------- */
body.modern-ux .mux-loading-panel {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 1.25rem 1.75rem 1.35rem;
    min-width: 11.5rem;
    max-width: min(90vw, 20rem);
    text-align: center;
    vertical-align: middle;
    color: var(--muted-foreground, #717182);
    border-radius: 1rem;
}

body.modern-ux.medrio.dark .mux-loading-panel,
body.modern-ux.dark .mux-loading-panel {
    background: var(--card, #1a1a1a);
    color: var(--muted-foreground, #a1a1aa);
    border-color: var(--border, rgba(255, 255, 255, 0.12));
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.modern-ux .mux-loading-panel__caption {
    margin: 0;
    font-family: var(--mux-font-family, inherit);
    font-size: var(--mux-fs-rem-875, 0.875rem);
    font-weight: var(--fw-medium, 500);
    letter-spacing: 0.02em;
    line-height: var(--lh-snug, 1.25);
    color: inherit;
}

/* Conic arc (MUI-like); falls back to border ring when mask unsupported */
body.modern-ux .mux-page-spinner.mux-page-spinner--global {
    display: block;
    box-sizing: border-box;
    width: 3.25rem;
    height: 3.25rem;
    flex-shrink: 0;
    margin: 0 auto;
    border-radius: 50%;
    border: none;
    vertical-align: middle;
    background: conic-gradient(
        from 0deg,
        var(--mux-primary-main, #46B9FF) 0deg,
        var(--mux-primary-light, #7DCDFF) 110deg,
        rgba(0, 0, 0, 0.07) 110deg,
        rgba(0, 0, 0, 0.07) 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: mux-spinner-rotate 0.85s linear infinite;
}

body.modern-ux.medrio.dark .mux-page-spinner.mux-page-spinner--global,
body.modern-ux.dark .mux-page-spinner.mux-page-spinner--global {
    background: conic-gradient(
        from 0deg,
        var(--mux-primary-main, #46B9FF) 0deg,
        var(--mux-primary-light, #7DCDFF) 110deg,
        rgba(255, 255, 255, 0.14) 110deg,
        rgba(255, 255, 255, 0.14) 360deg
    );
}

/* Dialogs / small surfaces — MedrioInlineLoading.ascx (Features.ModernUX only; markup not emitted otherwise).
   No card chrome: parent surface (e.g. .ui-dialog-content) already provides the panel — avoids nested white box + spinner. */
body.modern-ux .mux-loading-panel--compact {
    min-width: 0;
    max-width: 16rem;
    padding: 0.65rem 0.9rem 0.75rem;
    gap: 0.5rem;
    border-radius: 0.75rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.modern-ux.medrio.dark .mux-loading-panel--compact,
body.modern-ux.dark .mux-loading-panel--compact {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.modern-ux .mux-loading-panel__caption--compact {
    font-size: var(--mux-fs-rem-8125, 0.8125rem);
    font-weight: var(--fw-medium, 500);
}

/* RadGrid pager RadInput width — scoped so other RadInput_Default controls site-wide are unchanged */
body.modern-ux .rgPager .riSingle.RadInput.RadInput_Default {
    width: 80px !important;
}
body.modern-ux .mux-page-spinner.mux-page-spinner--global.mux-page-spinner--compact {
    width: 2.25rem;
    height: 2.25rem;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

body.modern-ux .SubFormRow:nth-child(3) td {
    padding-top: 5px !important;
}

/* RadWindow iframe pages (e.g. LookupValues): .new-comment-js is not under .RadWindow in that document. */
body.modern-ux .matrix,
body.modern-ux .matrix label {
    font-weight: normal !important;
}

/* -------------------------------------------------------------------------
 * WizardContent8 iframes: FormBGColor.aspx, HeaderColor.aspx (#contentDiv).
 * Swatches, samples, layout tables — tokens, pointer, field-like hex inputs.
 * ------------------------------------------------------------------------- */
body.modern-ux #contentDiv {
    box-sizing: border-box;
}

body.modern-ux #contentDiv:not([style*="padding"]) {
    padding: var(--space-4, 1rem);
}

/* WizardContent8 iframes (FormBGColor, HeaderColor, …): trim stacked vertical space so content
   fits the RadWindow iframe — modern previews + field-height swatches exceed legacy 750px budget. */
body.modern-ux form#form1 #contentDiv:not([style*="padding"]) {
    padding-block: var(--space-3, 0.75rem);
    padding-inline: var(--space-4, 1rem);
}

body.modern-ux form#form1 #contentDiv h2:first-of-type {
    margin-top: var(--space-2, 0.5rem);
}

body.modern-ux #contentDiv table.layout {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
}

body.modern-ux #contentDiv table.layout > tbody > tr > td {
    vertical-align: top;
}

body.modern-ux #contentDiv table.layout table td {
    vertical-align: middle;
    padding-block: var(--space-1, 0.25rem);
}

body.modern-ux #contentDiv td.paddingLeft15 {
    padding-left: var(--space-6, 1.5rem) !important;
}

body.modern-ux #contentDiv .selectColor {
    cursor: pointer;
    border-radius: var(--mux-field-control-border-radius, 4px);
    border: 1px solid var(--gray-400, #9ca3af) !important;
    box-sizing: border-box;
    flex-shrink: 0;
}

body.modern-ux #contentDiv img.selectColor {
    object-fit: contain;
    vertical-align: middle;
}

body.modern-ux #contentDiv .selectedColor {
    width: 100px;
    min-height: var(--mux-field-control-min-height, 2.25rem);
    flex-shrink: 0;
    border-radius: var(--mux-field-control-border-radius, 4px);
    border: 1px solid var(--gray-500, #6b7280) !important;
    box-sizing: border-box;
}

body.modern-ux #contentDiv div.preview,
body.modern-ux #divPreview.preview,
body.modern-ux #divGridPreview.preview {
    border-radius: var(--mux-field-control-border-radius, 6px);
    box-sizing: border-box;
    font-size: var(--mux-fs-rem-8125, 0.8125rem);
    line-height: 1.4;
}

body.modern-ux #divPreview.preview {
    min-height: 2.5rem;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.modern-ux #divGridPreview.preview {
    min-height: 2rem;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.modern-ux form#aspnetForm h1:first-of-type,
body.modern-ux form#form1 h1:first-of-type {
    /*font-size: var(--mux-fs-rem-15, 0.9375rem);
    font-weight: var(--fw-semibold, 600);*/
    font-size: var(--mux-fs-rem-125, 0.9375rem);
    font-weight: 500;
    margin: 0 0 var(--space-4, 1rem) 0;
    color: var(--gray-900, #111827);
}

body.modern-ux.dark form#aspnetForm h1:first-of-type,
body.modern-ux.medrio.dark form#aspnetForm h1:first-of-type,
body.modern-ux.dark form#form1 h1:first-of-type,
body.modern-ux.medrio.dark form#form1 h1:first-of-type {
    color: var(--mux-color-text, #e5e7eb);
}

body.modern-ux #contentDiv h2 {
    font-size: var(--mux-fs-rem-875, 0.875rem);
    font-weight: var(--fw-semibold, 600);
    margin: var(--space-4, 1rem) 0 var(--space-2, 0.5rem) 0;
    color: var(--gray-800, #1f2937);
}

body.modern-ux.dark #contentDiv h2,
body.modern-ux.medrio.dark #contentDiv h2 {
    color: var(--mux-color-text, #e5e7eb);
}

body.modern-ux #contentDiv input.width100px {
    min-height: var(--mux-field-control-min-height, 2.25rem);
    padding: var(--mux-field-control-padding-y, 0.375rem) var(--mux-field-control-padding-x, 0.75rem);
    border-radius: var(--mux-field-control-border-radius, 4px);
    border: 1px solid var(--gray-400, #9ca3af);
    font-family: var(--mux-font-family, inherit);
    font-size: var(--mux-field-control-font-size, 0.875rem);
    box-sizing: border-box;
    background-color: var(--bg-paper, #fff);
    color: var(--gray-900, #111827);
}

body.modern-ux.dark #contentDiv input.width100px,
body.modern-ux.medrio.dark #contentDiv input.width100px {
    background-color: var(--mux-color-bg-paper, #1f2937);
    color: var(--mux-color-text, #e5e7eb);
    border-color: var(--gray-600, #4b5563);
}

body.modern-ux #contentDiv input.width100px:focus {
    outline: none;
    border-color: var(--mux-primary-main, var(--brand-500, #3b82f6));
    box-shadow: var(--mux-focus-ring, 0 0 0 2px rgba(59, 130, 246, 0.35));
}

body.modern-ux .main-nav ul{
    margin: 0 !important;
}

body.modern-ux .ui-dialog:has(.ui-dialog-content.ManualQueryCtrl) .ui-dialog-titlebar-close{
    display: none !important;
}
/* -------------------------------------------------------------------------
   Accessibility: reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    body .modern-ux input,
    body.modern-ux textarea:not([class*="mat-"]):not(.native-input),
    body.modern-ux select,
    body.modern-ux med-input,
    body.modern-ux button,
    body.modern-ux fieldset,
    body.modern-ux label {
        transition-duration: 0.01ms !important;
    }

    body.modern-ux input:not(.ui-dialog *, .cdk-overlay-container *):focus,
    body.modern-ux textarea:not([class*="mat-"]):not(.native-input):focus,
    body.modern-ux select:not([style*="position: absolute"]):focus,
    body.modern-ux button:active,
    body.modern-ux button:active::after,
    body.modern-ux .ds-btn:active::after,
    body.modern-ux a.button:active::after,
    body.modern-ux a.button.action:active::after,
    body.modern-ux input[type="checkbox"]:not(.ui-dialog *, .cdk-overlay-container *):checked,
    body.modern-ux input[type="radio"]:not(.ui-dialog *, .cdk-overlay-container *):checked,
    body.modern-ux input:not(.ui-dialog *, .cdk-overlay-container *):invalid {
        animation: none !important;
    }

    body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *)::-webkit-slider-thumb,
    body.modern-ux input[type="range"]:not(.ui-dialog *, .cdk-overlay-container *)::-moz-range-thumb {
        transition: none;
    }

    body.modern-ux .mux-page-spinner.mux-page-spinner--global {
        animation: none !important;
        opacity: 1;
        background: conic-gradient(
            from 0deg,
            var(--mux-primary-main, #46B9FF) 0deg,
            var(--mux-primary-main, #46B9FF) 90deg,
            rgba(0, 0, 0, 0.08) 90deg,
            rgba(0, 0, 0, 0.08) 360deg
        );
    }

    body.modern-ux.medrio.dark .mux-page-spinner.mux-page-spinner--global,
    body.modern-ux.dark .mux-page-spinner.mux-page-spinner--global {
        background: conic-gradient(
            from 0deg,
            var(--mux-primary-main, #46B9FF) 0deg,
            var(--mux-primary-main, #46B9FF) 90deg,
            rgba(255, 255, 255, 0.14) 90deg,
            rgba(255, 255, 255, 0.14) 360deg
        );
    }
}

/* -------------------------------------------------------------------------
   Variable Coding (Coding.aspx) — beat app/coding/Coding.css (#TableDiv height:100%,
   .divTableBorder vh calc, sticky/absolute paginator). Table under "Values (n)"; paginator in flow.
   Scoped to GridView #CodingSummary only (not Select Values #gvCodingSummary, not Code Values dlistTerms).
   ------------------------------------------------------------------------- */
body.modern-ux:has(table#CodingSummary) .divTableBorder {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    display: block !important;
}

body.modern-ux:has(table#CodingSummary) #TableDiv {
    height: auto !important;
    min-height: 0 !important;
    max-height: min(70vh, calc(100vh - 12rem)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
}

body.modern-ux:has(table#CodingSummary) .SubPageSubPanel > [id*="UpdatePanel"] {
    justify-content: flex-start !important;
    align-content: flex-start !important;
    align-items: stretch !important;
    position: static !important;
    padding-bottom: 0 !important;
}

body.modern-ux:has(table#CodingSummary) .SubPageSubPanel > [id*="UpdatePanel"] > med-paginator#pagingCtrl {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin-top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

body.modern-ux:has(table#CodingSummary) .SubPageSubPanel > [id*="UpdatePanel"] > med-paginator#pagingCtrl,
body.modern-ux:has(table#CodingSummary) .SubPageSubPanel > [id*="UpdatePanel"] > med-paginator#pagingCtrl::part(container) {
    position: relative !important;
}