/* ============================================================
   AIMS Application Styles — matches original .NET 4.8 AIMS UI
   ============================================================ */

/* --- CSS Variables --- */
:root {
    --aims-header-height: 90px;
    --aims-footer-height: 50px;
    --aims-toolbar-height: 36px;
    --aims-nav-width: 270px;

    /* Module header colors (from AIMSBase.css) */
    --aims-color-global: #0082C8;
    --aims-color-ac: #00A4E4;
    --aims-color-at: #9fa1a4;
    --aims-color-ca: #cf3339;
    --aims-color-ge: #52439a;
    --aims-color-gr: #a8005b;
    --aims-color-ia: #ef4637;
    --aims-color-ie: #F7971E;
    --aims-color-pb: #e72b2d;
    --aims-color-sso: #0397d6;
    --aims-color-ps: #04a84f;
    --aims-color-reports: #0082C8;

    /* Toolbar / content */
    --aims-toolbar-bg: #10487f;
    --aims-content-bg: #FFFFFF;
    --aims-footer-bg: #d0d5da;
    --aims-section-bg: #D3D3D3;
    --aims-grid-header-bg: #EEEEEE;
    --aims-grid-hover: #eff7ff;
    --aims-border-light: #D3D3D3;
    --aims-border: #E0E0E0;

    /* Text */
    --aims-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --aims-font-family-content: Verdana, Geneva, Arial, sans-serif;
    --aims-text-primary: #333333;
    --aims-text-secondary: #555555;
}

/* --- Reset for AIMS layout --- */
html, body {
    margin: 0;
    padding: 0;
    font-family: var(--aims-font-family);
    height: 100%;
    overflow: hidden;
}

/* ============================================================
   PASSWORD STATION LEGACY CONTROLS + GLOBAL PASSWORD TOGGLE
   ============================================================ */
.ps-layout-container .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-family: var(--aims-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    background-image: none;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-transform: none;
}

.ps-layout-container .btn:hover:not(:disabled) {
    text-decoration: none;
}

.ps-layout-container .btn:active:not(:disabled) {
    box-shadow: none;
}

.ps-layout-container .btn:focus-visible {
    outline: 2px solid #005ba0;
    outline-offset: 2px;
}

.ps-layout-container .btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}

.ps-layout-container .btn.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.ps-layout-container .btn.btn-default:hover:not(:disabled) {
    background-color: #f7f7f7;
    border-color: #ccc;
}

/* THIS IS WHERE THE PB70 CONTINUE BUTTON GETS ITS BLUE — do not delete it, and do not let a page
   re-inline it. PsChangePassword / PsResetPassword / PsQuickPasswordReset used to hard-code
   `style="background-color: #337ab7"` on their Continue button, which outranks every
   non-`!important` rule in /branding/css/global and therefore silently defeated a migrating
   customer's own `#ButtonTextContinue { background-color: … }` (the deployed CVS sheet declares
   exactly that, eleven times, without `!important`). This file is linked BEFORE
   /branding/css/global, and `.ps-layout-container .btn.btn-primary` is (0,3,0) against their
   (1,0,0) id selector, so the customer now wins in both appearances while an unbranded install
   still renders the same blue it always did.
   Applies in CLASSIC too — deliberately: `.ps-layout-container` is on the PS shell root in both
   appearances, and legacy's own `.btn-primary` never shipped in the Blazor host, so without this
   a Classic `input#ButtonTextContinue.btn.btn-primary` on an unbranded install would render as an
   unstyled grey submit button. */
.ps-layout-container .btn.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: transparent;
}

.ps-layout-container .btn.btn-primary:hover:not(:disabled) {
    background-color: #2e6da4;
    border-color: transparent;
}

/* ============================================================================================
   LOOKING FOR THE **CLASSIC** CONTENT STYLING? IT IS NOT IN THIS FILE, AND IT CANNOT BE.

   The Classic content presentation — the `table.LayoutTable` / `.BareTable.PageTitleImage` title
   strip, field widths, label/control alignment, the `.button-split-N` rows, page rhythm — lives in

        wwwroot/css/aims-legacy-content.css

   Reason: App.razor links this file at slot 1, BEFORE css/aims-legacy-chrome.css at slot 3. Every
   Classic content rule has to override a legacy baseline rule declared in that later sheet at the
   SAME specificity, and a same-specificity rule in an EARLIER sheet loses the tie. Winning from
   here would mean inflating specificity, which would then also outrank the migrating customer's own
   class-level rules in /branding/css/global — the one thing that layer must never do. So the
   Classic content sheet is slotted between the legacy baseline and the customer sheet instead.

   ADD SHARED CLASSIC CONTENT RULES THERE, NOT HERE. Rules in this file that must stay out of
   Classic keep using the `:not(.aims-legacy-chrome)` switch, exactly as the two rules below do.

   ONE EXCEPTION, AND IT PAYS THE PRICE THE PARAGRAPH ABOVE DESCRIBES. Rules that belong to ONE
   Classic page rather than to the shared surface live here, in the fenced "CLASSIC CONTENT —
   /ps/select-systems, /ps/results, /ps/success" block near the end of this file. To win from slot
   1 they carry `.aims-legacy-chrome` PLUS a Classic-only, page-scoped product class, which puts
   them a whole class ahead of the baseline they override — deliberately more specific, and
   documented as such at that block's own header. Anything a SECOND page would also want belongs in
   aims-legacy-content.css instead, where it can be stated at the baseline's own specificity and the
   customer still wins the tie.
   ============================================================================================ */

/* `.button-split-2` IS A LEGACY CLASS, and these two rules are a MODERN-ONLY re-interpretation
   of it — so they must not fire once the Classic content contract starts emitting it.
   `.ps-layout-container` is on the PS shell root in BOTH appearances (PSLayout's
   _pageRootClass), so an unscoped rule here would hijack every Classic button row: CSS grid
   overrides legacy's `.button-split-2 input[type=submit] { width: calc(50% - 7px) }` sizing,
   neutralises a customer's `@media (max-width: 640px) { .button-split-2 { text-align: center } }`
   (text-align has no effect on grid item placement) and breaks the `float: right` a customer's
   per-page script assumes on the Success screen's Continue button.
   `:not(.aims-legacy-chrome)` is the same switch the whole legacy sheet keys off. */
.ps-layout-container:not(.aims-legacy-chrome) .button-split-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.ps-layout-container:not(.aims-legacy-chrome) .button-split-2 .btn {
    width: 100%;
}

.ps-layout-container .input-group.pwdreveal {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.ps-layout-container .input-group.pwdreveal .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 9px 14px;
    font-size: 14px;
    line-height: 1.42857143;
    color: var(--aims-text-secondary);
    background-color: #fff;
    border: 1px solid #bcc8d4;
    border-radius: 6px 0 0 6px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.06);
}

.ps-layout-container .input-group.pwdreveal .form-control:focus {
    outline: none;
    border-color: #4f8ec5;
    box-shadow: 0 0 0 3px rgba(79, 142, 197, 0.12);
}

.ps-layout-container .input-group.pwdreveal .input-group-btn {
    display: flex;
    flex: 0 0 auto;
}

.ps-layout-container .input-group.pwdreveal .btn.reveal,
.ps-layout-container .input-group.pwdreveal .btn-group.reveal {
    min-width: 56px;
    padding: 9px 16px;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.aims-password-toggle-host {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
    gap: 4px;
}

.aims-password-toggle-input {
    flex: 1 1 auto;
    min-width: 0;
}

.aims-password-toggle-input::-ms-reveal,
.aims-password-toggle-input::-ms-clear {
    display: none;
}

.aims-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f5f5f5;
    color: #555;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aims-password-toggle:hover {
    background-color: #ececec;
    border-color: #bbb;
    color: #333;
}

.aims-password-toggle:focus-visible {
    outline: 2px solid #005ba0;
    outline-offset: 2px;
}

.mud-input-slot.aims-password-toggle-host {
    gap: 8px;
}

/* ============================================================
   HEADER — 90px tall, module-specific background color
   Matches: .top-header from AIMSBase.css
   ============================================================ */
.aims-header {
    display: flex;
    align-items: center;
    position: relative;
    height: var(--aims-header-height);
    min-height: var(--aims-header-height);
    max-height: var(--aims-header-height);
    width: 100%;
    font-family: var(--aims-font-family);
    font-size: 16px;
    color: white;
    overflow: hidden;
    background-color: var(--aims-color-global);
    z-index: 100;
}

.aims-header .aims-logo {
    float: left;
    margin-left: 14px;
    margin-top: 0;
    background-image: url('../img/header-avatier.png');
    background-repeat: no-repeat;
    width: 291px;
    height: 70px;
    flex-shrink: 0;
}

.aims-header .aims-header-info {
    position: absolute;
    right: 250px;
    top: 10px;
    text-align: right;
    color: white;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 22px;
}

.aims-header .aims-header-info span {
    display: block;
    color: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}

.aims-header .aims-twisted-logo {
    position: absolute;
    top: 0;
    right: 0;
    background-image: url('../img/twisted-avatier.png');
    background-repeat: no-repeat;
    width: 159px;
    height: 90px;
}

.aims-header .aims-signout-area {
    height: 61px;
    width: 70px;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
    top: 10px;
    right: 170px;
    cursor: pointer;
    z-index: 10;
    color: white;
    text-decoration: none;
}

.aims-header .aims-signout-area:hover {
    opacity: 0.75;
}

.aims-header .aims-signout-image {
    height: 40px;
    width: 41px;
    background-image: url('../img/sprite.desktop.svg'), url('../img/sprite.desktop.png');
    background-position: -4px -270px;
    display: inline-block;
}

.aims-header .aims-signout-text {
    font-size: 14px;
    margin-top: 4px;
    color: white;
}

/* Header Home / Risk buttons (legacy HeaderAT.ascx homeButtonArea / riskArea).
   Same sprite as sign-out; legacy order left→right is Risk, Home, Sign Out. */
.aims-header .aims-home-area,
.aims-header .aims-risk-area {
    height: 61px;
    width: 70px;
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
    top: 10px;
    cursor: pointer;
    z-index: 10;
    color: white;
}

.aims-header .aims-home-area { right: 245px; }
.aims-header .aims-risk-area { right: 320px; }

.aims-header .aims-home-area:hover,
.aims-header .aims-risk-area:hover {
    opacity: 0.75;
}

.aims-header .aims-home-image,
.aims-header .aims-risk-image {
    height: 40px;
    width: 41px;
    background-image: url('../img/sprite.desktop.svg'), url('../img/sprite.desktop.png');
    display: inline-block;
}

.aims-header .aims-home-image { background-position: -105px -270px; }
.aims-header .aims-risk-image { background-position: -155px -270px; }

.aims-header .aims-home-text,
.aims-header .aims-risk-text {
    font-size: 14px;
    margin-top: 4px;
    color: white;
}

/* Shift the header info block left so it clears the extra buttons. */
.aims-header.has-home .aims-header-info { right: 325px; }
.aims-header.has-home.has-risk .aims-header-info { right: 400px; }

/* ============================================================
   MAIN LAYOUT — header, nav + content side by side, footer
   ============================================================ */
.aims-app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.aims-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* --- Left Navigation Sidebar --- */
.aims-nav-sidebar {
    width: var(--aims-nav-width);
    min-width: var(--aims-nav-width);
    background-color: #F5F5F5;
    border-right: 1px solid var(--aims-border-light);
    overflow-y: auto;
    overflow-x: hidden;
}

.aims-nav-sidebar .mud-navmenu {
    padding-top: 4px;
}

.aims-nav-sidebar .mud-nav-link {
    font-family: var(--aims-font-family-content);
    font-size: 11px;
    padding: 6px 12px;
}

.aims-nav-sidebar .mud-nav-group .mud-nav-link {
    padding-left: 24px;
}

/* --- Pane 1 & 2: Constrain all nav icons to 16px --- */
.aims-pane1-tree .mud-nav-link-icon,
.aims-pane1-tree .mud-icon-root,
.aims-pane1-tree .mud-svg-icon,
.aims-pane2-nav .mud-nav-link-icon,
.aims-pane2-nav .mud-icon-root,
.aims-pane2-nav .mud-svg-icon {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
}

/* --- Content Area --- */
.aims-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Toolbar (28px, dark blue) */
.aims-toolbar {
    display: flex;
    align-items: center;
    height: var(--aims-toolbar-height);
    min-height: var(--aims-toolbar-height);
    background-color: var(--aims-toolbar-bg);
    color: white;
    padding: 0 8px;
    font-family: var(--aims-font-family-content);
    font-size: 11px;
}

.aims-toolbar button,
.aims-toolbar .mud-button-root {
    color: white !important;
    font-size: 11px;
    text-transform: none;
    padding: 4px 10px;
    min-height: 28px;
    border-radius: 3px;
    transition: background-color 0.15s ease;
}

.aims-toolbar button:hover,
.aims-toolbar .mud-button-root:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.aims-toolbar button:active,
.aims-toolbar .mud-button-root:active {
    background-color: rgba(255, 255, 255, 0.35) !important;
}

/* Title bar */
.aims-titlebar {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background-color: var(--aims-grid-header-bg);
    border-bottom: 1px solid var(--aims-border-light);
    border-top: 1px solid var(--aims-border-light);
    font-family: var(--aims-font-family);
    font-size: 20px;
    color: var(--aims-text-secondary);
    font-weight: bold;
}

/* Scrollable content body */
.aims-content-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
    background-color: var(--aims-content-bg);
    font-family: var(--aims-font-family-content);
    font-size: 11px;
}

/* ============================================================
   FOOTER — 50px, dark gray
   ============================================================ */
.aims-footer {
    display: flex;
    align-items: center;
    height: var(--aims-footer-height);
    min-height: var(--aims-footer-height);
    background-color: var(--aims-footer-bg);
    color: black;
    padding: 0 10px;
    font-size: 11px;
    font-family: var(--aims-font-family-content);
    z-index: 100;
}

.aims-footer-left {
    flex: 1;
}

.aims-footer-center {
    flex: 1;
    text-align: center;
}

.aims-footer-center a {
    color: black;
    text-decoration: underline;
    font-weight: bold;
}

.aims-footer-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.aims-footer-right img {
    height: 25px;
}

/* ============================================================
   MODERN LANDING SHELL — the full-viewport gradient the chromeless
   landing/challenge pages paint behind their MudPaper card.

   WHY THESE LIVE HERE AND NOT IN A style= ATTRIBUTE (audit D-3).
   Every one of these declarations used to be an INLINE style on the page root
   of PsSecurityQuestion / PsAuthSelection / PsLanguageSelect. An inline style
   outranks every non-!important rule in /branding/css/global, so a migrating
   customer could not restyle — or flatten — the gradient at all, no matter what
   they wrote. aims-app.css is linked in App.razor:20, BEFORE
   /branding/css/global (App.razor:48), so a single customer rule of equal
   specificity now wins on source order while the MODERN pixels are unchanged:
   the declarations below are byte-for-byte the ones the inline attributes held.

   CLASSIC NEVER EMITS THESE CLASSES. In CLASSIC those pages drop the gradient
   wrapper entirely and render legacy's `#content > .row-fluid > .col-* >
   table.LayoutTable` contract inside PsLegacyLandingLayout's chrome, exactly as
   SecurityQuestion.aspx / AuthenticationWorkflowSelection.aspx / LanguageSelect.aspx
   do. That is architectural rule A: a legacy hook must never reach MODERN, and
   equally a MODERN-only decoration must never reach the legacy contract.
   ============================================================ */
.aims-landing-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #14497d 0%, #0081c6 100%);
    /* The document cannot scroll (html/body are overflow:hidden so .ps-content-area can be the
       app's scroller), so the landing shell must scroll ITSELF. Without this, any card taller
       than the viewport — a branded login with an HTML notice, the 12-method picker — has its
       bottom (terms text, Cancel/Re-enroll) unreachable on laptop screens. */
    overflow-y: auto;
}

/* The centring band between the shell and the card — the second inline style on
   PsSecurityQuestion / PsAuthSelection. */
.aims-landing-shell-body {
    /* flex-basis AUTO, not 0: the band must GROW with its card so the shell's scroll range
       includes all of it. With basis 0 the band is pinned to the leftover viewport share and a
       taller card just overflows it invisibly — align-items:center then clips the card's top
       AND bottom with no way to scroll to either. */
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* PsLanguageSelect's variant: the locale list can outgrow the viewport, so it
   starts at the top and the page scrolls, rather than centring vertically. */
.aims-landing-shell-scroll {
    min-height: 100vh;
    background: linear-gradient(135deg, #14497d 0%, #0081c6 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
}

/* CLASSIC PsLanguageSelect: legacy's click target was the per-row ImageButton;
   the Blazor row is clickable as a whole, so hint it. Scoped to the legacy root
   so MODERN is untouched, and kept here rather than inline precisely so a
   customer rule can override it. */
.aims-legacy-chrome #DataGrid1 tr {
    cursor: pointer;
}

@media (max-width: 720px) {
    /* MODERN only — see the note on the unprefixed rule above. */
    .ps-layout-container:not(.aims-legacy-chrome) .button-split-2 {
        grid-template-columns: 1fr;
    }

    .aims-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo signout"
            "info info";
        align-items: start;
        gap: 8px 12px;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 12px;
    }

    .aims-header > a {
        grid-area: logo;
        min-width: 0;
        display: flex;
        align-items: center;
    }

    .aims-header .aims-logo {
        margin-left: 0;
        width: min(220px, calc(100vw - 120px));
        height: 46px;
        background-size: contain;
        background-position: left center;
    }

    .aims-header .aims-header-info {
        grid-area: info;
        position: static;
        text-align: left;
        font-size: 13px;
        line-height: 1.35;
        min-width: 0;
    }

    .aims-header .aims-header-info span {
        font-size: 13px;
        line-height: 1.35;
        word-break: break-word;
    }

    .aims-header .aims-signout-area {
        grid-area: signout;
        position: static;
        width: 56px;
        min-width: 56px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-self: end;
        font-size: 11px;
        line-height: 1.2;
    }

    .aims-header .aims-signout-text {
        font-size: 11px;
        margin-top: 2px;
    }

    .aims-header .aims-twisted-logo {
        display: none;
    }

    /* The mobile header is grid-based (info/signout areas); the absolute-positioned
       Home/Risk buttons have no grid slot — hide them like legacy hides .riskArea. */
    .aims-header .aims-home-area,
    .aims-header .aims-risk-area {
        display: none;
    }

    .aims-header.has-home .aims-header-info,
    .aims-header.has-home.has-risk .aims-header-info {
        right: auto;
    }

    .ps-page-container {
        height: auto;
        min-height: 100vh;
    }

    .aims-footer {
        height: auto;
        min-height: 0;
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    .aims-footer-left,
    .aims-footer-center,
    .aims-footer-right {
        flex: 1 1 100%;
    }

    .aims-footer-center,
    .aims-footer-right {
        justify-content: flex-start;
        text-align: left;
    }

    .aims-footer-right img {
        height: 22px;
    }
}

/* ============================================================
   DASHBOARD — product icon grid (matches Default2017.aspx)
   ============================================================ */
.aims-dashboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.aims-product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    background-color: #F0F0F0;
    border: 2px solid #C0C0F0;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    text-decoration: none;
    color: var(--aims-text-primary);
}

.aims-product-card:hover {
    background-color: #E8E8FF;
    border-color: #C0C0FF;
}

.aims-product-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 8px;
}

.aims-product-card .aims-product-name {
    font-family: var(--aims-font-family);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: var(--aims-text-primary);
}

/* ============================================================
   CONFIG PAGES — form styling matching original
   ============================================================ */

/* Section headers matching .section1, .section2 */
.aims-section-header {
    padding-left: 5px;
    font-weight: bold;
    font-size: 11px;
    color: black;
    font-family: var(--aims-font-family-content);
    background-color: var(--aims-section-bg);
    padding: 4px 5px;
    margin: 8px 0 4px 0;
}

/* Grid styling */
.mud-table .mud-table-head .mud-table-cell {
    background-color: var(--aims-grid-header-bg);
    color: black;
    font-weight: bold;
    font-size: 11px;
    font-family: var(--aims-font-family-content);
    border: 1px solid var(--aims-border-light);
    padding: 4px 8px;
}

.mud-table .mud-table-body .mud-table-row:hover {
    background-color: var(--aims-grid-hover);
}

.mud-table .mud-table-body .mud-table-cell {
    font-size: 11px;
    font-family: var(--aims-font-family-content);
    padding: 4px 8px;
    border: 1px solid #EEEEEE;
}

/* Form controls */
.aims-form .mud-input-control {
    margin-bottom: 8px;
}

.aims-form .mud-input {
    font-size: 11px;
    font-family: var(--aims-font-family-content);
}

/* ============================================================
   MUDBLAZOR OVERLAY-INPUT DEFENSE AGAINST CUSTOMER BRANDING CSS
   The customer stylesheet (/branding/css/global, loaded LAST on
   every surface) commonly styles bare input[type=radio]/[type=checkbox]
   at (0,1,1), out-specifying MudBlazor's .mud-*-input (0,1,0). Any
   margin/size/position it sets pushes the invisible overlay input
   outside its overflow-hidden 32px icon button; clicking then focuses
   the input and the browser auto-scrolls the button to reveal it,
   shifting the radio/checkbox icon up-left and clipping it. Re-assert
   the full overlay geometry with !important so no legacy-shaped
   customer rule can reach inside a MudBlazor control.
   ============================================================ */
input.mud-radio-input,
input.mud-checkbox-input,
input.mud-switch-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

/* ============================================================
   COMPACT CONFIG PAGE CONTROLS
   Makes checkboxes, text fields, and buttons denser to match
   the tight ASPX table layout (cellpadding=4, font-size 11px).
   ============================================================ */

/* --- Checkboxes: remove excessive vertical padding --- */
.aims-content-body .mud-input-control-boolean-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.aims-content-body .mud-checkbox {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.aims-content-body .mud-checkbox .mud-typography {
    font-size: 12px;
    font-family: var(--aims-font-family-content);
}

.aims-content-body .mud-checkbox .mud-button-root {
    padding: 4px !important;
}

/* --- Text fields: reduce height and font size --- */
.aims-content-body .mud-input-control {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.aims-content-body .mud-input {
    font-size: 12px !important;
    font-family: var(--aims-font-family-content);
}

.aims-content-body .mud-input-outlined .mud-input-slot {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.aims-content-body .mud-input-label {
    font-size: 12px !important;
    font-family: var(--aims-font-family-content);
}

.aims-content-body .mud-input-helper-text {
    font-size: 10px !important;
}

/* ============================================================
   MINIMUM VERTICAL FIELD SPACING
   An outlined field's floating label protrudes ~9px above its
   border, so without breathing room it touches the field above.
   Enforce a floor between vertically stacked labeled controls.
   Horizontal groups (flex-row), toolbars and table cells are
   excluded so their cross-axis alignment is untouched. The
   second block re-asserts the floor inside .aims-content-body,
   whose compact rules below squash margins with !important.
   ============================================================ */
* + .mud-input-control:not(.mud-input-control-boolean-input),
* + :is(.mud-select, .mud-autocomplete, .mud-picker) > .mud-input-control:first-child {
    margin-top: 16px;
}

:is(.d-flex:not(.flex-column), .mud-toolbar, th, td, .mud-table-cell) > * + .mud-input-control,
:is(.d-flex:not(.flex-column), .mud-toolbar, th, td, .mud-table-cell) > * + :is(.mud-select, .mud-autocomplete, .mud-picker) > .mud-input-control:first-child {
    margin-top: 0;
}

.aims-content-body * + .mud-input-control:not(.mud-input-control-boolean-input),
.aims-content-body * + :is(.mud-select, .mud-autocomplete, .mud-picker) > .mud-input-control:first-child {
    margin-top: 16px !important;
}

.aims-content-body :is(.d-flex:not(.flex-column), .mud-toolbar, th, td, .mud-table-cell) > * + .mud-input-control,
.aims-content-body :is(.d-flex:not(.flex-column), .mud-toolbar, th, td, .mud-table-cell) > * + :is(.mud-select, .mud-autocomplete, .mud-picker) > .mud-input-control:first-child {
    margin-top: 4px !important;
}

/* --- Outlined text fields: reduce overall height (single-line only) --- */
.aims-content-body .mud-input-outlined .mud-input-root:not(textarea) {
    min-height: 36px !important;
    box-sizing: border-box !important;
}

.aims-content-body .mud-input-outlined .mud-input-root input,
.aims-content-body .mud-input-outlined input.mud-input-root {
    padding: 6px 12px !important;
    font-size: 12px !important;
}

/* Textarea (Lines > 1): ensure text is readable and properly sized */
.aims-content-body .mud-input-outlined textarea.mud-input-root {
    padding: 18px 12px 8px 12px !important;
    font-size: 13px !important;
    color: #212121 !important;
    -webkit-text-fill-color: #212121 !important;
    min-height: unset !important;
    height: auto !important;
    resize: vertical;
}

/* --- Outlined fields: vertically center the label when field is empty --- */
/* GLOBAL fix — applies to all layouts (Config, Reports, etc.) to prevent
   placeholder/value overlap on MudSelect and MudTextField outlined variants */
.aims-app-container .mud-input-control-input-container {
    position: relative;
}

.aims-app-container .mud-input-label-outlined {
    top: 50% !important;
    transform: translate(14px, -50%) scale(1) !important;
}

/* Preserve the shrunk (filled/focused) label position above the border */
.aims-app-container .mud-shrink ~ label.mud-input-label-outlined,
.aims-app-container .mud-input:focus-within ~ label.mud-input-label-outlined {
    top: 0 !important;
    transform: translate(14px, -6px) scale(0.75) !important;
}

/* MudSelect: ALWAYS shrink the label above the border.
   Selects always display text (either a selected value or a default item like "All Domains"),
   so the label must always float above to avoid overlapping the displayed text.
   .mud-select is on the ancestor .mud-input-control div, so use descendant selector. */
.aims-app-container .mud-select label.mud-input-label-outlined {
    top: 0 !important;
    transform: translate(14px, -6px) scale(0.75) !important;
}

/* MudSelect: force the border notch open (matches .mud-shrink legend behavior).
   Without this, the label sits on top of the unbroken border line. */
.aims-app-container .mud-select .mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    width: auto !important;
    padding: 0 2px 0 5px !important;
}

/* Tighten the outlined field label notch — reduce the gap between label text
   and where the top border resumes on the right side */
.aims-app-container .mud-input.mud-input-outlined.mud-shrink > .mud-input-outlined-border legend,
.aims-app-container .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border legend {
    padding: 0 2px 0 5px !important;
}

/* Select dropdown arrow: equal spacing from all borders */
.aims-app-container .mud-input-outlined .mud-input-adornment-end {
    padding-right: 4px !important;
    padding-left: 4px !important;
}

/* Consistent filter control heights — date pickers, selects, text fields all match (exclude textareas) */
.aims-app-container .mud-input-control .mud-input-outlined .mud-input-slot:not(textarea) {
    height: 40px !important;
    box-sizing: border-box !important;
}

/* --- Buttons: match text field height for side-by-side alignment --- */
.aims-content-body .mud-button-root {
    font-size: 12px !important;
    font-family: var(--aims-font-family-content);
    text-transform: none !important;
}

.aims-content-body .mud-button-outlined,
.aims-content-body .mud-button-filled {
    min-height: 36px !important;
    padding: 4px 16px !important;
}

/* --- MudGrid: tighter item spacing --- */
.aims-content-body .mud-grid {
    margin-top: -4px !important;
    margin-bottom: -4px !important;
}

.aims-content-body .mud-grid-item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* --- Section headers (h5): reduce bottom margin --- */
.aims-content-body .mud-typography-h5 {
    font-size: 15px !important;
    margin-bottom: 4px !important;
}

/* --- MudPaper sections: reduce padding --- */
.aims-content-body .mud-paper {
    padding: 12px 16px !important;
    margin-top: 8px !important;
}

/* --- Select/dropdown: match text field density & vertically center text --- */
/* GLOBAL fix — prevents placeholder/value overlap on all MudSelect components */
.aims-app-container .mud-select .mud-input-root {
    min-height: 36px !important;
    font-size: 12px !important;
}

.aims-app-container .mud-select .mud-input.mud-select-input {
    min-height: 36px !important;
    height: 36px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
}

/* Select with dropdown arrow: reduce right padding so arrow sits closer to border */
.aims-app-container .mud-select .mud-input-adorned-end.mud-select-input {
    padding-right: 2px !important;
}

/* Select value text: vertically center within the field */
.aims-app-container .mud-select .mud-input.mud-select-input > div.mud-input-slot {
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100% !important;
}

/* --- Radio groups: compact (match checkbox density) --- */
.aims-content-body .mud-radio {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.aims-content-body .mud-radio .mud-icon-button {
    padding: 4px !important;
}

.aims-content-body .mud-radio .mud-typography {
    font-size: 12px;
}

/* --- Data grids within config: tighter cells --- */
.aims-content-body .mud-table-cell {
    padding: 4px 8px !important;
    font-size: 12px !important;
}

.aims-content-body .mud-table-head .mud-table-cell {
    padding: 6px 8px !important;
    font-size: 11px !important;
    font-weight: bold;
}

/* MudDataGrid: hide filter/options icons, show sort arrow only when sorted */
.mud-data-grid .mud-table-root {
    table-layout: fixed;
}

/* IA report page: blue headers matching ASPX */
.ia-report .mud-table .mud-table-head .mud-table-cell {
    background-color: #4F81BD;
    color: white;
    border-color: white;
}

.ia-report .mud-simple-table thead th {
    background-color: #4F81BD;
    color: white;
    border: 1px solid white;
}

/* IA report page: alternating row colors */
.ia-report .mud-table .mud-table-body .mud-table-row:nth-child(even) {
    background-color: #F2F2F2;
}

.ia-report .mud-table .mud-table-body .mud-table-row:nth-child(odd) {
    background-color: white;
}

.mud-data-grid .mud-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

.mud-data-grid .column-options .mud-menu {
    display: none !important;
}

.mud-data-grid .column-options .mud-sort-index {
    display: none !important;
}

.mud-data-grid .sort-direction-icon {
    opacity: 0 !important;
    margin: 0 !important;
    padding: 2px !important;
}

.mud-data-grid .sort-direction-icon:has(~ .mud-sort-index:not(.invisible)) {
    opacity: 1 !important;
}

.ia-report .mud-data-grid .sort-direction-icon svg {
    fill: white;
}

/* --- Subtitle text: compact --- */
.aims-content-body .mud-typography-subtitle1 {
    font-size: 13px !important;
}

.aims-content-body .mud-typography-body2 {
    font-size: 11px !important;
}

/* Feedback panel */
.aims-feedback {
    margin-bottom: 8px;
}

/* Save toolbar */

/* ============================================================
   PRINT STYLES — IA Reports
   ============================================================ */
@media print {
    /* Hide page chrome */
    .aims-header,
    .aims-nav-sidebar,
    .ia-nav-sidebar,
    .ia-export-toolbar,
    .aims-content-titlebar,
    .aims-content-toolbar {
        display: none !important;
    }

    /* Content area takes full width */
    .aims-body {
        display: block !important;
    }

    .aims-content-area,
    .ps-content-area {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* IA report layout: override flex to show content only */
    .ia-report {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .ia-report > div:not(.ia-nav-sidebar) {
        overflow: visible !important;
        height: auto !important;
    }

    /* Keep table header colors in print */
    .ia-report .mud-table .mud-table-head .mud-table-cell {
        background-color: #4F81BD !important;
        color: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ia-report .mud-simple-table thead th {
        background-color: #4F81BD !important;
        color: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Alternating rows */
    .ia-report .mud-table .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell {
        background-color: #DCE6F1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ia-report .mud-table .mud-table-body .mud-table-row:nth-child(odd) .mud-table-cell {
        background-color: white !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Avoid page breaks inside rows */
    .ia-report .mud-table-row {
        page-break-inside: avoid;
    }

    /* Show report title */
    .ia-report {
        padding: 0 !important;
    }
}

/* ============================================================
   MODULE-SPECIFIC HEADER COLORS
   ============================================================ */
.aims-header.module-global { background-color: var(--aims-color-global); }
.aims-header.module-ac { background-color: var(--aims-color-ac); }
.aims-header.module-at { background-color: var(--aims-color-at); }
.aims-header.module-ca { background-color: var(--aims-color-ca); }
.aims-header.module-ge { background-color: var(--aims-color-ge); }
.aims-header.module-gr { background-color: var(--aims-color-gr); }
.aims-header.module-ia { background-color: var(--aims-color-ia); }
.aims-header.module-ie { background-color: var(--aims-color-ie); }
.aims-header.module-sm { background-color: var(--aims-color-ie); }
.aims-header.module-approver { background-color: var(--aims-color-ie); }
.aims-header.module-wfadmin { background-color: var(--aims-color-ie); }
.aims-header.module-pb { background-color: var(--aims-color-pb); }
.aims-header.module-sso { background-color: var(--aims-color-sso); }
.aims-header.module-ps { background-color: var(--aims-color-ps); }
.aims-header.module-reports { background-color: var(--aims-color-reports); }

/* Module-specific twisted logos */
.aims-header.module-ac .aims-twisted-logo { background-image: url('../img/twisted-ac.png'); }
.aims-header.module-at .aims-twisted-logo { background-image: url('../img/twisted-AT.png'); }
.aims-header.module-ca .aims-twisted-logo { background-image: url('../img/Twisted-CA.png'); }
.aims-header.module-ge .aims-twisted-logo { background-image: url('../img/Twisted-GE.png'); }
.aims-header.module-gr .aims-twisted-logo { background-image: url('../img/Twisted-GR.png'); }
.aims-header.module-ia .aims-twisted-logo { background-image: url('../img/Twisted-IA.png'); }
.aims-header.module-ie .aims-twisted-logo { background-image: url('../img/Twisted-IE.png'); }
.aims-header.module-sm .aims-twisted-logo { background-image: url('../img/Twisted-IE.png'); }
.aims-header.module-approver .aims-twisted-logo { background-image: url('../img/Twisted-IE.png'); }
.aims-header.module-wfadmin .aims-twisted-logo { background-image: url('../img/Twisted-IE.png'); }

/* Product-specific header logos (matching ASPX) */
/* Access Governance (CA) — white UUI wordmark, recolored via mask (currentColor -> white).
   Was Header-AL.png ("Avatier Audit Log"), which is a different product. */
.aims-header.module-ca .aims-logo {
    background-image: none;
    background-color: #fff;
    -webkit-mask: url('../img/logos/ag-logo.svg') no-repeat left center;
    mask: url('../img/logos/ag-logo.svg') no-repeat left center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 420px;
}
/* Lifecycle Management (IE) — white UUI wordmark, recolored via mask (currentColor -> white) */
.aims-header.module-ie .aims-logo {
    background-image: none;
    background-color: #fff;
    -webkit-mask: url('../img/logos/lifecycle-management-logo.svg') no-repeat left center;
    mask: url('../img/logos/lifecycle-management-logo.svg') no-repeat left center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 420px;
}
.aims-header.module-sm .aims-logo { background-image: url('../img/Header-SM.png'); width: 340px; }
.aims-header.module-approver .aims-logo { background-image: url('../img/workflow-approver-60x.png'); width: 340px; }
.aims-header.module-wfadmin .aims-logo { background-image: url('../img/header-workflow-admin.png'); width: 340px; }
/* Account Terminator (AT) — plain white product wordmark (icon + name).
   Was header-LM.png ("Lifecycle Management"), which is a different product. */
.aims-header.module-at .aims-logo { background-image: url('../img/Header-AT.png'); width: 360px; }
/* Account Creator (AC) — plain white product wordmark (icon + name), same treatment as Account Terminator. */
.aims-header.module-ac .aims-logo { background-image: url('../img/Header-AC.png'); width: 262px; }
/* Password Bouncer (PB) — plain white product wordmark (icon + name). */
.aims-header.module-pb .aims-logo { background-image: url('../img/Header-PB.png'); width: 275px; }
/* Single Sign-On (SSO) — white UUI wordmark, recolored via mask (currentColor -> white). */
.aims-header.module-sso .aims-logo {
    background-image: none;
    background-color: #fff;
    -webkit-mask: url('../img/logos/sso-logo.svg') no-repeat left center;
    mask: url('../img/logos/sso-logo.svg') no-repeat left center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 420px;
}
.aims-header.module-ge .aims-logo { background-image: url('../img/Header-GE.png'); width: 340px; }
/* Group Management (GR) — white UUI wordmark, recolored via mask (currentColor -> white) */
.aims-header.module-gr .aims-logo {
    background-image: none;
    background-color: #fff;
    -webkit-mask: url('../img/logos/gm-logo.svg') no-repeat left center;
    mask: url('../img/logos/gm-logo.svg') no-repeat left center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 420px;
}
.aims-header.module-ia .aims-logo { background-image: url('../img/Header-IA.png'); width: 340px; }
/* Audit Log (lives under Global) — legacy rendered this page with its own
   "Avatier Audit Log" wordmark (top-header.AL), not the generic Avatier suite logo. */
.aims-header.header-audit-log .aims-logo { background-image: url('../img/Header-AL.png'); width: 290px; }
.aims-header.header-audit-log .aims-twisted-logo { background-image: url('../img/Twisted-AL.png'); }
.aims-header.module-pb .aims-twisted-logo { background-image: url('../img/Twisted-PB.png'); }
.aims-header.module-sso .aims-twisted-logo { background-image: url('../img/Twisted-SSO.png'); }
.aims-header.module-ps .aims-twisted-logo { background-image: url('../img/Twisted-PS.png'); }
.aims-header.module-reports .aims-twisted-logo { background-image: url('../img/Twisted-Reports.png'); }

/* ============================================================
   MudBlazor overrides for AIMS look
   ============================================================ */

/* Remove MudBlazor default elevation/shadows where not needed */
.aims-nav-sidebar .mud-paper {
    box-shadow: none;
}

/* MudBlazor v8 dialog fix: the overlay scrim inside .mud-dialog-container
   has z-index 1401 while the dialog content sits below it, which causes the
   dark backdrop to intercept all pointer events (clicks, typing, etc.).
   Fix: let clicks pass through the overlay scrim to the dialog beneath it. */
.mud-dialog-container .mud-overlay-scrim {
    pointer-events: none;
}

/* ============================================================
   PS MODULE — Logo override
   ============================================================ */
/* Password Management (PS) — white UUI wordmark, recolored via mask (currentColor -> white) */
.aims-header.module-ps .aims-logo {
    background-image: none;
    background-color: #fff;
    -webkit-mask: url('../img/logos/pm-logo.svg') no-repeat left center;
    mask: url('../img/logos/pm-logo.svg') no-repeat left center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 420px;
}

/* Password Management enrollment shell uses the same white PM wordmark. */
.aims-header.module-ps-enrollment .aims-logo {
    background-image: none;
    background-color: #fff;
    -webkit-mask: url('../img/logos/pm-logo.svg') no-repeat left center;
    mask: url('../img/logos/pm-logo.svg') no-repeat left center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 420px;
}

.aims-header.module-ps-enrollment .aims-header-info {
    display: none;
}

/* ============================================================
   PS MAIN PAGE — Tile Grid (matches Main.aspx inline styles)
   ============================================================ */
.MainIcons { text-align: center; padding: 20px 0; }
.MainItem {
    display: inline-block;
    margin-top: 15px;
    margin-right: 10px;
    width: 372px;
    height: auto;
    vertical-align: top;
    overflow: hidden;
    cursor: pointer;
}
.MainImageAndLabel { width: 159px; float: left; }
.MainImage { display: block; margin: auto; margin-top: -7px; }
.MainLabel { display: block; margin: auto; margin-top: -6px; text-align: center; }
.MainDesc { float: left; width: 198px; margin-left: 15px; font-size: 12px; font-family: var(--aims-font-family-content); color: #555; }

.MainImageAndLabel a {
    font-weight: bold;
    color: #222222;
    font-size: 16px;
    text-decoration: none;
}
.MainImageAndLabel:hover a {
    color: #888;
    text-decoration: none;
}

/* Main.aspx:78 lists BOTH img and input in the focus-outline reset, because four of
   the legacy tiles are asp:ImageButton (rendered <input type="image" class="MainImage">).
   The port had dropped the input selectors. */
.MainIcons img:focus, .MainIcons img:active,
.MainIcons input:focus, .MainIcons input:active,
.MainIcons div:focus, .MainIcons div:active,
.MainIcons a:focus, .MainIcons a:active { outline-width: 0; }

/* AT Actions tiles (AcctTermActions.aspx page styles): image+label only, no
   description column, so the tile shrinks to the 200px image/label block. */
.at-actions .MainItem { width: auto; height: 150px; }
.at-actions .MainImageAndLabel { width: 200px; }

/* MODERN HOVER AFFORDANCE — icon glow swap. The rules are inert unless a
   `tile-icon-glow` element exists, and PsMain.razor emits that second <img> in MODERN
   only, so Modern keeps the icon-swap-on-hover it has always had.

   Customer branding CSS is served in BOTH appearances, and a migrating sheet carrying
   `.MainImage { display: table !important }` renders BOTH icons — the duplicated-icon
   defect, observed live against CVS's production sheet. It has to be defeated twice,
   because the swap hides a different element in each direction:

     at rest  — the glow <img> deliberately does NOT carry `.MainImage`, which puts it
                out of that selector's reach entirely. The two declarations the class
                would have contributed are identical to the ones the :hover rule below
                already sets, so dropping it costs nothing.
     on hover — the default <img> MUST keep `.MainImage` (it is the legacy hook a
                customer sizes their tile icons with), so it can only be hidden by
                out-ranking them: between two `!important` declarations specificity
                decides, and (0,3,0) beats `.MainImage`'s (0,1,0).

   CLASSIC omits the glow element outright, because legacy has no image swap at all. */
.MainItem .tile-icon-glow { display: none; }
.MainItem:hover .tile-icon-default { display: none !important; }
.MainItem:hover .tile-icon-glow { display: block; margin: auto; margin-top: -7px; }

/* CLASSIC HOVER AFFORDANCE — legacy has NO image swap on any of these pages.
   PS/Main.aspx:88-92 recolours the LABEL TEXT only (the `.MainImageAndLabel:hover a`
   rule above); HelpDesk/hdActions.aspx:169-173 and AT/AcctTermActions.aspx:118-123
   instead fade the whole image+label block and explicitly comment the colour change
   OUT.

   Scoped under `:where(.aims-legacy-chrome)` — the root class PSLayout/ModuleLayout
   emit only in Classic — because this fade is a LEGACY behaviour: Modern has never had
   it on /helpdesk or /at and must not gain one. `:where()` contributes no specificity,
   so the selector still weighs exactly what `.at-actions .MainImageAndLabel:hover`
   weighs and a customer sheet overrides it as easily as before. */
:where(.aims-legacy-chrome) .at-actions .MainImageAndLabel:hover,
:where(.aims-legacy-chrome) .hd-actions .MainImageAndLabel:hover {
    opacity: 0.75;
    text-decoration: none;
}

/* Responsive breakpoints (from Main.aspx) */
@media (max-width: 767px) {
    .MainItem { margin: 15px 12px; height: auto; width: auto; min-width: auto; max-width: auto; }

    /* CASCADE HYGIENE — this used to read `display: none !important`, an UNSCOPED product
       `!important` on a LEGACY class name. Nothing in the current customer sheet mentions
       `.MainDesc`, so it changed no pixel today, but it out-ranked any customer rule they
       might ever write for that element — the one thing our sheets are not allowed to do.

       Legacy does not hide the description with CSS at all. PS/Main.aspx's own <style>
       (:70-130) has no `.MainDesc` display rule in ANY breakpoint; the tiles hide it through
       MARKUP — `<div class="MainDesc hidden-xs hidden-ms">` at PS/Main.aspx:287, and again at
       :302, :317, :334, :347, :362, :376, :389, :402, :421, :433, :445, :457 — with
       stylesheets/bootstrap-ms.css:5589-5591 (`.hidden-xs`, max-width 639px) and :5672-5674
       (`.hidden-ms`, 640-767px) covering 0-767px between them. CLASSIC now carries those two
       utility classes on the tile (PsMain.razor `_tileDescClass`), so
       `:where(.aims-legacy-chrome) .hidden-xs` / `.hidden-ms` in aims-legacy-chrome.css:478-488
       hide it there, exactly as legacy does — verified live at 400/639/640/767/768px with this
       rule deleted outright.

       The declaration stays, minus the `!important`, for the surfaces whose markup does NOT
       carry the utility classes and which therefore still depend on it: the MODERN PS tiles
       (unchanged by design) and the HelpDesk action tiles (HelpDeskActions.razor:255-418) in
       BOTH appearances. Deleting it outright turns `.MainDesc` back to `display: block` below
       768px on all of them — also verified live. At plain `.MainDesc` weight (0,1,0) with no
       `!important`, and linked before /branding/css/global, a customer rule of equal weight
       now wins on source order, which is the whole point. */
    .MainDesc { display: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .MainItem { margin-top: 24px; margin-right: 12px; width: auto; }
    .MainImageAndLabel { width: 105px; }
    .MainDesc { margin-left: 0; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .MainItem { margin-top: 24px; margin-right: 52px; }
}

/* ============================================================
   PS MAIN PAGE — License-warning banner (matches Main.aspx inline styles)
   Ported from PS/Main.aspx <style> .license-warning-* rules. The tile-grid
   port above dropped these, so the expiry / per-use-cap / seat-cap banner
   rendered as bare unstyled text. The red/bold/medium label color came from
   the legacy LabelExpires ASP.NET attributes (ForeColor=Red Font-Bold
   Font-Size=Medium), folded into the label rule here.
   ============================================================ */
.license-warning-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #e0a3a3;
    background-color: #fdeaea;
    border-radius: 4px;
    box-sizing: border-box;
}

.license-warning-banner > span,
.license-warning-label {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 23px;
    margin: 0;
    line-height: 1.4;
    white-space: normal;
    color: red;
    font-weight: bold;
    font-size: medium;
}

.license-warning-close {
    background: transparent;
    border: 0;
    color: #a94442;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    margin: 0;
    min-width: 24px;
}

.license-warning-close:hover,
.license-warning-close:focus {
    color: #843534;
}

/* ============================================================
   PS LAYOUT — Full-page layout without admin sidebar
   ============================================================ */
.ps-page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.ps-content-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* MudGrid gutters use negative margins that would otherwise scroll */
    padding: 0 16px;
    background-color: #fff;
}

.ps-sub-header {
    background-color: #038a41;
    color: white;
    font-size: 12px;
    padding: 4px 15px;
    font-family: var(--aims-font-family-content);
}

.ps-sub-header span {
    margin-right: 20px;
}

/* ============================================================
   Navigation Loader — Avatier branded spinner with backdrop
   Matches UUI (ionic-mobile-app) lds-spinner animation
   ============================================================ */
.aims-nav-loader-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(1px);
    /* Defense-in-depth: never block Sign Out / nav clicks even if Visible got stuck.
       Inner spinner re-enables pointer events for clickable children. */
    pointer-events: none;
    /* Always mounted; AIMSNavigationLoader toggles .visible. The short show delay
       keeps near-instant navigations from flashing the overlay, and the fade-out
       lets content appear under it instead of popping. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-out, visibility 0s linear 0.15s;
}

.aims-nav-loader-backdrop.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease-in 0.1s, visibility 0s linear 0.1s;
}

.aims-nav-loader-backdrop * {
    pointer-events: auto;
}

/* ============================================================
   Static boot loader (App.razor #aims-boot-loader)
   ============================================================
   Painted from the first HTML byte on every full page load —
   prerender is off, so the body would otherwise be blank white
   until the SignalR circuit connects and renders. Deliberately
   uses NO aims-/mud- class prefixes: js/boot-loader.js treats
   those as the "app content rendered" dismissal signal. */
#aims-boot-loader {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-out;
}

#aims-boot-loader.boot-loader-hide {
    opacity: 0;
    pointer-events: none;
}

.lds-spinner {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

/* Avatier "A" logo in the center — uses CSS mask on the SVG */
.lds-spinner .avatier-loader-a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    background-color: #0082C8;
    -webkit-mask: url('../img/A-Avatier.svg') no-repeat center;
    mask: url('../img/A-Avatier.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    animation: lds-spinner-fade 1.2s linear infinite;
}

/* The 12 rotating bars */
.lds-spinner > div:not(section) {
    transform-origin: 40px 40px;
    animation: lds-spinner-fade 0.6s linear infinite;
}

.lds-spinner > div:not(section):after {
    content: '';
    display: block;
    position: absolute;
    top: -6px;
    left: 37px;
    width: 5px;
    height: 12px;
    border-radius: 20%;
    background: #0082C8;
}

.lds-spinner > div:nth-child(1)  { transform: rotate(0deg);   animation-delay: -0.55s; }
.lds-spinner > div:nth-child(2)  { transform: rotate(30deg);  animation-delay: -0.50s; }
.lds-spinner > div:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.45s; }
.lds-spinner > div:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.40s; }
.lds-spinner > div:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.35s; }
.lds-spinner > div:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.30s; }
.lds-spinner > div:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.25s; }
.lds-spinner > div:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.20s; }
.lds-spinner > div:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.15s; }
.lds-spinner > div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.10s; }
.lds-spinner > div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.05s; }
.lds-spinner > div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }

@keyframes lds-spinner-fade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ============================================================
   Blazor circuit reconnection — framework DEFAULT overlay
   ============================================================
   blazor.web.js injects the default UI as a body-level
   #components-reconnect-modal host div with all content in its
   shadow root. We keep the default UI but hold its reveal back
   10 s so transient blips paint nothing; opacity/visibility/
   pointer-events on the host cascade into the shadow tree, so
   the page stays clickable during the hidden window (the
   companion js/reconnect-grace.js queues those clicks and
   replays them once the circuit reconnects). The animation
   starts when the host is (re)inserted on a drop; recovery
   removes the host, so a drop shorter than the delay never
   shows anything. Nothing else may target this id except the
   :not() exclusions in the AIMS-4018 rule below, which keep the
   sr-only treatment from hiding it. */
#components-reconnect-modal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: aims-reconnect-grace-reveal 0.4s ease-in-out 10s forwards;
}

@keyframes aims-reconnect-grace-reveal {
    from { opacity: 0; visibility: visible; pointer-events: auto; }
    to   { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* Busy affordance while a click is queued during the hidden window
   (js/reconnect-grace.js toggles the class). */
html.aims-reconnect-busy,
html.aims-reconnect-busy * {
    cursor: progress !important;
}

/* ============================================================
   Snackbar countdown progress bar
   MudBlazor 8.x does NOT render its own progress sliver, so we draw
   one ourselves via a ::after pseudo-element on .mud-snackbar that
   shrinks from full width down to zero over VisibleStateDuration.
   Duration is set by ConfigPageBase.SetFeedback (5s success/info,
   8s error) — values hard-coded here to match.
   ============================================================ */
.mud-snackbar {
    position: relative;
    overflow: hidden;
}
.mud-snackbar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    transform-origin: left center;
    animation: aims-snackbar-countdown 5s linear forwards;
    pointer-events: none;
}
.mud-snackbar.mud-alert-filled-error::after,
.mud-snackbar.mud-alert-filled-warning::after {
    animation-duration: 8s;
}
@keyframes aims-snackbar-countdown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Shift top-center snackbars below the green AIMS header so they land on the
   blue SAVE/REFRESH toolbar rather than overlapping the header text. */
.mud-snackbar-location-top-center {
    top: var(--aims-header-height) !important;
}

/* ============================================================
   AIMS-4018: Hide stray screen-reader / Blazor-internal aria-live
   announcer regions that were rendering visibly on /ps/main as a
   raw encrypted token string. The .NET 10 Blazor runtime and
   MudBlazor's MudSnackbarProvider both inject body-level
   <div role="status"> / aria-live announcer nodes for accessibility;
   these are supposed to be visually hidden (screen-reader only) but
   on a few customer themes they were rendering as plain text at the
   top of the page. Force the visually-hidden / sr-only treatment so
   the announcement still reaches assistive tech but never paints
   to the screen. The framework's default reconnect overlay
   (#components-reconnect-modal, injected by blazor.web.js) must
   stay visible, so it is excluded with :not(#components-reconnect-modal).
   ============================================================ */
body > div[role="status"]:not(#components-reconnect-modal),
body > div[aria-live]:not(#components-reconnect-modal),
.mud-snackbar-provider > [role="status"],
.mud-snackbar-provider > [aria-live],
mud-snackbar-provider [role="status"][aria-live="polite"] {
    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;
}

/* --- Audit Log grid: horizontal scroll inside the table, no outer page scroll --- */
.audit-log-grid .mud-table-container {
    overflow: auto !important;
}
.audit-log-grid table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}
.audit-log-grid td.audit-desc-td,
.audit-log-grid .mud-table-cell.audit-desc-td {
    white-space: normal !important;
    line-height: 1.4;
    vertical-align: top;
}
.audit-desc-cell {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

/* --- Global Delegation grid: sticky first 4 columns (Delete, Type, Domain, Name) --- */
.delegation-grid-sticky-cols .mud-table-container {
    overflow-x: auto;
    max-width: 100%;
}
.delegation-grid-sticky-cols table {
    table-layout: fixed;
    min-width: 2800px;
}
/* Fixed widths for the first 4 frozen columns */
.delegation-grid-sticky-cols th:nth-child(1),
.delegation-grid-sticky-cols td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
    width: 60px;
    min-width: 60px;
}
.delegation-grid-sticky-cols th:nth-child(2),
.delegation-grid-sticky-cols td:nth-child(2) {
    position: sticky;
    left: 60px;
    z-index: 2;
    background: inherit;
    width: 60px;
    min-width: 60px;
}
.delegation-grid-sticky-cols th:nth-child(3),
.delegation-grid-sticky-cols td:nth-child(3) {
    position: sticky;
    left: 120px;
    z-index: 2;
    background: inherit;
    width: 110px;
    min-width: 110px;
}
.delegation-grid-sticky-cols th:nth-child(4),
.delegation-grid-sticky-cols td:nth-child(4) {
    position: sticky;
    left: 230px;
    z-index: 2;
    background: inherit;
    width: 130px;
    min-width: 130px;
}
/* Numbered checkbox columns — compact */
.delegation-grid-sticky-cols th:nth-child(n+5),
.delegation-grid-sticky-cols td:nth-child(n+5) {
    width: 44px;
    min-width: 44px;
    text-align: center;
}
/* Ensure header sticky columns sit above body cells during vertical scroll */
.delegation-grid-sticky-cols th:nth-child(-n+4) {
    z-index: 3;
}
/* Prevent background bleed-through on striped/hover rows */
.delegation-grid-sticky-cols tr:nth-child(odd) td:nth-child(-n+4) {
    background: var(--mud-palette-surface);
}
.delegation-grid-sticky-cols tr:nth-child(even) td:nth-child(-n+4) {
    background: var(--mud-palette-background);
}
.delegation-grid-sticky-cols th:nth-child(-n+4) {
    background: var(--mud-palette-surface);
}
/* Border separator between frozen and scrollable columns */
.delegation-grid-sticky-cols th:nth-child(4),
.delegation-grid-sticky-cols td:nth-child(4) {
    border-right: 2px solid var(--aims-border-light);
}

/* Lifecycle Management left-nav recursive tree (.client-tree*): styles consolidated
   into Pages/Client/ClientDefault.razor <style> (single source of truth). This copy
   was stale — it fought the component block and reintroduced the bold labels + wrong
   node indent, so it was removed. */

/* Store Manager wizard — force MudDataGrid SelectColumn first column to a
   visible width. In this MudBlazor build it renders 0-width without an
   explicit override. */
.sm-groups-grid table {
    width: 100%;
}
.sm-groups-grid table thead th,
.sm-groups-grid table tbody td {
    word-break: break-word;
}
.sm-groups-grid table thead th:first-child,
.sm-groups-grid table tbody td:first-child {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
.sm-groups-grid table thead th:nth-child(2),
.sm-groups-grid table tbody td:nth-child(2) {
    min-width: 180px !important;
}
.sm-groups-grid table thead th:nth-child(3),
.sm-groups-grid table tbody td:nth-child(3) {
    min-width: 110px !important;
}
.sm-groups-grid table thead th:nth-child(4),
.sm-groups-grid table tbody td:nth-child(4) {
    min-width: 60px !important;
}
/* Header text should not wrap awkwardly */
.sm-groups-grid table thead th .column-header {
    white-space: nowrap;
}

/* ============================================================
   PASSWORD STATION — RESULTS / SUCCESS / TRANSIENT PAGES (MODERN ONLY)
   ============================================================
   WHY THESE RULES ARE HERE AND NOT IN THE COMPONENTS.

   Every declaration in this section used to live either in an inline `style=` attribute on
   PsResults / PsAccountInfo / PsUnlockAccount, or in a page-local <style> block at the bottom
   of PsSuccess.razor. Both forms defeat customer branding:

     * an inline `style=` outranks EVERY non-!important rule in /branding/css/global, so a
       customer's `#ButtonContinue { background-color: … }` silently lost to
       `style="background-color:#337ab7"`;
     * a <style> written in a component body is emitted by Blazor into <body>, i.e. AFTER the
       <link> to /branding/css/global in <head>, so it won this file's equal-specificity ties
       against the customer sheet as well.

   aims-app.css is linked in App.razor ABOVE /branding/css/global, so the same declarations
   living here lose every equal-specificity tie to the customer instead of winning them. That
   is the entire point of the move — the rendered result is unchanged, the cascade position is
   not.

   MODERN-ONLY BY CONSTRUCTION. Each block is scoped under the page's own MODERN wrapper class
   (.ps-results-page / .ps-account-info-page / .ps-unlock-account-page), and those classes are
   emitted ONLY on the Modern render path — the Classic path puts `row-fluid` on that same
   element instead. So none of this can reach a Classic page and repaint the legacy DOM
   contract (architectural rule A). The .ps-success-* block is the one exception and is
   discussed at its own header below.

   SPECIFICITY IS DELIBERATE, NOT DECORATIVE. `.ps-layout-container .btn` (0,2,0) sits earlier
   in this file and would otherwise win against a bare `.ps-results-action` (0,1,0), changing
   the Modern padding. Scoping under the page wrapper puts these at (0,2,0)/(0,3,0) and later
   in source order, which reproduces exactly what the inline attribute used to compute. */

/* ---- /ps/results (Modern) — was PsResults.razor inline style= on every element ---- */
.ps-results-page {
    max-width: 700px;
    margin: 0 auto;
    padding-top: 10px;
}

.ps-results-page .ps-results-error {
    color: red;
    font-weight: bold;
    margin: 8px 0;
    font-size: 12px;
}

.ps-results-page .ps-results-title {
    font-size: 18px;
    font-weight: bold;
    color: #555;
    margin-bottom: 4px;
}

.ps-results-page .ps-results-title-rule {
    border-top: 1px solid #ccc;
    margin: 4px 0;
}

.ps-results-page .ps-results-headerline {
    font-size: 12px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    margin-bottom: 8px;
}

.ps-results-page .ps-results-table {
    width: 100%;
    border-spacing: 2px;
    border-collapse: collapse;
    margin-bottom: 0;
    font-size: 12px;
    font-family: Verdana, Geneva, Arial, sans-serif;
}

.ps-results-page .ps-results-table thead tr {
    background-color: #E1F0FF;
}

.ps-results-page .ps-results-table thead th {
    padding: 4px 8px;
    border: 1px solid #ddd;
}

.ps-results-page .ps-results-table thead th.ps-results-col-status {
    text-align: center;
    width: 40px;
}

.ps-results-page .ps-results-table tbody tr {
    border-bottom: 1px solid #eee;
}

.ps-results-page .ps-results-table tbody td {
    padding: 4px 8px;
    border: 1px solid #eee;
}

.ps-results-page .ps-results-subtable-wrap {
    margin-top: 8px;
    margin-left: 20px;
}

.ps-results-page .ps-results-subtable {
    border-spacing: 2px;
    border-collapse: collapse;
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, sans-serif;
}

.ps-results-page .ps-results-subtable tbody tr {
    border-bottom: 1px solid #eee;
}

.ps-results-page .ps-results-subtable tbody td {
    padding: 3px 6px;
    border: 1px solid #eee;
}

.ps-results-page .ps-results-subtable tbody td.ps-results-cell-status {
    width: 30px;
}

/* Row/cell state classes. These replace the two conditional inline fragments the page used to
   interpolate — `background-color:#fff5f5` on a failed row and `color:red|green` on the result
   cell — so the values are identical and the condition still lives in the component. */
.ps-results-page .ps-results-row-failed {
    background-color: #fff5f5;
}

.ps-results-page .ps-results-cell-status {
    text-align: center;
}

.ps-results-page .ps-results-result-ok {
    color: green;
}

.ps-results-page .ps-results-result-failed {
    color: red;
}

.ps-results-page .ps-results-summary {
    margin-top: 12px;
    font-size: 12px;
    font-family: Verdana, Geneva, Arial, sans-serif;
}

.ps-results-page .ps-results-summary-failed {
    color: red;
    font-weight: bold;
}

.ps-results-page .ps-results-summary-ok {
    color: green;
    font-weight: bold;
}

.ps-results-page .ps-results-empty {
    font-size: 12px;
    color: gray;
}

.ps-results-page .ps-results-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

/* `.btn` above sets `padding: 10px 16px` and `border: 1px solid transparent`; the inline styles
   these classes replace overrode both. Scoping under .ps-results-page reaches (0,2,0) — the
   same weight as `.ps-layout-container .btn` — and this file position is later, so the outcome
   matches the old inline attribute exactly. */
.ps-results-page .ps-results-action {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.ps-results-page .ps-results-action-primary {
    padding: 10px;
    border: none;
}

.ps-results-page .ps-results-return {
    margin-top: 16px;
    padding: 10px 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ---- /ps/account-info and /ps/unlock-account (Modern) ----
   Both legacy pages (PS/AccountInfo.aspx:15-20, PS/UnlockAccount.aspx:17-21) render an empty
   <form> and immediately Response.Redirect to DataSetResult.aspx — they have no content DOM at
   all. The Blazor pages show a title strip and a spinner while the same work runs in-process.
   That screen is a Blazor-only affordance, so it is styled from product classes that carry NO
   legacy id or class name: nothing a migrating customer's sheet could already be targeting. */
.ps-account-info-page,
.ps-unlock-account-page {
    max-width: 600px;
    margin: 0 auto;
    padding-top: 10px;
}

.ps-account-info-page .ps-transient-icon,
.ps-unlock-account-page .ps-transient-icon {
    width: 45px;
    height: 45px;
}

.ps-account-info-page .ps-transient-title,
.ps-unlock-account-page .ps-transient-title {
    font-size: 18px;
    font-weight: bold;
    color: #555;
}

.ps-account-info-page .ps-transient-account,
.ps-unlock-account-page .ps-transient-account {
    color: #04a84f;
    font-weight: bold;
}

.ps-account-info-page .ps-transient-rule,
.ps-unlock-account-page .ps-transient-rule {
    border-top: 1px solid #ccc;
    margin: 4px 0;
}

.ps-account-info-page .ps-transient-progress,
.ps-unlock-account-page .ps-transient-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.ps-account-info-page .ps-transient-progress-text,
.ps-unlock-account-page .ps-transient-progress-text {
    font-size: 13px;
    color: #555;
}

/* The error branch is the ONE part of these two pages that also renders in Classic: leaving an
   operator on a blank page with no message and no way back is a functional regression, not
   parity. It deliberately carries no legacy hook, so these rules are not scoped to the Modern
   wrapper — they must apply in both appearances. */
.ps-transient-error {
    color: red;
    font-weight: bold;
    margin: 8px 0;
    font-size: 12px;
}

.ps-layout-container .ps-transient-return {
    margin-top: 16px;
    padding: 10px 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ---- /ps/success (Modern) — was the page-local <style> block at PsSuccess.razor:42-178 ----
   Moved VERBATIM: same selectors, same declarations, same order, same specificity. Only the
   cascade position changes (component <body> -> aims-app.css in <head>, above the customer
   sheet), which is exactly the defect being fixed.

   These are NOT scoped to a Modern-only wrapper, for two reasons. (1) Keeping the original
   (0,1,0) weight is what lets a customer override them with a single class of their own — the
   whole point of moving the block out of <body>. (2) The class names are Blazor inventions
   that appear nowhere in legacy, so there is no legacy contract for them to contaminate. The
   Classic render path emits none of .ps-success-page / -card / -checkmark / -heading /
   -message / -button (it emits img#ImageSuccess, td.face8, span#LabelMsg and
   input#ButtonTextContinue instead), so all of those are inert there anyway.
   .ps-success-warning is the exception: it is written by the page's message builder and so
   appears in BOTH appearances, which is intended — it is the styling for a warning legacy
   composed as bare text, and a customer can now override it. */
.ps-success-page {
    width: 100%;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px 24px;
    font-family: Arial, Helvetica, sans-serif;
}

.ps-success-card {
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border: 1px solid #e3eaf0;
    border-radius: 12px;
    box-shadow: 0 6px 28px rgba(20, 73, 125, 0.08);
    padding: 40px 36px 32px;
    text-align: center;
}

.ps-success-checkmark {
    width: 84px;
    height: 84px;
    margin: 4px auto 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #f1faf3 0%, #ffffff 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-success-checkmark svg {
    width: 84px;
    height: 84px;
}

.ps-success-checkmark-circle {
    stroke: #04a84f;
    stroke-width: 2.5;
    stroke-miterlimit: 10;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: ps-success-stroke-circle 0.55s cubic-bezier(0.65, 0, 0.45, 1) 0.05s forwards;
}

.ps-success-checkmark-check {
    stroke: #04a84f;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: ps-success-stroke-check 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.55s forwards;
}

@keyframes ps-success-stroke-circle {
    to { stroke-dashoffset: 0; }
}

@keyframes ps-success-stroke-check {
    to { stroke-dashoffset: 0; }
}

.ps-success-heading {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: #14497d;
    letter-spacing: 0.01em;
}

.ps-success-message {
    font-size: 14px;
    color: #4a5563;
    line-height: 1.55;
    margin-bottom: 28px;
    word-wrap: break-word;
}

.ps-success-warning {
    display: inline-block;
    margin-top: 6px;
    padding: 8px 12px;
    background: #fdecea;
    color: #a94442;
    border-left: 3px solid #c9302c;
    border-radius: 3px;
    font-weight: 600;
}

.ps-success-actions {
    display: flex;
    justify-content: center;
}

.ps-success-button {
    min-width: 200px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: #04a84f;
    border: 1px solid #038a41;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.ps-success-button:hover {
    background: #038a41;
    box-shadow: 0 2px 6px rgba(4, 168, 79, 0.25);
}

.ps-success-button:active {
    transform: translateY(1px);
    box-shadow: none;
}

.ps-success-button:focus-visible {
    outline: 2px solid #14497d;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .ps-success-card {
        padding: 32px 20px 24px;
    }

    .ps-success-heading {
        font-size: 19px;
    }
}

/* ==============================================================================================
   CLASSIC CONTENT — /ps/select-systems, /ps/results, /ps/success
   Product-owner direction, 2026-08-12: CLASSIC keeps the legacy CHROME and the legacy HOOKS
   (ids, classes, element types, cell positions), but the CONTENT CONTROLS must look like the
   MODERN interface. wwwroot/css/aims-legacy-content.css carries what EVERY Classic page shares
   (title strip, page rhythm, `.button-split-N`, field rows, grid row rhythm, the notice/progress
   blocks). This block carries only what is specific to these three routes.

   ---------------------------------------------------------------------------------------------
   EVERY SELECTOR HERE IS DELIBERATELY MORE SPECIFIC THAN THE RULE IT OVERRIDES. READ THIS BEFORE
   EDITING ONE.
   ---------------------------------------------------------------------------------------------
   App.razor links, in order: (1) this file, (2) aims-legacy-auth.css, (3) aims-legacy-chrome.css
   — the legacy BASELINE — (4) aims-legacy-content.css — the shared Classic presentation — and
   (5) /branding/css/global, the customer's own sheet. From slot (1) an equal-specificity rule
   LOSES the tie to (3) and (4) on source order and silently does nothing. So each rule below
   carries `.aims-legacy-chrome` (the Classic page root, PSLayout's `_pageRootClass`) PLUS the
   page's own Classic-only product class, which lands it a class ahead of the baseline it has to
   beat. That extra weight is the price of living in this file rather than in a sheet slotted
   after (3); the deliberate consequence is that a customer rule written at plain `.table td`
   weight no longer wins against these. The rules a migrating customer actually ships for these
   three pages are id-based (`#datagrid`, `#pnlGridContainer`, `#ButtonContinue`,
   `img#ImageSuccess`, `td.hide-cox`), and an id still beats everything here.

   CLASSIC-ONLY BY CONSTRUCTION. `.aims-legacy-chrome` is emitted by PSLayout only when the
   appearance is CLASSIC, and the page scope classes are emitted only by each page's Classic arm
   (LegacyContentShell / LegacyContentRow / LegacyContentCell all render bare ChildContent in
   MODERN, so `TableClass` / `RowClass` / `CellClass` never reach the DOM there). Nothing below
   can match a MODERN page.

   NO `!important` ANYWHERE. A customer that declares the same property must still win.
   ============================================================================================== */

/* ---- /ps/select-systems (CLASSIC) --------------------------------------------------------- */

/* [0] THE HIERARGRID EXPANDER COLUMN. Legacy emits a bare `<td></td>` as cell 0 of the header
   row and of every data row, and the customer's AddClassesToItemCol indexes elemThisTR[0..5]
   with no bounds check — so the CELL has to stay. Their own sheet hides it
   (`td.headerempty { display: none }`), but that class is stamped by their script, which dies
   earlier on this page, so what actually shipped was a 43px unexplained gutter between the
   table's left edge and the Select column. Collapsed here instead of removed. */
.aims-legacy-chrome .aims-ps-classic-systems .table > tbody > tr > td:first-child:empty {
    width: 0;
    padding-left: 0;
    padding-right: 0;
}

/* The grid fills its column. Legacy's own inline style on #datagrid sets border-collapse,
   border-spacing and margin-bottom; `width` is not inline, so it can be set from here. */
.aims-legacy-chrome .aims-ps-classic-systems .table {
    width: 100%;
}

/* Select and Status are glyph columns — stop the auto layout handing Status 160px of a row it
   fills with one 20px icon. */
.aims-legacy-chrome .aims-ps-classic-systems .table > tbody > tr > td:nth-child(2),
.aims-legacy-chrome .aims-ps-classic-systems .table > tbody > tr > td:nth-child(3) {
    width: 56px;
    text-align: center;
}

/* The header row. The grey band and the bold weight are LEGACY'S OWN inline style on the <tr>
   and are untouched; all that is added is the separation from the first data row that legacy
   never drew (aims-legacy-content.css §7 suppresses the first row's border-top). */
.aims-legacy-chrome .aims-ps-classic-systems .aims-ps-classic-grid-header > td {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #dfe4ea;
}

/* Connector-group rows read as a section header — the same band and weight MODERN gives
   `.aims-ps-group-row` — instead of as a corrupt blank row with a name marooned 550px to the
   right. The six cells and their order are unchanged. */
.aims-legacy-chrome .aims-ps-classic-systems .aims-ps-classic-group-row > td {
    background-color: #e8f4e8;
    font-weight: bold;
    color: #34495e;
}

.aims-legacy-chrome .aims-ps-classic-systems .aims-ps-group-count {
    margin-left: 4px;
    font-weight: normal;
    color: #7f8c8d;
}

/* ---- /ps/results (CLASSIC) ----------------------------------------------------------------
   The `.ps-results-*` class names are emitted by the page's SHARED body in both appearances, but
   every rule for them earlier in this file is scoped under `.ps-results-page`, which only the
   MODERN arm emits. In CLASSIC the sub-table, the summary, the failed-row tint and the ok/failed
   result colours therefore rendered with no styling at all. These rules are that paint. */

/* ONE column geometry for BOTH grids, so the sub-table's rows line up with the main grid's
   instead of jogging sideways mid-list (measured: Description jumped 57px and Result 75px between
   the two tables). `table-layout: fixed` is what makes that a guarantee rather than a hint —
   under auto layout the 250px nested account-info block re-sized the main grid's columns and
   nothing else could match them. `overflow-wrap` is what stops a long connector error message
   running out of its cell instead of wrapping. */
.aims-legacy-chrome .ps-results-classic .table {
    width: 100%;
    table-layout: fixed;
}

.aims-legacy-chrome .ps-results-classic .table > tbody > tr > td {
    overflow-wrap: anywhere;
}

.aims-legacy-chrome .ps-results-classic .table > tbody > tr > td:nth-child(1) {
    width: 44px;
    text-align: center;
}

.aims-legacy-chrome .ps-results-classic .table > tbody > tr > td:nth-child(2) {
    width: 16%;
}

.aims-legacy-chrome .ps-results-classic .table > tbody > tr > td:nth-child(3) {
    width: 22%;
}

.aims-legacy-chrome .ps-results-classic .table > tbody > tr > td:nth-child(4) {
    width: 20%;
}

/* Legacy's Title2 row — grey band and bold weight are its own inline style, untouched. */
.aims-legacy-chrome .ps-results-classic .ps-results-classic-grid-header > td {
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #dfe4ea;
}

/* The sub-results table is a Blazor addition with no legacy counterpart. It has to read as a
   continuation of the grid above it, not as a second table pasted in below and indented. */
.aims-legacy-chrome .ps-results-classic .ps-results-subtable-wrap {
    margin-top: 0;
    margin-left: 0;
}

.aims-legacy-chrome .ps-results-classic .ps-results-subtable {
    margin-bottom: 0;
}

/* Row / cell state. Same values MODERN uses, restated at Classic scope. */
.aims-legacy-chrome .ps-results-classic .ps-results-row-failed > td {
    background-color: #fff5f5;
}

.aims-legacy-chrome .ps-results-classic .ps-results-cell-status {
    text-align: center;
}

.aims-legacy-chrome .ps-results-classic .ps-results-result-ok {
    color: #1e8449;
}

.aims-legacy-chrome .ps-results-classic .ps-results-result-failed {
    color: #c0392b;
    font-weight: 600;
}

/* THE RESULT COLUMN CARRIES SERVER-COMPOSED HTML — `<font>` tags, and on some rows a nested
   `<table>` whose first cell is empty. That is what left the message left edges ragged across
   rows (measured at x=843 / 899 / 931) with a detached ~25px grey rectangle in front of some of
   them, and what rendered "Incorrect syntax…" at a different size from "Unknown system failure"
   on the same band. The markup is data, not a hook, so it is normalised rather than parsed. */
.aims-legacy-chrome .ps-results-classic .table td font {
    font-size: inherit;
    font-family: inherit;
}

.aims-legacy-chrome .ps-results-classic .table td table {
    width: 100%;
    border-collapse: collapse;
}

.aims-legacy-chrome .ps-results-classic .table td table td {
    padding: 2px 0;
    border: 0;
}

.aims-legacy-chrome .ps-results-classic .table td table td:first-child:empty {
    display: none;
}

/* DataSetResult's nested key/value block (`table.face.accountInfoNested`, built by the legacy
   account-info formatter). It shipped with no padding and no separator, so the key and value
   columns read as two flat grey bands. Declared AFTER the generic nested-table rules above
   because it ties them on specificity and has to win on source order. */
.aims-legacy-chrome .ps-results-classic .accountInfoNested td {
    padding: 5px 10px;
    border-bottom: 1px solid #edf1f5;
}

.aims-legacy-chrome .ps-results-classic .accountInfoNested td:first-child {
    width: 45%;
    color: #6b7280;
}

/* The summary. The `.aims-legacy-notice*` classes the page adds in CLASSIC supply the card
   itself (aims-legacy-content.css §8); these rules only stop the <p> inside it carrying a
   browser default margin, and keep the severity colour on the text. */
.aims-legacy-chrome .ps-results-classic .ps-results-summary {
    margin-top: 16px;
}

.aims-legacy-chrome .ps-results-classic .ps-results-summary p {
    margin: 0;
    font-size: 14px;
}

.aims-legacy-chrome .ps-results-classic .ps-results-summary-failed {
    color: #c0392b;
    font-weight: 600;
}

.aims-legacy-chrome .ps-results-classic .ps-results-summary-ok {
    color: #1e8449;
    font-weight: 600;
}

.aims-legacy-chrome .ps-results-classic .ps-results-empty,
.aims-legacy-chrome .ps-results-classic .ps-results-error {
    font-size: 14px;
}

/* ---- /ps/success (CLASSIC) ----------------------------------------------------------------
   MODERN centres a 560px card: an animated tick above a heading, the message, one centred
   button. CLASSIC had the same content as two side-by-side table cells — a 22x32 stretched GIF
   right-aligned in a 40px gutter, the text beside it, a 999px Continue slab underneath, and the
   whole block stranded top-left in an otherwise empty viewport. These rules restate MODERN's
   shape on legacy's own element tree. Success.aspx's two `<td>`s, `img#ImageSuccess`,
   `td.hide-cox`, `td.face8`, `span#LabelMsg`, `td.button-split-1` and
   `input#ButtonTextContinue` are all exactly where they were. */
.aims-legacy-chrome .ps-success-classic {
    max-width: 560px;
    margin: 40px auto 0;
    padding: 36px 32px 24px;
    background: #ffffff;
    border: 1px solid #e3eaf0;
    border-radius: 12px;
    box-shadow: 0 6px 28px rgba(20, 73, 125, 0.08);
}

/* The two cells stack and centre. `display: block` rather than flex: this table has a SECOND
   row (the button row) that must stay a real table row, and blockifying one <tr> of a two-row
   table is the lower-risk of the two ways to do it. Legacy's own inline `width: 40px` /
   `width: 99%` on the cells still apply, so `margin: 0 auto` is what centres them. */
.aims-legacy-chrome .ps-success-classic-row {
    display: block;
    text-align: center;
}

.aims-legacy-chrome .ps-success-classic-row > td {
    display: block;
    margin: 0 auto;
    padding: 0;
}

/* `text-align` is restated on the cell rather than left to inherit from the row: legacy's
   `align="right"` (Success.aspx:50) is a PRESENTATIONAL ATTRIBUTE mapped to a declaration ON THIS
   ELEMENT, and a directly-applied declaration beats an inherited one whatever its specificity. The
   attribute itself is left on the element, exactly as legacy emits it. */
.aims-legacy-chrome .ps-success-classic-row > td.ps-success-classic-icon {
    text-align: center;
    line-height: 0;
}

/* `width: auto; height: 32px; object-fit: contain` WERE REMOVED 2026-08-12. The tick was never
   stretched — its content box measured 22x22, exactly the natural size of Img/green_check.gif, and
   Success.aspx:50 gives the image no width or height attribute while no legacy sheet declares one,
   so 22x22 IS legacy. What our `height: 32px` did do, under MudBlazor's `* { box-sizing: border-box }`
   reset, was make the height a BORDER-box height, so CVS's `img#ImageSuccess { padding-top: 10px
   !important }` was SUBTRACTED from the glyph instead of offsetting it. 22 + 10 == 32 by coincidence
   on this install; raising their padding to 30px collapses the tick to 2px wide (measured). Their
   declaration was deciding our glyph's size.

   `vertical-align: middle` stays — it reproduces the `ImageAlign="Middle"` presentational attribute
   legacy puts on the element (Success.aspx:50). `max-width: 100%` stays as an overflow guard no
   legacy or customer rule contradicts. */
.aims-legacy-chrome .ps-success-classic-icon img {
    max-width: 100%;
    vertical-align: middle;
}

.aims-legacy-chrome .ps-success-classic-row > td.ps-success-classic-body {
    padding-top: 18px;
    font-size: 15px;
    line-height: 1.55;
    color: #4a5563;
}

/* `.aims-legacy-chrome .ps-success-classic-actions { justify-content: center; padding-bottom: 0 }`
   WAS DELETED 2026-08-12 and nothing replaced it. `padding-bottom: 0` defeated legacy's own
   `.button-split-1 { padding-bottom: 20px }` (Styles/avatier_bootstrap.css:226-229), and
   `justify-content` only did anything while aims-legacy-content.css §5 had turned the cell into a
   flex container — which is itself what stopped CVS's `.button-split-1 { text-align: center }` from
   placing the button. With §5 gone the cell is a table-cell again, legacy's `width: 100%` sizes the
   Continue button and the customer's own centring applies unaided. The `ps-success-classic-actions`
   token stays in PsSuccess.razor's markup: it is additive and harmless, and removing it from the
   page would be a markup change for no rendering gain. */

/* ==============================================================================================
   PASSWORD STATION ENROLLMENT PAGES — RELOCATED PAGE STYLES
   /ps/enroll, /ps/enroll-instructions, /ps/enroll-mfa, /ps/configure, /ps/configure-questions

   WHY THESE RULES LIVE HERE AND NOT IN THE PAGES.
   PsEnroll.razor and PsEnrollMfa.razor each carried a page-local <style> block, and between them
   the five enrollment pages carried 44 inline `style=` attributes. Blazor emits a component's
   <style> into <body>, i.e. AFTER the <link> to /branding/css/global, so those blocks won every
   equal-specificity tie against the customer's own stylesheet; an inline `style=` beat it
   outright, at any specificity, `!important` or not. Both are the audit's D-2 finding, and both
   are why a migrating customer's branding had no effect on these screens.

   aims-app.css is the FIRST stylesheet in App.razor and /branding/css/global is the LAST, so
   every declaration below is overridable by the customer at equal specificity. The values are
   copied verbatim from the markup they came out of — this is a relocation, not a restyle, and
   the MODERN rendering is unchanged.

   ALL OF THIS IS MODERN-ONLY BY CONSTRUCTION. The class names are private (`ps-enroll-*`,
   `ps-mfa-*`, `ps-configure-*`) and the pages emit them in both appearances only where the
   legacy contract has no opinion; every LEGACY class and id the pages emit is gated on the
   cascaded Classic flag and is styled by wwwroot/css/aims-legacy-chrome.css instead.
   ============================================================================================== */

/* --- /ps/enroll — shared page furniture (was: inline style= on the two step wrappers) --- */
.ps-enroll-verify-panel,
.ps-enroll-panel {
    max-width: 600px;
    margin: 0 auto;
    padding-top: 10px;
}

.ps-enroll-title-image {
    width: 45px;
    height: 45px;
}

.ps-enroll-title-text {
    font-size: 18px;
    font-weight: bold;
    color: #555;
}

.ps-enroll-title-rule {
    border-top: 1px solid #ccc;
    margin: 4px 0;
}

.ps-enroll-account {
    color: #04a84f;
    font-weight: bold;
}

.ps-enroll-error {
    color: red;
    font-weight: bold;
    margin: 8px 0;
    font-size: 12px;
}

.ps-enroll-lead {
    font-size: 12px;
    font-family: Verdana, Geneva, Arial, sans-serif;
}

.ps-enroll-center-block {
    text-align: center;
    padding: 20px;
}

.ps-enroll-success-text {
    font-size: 14px;
    color: green;
    font-weight: bold;
}

.ps-enroll-loading-text {
    margin-top: 8px;
}

.ps-enroll-instructions-note {
    background: #d9edf7;
    border: 1px solid #bce8f1;
    color: #31708f;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 12px;
}

/* --- /ps/enroll step 1: the primary-domain logon verification fields --- */
.ps-enroll-verify-fields {
    width: 100%;
    max-width: 500px;
    margin-top: 16px;
    border-spacing: 0 8px;
}

.ps-enroll-field-label {
    width: 120px;
    font-size: 12px;
    font-weight: bold;
    vertical-align: middle;
}

.ps-enroll-verify-field-select,
.ps-enroll-verify-field-input {
    width: 100%;
    padding: 6px;
    font-size: 13px;
    border: 1px solid #ccc;
    background-color: #eee;
}

/* Was the page-local <style> block at PsEnroll.razor:178-202. */
.ps-enroll-verify-password-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.ps-enroll-verify-password-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 6px 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.ps-enroll-verify-password-input {
    font-size: 13px;
    /* MODERN box styling. The element deliberately does NOT carry `.form-control` in MODERN
       (that legacy class is a customer-sheet hook and was letting customer rules repaint a
       modern control), so the border/height/padding form-control used to supply must come from
       this product class instead — without them the input rendered as an invisible 19px
       borderless strip. Metrics mirror the bootstrap .form-control the sibling fields use, so
       the row reads as one family. In CLASSIC the input also carries form-control, whose
       (customer-overridable) equal declarations continue to win by source order. */
    height: 34px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    width: 100%;
}

/* The MODERN results title icon — the one Modern title strip that had no glyph while every
   sibling page shows one. Same 45px artwork the Classic strip uses. */
.ps-results-title-icon {
    width: 45px;
    height: auto;
    vertical-align: middle;
    margin-right: 6px;
}

/* --- /ps/enroll step 2: the questions grid --- */
.ps-enroll-questions {
    max-width: 550px;
}

.ps-enroll-question-block {
    margin: 12px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
}

.ps-enroll-question-label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
}

.ps-enroll-question-select {
    width: 100%;
    padding: 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 8px;
    background: white;
    box-sizing: border-box;
}

.ps-enroll-question-input {
    width: 100%;
    padding: 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* --- /ps/enroll button rows.
   `.ps-layout-container .btn` (0,2,0) already supplies padding, radius, border and the
   btn-default / btn-primary colours, so only the flex sizing and the two per-variant borders the
   inline styles carried are restated. These selectors are (0,2,0) / (0,3,0) and sit LATER in
   this file than the .ps-layout-container block, so they tie and win on source order — and both
   still lose to /branding/css/global, which is the whole point of moving them out of the
   markup. --- */
.ps-enroll-verify-actions {
    margin-top: 16px;
    max-width: 500px;
    display: flex;
    gap: 8px;
    padding-top: 4px;
}

.ps-enroll-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

.ps-enroll-verify-actions .btn,
.ps-enroll-actions .btn {
    flex: 1;
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box;
}

.ps-enroll-actions .btn {
    font-size: 14px;
}

.ps-enroll-verify-actions .btn.btn-default,
.ps-enroll-actions .btn.btn-default {
    border: 1px solid #ccc;
}

.ps-enroll-verify-actions .btn.btn-primary,
.ps-enroll-actions .btn.btn-primary {
    background-color: #337ab7;
    color: #fff;
    border: none;
}

.ps-enroll-success-button {
    margin-top: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px 24px;
}

/* --- /ps/enroll-mfa — the whole page-local <style> block from PsEnrollMfa.razor:219-320,
   verbatim, plus the four helpers that replace its inline style= attributes. --- */
.ps-mfa-auth-page {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}

.ps-mfa-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 15px 36px;
}

.ps-mfa-panel {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}

.ps-mfa-alert {
    padding: 15px;
    margin-bottom: 28px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.42857143;
}

.ps-mfa-alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.ps-mfa-alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.ps-mfa-alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.ps-mfa-alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.ps-mfa-btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-image: none;
}

.ps-mfa-btn[disabled] {
    cursor: not-allowed;
    opacity: .65;
}

.ps-mfa-btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.ps-mfa-btn-block {
    display: block;
    width: 100%;
    margin-top: 5px;
}

.ps-mfa-btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.ps-mfa-btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

/* Replaces the five inline style= attributes on /ps/enroll-mfa. */
.ps-mfa-center {
    text-align: center;
}

.ps-mfa-loading {
    padding: 40px;
}

.ps-mfa-loading-text {
    margin-top: 12px;
    font-size: 13px;
}

.ps-mfa-btn-inline {
    margin-left: 8px;
}

/* --- /ps/configure-questions — replaces the inline Style= on the per-question MudPaper. --- */
.ps-configure-question-card {
    background-color: var(--mud-palette-background);
}

/* --- CLASSIC-ONLY BASELINE — DELETED 2026-08-13, MOVED TO THE LEGACY HOOK IT WAS STANDING IN FOR.
   This used to be `#DivSetPIN.hidden, #DivChangePIN.hidden, #btnCancelPIN.hidden { display:none }`
   at (1,1,0). It hid the right things, but it did so by outranking CVS's
   `#DivChangePIN { display: table }` at (1,0,0) with a bespoke ID rule of ours — the one shape this
   layer is not allowed to have. It was written because the port carried no `.hidden` at all.

   Legacy hides these three by exactly one mechanism: the `hidden` class plus
   stylesheets/bootstrap-ms.css:5455 `.hidden { display: none !important }`, which every legacy PS
   page links (PS/HeadTag.htm:6). That utility is now ported verbatim in aims-legacy-chrome.css, so
   the customer's `display:table` loses to the same declaration that beats it on legacy rather than
   to an invention of ours. Nothing needs to live here. --- */

/* ============================================================
   PASSWORD STATION — SELECT SYSTEMS (MODERN APPEARANCE ONLY)
   ============================================================
   Every declaration below was an inline `style=` attribute on Pages/PasswordStation/
   PsSelectSystems.razor until the legacy content contract landed. They were moved here for
   two reasons:

     1. An inline style outranks EVERY non-!important rule in /branding/css/global, which is
        served in BOTH appearances — so `style="background-color:#337ab7"` on the Continue
        button silently defeated a customer's own `#ButtonTextContinue { background-color: … }`.
        Blazor emits page-local <style> blocks into <body>, i.e. AFTER the branding sheet, so
        that route has the same problem. aims-app.css is linked BEFORE /branding/css/global.

     2. The CLASSIC branch of the page has to be painted by legacy's own classes
        (`.LayoutTable`, `.button-split-2`, `table.table`, …) and by the customer sheet on top
        of them — never by a Blazor-invented rule.

   THE `:not(.aims-legacy-chrome)` PREFIX IS LOAD-BEARING, TWICE OVER.
   `.ps-layout-container` sits on the PS shell root in BOTH appearances (PSLayout's
   _pageRootClass), so an unscoped rule here would repaint the CLASSIC page and undo (2).
   It also raises every selector to (0,3,0)+, which is deliberate: MODERN is contractually held
   pixel-identical, and these declarations used to be INLINE — unbeatable by anything short of
   !important. Landing them at plain (0,1,0) would let a customer's `.table { … }` start
   changing a MODERN screen that has never moved.

   The class names are neutral and namespaced (`aims-ps-*`); none of them is a legacy hook, and
   each is emitted ONLY by the MODERN branch of the page, so nothing here re-creates the leak
   architectural rule A exists to prevent. */

/* Page wrapper — was style="max-width: 700px; margin: 0 auto; padding-top: 10px;" */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-select-systems {
    max-width: 700px;
    margin: 0 auto;
    padding-top: 10px;
}

/* The title strip's `<tr valign="top">`. Shared/LegacyPageTitle emits that attribute only in
   its CLASSIC branch, and without it the 45px action icon centres against a wrapped title
   instead of sitting at the top of the row — a visible shift on a screen MODERN is held
   pixel-identical to. Written as a DESCENDANT (not child) selector for the cells so it holds
   whether the table reaches the DOM through prerendered HTML, where the parser inserts a
   <tbody>, or through a Blazor render diff, where it does not. */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-select-systems > table:first-of-type td {
    vertical-align: top;
}

/* Title — was style="font-size: 18px; font-weight: bold; color: #555;" on the title div and
   style="border-top: 1px solid #ccc; margin: 4px 0;" on its rule. */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-page-title {
    font-size: 18px;
    font-weight: bold;
    color: #555;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-page-title hr {
    border-top: 1px solid #ccc;
    margin: 4px 0;
}

/* Instructions — was style="font-size: 12px; font-family: Verdana, Geneva, Arial, sans-serif;"
   (--aims-font-family-content is that exact stack). */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-instructions {
    font-size: 12px;
    font-family: var(--aims-font-family-content);
}

/* Error line (legacy's LabelNoSystems) — was
   style="color: red; font-weight: bold; margin: 8px 0; font-size: 12px;" */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-error {
    color: red;
    font-weight: bold;
    margin: 8px 0;
    font-size: 12px;
}

/* Top control row — was style="margin: 8px 0;" on the wrapper and
   style="border: 1px solid #ccc; border-radius: 4px;" on each of the three buttons. That pair
   is what `.ps-layout-container .btn` + `.btn.btn-default` already compute to (1px solid
   transparent with border-color #ccc, radius 4px); they are restated rather than dropped so
   the rendered box is provably the one that ships today. */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-topcontrols {
    margin: 8px 0;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-topcontrols .btn {
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Systems grid — was style="width: 100%; border-spacing: 2px; border-collapse: collapse;
   margin-bottom: 0; font-size: 12px; font-family: Verdana, Geneva, Arial, sans-serif;"
   The element keeps class="table" as well, so a customer's own `.table` rules still reach it
   for everything these declarations do not set. */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-systems-table {
    width: 100%;
    border-spacing: 2px;
    border-collapse: collapse;
    margin-bottom: 0;
    font-size: 12px;
    font-family: var(--aims-font-family-content);
}

/* Header — was style="background-color: #eee;" on the row,
   style="text-align:center; padding: 4px 8px; border: 1px solid #ddd;" on the first two <th>
   and style="padding: 4px 8px; border: 1px solid #ddd;" on the other three. The last three
   deliberately get NO text-align, exactly as before, so <th> keeps its inherited alignment. */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-systems-table thead tr {
    background-color: #eee;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-systems-table thead th {
    padding: 4px 8px;
    border: 1px solid #ddd;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-systems-table thead th:nth-child(1),
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-systems-table thead th:nth-child(2) {
    text-align: center;
}

/* System row — was style="border-bottom: 1px solid #eee;" on the row,
   style="text-align:center; padding: 4px 8px; border: 1px solid #eee;" on cells 1-2 and
   style="padding: 4px 8px; border: 1px solid #eee;" on cells 3-5. Scoped to the row class
   rather than to `td`, because the group row's cells carry different padding and no border. */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-system-row {
    border-bottom: 1px solid #eee;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-system-row > td {
    padding: 4px 8px;
    border: 1px solid #eee;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-system-row > td:nth-child(1),
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-system-row > td:nth-child(2) {
    text-align: center;
}

/* Connector-group row — was style="background-color: #e8f4e8; border: 1px solid #ddd;" on the
   row, style="text-align:center; padding: 6px 8px;" on the checkbox cell,
   style="padding: 6px 8px; font-weight: bold; font-size: 12px; color: #555;" on the name cell
   and style="font-weight:normal; color:#888; margin-left:4px;" on the count. */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-group-row {
    background-color: #e8f4e8;
    border: 1px solid #ddd;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-group-row > td {
    padding: 6px 8px;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-group-row > td:nth-child(1) {
    text-align: center;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-group-row > td:nth-child(2) {
    font-weight: bold;
    font-size: 12px;
    color: #555;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-group-count {
    font-weight: normal;
    color: #888;
    margin-left: 4px;
}

/* Bottom nav — was style="margin-top: 16px; display: flex; gap: 8px;" on the wrapper,
   style="flex:1; padding: 10px; border: 1px solid #ccc; border-radius: 4px;" on Cancel and
   style="flex:1; padding: 10px; background-color: #337ab7; color: white; border: none;" on
   Continue. `border: none` on Continue is reproduced rather than tidied into the
   `border-color: transparent` its class already carries: under box-sizing: border-box the two
   differ by the 2px of border box, so "cleaning it up" would make Continue 2px taller than it
   ships today. This wrapper is MODERN's own layout — CLASSIC uses legacy's td.button-split-2
   and the `.button-split-2 input[type=submit] { width: calc(50% - 7px) }` sizing that goes
   with it, which is why the grid re-interpretation at the top of this file is already
   :not(.aims-legacy-chrome)-scoped. */
.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-bottomnav {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-bottomnav .btn {
    flex: 1;
    padding: 10px;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-bottomnav .btn.btn-default {
    border: 1px solid #ccc;
    border-radius: 4px;
}

.ps-layout-container:not(.aims-legacy-chrome) .aims-ps-bottomnav .btn.btn-primary {
    background-color: #337ab7;
    color: #fff;
    border: none;
}

/* ============================================================
   CUSTOMER LOGO IN THE MODERN POST-LOGIN HEADER
   ============================================================
   MODERN mode paints the header wordmark from UniversalBranding.LOGGED_LOGO when the
   administrator has uploaded one. The product logo is an empty <div> painted by a CSS
   background-image (family B) or a CSS mask recoloured to white (family A, e.g.
   .aims-header.module-ps .aims-logo), and every module also pins an explicit width
   (291-420px). An <img> inheriting those rules would be clipped by the width and, on the
   masked modules, erased entirely — so the customer image carries `aims-logo-custom`
   alongside `aims-logo` and this block neutralises the paint while keeping the layout
   properties (float / margin / flex-shrink) the header depends on.

   Specificity: the per-module rules are (0,3,0) — `.aims-header.module-ps .aims-logo` —
   so these use `.aims-logo.aims-logo-custom` to reach (0,3,0) as well and rely on being
   LAST in the file to win. Keep this block at the end of aims-app.css.

   Nothing here applies unless an <img class="aims-logo aims-logo-custom"> is emitted,
   which happens only when a LOGGED_LOGO row is enabled and has an image — so an install
   without a customer logo renders byte-identically to before. */
.aims-header .aims-logo.aims-logo-custom {
    background: none;
    background-image: none;
    -webkit-mask: none;
    mask: none;
    width: auto;
    max-width: 420px;
    height: 70px;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 720px) {
    .aims-header .aims-logo.aims-logo-custom {
        margin-left: 0;
        width: auto;
        max-width: min(220px, calc(100vw - 120px));
        height: 46px;
    }
}

/* ---------------------------------------------------------------
   FLOAT GUARD for MudBlazor field roots. A customer stylesheet may float its own
   branded label markup (CVS: `.SMSCodeColon { float: right !important; width: 100% }`
   inside the resx-overridden SmsCodeColon label on the OTP challenge pages). A flex
   container placed after a float is squeezed BESIDE it into the remaining space —
   beside a 100%-wide float that is 0px, which collapsed the OTP code field to a
   14px sliver (reported 2026-08-13). Legacy never hit this because its inputs were
   plain block/table content, which simply DROPS BELOW the float.

   `clear: both` reproduces exactly that legacy drop-below behaviour. It is a no-op
   wherever no float precedes the field (i.e. everywhere in unbranded Modern), and it
   does not defeat any customer declaration — no customer rule sets `clear` here; the
   customer's float still floats, we just stop being beside it. -------------------- */
.mud-input-control {
    clear: both;
}

/* Group Self-Service picker rows the policy would refuse: listed but greyed and labelled.
   !important beats MudBlazor's striped/hover cell colours. gss-excluded-hard (exclusion
   mode, unselectable) is an unstyled marker so both modes look identical. */
.gss-excluded td {
    background-color: #EEEEEE !important;
    color: #999999 !important;
}

.gss-excluded-label {
    color: #999999;
    font-size: 11px;
    font-style: italic;
    margin-left: 4px;
}