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

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

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

/* ──── Latest Eval Stat (LatestEvalStat.razor) ──── */
/* Reusable compact "stat bar" card per evaluation type.
 * Two surface variants: --dark (hero banner) and --light (tab content). */
.eval-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.eval-stat {
    flex: 1 1 170px;
    min-width: 160px;
    max-width: 240px;
    padding: 4px 8px 5px;
    border-radius: 6px;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.eval-stat--dark {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.eval-stat--dark:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

.eval-stat--light {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.02);
    color: var(--mud-palette-text-primary);
}

.eval-stat--light:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.2);
}

.eval-stat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.eval-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.eval-stat--dark .eval-stat-label { color: rgba(255, 255, 255, 0.85); }
.eval-stat--light .eval-stat-label { color: var(--mud-palette-text-secondary); }

.eval-stat-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.eval-stat-score-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    line-height: 1;
}

.eval-stat-score {
    display: flex;
    align-items: baseline;
    gap: 3px;
    line-height: 1;
    min-width: 0;
}

.eval-stat-score-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.eval-stat--dark .eval-stat-score-value { color: #fff; }
.eval-stat--light .eval-stat-score-value { color: var(--mud-palette-text-primary); }

.eval-stat-score-suffix {
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.eval-stat--dark .eval-stat-score-suffix { color: rgba(255, 255, 255, 0.55); }
.eval-stat--light .eval-stat-score-suffix { color: var(--mud-palette-text-secondary); }

.eval-stat-trend {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: 0 0 auto;
    line-height: 1;
}

.eval-stat-trend-up { color: #4caf50; }
.eval-stat-trend-down { color: #f44336; }

.eval-stat--dark .eval-stat-trend-flat { color: rgba(255, 255, 255, 0.55); }
.eval-stat--light .eval-stat-trend-flat { color: var(--mud-palette-text-secondary); }

.eval-stat-bar {
    position: relative;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
}

.eval-stat--dark .eval-stat-bar { background: rgba(255, 255, 255, 0.18); }
.eval-stat--light .eval-stat-bar { background: rgba(0, 0, 0, 0.1); }

.eval-stat-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.eval-stat-tier {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.eval-stat--dark .eval-stat-tier { color: rgba(255, 255, 255, 0.92); }
.eval-stat--light .eval-stat-tier { color: var(--mud-palette-text-primary); }

.eval-stat-empty {
    font-size: 0.75rem;
    font-style: italic;
}

.eval-stat--dark .eval-stat-empty { color: rgba(255, 255, 255, 0.55); }
.eval-stat--light .eval-stat-empty { color: var(--mud-palette-text-secondary); }

/* ──── Section header: shared style for in-card / in-dialog section labels ──── */
/* Pair Typo="Typo.overline" Color="Color.Secondary" with Class="section-header" to get */
/* a tight uppercase label with a thin divider rule beneath it. Used by PlayerEdit and */
/* the player measurement edit dialog so both surfaces share one section look. */
.section-header {
    display: block;
    padding-bottom: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
    letter-spacing: 0.06em;
    font-size: 0.95rem;
    font-weight: 700;
}

/* ──── Broadcast Banner ──── */
/* Fixed banner under the app bar. Below Md the drawer is a temporary overlay,
   so the banner spans full width. At Md+ the drawer is persistent (clipped),
   so shift the banner past the drawer width when it's open to avoid clipping. */
.broadcast-banner {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 1100;
}
@media (min-width: 960px) {
    .broadcast-banner.drawer-open {
        left: var(--mud-drawer-width-left, 240px);
    }
}

/* ──── App Tabs: unified tab look across the app (pages + dialogs) ──── */
/* Apply Class="app-tabs" on every MudTabs instance. Edit this block to restyle all tabs. */
.app-tabs .mud-tab {
    color: #333 !important;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.18s ease, color 0.18s ease;
    min-height: 44px;
}

.app-tabs .mud-tab .mud-icon-root {
    color: inherit !important;
    font-size: 1.1rem;
}

.app-tabs .mud-tab:hover:not(.mud-tab-active) {
    color: #000 !important;
    background: rgba(0, 0, 0, 0.035);
}

.app-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary) !important;
    background: #1a1a1a !important;
    font-weight: 700;
}

.app-tabs .mud-tab.mud-tab-active .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.app-tabs .mud-tab-slider {
    height: 4px !important;
    background: var(--mud-palette-primary) !important;
}

/* Baseline under the tab strip — anchors the strip visually so it doesn't
   blend into the dialog/page body. The active tab's gold slider sits on
   top of this line. */
.app-tabs .mud-tabs-toolbar,
.app-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Faint outline + tiny rounding on inactive tab labels so they read as
   discrete targets instead of plain text. Active tab keeps its dark fill
   and overrides the border via the existing rule above. */
.app-tabs .mud-tab:not(.mud-tab-active) {
    border: 1px solid var(--mud-palette-divider);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-right: 2px;
}

/* Modifier: lock the content-panel height to the visible viewport so the tab
   strip never shifts AND long-content tabs (like Notes with many entries)
   scroll inside the panel instead of growing the page. Short tabs (like
   Contacts) pad to the same height; the empty space is the trade-off for
   stable strip position. Reserve covers AppBar (64) + MainContent padding
   (80) + hero banner (~250) + action bar (~30) + tab strip (~48) + buffer. */
.app-tabs-expand .mud-tabs-panels {
    height: calc(100vh - 480px);
    min-height: 320px;
    overflow-y: auto;
}

/* ──── Dialog actions wrap ──── */
/* Apply ActionsClass="dialog-actions-wrap" on dialogs that have too many action
   buttons to fit one row on narrow viewports. Buttons wrap to additional rows;
   `mr-auto` still pushes a left-aligned button in the first row. */
.dialog-actions-wrap {
    flex-wrap: wrap !important;
    gap: 6px;
    row-gap: 6px;
}

/* ──── Grade pills: shared across PlayerEvaluationsTab, EvaluationAssignmentProfileDialog,
       FillEvaluation. Tier-aware variants snap a numeric grade to the nearest
       EvaluationGradeTier and surface the tier name; bg/text color set inline. ──── */
.eval-grade-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
}

.eval-grade-pill-sm {
    min-width: 40px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 0.8rem;
}

.eval-grade-pill-tier {
    min-width: 150px;
    max-width: 100%;
    height: auto;
    min-height: 24px;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.62rem;
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.eval-grade-pill-unit {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.85;
    margin-left: 4px;
}

.eval-grade-pill-empty {
    background: rgba(255, 255, 255, 0.08);
    color: var(--mud-palette-text-secondary);
}

/* ──── Score badge: pairs with .eval-grade-pill-tier. Carries the numeric
       average that used to live inside the tier pill. Small rounded chip
       with tabular digits and a thin black outline. ──── */
.eval-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 22px;
    padding: 0 7px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    border: 1.5px solid #000;
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    font-size: 0.78rem;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.eval-score-badge-sm {
    min-width: 26px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    border-width: 1px;
}

/* Dark-surface variant (hero banner) — slightly stronger contrast. */
.eval-score-badge-on-dark {
    background: rgba(255, 255, 255, 0.94);
    color: #111;
}

/* ──── Combined grade pill: single pill split into two sections.
       Left section is a colored leading chip carrying the numeric value
       (background = tier color). Right section carries the tier name over
       a neutral white/light background. One element, one accent color. */
.eval-grade-pill-combined {
    display: inline-flex;
    align-items: stretch;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--pill-color, #888) 14%, transparent);
    color: var(--mud-palette-text-primary);
    border: 1px solid color-mix(in srgb, var(--pill-color, #888) 28%, transparent);
}

.eval-grade-pill-combined-lg {
    height: 28px;
    border-radius: 5px;
    font-size: 0.78rem;
}

/* Left chip: tier-colored, holds the numeric value. */
.eval-grade-pill-combined .eval-grade-pill-combined-value {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* Right section: neutral, holds the tier name. */
.eval-grade-pill-combined .eval-grade-pill-combined-label {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    min-width: 0;
}

/* Numeric-only variant (no tier): single uniform colored pill. */
.eval-grade-pill-combined.eval-grade-pill-combined-numeric {
    background: transparent;
    border: none;
    color: inherit;
}
.eval-grade-pill-combined.eval-grade-pill-combined-numeric .eval-grade-pill-combined-value {
    padding: 0 12px;
}

/* ──── Labeled grade line (Current / Projected) — shared by the player
       evaluation profile dialog and the mobile evaluations tab. Fixed-width
       label keeps both pills left-aligned to the same x position. ──── */
.eval-grade-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.eval-grade-line-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    flex: none;
    width: 80px;
}

/* ──── Paged dialogs (Prev/Next navigation): keep dialog frame size stable
       across records by fixing the content area height; long content scrolls
       inside instead of resizing the whole dialog. Apply via ContentClass
       on any MudDialog whose body steps through records. ──── */
.eval-paged-dialog-content {
    height: 70vh;
    max-height: 70vh;
    overflow-y: auto;
}

    .dialog-actions-wrap > .mud-button-root {
        margin: 0 !important;
    }

/* ──── Evaluation profile dialog body ──── */
/* Keeps PlayerEvaluationProfileDialog at a consistent height as the user pages
   through evaluations with prev/next chevrons — short ones pad to min-height,
   long ones scroll within the dialog instead of growing it. On mobile the
   dialog is full-screen, so the height constraint is removed there. */
.eval-profile-body {
    min-height: 360px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

@media (max-width: 599.95px) {
    .eval-profile-body {
        min-height: 0;
        max-height: none;
        overflow-y: visible;
    }
}

/* ──── Evaluation help-text rich content ──── */
/* Used by EvaluationQuestionRenderer (fill page) and inside MudTooltip overlays
   for the profile dialog. Tooltip popovers render outside scoped CSS, so these
   rules are global. */
.eval-help-rich {
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: left;
}

.eval-help-rich p {
    margin: 0 0 0.4rem 0;
}

.eval-help-rich p:last-child {
    margin-bottom: 0;
}

/* Quill 2.x emits indented list items as flat <li class="ql-indent-N"> siblings, not nested <ol>/<ul>.
   These rules mirror Quill's snow.css counter scheme so guidance renders nested outside the editor.
   Mirrored in EvaluationQuestionRenderer.razor.css for the in-component scope. */
.eval-help-rich ol,
.eval-help-rich ul {
    padding-inline-start: 0;
    margin: 0.25rem 0 0.5rem 0;
    list-style: none;
    counter-reset: list-0 list-1 list-2 list-3;
}

.eval-help-rich li {
    margin-bottom: 0.15rem;
    position: relative;
    padding-left: 1.5em;
}

.eval-help-rich ol > li {
    counter-increment: list-0;
    counter-reset: list-1 list-2 list-3;
}

.eval-help-rich ol > li::before {
    content: counter(list-0, decimal) ". ";
    position: absolute;
    left: 0;
    width: 1.5em;
}

.eval-help-rich ol > li.ql-indent-1 {
    counter-increment: list-1;
    counter-reset: list-2 list-3;
    padding-left: 3em;
}
.eval-help-rich ol > li.ql-indent-1::before {
    content: counter(list-1, lower-alpha) ". ";
    left: 1.5em;
}

.eval-help-rich ol > li.ql-indent-2 {
    counter-increment: list-2;
    counter-reset: list-3;
    padding-left: 4.5em;
}
.eval-help-rich ol > li.ql-indent-2::before {
    content: counter(list-2, lower-roman) ". ";
    left: 3em;
}

.eval-help-rich ol > li.ql-indent-3 {
    counter-increment: list-3;
    padding-left: 6em;
}
.eval-help-rich ol > li.ql-indent-3::before {
    content: counter(list-3, decimal) ". ";
    left: 4.5em;
}

.eval-help-rich ul > li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    width: 1.5em;
}
.eval-help-rich ul > li.ql-indent-1 {
    padding-left: 3em;
}
.eval-help-rich ul > li.ql-indent-1::before {
    content: "\25E6";
    left: 1.5em;
}
.eval-help-rich ul > li.ql-indent-2 {
    padding-left: 4.5em;
}
.eval-help-rich ul > li.ql-indent-2::before {
    content: "\25AA";
    left: 3em;
}
.eval-help-rich ul > li.ql-indent-3 {
    padding-left: 6em;
}
.eval-help-rich ul > li.ql-indent-3::before {
    content: "\2022";
    left: 4.5em;
}

/* ──── ApexCharts tooltip flicker workaround ──── */
/* The default ApexCharts tooltip uses a CSS opacity transition. Under Blazor
   Server, hover-driven repaints can restart that transition mid-frame, producing
   a strobe/flicker loop. Killing the transitions makes the tooltip appear/hide
   discretely with no visual artifacts. */
.apexcharts-tooltip,
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    transition: none !important;
}

.apexcharts-tooltip.apexcharts-active {
    opacity: 1 !important;
}

/* ──── Fill Evaluation section panels (Grade vs Questions) ──── */
/* Two side-by-side sections inside the per-player form (grade entry above,
   per-player questions below). Both get an outlined panel + colored left
   accent bar so evaluators can scan between them quickly. Grade uses UCF
   gold; questions use a muted slate to signal "supporting detail". */
.fill-eval-section {
    position: relative;
    border-radius: 8px;
    padding: 14px 18px 14px 22px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.fill-eval-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
}

.fill-eval-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.fill-eval-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.fill-eval-section-icon {
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fill-eval-grade-section {
    background: linear-gradient(to right, rgba(188, 144, 26, 0.10), rgba(0, 0, 0, 0) 60%);
    border-color: rgba(188, 144, 26, 0.35);
}
.fill-eval-grade-section::before {
    background: var(--mud-palette-primary);
}
.fill-eval-grade-section .fill-eval-section-icon {
    background: rgba(188, 144, 26, 0.18);
    color: var(--mud-palette-primary);
}
.fill-eval-grade-section .fill-eval-section-header {
    border-bottom-color: rgba(188, 144, 26, 0.35);
}

.fill-eval-questions-section {
    background: linear-gradient(to right, rgba(100, 116, 139, 0.08), rgba(0, 0, 0, 0) 60%);
    border-color: rgba(100, 116, 139, 0.30);
}
.fill-eval-questions-section::before {
    background: #64748b;
}
.fill-eval-questions-section .fill-eval-section-icon {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}
.fill-eval-questions-section .fill-eval-section-header {
    border-bottom-color: rgba(100, 116, 139, 0.25);
}

/* Editable inputs inside section panels stay white so they read as "fill me in"
   against the tinted section background. */
.fill-eval-section .mud-input-outlined,
.fill-eval-section .mud-input-filled,
.fill-eval-section .mud-select .mud-input-outlined {
    background-color: #fff !important;
    border-radius: 4px;
}

/* Read-only evaluator guidance blocks let the parent section's tint show
   through, so they sit naturally inside the Questions panel. */
.eval-help-block {
    background-color: transparent !important;
    border-color: var(--mud-palette-lines-default) !important;
}

/* ──── PlayerResultsDrillDownDialog header & mobile fullscreen ──── */
.results-drilldown-header {
    position: relative;
    background: linear-gradient(135deg, var(--mud-palette-primary-hover) 0%, transparent 65%);
    border-bottom: 3px solid var(--mud-palette-primary);
    border-radius: 4px;
}

/* Variable-content scroll area: pin the body to a fixed height so the dialog
   does not jump as the user navigates between players with different evaluator
   counts. Content shorter than the available space simply leaves whitespace;
   longer content scrolls inside the body. */
.results-drilldown-body {
    height: calc(100vh - 280px);
    overflow-y: auto;
}

/* Per-evaluator card Q&A: each row is a 2-column grid with a full-width separator */
.evaluator-breakdown-qa-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2fr;
    column-gap: 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.evaluator-breakdown-qa-row:last-child {
    border-bottom: none;
}

.evaluator-breakdown-qa-question {
    font-weight: 600;
    background: var(--mud-palette-background-gray);
    padding: 8px 12px;
    align-self: stretch;
}

.evaluator-breakdown-qa-answer {
    min-width: 0;
    padding: 8px 0;
}

/* Stack question above answer on narrow widths (e.g. dialog at smaller desktop sizes) */
@media (max-width: 720px) {
    .evaluator-breakdown-qa-row {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
}

@media (max-width: 599.95px) {
    /* Fullscreen the dialog edge-to-edge on phones */
    .mud-dialog.results-drilldown-dialog {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Drop the absolute-centered pager so it doesn't collide with CLOSE */
    .results-drilldown-actions {
        justify-content: space-between !important;
    }
    .results-drilldown-pager {
        position: static !important;
        transform: none !important;
    }

    /* On the full-screen mobile dialog let the body flow naturally */
    .results-drilldown-body {
        height: auto;
        overflow-y: visible;
    }
}

/* ──── Shared select-dialog results container ──── */
/* Used by Player/Agent/HighSchool/CollegiateTeam/Staff Select dialogs.
   min-height communicates "a results table will appear here" before the
   user searches; max-height keeps the dialog compact on desktop and
   viewport-relative on phones so it adapts to portrait/landscape. */
.app-select-results {
    min-height: 360px;
    max-height: calc(100vh - 320px);
    overflow: auto;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
}

/* Utility: hide a column/cell on phone-width screens. Apply to <th>/<td>
   pairs for low-priority columns inside select-dialog tables. */
.app-select-hide-sm { /* desktop: visible */ }

/* Tall dialog: grow to ~90% of viewport height on desktop so long forms
   don't require page-level scrolling. DialogContent scrolls internally;
   DialogActions stay pinned at the bottom. Mobile (FullScreen) overrides
   these heights with its own 100% rules, so this is a no-op there. */
.mud-dialog.tall-dialog {
    height: 90dvh;
    max-height: 90dvh;
}

/* Export-column picker: drag/drop visual cues. Rows highlight on hover so
   it's clear they're grabbable; the drop zone shows a thin accent border
   while dragging so users can see where the item will land. */
.export-picker-row {
    cursor: grab;
    background: var(--mud-palette-surface);
    transition: background-color 0.1s ease;
}

    .export-picker-row:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .export-picker-row:active {
        cursor: grabbing;
    }

.mud-drop-zone.mud-drop-zone-drag-block {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -2px;
}

/* For tall dialogs that keep their action row inside DialogContent (because
   the form uses EditForm + ButtonType.Submit), pin it at the bottom of the
   scroll area so users don't have to scroll to reach Save/Cancel. Apply
   `form-actions-sticky` to the row's MudStack. */
.mud-dialog.tall-dialog .form-actions-sticky {
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-surface);
    padding-top: 8px;
    padding-bottom: 4px;
    margin-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    z-index: 1;
}

/* Mirror of form-actions-sticky for a running-total or summary row that
   should remain visible while the user scrolls through a long list inside
   a tall dialog (e.g. the % allocation total above the budget group rows). */
.mud-dialog.tall-dialog .dialog-summary-sticky {
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    padding-top: 4px;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    z-index: 2;
}

/* Edit pages (PlayerEdit, AgentEdit): full-viewport layout. The host fills
   the viewport (minus the appbar + MudMainContent's pa-4), the title is
   fixed at top, the form scrolls inside .player-edit-scroll, and
   .player-edit-actions stays pinned at the bottom regardless of form
   length. 100dvh is mobile-aware. */
.player-edit-host,
.agent-edit-host {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 96px);
    min-height: 0;
}

.player-edit-host > .player-edit-title,
.agent-edit-host > .agent-edit-title {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

.player-edit-host .player-edit-form,
.agent-edit-host .agent-edit-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.player-edit-host .player-edit-scroll,
.agent-edit-host .agent-edit-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.player-edit-host .player-edit-actions,
.agent-edit-host .agent-edit-actions {
    flex: 0 0 auto;
    background: var(--mud-palette-background-gray);
    padding: 8px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
}

@media (max-width: 599.95px) {
    .agent-tab-panel {
        height: auto;
        overflow-y: visible;
    }

    .app-select-results {
        min-height: 280px;
        max-height: 60vh;
    }

    .app-select-hide-sm {
        display: none !important;
    }

    /* AgentEdit Section 1 (Name & Agency): stack avatar above the form fields
       on phones so the form column gets the full width. */
    .agent-edit-namebar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .agent-edit-namebar > .agent-edit-namebar-avatar {
        width: 100% !important;
    }
}

/* ──── Agent Profile Hero ──── */
.agent-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 60%, #3a2e0a 100%);
    border: 1px solid rgba(186, 154, 87, 0.35);
    border-radius: 8px;
    padding: 12px 14px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-hero-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    margin-bottom: 1px;
}

.agent-hero-eyebrow .agent-hero-dot {
    color: rgba(255, 255, 255, 0.4);
    margin: 0 2px;
}

.agent-hero-quickline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-top: 4px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
}

.agent-hero-link,
.agent-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.agent-hero-link {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.35);
}

.agent-hero-link:hover {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

/* ──── Shared select wrappers ──── */
/* LookupSelect, LookupMultiSelect, UserSelect, UserMultiSelect all wrap a
   MudAutocomplete. Multi-select variants hijack the floating label to display
   the current selection (see LookupMultiSelect.razor lines 119-138), so a long
   pick like "Agent Communication" or "Player Category (All)" can collide with
   the dropdown chevron on narrower fields. Clip the floating label and the
   input value just shy of the chevron so text ellipsizes cleanly.

   Buffer math: MudBlazor's .mud-input-label-outlined offsets the label
   transform(14px, …) from the container's left edge, so max-width:calc(100%-X)
   leaves a right margin of (X − 14)px. To clear a ~32px chevron with a few
   pixels of breathing room we need X ≈ 50px. */
.app-shared-select .mud-input-label,
.mud-autocomplete .mud-input-label-outlined {
    max-width: calc(100% - 50px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.app-shared-select input.mud-input-slot {
    text-overflow: ellipsis;
}

/* ──── Compact data-grid pager footer ──── */
/* MudBlazor ships the pager toolbar at 52px tall on desktop. The dense-UI
   convention used throughout this app prefers tighter bars, so we shorten
   it to 40px. The mobile breakpoint (<960px) ships its own min-height:100px
   variant for wrapped controls — leave that alone. */
@media (min-width: 960px) {
    .mud-table-pagination-toolbar {
        height: 40px;
        min-height: 40px;
    }
}