/* Font Face Definitions */
@font-face {
    font-family: 'NotoColorEmoji';
    src: url('fonts/NotoColorEmoji-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* Unicode range for emoji including regional indicators for flags */
    unicode-range: U+1F1E6-1F1FF, U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+1F900-1F9FF, U+2600-26FF, U+2700-27BF;
}

:root {
    --mud-typography-default-family: Arial, sans-serif;
    --mud-typography-h1-family: Arial, sans-serif;
    --mud-typography-h2-family: Arial, sans-serif;
    --mud-typography-h3-family: Arial, sans-serif;
    --mud-typography-h4-family: Arial, sans-serif;
    --mud-typography-h5-family: Arial, sans-serif;
    --mud-typography-h6-family: Arial, sans-serif;
    --mud-typography-subtitle1-family: Arial, sans-serif;
    --mud-typography-subtitle2-family: Arial, sans-serif;
    --mud-typography-body1-family: Arial, sans-serif;
    --mud-typography-body2-family: Arial, sans-serif;
    --mud-typography-button-family: Arial, sans-serif;
    --mud-typography-caption-family: Arial, sans-serif;
    --mud-typography-overline-family: Arial, sans-serif;
}

html, body {
    font-family: Arial, sans-serif;
}

.mud-typography {
    font-family: Arial, sans-serif;
}

:is(html, body).portal-light-mode,
:is(html, body).portal-dark-mode {
    transition: background-color 0.2s ease, color 0.2s ease;
}

:is(html, body).portal-light-mode {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

:is(html, body).portal-dark-mode {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

a, .btn-link {
    color: #006bb7;
}

.mud-navmenu .mud-nav-link,
.mud-navmenu .mud-nav-link:hover,
.mud-navmenu .mud-nav-link:focus,
.mud-navmenu .mud-nav-link:visited,
.mud-navmenu .mud-nav-link .mud-nav-link-text,
.mud-navmenu .mud-nav-link .mud-nav-link-text:hover,
.mud-navmenu .mud-nav-link .mud-nav-link-text:focus,
.mud-navmenu .mud-nav-link .mud-typography,
.mud-navmenu .mud-nav-link .mud-typography:hover,
.mud-navmenu .mud-nav-link .mud-typography:focus {
    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;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.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;
}

.content-margin {
    margin-left: 20px; /* Adjust as needed */
    margin-right: 20px;
    padding: 20px;
}

.light-grey-content {
    background-color: #f3f3f3 !important; /* Light grey */
    min-height: 100vh; /* Ensure it covers the full height */
}

:is(html, body).portal-light-mode .mud-appbar.main-layout-appbar,
:is(html, body).portal-dark-mode .mud-appbar.main-layout-appbar {
    /* Keep the top app bar aligned with the active theme and preserve a subtle divider. */
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    border-bottom: 1px solid var(--portal-divider-color);
    box-shadow: var(--portal-appbar-shadow);
    transition: background-color 0.2s ease, color 0.2s ease;
}

:is(html, body).portal-light-mode .mud-paper.main-layout-content,
:is(html, body).portal-dark-mode .mud-paper.main-layout-content {
    /* Main page canvas background that sits behind all routed content. */
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    min-height: 100vh;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.main-layout-body {
    color: inherit;
}

.e-grid {
    border-radius: 16px;
    overflow: hidden;
}

/* Table pages render a ContentSkeleton in the grid's EmptyRecordTemplate while loading, so the grid
   is the single loading indicator. Suppress Syncfusion's built-in centre spinner to avoid showing a
   skeleton AND a spinner at once ("double loading"). Scoped to grids: other Syncfusion components
   keep their spinners. Grids here bind in-memory data, so no spinner feedback is lost. */
.e-grid .e-spinner-pane {
    display: none !important;
}

.mud-card {
    border-radius: 16px;
}

.mud-button-root.mud-button:not(.mud-icon-button):not(.mud-fab) {
    border-radius: 10px;
}

.mud-button-group {
    border-radius: 10px;
}

.mud-menu {
    border-radius: 10px;
}

/* Keep the outer content shell on the darker page background while inner content can use the surface tone. */
:is(html, body).portal-light-mode .main-layout-content .mud-main-content,
:is(html, body).portal-dark-mode .main-layout-content .mud-main-content {
    background-color: var(--mud-palette-background);
}

/* Match the rendered page body to the same surface color as the app bar and drawer. */
:is(html, body).portal-light-mode .main-layout-body,
:is(html, body).portal-dark-mode .main-layout-body {
    background-color: var(--mud-palette-surface);
    min-height: 100vh;
    width: 100%;
}

/* Keep structural surfaces like drawers, dialogs, and popovers on a solid themed surface. */
:is(html, body).portal-dark-mode .mud-drawer,
:is(html, body).portal-dark-mode .mud-navmenu,
:is(html, body).portal-dark-mode .mud-popover,
:is(html, body).portal-dark-mode .mud-dialog {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* Keep only the routed content canvas transparent; component papers should continue using the theme surface. */
:is(html, body).portal-dark-mode .main-layout-content > .mud-main-content {
    background-color: transparent;
    color: var(--mud-palette-text-primary);
}

/* Restore a solid background for floating menus/popovers so they don't look transparent in dark mode. */
:is(html, body).portal-dark-mode .mud-popover .mud-paper,
:is(html, body).portal-dark-mode .mud-menu .mud-paper {
    background-color: rgba(17, 24, 39, 0.96);
    border: 1px solid rgba(248, 250, 252, 0.22);
    box-shadow: 0 12px 32px rgba(2, 6, 23, 0.45);
}

/* Ensure the menu list inside floating overlays uses the same solid dark surface. */
:is(html, body).portal-dark-mode .mud-popover,
:is(html, body).portal-dark-mode .mud-menu,
:is(html, body).portal-dark-mode .mud-popover .mud-list,
:is(html, body).portal-dark-mode .mud-menu .mud-list {
    background-color: rgba(17, 24, 39, 0.96);
    color: var(--mud-palette-text-primary);
}

    /* Force menu item text back to a readable light color inside dark popovers. */
:is(html, body).portal-dark-mode .mud-popover .mud-list-item,
:is(html, body).portal-dark-mode .mud-menu .mud-list-item {
        color: var(--mud-palette-text-primary);
    }

    /* Global dark-mode styling for MudMenu row-action popovers rendered outside table DOM. */
:is(html, body).portal-dark-mode .mud-popover:has(> .mud-menu-list) {
        background-color: rgba(17, 24, 39, 0.98);
        border: 1px solid rgba(248, 250, 252, 0.28);
        border-radius: 8px;
        box-shadow: 0 12px 32px rgba(2, 6, 23, 0.45);
    }

    /* Keep the menu list container transparent so the popover shell provides the visible dark surface. */
:is(html, body).portal-dark-mode .mud-popover .mud-menu-list {
        background-color: transparent;
        color: var(--mud-palette-text-primary);
    }

    /* Force every visible text/icon node inside MudMenu items to inherit the dark-mode primary text color. */
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item,
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item .mud-menu-item-text,
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item .mud-typography,
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item .mud-menu-item-icon,
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item .mud-icon-root {
        color: var(--mud-palette-text-primary);
    }

        /* MudBlazor marks disabled menu actions with .mud-disabled, so override those descendants to use the disabled token instead of the normal text color. */
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item.mud-disabled,
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item.mud-disabled .mud-menu-item-text,
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item.mud-disabled .mud-typography,
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item.mud-disabled .mud-menu-item-icon,
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item.mud-disabled .mud-icon-root {
            color: var(--mud-palette-action-disabled);
            opacity: 1;
        }

        /* Add a subtle light hover/focus fill for selectable menu actions so row-action menus are easier to scan in dark mode. */
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item:not(.mud-disabled):hover,
:is(html, body).portal-dark-mode .mud-popover .mud-menu-item:not(.mud-disabled):focus-visible {
            background-color: rgba(226, 232, 240, 0.08);
        }

/* Make the left drawer edge visible in dark mode without introducing a heavy separator. */
:is(html, body).portal-dark-mode .mud-drawer {
    border-right: 1px solid rgba(248, 250, 252, 0.2);
    box-shadow: 1px 0 0 rgba(248, 250, 252, 0.08);
}

:is(html, body).portal-light-mode .mud-paper,
:is(html, body).portal-light-mode .mud-main-content,
:is(html, body).portal-light-mode .mud-drawer,
:is(html, body).portal-light-mode .mud-navmenu,
:is(html, body).portal-light-mode .mud-popover,
:is(html, body).portal-light-mode .mud-dialog {
    color: var(--mud-palette-text-primary);
}

/* Allow common MudBlazor text/icon primitives to inherit the surrounding themed color. */
:is(html, body).portal-dark-mode .mud-nav-link,
:is(html, body).portal-dark-mode .mud-list-item,
:is(html, body).portal-dark-mode .mud-input,
:is(html, body).portal-dark-mode .mud-input-slot,
:is(html, body).portal-dark-mode .mud-typography,
:is(html, body).portal-dark-mode .mud-button-root,
:is(html, body).portal-dark-mode .mud-icon-root {
    color: inherit;
}

/* Normalize browser autofill so saved credentials do not paint over themed MudBlazor fields. */
:is(html, body).portal-light-mode input:-webkit-autofill,
:is(html, body).portal-light-mode input:-webkit-autofill:hover,
:is(html, body).portal-light-mode input:-webkit-autofill:focus,
:is(html, body).portal-light-mode textarea:-webkit-autofill,
:is(html, body).portal-light-mode textarea:-webkit-autofill:hover,
:is(html, body).portal-light-mode textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mud-palette-text-primary);
    caret-color: var(--mud-palette-text-primary);
    box-shadow: 0 0 0 1000px var(--mud-palette-surface) inset;
    transition: background-color 9999s ease-out;
}

:is(html, body).portal-dark-mode input:-webkit-autofill,
:is(html, body).portal-dark-mode input:-webkit-autofill:hover,
:is(html, body).portal-dark-mode input:-webkit-autofill:focus,
:is(html, body).portal-dark-mode textarea:-webkit-autofill,
:is(html, body).portal-dark-mode textarea:-webkit-autofill:hover,
:is(html, body).portal-dark-mode textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mud-palette-text-primary);
    caret-color: var(--mud-palette-text-primary);
    box-shadow: 0 0 0 1000px var(--mud-palette-surface) inset;
    transition: background-color 9999s ease-out;
}

/* Shared outlined card styling for account/settings-style panels in light mode. */
:is(html, body).portal-light-mode .theme-surface-card {
    border-color: rgba(16, 24, 40, 0.12);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08), 0 0 0 1px rgba(16, 24, 40, 0.03);
}

/* Shared outlined card styling for account/settings-style panels in dark mode. */
:is(html, body).portal-dark-mode .theme-surface-card {
    border-color: rgba(248, 250, 252, 0.2);
    background-color: var(--mud-palette-surface);
    box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.06), 0 10px 28px rgba(248, 250, 252, 0.04);
}

/* Light-mode secondary option block on promotion screen uses an existing neutral token,
   while dark mode continues to inherit the shared theme-surface-card styling. */
:is(html, body).portal-light-mode .candidate-promotion-options {
    background-color: var(--portal-auth-otp-background);
}

/* Dedicated email management card styling in light mode. */
:is(html, body).portal-light-mode .account-manage-email-card {
    border-color: rgba(16, 24, 40, 0.12);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 0 0 1px rgba(16, 24, 40, 0.03);
}

/* Dedicated email management card styling in dark mode. */
:is(html, body).portal-dark-mode .account-manage-email-card {
    border-color: rgba(248, 250, 252, 0.2);
    background-color: var(--mud-palette-surface);
    box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.05), 0 8px 24px rgba(248, 250, 252, 0.03);
}

/* Shared bordered paper styling in light mode for filter panels and section containers. */
:is(html, body).portal-light-mode .account-manage-paper {
    border: 1px solid rgba(16, 24, 40, 0.12);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 0 0 1px rgba(16, 24, 40, 0.03);
}

/* Shared bordered paper styling in dark mode for filter panels and section containers. */
:is(html, body).portal-dark-mode .account-manage-paper {
    border: 1px solid rgba(248, 250, 252, 0.2);
    background-color: var(--mud-palette-surface);
    box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.05), 0 8px 24px rgba(248, 250, 252, 0.03);
}

.account-manage-paper {
    border-radius: 16px;
}

/* Keep MudBlazor tooltips readable against both the light and dark portal surfaces. */
:is(html, body).portal-light-mode .mud-tooltip.mud-tooltip-default {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid rgba(16, 24, 40, 0.12);
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12), 0 0 0 1px rgba(16, 24, 40, 0.04);
}

:is(html, body).portal-dark-mode .mud-tooltip.mud-tooltip-default {
    color: var(--mud-palette-text-primary);
    background-color: var(--portal-syncfusion-surface, #111827);
    border: 1px solid rgba(248, 250, 252, 0.22);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.48), 0 0 0 1px rgba(248, 250, 252, 0.06);
}

/* Utility to remove the inherited paper fill when a section should only show border/shadow. */
:is(html, body).portal-dark-mode .transparent-surface-paper {
    background-color: transparent;
}

/* Reusable button outline treatment for dark and light themes. */
:is(html, body).portal-light-mode .dark-outline-button {
    border: 1px solid rgba(16, 24, 40, 0.14);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

:is(html, body).portal-dark-mode .dark-outline-button {
    border: 1px solid rgba(248, 250, 252, 0.22);
    box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.05), 0 6px 18px rgba(248, 250, 252, 0.03);
}

/* Email form outlined fields need a brighter border in dark mode to stay readable. */
:is(html, body).portal-dark-mode .account-manage-email-field .mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-color: rgba(248, 250, 252, 0.2);
}

/* Slightly brighten email field borders on hover in dark mode. */
:is(html, body).portal-dark-mode .account-manage-email-field .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover > .mud-input-outlined-border {
    border-color: rgba(248, 250, 252, 0.3);
}

/* Make the active/focused email field border the clearest state in dark mode. */
:is(html, body).portal-dark-mode .account-manage-email-field .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border {
    border-color: rgba(248, 250, 252, 0.4);
}

/* Syncfusion grid dark-mode surface and border tuning to match the portal theme. */
:is(html, body).portal-dark-mode .e-grid,
:is(html, body).portal-dark-mode .e-gridheader,
:is(html, body).portal-dark-mode .e-gridcontent,
:is(html, body).portal-dark-mode .e-toolbar,
:is(html, body).portal-dark-mode .e-pager,
:is(html, body).portal-dark-mode .e-grid .e-table {
    background-color: var(--portal-syncfusion-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--portal-divider-color);
}

    /* Slightly elevate grid header over the main grid body in dark mode. */
:is(html, body).portal-dark-mode .e-grid .e-gridheader {
        background-color: var(--portal-syncfusion-elevated);
    }

    /* Give the top search toolbar its own blue-toned dark surface without affecting the table body or pager. */
:is(html, body).portal-dark-mode .e-grid .e-toolbar,
:is(html, body).portal-dark-mode .e-grid .e-toolbar .e-toolbar-items,
:is(html, body).portal-dark-mode .e-grid .e-toolbar .e-toolbar-left,
:is(html, body).portal-dark-mode .e-grid .e-toolbar .e-toolbar-right {
        background-color: #011638;
    }

        /* Give the search box its own slightly brighter surface so it doesn't blend into the toolbar. */
:is(html, body).portal-dark-mode .e-grid .e-toolbar .e-search-wrapper,
:is(html, body).portal-dark-mode .e-grid .e-toolbar .e-input-group,
:is(html, body).portal-dark-mode .e-grid .e-toolbar input.e-input {
            background-color: #1b2739;
            color: var(--mud-palette-text-primary);
            border-color: rgba(248, 250, 252, 0.18);
        }

    /* Use a darker hover/selection tint inside Syncfusion grids for consistent dark-mode feedback. */
:is(html, body).portal-dark-mode .e-grid .e-row:hover td,
:is(html, body).portal-dark-mode .e-grid .e-altrow:hover td,
:is(html, body).portal-dark-mode .e-grid .e-selectionbackground {
        background-color: var(--portal-syncfusion-hover);
    }

:is(html, body).portal-dark-mode .e-grid .e-row:hover td .mud-menu,
:is(html, body).portal-dark-mode .e-grid .e-row:hover td .mud-button-root,
:is(html, body).portal-dark-mode .e-grid .e-row:hover td .mud-icon-button,
:is(html, body).portal-dark-mode .e-grid .e-altrow:hover td .mud-menu,
:is(html, body).portal-dark-mode .e-grid .e-altrow:hover td .mud-button-root,
:is(html, body).portal-dark-mode .e-grid .e-altrow:hover td .mud-icon-button {
            background-color: var(--portal-syncfusion-hover);
            border-radius: 999px;
        }

    /* Keep grid cell borders and text readable after the Syncfusion dark theme swap. */
:is(html, body).portal-dark-mode .e-grid .e-headercell,
:is(html, body).portal-dark-mode .e-grid .e-rowcell,
:is(html, body).portal-dark-mode .e-grid .e-summarycell,
:is(html, body).portal-dark-mode .e-grid .e-toolbar-items,
:is(html, body).portal-dark-mode .e-grid .e-pagercontainer {
        border-color: var(--portal-divider-color);
        color: var(--mud-palette-text-primary);
    }

.light-blue-content {
    background-color: #4c94b0 !important; /* Light blue */
    min-height: 100vh; /* Ensure it covers the full height */
}

.small-button {
    font-size: 0.75rem; /* Adjust text size */
    padding: 4px 8px; /* Reduce button padding */
    min-width: auto; /* Prevent unnecessary width */
}

.login-background {
    background-image: url('/_content/AttituXPortal.Shared/attitux_stripes_bg.png');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

:is(html, body).portal-dark-mode .login-background {
    background-image: url('/_content/AttituXPortal.Shared/attitux_stripes_bg_dark.png');
}

.default-register-panel {
    background-color: #ffffff;
}

.default-register-background {
    background-image: url('/_content/AttituXPortal.Shared/attitux_stripes_bg.png');
}

.drawmetrics-register-panel {
    background-color: #ffffff;
}

.drawmetrics-register-background {
    background-image: url('/_content/AttituXPortal.Shared/drawmetrics-bg.png');
}

:is(html, body).portal-dark-mode .default-register-panel {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

:is(html, body).portal-dark-mode .default-register-panel .register-form-card {
        background-color: var(--mud-palette-surface);
        color: var(--mud-palette-text-primary);
        border: 1px solid rgba(248, 250, 252, 0.18);
        box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.05), 0 10px 28px rgba(248, 250, 252, 0.04);
    }

:is(html, body).portal-dark-mode .default-register-background {
    background-image: url('/_content/AttituXPortal.Shared/attitux_stripes_bg_dark.png');
}

:is(html, body).portal-dark-mode .drawmetrics-register-panel {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

:is(html, body).portal-dark-mode .drawmetrics-register-panel .register-form-card {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(248, 250, 252, 0.18);
    box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.05), 0 10px 28px rgba(248, 250, 252, 0.04);
}

:is(html, body).portal-dark-mode .drawmetrics-register-background {
    background-image: linear-gradient(135deg, rgba(11, 18, 32, 0.84), rgba(22, 31, 48, 0.72)), url('/_content/AttituXPortal.Shared/drawmetrics-bg.png');
}

/* Default to the light application logo and only swap once dark mode is active. */
.auth-theme-logo-dark,
.appbar-theme-logo-dark {
    display: none;
}

:is(html, body).portal-dark-mode .auth-theme-logo-light,
:is(html, body).portal-dark-mode .appbar-theme-logo-light {
    display: none;
}

:is(html, body).portal-dark-mode .auth-theme-logo-dark,
:is(html, body).portal-dark-mode .appbar-theme-logo-dark {
    display: block;
}

/* ============================================================================
   InternationalPhoneNumberInput: Emoji font for country flags
   ============================================================================ */
/* Using unicode-range in @font-face, emoji characters automatically use
   NotoColorEmoji while regular text uses standard fonts. This provides the
   best of both worlds: normal spacing for numbers and color emoji for flags. */
.country-code-select,
.country-code-select *,
.country-code-select input,
.country-code-select .mud-input-slot,
.country-code-select .mud-input-slot *,
.country-code-select .mud-select,
.country-code-select .mud-select *,
.country-code-select .mud-input-control,
.country-code-select .mud-input-control *,
.country-code-select .mud-input-root,
.country-code-select .mud-input-root *,
.country-code-select .mud-input-text,
.country-code-select .mud-select-input {
    font-family: 'NotoColorEmoji', 'Segoe UI Emoji', 'Apple Color Emoji', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Sensitivity slider - value bubble positioned under thumb */
.sensitivity-value-bubble {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    font-weight: 500;
    color: #424242;
    pointer-events: none;
    white-space: nowrap;
}

/* Sensitivity slider - instant track fill when dragging */
.sensitivity-slider-wrapper .mud-slider-inner-container * {
    transition: none !important;
}

.payment-status-chip {
    background-color: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-primary);
}

.mud-chip.mud-chip-filled.team-member-status-inactive {
    background-color: var(--portal-status-inactive-background);
    color: var(--portal-status-inactive-text);
}

/* Shared report-catalog card shell used by both individual and bundled report tiles. */
.report-catalog-card {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--portal-divider-color);
}

/* Keep the main card body on the same themed surface as the card shell. */
.report-catalog-card-content {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* Footer actions stay on the same surface so the card does not split into mismatched bands. */
.report-catalog-card-actions {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-top: 1px solid var(--portal-divider-color);
}

/* Inner report detail blocks sit one level deeper on the page background tone. */
.report-catalog-panel {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--portal-divider-color);
}

/* Centralize body-text color so report content follows the active theme automatically. */
.report-catalog-body-text {
    color: var(--mud-palette-text-primary);
}

/* Locked overlays are shared between report variants and only cover the content region. */
.report-catalog-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

/* Lock label styling stays separate so only theme colors swap between light and dark modes. */
.report-catalog-lock-text {
    font-weight: bold;
    transform: rotate(-20deg);
    user-select: none;
}

/* Light mode keeps the legacy soft white lock treatment over bright surfaces. */
:is(html, body).portal-light-mode .report-catalog-lock-overlay {
    background-color: rgba(255, 255, 255, 0.5);
}

:is(html, body).portal-light-mode .report-catalog-lock-text {
    color: rgba(0, 0, 0, 0.3);
}

/* Dark mode deepens the card shell and panels to avoid light-on-light readability issues. */
:is(html, body).portal-dark-mode .report-catalog-card {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--portal-divider-color);
    box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.05), 0 10px 28px rgba(2, 6, 23, 0.32);
}

:is(html, body).portal-dark-mode .report-catalog-card-content,
:is(html, body).portal-dark-mode .report-catalog-card-actions {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* Secondary report panels use a slightly lifted dark tone to preserve hierarchy inside the card. */
:is(html, body).portal-dark-mode .report-catalog-panel {
    background-color: rgba(34, 49, 74, 0.72);
    color: var(--mud-palette-text-primary);
    border-color: rgba(148, 163, 184, 0.24);
}

:is(html, body).portal-dark-mode .report-catalog-body-text {
    color: var(--mud-palette-text-primary);
}

/* Dark mode lock overlay shifts to a blue-black veil so text remains readable underneath. */
:is(html, body).portal-dark-mode .report-catalog-lock-overlay {
    background-color: rgba(11, 18, 32, 0.64);
}

:is(html, body).portal-dark-mode .report-catalog-lock-text {
    color: rgba(248, 250, 252, 0.78);
}

/* Coming-soon label mirrors the lock treatment but with a warning tint so unreleased
   reports read differently from locked-but-purchasable ones. */
.report-catalog-comingsoon-text {
    font-weight: bold;
    transform: rotate(-20deg);
    user-select: none;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

:is(html, body).portal-light-mode .report-catalog-comingsoon-text {
    color: rgba(180, 83, 9, 0.55);
}

:is(html, body).portal-dark-mode .report-catalog-comingsoon-text {
    color: rgba(251, 191, 36, 0.8);
}

.report-two-column-header {
    background-color: var(--report-two-column-light-header-background);
    color: var(--mud-palette-text-primary);
}

.report-one-column-header {
    background-color: var(--report-one-column-light-header-background);
    color: var(--mud-palette-text-primary);
}

.report-three-column-header {
    background-color: var(--report-three-column-light-header-background);
    color: var(--mud-palette-text-primary);
}

.report-two-column-header-fixed,
.report-two-column-cell-fixed {
    width: 300px;
    min-width: 300px;
}

.report-two-column-cell-rich {
    white-space: pre-line;
    text-align: justify;
}

.report-one-column-cell {
    white-space: pre-line;
}

.report-one-column-cell-blurred {
    color: transparent !important;
    text-shadow: 0 0 5px var(--mud-palette-text-primary);
    filter: blur(3px);
    -webkit-filter: blur(3px);
    user-select: none;
    pointer-events: none;
}

.report-two-column-table .mud-table-container,
.report-two-column-table table,
.report-two-column-table .mud-table-root {
    background-color: var(--portal-report-table-surface);
    color: var(--mud-palette-text-primary);
}

.report-one-column-table .mud-table-container,
.report-one-column-table table,
.report-one-column-table .mud-table-root,
.report-three-column-table .mud-table-container,
.report-three-column-table table,
.report-three-column-table .mud-table-root {
    background-color: var(--portal-report-table-surface);
    color: var(--mud-palette-text-primary);
}

.report-two-column-table .mud-table-cell,
.report-two-column-table .mud-table-head .mud-table-cell {
    border-color: var(--portal-divider-color);
}

.report-one-column-table .mud-table-cell,
.report-one-column-table .mud-table-head .mud-table-cell,
.report-three-column-table .mud-table-cell,
.report-three-column-table .mud-table-head .mud-table-cell {
    border-color: var(--portal-divider-color);
}

:is(html, body).portal-dark-mode .report-two-column-header {
    background-color: var(--portal-report-table-header-background);
    color: var(--portal-report-table-header-text);
}

:is(html, body).portal-dark-mode .report-one-column-header,
:is(html, body).portal-dark-mode .report-three-column-header {
    background-color: var(--portal-report-table-header-background);
    color: var(--portal-report-table-header-text);
}

.report-themed-section {
    background-color: var(--report-section-light-background, var(--portal-report-section-background));
    color: var(--portal-report-section-text);
    text-align: center;
    border-color: var(--portal-divider-color);
}

.report-themed-score-card {
    background-color: var(--portal-report-table-surface);
    color: var(--mud-palette-text-primary);
    border-color: var(--portal-divider-color);
}

.report-themed-score-header {
    background-color: var(--report-score-light-background, var(--portal-report-score-background));
    color: var(--portal-report-section-text);
}

.report-themed-disclaimer {
    background-color: var(--report-disclaimer-light-background, var(--portal-report-disclaimer-background));
    color: var(--mud-palette-text-primary);
    border-color: var(--portal-divider-color);
}

:is(html, body).portal-dark-mode .report-themed-section {
    background-color: var(--portal-report-section-background);
    color: var(--portal-report-section-text);
}

:is(html, body).portal-dark-mode .report-themed-score-header {
    background-color: var(--portal-report-score-background);
    color: var(--portal-report-section-text);
}

:is(html, body).portal-dark-mode .report-themed-disclaimer {
    background-color: var(--portal-report-disclaimer-background);
    color: var(--mud-palette-text-primary);
}

/* ResultWorkflow reports still contain many legacy inline background colors.
   In dark mode, normalize those blocks to the shared report tokens so text stays readable
   without having to duplicate per-report overrides. */
:is(html, body).portal-dark-mode #reportContent .mud-paper[style*="background-color: #"],
:is(html, body).portal-dark-mode #reportContent .mud-paper[style*="background-color:#"] {
    background-color: var(--portal-report-section-background) !important;
    color: var(--portal-report-section-text) !important;
    border-color: var(--portal-divider-color) !important;
}

:is(html, body).portal-dark-mode #reportContent .mud-paper[style*="#E0E0E0"],
:is(html, body).portal-dark-mode #reportContent .mud-paper[style*="#e0e0e0"] {
    background-color: var(--portal-report-disclaimer-background) !important;
    color: var(--mud-palette-text-primary) !important;
}

:is(html, body).portal-dark-mode #reportContent .mud-paper.mud-paper-outlined {
    border-color: var(--portal-divider-color);
}

:is(html, body).portal-dark-mode #reportContent .mud-paper[style*="background-color: #"] .mud-typography,
:is(html, body).portal-dark-mode #reportContent .mud-paper[style*="background-color:#"] .mud-typography {
    color: inherit;
}