:root {
    accent-color: var(--brand-primary); /* native checkboxes, radios and ranges follow the brand (dark mode via the same token) */
    /* Brand */
    --brand-primary: #2B27A8; /* App header, primary buttons */
    --brand-on-primary: #ffffff;
    --brand-color-muted: color-mix(in srgb, var(--brand-primary) 60%, transparent);
    --accent: #2A7DE1; /* secondary CTA */
    /* Surface & text */
    --bg: #F4F6F8; /* neutral app background */
    --surface: #ffffff; /* cards, tables */
    --surface-subtle: color-mix(in srgb, var(--ink) 2%,var(--surface)); /* Use for subcards/sections*/
    --surface-overlay: #fff;
    --surface-danger: color-mix( in srgb, var(--danger) 10%, var(--surface) );
    --surface-success: color-mix( in srgb, var(--success) 10%, var(--surface) );
    --surface-warning: color-mix( in srgb, var(--warning) 10%, var(--surface) );
    --ink: #0F172A;
    --muted: #5B6B7C;
    --border: #E6EAF0;
    --border-danger-subtle: color-mix( in srgb, var(--danger) 35%, var(--border) );
    /* Buttons */
    --button-secondary: #27272a;
    /* Menus */
    --menu-hover-bg: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
    --menu-hover-text: var(--brand-ink);
    --menu-chevron-color: #677483;
    --menu-chevron-color-hover: #b9b9b9;
    /* Chevrons */
    --chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='M128 176 48 96h160Z'/%3E%3C/svg%3E");
    --chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='currentColor' d='m96 48 80 80-80 80Z'/%3E%3C/svg%3E");
    /* Tooltips the rest is in controls.css under #app-tooltip */
    --tooltip-color: #fff;
    /* Icons - they use brand-primary as their color */
    --icon-accent: #2A7DE1;
    --icon-accent-stroke-width: 6.5;
    --icon-muted: var(--muted);
    --icon-warning: var(--warning);
    --icon-success: var(--success);
    --icon-danger: var(--danger);
    /* === Action bar & control tokens === */
    /* Icon buttons (secondary icon buttons across the app) */
    --icon-btn-bg: #eef2ff; /* subtle tint behind icon */
    --icon-btn-border: #c7d2fe; /* subtle border */
    --icon-btn-color: var(--brand-ink); /* icon color */
    --icon-btn-hover-color: var(--icon-accent); /* hover icon color */
    --icon-btn-bg-hover: color-mix(in srgb, var(--icon-accent) 12%, var(--surface));
    /* Neutral pill surfaces (filter, selected) */
    --pill-bg: var(--surface-subtle); /* neutral pill background */
    --pill-border: var(--border);
    --pill-text: var(--muted);
    --pill-text-active: var(--ink);
    --pill-hover-bg: color-mix(in srgb, var(--pill-bg) 80%, var(--hover-chip));
    /* Segmented toggle (thumb + labels) */
    --seg-thumb-base: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
    --seg-thumb-active: color-mix(in srgb, var(--brand-primary) 18%, var(--surface));
    --seg-label-inactive: var(--muted);
    --seg-label-active: var(--ink);
    /* Primary CTA states (Pay) */
    --cta-idle-bg: #3b82f6; /* muted blue when idle */
    --cta-idle-text: #e6f0ff;
    --cta-active-bg: var(--brand-primary); /* app brand when actionable */
    --cta-active-text: var(--brand-on-primary);
    --cta-hover-active: color-mix(in srgb, var(--brand-primary) 12%, var(--tint-toward));
    /* Action bar layout knobs */
    --actionbar-filter-gap: 8px; /* gap between toggle and filter pill */
    --actionbar-icon-btn-w: 36px; /* icon button width */
    --actionbar-search-min: 150px; /* min search width */
    --actionbar-search-max: 420px; /* max search width */
    /* Micro alignment */
    --pill-icon-nudge: -1px; /* nudge icons inside pills (tweak visually) */
    /* States */
    --success: #18b451;
    --positive: #3ddb77;
    --warning: #e67e22;
    --danger: #c0392b;
    /* Focus */
    --focus-ring: color-mix( in srgb, var(--brand-primary) 22%, var(--surface) );
    /* Text-field focus (2026-10-16): a crisp underline, not a glow. A dark theme re-colours these four. */
    --focus-underline-color: var(--brand-ink); /* the line itself: 3:1 or better against the field and its surround */
    --focus-underline-width: 2px; /* total thickness at the bottom edge, border included */
    --focus-underline-error: var(--danger); /* line and border while the field is in error */
    --focus-underline-valid: color-mix(in srgb, var(--success) 60%, black); /* --success alone is 2.7:1; this is 6.5:1 */
    --focus-border-color: color-mix(in srgb, var(--ink) 25%, var(--border)); /* the other three sides: slightly darker than rest */
    /* Shape & motion */
    --radius: 12px;
    --shadow-0: 0 1px 1px rgba(16, 24, 40, 0.04);
    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 4px rgba(16, 24, 40, 0.06);
    --shadow-2: 0 8px 20px rgba(15,23,42,.08);
    --shadow-3: 0 1px 4px rgba(16, 24, 40, 0.25), 0 2px 4px rgba(16, 24, 40, 0.25);
    /* UI font (Inter loaded in master page) */
    --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Color Encoded Bar Chart */
    --cebc-green: var(--success);
    --cebc-yellow: #f2c94c;
    --cebc-orange: var(--warning);
    --cebc-red: var(--danger);
    /* No current value. Was never actually defined — the renderer has been running
   on the inline fallback var(--cebc-na-bg, #cbd5e1) this whole time, so the
   token existed only in the JS. */
    --cebc-na-bg: #cbd5e1;
    /* Real value, no comparison to measure it against.
   Muted brand primary: deliberately NOT gray, because the bar is real data and
   stands at its true height, and deliberately nowhere near the red-green scale,
   because colour on this chart encodes a comparison that does not exist here.
   It should read as "we are choosing not to colour this", not as an error. */
    --cebc-compna-bg: color-mix(in srgb, var(--brand-primary) 28%, var(--surface));
    --cebc-zero-bg: color-mix(in srgb, var(--muted) 45%, transparent);
    /* header + footer total used by some pages (kept here for consistency) */
    --shell-gutter: 16px;
    --header-footer-total: 149px; /*150.67px;*/
    --appbar-height: 86px;
    --page-vertical-gap: 24px;
    --hover-chip: #EEF2FF;
    /* === Theme anchors (dark mode, 2026-10-16). Every value here equals the literal it replaced, so light mode is unchanged.
       The dark block (html[data-theme="dark"], below) re-defines them; nothing else in the CSS needs to know which theme is on. === */
    --brand-ink: var(--brand-primary); /* brand as TEXT or ICON colour on a surface (links, icon buttons, active tab text). --brand-primary stays the FILL behind white text */
    --appbar-bg: var(--brand-primary); /* the top app bar */
    --on-solid: #ffffff; /* text on a solid status fill (danger button, toast) */
    --danger-solid: var(--danger); /* danger as a FILL behind --on-solid text; --danger itself is the TEXT colour */
    --danger-halo: rgba(217, 83, 79, 0.2); /* ring round an invalid field */
    --tint-toward: #ffffff; /* what a brand tint is mixed toward: white in light, the surface in dark */
    --icon-outline: grey; /* hairline round a small help glyph */
    --lift-toward: #ffffff; /* what a brand outline or accent is lightened toward: white in both themes */
    --shade-toward: #000000; /* what a focus outline is darkened toward: black in light, white in dark */
    --shadow-rgb: 15, 23, 42; /* channels of the shadow ink (slate-900) */
    --shadow-rgb-neutral: 16, 24, 40; /* channels of the neutral shadow ink */
    --scrim-modal: rgba(0, 0, 0, .5); /* behind a modal */
    --scrim-panel: rgba(15, 23, 42, 0.35); /* behind a side panel */
    --scrim-drawer: rgba(0, 0, 0, 0.35); /* behind the KPI drawer */
    --veil: rgba(255, 255, 255, 0.6); /* a light wash over content that is busy */
    --veil-strong: rgba(255, 255, 255, .8);
    --border-strong: #CBD5E1; /* a control border one step darker than --border (search box) */
    --surface-2: #F4F6F8; /* neutral well inside a card (used with a fallback before) */
    --warning-border: #E4C169; /* warning notice edge (used with a fallback before) */
    --warning-surface: #FDF6E3; /* warning notice fill (used with a fallback before) */
    --note-surface: #FFF3CF; /* internal note composer fill: ink on it 16:1, muted 4.9:1 */
    --note-edge: #B7791F; /* internal note left edge and ring: 3.4:1 against the page, 3.6:1 against a card */
    --toggle-off: #cbd5e1; /* switch track, off */
    --toggle-on: #22c55e; /* switch track, on */
    --toggle-knob: #ffffff; /* switch knob */
    --prefix-bg: #EEF2FF; /* the BAID / CB prefix chip */
    --prefix-border: #C7D2FE;
    --rail-flash: #f3f4ff; /* right-rail row flash */
    --focus-halo-brand: rgba(99, 102, 241, 0.18); /* keyboard halo on a nav tree item */
    --focus-outline-soft: #A5B4FC; /* tree expander focus outline */
    --inverse-surface: var(--ink); /* toast and tooltip body */
    --inverse-ink: #ffffff; /* text on --inverse-surface */
    --tooltip-bg: color-mix(in srgb, var(--ink) 92%, black); /* the app tooltip body */
    --shadow-rgb-black: 0, 0, 0;
    --toast-info: var(--accent);
    --toast-success: var(--success);
    --toast-warning: var(--warning);
    --toast-warning-ink: var(--ink);
    --toast-error: var(--danger);
    /* content width values */
    --content-max-width-default: 1000px;
    --content-max-width-narrow: 620px;
    --content-max-width-grid-wide: 1600px;
    --content-max-width-wide: 1600px;
    --content-max-width-auth: 620px;
    --content-max-width: var(--content-max-width-default); /* Default content width, larger pages (e.g. grids use 1600px and narrow pages use 620px via body class setting in the first DIV or Page_Load of the page (unauth)*/
    --single-focus-card-width: 620px;
    --rail-width: 280px;
    --leftnav-width: 240px;
    --layout-leftnav-col: var(--leftnav-width);
    --leftnav-collapsed-width: 56px; /* icon rail width */
    --layout-rail-col: var(--rail-width);
    /* CBS-34: the appbar and footer use this instead, so they keep the CLOSED rail column in
       every rail state. Mirrors --layout-rail-col above; the state-independent rules that set
       it live beside the ones that set --layout-rail-col, in layout.css and cbs.css. */
    --layout-rail-col-static: var(--rail-width);
    /* Animations */
    --rails-collapse-expand-time: 450ms;
    /* Table colors */
    --table-header-bg: #F8F8FA;
    --table-header-text: #111827;
    --table-row-hover: #EEF2FF;
    --table-row-selected: #E0EAFF;
    /* CUSTOMER BRANDING - these allow us to add touches of an brand (e.g. Jiffy Lube, Precision Tune to the UI. Default is Jiffy Lube */
    --user-brand-color: #98002E;
    --user-brand-color-hover: #b80035;
    --user-brand-color-checked: #7a0024;
    --user-brand-color-muted: color-mix(in srgb, var(--user-brand-color) 22%, white 78%);
    /* Precision Tune Branding*/
    /*--user-brand-color: #FFDD00;
    --user-brand-color-hover: #ffdf33;
    --user-brand-color-checked: #c7a800;
    --user-brand-color-muted: var(--muted);*/
    /* GRIDS */
    /* Layout & sizing */
    --grid-wrapper-margin-top: 16px;
    --grid-header-height: 56px;
    --grid-font-size: 14px;
    --grid-cell-padding-y: 12px;
    --grid-cell-padding-x: 14px;
    /* Row styling */
    --grid-row-alt-bg: #FBFCFE;
    --grid-row-hover-bg: color-mix(in srgb, var(--bg) 80%, var(--icon-accent) 8%);
    --grid-row-selected-bg: color-mix( in srgb, var(--brand-primary) 8%, var(--surface));
    /* Borders & radius */
    --grid-border-color: var(--border);
    --grid-border-width: 1px;
    --grid-radius: var(--radius);
    /* Header */
    --grid-header-bg: var(--table-header-bg);
    --grid-header-text: var(--table-header-text);
    --grid-header-font-weight: 600;
    /* Sorting */
    --grid-sort-icon-opacity: 0.7; /* kept: older rules still read it */
    --grid-sort-icon-opacity-idle: .25; /* TL-21: unsorted column */
    --grid-sort-icon-opacity-sorted: .8; /* TL-21: the sorted column */
    --grid-sort-icon-opacity-hover: 1; /* TL-21: hover */
    /* Action column */
    --grid-col-action-width: 3%;
    /* Icon buttons */
    --grid-icon-btn-padding-y: 4px;
    --grid-icon-btn-padding-x: 6px;
    --grid-icon-btn-radius: 6px;
    --grid-icon-btn-font-size: 16px;
    /* Delete icon */
    --grid-delete-hover-bg: rgba(220, 38, 38, 0.10);
    --grid-delete-color: var(--danger);
    /* Edit icon */
    --grid-edit-hover-bg: rgba(37, 99, 235, 0.10);
    --grid-edit-color: var(--brand-ink);
    /* Lock icons */
    --grid-lock-locked-color: #c62828;
    --grid-lock-unlocked-color: #999;
    /* Wrapping */
    --grid-wrap-break: break-word;
    /* Table spacing */
    --grid-border-spacing: 0;
    /* Sticky header z-index */
    --grid-header-z: 10;
    /* Overlay z-index */
    --grid-overlay-z: 5;
    --tabular-nums: tabular-nums;
}

/* =====================================================================================================================
   DARK THEME (2026-10-16).  Switched on by the appSetting MT.Theme.DarkMode = true: Site.master writes
   <html data-theme="dark"> before first paint (and a color-scheme meta), nothing else changes. Light mode is the :root block above
   and is untouched by this block: remove the attribute and every rule below is inert.
   EVERYTHING here is a token. The page rules elsewhere read tokens, so recolouring is done in this one place.

   WHERE THE COLOURS COME FROM (no new hues; every value is a mix of the existing palette):
     page      --ink #0F172A itself                      card      page + 6% white      overlay (modal, flyout)  page + 11% white
     raised    page + 8.5% white (header rows, wells)    border    page + 18% white     strong border            page + 28% white
     text      --bg #F4F6F8 (light and dark swap their roles)       muted  --muted lifted 40% toward white
     brand     fill  = #2B27A8 lifted 30% toward white (white text on it 4.8:1, 3.2:1 against a card)
               ink   = #2B27A8 lifted 55% toward white (brand as TEXT or ICON on a card, 6.1:1)
               bar   = #2B27A8 itself (the app bar keeps the exact brand colour)
     danger    #C0392B lifted 40% toward white as TEXT (5.7:1); the FILL behind white text stays #C0392B (5.4:1)
     success, warning, accent, positive: unchanged (already 4.6:1 or more on a dark card)
   Elevation is lightness, not shadow: a higher layer is a lighter surface with a hairline border. The four --shadow tokens are
   reduced to a faint ring and a short, tight drop.
   Proof and the contrast table: docs/design/DARK_MODE_2026-10-16.md.
   ===================================================================================================================== */
html[data-theme="dark"] {
    color-scheme: dark; /* native controls, scrollbars, date pickers, form widgets and the canvas follow */
    /* Brand */
    --brand-primary: #6B68C2;
    --brand-ink: #A09ED8;
    --appbar-bg: #2B27A8;
    /* Surface and text */
    --bg: #0F172A;
    --surface: #1D2537;
    --surface-overlay: #293141;
    --ink: #F4F6F8;
    --muted: #9DA6B0;
    --border: #3A4150;
    --border-strong: #525866;
    --surface-2: #232B3C;
    /* Buttons, menus, icons */
    --button-secondary: #F4F6F8;
    --menu-chevron-color: #7E8996;
    --menu-chevron-color-hover: #B9B9B9;
    --tooltip-color: #F4F6F8;
    --tooltip-bg: #444A59;
    --icon-btn-bg: #2B3150;
    --icon-btn-border: #3B3E6C;
    --hover-chip: #29304D;
    --prefix-bg: #29304D;
    --prefix-border: #3B3E6C;
    --rail-flash: #2E3456;
    --cta-idle-bg: #1E4F8F;
    --cta-idle-text: #E6F0FF;
    --cta-hover-active: color-mix(in srgb, var(--brand-primary) 16%, var(--surface));
    /* Mixing anchors: tints mix toward the card, outlines lift toward white */
    --tint-toward: var(--surface);
    --shade-toward: #ffffff;
    --lift-toward: #ffffff;
    --on-solid: #ffffff;
    /* States: success, warning, accent and positive keep their values */
    --danger: #D98880;
    --danger-solid: #C0392B;
    --danger-halo: rgba(217, 83, 79, 0.35);
    --warning-border: #8C562B;
    --warning-surface: #353034;
    --note-surface: #3A3322; /* internal note composer fill: ink on it 11.6:1, muted 5.1:1 */
    --note-edge: #D9A441; /* internal note edge: 7.9:1 against the page, 6.8:1 against a card */
    /* Focus: the underline reads against the field, not against the page */
    --focus-underline-color: var(--brand-ink);
    --focus-underline-valid: var(--success);
    --focus-halo-brand: rgba(160, 158, 216, 0.30);
    --focus-outline-soft: #A09ED8;
    /* Shadows become a hairline ring plus a short drop */
    --shadow-rgb: 0, 0, 0;
    --shadow-rgb-neutral: 0, 0, 0;
    --shadow-rgb-black: 0, 0, 0;
    --shadow-0: 0 1px 1px rgba(0, 0, 0, 0.30);
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 20px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.55);
    /* Veils and scrims */
    --scrim-modal: rgba(5, 8, 16, 0.72);
    --scrim-panel: rgba(5, 8, 16, 0.60);
    --scrim-drawer: rgba(5, 8, 16, 0.60);
    --veil: rgba(15, 23, 42, 0.60);
    --veil-strong: rgba(15, 23, 42, 0.80);
    /* Switch */
    --toggle-off: #6F747F;
    --toggle-on: #22c55e;
    --toggle-knob: #ffffff;
    /* Toasts and tooltips: the neutral toast is a raised card; typed toasts are deep status fills with light text */
    --inverse-surface: var(--surface-overlay);
    --inverse-ink: #F4F6F8;
    --toast-info: #1F5498;
    --toast-success: #146D3F;
    --toast-warning: var(--warning);
    --toast-warning-ink: #0F172A;
    --toast-error: #C0392B;
    /* Grids */
    --table-header-bg: #232B3C;
    --table-header-text: #F4F6F8;
    --table-row-hover: #282E4A;
    --table-row-selected: #303558;
    --grid-row-alt-bg: #232A3C;
    --grid-row-hover-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
    --grid-row-selected-bg: color-mix(in srgb, var(--brand-primary) 18%, var(--surface));
    --grid-lock-locked-color: #DD7E7E;
    --grid-delete-hover-bg: rgba(248, 113, 113, 0.16);
    --grid-edit-hover-bg: rgba(160, 158, 216, 0.16);
    /* Charts */
    --cebc-na-bg: #575D6A;
    /* Tenant touches: the Jiffy Lube red lifted so an icon still shows on a dark card */
    --user-brand-color: #BC5977;
    --user-brand-color-hover: #B54769;
    --user-brand-color-checked: #C6738C;
    --user-brand-color-muted: color-mix(in srgb, var(--user-brand-color) 30%, var(--surface));
}

html[data-theme="dark"] ::placeholder {
    color: var(--muted);
    opacity: 1;
}

html[data-theme="dark"] ::selection {
    background: color-mix(in srgb, var(--brand-primary) 55%, var(--surface));
    color: var(--ink);
}

/* Browser autofill paints its own pale fill; keep it on the field surface */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    transition: background-color 9999s ease-out 0s;
}

/* Reduced transparency: the veils and scrims become solid enough to read through nothing */
@media (prefers-reduced-transparency: reduce) {
    html[data-theme="dark"] {
        --scrim-modal: rgb(5, 8, 16);
        --scrim-panel: rgb(5, 8, 16);
        --scrim-drawer: rgb(5, 8, 16);
        --veil: rgb(15, 23, 42);
        --veil-strong: rgb(15, 23, 42);
    }
}

/* ---------- Base typography & page defaults ---------- */
html {
    font-size: 16px;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ui-font);
    font-size: 16px;
    /*line-height: 1.5;*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    height: 100%;
    overflow: hidden;
}

/* Headings */
h1 {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--ui-font);
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--ui-font);
}

h3 {
    font-size: 1.25rem;
    font-weight: 600;
    font-family: var(--ui-font);
}

/* ---------------------------------------------------------
 BASE PARAGRAPH TEXT
 --------------------------------------------------------- */
p {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.45;
}

    p:last-child {
        margin-bottom: 0;
    }

.sub {
    margin: 0 0 16px;
    color: var(--muted);
}

.small {
    font-size: .875rem;
}

.text-muted {
    color: var(--muted);
}

/* D01: optional fields are marked, required ones are not. A muted word after the label (UI_STANDARDS.md 6.2). */
.field-optional {
    margin-left: 6px;
    font-size: 12px;       /* microtext size, like .microtext (one place: every Optional marker) */
    font-weight: 400;
    color: var(--muted);
}

.microtext {
    color: var(--muted);
    font-size: 12px;
}

/* ---------- Links & buttons ---------- */
.link {
    color: var(--brand-ink);
    text-decoration: none;
    font-weight: 500;
    opacity: .75;
}

    .link:hover:not(:where(:disabled, [disabled], [aria-disabled="true"])) {
        font-weight: 600;
        opacity: 1;
    }


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    text-rendering: optimizeLegibility;
}


    .btn[disabled] {
        opacity: 0.7; /* 3:1 for the label in both themes (disabledbuttonscheck.ps1); 0.4 was 1.9 to 2.5:1 */
        cursor: not-allowed;
    }


.btn-primary {
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    box-shadow: var(--shadow-3);
}

    .btn-primary:hover:not(:where(:disabled, [disabled], [aria-disabled="true"])) {
        transform: translateY(-1px);
    }

.btn-secondary {
    background: var(--icon-btn-bg);
    color: var(--button-secondary);
    border-color: var(--icon-btn-border);
    transition: color 140ms ease, transform 120ms ease, background 140ms ease;
}

    .btn-secondary:hover:not(:where(:disabled, [disabled], [aria-disabled="true"])) {
        background: var(--brand-primary);
        color: var(--brand-on-primary);
        transform: translateY(-1px);
    }

.btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: var(--radius);
}

/* Phones: normal buttons inherit the 16px body text and read as oversized at 360-390px wide. 15px keeps them
   readable; the 40px height (the touch target) is unchanged. Small buttons keep their own size (above). */
@media (max-width: 480px) {
    .btn:not(.btn-sm) {
        font-size: 15px;
    }
}

.btn-danger {
    background: var(--danger-solid);
    color: var(--on-solid);
}

/* Make full-width buttons easy to apply */
.btn.full {
    width: 100%;
    box-sizing: border-box;
}

/* This is used on MyScheduledReports but should also work for other similar table pages with a Actions column */
.actions-col .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 4px;
    color: inherit; /* ensures SVG is visible */
}

    .actions-col .icon-btn svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

/* =========================================================
   Icon system (app-wide)
   Contract:
   - Wrapper sets `color`
   - SVG uses `currentColor` for fill/stroke
   - State classes set `color`
   ========================================================= */

/* Icons inherit color from the container (button/text color) */
svg.icon {
    color: currentColor;
    min-width: 20px;
    width: 24px;
    height: 24px;
    display: inline-block;
    flex: 0 0 auto;
    flex-shrink: 0;
    vertical-align: middle;
    box-sizing: border-box;
    line-height: 0;
    max-width: 100%;
    max-height: 100%;
    transition: color 140ms ease; /* ok */
}
    /* =========================================================
   ICONS — Safe currentColor defaults + icon-btn hover accent
   - Avoid .icon * blanket rules (reduces unintended overrides + repaint churn)
   - Keep accent stroke on hover only for elements that actually have stroke
   ========================================================= */

    /* Only set fill when the SVG element actually has a fill attribute */
    svg.icon [fill]:not([fill="none"]) {
        fill: currentColor;
    }

    /* Only set stroke when the SVG element actually has a stroke attribute */
    svg.icon [stroke]:not([stroke="none"]) {
        stroke: currentColor;
    }
    /* small icon modifier for inline SVGs (JL icon) */
    svg.icon.icon-JL {
        width: 20px; /* target size for action bar */
        height: 20px;
        flex: 0 0 20px;
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;
        line-height: 0; /* important to avoid extra baseline gap */
        transition: color 140ms ease, transform 120ms ease;
        pointer-events: auto;
        transform: translateY(0px); /* micro-nudge if needed */
        /* optional: ensure the icon inherits color from currentColor */
        color: var(--user-brand-color-muted);
    }

.cbs-filter-pill:hover svg.icon.icon-JL,
.cbs-filter-pill:focus-within svg.icon.icon-JL {
    color: var(--user-brand-color); /* full tenant color on pill hover/focus */
}

/* 2) Default icon button color */
.icon-btn {
    color: var(--brand-ink);
}

    /* 3) Hover: change color and (optionally) add stroke */
    .icon-btn:hover:not(:where(:disabled, [disabled], [aria-disabled="true"])) {
        color: var(--icon-btn-hover-color);
        transform: translateY(-1px);
    }

        /* Accent stroke ONLY on stroked SVG shapes */
        .icon-btn:hover:not(:where(:disabled, [disabled], [aria-disabled="true"])) svg.icon [stroke]:not([stroke="none"]) {
            stroke-width: var(--icon-accent-stroke-width, 0);
        }

/* Avoid animating stroke-width (reduces repaint churn) */
svg.icon [stroke] {
    transition: none;
}

/* 4) Icon on primary background */
.icon-on-primary {
    color: var(--brand-on-primary);
}

.icon-muted {
    color: var(--icon-muted);
}

    .icon-muted svg,
    .icon-muted .icon {
        color: var(--icon-muted) !important;
    }

.icon-success {
    color: var(--icon-success);
}

    .icon-success path {
        color: var(--icon-success);
    }

.icon-warning {
    color: var(--icon-warning);
}

.icon-danger {
    color: var(--icon-danger);
}
/* Password complexity validation */
.pw-ok {
    color: var(--success);
    font-size: 13px;
    font-weight: 600;
}

.pw-err {
    color: var(--danger);
    font-size: 13px;
}

.username-ok {
    color: var(--success);
    font-size: 13px;
    font-weight: 600;
}

.username-err {
    color: var(--danger);
    font-size: 13px;
}
/* ---------------------------------------------------------
 CARD — BASE (STATIC)
 --------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    padding: 24px;
    box-sizing: border-box;
    /* sizing */
    margin: 0 auto;
    min-width: 0;
    max-width: var(--single-focus-card-width);
    /* layout */
    display: block; /* ✅ no grid */
    max-height: none; /* ✅ do not stretch */
}

.card-medium {
    max-width: var(--content-max-width-default);
}
/* card wide requires page grid-wide */
.card-wide {
    max-width: var(--content-max-width-wide);
}
/* ---------------------------------------------------------
 CARD — FORM / SCROLLING VARIANT
 --------------------------------------------------------- */
.card.card-scroll {
    /* limit card to available vertical space */
    max-height: 100%;
    /* establish internal layout */
    display: flex;
    flex-direction: column;
    /* critical */
    min-height: 0;
    padding: 24px 8px 24px 24px;
    width: 100%;
}

    .card.card-scroll .card-content {
        /* this is the ONLY scrolling region */
        overflow-y: auto;
        /* required so flexbox allows scrolling */
        min-height: 0;
    }
        /* Opt-in: stable gutter without layout shrink for children */
        /* Prevent width shift when scrollbar appears/disappears (wrap-jitter fix) */
        .card.card-scroll .card-content.scroll-gutter-stable {
            scrollbar-gutter: stable;
        }
/* Card header */
.card-header {
    margin-bottom: 16px;
}
    /* Headings inside cards do not create layout spacing */
    .card-header h1,
    .card-header h2,
    .card-header h3 {
        margin: 0;
    }


.card-sub {
    margin-top: 8px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Card header toolbar: filters and actions that sit under the title and sub-text.
   TL-11 2026-09-18: was repeated as an inline flex rule on every page that has one. */
.card-toolbar {
    margin-top: 16px;
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}
    /* Fields sit on one line here, so they carry no bottom gap of their own */
    .card-toolbar .form-row {
        margin-bottom: 0;
    }
    /* Button group pushed to the right-hand end of the toolbar */
    .card-toolbar .card-toolbar-actions {
        display: flex;
        gap: 8px;
        margin-left: auto;
        margin-right: 16px;
    }
/* Heading for a section inside a card (one step down from the card heading) */
.section-header {
    margin-bottom: 12px;
}

    .section-header h3 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--ink);
    }
/* Card content area */
.card-content {
    /* no artificial spacing here */
}
/* Card footer */
.card-footer {
    margin-top: 16px;
    margin-right: 15px;
}
/* Card footer on scrolling cards */
.card.card-scroll .card-footer {
    margin-top: 16px;
    margin-right: 15px;
}
/* A footer whose primary action sits at the right (Change password, other single-CTA forms) */
.card-footer.card-footer-end {
    display: flex;
    justify-content: flex-end;
}
/*(Do this only if action separation needs more emphasis.)
.card-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}*/
/* Spinner */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--muted);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: inlineSpin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

/* This is for inline spinners */
@keyframes inlineSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* This is for overlay spinners */
@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* ---------- Form controls (global standards) ---------- */
/* Force controls to inherit the UI font so native widgets match site typography */
input, textarea, select, button {
    font-family: inherit !important;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.input[type="number"],
.input[type="decimal"],
.input[type="percent"],
.input[type="currency"] {
    text-align: right;
}

/* Inputs / textareas */
.input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    box-sizing: border-box;
    transition: box-shadow .12s ease, border-color .12s ease;
}

    .input.invalid {
        border-color: var(--danger);
        box-shadow: 0 0 0 2px var(--danger-halo);
    }
/* Ensure dropdowns behave like other inputs */
select.input {
    display: block;
    width: 100%;
}

textarea.input {
    min-height: 64px;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    resize: vertical;
}
/* Focus styles for text-like fields (changed 2026-10-16: crisp underline, no glow; UI_STANDARDS section 11).
   ONE rule for every text field, whatever its class: input (any type but button-like ones), select, textarea,
   and anything carrying .input. The line is drawn INSIDE the field (the bottom border turns accent and a
   inset box-shadow with no blur fills the rest of the line width), so layout never shifts and the field's own
   rounded corners clip it. The outer glow is gone. Outline is transparent, not none: it is invisible on screen
   because the underline is the indicator, and forced-colors mode paints it (see the media rule below).
   Specificity is deliberately (0,3,1) so layout.css and the error rules cannot out-rank it by load order;
   the right rail's ID selectors are bridged in controls.css. State is carried by two custom properties
   (--fu-color, --fu-border) so every state shares these declarations. */
:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="image"], [type="range"], [type="color"], [type="hidden"]), select, textarea, .input) {
    --fu-color: var(--focus-underline-color);
    --fu-border: var(--focus-border-color);
}

:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="image"], [type="range"], [type="color"], [type="hidden"]), select, textarea, .input):is(.field-error, .invalid, [aria-invalid="true"]) {
    --fu-color: var(--focus-underline-error);
    --fu-border: var(--focus-underline-error);
}

:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="image"], [type="range"], [type="color"], [type="hidden"]), select, textarea, .input):is(.is-valid) {
    --fu-color: var(--focus-underline-valid);
    --fu-border: var(--focus-underline-valid);
}

:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="image"], [type="range"], [type="color"], [type="hidden"]), select, textarea, .input)[readonly] {
    --fu-color: var(--muted); /* read-only: a quiet line, the field is not asking for input */
}

:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="image"], [type="range"], [type="color"], [type="hidden"]), select, textarea, .input):focus:not(:disabled) {
    outline: 2px solid transparent;
    outline-offset: 0;
    border-color: var(--fu-border);
    border-bottom-color: var(--fu-color);
    box-shadow: inset 0 calc(1px - var(--focus-underline-width)) 0 0 var(--fu-color);
}

@media (forced-colors: active) {
    :is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="image"], [type="range"], [type="color"], [type="hidden"]), select, textarea, .input):focus:not(:disabled) {
        outline: 2px solid Highlight;
        outline-offset: 1px;
    }
}
/* Small form helpers */
.form-row {
    margin-bottom: 14px;
    display: block;
}

    .form-row label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        color: var(--ink);
    }
    /* Horizontal form layout */
    .form-row.inline {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .form-row.inline label {
            margin: 0;
            white-space: nowrap;
        }

        .form-row.inline .input {
            display: inline-block;
            width: auto;
            flex: 1;
        }

.field-note {
    font-size: 12px;
    opacity: .6;
    padding-bottom: 12px;
}
/* Validation visual fallback */
.field-error {
    /*border-color: var(--danger) !important;*/
    /* background-color: var(--surface-danger) !important; */
    color: var(--danger) !important;
    /*border-color: var(--border-danger-subtle) !important;
    box-shadow: 0 0 0 3px rgba(var(--danger), 0.06);*/
}

    .field-error:focus {
        outline: none;
        border-color: var(--danger) !important;
        background-color: var(--surface-danger) !important;
    }

/* TL-53: the login failure message. The Login control always renders its FailureText control,
   so the span is there on a clean load with nothing in it - :empty keeps it out of the layout
   until there is something to say. */
.login-failure {
    display: block;
    margin-top: 12px;
    font-weight: 600;
    line-height: 1.4;
}

    .login-failure:empty {
        display: none;
    }

.field-error-msg {
    color: var(--danger);
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 4px;
    opacity: 0.9;
}


.input.field-error {
    border-color: var(--danger) !important;
    background-color: var(--surface-danger) !important;
    color: var(--danger) !important;
}

    .input.field-error:focus {
        outline: none;
        border-color: var(--danger) !important;
        background-color: var(--surface-danger) !important;
    }
/* Form actions */
.form-actions {
    margin-top: 16px;
}
/* ---------- Accessibility & preferences ---------- */
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}
/* Ensure contrast for inputs (WCAG AA) */
.input, textarea.input {
    color: var(--ink);
    background: var(--surface);
}
/* ---------------------------------------------------------
   RESPONSIVE BEHAVIOR
   --------------------------------------------------------- */


@media (max-width: 1100px) {
    /* Headings */
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1rem;
    }
}
/* ---------- Utilities (small, safe helpers used across app) ---------- */
.centered {
    margin-left: auto;
    margin-right: auto;
}

.hidden {
    display: none !important;
}
/* -----------------------------
   Inline error blocks (modals)
   ----------------------------- */
.inline-error {
    display: block;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface-danger);
    color: var(--danger);
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.35;
}

/* -----------------------------
   PAY-48: the payment receipt, inside the modal.
   Deliberately the same shape as .inline-error and in the same place, because that is where the
   operator's eye already goes after pressing Pay - the only difference is that this one is good
   news. It STAYS until the modal is closed; the toast it replaced deleted itself after five
   seconds and carried no transaction id.
   ----------------------------- */
.inline-success {
    display: block;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--success);
    background: var(--surface-success);
    color: var(--ink);
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.4;
}

.pay-receipt-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--success);
    margin-bottom: 8px;
}

.pay-receipt-rows {
    display: block;
    margin: 0 0 8px 0;
}

.pay-receipt-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}

.pay-receipt-label {
    color: var(--muted);
}

.pay-receipt-value {
    text-align: right;
    word-break: break-all;
}

    /* The two a customer asks for on the phone: the amount and the transaction id. */
    .pay-receipt-value.is-strong {
        font-weight: 700;
    }

.pay-receipt-note {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}
/* ---------- Optional: small global helpers for tenant cards ---------- */
/* Keep tenant-specific branding in a separate file (e.g., cbs.css) but provide a neutral container */
.partner-card {
    padding: 16px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
}
/* Action icon (edit pencil, delete, etc.) */
.gv-action-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

    .gv-action-edit:hover {
        background: var(--hover-chip);
        border-color: var(--focus-ring);
        color: var(--brand-ink);
    }
/* Small action icon in first column (edit pencil, trash, etc.) */
.gv-action-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

    .gv-action-edit:hover {
        background: var(--hover-chip);
        border-color: var(--focus-ring);
        color: var(--brand-ink);
    }
/* ---------- Two-column layout + right rail infrastructure ---------- */
/* Generic shell for “main + rail” layouts */
.layout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: 24px;
    align-items: flex-start;
}
    /* When the rail is hidden/collapsed */
    .layout-shell.rail-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }
/* Accessible focus rings for keyboard users (3px as requested) */
:where(button, .btn, input[type="button"], input[type="submit"], a[role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, var(--shade-toward));
    outline-offset: 2px;
}


/* ---------- End of theme.css ---------- */