/* 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;
}

.mud-radio .mud-radio-content,
.mud-radio .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 */
}

/* The pages opened without signing in - a shared report (/shared-report/{token}) and a public
   campaign (/apply/{token}) - are pages of their own: white, and no room held at the top for an
   app bar the printable layout does not have. The printable layouts also serve
   ?showprintable=true, so these pages adjust them from inside, through .public-page, rather than
   changing them for everyone. */
body:has(.public-page),
.mud-paper:has(> .mud-main-content .public-page) {
    background-color: var(--mud-palette-surface) !important;
    min-height: 100vh;
}

.mud-main-content:has(.public-page) {
    padding-top: 0;
    min-height: 100vh;
}

/* .shared-report-view already holds the report to the container's width and gutters, so the
   report's own container drops its gutters and lines up with the brand header above it. */
.shared-report-view #reportContent {
    padding-left: 0;
    padding-right: 0;
}

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

/* Results grid with Column Chooser requires overflow: visible so popup dialog is not clipped */
.results-grid .e-grid,
.results-grid.e-grid {
    border-radius: 16px !important;
    overflow: visible;
}

/* Explicitly round top toolbar and bottom pager corners since overflow: visible does not clip them */
.results-grid .e-grid .e-toolbar,
.results-grid .e-grid .e-toolbar .e-toolbar-items,
.results-grid .e-grid .e-toolbar .e-toolbar-left,
.results-grid.e-grid .e-toolbar,
.results-grid.e-grid .e-toolbar .e-toolbar-items,
.results-grid.e-grid .e-toolbar .e-toolbar-left {
    border-top-left-radius: 15px !important;
}

.results-grid .e-grid .e-toolbar,
.results-grid .e-grid .e-toolbar .e-toolbar-items,
.results-grid .e-grid .e-toolbar .e-toolbar-right,
.results-grid.e-grid .e-toolbar,
.results-grid.e-grid .e-toolbar .e-toolbar-items,
.results-grid.e-grid .e-toolbar .e-toolbar-right {
    border-top-right-radius: 15px !important;
}

.results-grid .e-grid .e-gridpager,
.results-grid .e-grid .e-pager,
.results-grid.e-grid .e-gridpager,
.results-grid.e-grid .e-pager {
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

.results-grid .e-grid > .e-gridcontent:last-child,
.results-grid.e-grid > .e-gridcontent:last-child {
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
}

/* Ensure column chooser checkbox list scrolls cleanly if there are many columns */
.results-grid .e-grid .e-ccdlg .e-cc-contentdiv,
.results-grid.e-grid .e-ccdlg .e-cc-contentdiv {
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* Header text wrap across all Syncfusion grids */
.e-grid .e-headercell .e-headertext {
    white-space: normal !important;
    line-height: 1.25 !important;
    text-overflow: unset !important;
    word-break: break-word !important;
}

/* Compact cell padding across organization grids to trim blank space and eliminate unnecessary scrolling */
#ResultsGrid.e-grid .e-headercell,
#ResultsGrid.e-grid .e-rowcell,
#AssessmentsGrid.e-grid .e-headercell,
#AssessmentsGrid.e-grid .e-rowcell,
#CandidatesGrid.e-grid .e-headercell,
#CandidatesGrid.e-grid .e-rowcell,
#TeamMembersGrid.e-grid .e-headercell,
#TeamMembersGrid.e-grid .e-rowcell,
#CampaignCandidatesGrid.e-grid .e-headercell,
#CampaignCandidatesGrid.e-grid .e-rowcell,
.results-grid .e-grid .e-headercell,
.results-grid .e-grid .e-rowcell {
    padding-left: 8px;
    padding-right: 8px;
}

/* Red asterisk for all required input labels across the portal */
.mud-input-control.mud-input-required .mud-input-label::after,
.mud-input-control.mud-input-required label::after,
.mud-input-control.mud-input-required .mud-input-label-outlined::after {
    color: var(--mud-palette-error, #f44336) !important;
    font-weight: 700;
    margin-left: 3px;
}

/* 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%;
}

/* ============================================================================
   Single-screen (no-scroll) routed pages
   ============================================================================ */
/* A routed page opts in by putting `portal-fullscreen-page` on its root element.
   By default this layout can never fit on one screen: `.main-layout-content` and
   `.main-layout-body` each carry `min-height: 100vh`, and MudMainContent adds the
   app-bar height as padding on top of that, so the document is always taller than
   the viewport and every page scrolls a little. That is harmless on list pages and
   wrong for the Drawmetrics drawing step, which has to show a canvas, a palette,
   a description field and the step actions together with no scrolling.

   The chain below replaces those minimums with a flex column pinned to the
   viewport, so the opted-in page receives exactly the space left under the app bar
   and distributes it itself. Selectors are one class heavier than the
   `min-height: 100vh` rules above so they win without `!important`.

   Driven by `:has()` rather than a body class toggled over JS interop: the sizing
   then applies on the first server render, before the interactive circuit is up. */
.mud-layout:has(.portal-fullscreen-page) {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Every wrapper between the layout and the page root, whatever it happens to be called. The named
   rules below cover the portal layout (.main-layout-content / .main-layout-body); this one covers the
   rest, which matters because /try-drawmetrics renders under a different layout whose chain is
   `.mud-layout > .mud-main-content > div.ma-2 > .mud-container`. Deliberately weak (two classes) so
   the named rules that have to beat `min-height: 100vh` still win. */
.mud-layout:has(.portal-fullscreen-page) *:has(.portal-fullscreen-page) {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mud-layout:has(.portal-fullscreen-page) > .mud-paper.main-layout-content {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mud-layout:has(.portal-fullscreen-page) .mud-main-content {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mud-layout:has(.portal-fullscreen-page) .main-layout-body {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The page root itself. `min-height: 0` is what actually lets it shrink: without it
   a flex item refuses to go below the intrinsic height of its content, which is how
   an overflowing canvas would push the actions off screen instead of shrinking. */
.portal-fullscreen-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 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, wrapped, and appropriately sized across desktop, tablet, and mobile. */
.mud-tooltip,
.mud-tooltip-default,
.mud-tooltip-root .mud-tooltip {
    display: block !important;
    max-width: min(360px, calc(100vw - 32px)) !important;
    width: max-content !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.45 !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    text-align: left !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    z-index: var(--mud-zindex-tooltip, 1600) !important;
}

@media (max-width: 959.98px) {
    .mud-tooltip,
    .mud-tooltip-default,
    .mud-tooltip-root .mud-tooltip {
        max-width: 300px !important;
        font-size: 0.8rem !important;
        padding: 8px 10px !important;
    }
}

@media (max-width: 599.98px) {
    .mud-tooltip,
    .mud-tooltip-default,
    .mud-tooltip-root .mud-tooltip {
        max-width: min(260px, calc(100vw - 32px)) !important;
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
        padding: 6px 10px !important;
    }

    /* Long-label form tooltips expand leftward only on mobile to prevent overflow */
    .mud-tooltip.mud-tooltip-align-right,
    .mud-tooltip-root .mud-tooltip.mud-tooltip-align-right {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }
}

/* Report table header tooltips: only right-align on screens <= 1800px where space is constrained */
@media (max-width: 1800px) {
    .mud-tooltip.report-header-tooltip,
    .mud-tooltip-root .mud-tooltip.report-header-tooltip {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }
}

/* Prevent accidental horizontal overflow / scrollbar across the layout */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.mud-layout,
.mud-main-content {
    max-width: 100%;
}

: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-light-mode .mud-tooltip.mud-tooltip-top.mud-tooltip-arrow::after {
    border-color: var(--mud-palette-surface) transparent transparent transparent !important;
}

:is(html, body).portal-light-mode .mud-tooltip.mud-tooltip-bottom.mud-tooltip-arrow::after {
    border-color: transparent transparent var(--mud-palette-surface) transparent !important;
}

:is(html, body).portal-light-mode .mud-tooltip.mud-tooltip-left.mud-tooltip-arrow::after {
    border-color: transparent transparent transparent var(--mud-palette-surface) !important;
}

:is(html, body).portal-light-mode .mud-tooltip.mud-tooltip-right.mud-tooltip-arrow::after {
    border-color: transparent var(--mud-palette-surface) transparent transparent !important;
}

: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);
}

:is(html, body).portal-dark-mode .mud-tooltip.mud-tooltip-top.mud-tooltip-arrow::after {
    border-color: var(--portal-syncfusion-surface, #111827) transparent transparent transparent !important;
}

:is(html, body).portal-dark-mode .mud-tooltip.mud-tooltip-bottom.mud-tooltip-arrow::after {
    border-color: transparent transparent var(--portal-syncfusion-surface, #111827) transparent !important;
}

:is(html, body).portal-dark-mode .mud-tooltip.mud-tooltip-left.mud-tooltip-arrow::after {
    border-color: transparent transparent transparent var(--portal-syncfusion-surface, #111827) !important;
}

:is(html, body).portal-dark-mode .mud-tooltip.mud-tooltip-right.mud-tooltip-arrow::after {
    border-color: transparent var(--portal-syncfusion-surface, #111827) transparent transparent !important;
}

/* 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');
}

/* App bar brand logo. Sized here rather than inline so responsive.css can shrink it
   on small screens without needing !important. */
.appbar-theme-logo {
    height: 40px;
}

/* Organization picker in the app bar. Sized here for the same reason: responsive.css
   lets it shrink below 250px once the toolbar runs out of room. */
.appbar-org-select {
    min-width: 250px;
    max-width: 350px;
}

/* Brand logo pinned to the corner of every auth page (login, register, 2FA, ...). */
/* absolute, not fixed. Fixed anchors the logo to the viewport, so on any screen short enough to
   scroll — a phone, or a laptop with the consent modal open — the form scrolled up underneath a logo
   that stayed put, and the wordmark ended up printed across the login card. Absolute keeps it at the
   top of the page and lets it scroll away with the rest of the content. Raising z-index would not
   have helped: the problem is the logo staying still, not which layer it sits on. */
.auth-theme-logo {
    position: absolute;
    top: 24px;
    left: 32px;
    z-index: 10;
}

/* 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;
    /* Clip the stamp to the content region. The label is rotated, and rotation widens an
       element's painted box beyond its layout box, so on a narrow card ("Other Reports" is
       md="4" — 223px at 1024px with the drawer open) "COMING SOON!" painted past the card
       border and over the neighbouring column. Nothing above this clipped it: the overlay is
       absolute with no overflow of its own and MudCard does not clip either. */
    overflow: hidden;
}

/* 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;
    /* Wrap to a second line rather than be cut off by the clip above: the label has no
       `white-space: nowrap`, it just had nothing bounding it, so a flex item sized to
       max-content ran wider than the card. */
    max-width: 100%;
    text-align: center;
}

/* 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;
    /* Wraps, deliberately. `white-space: nowrap` held "COMING SOON!" on one line at ~215px, which
       is wider than the content panel it stamps (190px inside a 223px card on the "Other Reports"
       grid at 1024px) — so it painted over the card border and, once the overlay started clipping,
       lost its first and last characters instead. Two lines fit any card width the grid produces. */
    max-width: 100%;
    text-align: center;
}

: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);
}

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

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

/* The foreground is computed from the background by ReportTableHeaderPalette, because report pages pick
   their own header colours and the theme's dark text is unreadable on the saturated ones - "Risks" on
   #236BEF measured 2.12:1 against a 4.5:1 requirement. The fallback leaves a header that somehow renders
   without the variable looking exactly as it did before.

   Written against MudBlazor's own structure rather than as a bare class. MudBlazor colours header cells
   with `.mud-table-root .mud-table-head .mud-table-cell` (0,3,0), which outranks a single class, so the
   `color` these rules used to carry never applied at all - measured on /hiring-with-phone-checks, where the
   Risks header computed to the theme text despite the variable resolving to #FFFFFF. Background is
   unaffected because MudBlazor sets no background-color there, which is why it worked while colour did
   not. */
.mud-table-root .mud-table-head .mud-table-cell.report-two-column-header {
    color: var(--report-two-column-header-foreground, var(--mud-palette-text-primary));
}

.mud-table-root .mud-table-head .mud-table-cell.report-one-column-header {
    color: var(--report-one-column-header-foreground, var(--mud-palette-text-primary));
}

.mud-table-root .mud-table-head .mud-table-cell.report-three-column-header {
    color: var(--report-three-column-header-foreground, 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;
}

/* Withheld rows in the free report. Split in two so the blur lands on the SENTENCE only: the row
   number stays legible beside it, which is what shows the reader how much the paid report adds (and is
   how the approved masked report reads). Previously both lived on the <td>, so adding numbering would
   have blurred the numbers too. */
.report-one-column-cell-withheld {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: none !important;
}

/* "Bold = Extremely" - the legend the hiring reports print above their attribute tables. Marks an
   attribute drawn three or more times, and pairs with the underline that marks a job-attribute fit. On
   the text span rather than the cell so it does not also embolden the row number beside it. */
.report-one-column-text-strong {
    font-weight: 700;
}

/* Quick Checks is printed in red on the approved reports - "all of this needs to be red text" - because
   it is the one section that is an instruction to the interviewer rather than a finding about the
   candidate. Set per TABLE rather than per row: the whole section is red, not selected lines. The colour
   is a token, not a literal, because a red readable on white is unreadable on the dark report surface.
   Deliberately NOT !important, so a withheld row's blur below still wins over it. */
.report-one-column-text-emphasis {
    color: var(--portal-report-emphasis-text);
}

/* A withheld sentence reads as an unreadable smudge the width of the real line, rather than as an
   opaque block: it shows there IS a sentence there without giving any of it away. The glyphs are
   never painted - that is what `color: transparent` does - so what remains on screen is only their
   text-shadow, spread wide enough that adjacent strokes bleed into each other.

   text-shadow and NOT `filter: blur()`, which is the obvious way to write this: html2canvas
   rasterises all three PDF export paths and does not implement CSS filters at all, so a
   filter-blurred row exports SHARP and completely readable. It does render text-shadow, so the
   smudge survives the export and screen and PDF agree.

   The radius IS the safety margin. What this replaced paired the same `color: transparent` with a
   5px shadow, and 5px leaves the glyph shapes separable - that is the bug being fixed here, not a
   cosmetic tweak, so do not lower these numbers without looking at the rendered result. Two stops
   rather than one: the wide stop fills the gaps between words, the tighter one keeps the line from
   fading out entirely at small font sizes.

   Radii are in `em`, not `px`, so the blur stays proportional to the text. A fixed pixel radius is
   only ever tuned against one font size; render the same rule somewhere larger and the glyphs outgrow
   the blur and come back into focus. */
.report-one-column-text-blurred {
    color: transparent !important;
    text-shadow: 0 0 1em rgba(66, 66, 66, 0.65), 0 0 0.5em rgba(66, 66, 66, 0.4) !important;
    filter: none !important;
    -webkit-filter: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    pointer-events: none !important;
}

/* The smudge is made of the text colour, so on the dark report surface it has to invert or it
   disappears into the background and the row looks empty rather than withheld. */
:is(html, body).portal-dark-mode .report-one-column-text-blurred {
    text-shadow: 0 0 1em rgba(226, 232, 240, 0.6), 0 0 0.5em rgba(226, 232, 240, 0.35) !important;
}

/* Admin view: shape letters (like A1., A2., B1., B2.) displayed on the left side of Basic Report rows.
   Keeps letters in a straight column with a small spacing before the row number. */
.report-one-column-shape-letter {
    display: inline-block;
    min-width: 2.2em;
    margin-right: 0.5em;
    vertical-align: top;
}

/* Keeps the numbers in a straight column instead of ragged against 1-vs-2 digit widths. */
.report-one-column-number {
    display: inline-block;
    min-width: 1.75em;
    vertical-align: top;
    color: var(--mud-palette-text-primary);
}

/* Per-row score and its severity dot. Only the team reports set a score, so these rules are inert
   everywhere else. */
.report-one-column-score {
    margin-left: 0.35em;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* A painted span rather than an icon font or an emoji: these tables are rasterised by html2canvas for
   the PDF, which reproduces backgrounds and border-radius but has no icon font to fall back on.
   Sized in em so it tracks the row's font size at any PDF scale factor. */
.report-one-column-score-dot {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-left: 0.4em;
    border-radius: 50%;
    vertical-align: baseline;
    background-color: transparent;
}

.report-one-column-score-dot-good {
    background-color: #22C55E;
}

.report-one-column-score-dot-warning {
    background-color: #FBBF24;
}

.report-one-column-score-dot-bad {
    background-color: #EF4444;
}

/* Ideal Team Synergy: keep summary on the left without displacing chart from the horizontal center */
.report-synergy-row {
    position: relative;
    width: 100%;
    min-height: 650px;
    margin-bottom: 16px;
}

/* Natural width for summary table, pinned to the left with top spacing to clear Ideal Attributes */
.report-synergy-summary {
    position: absolute;
    left: 0;
    top: 18px;
    z-index: 2;
    width: 220px;
}

.report-synergy-chart {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The summary tables carry a bottom margin for the stacked layout; beside a chart it just adds a gap. */
.report-synergy-summary .report-one-column-table {
    margin-bottom: 0 !important;
}

/* On small screens the summary stacks above the chart */
@media (max-width: 768px) {
    .report-synergy-row {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .report-synergy-summary {
        position: static;
        max-width: none;
        width: 100%;
        margin-bottom: 16px;
    }
}

/* Interactive Ideal Team Synergy planning controls and result rows. */
.report-ideal-team-controls {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--portal-divider-color, #E0E0E0);
    border-radius: 8px;
    padding: 12px 16px;
}

.report-ideal-team-attr-list {
    max-height: 260px;
    overflow-y: auto;
    min-width: 220px;
}

.report-ideal-team-pool-note {
    color: var(--mud-palette-text-secondary);
}

.report-ideal-team-name {
    color: var(--mud-palette-text-primary);
}

/* A dropped member: struck through and red, matching the radar label. */
.report-ideal-team-dropped {
    text-decoration: line-through;
    color: #E00A2C;
}

/* An added candidate: green, matching the radar spoke. */
.report-ideal-team-candidate {
    color: #01CD3B;
    font-weight: 600;
}

.report-ideal-team-invite {
    text-transform: none;
    white-space: nowrap;
}

.report-one-column-header-icon {
    vertical-align: text-bottom;
    margin-right: 6px;
}

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

/* Dark mode drops the report's own header colour for one flat surface, so the computed foreground must not
   apply here. The colour half carries MudBlazor's structure for the same reason the light rules do: at
   (0,2,1) these lost to `.mud-table-root .mud-table-head .mud-table-cell`, so dark headers were painted in
   the theme text rather than in --portal-report-table-header-text. */
:is(html, body).portal-dark-mode .report-two-column-header,
: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);
}

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

/* ---------------------------------------------------------------------------
   Data-grid cells that truncate with a tooltip
   ---------------------------------------------------------------------------
   The grids wrap each cell in <MudTooltip><span class="tm-ellipsis">…</span></MudTooltip>,
   and .tm-ellipsis asks for width:100%. MudTooltip renders its child inside a
   shrink-to-fit inline-block, so that 100% resolved against the text itself and the
   ellipsis never engaged — the grid cell then hard-clipped the value mid-glyph, with no
   "…" to signal it. "alex19@gmail.cor" read as a complete, wrong address. Letting the
   tooltip wrapper fill the cell gives the ellipsis a real width to work against.
   --------------------------------------------------------------------------- */
.e-grid .mud-tooltip-root {
    display: block;
    width: 100%;
    min-width: 0;
}

.e-grid .grid-ellipsis,
.e-grid .tm-ellipsis,
.grid-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Auth status pages (Locked out, Invalid user, Access denied, Confirm email, ...)
   ---------------------------------------------------------------------------
   Each of these renders a bare <div class="…-container"> holding a heading and a
   sentence, and none of them has a stylesheet — so the text sat flush in the very
   top-left corner of the viewport, behind the AuthLayout logo. On a phone the
   wrapped line ("later.") ended up on the same band as the brand mark. Give the
   family the padded, centred panel the rest of the auth pages already use. clamp()
   handles the sizing across phone/tablet/desktop, so no per-device rules are needed.
   --------------------------------------------------------------------------- */
.lockout-container,
.invalid-user-container,
.access-denied-container,
.invalid-password-reset-container,
.confirm-email-container,
.register-confirmation-container,
.resend-email-confirmation-container,
.external-login-container,
.login-with-recovery-code-container {
    box-sizing: border-box;
    max-width: 560px;
    /* calc keeps a 16px gutter either side on a phone, where 560px is wider than the screen and
       the panel would otherwise sit edge to edge with its corners and shadow cut off. Above
       ~592px the max-width takes over and the auto margins centre it. */
    width: calc(100% - 32px);
    /* Top margin clears the AuthLayout logo, which is centred at the top on a phone. */
    margin: clamp(150px, 24vh, 230px) auto 40px;
    padding: clamp(20px, 4vw, 32px);
    border-radius: 16px;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    text-align: center;
}

.lockout-container h1,
.invalid-user-container h3,
.access-denied-container h3 {
    margin-top: 0;
    font-size: clamp(1.25rem, 4vw, 1.5rem);
}

/* ---------------------------------------------------------------------------
   Consent dialogs (Register's Privacy Policy / Terms & Conditions)
   ---------------------------------------------------------------------------
   Base = laptop and desktop. These used an inline `width: min(60vw, 920px)`, which tied the
   dialog to a share of the viewport at every size: on a 1024px laptop that is 614px of
   legal text at 13px, and on a phone it collapsed to 234px. Width is a breakpoint decision,
   so it belongs here with phone/tablet overrides in responsive.css.
   --------------------------------------------------------------------------- */
/* 1040px was too wide for the content it holds. The legal documents cap their text at 74ch
   (~700px) for readability, so the dialog spent the remaining ~300px on empty margins and read as
   a mostly-blank panel on a laptop. 880px leaves the measure intact with a normal gutter instead. */
.mud-dialog.attitux-consent-dialog {
    width: min(94vw, 880px);
    max-width: min(94vw, 880px);
    margin: 0 auto;
}

/* MudDialog caps its own height; make sure a document viewer can use what the viewport has. */
.mud-dialog.attitux-consent-dialog {
    max-height: calc(100vh - 48px);
}

.mud-dialog.attitux-consent-dialog .mud-dialog-content {
    overflow: hidden;
    padding-bottom: 8px;
}

/* ---------------------------------------------------------------------------
   Dialogs that host a third-party iframe (Stripe embedded checkout)
   ---------------------------------------------------------------------------
   MudBlazor puts `-webkit-overflow-scrolling: touch` on every `.mud-dialog-content`.
   iOS does not hit-test an iframe correctly inside a momentum-scrolling container —
   taps land off target or do not register at all — so a payment form in a dialog
   cannot be filled in on an iPhone. Momentum scrolling is not worth an unusable
   checkout: these dialogs scroll natively instead.
   --------------------------------------------------------------------------- */
.mud-dialog.attitux-iframe-dialog .mud-dialog-content {
    -webkit-overflow-scrolling: auto;
}

/* ---------------------------------------------------------------------------
   Button rows that must wrap instead of shrink
   ---------------------------------------------------------------------------
   A flex row narrower than the sum of its buttons shrinks them: `.mud-button` only
   guarantees `min-width: 64px`, and a label like "VIEW CAMPAIGNS" cannot break inside
   "CAMPAIGNS", so it overflows its own box and prints across the neighbouring button —
   the two labels read as overlapping text. responsive.css fixes this for
   `.mud-card-actions` below 600px, but these rows sit in containers that are capped
   independently of the viewport (a 450px card, a card body inside a grid column), so
   they need it at every width. `flex-shrink: 0` keeps each button at its label width
   and `flex-wrap` moves the one that no longer fits onto its own line.
   --------------------------------------------------------------------------- */
.attitux-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.attitux-action-row > .mud-button-root {
    flex-shrink: 0;
}

/* Same argument, applied to MudCardActions everywhere rather than only under 600px.
   responsive.css already does this for phones, but the row that actually breaks is on
   /dashboard, where the notifications column is `MudItem md="4"`: at 1024px that is a 222px
   card holding a DISMISS + START NOW pair, so MudBlazor shrank "Start now" to 100px, its label
   wrapped onto two lines and the button grew to 61px tall against its 36px neighbour. The
   viewport is 1024px wide there — the constraint is the column, so a breakpoint cannot express
   it. Wrapping is inert while a row fits, which is why this is safe at every width. */
.mud-card-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.mud-card-actions > .mud-button-root {
    flex-shrink: 0;
}

.mud-card-actions .mud-button-label {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Campaign tile: keep the status chip inside the card
   ---------------------------------------------------------------------------
   The tile's first row is title + visibility icon + spacer + Active/Closed chip on one nowrap
   flex line. The title is an h6 that cannot shrink past its longest word, so once the column
   gets narrow the row's min-content exceeds it and the chip — the last item — is pushed out
   through the card's right edge. Measured at 1024px: min-content 177px against a 154px row,
   chip 45px outside the card border; same at 600px. Every other width was fine, which is why
   this is not a breakpoint fix — it is the two widths where the grid happens to be tightest.

   Wrapping rather than truncating the title: a campaign name is what identifies the tile, so
   the chip drops to a second line instead. min-width: 0 lets the title use the room it has.
   --------------------------------------------------------------------------- */
.campaign-card-title-row {
    flex-wrap: wrap;
}

.campaign-card-title-row > .mud-typography {
    min-width: 0;
}

.campaign-card-title-row > .mud-chip {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Organization settings → Payment methods: two filled buttons in a half-width column
   ---------------------------------------------------------------------------
   The panel is `MudItem md="6"`, so on a laptop with the drawer open the column lands near
   350px while "Change preferred payment methods" alone wants ~300px. The row already wraps,
   but the buttons were still free to shrink, so both labels broke onto extra lines and the
   buttons grew tall and uneven. Hold their label width and let the row wrap instead.
   --------------------------------------------------------------------------- */
.payment-method-btn-text {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Wizard steps: let the step card use the frame it sits in
   ---------------------------------------------------------------------------
   Every stepper partial (organization details, sub-organization details, create campaign)
   wraps its card in `MudItem xs="12" md="8"`. That 8/12 was applied against the viewport,
   but the card's real frame is the stepper panel, which the page container has already
   narrowed — so from 960px up the card took two thirds of an already-reduced box and left
   the rest blank. Measured on /organization-details at 1024px: a 369px card inside a 690px
   frame, 160px of dead space per side; at 1280px, 540 inside 946.

   Fill the frame instead, with a 900px ceiling so a 1920px screen does not stretch a single
   form field across the whole panel (731px there today, 900px after). One rule, no
   breakpoints: the constraint is the panel width, not the device.

   Scoped to the partial's OUTERMOST grid item. Two chains, because the workflows wrap their
   step body differently: organization/sub-organization partials open a MudContainer, while the
   campaign partials open a MudForm with a plain div. Matching only the container chain left
   /create-campaign untouched at 58% of its frame. Deliberately NOT the looser
   `.mud-stepper-content .mud-grid > .mud-grid-item-md-8`: several partials use md="8" again
   deeper inside a card for two-column rows, and those must keep their proportion.
   --------------------------------------------------------------------------- */
.mud-stepper-content .mud-container > .mud-grid > .mud-grid-item-md-8,
.mud-stepper-content .mud-form > .mud-grid > .mud-grid-item-md-8 {
    flex-basis: 100%;
    max-width: min(100%, 900px);
}

/* Radar chart container */
.report-radar-chart {
    position: relative;
    width: 100%;
    height: 650px;
    margin-bottom: 16px;
}

/* Conflict Diagram: keep legend pinned on the left without pushing the chart canvas off-center */
.report-radar-chart-with-legend {
    position: relative;
    width: 100%;
    height: 650px;
}

.report-radar-chart-canvas {
    width: 100%;
    height: 100%;
    padding-top: 170px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Position legend on top-left so the radar chart itself stays horizontally centered */
.report-radar-legend {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 220px;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid var(--portal-divider-color, #E0E0E0);
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
}

.report-radar-legend-title {
    font-size: 1.05rem;
    text-align: center;
    margin-bottom: 10px;
    color: var(--mud-palette-text-primary);
}

.report-radar-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    white-space: nowrap;
}

/* The sample is a top border rather than a background, so dashed and dotted render as real dash
   patterns - and as patterns html2canvas reproduces when it rasterises the page for the PDF. */
.report-radar-legend-line {
    display: inline-block;
    width: 56px;
    border-top-width: 3px;
    border-top-color: currentColor;
}

.report-radar-legend-line-good {
    border-top-style: solid;
    color: #01CD3B;
}

.report-radar-legend-line-warning {
    border-top-style: dashed;
    color: #FBBF24;
}

.report-radar-legend-line-bad {
    border-top-style: dotted;
    color: #E00A2C;
}

.report-radar-legend-label {
    color: var(--mud-palette-text-primary);
}

/* On small screens the legend moves above the chart */
@media (max-width: 768px) {
    .report-radar-chart-with-legend {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .report-radar-legend {
        position: static;
        margin-bottom: 12px;
    }

    .report-radar-chart-canvas {
        width: 100%;
        height: 300px;
        padding-top: 10px;
    }
}

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

/* ---------------------------------------------------------------------------
   Drawmetrics instructions stepper & video caption
   ---------------------------------------------------------------------------
   Replaces the legacy baked-in-text image (drawing-instructions.png) with
   crisp, responsive HTML/CSS typography. Font size is large, legible (1rem / 16px),
   with clear numbered circle badges and connecting rail. On mobile (< 600px)
   it converts to a clean vertical timeline so text stays large and readable.
   --------------------------------------------------------------------------- */
.drawing-instructions-stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto 0.25rem auto;
    width: 100%;
}

.drawing-instruction-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 12px;
}

.drawing-instruction-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    width: 100%;
    height: 2px;
    background-color: #334155;
    z-index: 1;
}

.drawing-instruction-node {
    position: relative;
    z-index: 2;
    margin-bottom: 8px;
}

.drawing-instruction-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #0f172a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.drawing-instruction-text {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
}

.drawing-instruction-video-caption {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--mud-palette-text-primary, #0f172a);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .drawing-instructions-stepper {
        flex-direction: column;
        align-items: stretch;
        max-width: 440px;
        padding: 0 16px;
    }

    .drawing-instruction-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        padding: 0 0 20px 0;
        position: relative;
    }

    .drawing-instruction-step:last-child {
        padding-bottom: 0;
    }

    .drawing-instruction-step:not(:first-child)::before {
        display: none;
    }

    .drawing-instruction-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 30px;
        left: 14px;
        bottom: 0;
        width: 2px;
        background-color: #334155;
        z-index: 1;
    }

    .drawing-instruction-node {
        margin-bottom: 0;
        margin-right: 16px;
        flex-shrink: 0;
    }

    .drawing-instruction-text {
        font-size: 0.95rem;
        padding-top: 4px;
    }

    .drawing-instruction-video-caption {
        font-size: 1.05rem !important;
    }
}

:is(html, body).portal-dark-mode .drawing-instruction-circle {
    background-color: #f1f5f9;
    color: #0f172a;
}

:is(html, body).portal-dark-mode .drawing-instruction-step:not(:first-child)::before,
:is(html, body).portal-dark-mode .drawing-instruction-step:not(:last-child)::after {
    background-color: #64748b;
}

:is(html, body).portal-dark-mode .drawing-instruction-text,
:is(html, body).portal-dark-mode .drawing-instruction-video-caption {
    color: var(--mud-palette-text-primary, #f8fafc);
}

/* Tutorial Video & Play Button Overlay (/drawmetrics-assessment & /try-drawmetrics) */
.drawing-instruction-video-header-box {
    display: inline-block;
    border: 1.5px solid #1e293b;
    border-radius: 8px;
    padding: 6px 20px;
    margin: 0.75rem auto 0.75rem auto;
    background-color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Container for laptop video and its action button */
.drawing-instruction-video-and-action {
    position: relative;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.drawing-instruction-video-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.drawing-instruction-action-container {
    position: absolute;
    left: calc(100% + 20px);
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.drawing-instruction-start-btn {
    min-width: 100px;
    height: 36px;
    padding: 6px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    background-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
    text-transform: none;
}

.drawing-instruction-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.drawing-instruction-laptop-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    line-height: 0;
    user-select: none;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}

.drawing-instruction-laptop-frame {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

.drawing-instruction-laptop-screen {
    position: absolute;
    left: 12.36%;
    top: 6.88%;
    width: 75.21%;
    height: 82.80%;
    background-color: #0f0f11;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drawing-instruction-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    background-color: #0f0f11;
    cursor: pointer;
}

/* Custom expand/collapse (fullscreen) button in bottom-right corner */
.drawing-instruction-fullscreen-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    padding: 0;
    outline: none;
    transition: background 0.2s ease, transform 0.15s ease;
}

.drawing-instruction-fullscreen-btn:hover {
    background: rgba(15, 23, 42, 0.85);
    transform: scale(1.08);
}

.drawing-instruction-fullscreen-btn:active {
    transform: scale(0.95);
}

.drawing-instruction-fs-icon {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    display: block;
    pointer-events: none;
}

.drawing-instruction-fullscreen-btn .fs-collapse-icon {
    display: none;
}

.drawing-instruction-fullscreen-btn.is-fullscreen .fs-expand-icon {
    display: none;
}

.drawing-instruction-fullscreen-btn.is-fullscreen .fs-collapse-icon {
    display: block;
}

/* Native Fullscreen mode support */
.drawing-instruction-laptop-screen:fullscreen,
.drawing-instruction-laptop-screen:-webkit-full-screen {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    background-color: #000000 !important;
    z-index: 99999 !important;
    border-radius: 0 !important;
}

.drawing-instruction-laptop-screen:fullscreen .drawing-instruction-video,
.drawing-instruction-laptop-screen:-webkit-full-screen .drawing-instruction-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.drawing-instruction-laptop-screen:fullscreen .drawing-instruction-fullscreen-btn,
.drawing-instruction-laptop-screen:-webkit-full-screen .drawing-instruction-fullscreen-btn {
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
}

.drawing-instruction-laptop-screen:fullscreen .drawing-instruction-fs-icon,
.drawing-instruction-laptop-screen:-webkit-full-screen .drawing-instruction-fs-icon {
    width: 26px;
    height: 26px;
}

.drawing-instruction-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, box-shadow 0.25s ease;
    padding: 0;
    outline: none;
}

.drawing-instruction-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.26), 0 3px 6px rgba(0, 0, 0, 0.14);
}

.drawing-instruction-play-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
}

.drawing-instruction-play-icon {
    display: block;
    margin: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
    width: 28px;
    height: 28px;
    fill: #ffffff;
    transition: transform 0.2s ease;
}

.drawing-instruction-play-btn:hover .drawing-instruction-play-icon {
    transform: scale(1.05);
}

.drawing-instruction-play-btn.is-playing {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.85);
}

@media (max-width: 860px) {
    .drawing-instruction-video-and-action {
        flex-direction: column;
        align-items: center;
    }

    .drawing-instruction-action-container {
        position: static;
        margin-top: 14px;
        display: flex;
        justify-content: center;
    }

    .drawing-instruction-video-container {
        max-width: 540px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .drawing-instruction-video-container {
        max-width: 360px;
    }

    .drawing-instruction-video-header-box {
        font-size: 0.9rem;
        padding: 6px 14px;
        margin: 0.75rem auto 0.5rem auto;
    }

    .drawing-instruction-play-btn {
        width: 48px;
        height: 48px;
    }

    .drawing-instruction-play-icon {
        width: 22px;
        height: 22px;
        margin: 0;
    }
}

:is(html, body).portal-dark-mode .drawing-instruction-video-header-box {
    border-color: #e2e8f0;
    background-color: var(--mud-palette-surface, #1e293b);
    color: #f8fafc;
}

:is(html, body).portal-dark-mode .drawing-instruction-laptop-wrapper {
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

.attribute-filter-condition-container {
    min-height: 70px;
}