/*
 * Suppress the default Blazor yellow error bar.
 * Component-level exceptions are caught by AppErrorBoundary which renders a
 * custom MudBlazor error card.  The #blazor-error-ui bar only appears for
 * catastrophic renderer failures (lost connection, etc.), which we handle via
 * AppErrorBoundary wrapping @Body in MainLayout.
 */
#blazor-error-ui {
    display: none !important;
}


h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
    text-decoration: none !important
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}


.validation-message {
    color: red;
}

/*  Content Block shared utilities (used across Card, List view, Detail panel)  */
.cb-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
}

.cb-badge--active   { background: #DCFCE7; color: #16A34A; }
.cb-badge--locked   { background: #FFF7ED; color: #EA580C; }
.cb-badge--archived { background: #F1F5F9; color: #64748B; }
.cb-badge--pending  { background: #EFF6FF; color: #1A56DB; }

.cb-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.68rem;
    background: var(--mud-palette-background-grey, #F1F5F9);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
}

.cb-tag-more {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    align-self: center;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #3f26d9;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

    .loading-progress circle:last-child {
        stroke: #3f26d9;
        stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
        transition: stroke-dasharray 0.05s ease-in-out;
    }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.hover-card {
    transition: box-shadow 0.25s ease-in-out;
}

.hover-card:hover {
    box-shadow: var(--mud-elevation-6) !important;
}

.small-label .mud-typography {
    font-size: 0.875rem !important;
}

/* Work Request Calendar Status Colors */
.calendar-pending {
    background-color: #FFC107 !important; /* Yellow - pending */
    color: #000 !important;
}

.calendar-approved {
    background-color: #4CAF50 !important; /* Green - Approved/Scheduled */
    color: #fff !important;
}

.calendar-underway {
    background-color: #2196F3 !important; /* Blue - Underway */
    color: #fff !important;
}

.calendar-completed {
    background-color: #9E9E9E !important; /* Gray - Completed */
    color: #fff !important;
}

.calendar-rejected {
    background-color: #F44336 !important; /* Red - Rejected */
    color: #fff !important;
}
/* Keep mini-navigation icons clear of the scroll gutter and expanded-menu indentation. */
.app-navigation-drawer .app-navigation-scroll {
    min-width: 0;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.app-navigation-drawer.mud-drawer.mud-drawer--closed .mud-nav-link {
    box-sizing: border-box;
    width: calc(100% - 12px);
    min-height: 40px;
    margin: 2px 6px !important;
    padding: 8px !important;
    justify-content: center;
}

.app-navigation-drawer.mud-drawer.mud-drawer--closed .mud-nav-link .mud-icon-root {
    flex-shrink: 0;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}

.app-navigation-drawer.mud-drawer.mud-drawer--closed .mud-nav-link-text,
.app-navigation-drawer.mud-drawer.mud-drawer--closed .mud-navgroup-expand-icon {
    display: none;
}

/* Keep the padded logo image and its hit area inside the app bar. */
.app-brand-link {
   display: flex;
   align-items: center;
   flex: 0 0 auto;
   height: 48px;
   overflow: hidden;
}

.app-brand-link:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
   border-radius: 4px;
}
/* Keep the collapsed navigation rail aligned with its leading icons. */
.app-navigation-drawer.mud-drawer.mud-drawer--closed .mud-nav-link {
   justify-content: flex-start;
}
.app-navigation-drawer.mud-drawer.mud-drawer--closed .hub-navigation {
   margin-left: 0;
   margin-right: 0;
}
/* The Hub's custom icon lives inside the link content, unlike standard nav icons. */
.app-navigation-drawer.mud-drawer.mud-drawer--closed .hub-navigation .mud-nav-link {
   justify-content: center;
}
.app-navigation-drawer.mud-drawer.mud-drawer--closed .hub-navigation .mud-nav-link-text {
   display: flex;
   margin: 0;
}
.app-navigation-drawer.mud-drawer.mud-drawer--closed .hub-navigation-copy {
   display: none;
}
.app-navigation-drawer.mud-drawer.mud-drawer--closed .hub-navigation-icon {
   width: 20px;
   height: 20px;
   background-color: transparent;
}
.app-navigation-drawer.mud-drawer.mud-drawer--closed .modules-heading {
   display: none;
}

/* Also covers dialogs/popovers rendered outside the layout by MudBlazor providers.
   Keep heading, action, validation and disabled colours on their existing palette tokens. */
body:has(.app-theme-dark) .mud-table-body .mud-table-cell,
body:has(.app-theme-dark) .mud-input:not(.mud-disabled):not(.mud-input-error),
body:has(.app-theme-dark) .ncr-action-editor .ql-editor,
body:has(.app-theme-dark) .ncr-action-editor .editor-readonly {
   color: var(--mud-palette-drawer-text);
}

/* Shared in-page navigation: same palette and states as the main sidebar. */
.app-side-menu {
   background-color: var(--mud-palette-drawer-background);
   color: var(--mud-palette-drawer-text);
}
.app-side-menu .app-side-menu-item {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
   width: 100%;
   min-height: 40px;
   padding: 10px 12px;
   border: 0;
   border-radius: 4px;
   background: transparent;
   color: var(--mud-palette-drawer-text);
   font: inherit;
   font-size: .875rem;
   text-align: left;
   cursor: pointer;
   transition: background-color 150ms ease;
}
.app-side-menu .app-side-menu-item .mud-icon-root {
   flex-shrink: 0;
   color: inherit;
}
.app-side-menu .app-side-menu-item:hover:not(:disabled) {
   background: var(--mud-palette-primary-hover);
}
.app-side-menu .app-side-menu-item.selected {
   background: var(--mud-palette-primary-hover);
   color: var(--mud-palette-primary);
   box-shadow: inset 5px 0 0 var(--mud-palette-primary);
   font-weight: 600;
}
.app-side-menu .app-side-menu-item:focus-visible {
   outline: 2px solid var(--mud-palette-primary);
   outline-offset: -2px;
}
.app-side-menu .app-side-menu-item:disabled {
   opacity: .6;
   cursor: default;
}
.app-theme-dark .app-side-menu .app-side-menu-item:hover:not(:disabled) {
   background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.app-theme-dark .app-side-menu .app-side-menu-item.selected {
   background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

/* Page headers share the Asset Registry typography across every theme preset. */
.app-page-title {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    line-height: 1.334 !important;
    letter-spacing: 0 !important;
    color: var(--mud-palette-text-primary) !important;
}
.app-page-subtitle {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: var(--mud-palette-primary) !important;
}

/* Include portalled dialogs; the layout marker limits these rules to dark mode. */
body:has(.app-theme-dark) .mud-dialog .mud-dialog-title,
body:has(.app-theme-dark) .mud-table-head .mud-table-cell {
    color: var(--mud-palette-text-primary);
}
body:has(.app-theme-dark) .mud-tab:not(.mud-tab-active):not(.mud-disabled) {
    color: var(--mud-palette-text-secondary);
}

/* Branded modal banners use the same soft foreground as other dark surfaces. */
body:has(.app-theme-dark) .authenticator-brand,
body:has(.app-theme-dark) .recovery-brand {
    background: var(--mud-palette-drawer-background);
    color: var(--mud-palette-text-primary);
}
body:has(.app-theme-dark) .csd-title-logo {
    color: var(--mud-palette-text-primary);
}
body:has(.app-theme-dark) .csd-step--active .csd-step-circle,
body:has(.app-theme-dark) .csd-btn-primary {
    background-color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text) !important;
}
body:has(.app-theme-dark) .csd-step--done .csd-step-circle {
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}
body:has(.app-theme-dark) .csd-step--active .csd-step-label {
    color: var(--mud-palette-primary);
}
body:has(.app-theme-dark) .csd-step--done .csd-step-label {
    color: var(--mud-palette-success);
}
body:has(.app-theme-dark) .csd-step-line--done {
    background: var(--mud-palette-success);
}

/* Overlay content is portalled outside the layout, so use the shared dark marker. */
body:has(.app-theme-dark) .mud-popover {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}
body:has(.app-theme-dark) .mud-popover .mud-menu-item:not(.mud-disabled),
body:has(.app-theme-dark) .mud-popover .mud-list-item:not(.mud-selected-item):not(.mud-disabled) {
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .mud-popover .mud-menu-item:not(.mud-disabled):hover,
body:has(.app-theme-dark) .mud-popover .mud-menu-item:not(.mud-disabled):focus-visible {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}
body:has(.app-theme-dark) .mud-tooltip.mud-tooltip-default {
    background-color: var(--mud-palette-drawer-background);
    color: var(--mud-palette-text-primary);
}
body:has(.app-theme-dark) .mud-tooltip.mud-tooltip-default.mud-tooltip-arrow::after {
    border-top-color: var(--mud-palette-drawer-background);
}

/* Retain severity through the icon and leading border without a bright full fill. */
body:has(.app-theme-dark) .mud-snackbar {
    --app-snackbar-accent: var(--mud-palette-text-secondary);
    color: var(--mud-palette-text-primary);
    background-color: color-mix(in srgb, var(--app-snackbar-accent) 8%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-divider);
    border-inline-start: 4px solid var(--app-snackbar-accent);
}
body:has(.app-theme-dark) .mud-snackbar[class*="-info"] {
    --app-snackbar-accent: var(--mud-palette-info);
}
body:has(.app-theme-dark) .mud-snackbar[class*="-success"] {
    --app-snackbar-accent: var(--mud-palette-success);
}
body:has(.app-theme-dark) .mud-snackbar[class*="-warning"] {
    --app-snackbar-accent: var(--mud-palette-warning);
}
body:has(.app-theme-dark) .mud-snackbar[class*="-error"] {
    --app-snackbar-accent: var(--mud-palette-error);
}
body:has(.app-theme-dark) .mud-snackbar .mud-snackbar-icon {
    color: var(--app-snackbar-accent);
}

/* Softer status surfaces retain semantic accents in dark mode only. */
body:has(.app-theme-dark) :is(.mud-chip, .mud-badge, .mud-alert, .cb-badge) {
    --app-status-tone: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) :is(.mud-chip-color-primary, .mud-badge.mud-theme-primary, .mud-alert-text-primary, .mud-alert-filled-primary, .mud-alert-outlined-primary) {
    --app-status-tone: var(--mud-palette-primary);
}
body:has(.app-theme-dark) :is(.mud-chip-color-secondary, .mud-badge.mud-theme-secondary, .mud-alert-text-secondary, .mud-alert-filled-secondary, .mud-alert-outlined-secondary) {
    --app-status-tone: var(--mud-palette-secondary);
}
body:has(.app-theme-dark) :is(.mud-chip-color-tertiary, .mud-badge.mud-theme-tertiary, .mud-alert-text-tertiary, .mud-alert-filled-tertiary, .mud-alert-outlined-tertiary) {
    --app-status-tone: var(--mud-palette-tertiary);
}
body:has(.app-theme-dark) :is(.mud-chip-color-success, .mud-badge.mud-theme-success, .mud-alert-text-success, .mud-alert-filled-success, .mud-alert-outlined-success) {
    --app-status-tone: var(--mud-palette-success);
}
body:has(.app-theme-dark) :is(.mud-chip-color-warning, .mud-badge.mud-theme-warning, .mud-alert-text-warning, .mud-alert-filled-warning, .mud-alert-outlined-warning) {
    --app-status-tone: var(--mud-palette-warning);
}
body:has(.app-theme-dark) :is(.mud-chip-color-error, .mud-badge.mud-theme-error, .mud-alert-text-error, .mud-alert-filled-error, .mud-alert-outlined-error) {
    --app-status-tone: var(--mud-palette-error);
}
body:has(.app-theme-dark) :is(.mud-chip-color-info, .mud-badge.mud-theme-info, .mud-alert-text-info, .mud-alert-filled-info, .mud-alert-outlined-info) {
    --app-status-tone: var(--mud-palette-info);
}
body:has(.app-theme-dark) .cb-badge--active { --app-status-tone: var(--mud-palette-success); }
body:has(.app-theme-dark) .cb-badge--locked { --app-status-tone: var(--mud-palette-warning); }
body:has(.app-theme-dark) .cb-badge--pending { --app-status-tone: var(--mud-palette-info); }
body:has(.app-theme-dark) :is(.mud-chip:not(.mud-disabled), .mud-badge, .cb-badge) {
    color: var(--app-status-accent, var(--app-status-tone)) !important;
    background-color: color-mix(in srgb, var(--app-status-accent, var(--app-status-tone)) 12%, var(--mud-palette-surface)) !important;
}
body:has(.app-theme-dark) .mud-chip:not(.mud-disabled) {
    border: 1px solid color-mix(in srgb, var(--app-status-accent, var(--app-status-tone)) 40%, transparent);
}
body:has(.app-theme-dark) .mud-chip.mud-clickable:not(.mud-disabled):is(:hover, :focus-visible),
body:has(.app-theme-dark) .mud-chip.mud-chip-selected:not(.mud-disabled) {
    background-color: color-mix(in srgb, var(--app-status-accent, var(--app-status-tone)) 18%, var(--mud-palette-surface)) !important;
}
body:has(.app-theme-dark) .mud-chip.mud-clickable:focus-visible {
    outline: 2px solid var(--app-status-accent, var(--app-status-tone));
    outline-offset: 2px;
}
body:has(.app-theme-dark) .mud-badge.mud-badge-dot {
    background-color: var(--app-status-tone) !important;
}
body:has(.app-theme-dark) .mud-alert {
    color: var(--mud-palette-text-primary);
    background-color: color-mix(in srgb, var(--app-status-tone) 8%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-divider);
    border-inline-start: 3px solid var(--app-status-tone);
}
body:has(.app-theme-dark) .mud-alert .mud-alert-icon {
    color: var(--app-status-tone);
}

/* Dark-mode controls retain semantic action colours and an explicit focus ring. */
body:has(.app-theme-dark) .mud-button-filled-primary:not(:disabled):not(.mud-disabled):is(:hover, :focus-visible, :active) {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 90%, var(--mud-palette-surface));
    color: var(--mud-palette-primary-text);
}
body:has(.app-theme-dark) .app-icon-primary {
    color: var(--mud-palette-primary) !important;
}
body:has(.app-theme-dark) .mud-button-filled-secondary:not(:disabled):not(.mud-disabled):is(:hover, :focus-visible, :active) {
    background-color: color-mix(in srgb, var(--mud-palette-secondary) 90%, var(--mud-palette-surface));
    color: var(--mud-palette-secondary-text);
}
body:has(.app-theme-dark) .app-icon-secondary {
    color: var(--mud-palette-secondary) !important;
}
body:has(.app-theme-dark) .mud-button-filled-tertiary:not(:disabled):not(.mud-disabled):is(:hover, :focus-visible, :active) {
    background-color: color-mix(in srgb, var(--mud-palette-tertiary) 90%, var(--mud-palette-surface));
    color: var(--mud-palette-tertiary-text);
}
body:has(.app-theme-dark) .app-icon-tertiary {
    color: var(--mud-palette-tertiary) !important;
}
body:has(.app-theme-dark) .mud-button-filled-success:not(:disabled):not(.mud-disabled):is(:hover, :focus-visible, :active) {
    background-color: color-mix(in srgb, var(--mud-palette-success) 90%, var(--mud-palette-surface));
    color: var(--mud-palette-success-text);
}
body:has(.app-theme-dark) .app-icon-success {
    color: var(--mud-palette-success) !important;
}
body:has(.app-theme-dark) .mud-button-filled-warning:not(:disabled):not(.mud-disabled):is(:hover, :focus-visible, :active) {
    background-color: color-mix(in srgb, var(--mud-palette-warning) 90%, var(--mud-palette-surface));
    color: var(--mud-palette-warning-text);
}
body:has(.app-theme-dark) .app-icon-warning {
    color: var(--mud-palette-warning) !important;
}
body:has(.app-theme-dark) .mud-button-filled-error:not(:disabled):not(.mud-disabled):is(:hover, :focus-visible, :active) {
    background-color: color-mix(in srgb, var(--mud-palette-error) 90%, var(--mud-palette-surface));
    color: var(--mud-palette-error-text);
}
body:has(.app-theme-dark) .app-icon-error {
    color: var(--mud-palette-error) !important;
}
body:has(.app-theme-dark) .mud-button-filled-info:not(:disabled):not(.mud-disabled):is(:hover, :focus-visible, :active) {
    background-color: color-mix(in srgb, var(--mud-palette-info) 90%, var(--mud-palette-surface));
    color: var(--mud-palette-info-text);
}
body:has(.app-theme-dark) .app-icon-info {
    color: var(--mud-palette-info) !important;
}
body:has(.app-theme-dark) .mud-button-root:focus-visible:not(:disabled):not(.mud-disabled),
body:has(.app-theme-dark) button:not(.mud-button-root):focus-visible:not(:disabled) {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}
body:has(.app-theme-dark) .ic-btn-connect:not(:disabled):not(.mud-disabled) {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    filter: none;
}
body:has(.app-theme-dark) :is(.ic-btn-connect, .csd-btn-primary):not(:disabled):not(.mud-disabled):is(:hover, :focus-visible, :active) {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 90%, var(--mud-palette-surface)) !important;
}
body:has(.app-theme-dark) .ic-btn-manage:not(:disabled):not(.mud-disabled) {
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
}
body:has(.app-theme-dark) .ic-btn-manage:not(:disabled):not(.mud-disabled):is(:hover, :focus-visible) {
    background-color: var(--mud-palette-primary-hover);
}
/* Override custom brand buttons too, without restoring hover or click affordances. */
body:has(.app-theme-dark) .mud-button-root:is(:disabled, .mud-disabled) {
    color: var(--mud-palette-action-disabled) !important;
    box-shadow: none !important;
    filter: none;
}
body:has(.app-theme-dark) .mud-button-filled:is(:disabled, .mud-disabled) {
    background-color: var(--mud-palette-action-disabled-background) !important;
}
body:has(.app-theme-dark) .mud-button-outlined:is(:disabled, .mud-disabled) {
    border-color: var(--mud-palette-divider) !important;
}
body:has(.app-theme-dark) .mud-button-root:is(:disabled, .mud-disabled) .mud-icon-root {
    color: inherit !important;
}

/* Form controls: dark-only neutral states; checked and validation colours stay semantic. */
body:has(.app-theme-dark) .mud-input:not(.mud-disabled) > :is(input, textarea).mud-input-root::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 1;
}
body:has(.app-theme-dark) .mud-input.mud-disabled > :is(input, textarea).mud-input-root::placeholder {
    color: var(--mud-palette-text-disabled);
    opacity: 1;
}
body:has(.app-theme-dark) .mud-input.mud-input-outlined:not(.mud-disabled):not(.mud-input-error):not(:focus-within):hover .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--mud-palette-action-default) 60%, var(--mud-palette-surface));
}
body:has(.app-theme-dark) .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--mud-palette-divider);
}
body:has(.app-theme-dark) .mud-switch-base:not(.mud-checked):not(.mud-switch-disabled) {
    color: var(--mud-palette-action-default);
}
body:has(.app-theme-dark) .mud-switch-base.mud-switch-disabled {
    color: var(--mud-palette-action-disabled) !important;
}
body:has(.app-theme-dark) .mud-switch-base.mud-switch-disabled + .mud-switch-track {
    background-color: var(--mud-palette-action-disabled);
    opacity: .24 !important;
}
/* Native inputs inside these controls receive focus, rather than their icon wrapper. */
body:has(.app-theme-dark) :is(.mud-checkbox, .mud-radio):not(.mud-disabled):not(.mud-readonly)
    .mud-button-root:has(input:focus-visible):not(.mud-disabled),
body:has(.app-theme-dark) .mud-switch:not(.mud-disabled):not(.mud-readonly)
    .mud-switch-base:has(input:focus-visible):not(.mud-switch-disabled) {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    background-color: var(--mud-palette-action-default-hover);
}

/* Date/time pickers and scheduling calendars, including portalled popups. */
body:has(.app-theme-dark) .mud-picker-toolbar {
    background-color: var(--mud-palette-drawer-background) !important;
    color: var(--mud-palette-text-primary) !important;
}
body:has(.app-theme-dark) .mud-picker-toolbar .mud-button-root:not(:disabled):not(.mud-disabled) {
    color: var(--mud-palette-primary);
}
body:has(.app-theme-dark) .mud-picker-timepicker-toolbar .mud-timepicker-button.mud-timepicker-toolbar-text:not(:disabled) {
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .mud-picker-toolbar .mud-button-root:not(:disabled):not(.mud-disabled):hover {
    background-color: var(--mud-palette-action-default-hover);
}
body:has(.app-theme-dark) .mud-picker-time-container .mud-picker-time-clock {
    background-color: var(--mud-palette-background);
}
body:has(.app-theme-dark) .mud-picker-calendar .mud-day.mud-selected:not(.mud-disabled) {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}
body:has(.app-theme-dark) .mud-picker-calendar .mud-day:not(.mud-disabled):not(.mud-selected):hover,
body:has(.app-theme-dark) .mud-picker-calendar .mud-day.mud-range.mud-range-between {
    background-color: var(--mud-palette-primary-hover);
}
body:has(.app-theme-dark) :is(.mud-picker-year, .mud-picker-month):not(.mud-disabled):is(:hover, :focus-visible) {
    background-color: var(--mud-palette-primary-hover);
}
body:has(.app-theme-dark) :is(.mud-picker-year, .mud-picker-month):not(.mud-disabled):focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}
body:has(.app-theme-dark) .mud-picker-calendar .mud-day.mud-disabled,
body:has(.app-theme-dark) :is(.mud-picker-year, .mud-picker-month).mud-disabled {
    color: var(--mud-palette-text-disabled) !important;
    background-color: transparent !important;
}
body:has(.app-theme-dark) .mud-calendar {
    --mud-cal-cell-hover: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}
body:has(.app-theme-dark) .mud-calendar :is(.mud-cal-month-link, .mud-cal-week-link):not([aria-disabled="true"]):hover {
    background-color: var(--mud-cal-cell-hover);
}
body:has(.app-theme-dark) .mud-calendar .cell-selected {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}
body:has(.app-theme-dark) .mud-calendar :is(.mud-cal-month-cell-link, .mud-cal-month-link, .mud-cal-week-link):focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* SVG series and their legend swatches share tokens; light-mode fallbacks stay intact. */
body:has(.app-theme-dark) .app-chart {
    --app-chart-series: var(--mud-palette-info);
    --app-chart-average: var(--mud-palette-warning);
    --app-chart-success: var(--mud-palette-success);
    --app-chart-info: var(--mud-palette-info);
    --app-chart-warning: var(--mud-palette-warning);
    --app-chart-error: var(--mud-palette-error);
}
body:has(.app-theme-dark) .app-chart [aria-label="Chart legend"],
body:has(.app-theme-dark) .mud-chart-legend {
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) :is(.mud-charts-xaxis, .mud-charts-yaxis, .mud-chart-axis-label) {
    fill: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .mud-chart-donut .mud-donut-ring {
    stroke: var(--mud-palette-divider);
}
/* Preserve coloured progress bars/spinners; only soften their inactive tracks. */
body:has(.app-theme-dark) .mud-progress-linear:not(.mud-progress-linear-buffer)::before {
    background-color: var(--mud-palette-text-secondary);
    opacity: .12;
}

/* Navigation controls share the dark text hierarchy without changing light-mode styles. */
body:has(.app-theme-dark) .mud-table-pagination,
body:has(.app-theme-dark) .mud-table-pagination-select .mud-input .mud-input-root,
body:has(.app-theme-dark) .mud-pagination-item:not(.mud-pagination-item-selected)
    .mud-button-root:not(:disabled):not(.mud-disabled),
body:has(.app-theme-dark) .mud-table-pagination-actions .mud-button-root:not(:disabled):not(.mud-disabled) {
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .mud-pagination-item:not(.mud-pagination-item-selected)
    .mud-button-root:not(:disabled):not(.mud-disabled):hover,
body:has(.app-theme-dark) .mud-table-pagination-actions .mud-button-root:not(:disabled):not(.mud-disabled):hover {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}
/* Selected pages retain the component's configured accent and contrast colors.
   Disabled buttons and keyboard focus use the shared button rules above. */
body:has(.app-theme-dark) .mud-breadcrumb-item:not(.mud-disabled) > a {
    color: var(--mud-palette-primary);
}
body:has(.app-theme-dark) .mud-breadcrumb-item:not(.mud-disabled) > a:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}
body:has(.app-theme-dark) .mud-breadcrumb-item.mud-disabled > a {
    color: var(--mud-palette-text-disabled);
}
/* The final, noninteractive crumb identifies the current page. */
body:has(.app-theme-dark) .mud-breadcrumb-item.mud-disabled:last-child > a {
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .mud-breadcrumb-separator > span {
    color: var(--mud-palette-text-disabled);
    opacity: 1;
}
body:has(.app-theme-dark) .mud-breadcrumbs-expander {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .mud-breadcrumbs-expander:is(:hover, :focus-visible) {
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}
body:has(.app-theme-dark) .mud-breadcrumb-item:not(.mud-disabled) > a:focus-visible,
body:has(.app-theme-dark) .mud-breadcrumbs-expander:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* Only neutral step markers change; themed current/completed/error markers
   keep their semantic background and contrast text. */
body:has(.app-theme-dark) .mud-stepper .mud-stepper-nav .mud-step:not(:disabled)
    .mud-step-label .mud-step-label-icon:not([class*="mud-theme-"]) {
    background-color: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .mud-stepper .mud-stepper-nav .mud-step.mud-clickable:not(:disabled):is(:hover, :focus-visible) {
    background-color: var(--mud-palette-action-default-hover);
}
body:has(.app-theme-dark) .mud-stepper .mud-stepper-nav .mud-step.mud-clickable:not(:disabled):focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}
body:has(.app-theme-dark) .mud-stepper .mud-stepper-nav-connector .mud-stepper-nav-connector-line,
body:has(.app-theme-dark) .mud-stepper.mud-stepper__vertical > .mud-stepper-content {
    border-color: var(--mud-palette-divider);
}

/* Expansion headers use the same hierarchy as navigation; semantic icons/chips stay colored. */
body:has(.app-theme-dark) .mud-expand-panel {
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-divider);
}
body:has(.app-theme-dark) .mud-expansion-panels.mud-expansion-panels-borders .mud-expand-panel {
    border-color: var(--mud-palette-divider);
}
body:has(.app-theme-dark) .mud-expand-panel > .mud-expand-panel-header {
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .mud-expand-panel-header .mud-expand-panel-icon {
    color: inherit;
}
body:has(.app-theme-dark) .mud-expand-panel.mud-panel-expanded > .mud-expand-panel-header:not(.mud-disabled) {
    color: var(--mud-palette-text-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
    box-shadow: inset 0 -1px var(--mud-palette-divider);
}
body:has(.app-theme-dark) .mud-expand-panel > .mud-expand-panel-header:not(.mud-disabled):is(:hover, :focus-visible) {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-action-default-hover);
}
body:has(.app-theme-dark) .mud-expand-panel > .mud-expand-panel-header:not(.mud-disabled):focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}
body:has(.app-theme-dark) .mud-expand-panel > .mud-expand-panel-header.mud-disabled {
    color: var(--mud-palette-text-disabled);
    background-color: transparent;
    box-shadow: none;
}
body:has(.app-theme-dark) .mud-expand-panel-header.mud-disabled :is(.mud-typography, .mud-icon-root) {
    color: var(--mud-palette-text-disabled) !important;
}
/* Native disclosure sections appear in request details and account setup too. */
body:has(.app-theme-dark) details > summary {
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) details[open] > summary {
    color: var(--mud-palette-text-primary);
}
body:has(.app-theme-dark) details > summary:hover {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-action-default-hover);
}
body:has(.app-theme-dark) details > summary:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Task drawers and side panels share dark surfaces; the main navigation keeps its own shade. */
body:has(.app-theme-dark) .mud-drawer:not(.app-navigation-drawer),
body:has(.app-theme-dark) .dock-panel {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-divider);
}
body:has(.app-theme-dark) .mud-drawer:not(.app-navigation-drawer) :is(
    .mud-drawer-header, .decision-header, .development-drawer-header, .asset-reference-header,
    .reference-header, .crew-profile-header, .crew-assignment-header, .schedule-header,
    .calendar-settings-header, .history-header),
body:has(.app-theme-dark) .dock-panel .dock-bar {
    background: var(--mud-palette-drawer-background) !important;
    color: var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-divider);
}
body:has(.app-theme-dark) .mud-drawer:not(.app-navigation-drawer) .mud-typography-h6 {
    color: var(--mud-palette-text-primary);
}
/* Neutral icon buttons include close controls; explicit semantic action colors are preserved. */
body:has(.app-theme-dark) .mud-drawer:not(.app-navigation-drawer)
    .mud-icon-button:not([class*="mud-icon-button-color-"]):not(:disabled):not(.mud-disabled),
body:has(.app-theme-dark) .dock-panel .dock-bar button:not(:disabled) {
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .mud-drawer:not(.app-navigation-drawer)
    .mud-icon-button:not(:disabled):not(.mud-disabled):hover,
body:has(.app-theme-dark) .dock-panel .dock-bar button:not(:disabled):hover {
    background-color: var(--mud-palette-action-default-hover);
}
body:has(.app-theme-dark) .dock-panel .dock-bar button:disabled {
    color: var(--mud-palette-action-disabled);
    background-color: transparent;
    cursor: default;
}
/* Mud icon buttons already use shared disabled and keyboard-focus rules. */
body:has(.app-theme-dark) .dock-panel .dock-bar button:not(:disabled):focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Loading and no-data surfaces use tokens, rather than dimming readable text with opacity. */
body:has(.app-theme-dark) .bv-overlay {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .bv-overlay-content .mud-typography-h5 {
    color: var(--mud-palette-text-primary);
}
body:has(.app-theme-dark) .mud-skeleton {
    background-color: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, var(--mud-palette-surface));
}
body:has(.app-theme-dark) .mud-skeleton-wave::after {
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--mud-palette-text-secondary) 8%, transparent), transparent);
}
body:has(.app-theme-dark) :is(.app-empty-state, .hub-empty, .sd-empty, .mud-table-empty-row) {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-divider);
}
body:has(.app-theme-dark) .app-empty-state :is(.mud-typography, .mud-icon-root) {
    opacity: 1 !important;
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .app-empty-state .mud-typography-h6,
body:has(.app-theme-dark) .hub-empty h2 {
    color: var(--mud-palette-text-primary);
}
body:has(.app-theme-dark) .hub-empty > .mud-icon-root,
body:has(.app-theme-dark) .mud-table-empty-row .mud-table-cell {
    color: var(--mud-palette-text-secondary);
}

/* Upload targets and attachment containers; preview images keep their original colors. */
body:has(.app-theme-dark) :is(.app-upload-area, .connection-document-upload, .app-attachment-preview) {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-divider);
}
body:has(.app-theme-dark) :is(.app-upload-area, .connection-document-upload):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-within, .is-dragging, .mud-border-primary) {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}
body:has(.app-theme-dark) :is(.app-upload-area, .connection-document-upload):not(:disabled):not([aria-disabled="true"]):focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
body:has(.app-theme-dark) :is(.app-upload-area[aria-disabled="true"], .connection-document-upload:disabled) {
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-disabled);
    border-color: var(--mud-palette-divider) !important;
    cursor: default !important;
}
body:has(.app-theme-dark) :is(.app-upload-area[aria-disabled="true"], .connection-document-upload:disabled)
    :is(.mud-typography, .mud-icon-root, .mud-link) {
    color: var(--mud-palette-text-disabled) !important;
}

/* Rich text chrome follows the palette; authored text colors and color swatches stay intact. */
body:has(.app-theme-dark) :is(.ql-toolbar.ql-snow, .ql-container.ql-snow) {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-divider);
}
body:has(.app-theme-dark) .ql-toolbar.ql-snow {
    background: var(--mud-palette-drawer-background);
}
body:has(.app-theme-dark) .ql-editor.ql-blank::before {
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .ql-snow :is(.ql-picker, button) {
    color: var(--mud-palette-text-secondary);
}
body:has(.app-theme-dark) .ql-snow .ql-stroke:not(.ql-color-label) {
    stroke: currentColor;
}
body:has(.app-theme-dark) .ql-snow .ql-fill:not(.ql-color-label) {
    fill: currentColor;
}
body:has(.app-theme-dark) .ql-toolbar.ql-snow :is(button, .ql-picker-label):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible, .ql-active),
body:has(.app-theme-dark) .ql-toolbar.ql-snow .ql-picker.ql-expanded > .ql-picker-label {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}
body:has(.app-theme-dark) .ql-toolbar.ql-snow :is(button, .ql-picker-label):not(:disabled):not([aria-disabled="true"]):focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}
body:has(.app-theme-dark) .ql-container.ql-snow:not(.ql-disabled):focus-within {
    border-color: var(--mud-palette-primary);
}
body:has(.app-theme-dark) .ql-snow :is(.ql-picker-options, .ql-tooltip) {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-divider);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
body:has(.app-theme-dark) .ql-snow .ql-tooltip input[type="text"] {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-divider);
}
body:has(.app-theme-dark) .ql-snow .ql-picker-item:is(:hover, .ql-selected) {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}
body:has(.app-theme-dark) .ql-toolbar.ql-snow :is(button:disabled, [aria-disabled="true"]),
body:has(.app-theme-dark) .ql-container.ql-disabled {
    color: var(--mud-palette-text-disabled);
    background-color: var(--mud-palette-action-disabled-background);
    border-color: var(--mud-palette-divider);
}
body:has(.app-theme-dark) .ql-container.ql-disabled .ql-editor {
    color: var(--mud-palette-text-disabled);
}

/* Include the document scrollbar and portalled dialogs/drawers, only while dark mode is active. */
html:has(.app-theme-dark),
body:has(.app-theme-dark),
body:has(.app-theme-dark) * {
    scrollbar-color: var(--mud-palette-action-disabled, #778398)
        var(--mud-palette-drawer-background, #171c28);
}
/* Chromium/WebKit exposes handle hover states. Use its pseudo-elements instead
   of scrollbar-color here, since the standard property overrides these styles. */
@supports selector(::-webkit-scrollbar) {
    html:has(.app-theme-dark),
    body:has(.app-theme-dark),
    body:has(.app-theme-dark) * {
        scrollbar-color: auto;
    }
    html:has(.app-theme-dark)::-webkit-scrollbar,
    body:has(.app-theme-dark)::-webkit-scrollbar,
    body:has(.app-theme-dark) *::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    html:has(.app-theme-dark)::-webkit-scrollbar-track,
    body:has(.app-theme-dark)::-webkit-scrollbar-track,
    body:has(.app-theme-dark) *::-webkit-scrollbar-track,
    html:has(.app-theme-dark)::-webkit-scrollbar-corner,
    body:has(.app-theme-dark)::-webkit-scrollbar-corner,
    body:has(.app-theme-dark) *::-webkit-scrollbar-corner {
        background: var(--mud-palette-drawer-background, #171c28);
    }
    html:has(.app-theme-dark)::-webkit-scrollbar-thumb,
    body:has(.app-theme-dark)::-webkit-scrollbar-thumb,
    body:has(.app-theme-dark) *::-webkit-scrollbar-thumb {
        background: var(--mud-palette-action-disabled, #778398);
        border: 3px solid var(--mud-palette-drawer-background, #171c28);
        border-radius: 8px;
    }
    html:has(.app-theme-dark)::-webkit-scrollbar-thumb:hover,
    body:has(.app-theme-dark)::-webkit-scrollbar-thumb:hover,
    body:has(.app-theme-dark) *::-webkit-scrollbar-thumb:hover {
        background: var(--mud-palette-text-secondary, #AAB6C8);
    }
    html:has(.app-theme-dark)::-webkit-scrollbar-thumb:active,
    body:has(.app-theme-dark)::-webkit-scrollbar-thumb:active,
    body:has(.app-theme-dark) *::-webkit-scrollbar-thumb:active {
        background: var(--mud-palette-text-primary, #D3DAE5);
    }
}

/* Subtle grid interactions, shared by MudTable, MudDataGrid and MudSimpleTable. */
body:has(.app-theme-dark) .mud-table {
    --mud-palette-table-hover: color-mix(in srgb, var(--mud-palette-text-secondary) 6%, var(--mud-palette-surface));
    --app-row-selected: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    --app-row-selected-hover: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
}
body:has(.app-theme-dark) .mud-table .mud-table-body > .mud-table-row:is(.app-row-selected, [aria-selected="true"]) {
    background-color: var(--app-row-selected);
}
body:has(.app-theme-dark) .mud-table-hover .mud-table-body > .mud-table-row:is(.app-row-selected, [aria-selected="true"]):hover {
    background-color: var(--app-row-selected-hover);
}

/* Clickable breadcrumbs advertise navigation in every theme. */
.mud-breadcrumbs .mud-breadcrumb-item:not(.mud-disabled) > a[href] {
    color: var(--mud-palette-primary);
}
.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled > a,
.mud-breadcrumbs .mud-breadcrumb-item > a:not([href]) {
    color: var(--mud-palette-text-secondary);
}

/* The account menu renders in the global popover layer. */
.mud-menu-item.account-sign-out {
   margin: 12px;
   width: calc(100% - 24px);
   min-height: 44px;
   padding: 12px 16px;
   border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
   border-radius: 8px;
   color: var(--mud-palette-error);
   background-color: color-mix(in srgb, var(--mud-palette-error) 10%, var(--mud-palette-surface));
}

.mud-menu-item.account-sign-out:hover,
.mud-menu-item.account-sign-out:focus-visible {
   background-color: color-mix(in srgb, var(--mud-palette-error) 18%, var(--mud-palette-surface));
   border-color: var(--mud-palette-error);
}

.mud-menu-item.account-sign-out:focus-visible {
   outline: 2px solid var(--mud-palette-error);
   outline-offset: 2px;
}

/* Phone navigation overlays the portal and must never reserve a mini-drawer gutter. */
@media (max-width: 599.98px) {
   .mud-main-content.customer-portal-content {
      margin-left: 0 !important;
      margin-right: 0 !important;
   }
}

/* Hide the desktop rail immediately while the viewport callback switches to the phone overlay. */
@media (max-width: 599.98px) {
   .customer-portal-desktop-drawer {
      display: none !important;
   }
}

@media (max-width: 599.98px) {
   .customer-portal-footer {
      padding: 0 12px env(safe-area-inset-bottom, 0px) !important;
   }
   .customer-portal-footer > .mud-container { padding-inline: 0; }
}

/* Keep column configuration reachable when wide grids scroll horizontally. */
.mud-table .mud-table-head .grid-column-picker-header {
   position: sticky !important;
   right: 0;
   z-index: 10 !important;
   width: 54px;
   min-width: 54px;
   padding: 8px !important;
   background: var(--mud-palette-surface) !important;
   box-shadow: -3px 0 5px -3px var(--mud-palette-text-disabled);
}

/* Theme names keep a neutral foreground across presets, including portalled menus. */
.theme-picker-item,
.theme-picker-item .mud-typography {
   color: #1B202B;
}

body:has(.app-theme-dark) .theme-picker-item,
body:has(.app-theme-dark) .theme-picker-item .mud-typography {
   color: #E5E7EB;
}

/* Shared interaction styling for dashboard customization cards. */
.mud-paper.dashboard-widget-option {
   transition: border-color .2s ease, box-shadow .2s ease;
}
.mud-paper.dashboard-widget-option:hover,
.mud-paper.dashboard-widget-option:focus-within {
   border-color: var(--mud-palette-primary);
   box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
@media (prefers-reduced-motion: reduce) {
   .mud-paper.dashboard-widget-option {
      transition: none;
   }
}

/* Workflow activities keep their originating stage mounted behind one modal. */
.workflow-action-dialog {
   height: calc(100dvh - 48px);
   max-height: calc(100dvh - 48px);
   display: flex;
   flex-direction: column;
   overflow: hidden;
}
.workflow-action-dialog .mud-dialog-title {
   flex: 0 0 auto;
   background: var(--mud-palette-primary-hover);
   border-bottom: 1px solid var(--mud-palette-lines-default);
}
.workflow-action-dialog .mud-dialog-content {
   flex: 1 1 0;
   scrollbar-gutter: stable;
   overflow-y: auto;
   min-height: 0;
   overscroll-behavior: contain;
}
.workflow-action-dialog .mud-dialog-actions {
   flex: 0 0 auto;
   border-top: 1px solid var(--mud-palette-lines-default);
   padding: 12px 24px;
}
.workflow-action-dialog.funding-action-dialog {
   height: calc(100dvh - 48px);
   display: flex;
   flex-direction: column;
   overflow: hidden;
}
.funding-action-dialog .mud-dialog-title {
   flex: 0 0 auto;
}
.funding-action-dialog .mud-dialog-content {
   flex: 1 1 0;
   scrollbar-gutter: stable;
}
.funding-action-dialog .mud-dialog-actions {
   display: none;
}
@media (max-width: 600px) {
   .workflow-action-dialog {
      margin: 8px;
      width: calc(100% - 16px);
      height: calc(100dvh - 16px);
      max-height: calc(100dvh - 16px);
   }
   .workflow-action-dialog.funding-action-dialog {
      height: calc(100dvh - 16px);
   }
}

.workflow-action-dialog .mud-dialog-content {
   display: block;
   width: 100%;
   min-width: 0;
   overflow-x: auto;
}
.workflow-action-dialog .mud-dialog-content > .mud-container {
   width: 100%;
   max-width: 100%;
   margin-inline: 0;
   box-sizing: border-box;
}

.workflow-action-dialog.schedule-action-dialog {
   height: calc(100dvh - 48px);
   display: flex;
   flex-direction: column;
   overflow: hidden;
}
.schedule-action-dialog .mud-dialog-title,
.schedule-action-dialog .mud-dialog-actions { flex: 0 0 auto; }
.schedule-action-dialog .mud-dialog-content {
   flex: 1 1 0;
   min-height: 0;
   scrollbar-gutter: stable;
}
@media (max-width: 600px) {
   .workflow-action-dialog.schedule-action-dialog { height: calc(100dvh - 16px); }
}