/*
 * Proteus X design system (#363, D86, D90): the redesign's tokens, type and components.
 *
 * Loaded after bootstrap.css. Everything is scoped under body.ui-new (the per-firm setting adds that class, D87), so
 * the old UI is untouched. The tokens set Bootstrap 5.3's own --bs-* variables, so existing markup (.btn-primary,
 * .form-control, .table, .badge, .modal, .offcanvas) takes on the new look without being edited; the px- classes are
 * the new components (tag helpers in Website/TagHelpers write most of them).
 *
 * Reference page: /design-system. Where things are and how a screen uses them: docs/plan/ui-redesign.md#the-design-system.
 * Source: the canvas "Proteus UI/UX Review and Redesign", page 2 (Design direction), direction A "Neutral shell".
 */

/* ---------- Fonts (self-hosted, SIL Open Font License: wwwroot/fonts/*-OFL.txt) ---------- */

@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/source-sans-3-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-code-pro-latin-400-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */

body.ui-new {
    /* Neutrals (fixed). */
    --px-ink: #18212E;          /* text, headings */
    --px-ink-2: #3A4556;        /* long copy, table headers */
    --px-ink-3: #5B6676;        /* secondary text, hints (5.8:1 on white) */
    --px-line-strong: #7A8494;  /* input and checkbox edges: 3.8:1 on white (WCAG 1.4.11; the canvas's #C2C8D0 is 1.7:1, D90) */
    --px-line-2: #C2C8D0;       /* dashed edges, disabled borders */
    --px-line: #DCE0E5;         /* dividers, card edges */
    --px-line-soft: #EDF0F2;    /* rows */
    --px-canvas: #F3F4F6;       /* page background */
    --px-subtle: #F8F9FA;       /* table header, hover */
    --px-muted: #EEF0F3;        /* neutral tint, segmented control */
    --px-surface: #FFFFFF;      /* cards, inputs */

    /* Accent: the firm's theme (below). 600 holds 4.5:1 or better on white either way round. */
    --px-accent: #0E5A8A;
    --px-accent-700: #0A456B;
    --px-accent-100: #D4E6F2;
    --px-accent-50: #EBF3F9;
    --px-accent-rgb: 14, 90, 138;

    /* Status: text on its own tint, all 5:1 or better. Always with a word. */
    --px-success: #1E7044; --px-success-bg: #E6F3EB;
    --px-warning: #8A5300; --px-warning-bg: #FDF1D8;
    --px-danger: #B42318;  --px-danger-bg: #FCEBE9;  --px-danger-line: #E4A39C;
    --px-info: #1F5BA6;    --px-info-bg: #E7EFFA;
    --px-neutral: #3A4556; --px-neutral-bg: #EEF0F3;

    /* Type. */
    --px-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --px-font-serif: "Source Serif 4", Georgia, serif;
    --px-font-mono: "Source Code Pro", ui-monospace, Consolas, monospace;
    --px-text: .9375rem;        /* 15/22, the staff default */
    --px-text-table: .875rem;   /* 14/20 */
    --px-text-label: .8125rem;  /* 13/18 600 */

    /* Space (4px base), shape, depth. */
    --px-space-1: 4px; --px-space-2: 8px; --px-space-3: 12px; --px-space-4: 16px; --px-space-6: 24px; --px-space-8: 32px; --px-space-12: 48px;
    --px-radius-input: 4px; --px-radius-button: 6px; --px-radius-card: 8px; --px-radius-dialog: 12px;
    --px-shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
    --px-shadow-2: 0 8px 24px rgba(16, 24, 40, .14);
    --px-shadow-3: 0 24px 48px rgba(16, 24, 40, .2);
    --px-control-height: 36px;
    --px-control-height-sm: 30px;
    --px-row-height: 44px;

    /* Bootstrap 5.3, mapped onto the tokens. */
    --bs-body-font-family: var(--px-font);
    --bs-body-font-size: var(--px-text);
    --bs-body-line-height: 1.4667;
    --bs-body-color: var(--px-ink);
    --bs-body-color-rgb: 24, 33, 46;
    --bs-body-bg: var(--px-surface);     /* what Bootstrap paints components with (panels, dialogs, menus, fields); the page itself is the canvas, below */
    --bs-secondary-color: var(--px-ink-3);
    --bs-tertiary-bg: var(--px-subtle);
    --bs-emphasis-color: var(--px-ink);
    --bs-heading-color: var(--px-ink);
    --bs-border-color: var(--px-line);
    --bs-border-radius: .375rem;
    --bs-border-radius-sm: .25rem;
    --bs-border-radius-lg: .5rem;
    --bs-primary: var(--px-accent);
    --bs-primary-rgb: var(--px-accent-rgb);
    --bs-primary-text-emphasis: var(--px-accent-700);
    --bs-primary-bg-subtle: var(--px-accent-50);
    --bs-primary-border-subtle: var(--px-accent-100);
    --bs-success: #1E7044; --bs-success-rgb: 30, 112, 68;
    --bs-warning: #8A5300; --bs-warning-rgb: 138, 83, 0;
    --bs-danger: #B42318;  --bs-danger-rgb: 180, 35, 24;
    --bs-info: #1F5BA6;    --bs-info-rgb: 31, 91, 166;
    --bs-link-color: var(--px-accent);
    --bs-link-color-rgb: var(--px-accent-rgb);
    --bs-link-hover-color: var(--px-accent-700);
    --bs-link-hover-color-rgb: 10, 69, 107;
    --bs-focus-ring-color: rgba(var(--px-accent-rgb), .4);
    --bs-form-invalid-color: var(--px-danger);
    --bs-form-invalid-border-color: var(--px-danger);

    font-family: var(--px-font);
    font-size: var(--px-text);
    line-height: 1.4667;
    color: var(--px-ink);
    background-color: var(--px-canvas);
    -webkit-font-smoothing: antialiased;
}

/* The firm's theme swaps only the accent (the old UI's pgth-* classes, so its theme switcher keeps working). */
body.ui-new.pgth-Blue, body.ui-new[data-px-theme="navy"] { --px-accent: #26407A; --px-accent-700: #1B2F5C; --px-accent-100: #D9E0EF; --px-accent-50: #EEF1F8; --px-accent-rgb: 38, 64, 122; }
body.ui-new.pgth-GreenBlue, body.ui-new[data-px-theme="teal"] { --px-accent: #0B6B72; --px-accent-700: #08545A; --px-accent-100: #CFE8EA; --px-accent-50: #E8F4F4; --px-accent-rgb: 11, 107, 114; }
body.ui-new.pgth-Green, body.ui-new[data-px-theme="forest"] { --px-accent: #2F6B3A; --px-accent-700: #23522C; --px-accent-100: #D6E8D9; --px-accent-50: #ECF5EE; --px-accent-rgb: 47, 107, 58; }
body.ui-new.pgth-PurpleBlue, body.ui-new[data-px-theme="indigo"] { --px-accent: #4338CA; --px-accent-700: #3730A3; --px-accent-100: #E0DEF7; --px-accent-50: #F0EFFB; --px-accent-rgb: 67, 56, 202; }
body.ui-new.pgth-Default, body.ui-new[data-px-theme="blue"] { --px-accent: #0E5A8A; --px-accent-700: #0A456B; --px-accent-100: #D4E6F2; --px-accent-50: #EBF3F9; --px-accent-rgb: 14, 90, 138; }

/* The client portal: larger type, serif headings, 44px targets (D86; built with the clients' new sign-in, D39). */
body.ui-new[data-px-surface="portal"] {
    --px-text: 1.0625rem;
    --px-text-table: 1rem;
    --px-text-label: .9375rem;
    --px-control-height: 44px;
    --px-control-height-sm: 36px;
    --bs-body-font-size: var(--px-text);
}
body.ui-new[data-px-surface="portal"] h1, body.ui-new[data-px-surface="portal"] .px-page-title { font-family: var(--px-font-serif); font-weight: 600; font-size: 2rem; line-height: 1.25; }

/* ---------- Base ---------- */

body.ui-new h1, body.ui-new .h1 { font-size: 1.875rem; line-height: 38px; font-weight: 700; margin: 0 0 var(--px-space-4); }
body.ui-new h2, body.ui-new .h2 { font-size: 1.375rem; line-height: 28px; font-weight: 700; margin: 0 0 var(--px-space-3); }
body.ui-new h3, body.ui-new .h3 { font-size: 1.0625rem; line-height: 24px; font-weight: 600; margin: 0 0 var(--px-space-2); }
body.ui-new h4, body.ui-new .h4, body.ui-new h5, body.ui-new .h5, body.ui-new h6, body.ui-new .h6 { font-size: var(--px-text); line-height: 22px; font-weight: 600; }
body.ui-new p { margin: 0 0 var(--px-space-3); }
/* Not a link made into a button (.btn, the old .button): those keep their own text colour (#505). :where keeps the
   specificity at 0,1,2, so rules that beat the base link colour before still do. */
body.ui-new a:where(:not(.btn, .button)) { color: var(--px-accent); text-underline-offset: 2px; }
body.ui-new a:where(:not(.btn, .button)):hover { color: var(--px-accent-700); }
body.ui-new .text-secondary, body.ui-new .text-muted { color: var(--px-ink-3) !important; }
body.ui-new .px-ref { font-family: var(--px-font-mono); font-size: .8125rem; color: var(--px-ink-2); }
body.ui-new .px-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.ui-new .px-tabular { font-variant-numeric: tabular-nums; }
body.ui-new .px-visually-hidden { 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; }

/* Focus: always visible from the keyboard, 3:1 against what's around it. */
body.ui-new :focus { outline: none; }
body.ui-new :focus-visible { outline: 2px solid var(--px-accent); outline-offset: 2px; box-shadow: none; }
body.ui-new .px-bulk-bar :focus-visible { outline-color: #fff; }

body.ui-new .px-card { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-card); box-shadow: var(--px-shadow-1); padding: var(--px-space-6); }
body.ui-new .card { --bs-card-border-color: var(--px-line); --bs-card-border-radius: var(--px-radius-card); --bs-card-cap-bg: var(--px-surface); box-shadow: var(--px-shadow-1); }

/* ---------- Buttons: one primary per view; a plain .btn is secondary ---------- */

body.ui-new .btn {
    --bs-btn-font-family: var(--px-font);
    --bs-btn-font-size: var(--px-text);
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.2;
    --bs-btn-padding-x: 14px;
    --bs-btn-padding-y: 0;
    --bs-btn-border-radius: var(--px-radius-button);
    --bs-btn-color: var(--px-ink);
    --bs-btn-bg: var(--px-surface);
    --bs-btn-border-color: var(--px-line-strong);
    --bs-btn-hover-color: var(--px-ink);
    --bs-btn-hover-bg: var(--px-subtle);
    --bs-btn-hover-border-color: var(--px-ink-3);
    --bs-btn-active-color: var(--px-ink);
    --bs-btn-active-bg: var(--px-muted);
    --bs-btn-active-border-color: var(--px-ink-3);
    --bs-btn-disabled-color: var(--px-ink-3);
    --bs-btn-disabled-bg: var(--px-subtle);
    --bs-btn-disabled-border-color: var(--px-line-2);
    --bs-btn-disabled-opacity: 1;
    --bs-btn-focus-box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--px-control-height);
    white-space: nowrap;
}
body.ui-new .btn-sm { --bs-btn-font-size: var(--px-text-table); --bs-btn-padding-x: 10px; min-height: var(--px-control-height-sm); }
body.ui-new .btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--px-accent); --bs-btn-border-color: var(--px-accent);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--px-accent-700); --bs-btn-hover-border-color: var(--px-accent-700);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--px-accent-700); --bs-btn-active-border-color: var(--px-accent-700);
}
body.ui-new .btn-secondary, body.ui-new .btn-light, body.ui-new .btn-outline-secondary, body.ui-new .btn-outline-primary, body.ui-new .btn-default {
    --bs-btn-color: var(--px-ink); --bs-btn-bg: var(--px-surface); --bs-btn-border-color: var(--px-line-strong);
    --bs-btn-hover-color: var(--px-ink); --bs-btn-hover-bg: var(--px-subtle); --bs-btn-hover-border-color: var(--px-ink-3);
    --bs-btn-active-color: var(--px-ink); --bs-btn-active-bg: var(--px-muted); --bs-btn-active-border-color: var(--px-ink-3);
}
/* Tertiary: text only, for toggles like "Include hidden items". */
body.ui-new .btn-tertiary, body.ui-new .btn-link {
    --bs-btn-color: var(--px-accent); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--px-accent-700); --bs-btn-hover-bg: var(--px-accent-50); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--px-accent-700); --bs-btn-active-bg: var(--px-accent-50); --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent;
    text-decoration: none;
}
/* Danger: outlined where the action is offered; solid only inside the confirmation. */
body.ui-new .btn-outline-danger {
    --bs-btn-color: var(--px-danger); --bs-btn-bg: var(--px-surface); --bs-btn-border-color: var(--px-danger-line);
    --bs-btn-hover-color: var(--px-danger); --bs-btn-hover-bg: var(--px-danger-bg); --bs-btn-hover-border-color: var(--px-danger);
    --bs-btn-active-color: var(--px-danger); --bs-btn-active-bg: var(--px-danger-bg); --bs-btn-active-border-color: var(--px-danger);
}
body.ui-new .btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--px-danger); --bs-btn-border-color: var(--px-danger);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #912018; --bs-btn-hover-border-color: #912018;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #912018; --bs-btn-active-border-color: #912018;
}
body.ui-new .btn-icon { --bs-btn-padding-x: 0; width: var(--px-control-height); }
body.ui-new .btn-icon.btn-sm { width: var(--px-control-height-sm); }
/* Split button: the part that opens the menu is separated by a thin light rule. */
body.ui-new .btn-group > .btn-primary + .dropdown-toggle-split { border-left-color: rgba(255, 255, 255, .45); }
body.ui-new .dropdown-menu { --bs-dropdown-border-color: var(--px-line); --bs-dropdown-border-radius: var(--px-radius-button); --bs-dropdown-box-shadow: var(--px-shadow-2); --bs-dropdown-link-active-bg: var(--px-accent-50); --bs-dropdown-link-active-color: var(--px-accent-700); --bs-dropdown-font-size: var(--px-text); box-shadow: var(--px-shadow-2); }
body.ui-new .dropdown-item { min-height: 32px; display: flex; align-items: center; gap: 8px; }
body.ui-new .dropdown-item.px-danger { color: var(--px-danger); }

/* ---------- Page header ---------- */

/* position and padding: the old stylesheets style every <header> (custom.css; fixed at phone width in responsive.css), #375. */
body.ui-new .px-page-header { display: flex; flex-direction: column; gap: var(--px-space-1); margin: 0 0 var(--px-space-6); padding: 0; position: static; z-index: auto; }
body.ui-new .px-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--px-text-label); color: var(--px-ink-3); }
body.ui-new .px-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--px-ink-3); }
body.ui-new .px-breadcrumb a { color: var(--px-accent); }
body.ui-new .px-page-header__row { display: flex; align-items: center; gap: var(--px-space-3); flex-wrap: wrap; }
body.ui-new .px-page-title { margin: 0; font-size: 1.875rem; line-height: 38px; font-weight: 700; display: flex; align-items: baseline; gap: var(--px-space-3); flex-wrap: wrap; }
body.ui-new .px-page-header__title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--px-space-3); flex-wrap: wrap; }
body.ui-new .px-page-count { font-size: var(--px-text); font-weight: 400; color: var(--px-ink-3); }
body.ui-new .px-page-actions { display: flex; align-items: center; gap: var(--px-space-2); flex-wrap: wrap; }

/* ---------- Status badges (one mapping table: Website/TagHelpers/PxStatus.cs) ---------- */

body.ui-new .px-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--px-text-label); font-weight: 600; line-height: 18px; padding: 2px 8px; border-radius: var(--px-radius-input); white-space: nowrap; color: var(--px-neutral); background: var(--px-neutral-bg); vertical-align: middle; }
body.ui-new .px-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
body.ui-new .px-badge--success { color: var(--px-success); background: var(--px-success-bg); }
body.ui-new .px-badge--warning { color: var(--px-warning); background: var(--px-warning-bg); }
body.ui-new .px-badge--danger { color: var(--px-danger); background: var(--px-danger-bg); }
body.ui-new .px-badge--info { color: var(--px-info); background: var(--px-info-bg); }
body.ui-new .px-badge--neutral { color: var(--px-neutral); background: var(--px-neutral-bg); }
body.ui-new .px-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: .75rem; font-weight: 700; background: var(--px-neutral-bg); color: var(--px-neutral); }
body.ui-new .px-count--warning { background: var(--px-warning-bg); color: var(--px-warning); }
body.ui-new .px-count--danger { background: var(--px-danger-bg); color: var(--px-danger); }

/* ---------- Form fields: look editable, label above, "Required" in words ---------- */

body.ui-new .form-control, body.ui-new .form-select {
    font-family: var(--px-font);
    font-size: var(--px-text);
    min-height: 38px;
    padding: 7px 10px;
    color: var(--px-ink);
    background-color: var(--px-surface);
    border: 1px solid var(--px-line-strong);
    border-radius: var(--px-radius-input);
}
body.ui-new .form-select { padding-right: 32px; }
body.ui-new textarea.form-control { min-height: 84px; }
body.ui-new .form-control:hover, body.ui-new .form-select:hover { border-color: var(--px-ink-3); }
body.ui-new .form-control:focus, body.ui-new .form-select:focus { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); outline: none; }
body.ui-new .form-control:focus-visible, body.ui-new .form-select:focus-visible { outline: none; }
body.ui-new .form-control::placeholder { color: var(--px-ink-3); opacity: 1; }
body.ui-new .form-control:disabled, body.ui-new .form-select:disabled { background-color: var(--px-subtle); border-color: var(--px-line-2); color: var(--px-ink-3); }
body.ui-new .form-control.is-invalid, body.ui-new .form-select.is-invalid, body.ui-new .px-field--error .form-control, body.ui-new .px-field--error .form-select { border: 2px solid var(--px-danger); background-image: none; padding-right: 10px; }
body.ui-new .px-field--error .form-select { padding-right: 32px; background-image: var(--bs-form-select-bg-img); }
body.ui-new .form-label, body.ui-new .px-label { display: flex; align-items: baseline; gap: var(--px-space-2); flex-wrap: wrap; margin: 0; font-size: var(--px-text-label); font-weight: 600; color: var(--px-ink); }
body.ui-new .form-check-input { width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--px-line-strong); }
body.ui-new .form-check-input:checked { background-color: var(--px-accent); border-color: var(--px-accent); }
body.ui-new .form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); border-color: var(--px-accent); }
body.ui-new .form-check { min-height: 24px; display: flex; align-items: flex-start; gap: 8px; padding-left: 0; }
body.ui-new .form-check .form-check-input { float: none; margin-left: 0; flex: none; }
/* custom.css draws its own box on the label (label::before) and hides the real input over the whole .form-check;
   with the padding gone, that box sat over the label's first letter (#505). Here the real input shows beside the
   label instead, including a bare checkbox without form-check-input (@Html.CheckBox on the old lists). */
body.ui-new .form-check input:is([type="checkbox"], [type="radio"]) { position: static; opacity: 1; z-index: auto; flex: none; margin: 1px 0 0; }
body.ui-new .form-check input:is([type="checkbox"], [type="radio"]):not(.form-check-input) { width: 20px; height: 20px; accent-color: var(--px-accent); }
body.ui-new .form-check label { padding-left: 0; }
body.ui-new .form-check label::before, body.ui-new .form-check label::after, body.ui-new .form-check input:checked + label::after { content: none; }
body.ui-new .px-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.ui-new .px-required, body.ui-new .px-optional { font-size: .75rem; font-weight: 600; color: var(--px-ink-3); }
body.ui-new .px-hint { font-size: var(--px-text-label); color: var(--px-ink-3); }
body.ui-new .px-error-message { display: flex; gap: 6px; align-items: flex-start; font-size: var(--px-text-label); font-weight: 600; color: var(--px-danger); }
body.ui-new .px-error-message svg { flex: none; margin-top: 2px; }
body.ui-new .px-readonly { font-size: var(--px-text); padding: 8px 0; border-bottom: 1px dashed var(--px-line-2); min-height: 38px; }
/* A money or percentage field: the sign sits inside the field, the figure is right-aligned. */
body.ui-new .px-affix { display: flex; align-items: center; min-height: 38px; padding: 0 10px; gap: 6px; background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); }
body.ui-new .px-affix:hover { border-color: var(--px-ink-3); }
body.ui-new .px-affix:focus-within { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); }
body.ui-new .px-affix > span { color: var(--px-ink-3); flex: none; }
body.ui-new .px-affix > .form-control { border: 0; box-shadow: none; padding: 7px 0; min-height: 36px; text-align: right; font-variant-numeric: tabular-nums; background: transparent; }
body.ui-new .px-field--error .px-affix { border: 2px solid var(--px-danger); }
body.ui-new .px-field--error .px-affix > .form-control { border: 0; }
body.ui-new .px-fieldset { border: 1px solid var(--px-line); border-radius: var(--px-radius-card); padding: var(--px-space-3) var(--px-space-4) var(--px-space-4); margin: 0; display: flex; flex-direction: column; gap: var(--px-space-3); }
body.ui-new .px-fieldset > legend { float: none; width: auto; font-size: var(--px-text-label); font-weight: 600; padding: 0 6px; margin: 0; }
body.ui-new .px-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--px-space-4); }
/* A choice as a card (a radio or checkbox with a title and a line of explanation). */
body.ui-new .px-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-card); background: var(--px-surface); cursor: pointer; }
body.ui-new .px-option:has(input:checked) { border-color: var(--px-accent); background: var(--px-accent-50); box-shadow: inset 0 0 0 1px var(--px-accent); }
body.ui-new .px-option b { display: block; }
body.ui-new .px-option span span { color: var(--px-ink-2); font-size: var(--px-text-table); }

/* Segmented control: level-two tabs and short choices (Hourly / Fixed fee). Radios underneath, so it works without script. */
body.ui-new .px-segmented { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--px-radius-card); background: var(--px-muted); max-width: 100%; }
body.ui-new .px-segmented input { position: absolute; opacity: 0; pointer-events: none; }
body.ui-new .px-segmented label, body.ui-new .px-segmented a { min-height: 30px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--px-radius-button); color: var(--px-ink-2); font-size: var(--px-text-table); text-decoration: none; cursor: pointer; }
body.ui-new .px-segmented input:checked + label, body.ui-new .px-segmented a[aria-current] { background: var(--px-surface); color: var(--px-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
body.ui-new .px-segmented input:focus-visible + label { outline: 2px solid var(--px-accent); outline-offset: 1px; }

/* ---------- Error summary (top of the form, links to each field) ---------- */

body.ui-new .px-error-summary { border: 1px solid var(--px-danger); border-left-width: 4px; border-radius: var(--px-radius-button); padding: 14px 16px; background: var(--px-danger-bg); margin: 0 0 var(--px-space-6); }
body.ui-new .px-error-summary:focus, body.ui-new .px-error-summary:focus-visible { outline: 3px solid var(--px-danger); outline-offset: 2px; }
body.ui-new .px-error-summary__title { margin: 0 0 4px; font-size: var(--px-text); line-height: 22px; font-weight: 700; color: var(--px-danger); }
body.ui-new .px-error-summary ul { margin: 0; padding-left: 20px; }
body.ui-new .px-error-summary a { color: var(--px-ink); font-weight: 600; text-decoration: underline; }
body.ui-new .px-error-summary a:hover { color: var(--px-danger); }

/* ---------- Form pattern: numbered sections, a section index, a sticky footer ---------- */

body.ui-new .px-form { display: flex; flex-direction: column; gap: var(--px-space-6); }
body.ui-new .px-form-layout { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
body.ui-new .px-form-index { flex: 0 0 220px; position: sticky; top: var(--px-space-4); display: flex; flex-direction: column; gap: 2px; }
body.ui-new .px-form-index a { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 10px; border-radius: var(--px-radius-button); color: var(--px-ink-2); text-decoration: none; }
body.ui-new .px-form-index a:hover { background: var(--px-subtle); }
body.ui-new .px-form-index a[aria-current] { background: var(--px-accent-50); color: var(--px-accent-700); font-weight: 700; }
body.ui-new .px-form-index__step { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--px-line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex: none; }
body.ui-new .px-form-index__step--done { background: var(--px-success); border-color: var(--px-success); color: #fff; }
body.ui-new .px-form-index__step--error { border-color: var(--px-danger); color: var(--px-danger); }
body.ui-new .px-form-body { flex: 999 1 560px; min-width: 0; max-width: 920px; display: flex; flex-direction: column; gap: var(--px-space-6); }
body.ui-new .px-form-section { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-card); box-shadow: var(--px-shadow-1); padding: var(--px-space-6); display: flex; flex-direction: column; gap: var(--px-space-4); scroll-margin-top: var(--px-space-4); }
body.ui-new .px-form-section__head { display: flex; gap: var(--px-space-3); align-items: flex-start; }
body.ui-new .px-form-section__number { width: 28px; height: 28px; border-radius: 50%; background: var(--px-accent-50); color: var(--px-accent-700); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
body.ui-new .px-form-section__head h2 { margin: 0; font-size: 1.25rem; line-height: 28px; }
body.ui-new .px-form-section__head p { margin: 2px 0 0; color: var(--px-ink-3); }
body.ui-new .px-form-footer { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px var(--px-space-4); background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-card); box-shadow: 0 -6px 16px rgba(16, 24, 40, .08); }
body.ui-new .px-form-footer__status { flex: 1 1 200px; font-size: var(--px-text-table); font-weight: 600; color: var(--px-danger); }
body.ui-new .px-form-footer__spacer { flex: 1 1 auto; }

/* ---------- Tables: light sticky header, tabular figures, money on the right ---------- */

body.ui-new .table {
    --bs-table-bg: var(--px-surface);
    --bs-table-color: var(--px-ink);
    --bs-table-border-color: var(--px-line-soft);
    --bs-table-striped-bg: var(--px-subtle);
    --bs-table-hover-bg: var(--px-subtle);
    --bs-table-active-bg: var(--px-accent-50);
    font-size: var(--px-text-table);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
body.ui-new .table > :not(caption) > * > * { padding: 10px 12px; vertical-align: middle; border-bottom-color: var(--px-line-soft); }
body.ui-new .table > thead > tr > th, body.ui-new .table > thead > tr > td { position: sticky; top: 0; z-index: 1; background: var(--px-subtle); color: var(--px-ink-2); font-size: var(--px-text-label); font-weight: 600; white-space: nowrap; padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--px-line); }
body.ui-new .table > tbody > tr.px-selected > * { --bs-table-bg-state: var(--px-accent-50); }
body.ui-new .table .px-row-title { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; color: var(--px-ink); text-decoration: none; } /* 24 px target (WCAG 2.2) for every table's row title (#731) */
body.ui-new .table .px-row-title:hover { color: var(--px-accent-700); text-decoration: underline; }
body.ui-new .table .px-row-sub { display: block; font-size: var(--px-text-label); color: var(--px-ink-3); }
body.ui-new .table .px-check { width: 40px; }
body.ui-new .table .px-actions-cell { width: 48px; text-align: right; }
body.ui-new .px-table--compact > :not(caption) > * > * { padding-top: 6px; padding-bottom: 6px; }
body.ui-new th[aria-sort] a, body.ui-new th .px-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
body.ui-new th .px-sort::after { content: "↕"; opacity: 0; font-size: .75rem; }
body.ui-new th .px-sort:hover::after, body.ui-new th .px-sort:focus-visible::after { opacity: .7; }
body.ui-new th[aria-sort="ascending"] .px-sort::after { content: "↑"; opacity: 1; }
body.ui-new th[aria-sort="descending"] .px-sort::after { content: "↓"; opacity: 1; }
/* The table's frame scrolls inside itself, so the header can stay put and a wide table doesn't widen the page. */
body.ui-new .px-table-frame { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-card); overflow: hidden; }
body.ui-new .px-table-scroll { overflow: auto; max-height: var(--px-table-max-height, 70vh); }

/* ---------- List pattern: saved views, search, filter chips, bulk bar, pager ---------- */

body.ui-new .px-list { display: flex; flex-direction: column; gap: 14px; }
body.ui-new .px-views { display: flex; gap: 2px; border-bottom: 1px solid var(--px-line); overflow-x: auto; scrollbar-width: thin; }
body.ui-new .px-views a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: var(--px-ink-2); text-decoration: none; white-space: nowrap; }
body.ui-new .px-views a:hover { color: var(--px-ink); box-shadow: inset 0 -3px 0 var(--px-line); }
body.ui-new .px-views a[aria-current] { color: var(--px-accent-700); font-weight: 700; box-shadow: inset 0 -3px 0 var(--px-accent); }
body.ui-new .px-views .px-views__save { color: var(--px-accent); }
body.ui-new .px-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.ui-new .px-search { flex: 1 1 300px; max-width: 440px; min-height: var(--px-control-height); display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-button); color: var(--px-ink-3); }
body.ui-new .px-search:focus-within { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); }
body.ui-new .px-search input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; color: var(--px-ink); background: transparent; min-height: 34px; }
body.ui-new .px-search input::placeholder { color: var(--px-ink-3); }
body.ui-new .px-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--px-line-strong); border-radius: 16px; background: var(--px-surface); color: var(--px-ink); font-size: var(--px-text-table); text-decoration: none; cursor: pointer; white-space: nowrap; }
body.ui-new .px-chip:hover { border-color: var(--px-ink-3); background: var(--px-subtle); color: var(--px-ink); }
body.ui-new .px-chip--on { background: var(--px-accent-50); border-color: var(--px-accent); color: var(--px-accent-700); font-weight: 600; }
body.ui-new .px-chip--on:hover { background: var(--px-accent-100); color: var(--px-accent-700); border-color: var(--px-accent); }
body.ui-new .px-filter-bar__end { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
body.ui-new .px-bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: var(--px-accent-700); color: #fff; font-size: var(--px-text-table); }
body.ui-new .px-bulk-bar[hidden] { display: none; }
body.ui-new .px-bulk-bar .btn { --bs-btn-color: #fff; --bs-btn-bg: transparent; --bs-btn-border-color: rgba(255, 255, 255, .6); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .14); --bs-btn-hover-border-color: #fff; --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .2); }
body.ui-new .px-bulk-bar .btn-light { --bs-btn-color: var(--px-accent-700); --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-color: var(--px-accent-700); --bs-btn-hover-bg: var(--px-accent-50); }
body.ui-new .px-bulk-bar .btn-tertiary { --bs-btn-border-color: transparent; margin-left: auto; }
body.ui-new .px-pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; font-size: var(--px-text-table); color: var(--px-ink-2); border-top: 1px solid var(--px-line-soft); background: var(--px-surface); }
body.ui-new .px-pager__size { margin-left: auto; display: flex; align-items: center; gap: 8px; }
body.ui-new .px-pager__size .form-select { width: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: var(--px-text-table); }
body.ui-new .px-pager__nav { display: flex; gap: 8px; }

/* The list pattern's shared pieces (#538; PxTagHelpers: px-filter-chip, px-filter-remove, px-more-filters,
   px-clear-filters, th[px-sort], px-row-actions). A filter that's on is its chip with a remove button joined to it. */
body.ui-new .px-filter-chip { display: inline-flex; align-items: stretch; }
body.ui-new .px-filter-chip--on > .px-chip { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; }
body.ui-new .px-filter-chip__remove { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 8px; border: 1px solid var(--px-accent); border-left: 1px solid rgba(var(--px-accent-rgb), .35); border-radius: 0 16px 16px 0; background: var(--px-accent-50); color: var(--px-accent-700); text-decoration: none; }
body.ui-new .px-filter-chip__remove:hover { background: var(--px-accent-100); color: var(--px-accent-700); }
body.ui-new .px-filter-chip__menu { max-height: 320px; overflow-y: auto; }
body.ui-new .px-filter-chip__menu .dropdown-item[aria-current] { font-weight: 700; color: var(--px-accent-700); background: var(--px-accent-50); }
body.ui-new .px-chip .px-count { margin-left: 2px; }
body.ui-new .px-more-filters__panel { width: min(340px, calc(100vw - 32px)); padding: var(--px-space-4); }
body.ui-new .px-more-filters__fields { display: flex; flex-direction: column; gap: var(--px-space-3); }
body.ui-new .px-more-filters__fields .px-field { margin: 0; }
body.ui-new .px-more-filters__actions { display: flex; justify-content: flex-end; margin-top: var(--px-space-4); }
/* A filter on what's typed (px-filter-chip text="true": the contacts list's Location, #539): its menu is one field. */
body.ui-new .px-filter-chip__form { width: min(300px, calc(100vw - 32px)); padding: var(--px-space-4); }
body.ui-new .px-filter-chip__form .px-label { display: block; margin-bottom: var(--px-space-1); }
body.ui-new th .px-sort { min-height: 24px; }
body.ui-new .px-row-actions .btn-icon { min-width: 32px; min-height: 32px; }
body.ui-new .btn.disabled, body.ui-new .btn:disabled { pointer-events: none; }

/* ---------- Tabs: level one underlines, level two the segmented control ---------- */

body.ui-new .nav-tabs, body.ui-new .px-tabs { --bs-nav-tabs-border-width: 0; --bs-nav-link-color: var(--px-ink-2); --bs-nav-link-hover-color: var(--px-ink); --bs-nav-link-font-size: var(--px-text); display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--px-line); margin: 0 0 var(--px-space-4); padding: 0; list-style: none; }
body.ui-new .nav-tabs .nav-link, body.ui-new .px-tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: none; color: var(--px-ink-2); text-decoration: none; }
body.ui-new .nav-tabs .nav-link:hover, body.ui-new .px-tabs a:hover { color: var(--px-ink); box-shadow: inset 0 -3px 0 var(--px-line); }
body.ui-new .nav-tabs .nav-link.active, body.ui-new .px-tabs a[aria-current], body.ui-new .px-tabs a[aria-selected="true"] { color: var(--px-accent-700); font-weight: 700; background: none; box-shadow: inset 0 -3px 0 var(--px-accent); }

/* ---------- Dialogs (no taller than the window) and the side panel ---------- */

body.ui-new .modal { --bs-modal-width: 560px; --bs-modal-border-radius: var(--px-radius-dialog); --bs-modal-border-color: var(--px-line); --bs-modal-box-shadow: var(--px-shadow-3); --bs-modal-header-border-color: var(--px-line); --bs-modal-footer-border-color: var(--px-line); --bs-modal-padding: var(--px-space-6); }
body.ui-new .modal-content { max-height: calc(100vh - 2 * var(--bs-modal-margin)); max-height: calc(100dvh - 2 * var(--bs-modal-margin)); overflow: hidden; box-shadow: var(--px-shadow-3); }
body.ui-new .modal-body { overflow-y: auto; }
body.ui-new .modal-title { font-size: 1.0625rem; font-weight: 700; }
body.ui-new .modal-footer { gap: 8px; }
body.ui-new .modal-footer > * { margin: 0; }
body.ui-new .modal-backdrop, body.ui-new .offcanvas-backdrop { --bs-backdrop-bg: #18212E; --bs-backdrop-opacity: .35; }

body.ui-new .px-side-panel { --bs-offcanvas-width: 480px; --bs-offcanvas-border-color: var(--px-line); --bs-offcanvas-box-shadow: -12px 0 24px rgba(16, 24, 40, .12); max-width: 100vw; box-shadow: -12px 0 24px rgba(16, 24, 40, .12); }
body.ui-new .px-side-panel--wide { --bs-offcanvas-width: 720px; }
body.ui-new .px-side-panel .offcanvas-header { align-items: flex-start; gap: var(--px-space-3); padding: 18px 24px 14px; border-bottom: 1px solid var(--px-line); }
body.ui-new .px-side-panel .offcanvas-title { margin: 0; font-size: 1.375rem; line-height: 28px; font-weight: 700; }
body.ui-new .px-side-panel__subtitle { display: block; margin-top: 2px; font-size: var(--px-text-table); color: var(--px-ink-3); }
body.ui-new .px-side-panel .offcanvas-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
body.ui-new .px-side-panel__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body.ui-new .px-side-panel__footer { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--px-line); background: var(--px-surface); }
body.ui-new .px-side-panel__footer .px-spacer { flex: 1 1 auto; }
body.ui-new .btn-close { width: 32px; height: 32px; padding: 0; opacity: .75; background-size: 12px; border-radius: var(--px-radius-button); }
body.ui-new .btn-close:hover { opacity: 1; background-color: var(--px-subtle); }

/* ---------- The old pages that open over another (#368): the shared loader's side panel and dialog ----------
   The page underneath (proteus-ui-legacy.js): a form with more than three fields in a side panel on the right, a
   short one in a small dialog; the page in a frame inside either. The page in the frame (_BlankLayout.cshtml in the
   new UI): its card is the panel's content, with the header at the top and the footer (Save) at the bottom always in
   view. */

body.ui-new .px-frame-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(24, 33, 46, .35); }
body.ui-new .px-frame-backdrop--loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 3px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: px-frame-spin .8s linear infinite; }
@keyframes px-frame-spin { to { transform: rotate(360deg); } }
body.ui-new .px-frame { position: fixed; z-index: 1055; display: flex; flex-direction: column; background: var(--px-surface); overflow: hidden; }
body.ui-new .px-frame--loading { visibility: hidden; }
body.ui-new .px-frame > iframe { display: block; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; }
body.ui-new .px-frame--panel { top: 0; right: 0; bottom: 0; width: 720px; max-width: 100vw; border-left: 1px solid var(--px-line); box-shadow: -12px 0 24px rgba(16, 24, 40, .12); }
body.ui-new .px-frame--dialog { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 560px; max-width: calc(100vw - 2 * var(--px-space-4)); max-height: calc(100vh - 2 * var(--px-space-4)); max-height: calc(100dvh - 2 * var(--px-space-4)); border: 1px solid var(--px-line); border-radius: var(--px-radius-dialog); box-shadow: var(--px-shadow-3); }
body.ui-new .px-frame--dialog > iframe { flex: none; }

/* Print.css (the blank layout's first stylesheet, for the print views) sets the root's font to 17pt; rem is 16px here. */
html:has(> body.ui-new.shared_BlankLayout) { font-size: 100%; }
body.ui-new.shared_BlankLayout, body.ui-new.shared_BlankLayout form { background: var(--px-surface); }
body.ui-new.shared_BlankLayout > form > .card, body.ui-new.shared_BlankLayout > form > div > .card:only-child { margin: 0 !important; border: 0; border-radius: 0 !important; box-shadow: none !important; }
body.ui-new.shared_BlankLayout .card > .card-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--px-space-3); padding: 18px 24px 14px; background: var(--px-surface); border-bottom: 1px solid var(--px-line); }
body.ui-new.shared_BlankLayout .card > .card-header .card-title, body.ui-new.shared_BlankLayout .card > .card-header .modal-title { margin: 0; font-size: 1.375rem; line-height: 28px; font-weight: 700; color: var(--px-ink); }
body.ui-new.shared_BlankLayout.px-in-dialog .card > .card-header .card-title, body.ui-new.shared_BlankLayout.px-in-dialog .card > .card-header .modal-title { font-size: 1.0625rem; line-height: 24px; }
/* position: static undoes custom.css's absolute .shared_BlankLayout .close (5px from the header's corner), so the link sits in the header's row, level with the title and inside the frame (#548). */
body.ui-new.shared_BlankLayout .card > .card-header .close { position: static; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -2px -6px 0 auto; border-radius: var(--px-radius-button); cursor: pointer; }
body.ui-new.shared_BlankLayout .card > .card-header .close:hover { background-color: var(--px-subtle); }
body.ui-new.shared_BlankLayout .card > .card-body { padding: 20px 24px !important; }
body.ui-new.shared_BlankLayout .card > .card-footer { position: sticky; bottom: 0; z-index: 3; padding: 14px 24px; background: var(--px-surface); border-top: 1px solid var(--px-line); }
body.ui-new.shared_BlankLayout .card > .card-footer .form-group, body.ui-new.shared_BlankLayout .card > .card-footer .button-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
body.ui-new.shared_BlankLayout .card > .card-footer .form-group > .ms-2, body.ui-new.shared_BlankLayout .card > .card-footer .button-group > .ms-2 { margin-left: 0 !important; }

/* ---------- Empty states ---------- */

body.ui-new .px-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--px-space-4); border: 1px dashed var(--px-line-strong); border-radius: var(--px-radius-card); background: var(--px-surface); }
body.ui-new .px-empty__title { margin: 0; font-size: var(--px-text); font-weight: 700; }
body.ui-new .px-empty__text { margin: 0; color: var(--px-ink-3); }
body.ui-new .px-empty--all-clear { border: 0; background: var(--px-success-bg); color: var(--px-success); flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
body.ui-new .px-empty--all-clear .px-empty__text { color: var(--px-success); }

/* ---------- Toasts: colour and icon follow the type ---------- */

body.ui-new .px-toasts { position: fixed; z-index: 1090; right: var(--px-space-4); bottom: var(--px-space-4); width: min(420px, calc(100vw - 2 * var(--px-space-4))); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
body.ui-new .px-toasts--inline { position: static; width: auto; pointer-events: auto; margin: 0 0 var(--px-space-4); }
body.ui-new .px-toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--px-surface); border: 1px solid var(--px-line); border-left: 4px solid var(--px-neutral); border-radius: var(--px-radius-button); box-shadow: var(--px-shadow-2); font-size: var(--px-text-table); }
body.ui-new .px-toast__icon { flex: none; margin-top: 1px; }
body.ui-new .px-toast__body { flex: 1 1 auto; min-width: 0; }
body.ui-new .px-toast__title { font-weight: 700; margin-right: 4px; }
body.ui-new .px-toast .btn { min-height: 24px; --bs-btn-padding-x: 6px; flex: none; }
body.ui-new .px-toast--success { border-left-color: var(--px-success); }
body.ui-new .px-toast--success .px-toast__title, body.ui-new .px-toast--success .px-toast__icon { color: var(--px-success); }
body.ui-new .px-toast--danger { border-left-color: var(--px-danger); }
body.ui-new .px-toast--danger .px-toast__title, body.ui-new .px-toast--danger .px-toast__icon { color: var(--px-danger); }
body.ui-new .px-toast--warning { border-left-color: var(--px-warning); }
body.ui-new .px-toast--warning .px-toast__title, body.ui-new .px-toast--warning .px-toast__icon { color: var(--px-warning); }
body.ui-new .px-toast--info { border-left-color: var(--px-info); }
body.ui-new .px-toast--info .px-toast__title, body.ui-new .px-toast--info .px-toast__icon { color: var(--px-info); }
body.ui-new .px-toast--deleted { border-left-color: var(--px-neutral); }
body.ui-new .px-toast--deleted .px-toast__title, body.ui-new .px-toast--deleted .px-toast__icon { color: var(--px-neutral); }

/* Old-UI alerts restyled to the status colours. */
body.ui-new .alert { --bs-alert-border-radius: var(--px-radius-button); border-left-width: 4px; }
body.ui-new .alert-success { --bs-alert-color: var(--px-success); --bs-alert-bg: var(--px-success-bg); --bs-alert-border-color: var(--px-success); }
body.ui-new .alert-warning { --bs-alert-color: var(--px-warning); --bs-alert-bg: var(--px-warning-bg); --bs-alert-border-color: var(--px-warning); }
body.ui-new .alert-danger { --bs-alert-color: var(--px-danger); --bs-alert-bg: var(--px-danger-bg); --bs-alert-border-color: var(--px-danger); }
body.ui-new .alert-info { --bs-alert-color: var(--px-info); --bs-alert-bg: var(--px-info-bg); --bs-alert-border-color: var(--px-info); }

/* ---------- The old layout's own parts: header, the sidebar's buttons, footer, theme switcher (#396) ---------- */

/* The old gradient (the old header, a card header) is the firm's accent, so its white text holds 4.5:1 in every theme
   (the old Green theme's was 4:1); its links stay white, not the accent the base rule gives every link. An old button
   with the gradient is a secondary button (Old pages, below). */
body.ui-new .gradient { background: var(--px-accent-700); background: linear-gradient(90deg, var(--px-accent) 0%, var(--px-accent-700) 100%); color: #fff; }
body.ui-new a.gradient, body.ui-new a.gradient:hover, body.ui-new .topHdr > .nav-item > .nav-link, body.ui-new .topHdr > .nav-item > .nav-link:hover, body.ui-new a.hdrLogout, body.ui-new a.hdrLogout:hover { color: #fff; }
/* The footer's white text was meant for a dark page; here it's on the light canvas. */
body.ui-new .loginFtr p { color: var(--px-ink-3); }
/* The theme switcher's tab sits under the toasts and dialogs, not over them (it was z-index 9999). */
body.ui-new .theme-switcher { z-index: 1035; }

/* ---------- Old pages (#628): buttons, tables, fields, cards and headings ----------
   An old page's own markup takes the design system's look from here alone, with no view change. Every rule matches
   only old markup (.button, .roundBtn, .customTable, .lightTable, span.card-title, a field without Bootstrap's class),
   which a redesigned (.New) view doesn't use. Where the guess is wrong, an area issue adds a marker (below) or moves the
   view onto the components above. How a screen uses them: docs/plan/ui-redesign.md#old-pages-in-the-new-ui. */

/* Buttons. Every old button is secondary; a form's submit is primary; an old red button is outlined danger. A marker on
   the button decides over all of that: px-primary, px-secondary, px-danger (outlined destructive). Precedence: marker,
   then danger, then submit, then the default. Each variant has the base rule's specificity (the rest is in :where), so
   the later one wins; they set only the colours, which the base and hover rules read. The colours are !important
   because the old stylesheets force theirs (.customTable a.button, .shared_BlankLayout .button, Bootstrap's .bg-danger). */
body.ui-new :is(.button, .roundBtn) {
    --pxo-color: var(--px-ink); --pxo-bg: var(--px-surface); --pxo-border: var(--px-line-strong);
    --pxo-hover-color: var(--px-ink); --pxo-hover-bg: var(--px-subtle); --pxo-hover-border: var(--px-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--px-control-height);
    padding: 0 14px;
    font-family: var(--px-font);
    font-size: var(--px-text);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: var(--pxo-color) !important;
    background: var(--pxo-bg) !important;
    border: 1px solid var(--pxo-border) !important;
    border-radius: var(--px-radius-button);
    box-shadow: none;
    overflow: visible;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.ui-new :where(button[type="submit"], input[type="submit"]).button, body.ui-new .button:where(.btn-primary) {
    --pxo-color: #fff; --pxo-bg: var(--px-accent); --pxo-border: var(--px-accent);
    --pxo-hover-color: #fff; --pxo-hover-bg: var(--px-accent-700); --pxo-hover-border: var(--px-accent-700);
}
body.ui-new :is(.button, .roundBtn):where(.bg-danger) {
    --pxo-color: var(--px-danger); --pxo-bg: var(--px-surface); --pxo-border: var(--px-danger-line);
    --pxo-hover-color: var(--px-danger); --pxo-hover-bg: var(--px-danger-bg); --pxo-hover-border: var(--px-danger);
}
body.ui-new :is(.button, .roundBtn):where(.px-secondary) {
    --pxo-color: var(--px-ink); --pxo-bg: var(--px-surface); --pxo-border: var(--px-line-strong);
    --pxo-hover-color: var(--px-ink); --pxo-hover-bg: var(--px-subtle); --pxo-hover-border: var(--px-ink-3);
}
body.ui-new :is(.button, .roundBtn):where(.px-primary) {
    --pxo-color: #fff; --pxo-bg: var(--px-accent); --pxo-border: var(--px-accent);
    --pxo-hover-color: #fff; --pxo-hover-bg: var(--px-accent-700); --pxo-hover-border: var(--px-accent-700);
}
body.ui-new :is(.button, .roundBtn):where(.px-danger) {
    --pxo-color: var(--px-danger); --pxo-bg: var(--px-surface); --pxo-border: var(--px-danger-line);
    --pxo-hover-color: var(--px-danger); --pxo-hover-bg: var(--px-danger-bg); --pxo-hover-border: var(--px-danger);
}
body.ui-new :is(.button, .roundBtn):hover { color: var(--pxo-hover-color) !important; background: var(--pxo-hover-bg) !important; border-color: var(--pxo-hover-border) !important; }
body.ui-new :is(.button, .roundBtn):is(:disabled, .disabled, [aria-disabled="true"]) { color: var(--px-ink-3) !important; background: var(--px-subtle) !important; border-color: var(--px-line-2) !important; cursor: not-allowed; }
/* The old sheen (custom.css's .button::after) and the thin 22px icons. */
body.ui-new .button::after { content: none; display: none; }
body.ui-new :is(.button, .roundBtn) i { margin: 0; line-height: 1; }
body.ui-new :is(.button, .roundBtn) i.icon { font-size: 20px; font-weight: 400; }
/* An old round button (a delete cross, mostly) is an icon button: 32px, the button's corners. */
body.ui-new .roundBtn { flex: none; width: 32px; height: 32px; min-height: 32px; padding: 0; }
body.ui-new .input-group-append .button { height: auto; min-height: 38px; border-radius: 0 var(--px-radius-button) var(--px-radius-button) 0; }

/* Tables: the design system's table, with or without .table; the old dark header and forced link colours gone. */
body.ui-new table:is(.customTable, .lightTable) { width: 100%; margin: 0; overflow: visible; border-collapse: collapse; background: var(--px-surface); color: var(--px-ink); font-size: var(--px-text-table); line-height: 20px; font-variant-numeric: tabular-nums; }
body.ui-new :is(.customTable, .lightTable) > :is(thead, tbody, tfoot) > tr > :is(td, th) { padding: 10px 12px; vertical-align: middle; font-size: var(--px-text-table); line-height: 20px; border-bottom: 1px solid var(--px-line-soft); }
body.ui-new :is(.customTable, .lightTable) > :is(thead, tbody, tfoot) > tr > th { background: var(--px-subtle); color: var(--px-ink-2); font-size: var(--px-text-label); line-height: 18px; font-weight: 600; border-radius: 0; }
body.ui-new :is(.customTable, .lightTable) > thead > tr > th { position: sticky; top: var(--pxo-sticky-top, 0px); z-index: 1; padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--px-line); }
body.ui-new .lightTable.flagsTbl th { background-color: var(--px-subtle) !important; color: var(--px-ink-2) !important; }
body.ui-new :is(.customTable, .lightTable) a:where(:not(.btn, .button, .roundBtn, .dropdown-item, .gradient, .badge, .text-white)) { color: var(--px-accent) !important; }
body.ui-new :is(.customTable, .lightTable) a:where(:not(.btn, .button, .roundBtn, .dropdown-item, .gradient, .badge, .text-white)):hover { color: var(--px-accent-700) !important; }
body.ui-new .customTable a.btn { color: var(--bs-btn-color) !important; }
body.ui-new .customTable a.btn:hover { color: var(--bs-btn-hover-color) !important; }
body.ui-new .customTable a.dropdown-item { color: var(--bs-dropdown-link-color) !important; }
body.ui-new .customTable a.dropdown-item:is(:hover, :focus) { color: var(--bs-dropdown-link-hover-color) !important; }
/* The header stays in view under the app's header (sticky from 992px) and a matter's header (proteus-matter.js keeps
   --px-matter-header-height); inside a box that scrolls or clips, at that box's top. A card that clips its corners
   (.overflow-hidden) clips without becoming a scroll container, so the header still sticks to the page. */
@media (min-width: 992px) {
    body.ui-new .px-shell__content { --pxo-sticky-top: calc(var(--px-topbar-height, 60px) + var(--px-matter-header-height, 0px)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body.ui-new .px-shell__content { --pxo-sticky-top: var(--px-matter-header-height, 0px); }
}
body.ui-new :is(.table-responsive, .px-table-scroll, .modal, .dataTables_scroll, .overflow-auto, .overflow-scroll, .overflow-x-auto, .overflow-y-auto, .overflow-x-scroll, .overflow-y-scroll, .overflow-hidden:not(.card), [style*="overflow"]) { --pxo-sticky-top: 0px; }
body.ui-new .card.overflow-hidden { overflow: clip !important; }

/* Fields: a field without Bootstrap's class looks editable too; the design system's spacing, labels above. The
   :where keeps these below any plugin's or component's own rule (Select2, the date pickers, .px-search). */
body.ui-new :where(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="file"], [type="range"], [type="color"]), select, textarea):where(:not(.form-control, .form-select, .form-check-input, .button, .btn, :is(.px-search, .px-segmented, .px-dropzone, .px-topbar, .px-option, .px-affix) *)) {
    max-width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    font-family: var(--px-font);
    font-size: var(--px-text);
    font-weight: 400;
    line-height: 1.4;
    color: var(--px-ink);
    background-color: var(--px-surface);
    border: 1px solid var(--px-line-strong);
    border-radius: var(--px-radius-input);
}
body.ui-new :where(textarea):where(:not(.form-control)) { min-height: 84px; }
body.ui-new :where(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="file"], [type="range"], [type="color"]), select, textarea):where(:not(.form-control, .form-select, .form-check-input, .button, .btn, :is(.px-search, .px-segmented, .px-dropzone, .px-topbar, .px-option, .px-affix) *)):focus { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); outline: none; }
body.ui-new :where(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea):where(:not(.form-control, .form-select, .form-check-input, .button, .btn, :is(.px-search, .px-segmented, .px-dropzone, .px-topbar, .px-option, .px-affix) *)):disabled { background-color: var(--px-subtle); border-color: var(--px-line-2); color: var(--px-ink-3); }
body.ui-new :where(.form-group) { margin-bottom: var(--px-space-4); }
body.ui-new .form-group label:where(:not(.btn, .button, .form-check *)) { font-size: var(--px-text-label); font-weight: 600; color: var(--px-ink); }
body.ui-new .form-group > label { display: block; margin: 0 0 var(--px-space-1); }
/* "Required" in words: <span class="px-required" hidden>Required</span> in an old label. hidden keeps the old UI as it
   was, with no change to its stylesheets; here it shows (over Bootstrap's [hidden] rule). */
body.ui-new .px-required[hidden] { display: inline !important; margin-left: var(--px-space-2); }

/* Cards and headings: the design system's card; the page's first card title (an old page has no h1) at the page
   title's size. That's the first span.card-title in the content: none before it, at any depth. */
body.ui-new .card.shadow { --bs-box-shadow: var(--px-shadow-1); border: 1px solid var(--px-line) !important; }
body.ui-new .card > .card-header { padding: var(--px-space-3) var(--px-space-4); font-size: var(--px-text); }
body.ui-new .card > .card-body { padding-top: var(--px-space-4); padding-bottom: var(--px-space-4); }
body.ui-new .card-header .card-title { margin: 0; font-size: 1.0625rem; line-height: 24px; font-weight: 600; color: var(--px-ink); }
body.ui-new .cstm_container span.card-title:not(:is(.card-title, :has(.card-title)) ~ *, :is(.card-title, :has(.card-title)) ~ * *) { font-size: 1.875rem; line-height: 38px; font-weight: 700; }

/* Icons: the old ones with their own light colours, at 3:1 or better against their tint (the rest take the text's colour). */
body.ui-new .table :is(.user-group-icon, .file-icon, .deskphone-icon) { color: var(--px-accent); }
body.ui-new :is(.success, .rsBrilliant).resultGrid .r-icon { color: var(--px-success); background-color: var(--px-success-bg); }
body.ui-new .rsProgress.resultGrid .r-icon { color: var(--px-info); background-color: var(--px-info-bg); }
body.ui-new .danger.resultGrid .r-icon { color: var(--px-danger); background-color: var(--px-danger-bg); }
body.ui-new .green-theme .icon { color: var(--px-success) !important; background-color: var(--px-success-bg) !important; }
body.ui-new :is(.orange-theme, .yellow-theme) .icon { color: var(--px-warning) !important; background-color: var(--px-warning-bg) !important; }
body.ui-new .red-theme .icon { color: var(--px-danger) !important; background-color: var(--px-danger-bg) !important; }
body.ui-new .blue-theme .icon { color: var(--px-info) !important; background-color: var(--px-info-bg) !important; }

/* Narrow screens: the first card title at the smaller page title's size; a wide old table scrolls inside itself, not the
   page (a table can't be a scroll box and keep its full width, so only here); an old dialog's card fits a phone; the old
   forms' fixed columns one under another, as in a dialog (#368). */
@media (max-width: 767.98px) {
    body.ui-new .cstm_container span.card-title:not(:is(.card-title, :has(.card-title)) ~ *, :is(.card-title, :has(.card-title)) ~ * *) { font-size: 1.5rem; line-height: 32px; }
    body.ui-new table:is(.customTable, .lightTable):not(:is(.table-responsive, .dataTables_scroll) *) { display: block; max-width: 100%; overflow-x: auto; --pxo-sticky-top: 0px; }
}
@media (max-width: 575.98px) {
    body.ui-new :is(.button, .roundBtn) { white-space: normal; }
    body.ui-new .modal-dialog .card.rounded-4 { min-width: 0; }
    body.ui-new .cstm_container .card-body .row > [class*="col"] { flex: 0 0 100%; max-width: 100%; }
}

/* ---------- Widgets and editors (#629): the rich-text editors, date and time pickers, Select2, multi-selects,
   DataTables, the colour picker and the calendar ----------
   The old pages' plugins take the design system's look from here alone, with no view change; the old UI doesn't load
   this stylesheet. The editors' two toolbars are chosen by js/proteus-ui-editors.js; their writing area's font is
   css/proteus-ui-editor-content.css, inside the editor only. A date picker's "today" is in one place per picker (Today,
   below), so the marking #668 decides goes there. How a screen uses them: docs/plan/ui-redesign.md. */

/* The editors (TinyMCE 4.1.7, skin lightgray): the field's edge and focus ring, a light toolbar with flat 24px+ buttons,
   the design system's menus and dialogs. The toolbar wraps on a narrow screen (4.1.7 has no overflow menu). */
body.ui-new .mce-tinymce { max-width: 100%; border-color: var(--px-line-strong) !important; border-radius: var(--px-radius-input); box-shadow: none; overflow: hidden; }
body.ui-new .mce-tinymce:focus-within { border-color: var(--px-accent) !important; box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); }
body.ui-new .mce-panel { background-color: var(--px-surface); background-image: none; filter: none; }
body.ui-new .mce-tinymce .mce-toolbar-grp { padding: 2px 4px; background-color: var(--px-subtle); border-color: var(--px-line) !important; }
body.ui-new .mce-tinymce .mce-statusbar { border-color: var(--px-line) !important; }
body.ui-new .mce-tinymce :is(.mce-path-item, .mce-path .mce-divider, .mce-wordcount) { color: var(--px-ink-3); }
body.ui-new :is(.mce-container, .mce-widget) :is(button, .mce-txt, .mce-text, .mce-title, .mce-label, .mce-textbox, .mce-path-item, .mce-menu-shortcut) { font-family: var(--px-font); }
body.ui-new .mce-btn, body.ui-new .mce-btn-group .mce-btn { margin: 1px; background: transparent; background-image: none; filter: none; border: 1px solid transparent; border-radius: var(--px-radius-input); box-shadow: none; text-shadow: none; }
body.ui-new .mce-btn button { min-width: 24px; min-height: 24px; padding: 3px 7px; line-height: 20px; color: var(--px-ink); }
body.ui-new .mce-btn :is(.mce-ico, .mce-txt, i) { color: var(--px-ink-2); text-shadow: none; }
body.ui-new .mce-btn .mce-caret { border-top-color: var(--px-ink-2); }
body.ui-new .mce-btn:is(:hover, :active) { background: var(--px-muted); background-image: none; border-color: var(--px-line); box-shadow: none; }
body.ui-new .mce-btn.mce-active, body.ui-new .mce-btn.mce-active:hover { background: var(--px-accent-50); background-image: none; border-color: var(--px-accent); box-shadow: none; }
body.ui-new .mce-btn.mce-active :is(.mce-ico, .mce-txt, i) { color: var(--px-accent-700); }
body.ui-new .mce-btn:is(:focus, :focus-visible, .mce-focus) { outline: 2px solid var(--px-accent); outline-offset: 0; }
body.ui-new .mce-btn.mce-disabled :is(button, .mce-ico, .mce-txt) { color: var(--px-ink-3); }
body.ui-new .mce-toolbar .mce-btn-group:not(:first-child) { margin-left: 4px; padding-left: 4px; border-left: 1px solid var(--px-line); }
/* Menus (paragraph style, table) and the dialogs (link, image, source). TinyMCE sizes its dialogs' fields itself, so
   they keep its padding and height, not an old page field's (Old pages, above). */
body.ui-new .mce-menu { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-button); box-shadow: var(--px-shadow-2); }
body.ui-new .mce-menu-item { min-height: 24px; color: var(--px-ink); }
body.ui-new .mce-menu-item :is(.mce-text, .mce-ico) { color: var(--px-ink); }
body.ui-new .mce-menu-item:is(:hover, :focus, .mce-selected) { background: var(--px-accent-50); background-image: none; filter: none; color: var(--px-accent-700); }
body.ui-new .mce-menu-item:is(:hover, :focus, .mce-selected) :is(.mce-text, .mce-ico, .mce-menu-shortcut) { color: var(--px-accent-700); }
body.ui-new .mce-menu-item:is(:hover, :focus, .mce-selected) .mce-caret { border-left-color: var(--px-accent-700); }
body.ui-new .mce-menu-item .mce-menu-shortcut { color: var(--px-ink-3); }
body.ui-new .mce-window { border: 1px solid var(--px-line); border-radius: var(--px-radius-dialog); box-shadow: var(--px-shadow-3); }
body.ui-new .mce-window-head { border-bottom: 1px solid var(--px-line); }
body.ui-new .mce-window-head .mce-title { font-size: 1.0625rem; font-weight: 600; color: var(--px-ink); }
body.ui-new .mce-window-head .mce-close { color: var(--px-ink-2); }
body.ui-new .mce-window .mce-foot { border-top: 1px solid var(--px-line); }
body.ui-new .mce-window .mce-label { color: var(--px-ink); }
body.ui-new :is(.mce-window, .mce-menu) .mce-textbox { min-height: 0; max-width: none; padding: 0 4px; font-size: 14px; line-height: normal; color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); box-shadow: none; }
body.ui-new :is(.mce-window, .mce-menu) .mce-textbox:focus { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); }
body.ui-new .mce-window .mce-btn { background: var(--px-surface); border-color: var(--px-line-strong); border-radius: var(--px-radius-button); }
body.ui-new .mce-window .mce-btn:hover { background: var(--px-subtle); border-color: var(--px-ink-3); }
body.ui-new .mce-window .mce-btn button { padding: 6px 14px; font-weight: 600; }
body.ui-new .mce-window .mce-btn.mce-primary { background: var(--px-accent); border-color: var(--px-accent); }
body.ui-new .mce-window .mce-btn.mce-primary:hover { background: var(--px-accent-700); border-color: var(--px-accent-700); }
body.ui-new .mce-window .mce-btn.mce-primary :is(button, .mce-txt, i) { color: #fff; }

/* Date and time pickers: their inputs have the field look (Old pages, above); their pop-ups the design system's
   surface, type, accent and focus, days at least 28px, never wider than a phone. */
body.ui-new :is(.xdsoft_datetimepicker, .daterangepicker, .ui-datepicker, .timepicker_wrap) { font-family: var(--px-font); color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-button); box-shadow: var(--px-shadow-2); max-width: calc(100vw - 16px); }
body.ui-new .xdsoft_datetimepicker { padding: 8px 8px 8px 0; }
/* Wider than its 224px, so the month and year, and 24px arrows either side, keep to one line. */
body.ui-new .xdsoft_datetimepicker .xdsoft_datepicker { width: 244px; }
body.ui-new .xdsoft_datetimepicker .xdsoft_label { font-size: var(--px-text); color: var(--px-ink); background-color: var(--px-surface); }
body.ui-new .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select { border-color: var(--px-line); border-radius: var(--px-radius-input); box-shadow: var(--px-shadow-2); }
body.ui-new .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { color: var(--px-accent-700); background: var(--px-accent-50); }
body.ui-new .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { color: #fff; background: var(--px-accent); box-shadow: none; }
body.ui-new .xdsoft_datetimepicker :is(.xdsoft_prev, .xdsoft_next, .xdsoft_today_button) { opacity: .75; min-width: 24px; min-height: 24px; }
body.ui-new .xdsoft_datetimepicker .xdsoft_calendar :is(td, th) { height: 30px; background: var(--px-surface); border-color: var(--px-line-soft); color: var(--px-ink); font-size: var(--px-text-label); text-align: center; }
body.ui-new .xdsoft_datetimepicker .xdsoft_calendar td > div { padding-right: 0; }
body.ui-new .xdsoft_datetimepicker .xdsoft_calendar th { background: var(--px-subtle); color: var(--px-ink-2); font-weight: 600; }
body.ui-new .xdsoft_datetimepicker .xdsoft_calendar td:hover { color: var(--px-accent-700) !important; background: var(--px-accent-50) !important; }
body.ui-new .xdsoft_datetimepicker .xdsoft_calendar td:is(.xdsoft_other_month, .xdsoft_disabled) { opacity: 1; color: var(--px-ink-3); }
body.ui-new .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled { background: var(--px-subtle); text-decoration: line-through; }
body.ui-new .xdsoft_datetimepicker :is(.xdsoft_calendar td.xdsoft_current, .xdsoft_calendar td.xdsoft_default, .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current) { color: #fff !important; background: var(--px-accent); box-shadow: none; font-weight: 700; }
body.ui-new .xdsoft_datetimepicker .xdsoft_time_box { border-color: var(--px-line); border-radius: var(--px-radius-input); }
body.ui-new .xdsoft_datetimepicker .xdsoft_time_box > div > div { color: var(--px-ink); border-color: var(--px-line-soft); font-size: var(--px-text-label); }
body.ui-new .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { color: var(--px-accent-700) !important; background: var(--px-accent-50) !important; }
body.ui-new .xdsoft_datetimepicker .xdsoft_copyright { display: none; }
body.ui-new .daterangepicker :is(td, th) { min-width: 30px; height: 30px; line-height: 28px; font-size: var(--px-text-label); border-radius: var(--px-radius-input); }
body.ui-new .daterangepicker :is(td, th).available:hover { background: var(--px-accent-50); color: var(--px-accent-700); }
body.ui-new .daterangepicker td.in-range { background: var(--px-accent-50); color: var(--px-ink); }
body.ui-new .daterangepicker td:is(.active, .start-date, .end-date) { background: var(--px-accent); color: #fff; }
body.ui-new .daterangepicker td.off { background: var(--px-surface); color: var(--px-ink-3); }
body.ui-new .daterangepicker .ranges li { min-height: 28px; font-size: var(--px-text-table); color: var(--px-ink); }
body.ui-new .daterangepicker .ranges li:hover { background: var(--px-accent-50); color: var(--px-accent-700); }
body.ui-new .daterangepicker .ranges li.active { background: var(--px-accent); color: #fff; }
body.ui-new .daterangepicker .drp-buttons { border-top-color: var(--px-line); }
body.ui-new .daterangepicker .drp-selected { color: var(--px-ink-2); font-size: var(--px-text-label); }
body.ui-new .daterangepicker select:is(.monthselect, .yearselect, .hourselect, .minuteselect, .ampmselect) { min-height: 30px; padding: 2px 6px; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); }
body.ui-new .daterangepicker::before, body.ui-new .daterangepicker::after { display: none; }
body.ui-new .ui-datepicker { padding: 8px; z-index: 1060 !important; }
body.ui-new .ui-datepicker .ui-datepicker-header { background: transparent; border: 0; color: var(--px-ink); font-weight: 600; }
body.ui-new .ui-datepicker :is(.ui-datepicker-prev, .ui-datepicker-next) { min-width: 28px; min-height: 28px; cursor: pointer; border: 0; background: transparent; }
body.ui-new .ui-datepicker th { color: var(--px-ink-2); font-size: var(--px-text-label); font-weight: 600; }
body.ui-new .ui-datepicker td :is(a, span) { display: block; min-width: 28px; min-height: 28px; line-height: 26px; text-align: center; color: var(--px-ink); background: transparent; border: 1px solid transparent; border-radius: var(--px-radius-input); font-size: var(--px-text-label); }
body.ui-new .ui-datepicker td a:is(.ui-state-hover, :hover) { background: var(--px-accent-50); color: var(--px-accent-700); border-color: var(--px-accent-100); }
body.ui-new .ui-datepicker td a.ui-state-active { background: var(--px-accent); color: #fff; border-color: var(--px-accent); }
body.ui-new .ui-datepicker :is(.ui-datepicker-other-month :is(a, span), .ui-state-disabled span) { color: var(--px-ink-3); opacity: 1; }
body.ui-new .timepicker_wrap { padding: 8px; }
body.ui-new .timepicker_wrap :is(.prev, .next) { min-height: 28px; border-color: var(--px-line); border-radius: var(--px-radius-input); }
body.ui-new .timepicker_wrap :is(.prev, .next):hover { background-color: var(--px-accent-50); }
body.ui-new .timepicker_wrap :is(.ti_tx, .mi_tx, .mer_tx) input { min-height: 32px; color: var(--px-ink); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); text-align: center; }
/* Today, in each picker (#668): a bold number and a 2px ring in the accent, no fill, so it never looks like the selected
   day; selected, it keeps the fill and is bold. The old pickers' stylesheets mark it the same way in the firm's
   colour; these rules put the accent in its place. */
body.ui-new .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: var(--px-accent); font-weight: 700; outline: 2px solid var(--px-accent); outline-offset: -2px; }
body.ui-new .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today.xdsoft_current { color: #fff !important; outline: 0; }
body.ui-new .daterangepicker td.today:not(.off) { font-weight: 700; }
body.ui-new .daterangepicker td.today:not(.active):not(.start-date):not(.end-date):not(.off) { color: var(--px-accent); outline: 2px solid var(--px-accent); outline-offset: -2px; }
body.ui-new .ui-datepicker td a.ui-state-highlight { font-weight: 700; }
body.ui-new .ui-datepicker td a.ui-state-highlight:not(.ui-state-active) { color: var(--px-accent); background: transparent; border-color: var(--px-accent); box-shadow: inset 0 0 0 1px var(--px-accent); }
body.ui-new .jsCalendar tbody td:is(.jsCalendar-current, .jsCalendar-today, .today) { color: var(--px-accent-700) !important; background: var(--px-accent-50) !important; box-shadow: inset 0 0 0 1px var(--px-accent); border-radius: var(--px-radius-input) !important; }

/* Select2 and the multi-selects (bootstrap-multiselect): a design-system select's height, edge and focus; the design
   system's menu. */
body.ui-new .select2-container .select2-selection--single { display: flex; align-items: center; height: auto; min-height: 38px; padding: 7px 32px 7px 10px; font-size: var(--px-text); font-weight: 400; color: var(--px-ink); background-color: var(--px-surface); background-position: right 10px center; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); }
body.ui-new .select2-container .select2-selection--multiple { min-height: 38px; padding: 2px 6px; background-color: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); }
body.ui-new .select2-container .select2-selection__rendered { padding: 0; line-height: 22px; color: var(--px-ink); }
body.ui-new .select2-container .select2-selection__placeholder { color: var(--px-ink-3); }
body.ui-new .select2-container .select2-selection--single .select2-selection__arrow { display: none; }
body.ui-new .select2-container .select2-selection--multiple .select2-selection__choice { color: var(--px-ink); background: var(--px-muted); border: 1px solid var(--px-line-2); border-radius: var(--px-radius-input); }
body.ui-new .select2-container:hover:not(.select2-container--open, .select2-container--focus) .select2-selection { border-color: var(--px-ink-3); }
body.ui-new :is(.select2-container--focus, .select2-container--open) .select2-selection, body.ui-new .select2-container--default.select2-container--open.select2-container .select2-selection.select2-selection--single { color: var(--px-ink); background-color: var(--px-surface); border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); outline: none; }
body.ui-new .select2-dropdown { padding: 4px; font-family: var(--px-font); background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-button); box-shadow: var(--px-shadow-2); }
body.ui-new .select2-container.select2-container--default ul { height: auto; max-height: 250px; }
body.ui-new .select2-container.select2-container--default ul li { min-height: 32px; padding: 6px 12px; font-size: var(--px-text); color: var(--px-ink); border-radius: var(--px-radius-input); }
body.ui-new .select2-container--open .select2-results__option--highlighted { color: var(--px-accent-700) !important; background-color: var(--px-accent-50) !important; }
body.ui-new .select2-container--open .select2-results__option--selected, body.ui-new .select2-container--default .select2-results__option[aria-selected="true"] { color: var(--px-accent-700) !important; background-color: var(--px-accent-50) !important; font-weight: 600 !important; }
body.ui-new .select2-search.select2-search--dropdown { margin-bottom: 4px; }
body.ui-new .select2-search.select2-search--dropdown .select2-search__field { min-height: 36px; padding: 6px 10px; font-size: var(--px-text); font-weight: 400; color: var(--px-ink); background-color: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); }
body.ui-new .select2-search__field:is(:focus, :active) { border-color: var(--px-accent) !important; box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); outline: none; }
body.ui-new button.multiselect, body.ui-new .slt_multi .multiselect.btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 7px 10px; font-family: var(--px-font); font-size: var(--px-text); font-weight: 400; line-height: 22px; text-align: left; color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); box-shadow: none; }
body.ui-new button.multiselect:hover { border-color: var(--px-ink-3); }
body.ui-new button.multiselect:is(:focus, :focus-visible, .show), body.ui-new .btn-group:is(.show, .open) > button.multiselect { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); outline: none; }
body.ui-new button.multiselect::after { margin-top: 0; float: none; border-top-color: var(--px-ink-2); }
body.ui-new .multiselect-container.dropdown-menu { padding: 4px; font-family: var(--px-font); }
body.ui-new .multiselect-container.dropdown-menu li a label, body.ui-new .multiselect-container .multiselect-option { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--px-text) !important; color: var(--px-ink); }
body.ui-new .multiselect-container.dropdown-menu li:is(:hover, .active) > a, body.ui-new .multiselect-container .multiselect-option:is(:hover, .active) { background: var(--px-accent-50); color: var(--px-accent-700); }
body.ui-new .multiselect-container input[type="checkbox"] { accent-color: var(--px-accent); }

/* DataTables: the design system's table (the table rules above where it has .table), search box and pager. */
body.ui-new .dataTables_wrapper { font-size: var(--px-text-table); color: var(--px-ink-2); }
body.ui-new .dataTables_wrapper :is(.datatables-toolbar, .datatables-footer) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; }
body.ui-new .dataTables_wrapper :is(.pull-left, .pull-right) { float: none; }
body.ui-new .dataTables_filter input { width: min(300px, 100%); min-height: var(--px-control-height); padding: 0 10px; font: inherit; font-size: var(--px-text); color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-button); }
body.ui-new .dataTables_filter input:focus { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); outline: none; }
body.ui-new .dataTables_length select { min-height: 32px; padding: 4px 8px; font-size: var(--px-text-table); color: var(--px-ink); background-color: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); }
body.ui-new .dataTables_info { color: var(--px-ink-2); }
body.ui-new table.dataTable > thead > tr > th { background-color: var(--px-subtle); color: var(--px-ink-2); font-size: var(--px-text-label); font-weight: 600; border-bottom: 1px solid var(--px-line); }
body.ui-new table.dataTable > tbody > tr > td { border-bottom: 1px solid var(--px-line-soft); color: var(--px-ink); }
body.ui-new .dataTables_paginate :is(ul, .pagination) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.ui-new .dataTables_paginate :is(.pagination a, a.paginate_button, a.paginate_active, a.previous, a.next) { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 10px; color: var(--px-ink); text-decoration: none; background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-button); }
body.ui-new .dataTables_paginate :is(.pagination a, a.paginate_button):hover { background: var(--px-subtle); border-color: var(--px-ink-3); }
body.ui-new .dataTables_paginate :is(.pagination .active a, a.paginate_active, a.current) { color: var(--px-accent-700); background: var(--px-accent-50); border-color: var(--px-accent); font-weight: 600; }
body.ui-new .dataTables_paginate :is(.pagination .disabled a, a.paginate_button_disabled, a.disabled) { color: var(--px-ink-3); background: var(--px-subtle); border-color: var(--px-line-2); pointer-events: none; }

/* The colour picker (spectrum) and the calendar (jsCalendar): text 4.5:1, edges 3:1, 24px targets. */
body.ui-new .sp-replacer { min-height: 38px; height: auto; color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); }
body.ui-new .sp-replacer:is(:hover, .sp-active) { border-color: var(--px-accent); }
body.ui-new .sp-replacer .sp-preview { border-color: var(--px-line-strong); }
body.ui-new .sp-dd { color: var(--px-ink-2); }
body.ui-new .sp-container { font-family: var(--px-font); background-color: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-button); box-shadow: var(--px-shadow-2); }
body.ui-new .sp-container :is(button, input) { font-family: var(--px-font); font-size: var(--px-text-table); }
body.ui-new .sp-container .sp-input { min-height: 32px; color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); }
body.ui-new .sp-container .sp-input:focus { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); outline: none; }
body.ui-new .sp-container .sp-thumb-el { border-color: var(--px-line-strong); }
body.ui-new .sp-container :is(.sp-choose, .sp-cancel) { min-width: 24px; min-height: 28px; }
body.ui-new .jsCalendar table { font-family: var(--px-font); color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line) !important; border-radius: var(--px-radius-card); }
body.ui-new .jsCalendar thead .jsCalendar-title-name { font-size: var(--px-text); font-weight: 600; color: var(--px-ink); }
body.ui-new .jsCalendar thead :is(.jsCalendar-nav-left, .jsCalendar-nav-right) { min-width: 24px; min-height: 24px; }
body.ui-new .jsCalendar thead .jsCalendar-week-days th { color: var(--px-ink-2); font-size: var(--px-text-label); }
body.ui-new .jsCalendar tbody td { min-width: 24px; height: 28px; line-height: 28px; font-size: var(--px-text-label); color: var(--px-ink); }
body.ui-new .jsCalendar tbody td:is(.jsCalendar-previous, .jsCalendar-next) { color: var(--px-ink-3); }
body.ui-new .jsCalendar tbody td.jsCalendar-selected { height: 28px; line-height: 28px; color: var(--px-ink); }
body.ui-new .jsCalendar tbody td:is(.jsCalendar-colorful-blue, .jsCalendar-colorful-yellow, .jsCalendar-colorful-orange, .jsCalendar-colorful-red, .jsCalendar-colorful-green) { color: var(--px-ink) !important; }

/* ---------- Chosen and the tags boxes (#732): the searchable drop-downs and the keyword boxes ----------
   New UI only, with no view or script change, as #629 did for Select2. Chosen (v1.1.0, js/chosen.jquery.min.js;
   custom.css has its old theme): single and multiple choice on the design system's field (height, edge, radius, focus
   ring), its list the design system's menu with 32px rows and the firm's accent on the highlighted one; disabled as a
   disabled field. The tags boxes: bootstrap-tagsinput (js/tagsinput.js, Email settings' keywords) and jQuery Tags Input
   (js/tags.js, the form builders' attributes) show their input as a field and their tags as the design system's chips,
   each with a 24px remove button. The pages' .slt_multi wrapper (a grey box round the drop-down) is taken off. */
body.ui-new .chosen-container { max-width: 100%; font-family: var(--px-font); font-size: var(--px-text); color: var(--px-ink); }
body.ui-new .chosen-container-single .chosen-single { display: flex; align-items: center; height: auto; min-height: 38px; padding: 0 32px 0 10px; line-height: 22px; color: var(--px-ink); background: var(--px-surface); background-image: none; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); box-shadow: none; }
body.ui-new .chosen-container-single .chosen-single span { flex: 1; min-width: 0; margin-right: 0; color: var(--px-ink); }
body.ui-new .chosen-container-single .chosen-single.chosen-default span { color: var(--px-ink-3); }
body.ui-new .chosen-container-single .chosen-single div { display: block; width: 32px; }
body.ui-new .chosen-container-single .chosen-single div b { display: none; }
body.ui-new .chosen-container-single .chosen-single div::after { content: ""; position: absolute; top: 50%; right: 13px; width: 8px; height: 8px; margin-top: -6px; border: solid var(--px-ink-2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.ui-new .chosen-container-single.chosen-with-drop .chosen-single div::after { margin-top: -2px; transform: rotate(-135deg); }
body.ui-new .chosen-container-single .chosen-single abbr { top: 50%; right: 32px; width: 24px; height: 24px; margin-top: -12px; background: none; font-size: 18px; line-height: 24px; text-align: center; color: var(--px-ink-2); }
body.ui-new .chosen-container-single .chosen-single abbr::before { content: "\00d7"; }
body.ui-new .chosen-container-single .chosen-single abbr:hover { color: var(--px-ink); background: var(--px-muted); border-radius: var(--px-radius-input); }
body.ui-new .chosen-container-single .chosen-single-with-deselect span { margin-right: 28px; }
body.ui-new .chosen-container-multi .chosen-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 38px; padding: 2px 4px; background: var(--px-surface); background-image: none; border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); }
body.ui-new .chosen-container-multi .chosen-choices li { float: none; }
body.ui-new .chosen-container-multi .chosen-choices li.search-field { flex: 1 1 8ch; min-width: 0; }
body.ui-new .chosen-container-multi .chosen-choices li.search-field input[type=text] { width: 100% !important; height: auto; min-height: 30px; margin: 0; padding: 0 6px; font-family: var(--px-font); font-size: var(--px-text); color: var(--px-ink); }
body.ui-new .chosen-container-multi .chosen-choices li.search-field .default { color: var(--px-ink-3); }
body.ui-new .chosen-container-multi .chosen-choices li.search-choice { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; white-space: nowrap; min-height: 28px; margin: 0; padding: 0 2px 0 10px; font-size: var(--px-text-table); line-height: 20px; color: var(--px-ink); background: var(--px-muted); background-image: none; border: 1px solid var(--px-line-2); border-radius: 14px; box-shadow: none; }
body.ui-new .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { position: static; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: none; border-radius: 12px; font-size: 18px; line-height: 1; color: var(--px-ink-2); text-decoration: none; }
body.ui-new .chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before { content: "\00d7"; }
body.ui-new .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover { color: var(--px-ink); background: var(--px-line); }
body.ui-new .chosen-container-multi .chosen-choices li.search-choice-focus { background: var(--px-accent-50); border-color: var(--px-accent); }
body.ui-new .chosen-container-multi .chosen-choices li.search-choice-disabled { padding-right: 10px; color: var(--px-ink-2); background: var(--px-subtle); background-image: none; }
/* Hover and focus after the single and multiple boxes, so they win over both. */
body.ui-new .chosen-container:hover:not(.chosen-container-active, .chosen-disabled) :is(.chosen-single, .chosen-choices) { border-color: var(--px-ink-3); }
body.ui-new .chosen-container-active :is(.chosen-single, .chosen-choices), body.ui-new .chosen-container-active.chosen-with-drop .chosen-single { color: var(--px-ink); background: var(--px-surface); background-image: none; border: 1px solid var(--px-accent); border-radius: var(--px-radius-input); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25) !important; outline: none; }
body.ui-new .chosen-container .chosen-drop { margin-top: 4px; padding: 4px; background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-button); box-shadow: var(--px-shadow-2); }
body.ui-new .chosen-container .chosen-search { padding: 0 0 4px; }
body.ui-new .chosen-container-single .chosen-search input[type=text], body.ui-new .slt_multi .chosen-container-single .chosen-search input[type=text] { height: auto; min-height: 36px; margin: 0; padding: 6px 10px; font-family: var(--px-font); font-size: var(--px-text); color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line-strong) !important; border-radius: var(--px-radius-input); }
body.ui-new .chosen-container .chosen-search input[type=text]:focus { border-color: var(--px-accent) !important; box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25) !important; outline: none; }
body.ui-new .chosen-container .chosen-results { max-height: 240px; margin: 0; padding: 0; }
body.ui-new .chosen-container .chosen-results li, body.ui-new .slt_multi .chosen-container .chosen-results li { min-height: 32px; margin: 0; padding: 6px 10px; font-size: var(--px-text); line-height: 20px; color: var(--px-ink); border-radius: var(--px-radius-input); }
body.ui-new .chosen-container .chosen-results li.highlighted, body.ui-new .slt_multi .chosen-container .chosen-results li.highlighted { color: var(--px-accent-700); background: var(--px-accent-50); background-image: none; }
body.ui-new .chosen-container .chosen-results li.result-selected { font-weight: 600; }
body.ui-new .chosen-container-multi .chosen-drop .result-selected, body.ui-new .chosen-container .chosen-results li.disabled-result { color: var(--px-ink-3); }
body.ui-new .chosen-container .chosen-results li.no-results { color: var(--px-ink-2); background: var(--px-subtle); }
body.ui-new .chosen-container .chosen-results li.group-result { color: var(--px-ink-2); font-size: var(--px-text-label); }
body.ui-new .chosen-container .chosen-results li em { font-style: normal; font-weight: 600; }
body.ui-new .chosen-container.chosen-disabled { opacity: 1 !important; }
body.ui-new .chosen-container.chosen-disabled :is(.chosen-single, .chosen-choices) { color: var(--px-ink-3); background: var(--px-subtle); border-color: var(--px-line-2); }
body.ui-new .chosen-container.chosen-disabled .chosen-single span { color: var(--px-ink-3); }
body.ui-new .chosen-container.chosen-disabled .chosen-single div::after { border-color: var(--px-ink-3); }
body.ui-new .slt_multi.form-control { min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
body.ui-new .slt_multi .chosen-container { height: auto; padding: 0; font-size: var(--px-text); font-weight: 400; background: transparent; border-radius: 0; }
body.ui-new .slt_multi .chosen-container-single .chosen-search { margin: 0; }
body.ui-new :is(.bootstrap-tagsinput, .tagsinput) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; min-height: 38px; padding: 2px 4px; font-family: var(--px-font); font-size: var(--px-text); line-height: 22px; color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); box-shadow: none; cursor: text; }
body.ui-new :is(.bootstrap-tagsinput, .tagsinput):hover { border-color: var(--px-ink-3); }
body.ui-new :is(.bootstrap-tagsinput, .tagsinput):focus-within { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); }
body.ui-new .bootstrap-tagsinput input, body.ui-new .tagsinput .tag-input { flex: 1 1 8ch; width: auto; min-width: 8ch; min-height: 30px; margin: 0; padding: 0 6px; font: inherit; color: var(--px-ink); background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none; }
body.ui-new .bootstrap-tagsinput input::placeholder, body.ui-new .tagsinput .tag-input::placeholder { color: var(--px-ink-3); opacity: 1; }
body.ui-new .tagsinput .tag-input.error { color: var(--px-danger); }
body.ui-new .tagsinput > div[id$="_addTag"] { display: flex; flex: 1 1 8ch; min-width: 8ch; }
body.ui-new :is(.bootstrap-tagsinput .badge, .tagsinput .tag) { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; margin: 0; padding: 0 3px 0 12px; font-size: var(--px-text-table); font-weight: 400; line-height: 20px; white-space: nowrap; color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line-strong); border-radius: 16px; }
body.ui-new .bootstrap-tagsinput .badge.badge-info { color: var(--px-ink); background: var(--px-surface); }
body.ui-new :is(.bootstrap-tagsinput .badge [data-role="remove"], .tagsinput .tag-remove) { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; font-size: 18px; line-height: 1; flex: none; color: var(--px-ink-2); background: transparent; border: 0; border-radius: 12px; cursor: pointer; }
body.ui-new .bootstrap-tagsinput .badge [data-role="remove"]::after { content: "\00d7"; padding: 0; background: none; border-radius: 0; font-size: 18px; }
body.ui-new .tagsinput .tag-remove::before { content: "\00d7"; }
body.ui-new :is(.bootstrap-tagsinput .badge [data-role="remove"], .tagsinput .tag-remove):hover { color: var(--px-ink); background: var(--px-muted); }
body.ui-new .bootstrap-tagsinput .badge [data-role="remove"]:hover::after { background: none; }
body.ui-new .tagsinput .tag-remove:focus-visible { outline: 2px solid var(--px-accent); outline-offset: 1px; }

/* ---------- Questions and messages (#745): proteus-ui.js's Px.message and Px.confirm (custom.js's fnAlert, fnConfirm) ----------
   The confirm dialog is the Bootstrap modal above (Dialogs); where a page has no Bootstrap it is the browser's own
   <dialog> element, drawn the same. A message about a field shows under it as the error summary's do, and an old
   page's field without the design system's markup is marked as an invalid one is. */
body.ui-new dialog.px-confirm--native { width: min(560px, calc(100vw - 32px)); padding: 0; color: var(--px-ink); background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-dialog); box-shadow: var(--px-shadow-3); }
body.ui-new dialog.px-confirm--native::backdrop { background: rgba(24, 33, 46, .35); }
body.ui-new dialog.px-confirm--native .modal-content { border: 0; }
body.ui-new dialog.px-confirm--native :is(.modal-header, .modal-body, .modal-footer) { padding: 16px 20px; }
body.ui-new dialog.px-confirm--native .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--px-line); }
body.ui-new dialog.px-confirm--native .modal-footer { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--px-line); }
body.ui-new [data-px-field-invalid]:where(:not(.px-field *)) { border: 2px solid var(--px-danger); }
body.ui-new .px-field-message:where(:not(.px-field *)) { margin-top: 6px; }

/* ---------- Narrow screens ---------- */

@media (max-width: 767.98px) {
    body.ui-new h1, body.ui-new .h1, body.ui-new .px-page-title { font-size: 1.5rem; line-height: 32px; }
    body.ui-new .px-page-header__row { align-items: flex-start; }
    body.ui-new .px-page-actions { width: 100%; }
    body.ui-new .px-form-index { position: static; flex-basis: 100%; flex-direction: row; overflow-x: auto; }
    body.ui-new .px-form-index a { white-space: nowrap; }
    body.ui-new .px-form-footer { flex-wrap: nowrap; gap: 6px; padding: 8px 12px; }
    body.ui-new .px-form-footer__status { flex: 1 1 auto; min-width: 0; font-size: var(--px-text-label); }
    body.ui-new .px-form-section { padding: var(--px-space-4); }
    body.ui-new .px-search { flex-basis: 100%; max-width: none; }
    body.ui-new .px-filter-bar__end { margin-left: 0; }
    body.ui-new .px-pager__size { margin-left: 0; }
    body.ui-new .px-side-panel, body.ui-new .px-side-panel--wide { --bs-offcanvas-width: 100vw; }
    body.ui-new .px-side-panel .offcanvas-header, body.ui-new .px-side-panel .offcanvas-body, body.ui-new .px-side-panel__footer { padding-left: var(--px-space-4); padding-right: var(--px-space-4); }
    body.ui-new .px-card { padding: var(--px-space-4); }
    body.ui-new .px-frame--panel { width: 100vw; border-left: 0; }
    body.ui-new.shared_BlankLayout .card > .card-header, body.ui-new.shared_BlankLayout .card > .card-body, body.ui-new.shared_BlankLayout .card > .card-footer { padding-left: var(--px-space-4) !important; padding-right: var(--px-space-4) !important; }
}

/* A phone, or a small dialog: the old forms' fixed columns (col-3, col-4 …) one under another. */
@media (max-width: 575.98px) {
    body.ui-new.shared_BlankLayout .card > .card-body .row > [class*="col"] { flex: 0 0 100%; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    body.ui-new *, body.ui-new *::before, body.ui-new *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- The reference page only (/design-system): its frame and the samples' scaffolding ---------- */

body.ui-new .pxr-skip { position: absolute; left: 8px; top: -60px; z-index: 2000; padding: 8px 12px; background: var(--px-surface); border: 2px solid var(--px-accent); border-radius: var(--px-radius-button); }
body.ui-new .pxr-skip:focus { top: 8px; }
body.ui-new .pxr-top { position: sticky; top: 0; z-index: 1020; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--px-space-4); padding: 0 var(--px-space-4); background: var(--px-surface); border-top: 3px solid var(--px-accent); border-bottom: 1px solid var(--px-line); }
body.ui-new .pxr-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; line-height: 1.15; }
body.ui-new .pxr-brand-sub { display: block; font-weight: 400; font-size: var(--px-text-label); color: var(--px-ink-3); }
body.ui-new .pxr-logo { width: 32px; height: 32px; border-radius: var(--px-radius-button); background: var(--px-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; }
body.ui-new .pxr-layout { display: flex; align-items: flex-start; max-width: 1440px; margin: 0 auto; }
body.ui-new .pxr-index { position: sticky; top: 56px; flex: 0 0 220px; max-height: calc(100vh - 56px); overflow-y: auto; padding: var(--px-space-6) var(--px-space-3); display: flex; flex-direction: column; gap: 2px; }
body.ui-new .pxr-index a { display: block; padding: 6px 10px; border-radius: var(--px-radius-button); color: var(--px-ink-2); text-decoration: none; }
body.ui-new .pxr-index a:hover { background: var(--px-surface); color: var(--px-ink); }
body.ui-new .pxr-main { flex: 1 1 auto; min-width: 0; padding: var(--px-space-6) var(--px-space-8) var(--px-space-12); }
body.ui-new .pxr-main:focus { outline: none; }
body.ui-new .pxr-lead { font-size: 1.0625rem; line-height: 1.55; color: var(--px-ink-2); max-width: 900px; }
body.ui-new .pxr-preview { display: flex; flex-wrap: wrap; gap: var(--px-space-4) var(--px-space-8); margin: 0 0 var(--px-space-6); }
body.ui-new .pxr-preview__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.ui-new .pxr-preview__label { font-size: var(--px-text-label); font-weight: 600; }
body.ui-new .pxr-section { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-card); box-shadow: var(--px-shadow-1); padding: var(--px-space-6); margin: 0 0 var(--px-space-6); scroll-margin-top: 72px; min-width: 0; }
body.ui-new .pxr-section > h3 { margin-top: var(--px-space-6); }
body.ui-new .pxr-section > p { max-width: 900px; color: var(--px-ink-2); }
body.ui-new .pxr-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 var(--px-space-4); }
body.ui-new .pxr-row--tight { gap: 6px; margin: 0; }
body.ui-new .pxr-demo { border: 1px dashed var(--px-line-2); border-radius: var(--px-radius-card); padding: var(--px-space-4); margin: 0 0 var(--px-space-4); background: var(--px-canvas); }
body.ui-new .pxr-demo .px-page-header { margin: 0; }
body.ui-new .pxr-spec { margin: 0; padding-left: 20px; color: var(--px-ink-2); max-width: 900px; }
body.ui-new .pxr-spec li + li { margin-top: 4px; }
body.ui-new .pxr-note { color: var(--px-ink-3); }
body.ui-new .pxr-code { margin: var(--px-space-4) 0 0; padding: 12px 14px; background: var(--px-ink); color: #E6EDF3; border-radius: var(--px-radius-button); font-family: var(--px-font-mono); font-size: .8125rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
body.ui-new .pxr-details { margin: 0 0 var(--px-space-4); }
body.ui-new .pxr-details > summary { cursor: pointer; color: var(--px-accent); font-weight: 600; min-height: 24px; margin-bottom: var(--px-space-2); }
body.ui-new .pxr-swatches { list-style: none; margin: 0 0 var(--px-space-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--px-space-3); font-size: var(--px-text-label); color: var(--px-ink-2); }
body.ui-new .pxr-swatches li { display: flex; flex-direction: column; gap: 2px; }
body.ui-new .pxr-swatches b { color: var(--px-ink); font-size: var(--px-text-table); }
body.ui-new .pxr-chip { height: 48px; border-radius: var(--px-radius-button); border: 1px solid rgba(0, 0, 0, .08); margin-bottom: 4px; }
body.ui-new .pxr-chip--ink { background: var(--px-ink); }
body.ui-new .pxr-chip--ink-2 { background: var(--px-ink-2); }
body.ui-new .pxr-chip--ink-3 { background: var(--px-ink-3); }
body.ui-new .pxr-chip--line-strong { background: var(--px-line-strong); }
body.ui-new .pxr-chip--line { background: var(--px-line); }
body.ui-new .pxr-chip--canvas { background: var(--px-canvas); }
body.ui-new .pxr-chip--subtle { background: var(--px-subtle); }
body.ui-new .pxr-chip--surface { background: var(--px-surface); }
body.ui-new .pxr-chip--accent { background: var(--px-accent); }
body.ui-new .pxr-chip--accent-700 { background: var(--px-accent-700); }
body.ui-new .pxr-chip--accent-100 { background: var(--px-accent-100); }
body.ui-new .pxr-chip--accent-50 { background: var(--px-accent-50); }
body.ui-new .pxr-status-swatches { list-style: none; margin: 0 0 var(--px-space-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--px-space-3); }
body.ui-new .pxr-status-swatches li { padding: 12px 14px; border-radius: var(--px-radius-button); font-size: var(--px-text-table); }
body.ui-new .pxr-status-swatches li b { display: block; }
body.ui-new .pxr-type { margin: 0; display: flex; flex-direction: column; gap: 12px; }
body.ui-new .pxr-type > div { display: flex; align-items: baseline; gap: var(--px-space-4); flex-wrap: wrap; }
body.ui-new .pxr-type dt { flex: 0 0 130px; font-family: var(--px-font-mono); font-weight: 400; font-size: .8125rem; color: var(--px-ink-3); }
body.ui-new .pxr-type dd { margin: 0; min-width: 0; }
body.ui-new .pxr-type--title { font-size: 1.875rem; line-height: 38px; font-weight: 700; }
body.ui-new .pxr-type--section { font-size: 1.375rem; line-height: 28px; font-weight: 700; }
body.ui-new .pxr-type--card { font-size: 1.0625rem; line-height: 24px; font-weight: 600; }
body.ui-new .pxr-type--table { font-size: .875rem; }
body.ui-new .pxr-type--label { font-size: .8125rem; font-weight: 600; color: var(--px-ink-2); }
body.ui-new .pxr-type--serif { font-family: var(--px-font-serif); font-size: 2rem; line-height: 1.25; font-weight: 600; }
body.ui-new .pxr-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--px-space-3); }
body.ui-new .pxr-wrap { white-space: normal; min-width: 220px; }
body.ui-new .pxr-value { min-height: 38px; display: flex; align-items: center; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
body.ui-new .pxr-section .table td { white-space: nowrap; }
body.ui-new .pxr-section .table td.pxr-wrap { white-space: normal; }

@media (max-width: 991.98px) {
    body.ui-new .pxr-layout { display: block; }
    body.ui-new .pxr-index { position: static; max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: var(--px-space-2) var(--px-space-4); border-bottom: 1px solid var(--px-line); background: var(--px-surface); }
    body.ui-new .pxr-index a { white-space: nowrap; }
    body.ui-new .pxr-main { padding: var(--px-space-4) var(--px-space-4) var(--px-space-12); }
    body.ui-new .pxr-section { padding: var(--px-space-4); }
}

/* ---------- The application shell for staff: header and sidebar (#527) ---------- */

/* _PxHeader.cshtml and _PxSidebar.cshtml, from _LayoutNew.cshtml (a client's page keeps the old header and sidebar).
   Desktop (992px and up): a sticky header 60px high, the sidebar 248px wide beside the page, scrolling on its own.
   Below 992px: the header scrolls with the page, its search on a second row, and the sidebar is a panel the Menu
   button opens under it (Bootstrap's offcanvas-lg; proteus-ui.js sets --px-sidebar-top). */
body.ui-new .px-shell { --px-topbar-height: 60px; --px-sidebar-width: 248px; min-height: 100vh; display: flex; flex-direction: column; }
body.ui-new .px-shell__body { flex: 1 1 auto; display: flex; align-items: flex-start; min-width: 0; }
body.ui-new .px-shell__content { flex: 1 1 auto; min-width: 0; padding: var(--px-space-6) var(--px-space-6) var(--px-space-8); }
body.ui-new .px-shell__content:focus { outline: none; }
body.ui-new .px-skip { position: absolute; left: 8px; top: -60px; z-index: 2000; padding: 8px 12px; background: var(--px-surface); color: var(--px-accent-700); border: 2px solid var(--px-accent); border-radius: var(--px-radius-button); font-weight: 600; }
body.ui-new .px-skip:focus { top: 8px; }

/* The header. position, margin and padding: the old stylesheets style every <header> (custom.css; fixed at phone width
   in responsive.css). Above the page's sticky parts; above a backdrop only while the sidebar is open (px-topbar--over). */
body.ui-new .px-topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: var(--px-space-3); height: var(--px-topbar-height); margin: 0; padding: 0 var(--px-space-4); background: var(--px-surface); border-top: 3px solid var(--px-accent); border-bottom: 1px solid var(--px-line); }
body.ui-new .px-topbar--over { z-index: 1041; }
body.ui-new a.px-topbar__brand, body.ui-new a.px-topbar__brand:hover { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; color: var(--px-ink); text-decoration: none; }
body.ui-new .px-topbar__brand img { height: 28px; width: auto; flex: none; }
body.ui-new .px-topbar__firm { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
body.ui-new .px-topbar__firm-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui-new .px-topbar__product { font-size: var(--px-text-label); color: var(--px-ink-3); white-space: nowrap; }
body.ui-new .px-topbar__search { flex: 1 1 280px; max-width: 440px; }
body.ui-new .px-topbar__search input::-webkit-search-cancel-button { cursor: pointer; }
body.ui-new .px-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--px-space-2); flex: none; }
body.ui-new .px-topbar__menu { display: none; color: var(--px-ink-2); }
/* Plain icon buttons: no border until hovered; the text colour set here, not the accent the base rule gives every link. */
body.ui-new .px-topbar__icon { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--px-subtle); --bs-btn-hover-border-color: var(--px-line); --bs-btn-active-bg: var(--px-muted); --bs-btn-active-border-color: var(--px-line); --bs-btn-padding-x: 8px; min-width: var(--px-control-height); gap: 4px; color: var(--px-ink-2); }
body.ui-new .px-topbar__icon:hover, body.ui-new .px-topbar__icon:focus-visible, body.ui-new .px-topbar__icon.show { color: var(--px-ink); }
body.ui-new .px-topbar .px-count--accent { background: var(--px-accent); color: #fff; }
body.ui-new .px-topbar .px-count--danger { background: var(--px-danger); color: #fff; }
body.ui-new .px-topbar .px-count--success { background: var(--px-success); color: #fff; padding: 0; }
body.ui-new .px-count[hidden] { display: none; }
body.ui-new .px-topbar__photo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
body.ui-new .px-topbar__user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
body.ui-new .px-topbar__panel { min-width: 240px; padding: 6px 0; }
body.ui-new .px-topbar__panel .dropdown-item { min-height: 36px; padding: 6px 16px; white-space: normal; color: var(--px-ink); }
body.ui-new .px-topbar__item { display: flex; flex-direction: column; }
body.ui-new .px-topbar__hint { font-size: var(--px-text-label); color: var(--px-ink-3); }
body.ui-new .px-topbar__themes { border: 0; margin: 0; padding: 6px 16px 8px; min-width: 0; }
body.ui-new .px-topbar__themes legend { float: none; width: auto; margin: 0 0 2px; padding: 0; font-size: var(--px-text-label); font-weight: 600; color: var(--px-ink-2); }
body.ui-new .px-topbar__theme { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; cursor: pointer; color: var(--px-ink); }
body.ui-new .px-topbar__theme input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--px-accent); }
body.ui-new .px-topbar__swatch { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .2); }
body.ui-new .px-topbar__swatch--pgth-Default { background: #0E5A8A; }
body.ui-new .px-topbar__swatch--pgth-Blue { background: #26407A; }
body.ui-new .px-topbar__swatch--pgth-GreenBlue { background: #0B6B72; }
body.ui-new .px-topbar__swatch--pgth-Green { background: #2F6B3A; }
body.ui-new .px-topbar__swatch--pgth-PurpleBlue { background: #4338CA; }

/* The sidebar. Bootstrap paints an offcanvas-lg's background transparent (!important) at 992px and up, so the
   surface is a background image there. */
body.ui-new .px-sidebar { --bs-offcanvas-width: min(320px, 86vw); --bs-offcanvas-border-color: var(--px-line); --bs-offcanvas-bg: var(--px-surface); }
body.ui-new .px-sidebar__head { padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--px-line); }
body.ui-new .px-sidebar__title { margin: 0; font-size: 1.0625rem; line-height: 24px; font-weight: 700; }
body.ui-new .px-sidebar .offcanvas-body.px-sidebar__body { display: block; flex-grow: 1; padding: var(--px-space-3) var(--px-space-3) var(--px-space-6); overflow-y: auto; }
body.ui-new .px-nav__list, body.ui-new .px-nav__pages { list-style: none; margin: 0; padding: 0; }
body.ui-new .px-nav__list > li + li { margin-top: 2px; }
body.ui-new .px-nav__group { margin-top: 2px; }
body.ui-new a.px-nav__link, body.ui-new .px-nav__toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--px-radius-button); background: none; color: var(--px-ink-2); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
body.ui-new a.px-nav__link:hover, body.ui-new .px-nav__toggle:hover { background: var(--px-subtle); color: var(--px-ink); }
body.ui-new .px-nav__toggle { font-weight: 600; color: var(--px-ink); }
body.ui-new .px-nav__toggle > span:first-of-type { flex: 1 1 auto; min-width: 0; }
body.ui-new .px-nav__chevron { display: inline-flex; color: var(--px-ink-3); transition: transform .15s ease; }
body.ui-new .px-nav__toggle[aria-expanded="true"] .px-nav__chevron { transform: rotate(180deg); }
body.ui-new .px-nav__pages { margin: 2px 0 6px; }
body.ui-new a.px-nav__link--page { min-height: 32px; padding-left: 38px; }
body.ui-new a.px-nav__link[aria-current="page"] { background: var(--px-accent-50); color: var(--px-accent-700); font-weight: 700; box-shadow: inset 3px 0 0 var(--px-accent); }
body.ui-new .px-nav svg { flex: none; }

@media (min-width: 992px) {
    body.ui-new .px-sidebar { position: sticky; top: var(--px-topbar-height); flex: 0 0 var(--px-sidebar-width); width: var(--px-sidebar-width); height: calc(100vh - var(--px-topbar-height)); overflow-y: auto; background-image: linear-gradient(var(--px-surface), var(--px-surface)); border-right: 1px solid var(--px-line); }
    body.ui-new .px-topbar__brand { width: calc(var(--px-sidebar-width) - var(--px-space-4) - var(--px-space-3)); }
}

@media (max-width: 991.98px) {
    body.ui-new .px-topbar { position: relative; flex-wrap: wrap; height: auto; min-height: var(--px-topbar-height); padding-top: 8px; padding-bottom: 8px; row-gap: var(--px-space-2); }
    body.ui-new .px-topbar__menu { display: inline-flex; }
    body.ui-new .px-topbar__search { order: 10; flex: 1 1 100%; max-width: none; }
    body.ui-new .px-sidebar.offcanvas-lg { top: var(--px-sidebar-top, 0px); }
    body.ui-new .px-shell__content { padding: var(--px-space-4) var(--px-space-4) var(--px-space-6); }
}

@media (max-width: 767.98px) {
    body.ui-new .px-topbar { gap: var(--px-space-2); padding-left: var(--px-space-3); padding-right: var(--px-space-3); }
    body.ui-new .px-topbar__firm { display: none; }
    body.ui-new .px-topbar__actions { gap: 4px; }
    body.ui-new .px-topbar__brand img { height: 24px; }
    body.ui-new .px-topbar__icon { --bs-btn-padding-x: 6px; gap: 2px; }
    body.ui-new .px-topbar__new { --bs-btn-padding-x: 10px; }
    /* The name is still the button's name for a screen reader. */
    body.ui-new .px-topbar__user-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
/* ---------- Record time (#537): the work item form in the side panel (GeneralWorkItem/AddWorkItem.New.cshtml) ----------
   On the blank layout's card, whose header and footer stay in view while the fields scroll (#368). */
body.ui-new .px-record-time .card-body { display: flex; flex-direction: column; gap: 18px; }
body.ui-new .px-record-time .card-body > * { margin: 0; }
body.ui-new .px-record-time__subtitle { display: block; margin-top: 2px; font-size: var(--px-text-table); color: var(--px-ink-3); }
body.ui-new .px-record-time__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -2px -6px 0 auto; padding: 0; color: var(--px-ink-2); }
body.ui-new .px-record-time .card-footer .px-spacer { flex: 1 1 auto; }
body.ui-new .px-record-time__saved { display: flex; align-items: center; gap: var(--px-space-2); padding: 10px 12px; border-radius: var(--px-radius-card); background: var(--px-success-bg); color: var(--px-success); font-weight: 600; }
body.ui-new .px-record-time__value { display: flex; flex-direction: column; gap: 4px; }
body.ui-new .px-record-time__figure { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
body.ui-new .px-record-time__timer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--px-space-2); }
body.ui-new .px-record-time__timer output { min-width: 3.5em; font-size: 1.0625rem; }
body.ui-new .px-record-time__timer .btn, body.ui-new .px-record-time .btn-sm { min-height: 30px; }
body.ui-new .px-record-time__attachment { display: flex; align-items: center; flex-wrap: wrap; gap: var(--px-space-3); }
body.ui-new .px-record-time .px-field > .px-segmented { align-self: flex-start; }
body.ui-new .px-record-time .px-segmented input:disabled + label { cursor: default; }
body.ui-new .px-record-time .px-segmented input:disabled:not(:checked) + label { color: var(--px-ink-3); }
body.ui-new .px-record-time .table { margin: 0; }
body.ui-new .px-record-time .form-check label { min-height: 24px; display: inline-flex; align-items: center; }
body.ui-new .px-record-time__more { border-top: 1px solid var(--px-line); padding-top: var(--px-space-3); }
body.ui-new .px-record-time__more > summary { cursor: pointer; min-height: 24px; color: var(--px-accent); font-weight: 600; }
body.ui-new .px-record-time__more-body { display: flex; flex-direction: column; gap: 18px; margin-top: var(--px-space-4); }
body.ui-new .px-record-time__tabs { display: flex; flex-wrap: wrap; gap: var(--px-space-2) var(--px-space-4); }
/* The attachment: drop a file on the area, or click it to browse (the real file input covers it). */
body.ui-new .px-dropzone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: var(--px-space-3); border: 1px dashed var(--px-line-strong); border-radius: var(--px-radius-input); background: var(--px-subtle); color: var(--px-ink-2); text-align: center; }
body.ui-new .px-dropzone[hidden] { display: none; }
body.ui-new .px-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
body.ui-new .px-dropzone:focus-within { border-color: var(--px-accent); box-shadow: 0 0 0 3px rgba(var(--px-accent-rgb), .25); }
body.ui-new .px-dropzone--over { border-color: var(--px-accent); background: var(--px-accent-50); }
body.ui-new .px-dropzone__browse { color: var(--px-accent); text-decoration: underline; }
body.ui-new .px-record-time__closing { padding: 20px 24px; }

/* ---------- The matter workspace (#536, D113): the matter header and the history ---------- */

/* Menu/_MatterViewMenu.New.cshtml on every page of a matter: stays in view under the app's header from 768px (the
   app's header is sticky from 992px); at phone width it scrolls with the page, so it doesn't fill the screen. */
body.ui-new .px-matter-header { position: sticky; top: 0; z-index: 20; margin: calc(-1 * var(--px-space-6)) calc(-1 * var(--px-space-6)) var(--px-space-4); padding: var(--px-space-4) var(--px-space-6) 0; background: var(--px-canvas); border-bottom: 1px solid var(--px-line); }
body.ui-new .px-matter-header .px-page-header { margin-bottom: 2px; }
body.ui-new .px-matter-header .px-page-title { font-size: 1.5rem; line-height: 32px; }
body.ui-new .px-matter-for { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 var(--px-space-3); color: var(--px-ink-2); font-size: var(--px-text-table); }
body.ui-new .px-matter-for > span + span::before { content: "·"; margin: 0 8px; color: var(--px-ink-3); }
body.ui-new .px-matter-for a { color: var(--px-accent-700); font-weight: 600; }
body.ui-new .px-matter-ref { font-family: var(--px-font-mono); }
body.ui-new .px-matter-new { min-width: 240px; }
body.ui-new .px-matter-new .dropdown-item { min-height: 32px; white-space: normal; }
body.ui-new .px-facts { display: flex; flex-wrap: wrap; gap: var(--px-space-3) var(--px-space-6); margin: 0 0 var(--px-space-3); }
body.ui-new .px-fact { min-width: 120px; }
body.ui-new .px-fact dt { font-size: var(--px-text-label); font-weight: 600; color: var(--px-ink-3); }
body.ui-new .px-fact dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-variant-numeric: tabular-nums; }
body.ui-new .px-fact dd a { color: var(--px-accent-700); }
body.ui-new .px-fact__value { font-weight: 600; }
body.ui-new .px-fact__sub { font-size: var(--px-text-label); color: var(--px-ink-2); }
body.ui-new .px-fact__warning { font-size: var(--px-text-label); font-weight: 600; color: var(--px-warning); background: var(--px-warning-bg); padding: 0 6px; border-radius: var(--px-radius-input); }
body.ui-new .px-fact--costs dd { max-width: 260px; }
body.ui-new .px-meter { -webkit-appearance: none; appearance: none; display: block; flex: 1 0 100%; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--px-muted); color: var(--px-accent); overflow: hidden; }
body.ui-new .px-meter::-webkit-progress-bar { background: var(--px-muted); border-radius: 3px; }
body.ui-new .px-meter::-webkit-progress-value { background: var(--px-accent); border-radius: 3px; }
body.ui-new .px-meter::-moz-progress-bar { background: var(--px-accent); border-radius: 3px; }
body.ui-new .px-meter--warning::-webkit-progress-value { background: var(--px-warning); }
body.ui-new .px-meter--warning::-moz-progress-bar { background: var(--px-warning); }
body.ui-new .px-matter-lock { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 var(--px-space-3); padding: 8px 12px; border-radius: var(--px-radius-button); background: var(--px-info-bg); color: var(--px-info); font-size: var(--px-text-table); }
body.ui-new .px-matter-lock svg { flex: none; margin-top: 2px; }
body.ui-new .px-matter-tabs { margin: 0; border-bottom: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
body.ui-new .px-matter-tabs a { position: relative; white-space: nowrap; } /* keeps a count's hidden words inside the scrolling bar (#357) */
body.ui-new .px-matter-tabs__off { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 0; background: none; color: var(--px-ink-3); font: inherit; white-space: nowrap; cursor: not-allowed; }
body.ui-new .px-matter-sub { display: flex; width: max-content; max-width: 100%; margin: var(--px-space-2) 0 var(--px-space-3); }
body.ui-new .px-matter-sub a.px-matter-sub__alert { color: var(--px-danger); font-weight: 600; } /* Risk while the file has points (#357) */

@media (min-width: 992px) {
    body.ui-new .px-matter-header { top: var(--px-topbar-height, 60px); }
}
@media (max-width: 991.98px) {
    body.ui-new .px-matter-header { margin: calc(-1 * var(--px-space-4)) calc(-1 * var(--px-space-4)) var(--px-space-4); padding: var(--px-space-3) var(--px-space-4) 0; }
}
@media (max-width: 767.98px) {
    body.ui-new .px-matter-header { position: static; }
    body.ui-new .px-matter-header .px-page-title { font-size: 1.25rem; line-height: 28px; }
    body.ui-new .px-facts { gap: var(--px-space-2) var(--px-space-4); }
    body.ui-new .px-fact { min-width: calc(50% - var(--px-space-4)); }
}

/* The history (Matter/MatterHistory.New.cshtml): the list, and the preview on its right from 1200px; below that the
   preview covers the list, with a Back button. */
body.ui-new .px-history { display: flex; gap: var(--px-space-4); align-items: flex-start; }
body.ui-new .px-history__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--px-space-4); }
body.ui-new .px-history__departments { width: max-content; max-width: 100%; }
body.ui-new .px-history__ticks { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
body.ui-new .px-history__ticks .form-check { margin: 0; min-height: 24px; }
body.ui-new .px-history__kinds { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
body.ui-new .px-history__kinds .px-chip { position: relative; }
body.ui-new .px-history__kinds input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.ui-new .px-history__kinds .px-chip:has(input:focus-visible) { outline: 2px solid var(--px-accent); outline-offset: 2px; }
body.ui-new .px-history__kinds .px-count { height: 18px; min-width: 18px; }
body.ui-new .px-history__group > th { color: var(--px-ink-2); font-size: var(--px-text-label); font-weight: 700; padding-top: 14px; padding-bottom: 6px; background: var(--px-surface); border-bottom: 1px solid var(--px-line); }
body.ui-new .px-history__table tr[data-px-row] { cursor: pointer; }
body.ui-new .px-history__table tr[data-px-row]:hover > * { --bs-table-bg-state: var(--px-subtle); }
body.ui-new .px-history__table tr.px-history__row--open > * { --bs-table-bg-state: var(--px-accent-50); }
body.ui-new .px-history__table tr.px-history__row--open > :first-child { box-shadow: inset 3px 0 0 var(--px-accent); }
body.ui-new .px-history__open { display: inline-block; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-align: left; min-height: 24px; color: var(--px-ink); }
/* A title with no spaces (a file name) wraps rather than pushing the row's ⋯ out of view (#862). */
body.ui-new .px-history__table .px-history__open, body.ui-new .px-history__table .px-row-sub { overflow-wrap: anywhere; }
body.ui-new .px-history__open:hover { color: var(--px-accent-700); text-decoration: underline; }
body.ui-new .px-history__table .px-badge { margin-top: 2px; }
body.ui-new .px-history__table .px-num { text-align: right; white-space: nowrap; }
body.ui-new .px-history__empty { padding: var(--px-space-4); }
body.ui-new .px-history__lead { display: flex; flex-direction: column; gap: var(--px-space-3); }
body.ui-new .px-history__lead-title { margin: var(--px-space-2) 0 0; font-size: 1.125rem; line-height: 26px; font-weight: 700; }
body.ui-new .px-history__lead-links { margin: 0; }
body.ui-new .px-history__lead-links a { color: var(--px-accent-700); }

/* Under the app's header and the matter header (proteus-matter.js keeps --px-matter-header-height to the header's height). */
body.ui-new .px-preview { flex: 0 0 440px; min-width: 0; position: sticky; top: calc(var(--px-topbar-height, 60px) + var(--px-matter-header-height, 0px) + 8px); display: flex; flex-direction: column; gap: var(--px-space-3); max-height: calc(100vh - var(--px-topbar-height, 60px) - var(--px-matter-header-height, 0px) - 24px); overflow: auto; padding: var(--px-space-4); background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-card); box-shadow: var(--px-shadow-1); }
body.ui-new .px-preview[hidden] { display: none; }
body.ui-new .px-preview:focus { outline: none; }
body.ui-new .px-preview:focus-visible { outline: 2px solid var(--px-accent); outline-offset: 2px; }
body.ui-new .px-preview__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
body.ui-new .px-preview__bar > .btn:first-child { visibility: hidden; }
body.ui-new .px-preview__type { margin: 0; font-size: var(--px-text-label); font-weight: 600; color: var(--px-ink-3); }
body.ui-new .px-preview__title { margin: 0; font-size: 1.25rem; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; }
body.ui-new .px-preview__facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: var(--px-text-table); }
body.ui-new .px-preview__facts > div { display: contents; }
body.ui-new .px-preview__facts dt { font-weight: 600; color: var(--px-ink-2); }
body.ui-new .px-preview__facts dd { margin: 0; overflow-wrap: anywhere; }
body.ui-new .px-preview__actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.ui-new .px-preview__frame { width: 100%; min-height: 420px; flex: 1 0 420px; border: 1px solid var(--px-line); border-radius: var(--px-radius-button); background: var(--px-surface); }
body.ui-new .px-preview__frame--loading { visibility: hidden; }
body.ui-new .px-auth-error { margin: var(--px-space-3) 0 0; color: var(--px-danger); font-weight: 600; }

@media (max-width: 1199.98px) {
    body.ui-new .px-history--previewing .px-history__main { display: none; }
    body.ui-new .px-preview { flex: 1 1 100%; position: static; max-height: none; }
    body.ui-new .px-preview__bar > .btn:first-child { visibility: visible; }
    body.ui-new .px-preview__frame { min-height: 70vh; }
}

/* At phone width the history's By and Time are left to the preview, so a row's value, status and ⋯ stay in view. */
@media (max-width: 575.98px) {
    body.ui-new .px-history__narrow { display: none; }
}

/* An item's own page in the preview's frame: only the page itself, not the app's header, sidebar, footer, the matter
   header or the page's own title around it (proteus-matter.js adds the class when it loads). */
body.ui-new.px-in-preview .px-topbar, body.ui-new.px-in-preview .px-sidebar, body.ui-new.px-in-preview .loginFtr,
body.ui-new.px-in-preview .px-matter-header, body.ui-new.px-in-preview .px-skip, body.ui-new.px-in-preview .page-heading { display: none !important; }
body.ui-new.px-in-preview .px-shell__content { padding: var(--px-space-3); }

/* ---------- The matters list (#538): Matter/ManageMatter.New.cshtml, in the list pattern ---------- */

body.ui-new .px-matters .px-table-scroll { --px-table-max-height: 65vh; }
body.ui-new .px-matters__tabs { display: flex; width: max-content; max-width: 100%; }
body.ui-new .px-matters__table .px-matters__ref { white-space: nowrap; }
body.ui-new .px-matters__table .px-matters__ref a.px-ref { display: inline-flex; align-items: center; min-height: 24px; color: var(--px-accent-700); font-weight: 600; }
body.ui-new .px-matters__table .px-matters__wrap { min-width: 160px; max-width: 360px; overflow-wrap: anywhere; }
/* A flag in words beside the reference, its colour only an extra cue. */
body.ui-new .px-matters__flag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; border-radius: var(--px-radius-input); font-size: var(--px-text-label); font-weight: 600; }
body.ui-new .px-matters__flag--flagged { color: var(--px-info); background: var(--px-info-bg); }
body.ui-new .px-matters__flag--mandatory { color: var(--px-danger); background: var(--px-danger-bg); }
body.ui-new .px-matters__flag--optional { color: var(--px-success); background: var(--px-success-bg); }
body.ui-new .px-matters__xero { margin-left: 6px; padding: 0 6px; border-radius: var(--px-radius-input); background: var(--px-subtle); color: var(--px-ink-2); font-size: var(--px-text-label); }

/* ---------- The contacts lists (#539): Contact/ManageContact.New.cshtml, in the list pattern ---------- */

body.ui-new .px-contacts .px-table-scroll { --px-table-max-height: 65vh; }
body.ui-new .px-contacts__table .px-contacts__name { min-width: 200px; max-width: 360px; overflow-wrap: anywhere; }
body.ui-new .px-contacts__table .px-contacts__number { white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ui-new .px-contacts__table .px-contacts__wrap { min-width: 140px; max-width: 280px; overflow-wrap: anywhere; }
body.ui-new .px-contacts__matters { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 24px; min-height: 24px; color: var(--px-accent-700); font-weight: 600; }
body.ui-new .px-contacts__talent { margin: 0; }

/* ---------- Today: the staff home page (#540, Views/Home/Index.New.cshtml) ---------- */

/* The list beside the side cards; below 992px the cards go under it. */
body.ui-new .px-today { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--px-space-6); align-items: start; }
body.ui-new .px-today__side { display: flex; flex-direction: column; gap: var(--px-space-4); min-width: 0; }
body.ui-new .px-today__heading { margin: 0 0 var(--px-space-3); font-size: 1.125rem; line-height: 26px; font-weight: 700; }
body.ui-new .px-today__group + .px-today__group, body.ui-new .px-today__group + .px-empty { margin-top: var(--px-space-6); }
body.ui-new .px-today__main > .px-today__heading + .px-empty { margin-top: 0; }
body.ui-new .px-today__group-title { display: flex; align-items: center; gap: var(--px-space-2); margin: 0 0 var(--px-space-2); font-size: var(--px-text); font-weight: 700; color: var(--px-ink-2); }
body.ui-new .px-today__list { margin: 0; padding: 0; list-style: none; }
body.ui-new .px-today-item { display: flex; align-items: flex-start; gap: var(--px-space-3); padding: var(--px-space-3) 0; border-top: 1px solid var(--px-line-soft); }
body.ui-new .px-today-item:first-child { border-top: 0; }
body.ui-new .px-today-item .px-badge { flex: none; min-width: 108px; margin-top: 1px; }
body.ui-new .px-today-item__body { flex: 1 1 auto; min-width: 0; }
body.ui-new .px-today-item__title { font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ui-new .px-today-item__meta { display: flex; flex-wrap: wrap; gap: 2px var(--px-space-3); margin-top: 2px; font-size: var(--px-text-table); color: var(--px-ink-3); }
body.ui-new .px-today__list--compact > li { padding: 6px 0; border-top: 1px solid var(--px-line-soft); }
body.ui-new .px-today__list--compact > li:first-child { border-top: 0; padding-top: 0; }
body.ui-new .px-today-recent > a { font-weight: 600; }
body.ui-new .px-today-card { padding: var(--px-space-4); }
body.ui-new .px-today-card__figure { margin: 0 0 var(--px-space-3); font-size: 1.5rem; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
body.ui-new .px-today-card__subheading { margin: 0 0 4px; font-size: var(--px-text); font-weight: 700; }
body.ui-new .px-today-card__text { margin: 0; color: var(--px-ink-2); overflow-wrap: anywhere; }
body.ui-new .px-today-card__message { margin-bottom: var(--px-space-3); }
body.ui-new .px-today-card__link { padding: 0; min-height: 24px; text-align: left; }

@media (max-width: 991.98px) {
    body.ui-new .px-today { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
    body.ui-new .px-today-item { flex-direction: column; gap: 4px; }
    body.ui-new .px-today-item .px-badge { min-width: 0; }
}

/* ---------- The contact form (#542): Contact/AddContact.New.cshtml ---------- */
/* Phone numbers, emails, addresses and documents are rows of fields that wrap, and stack at phone width. */
body.ui-new .px-contact-subhead { margin: var(--px-space-2) 0 0; font-size: 1rem; font-weight: 700; }
body.ui-new .px-contact-need { margin: 0; font-weight: 600; color: var(--px-ink-2); }
body.ui-new .px-contact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--px-space-3) var(--px-space-4); align-items: start; padding: var(--px-space-4); border: 1px solid var(--px-line); border-radius: var(--px-radius-card); background: var(--px-subtle); }
body.ui-new .px-contact-row--address, body.ui-new .px-contact-row--document { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
body.ui-new .px-contact-row__end { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--px-space-3); grid-column: 1 / -1; }
body.ui-new .px-contact-row__end .px-field { margin: 0; }
body.ui-new .px-contact-row__badge, body.ui-new .px-contact-row__view { grid-column: 1 / -1; margin: 0; }
body.ui-new .px-contact-choices { display: flex; flex-wrap: wrap; gap: var(--px-space-2) var(--px-space-6); }
body.ui-new .px-contact-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--px-space-2) var(--px-space-4); }
body.ui-new .px-contact-disabilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--px-space-3) var(--px-space-4); align-items: start; }
body.ui-new .px-contact-disabilities__buttons { display: flex; flex-wrap: wrap; gap: var(--px-space-2); grid-column: 1 / -1; }
/* The duplicate name: a warning by the name, not an alert; it never stops the save. */
body.ui-new .px-contact-duplicate { margin: 0; padding: 10px 14px; border-left: 4px solid var(--px-warning); border-radius: var(--px-radius-input); background: var(--px-warning-bg); color: var(--px-ink); }

@media (max-width: 575.98px) {
    body.ui-new .px-contact-row, body.ui-new .px-contact-row--address, body.ui-new .px-contact-row--document,
    body.ui-new .px-contact-disabilities, body.ui-new .px-contact-services { grid-template-columns: 1fr; }
}

/* ---------- The matter form (#541): Matter/MatterForm.New.cshtml, in the form pattern ---------- */
/* A person on the matter: a group named by its role, its fields wrapping, one under another at phone width. */
body.ui-new .px-matter-person { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--px-space-3) var(--px-space-4); align-items: start; margin: 0; padding: var(--px-space-4); border: 1px solid var(--px-line); border-radius: var(--px-radius-card); background: var(--px-subtle); }
body.ui-new .px-matter-person__role { grid-column: 1 / -1; float: none; width: auto; margin: 0; padding: 0; font-size: 1rem; font-weight: 700; line-height: 24px; }
body.ui-new .px-matter-person__end { display: flex; align-items: flex-end; justify-content: flex-end; grid-column: 1 / -1; }
body.ui-new .px-matter-person .px-readonly { min-height: 38px; }
/* The option cards: side by side where there's room, stacked at phone width. */
body.ui-new .px-matter-options { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 575.98px) {
    body.ui-new .px-matter-person, body.ui-new .px-matter-options { grid-template-columns: 1fr; }
}

/* ---------- The composer (#638): Send Mail, a new letter's Finish page and the letter editor ----------
   Email/SendMail.New.cshtml, LetterWorkItem/AddFinish.New.cshtml and EditLetterForm.New.cshtml, under the matter
   header: the recipients or the letter's details at the top, the body in its editor (the email's attachments beside it
   from 1200px, under it below), the charging fields in a section of their own, and the form pattern's sticky footer. */
body.ui-new .px-composer { display: flex; flex-direction: column; gap: var(--px-space-6); max-width: 1180px; margin-top: var(--px-space-4); }
body.ui-new .px-composer > * { margin: 0; }
body.ui-new .px-composer__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--px-space-2) var(--px-space-6); }
body.ui-new .px-composer__title { margin: 0; font-size: 1.25rem; line-height: 28px; font-weight: 700; }
body.ui-new .px-composer__purpose { margin: 0; color: var(--px-ink-3); }
body.ui-new .px-composer__facts { display: flex; flex-wrap: wrap; gap: var(--px-space-2) var(--px-space-6); margin: 0; }
body.ui-new .px-composer__facts > div { display: flex; gap: var(--px-space-2); min-width: 0; }
body.ui-new .px-composer__facts dt { font-weight: 600; color: var(--px-ink-3); }
body.ui-new .px-composer__facts dd { margin: 0; overflow-wrap: anywhere; }
body.ui-new .px-composer__section, body.ui-new .px-composer__aside, body.ui-new .px-composer__body { background: var(--px-surface); border: 1px solid var(--px-line); border-radius: var(--px-radius-card); box-shadow: var(--px-shadow-1); padding: var(--px-space-6); display: flex; flex-direction: column; gap: var(--px-space-4); min-width: 0; }
body.ui-new .px-composer__section-title { margin: 0; font-size: 1.0625rem; line-height: 24px; font-weight: 700; }
body.ui-new .px-composer__main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--px-space-6); align-items: start; }
body.ui-new .px-composer__aside .btn { display: inline-flex; align-items: center; gap: 6px; }
body.ui-new .px-composer__pick[hidden] { display: none; }
/* Send Mail's To, Cc and Bcc (#673): each a row of Type, Select (ticks, scrolling within) and the addresses chosen, side by
   side; stacked on a phone. A chosen address is a chip with its Remove button (24px), above the field it's posted in. */
body.ui-new .px-composer__row { margin: 0; padding: var(--px-space-4); border: 1px solid var(--px-line); border-radius: var(--px-radius-input); display: flex; flex-direction: column; gap: var(--px-space-2); min-width: 0; }
body.ui-new .px-composer__row-title { float: none; width: auto; margin: 0; padding: 0; font-size: var(--px-text); font-weight: 700; line-height: 24px; }
body.ui-new .px-composer__row-hint { margin: 0; }
body.ui-new .px-composer__row-cols { display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--px-space-3) var(--px-space-4); align-items: start; }
body.ui-new .px-composer__options { max-height: 216px; overflow-y: auto; overscroll-behavior: contain; padding: var(--px-space-2) var(--px-space-3); border: 1px solid var(--px-line-strong); border-radius: var(--px-radius-input); background: var(--px-surface); display: flex; flex-direction: column; gap: 2px; }
body.ui-new .px-composer__options[hidden] { display: none; }
body.ui-new .px-composer__options > .px-hint { margin: 0; padding: 4px 0; }
body.ui-new .px-composer__option { display: flex; align-items: flex-start; gap: 8px; min-height: 28px; padding: 2px 0; margin: 0; }
body.ui-new .px-composer__option input { margin-top: 3px; }
body.ui-new .px-composer__option label { min-height: 24px; display: inline-flex; align-items: center; overflow-wrap: anywhere; cursor: pointer; }
body.ui-new .px-composer__chosen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
body.ui-new .px-composer__chosen[hidden] { display: none; }
body.ui-new .px-composer__chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 28px; padding: 0 2px 0 10px; border: 1px solid var(--px-line-strong); border-radius: 14px; background: var(--px-subtle); color: var(--px-ink); font-size: var(--px-text-table); }
body.ui-new .px-composer__chip > span { overflow-wrap: anywhere; }
body.ui-new .px-composer__chip-remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--px-ink-2); font-size: 18px; line-height: 1; cursor: pointer; }
body.ui-new .px-composer__chip-remove:hover { background: var(--px-line); color: var(--px-ink); }
body.ui-new .px-composer__chip-remove:focus-visible { outline: 2px solid var(--px-accent); outline-offset: 1px; }
body.ui-new .px-composer__choices { display: flex; flex-wrap: wrap; gap: var(--px-space-2) var(--px-space-6); }
body.ui-new .px-composer__choices .form-check label, body.ui-new .px-composer__switches .form-check label, body.ui-new .px-composer__section > .form-check label { min-height: 24px; display: inline-flex; align-items: center; }
body.ui-new .px-composer__switches { display: flex; flex-wrap: wrap; gap: var(--px-space-3) var(--px-space-8); }
/* The server's refusal, and a notice about the letter (on a bill; saving adds a new one). */
body.ui-new .px-composer__refusal { margin: 0 0 6px; color: var(--px-ink); overflow-wrap: anywhere; }
body.ui-new .px-composer__notice { margin: 0; padding: 10px 14px; border-left: 4px solid var(--px-info); border-radius: var(--px-radius-input); background: var(--px-info-bg); color: var(--px-ink); }
/* An unfilled field code, where it stands: in the subject's copy under its field (the editor draws its own, proteus-composer.js). */
body.ui-new .px-composer__marked { margin: -8px 0 0; font-size: var(--px-text-table); color: var(--px-ink-2); overflow-wrap: anywhere; }
body.ui-new .px-composer__marked[hidden] { display: none; }
body.ui-new mark.px-unfilled { padding: 0 2px; background: var(--px-warning-bg); color: var(--px-ink); outline: 2px solid var(--px-danger); outline-offset: 1px; border-radius: 2px; }
body.ui-new .px-composer .px-error-summary { margin: 0; }
/* Scrolled to (the summary, a field from its links): clear of the app's header and the matter header that stay in view. */
body.ui-new .px-composer .px-error-summary, body.ui-new .px-composer .px-field, body.ui-new .px-composer .mce-tinymce { scroll-margin-top: calc(var(--pxo-sticky-top, 60px) + 16px); scroll-margin-bottom: 96px; }
body.ui-new .px-composer .px-error-summary[hidden] { display: none; }
body.ui-new .px-composer__footer .btn { min-height: 36px; }

@media (max-width: 1199.98px) {
    body.ui-new .px-composer__main { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    body.ui-new .px-composer__section, body.ui-new .px-composer__aside, body.ui-new .px-composer__body { padding: var(--px-space-4); }
    body.ui-new .px-composer__row { padding: var(--px-space-3); }
    body.ui-new .px-composer__row-cols { grid-template-columns: minmax(0, 1fr); }
    body.ui-new .px-composer__footer { flex-wrap: wrap; }
    body.ui-new .px-composer__footer .px-form-footer__spacer { display: none; }
}

/* The bell's panel (#848): its entries spaced for reading, on the design system's steps: a gap under each heading and
   between cards (custom.css spaces the lines and drops the last one's margin; body.ui-new p gives the gap between lines). */
body.ui-new .noticeList li { margin-bottom: var(--px-space-4); }
body.ui-new .noticeList h4 { margin-bottom: var(--px-space-3); }

/* ---------- Accounts (#639): bills awaiting authorisation (AccountTransaction/ManageBillsAccountHistory.New.cshtml) and
   the matter's Money tab (AccountSummary.New, ManageOfficeAccountHistory.New, MoneyTransfer/ManageClientAccountHistory.New,
   Menu/_MoneyTabs.New, Menu/_MoneyActions.New). Figures right-aligned in tabular figures; the tables scroll in their box. ---------- */

body.ui-new .px-bills .px-table-scroll, body.ui-new .px-money .px-table-scroll { --px-table-max-height: 65vh; }
body.ui-new .px-bills__views { align-self: flex-start; }
body.ui-new .px-bills__filters, body.ui-new .px-money__filters { align-items: flex-end; gap: 8px 12px; }
body.ui-new .px-bills__filters .px-field, body.ui-new .px-money__filters .px-field { margin: 0; flex: 1 1 160px; max-width: 240px; }
body.ui-new .px-bills__mine { display: inline-flex; align-items: center; gap: 6px; min-height: var(--px-control-height); margin: 0; }
body.ui-new .px-bills__table .px-bills__date, body.ui-new .px-money__table .px-money__date { white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ui-new .px-bills__table .px-bills__wrap, body.ui-new .px-money__table .px-money__wrap { min-width: 140px; max-width: 320px; overflow-wrap: anywhere; }
body.ui-new th > button.px-sort { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
body.ui-new th > button.px-sort:focus-visible { outline: 2px solid var(--px-accent); outline-offset: 2px; border-radius: 2px; }
body.ui-new .px-bills__pager, body.ui-new .px-money__pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px; border-top: 1px solid var(--px-line-soft); background: var(--px-surface); font-size: var(--px-text-table); color: var(--px-ink-2); }
body.ui-new .px-bills__pager .pagination-container, body.ui-new .px-money__pager .pagination-container { margin-left: auto; }
body.ui-new .px-bills__pager .pagination, body.ui-new .px-money__pager .pagination { margin: 0; flex-wrap: wrap; }
body.ui-new .px-bills__pager .pagination a, body.ui-new .px-money__pager .pagination a { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }

body.ui-new .px-money { display: flex; flex-direction: column; gap: 14px; margin-top: var(--px-space-4); }
body.ui-new .px-money__tabs { align-self: flex-start; }
body.ui-new .px-money__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
body.ui-new .px-money__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: var(--px-ink-2); }
body.ui-new .px-money__summary strong { color: var(--px-ink); font-size: 1.0625rem; }
body.ui-new .px-money__note { flex-basis: 100%; font-size: var(--px-text-label); color: var(--px-ink-3); }
body.ui-new .px-money__actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
body.ui-new .px-money__actions .btn { min-height: 36px; }
body.ui-new .px-money__row--unauthorised > * { --bs-table-bg-state: var(--px-warning-bg); }
body.ui-new .px-money__emails details summary { min-height: 24px; display: inline-flex; align-items: center; color: var(--px-accent-700); cursor: pointer; white-space: nowrap; }
body.ui-new .px-money__emails dl { margin: 6px 0 0; font-size: var(--px-text-label); max-width: 320px; }
body.ui-new .px-money__emails dt { font-weight: 600; color: var(--px-ink-2); }
body.ui-new .px-money__emails dd { margin: 0 0 6px; overflow-wrap: anywhere; }
body.ui-new .px-money__table tfoot th, body.ui-new .px-money__table tfoot td { background: var(--px-subtle); font-weight: 600; }
body.ui-new .px-money__table .px-actions-cell { width: auto; white-space: nowrap; }
body.ui-new .px-money__row-button { min-height: 32px; margin-left: 4px; }
body.ui-new .px-money__download { display: none; }
@media (max-width: 575.98px) {
    body.ui-new .px-money__top { align-items: flex-start; }
    body.ui-new .px-bills__filters .px-field, body.ui-new .px-money__filters .px-field { max-width: none; flex-basis: 100%; }
}