/*
 * GovComply global styles. Per DECISIONS.md M0.40, MudBlazor surfaces
 * are bordered-flat — not Material elevated — to match the V4 mockup at
 * govcomply/docs/mockups/v4-prototype.html. The mockup's `--lines`
 * default is `#DEE1E6`, which maps to MudBlazor's lines-default token.
 */

html, body {
    height: 100%;
    margin: 0;
    background: #F0F2F5;
    /* §4.1 — Inter (self-hosted, css/fonts.css), Arial fallback. */
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    color: #1A1A2E;
}

/* Bordered-flat override for MudPaper: ship Elevation="0" with a
 * 1px border so a vanilla <MudPaper> matches the mockup without
 * per-call overrides. Inline-background usages (e.g. the navy
 * smoke surface) keep their authored color. */
.mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: none !important;
}

/* Popovers (select / autocomplete / menu dropdowns) are MudPapers too, but
 * MudBlazor caps them with an inline max-height and lets the inner .mud-list
 * scroll at that same height. Under border-box sizing the 1px border above
 * took 2px out of the popover's box, so the list overflowed it by 2px and
 * the popover drew a second scroll bar beside the list's. Draw the same
 * edge as an inset outline instead: it takes no layout space, so the list
 * fits and only the list scrolls. */
.mud-popover.mud-paper {
    border: 0;
    outline: 1px solid var(--mud-palette-lines-default);
    outline-offset: -1px;
}

/* In-field captions on blank text-variant inputs. The theme draws input text
 * at 13px, which shortens the field, but MudBlazor still draws the unfloated
 * label at its 16px default, 24px down — the spot for its own 16px field. On
 * our shorter field the caption's bottom edge lands on the underline. Draw it
 * at the input's 13px (scale 0.8125) starting where typed text starts:
 * 16px label gap + the input's top padding (6px regular, 3px dense). The
 * :not() guards leave MudBlazor's floated state (value present, ShrinkLabel,
 * or focus) untouched; filled / outlined variants keep their own rules. */
.mud-input:not(.mud-shrink):not(:focus-within) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-text {
    transform: translate(0, 22px) scale(0.8125);
}

.mud-input:not(.mud-shrink):not(:focus-within) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-text.mud-input-label-margin-dense {
    transform: translate(0, 19px) scale(0.8125);
}

/* §6.1 — cards use a 12px corner radius (metric tiles already pin this). */
.mud-card {
    border-radius: 12px;
}

/* §6.6 — form inputs render at body size (13px). MudBlazor's default input text
   is larger and doesn't inherit the theme's Default FontSize; scope to the input
   slot (the value/placeholder text) so the floating label + outline notch keep
   their positioning. */
.mud-input-slot {
    font-size: 13px;
}

/* ── F-03 compliance dashboard (V5 #screen-dashboard polish) ──
 * Token values mirror the V5 prototype :root block
 * (govcomply/docs/mockups/v5-prototype.html lines 11-22). The C# theme
 * (Themes/GovComplyTheme.cs) carries the MudBlazor palette tokens; the
 * lighter tint / border pairs below are V5-only and not expressed as
 * MudBlazor palette entries, so they live here. */

/* Metric tiles: V5 .metric — larger radius, uppercase label, bar under
 * the percent value. */
.metric-tile {
    border-radius: 12px;
}

.metric-tile .metric-label {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #8A8AAA;
}

.metric-tile .metric-value {
    /* Pinned to the V5 .metric-val size (24px). These tiles render on
       Typo.h4, whose theme override dropped to 20px for page titles; without
       this explicit size the big metric numbers would shrink with it. */
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.metric-tile .metric-bar {
    margin: 8px 0 6px;
}

/* #2105: Open Actions summary tiles as keyboard-operable drill-down filters.
 * Scoped to this modifier so the shared .metric-tile vocabulary reused by
 * other screens does not read as clickable. */
.metric-tile-clickable {
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}

.metric-tile-clickable:hover {
    box-shadow: 0 2px 8px rgba(24, 95, 165, 0.12);
}

.metric-tile-clickable:focus-visible {
    box-shadow: 0 0 0 2px #185FA5;
}

/* Active (pressed) tile: filled-blue tint mirroring .v5-badge-blue, with a
 * persistent inset ring so the selected dimension reads at a glance. */
.metric-tile-active {
    background: #E6F1FB;
    box-shadow: inset 0 0 0 1px #185FA5;
}

/* Card headers: V5 .card-header — title + action with a divider rule. */
.card-header-row {
    padding-bottom: 12px;
    border-bottom: 1px solid #DEE1E6;
}

/* Onboarding checklist completed-row treatment: V5 .check-text.done. */
.check-row-done .check-text {
    color: #8A8AAA;
    text-decoration: line-through;
}

/* AI findings callouts: V5 severity-tinted boxes (red-lt / amber-lt /
 * blue-lt fill with the matching -md border). */
.finding-callout {
    border: 1px solid #DEE1E6;
}

.finding-callout.finding-critical {
    background: #FDEEEC;
    border-color: #F5B8B2;
}

.finding-callout.finding-moderate {
    background: #FEF3E2;
    border-color: #F8D49A;
}

.finding-callout.finding-info {
    background: #E6F1FB;
    border-color: #B5D4F4;
}

/* FR-F03-12a: acknowledged findings are muted, not removed. */
.finding-callout.finding-acknowledged {
    opacity: 0.6;
}

/* Issue #3277: dismissed findings get the same muted treatment — visible
 * under the show-acknowledged toggle, clearly not an ordinary finding. */
.finding-callout.finding-dismissed {
    opacity: 0.6;
}

/* Upcoming deadlines: keep the date column from wrapping mid-date. */
.deadlines-table .deadline-date {
    white-space: nowrap;
}

/* ── F-14 audit-profile admin (V5 polish, L4-ADMIN-01) ──
 * V5 has no admin screens, so these mirror the V5 prototype's generic
 * chrome / table / badge / banner vocabulary (v5-prototype.html :root
 * lines 11-22 and the .data-table / .badge / .page-head blocks). The C#
 * theme (Themes/GovComplyTheme.cs) carries the MudBlazor palette; the
 * tint pairs and table-header treatment below are V5-only and not
 * expressed as MudBlazor palette entries, so they live here. */

/* Page header: V5 .page-head / .page-title / .page-sub sizing. */
.admin-page-head {
    margin-bottom: 4px;
}

.admin-page-sub {
    color: #4A4A6A;
}

/* Filter strip: V5 card spacing above the data table. */
.profile-filter-strip {
    margin-bottom: 4px;
}

/* Data table header: V5 .data-table th — uppercase, tinted track, heavier
 * bottom rule. Scoped to the admin profile tables so the global MudTable
 * default is untouched elsewhere. */
.profile-table .mud-table-head th {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #8A8AAA;
    background: #F4F5F6;
    border-bottom: 2px solid #DEE1E6;
}

/* Badges: V5 .badge tint pairs (light fill + matching text), pill radius.
 * Applied to MudChip via Class so the chip's pill shape is kept but the
 * Material tonal fill is replaced with the flatter V5 treatment. */
.v5-badge.mud-chip {
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
}

.v5-badge-green.mud-chip {
    background: #EAF4EC;
    color: #2D7A3A;
}

.v5-badge-blue.mud-chip {
    background: #E6F1FB;
    color: #185FA5;
}

.v5-badge-amber.mud-chip {
    background: #FEF3E2;
    color: #8A4A07;
}

.v5-badge-navy.mud-chip {
    background: rgba(26, 46, 74, 0.08);
    color: #1A2E4A;
}

.v5-badge-gray.mud-chip {
    background: #F4F5F6;
    color: #5A5A5A;
}

/* Muted-warning tint (issue #2541): the matrix "Not issued" SQAR chip for a
 * supplier that has derived flowdown requirements — a real gap, but quieter
 * than the amber awaiting-acknowledgment chip. Gray fill, amber text tone. */
.v5-badge-amber-muted.mud-chip {
    background: #F4F5F6;
    color: #8A4A07;
}

/* Empty / no-results state: V5 centered illustration + microcopy. */
.profile-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #8A8AAA;
}

.profile-empty-state .empty-icon {
    color: #B8B8CC;
}

/* Detail metadata: V5 key/value caption + value pairing. */
.profile-kv-label {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #8A8AAA;
}

/* Last-active guard banner: V5 amber-lt fill with the matching -md border. */
.profile-guard-banner.mud-alert {
    background: #FEF3E2;
    border: 1px solid #F8D49A;
}

/* Version-history timeline chip: V5 emphasis on the current version. */
.version-current-chip.mud-chip {
    font-weight: 700;
    border-radius: 20px;
    background: #E6F1FB;
    color: #185FA5;
}

/* ── F-14 audit-profile edit form + lifecycle dialogs (V5 polish, L4-ADMIN-02) ──
 * Slice 2 of 3 for L4-ADMIN. Mirrors the same V5 prototype vocabulary the
 * list/detail polish (L4-ADMIN-01) anchored on — V5 has no admin authoring
 * screens, so the generic chrome / field / card-header / banner tokens
 * (v5-prototype.html :root lines 11-22, .field-label / .card-header / .page-head
 * blocks) are the reference. The C# theme (Themes/GovComplyTheme.cs) carries the
 * MudBlazor palette; the tints and section treatments below are V5-only and live
 * here. Scoped to edit-form / dialog classes so global MudForm / MudDialog
 * defaults are untouched elsewhere. */

/* Profile-fields + section-composition card headers: V5 .card-header title row
 * with a divider rule (reuses the .card-header-row vocabulary from the dashboard
 * block above). */
.profile-form-head {
    padding-bottom: 12px;
    border-bottom: 1px solid #DEE1E6;
    margin-bottom: 16px;
}

/* Save-state indicator: V5 subtle-state caption (saved / saving / dirty). */
.profile-save-state {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.profile-save-state.is-saving {
    color: #185FA5;
}

.profile-save-state.is-dirty {
    color: #8A4A07;
}

.profile-save-state.is-saved {
    color: #2D7A3A;
}

/* Required-section enforcement banner: V5 amber-lt fill + matching -md border
 * (same treatment as the detail view's last-active guard banner). */
.profile-section-banner.mud-alert {
    background: #FEF3E2;
    border: 1px solid #F8D49A;
}

/* Required-section lock affordance: V5 muted lock glyph in the section table. */
.section-required-lock {
    color: #8A8AAA;
}

/* Lifecycle dialog chrome: V5 modal surface — heavier title weight and a tinted
 * title rule so the five dialogs read as a cohesive confirmation set. Scoped via
 * the Class on each MudDialog so other dialogs keep the MudBlazor default. */
.profile-dialog .mud-dialog-title {
    font-weight: 700;
    letter-spacing: -0.2px;
    border-bottom: 1px solid #DEE1E6;
}

/* Destructive (deactivate) dialog: V5 red-tinted title rule to telegraph the
 * irreversible-by-default action ahead of the confirm button. */
.profile-dialog-destructive .mud-dialog-title {
    border-bottom-color: #F5B8B2;
    color: #C0392B;
}

/* Red badge tint pair (V5 --red-lt / --red): the L4-ADMIN-01 block defined
 * green/blue/amber/navy/gray but no red; the preview dialog's problem-count
 * chip needs it. Lives here next to the consumer that introduced it. */
.v5-badge-red.mud-chip {
    background: #FDEEEC;
    color: #C0392B;
}

/* ── L4-ADMIN-03 F-15 user management (V5 admin polish) ──
 * The pending-invites table is a secondary surface — subdued vs the primary
 * users table so the eye lands on active users first (V5 secondary-table
 * treatment). Tint values mirror the V5 prototype --gray-lt / --text3 tokens. */
.pending-invites-section {
    background: #FAFBFC;
}

.pending-invites-section .mud-table-root {
    background: transparent;
}

.pending-invites-section .card-header-row .mud-typography {
    color: #4A4A6A;
}

/* Role chips wrap to a tidy multi-row set rather than stretching the column. */
.role-chip-set {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Role grid rows get a hairline separator so the six roles read as a list. */
.role-grid .mud-list-item:not(:last-child) {
    border-bottom: 1px solid #DEE1E6;
}

/* #1655 Manage popup — Activity tab polish. The trail can run long, so cap the
 * list to roughly the Roles panel's height and scroll beyond it (same HEIGHT as
 * Roles) while widening the panel (increase WIDTH) so each headline reads on one
 * line without wrapping. min-width widens the shared dialog only while Activity
 * is the active tab. */
.activity-panel {
    min-width: 560px;
}

.activity-panel .activity-list {
    max-height: 360px;
    overflow-y: auto;
}

/* Click-to-copy affordance: a subtle row hover so the copyable rows read as
 * interactive (paired with the trailing copy icon + the "Copied" snackbar). */
.activity-panel .mud-list-item:hover {
    background-color: #F2F4F8;
}

/* ── F-07 audit timeline (V5 #screen-timeline polish, L4-POLISH-10) ──
 * Token values mirror the V5 prototype :root block
 * (govcomply/docs/mockups/v5-prototype.html lines 11-22). The C# theme
 * (Themes/GovComplyTheme.cs) carries the MudBlazor palette tokens; the
 * V5-only chrome (page header sizing, legend, focus ring, empty state)
 * is not expressed as MudBlazor palette entries, so it lives here. */

/* Page header: V5 .page-head / .page-title / .page-sub sizing. */
.gc-page-head {
    margin-bottom: 4px;
}

/* Title row with a trailing action (e.g. the #1564 "Open contract PDF" button):
 * keep the heading and the action on one baseline with the action pushed right,
 * wrapping gracefully on narrow viewports. */
.gc-page-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.gc-page-title {
    font-weight: 700;
    letter-spacing: -0.2px;
}

.gc-page-sub {
    color: #4A4A6A;
}

/* Legend: V5 inline color-key row mapping the fixed five-color scheme to
 * labels so meaning is carried in text, not color alone (WCAG 1.4.1). */
.gc-timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid #DEE1E6;
}

.gc-timeline-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Keyboard hint above the track. */
.gc-timeline-hint {
    display: block;
    margin-bottom: 12px;
}

/* Event rows: pointer affordance on navigable rows plus a visible focus
 * ring for the roving-tabindex keyboard navigation. */
.gc-timeline-event {
    border-radius: 8px;
    padding: 4px 8px;
    margin: -4px -8px;
    outline: none;
}

.gc-timeline-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.gc-timeline-clickable:hover {
    background: #F4F5F6;
}

.gc-timeline-event:focus-visible {
    box-shadow: 0 0 0 2px #185FA5;
    background: #E6F1FB;
}

/* "Today" indicator: V5 emphasis so the past/upcoming boundary reads
 * stronger than the surrounding event rows. */
.gc-timeline-today {
    border-left: 2px solid var(--mud-palette-primary, #185FA5);
    padding-left: 8px;
    margin-left: -10px;
}

/* Empty / no-events state: V5 centered illustration + microcopy. */
.gc-timeline-empty {
    padding: 40px 20px;
    text-align: center;
    color: #8A8AAA;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gc-timeline-empty-icon {
    width: 48px;
    height: 48px;
    color: #B8B8CC;
}

/* First-paint skeleton: constrain the placeholder rows to the track width. */
.gc-timeline-skeleton {
    max-width: 480px;
}

/* ── L4-POLISH-03 F-04 clause tracker (V5 #screen-clauses polish) ──
 * Mirrors the V5 prototype's .data-table / .badge / mono-reference chrome
 * (v5-prototype.html #screen-clauses, lines ~840-888). Token values mirror
 * the V5 :root block (lines 11-22); the tints below are V5-only and not
 * expressed as MudBlazor palette entries, so they live here. Scoped to the
 * clause-table so the global MudTable default is untouched elsewhere. */

.clause-filter-strip {
    margin-bottom: 4px;
}

/* Data table header: V5 .data-table th — uppercase, tinted track, heavier
 * bottom rule, plus a shadow under the sticky (FixedHeader) header so it
 * lifts off the scrolling rows. */
.clause-table .mud-table-head th {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #8A8AAA;
    background: #F4F5F6;
    border-bottom: 2px solid #DEE1E6;
    box-shadow: 0 2px 4px rgba(26, 26, 46, 0.06);
}

/* V5 monospace clause reference, rendered as the detail click-through link. */
.clause-number-link {
    font-family: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
}

/* Inline clause-status action menu: V5 popover — flatter radius and a soft
 * elevation rather than the Material default. */
.clause-action-menu + .mud-popover,
.mud-list.clause-action-menu {
    border-radius: 10px;
}

/* ── F-02 contract onboarding wizard (V5 #screen-onboard polish, L4-POLISH-02) ──
 * The shared WizardStepper (Components/WizardStepper.razor) and the
 * onboarding shell (Pages/Onboarding.razor) render the V5 step indicator and
 * AI guidance callout. Token values mirror the V5 prototype :root + .wizard /
 * .wstep / .ai-callout blocks (govcomply/docs/mockups/v5-prototype.html lines
 * 11-22, 138-151). These are V5-only chrome not expressed as MudBlazor palette
 * entries, so they live here alongside the F-03 / F-14 polish blocks above. */

/* Step indicator: V5 .wizard — numbered circles joined by connector lines,
 * with done (green) / active (blue) / pending (grey) colour states. */
.wizard-stepper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 0;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #DEE1E6;
}

.wizard-stepper .wstep {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: #8A8AAA;
}

.wizard-stepper .wstep.done {
    color: #2D7A3A;
}

.wizard-stepper .wstep.active {
    color: #185FA5;
}

.wizard-stepper .wstep-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    background: #FFFFFF;
}

.wizard-stepper .wstep.done .wstep-num {
    background: #2D7A3A;
    border-color: #2D7A3A;
    color: #FFFFFF;
}

.wizard-stepper .wstep.active .wstep-num {
    background: #185FA5;
    border-color: #185FA5;
    color: #FFFFFF;
}

.wizard-stepper .wstep-line {
    flex: 1;
    height: 1.5px;
    min-width: 20px;
    margin: 0 10px;
    background: #DEE1E6;
}

.wizard-stepper .wstep-line.done {
    background: #2D7A3A;
}

/* AI guidance callout: V5 .ai-callout — gradient-tinted info box with a
 * blue header mark and muted body copy. */
.ai-callout {
    background: linear-gradient(135deg, #EBF3FB 0%, #E6EEF8 100%);
    border: 1px solid #B5D4F4;
    border-radius: 10px;
    padding: 14px 16px;
}

.ai-callout .ai-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #185FA5;
    margin-bottom: 6px;
}

.ai-callout .ai-header .mud-icon-root {
    font-size: 16px;
}

.ai-callout .ai-body {
    font-size: 13px;
    line-height: 1.6;
    color: #4A4A6A;
}

/* Onboarding AI-analysis step (#1601): the early-findings preview is a
 * three-up responsive card grid, and the live sub-state strip is a wrapping
 * chip row. Both degrade to a single column on narrow viewports. */
.gc-findings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.gc-substate-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Screen-reader-only utility: keeps step-state text (completed / current /
 * not started) in the accessibility tree without painting it, so colour is
 * never the sole state channel (WCAG 2.1 AA 1.4.1). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── F-09 contract portfolio (V5 #screen-portfolio polish, L4-POLISH-07) ──
 * Mirrors the V5 prototype's .page-head / .metric / by-agency group-row /
 * .data-table / trend-card chrome (v5-prototype.html #screen-portfolio, lines
 * ~1453-1626). Token values mirror the V5 :root block (lines 11-22); the tints
 * and tile treatment below are V5-only and not expressed as MudBlazor palette
 * entries, so they live here next to the F-03 / F-07 / F-14 polish blocks.
 * Reuses the shared .gc-page-head / .metric-tile / .v5-badge / .card-header-row
 * / .visually-hidden vocabulary defined above. */

/* Export CTA group: V5 .btn-ghost button group sits flush against the primary
 * add-contract action in the page header. */
.portfolio-export-group {
    flex-shrink: 0;
}

/* View-mode toggle header (#1468): the grouped-list card header — a section title
 * on the left and the three re-pivot pills on the right (v5-prototype.html
 * #screen-portfolio lines ~1493-1499). */
.portfolio-group-head {
    margin-bottom: 4px;
}

.portfolio-grouping-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* V5 .badge pill treatment, mirrored from the .v5-badge tint pairs above but
 * applied to keyboard-operable <span role="button"> pills (not MudChip), so the
 * toggle is Tab-focusable and Enter / Space selectable. */
.portfolio-grouping-pill {
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 12px;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Active pill: filled-blue (mirrors .v5-badge-blue). */
.portfolio-grouping-pill-active {
    background: #E6F1FB;
    color: #185FA5;
}

/* Inactive pill: gray (mirrors .v5-badge-gray). */
.portfolio-grouping-pill-inactive {
    background: #F4F5F6;
    color: #5A5A5A;
}

.portfolio-grouping-pill-inactive:hover {
    background: #E9EAEC;
}

.portfolio-grouping-pill:focus-visible {
    box-shadow: 0 0 0 2px #185FA5;
}

/* By-agency group header: V5 group-row — a rounded agency abbreviation tile, a
 * name/sub stack, and a right-aligned weighted-compliance badge. Clickable +
 * keyboard-operable (role="button"), with a visible focus ring. */
.portfolio-agency-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    cursor: pointer;
    outline: none;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.portfolio-agency-head:hover {
    background: #F4F5F6;
}

.portfolio-agency-head:focus-visible {
    box-shadow: 0 0 0 2px #185FA5;
    background: #E6F1FB;
}

.portfolio-agency-tile {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.portfolio-agency-meta {
    min-width: 0;
}

.portfolio-agency-name {
    font-size: 14px;
    font-weight: 600;
}

.portfolio-agency-sub {
    font-size: 12px;
    color: #8A8AAA;
}

/* By-agency contract rows: V5 #screen-portfolio .contract-row treatment — a
 * status dot, monospace ID, name/sub stack, and a right-aligned severity-count +
 * clauses-tracked column. Indented under the agency-head tile (42px = 32px tile +
 * 10px gap) so the rows read as children of the group. Clickable +
 * keyboard-operable (role="button"), with a visible focus ring. */
.portfolio-contract-list {
    margin-left: 42px;
}

.portfolio-contract-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    outline: none;
    border-radius: 6px;
    border-bottom: 1px solid #DEE1E6;
    transition: background 0.15s ease;
}

.portfolio-contract-row:last-child {
    border-bottom: none;
}

.portfolio-contract-row:hover {
    background: #F4F5F6;
}

.portfolio-contract-row:focus-visible {
    box-shadow: 0 0 0 2px #185FA5;
    background: #E6F1FB;
}

/* Status dot: colour driven by DotClass(StatusBadge). */
.portfolio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* §3.2 — status dots use the semantic palette, matching every other status
   surface (badges, counts). Previously off-palette Tailwind-ish values. */
.portfolio-dot-red {
    background: #C0392B;
}

.portfolio-dot-amber {
    background: #8A4A07;
}

.portfolio-dot-green {
    background: #2D7A3A;
}

.portfolio-dot-gray {
    background: #5A5A5A;
}

/* V5 monospace contract reference. The fixed 160px column is what holds every
 * row's name/sub stack on one left edge (v5-prototype.html .contract-id, line
 * 190): a content-sized column started each row's title at a different x, so a
 * list of contracts read as ragged. 12px is the prototype size and it fits a
 * 22-character reference in the column; a longer reference truncates and keeps
 * its full text in the title attribute, and the row's aria-label carries the
 * full number either way. */
.portfolio-contract-id {
    font-family: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-contract-meta {
    flex: 1;
    min-width: 0;
}

.portfolio-contract-name {
    font-size: 13px;
    color: #1A1A2E;
}

.portfolio-contract-sub {
    font-size: 11px;
    color: #8A8AAA;
}

/* #1727 lifecycle badge — inline Active/Fulfilled pill next to the contract name,
   deliberately distinct from the round compliance status dot. Fulfilled reads as a
   muted gray chip so a revealed contract is legible without competing with the
   severity colours. */
.portfolio-lifecycle-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.portfolio-lifecycle-fulfilled {
    background: #E6E6EF;
    color: #5A5A7A;
}

/* Right-aligned severity counts + clauses-tracked secondary line. */
.portfolio-contract-counts {
    text-align: right;
    font-size: 12px;
    flex-shrink: 0;
    width: 140px;
}

.portfolio-counts-primary {
    font-weight: 600;
}

.portfolio-counts-red {
    color: #C0392B;
}

.portfolio-counts-amber {
    color: #8A4A07;
}

.portfolio-counts-green {
    color: #2D7A3A;
}

.portfolio-counts-secondary {
    color: #8A8AAA;
}

/* #3366 awaiting-confirmation chip on the contract row: pill treatment following
 * .portfolio-lifecycle-badge, minus the uppercase/letter-spacing — the chip text
 * ("N awaiting confirmation") must hold a single line inside the 140px counts
 * column, and nowrap is what stops the wrap the sentence form suffered. Tint
 * pair matches the .v5-badge-amber awaiting-confirmation chips elsewhere. */
.portfolio-counts-chip {
    display: inline-block;
    margin-top: 2px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    background: #FEF3E2;
    color: #8A4A07;
}

/* #3474 Stage cell: the stage name (ContractProgressDisplay wording), the red
 * lane badge when Blocked or Failed, and the pending-confirmation chip. A fixed
 * column, like .portfolio-contract-id on the left, so every row's counts keep
 * one right edge. */
.portfolio-contract-stage {
    flex: 0 0 180px;
    font-size: 12px;
    min-width: 0;
}

.portfolio-stage-cell-name {
    font-weight: 600;
}

/* Lane badge: red tint for both lanes, matching the tracker's Color.Error lane
 * chip (the badge's own text — "Blocked" / "Failed" — carries the meaning, the
 * colour is never the sole channel). Pill treatment from
 * .portfolio-lifecycle-badge. */
.portfolio-stage-lane {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #FBEAE8;
    color: #C0392B;
}

/* #3508 paused badge: the lane badge's pill in the amber the tracker's
 * Color.Warning paused chip and the .portfolio-counts-chip tint pair already
 * use — the badge's own text ("Paused") carries the meaning, the colour is
 * never the sole channel. */
.portfolio-stage-paused {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #FEF3E2;
    color: #8A4A07;
}

/* #3474 stage summary strip: one keyboard-operable pill per stage (journey
 * order) plus Blocked / Failed, following .portfolio-grouping-pill's
 * interaction treatment. The active chip fills blue; the lane chips tint red so
 * the stuck states read at a glance. */
.portfolio-stage-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.portfolio-stage-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 12px;
    cursor: pointer;
    user-select: none;
    outline: none;
    background: #F4F5F6;
    color: #5A5A5A;
    transition: background 0.15s ease, color 0.15s ease;
}

.portfolio-stage-chip:hover {
    background: #E9EAEC;
}

.portfolio-stage-chip:focus-visible {
    box-shadow: 0 0 0 2px #185FA5;
}

.portfolio-stage-chip-lane {
    background: #FBEAE8;
    color: #C0392B;
}

.portfolio-stage-chip-active,
.portfolio-stage-chip-lane.portfolio-stage-chip-active {
    background: #185FA5;
    color: #FFFFFF;
}

.portfolio-stage-chip-count {
    font-weight: 700;
}

/* Mobile-narrow: the sub-line wraps and the row tightens, but the counts column
 * stays right-aligned (acceptance: "sub-line wraps; counts stay right-aligned").
 * A 160px reference column would leave the name ~110px here and wrap every
 * title, so the reference takes the first line on its own (dot + id) and the
 * name/sub stack plus counts take the second. Every row then starts at the same
 * left edge without paying for the column. */
@media (max-width: 640px) {
    .portfolio-contract-list {
        margin-left: 0;
    }

    .portfolio-contract-row {
        gap: 8px;
        padding: 10px 8px;
        flex-wrap: wrap;
    }

    /* Scoped to the agency row: the risk-card row does not wrap, so a
     * full-width reference there would crush its chip and note. */
    .portfolio-contract-row .portfolio-contract-id {
        flex: 0 0 calc(100% - 16px);
    }

    .portfolio-contract-counts {
        width: auto;
        margin-left: auto;
    }

    /* #3474: the stage cell gives up its fixed column on mobile-narrow and
     * sits content-sized on the wrapped second line beside the counts. */
    .portfolio-contract-stage {
        flex: 0 1 auto;
    }
}

/* Highest-risk card rows (#1467): V5 risk-card compact line — monospace ID,
 * severity chip, and a context note. Click-through + keyboard-operable
 * (role="button") with the same focus ring as the agency contract rows. */
.portfolio-risk-list {
    margin-top: 10px;
}

.portfolio-risk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    cursor: pointer;
    outline: none;
    border-radius: 6px;
    border-bottom: 1px solid #DEE1E6;
    transition: background 0.15s ease;
}

.portfolio-risk-row:last-child {
    border-bottom: none;
}

.portfolio-risk-row:hover {
    background: #F4F5F6;
}

.portfolio-risk-row:focus-visible {
    box-shadow: 0 0 0 2px #185FA5;
    background: #E6F1FB;
}

/* The context note takes the remaining width and truncates rather than wrapping
 * the compact row onto a second line. */
.portfolio-risk-note {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty / no-results state: V5 centred illustration + microcopy (shares the
 * timeline empty-state shape). */
.gc-portfolio-empty {
    padding: 24px 20px;
    text-align: center;
    color: #8A8AAA;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gc-portfolio-empty-icon {
    width: 48px;
    height: 48px;
    color: #B8B8CC;
}

/* ── F-11 open actions workbench (V5 #screen-actions polish, L4-POLISH-09) ──
 * Mirrors the V5 prototype's .page-head / .metric / .data-table / .badge /
 * user-avatar chrome (v5-prototype.html #screen-actions, lines ~1796-2008).
 * Token values mirror the V5 :root block (lines 11-22); the tints and table
 * treatment below are V5-only and not expressed as MudBlazor palette entries,
 * so they live here next to the F-07 / F-09 polish blocks. Reuses the shared
 * .gc-page-head / .metric-tile / .v5-badge vocabulary defined above. */

/* Source-filter chip rail: V5 chip group wraps under its section label. */
.actions-source-chips {
    flex-wrap: wrap;
    gap: 6px;
}

/* Data table header: V5 .data-table th — uppercase, tinted track, heavier
 * bottom rule, plus a shadow under the sticky (FixedHeader) header so it lifts
 * off the scrolling rows. Scoped to the actions table so the global MudTable
 * default is untouched elsewhere. */
.actions-table .mud-table-head th {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #8A8AAA;
    background: #F4F5F6;
    border-bottom: 2px solid #DEE1E6;
    box-shadow: 0 2px 4px rgba(26, 26, 46, 0.06);
}

/* Owner avatar: V5 small initials circle in the owner column. */
.actions-owner-av {
    width: 26px;
    height: 26px;
    font-size: 11px;
    font-weight: 700;
}

/* Bulk action bar: V5 selection tint strip carrying a count pill. */
.actions-bulk-bar {
    background: var(--mud-palette-primary-hover);
    border-radius: 8px;
}

.actions-selection-pill.mud-chip {
    font-weight: 700;
}

/* Empty / no-results state: V5 centred illustration + microcopy (shares the
 * timeline / portfolio empty-state shape). */
.gc-actions-empty {
    padding: 40px 20px;
    text-align: center;
    color: #8A8AAA;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gc-actions-empty-icon {
    width: 48px;
    height: 48px;
    color: #B8B8CC;
}

/* ── F-20 PO workbench (V5 #screen-powb polish, L4-POLISH-15) ──
 * Mirrors the V5 prototype's .page-head / .card-header filter row / .data-table /
 * .badge chrome (v5-prototype.html #screen-powb, lines ~2442-2536). Token values
 * mirror the V5 :root block (lines 11-22); the tints and table treatment below
 * are V5-only and not expressed as MudBlazor palette entries, so they live here
 * next to the F-09 / F-11 polish blocks. Reuses the shared .gc-page-head /
 * .v5-badge vocabulary defined above. */

/* Lifecycle-state chip rail sits above the data table. */
.powb-filter-strip {
    margin-bottom: 4px;
}

/* Search + sort inputs keep a sensible width inside the wrapping filter row. */
.powb-search {
    flex: 1 1 240px;
    max-width: 320px;
}

.powb-sort {
    flex: 0 1 200px;
}

/* Data table header: V5 .data-table th — uppercase, tinted track, heavier bottom
 * rule, plus a shadow under the sticky (FixedHeader) header so it lifts off the
 * scrolling rows. Scoped to the PO workbench table so the global MudTable default
 * is untouched elsewhere. */
.powb-table .mud-table-head th {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #8A8AAA;
    background: #F4F5F6;
    border-bottom: 2px solid #DEE1E6;
    box-shadow: 0 2px 4px rgba(26, 26, 46, 0.06);
}

/* V5 emphasised PO reference in the first column. */
.powb-po-number {
    font-weight: 700;
}

/* Empty / no-results state: V5 centred illustration + microcopy (shares the
 * timeline / portfolio / actions empty-state shape). */
.gc-powb-empty {
    padding: 40px 20px;
    text-align: center;
    color: #8A8AAA;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gc-powb-empty-icon {
    width: 48px;
    height: 48px;
    color: #B8B8CC;
}

/* ── F-08 audit package generator (V5 #screen-auditpkg polish, L4-POLISH-06) ──
 * Mirrors the V5 prototype's #screen-auditpkg chrome (v5-prototype.html lines
 * ~1025-1452): the collect-progress strip, the validation findings .data-table /
 * .badge treatment, the green "package ready" banner, and the review-step
 * manifest summary table. Token values mirror the V5 :root block (lines 11-22);
 * the tints below are V5-only and not expressed as MudBlazor palette entries, so
 * they live here next to the F-09 / F-11 / F-20 polish blocks. Reuses the shared
 * .ai-callout / .finding-callout / .metric-tile / .v5-badge / .card-header-row /
 * .wizard-stepper vocabulary defined above. */

/* Collect-progress strip: V5 .progress block — status chip + microcopy over an
 * (honestly indeterminate) bar, since the assemble/validate pass is a single
 * #702 call rather than a streamed multi-document pull. */
.gc-auditpkg-progress {
    border: 1px solid #DEE1E6;
    border-radius: 10px;
    padding: 14px 16px;
}

.gc-auditpkg-progress-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.gc-auditpkg-bar {
    border-radius: 20px;
}

/* Validation findings table header: V5 .data-table th — uppercase, tinted track,
 * heavier bottom rule. Scoped so the global MudTable default is untouched. */
.gc-auditpkg-table .mud-table-head th {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #8A8AAA;
    background: #F4F5F6;
    border-bottom: 2px solid #DEE1E6;
}

/* V5 monospace clause / Bates reference. */
.gc-auditpkg-clause-ref {
    font-family: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
}

/* Evidence expander toggle in the clauses table: flattened to the visual
 * weight of the adjacent "No evidence" body2 text — button chrome (min
 * sizes, padding, uppercase label) removed so rows with and without
 * evidence share one height and baseline. Metrics only: it stays a real
 * MudButton, so focus order and Enter/Space toggling are untouched. */
.mud-button-root.gc-auditpkg-evidence-toggle {
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-size: var(--mud-typography-body2-size, 0.875rem);
    font-weight: var(--mud-typography-body2-weight, 400);
    line-height: var(--mud-typography-body2-lineheight, 1.43);
    letter-spacing: var(--mud-typography-body2-letterspacing, 0.01071em);
    text-transform: none;
}

.mud-button-root.gc-auditpkg-evidence-toggle .mud-icon-root {
    font-size: 1.125rem;
}

/* "Audit package ready" banner: V5 green gradient fill + matching border. */
.gc-auditpkg-ready {
    background: linear-gradient(135deg, #F0F9F2 0%, #E6F4EA 100%);
    border: 1px solid #C4E2CC;
    border-radius: 10px;
    padding: 14px 16px;
}

.gc-auditpkg-ready-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2D7A3A;
    margin-bottom: 5px;
}

.gc-auditpkg-ready-head .mud-icon-root {
    font-size: 18px;
}

.gc-auditpkg-ready-body {
    color: #4A4A6A;
}

/* Manifest summary table: V5 review-step key/value grid — muted label column. */
.gc-auditpkg-summary .gc-auditpkg-summary-key {
    color: #8A8AAA;
    width: 40%;
}

/* ── F-10 subcontractor flowdown (V5 #screen-subs polish, L4-POLISH-08) ──
 * Mirrors the V5 prototype's .page-head / .metric / .data-table / .badge chrome
 * (v5-prototype.html #screen-subs, lines ~1627-1793). Token values mirror the
 * V5 :root block (lines 11-22); the tints and table treatment below are V5-only
 * and not expressed as MudBlazor palette entries, so they live here next to the
 * F-09 / F-11 / F-20 polish blocks. Reuses the shared .gc-page-head /
 * .metric-tile / .v5-badge vocabulary defined above. */

/* Header action group keeps the import + add buttons flush right. */
.subs-head-actions {
    flex-shrink: 0;
}

/* Status filter rail: V5 chip group wraps under the metrics row. */
.subs-filter-chips {
    flex-wrap: wrap;
    gap: 6px;
}

/* Data table header: V5 .data-table th — uppercase, tinted track, heavier
 * bottom rule. Scoped to the subs table so the global MudTable default is
 * untouched elsewhere. */
.subs-table .mud-table-head th {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #8A8AAA;
    background: #F4F5F6;
    border-bottom: 2px solid #DEE1E6;
}

/* Row primary text + V5 CAGE / tier subtext under the subcontractor name. */
.subs-name {
    font-weight: 600;
}

.subs-meta {
    margin-top: 2px;
}

.subs-cage {
    font-family: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 11px;
    color: #8A8AAA;
}

/* Empty / no-results state: V5 centred illustration + microcopy (shares the
 * timeline / portfolio / actions empty-state shape). */
.gc-subs-empty {
    padding: 24px 20px;
    text-align: center;
    color: #8A8AAA;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gc-subs-empty-icon {
    width: 48px;
    height: 48px;
    color: #B8B8CC;
}

/* ── F-19 supplier scorecards (V5 #screen-scorecards polish, L4-POLISH-11) ──
 * Mirrors the V5 prototype's .page-head / tier-band / .data-table chrome
 * (v5-prototype.html #screen-scorecards, lines ~2064-2155). Token values mirror
 * the V5 :root block (lines 11-22); the focus ring and empty-state below are
 * V5-only chrome not expressed as MudBlazor palette entries, so they live here.
 * Reuses the shared .gc-page-head / .gc-page-title / .gc-page-sub vocabulary. */

/* Drill-down rows: pointer affordance plus a visible focus ring for the
 * role="button" / tabindex keyboard navigation into a supplier's scorecard. */
.gc-scorecard-row {
    cursor: pointer;
    outline: none;
    transition: background 0.15s ease;
}

.gc-scorecard-row:hover {
    background: #F4F5F6;
}

.gc-scorecard-row:focus-visible {
    box-shadow: inset 0 0 0 2px #185FA5;
    background: #E6F1FB;
}

/* Empty / no-data state: V5 centred illustration + microcopy (shares the
 * timeline / subs empty-state shape). */
.gc-scorecard-empty {
    padding: 24px 20px;
    text-align: center;
    color: #8A8AAA;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gc-scorecard-empty-icon {
    width: 48px;
    height: 48px;
    color: #B8B8CC;
}

/* ── F-18 FAI workbench (V5 #screen-faiwb polish, L4-POLISH-13) ──
 * Token values mirror the V5 prototype :root block (v5-prototype.html lines
 * 11-22); the tints and table treatment below are V5-only and not expressed as
 * MudBlazor palette entries, so they live here next to the F-09 / F-11 / F-20
 * polish blocks. Reuses the shared .gc-page-head / .metric-tile / .v5-badge
 * vocabulary defined above. */

/* Lifecycle-state chip rail sits above the search/sort row. */
.faiwb-filter-strip {
    margin-bottom: 4px;
}

/* Search + sort inputs keep a sensible width inside the wrapping filter row. */
.faiwb-search {
    flex: 1 1 240px;
    max-width: 360px;
}

.faiwb-sort {
    flex: 0 1 200px;
}

/* Scroll container giving the table body a bounded height so the sticky header
 * has something to pin against on long FAI lists. */
.faiwb-table-wrap {
    max-height: 60vh;
    overflow-y: auto;
}

/* Data table header: V5 .data-table th — uppercase, tinted track, heavier bottom
 * rule, plus a shadow under the sticky header so it lifts off the scrolling
 * rows. Scoped to the FAI workbench table so the global MudSimpleTable default is
 * untouched elsewhere. */
.faiwb-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #8A8AAA;
    background: #F4F5F6;
    border-bottom: 2px solid #DEE1E6;
    box-shadow: 0 2px 4px rgba(26, 26, 46, 0.06);
}

/* V5 emphasised part-number link in the first column (keyboard-focusable
 * drill-in — WCAG 2.1.1). */
.faiwb-part-number {
    font-weight: 700;
}

/* Empty / no-results state: V5 centred illustration + microcopy (shares the
 * timeline / portfolio / actions / powb empty-state shape). */
.gc-faiwb-empty {
    padding: 40px 20px;
    text-align: center;
    color: #8A8AAA;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gc-faiwb-empty-icon {
    width: 48px;
    height: 48px;
    color: #B8B8CC;
}

/* ── F-16 SQAR templates (V5 #screen-sqartpl polish, L4-POLISH-14) ──
 * Mirrors the V5 prototype's .page-head / status .badge / footer guidance
 * chrome (v5-prototype.html #screen-sqartpl, lines ~2371-2437). Token values
 * mirror the V5 :root block (lines 11-22). Reuses the shared .gc-page-head /
 * .gc-page-title / .gc-page-sub / .v5-badge / .ai-callout vocabulary; only the
 * sections empty-state below is net-new chrome (shares the timeline / portfolio
 * / scorecard empty-state shape). */
.gc-sqartpl-empty {
    padding: 32px 20px;
    text-align: center;
    color: #8A8AAA;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gc-sqartpl-empty-icon {
    width: 48px;
    height: 48px;
    color: #B8B8CC;
}

/* ── F-05 document vault (V5 #screen-vault polish, L4-POLISH-04) ──
 * Mirrors the V5 prototype's .page-head / .data-table / .badge chrome
 * (v5-prototype.html #screen-vault, lines ~889-969). Token values mirror the
 * V5 :root block (lines 11-22); the upload-dropzone state treatment and tints
 * below are V5-only and not expressed as MudBlazor palette entries, so they
 * live here next to the F-07 / F-09 / F-11 polish blocks. Reuses the shared
 * .gc-page-head / .gc-page-title / .gc-page-sub / .v5-badge vocabulary. */

/* Upload dropzone: V5 idle / hover / drag-active / done states with smooth
 * motion timing. The dropzone fills the MudFileUpload activator so the whole
 * area is clickable and a native drop target; the drag-active class is toggled
 * by Blazor DOM drag events, and the done state shows the chosen file. */
.vault-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 20px;
    border: 1.5px dashed #C4C4D4;
    border-radius: 10px;
    background: #FAFBFC;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.vault-dropzone:hover {
    border-color: #185FA5;
    background: #F4F8FD;
}

.vault-dropzone.is-active {
    border-style: solid;
    border-color: #185FA5;
    background: #E6F1FB;
    box-shadow: 0 0 0 2px rgba(24, 95, 165, 0.25);
}

.vault-dropzone.is-done {
    border-style: solid;
    border-color: #C4E2CC;
    background: #F0F9F2;
}

.vault-dropzone-icon {
    width: 36px;
    height: 36px;
    font-size: 36px;
    color: #8A8AAA;
}

.vault-dropzone.is-active .vault-dropzone-icon {
    color: #185FA5;
}

.vault-dropzone.is-done .vault-dropzone-icon {
    color: #2D7A3A;
}

.vault-dropzone-hint {
    font-size: 12px;
    color: #8A8AAA;
}

/* Data table header: V5 .data-table th — uppercase, tinted track, heavier
 * bottom rule. Scoped to the vault table so the global MudTable default is
 * untouched elsewhere. */
.vault-table .mud-table-head th {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #8A8AAA;
    background: #F4F5F6;
    border-bottom: 2px solid #DEE1E6;
}

/* V5 monospace clause reference on the file row's clause-tag chips, at V5 chip
 * density. Reuses the .v5-badge-blue tint pair. */
.vault-clause-chip.mud-chip {
    font-family: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
}

/* Empty / no-documents state: V5 centred illustration + microcopy (shares the
 * timeline / portfolio / actions empty-state shape). */
.gc-vault-empty {
    padding: 40px 20px;
    text-align: center;
    color: #8A8AAA;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gc-vault-empty-icon {
    width: 48px;
    height: 48px;
    font-size: 48px;
    color: #B8B8CC;
}

/* Soft-delete confirmation dialog: V5 destructive-action treatment — red-tinted
 * title rule telegraphing the irreversible-by-default soft-delete ahead of the
 * confirm button (mirrors the admin profile destructive dialog). MudDialog's
 * built-in focus trap keeps focus inside the dialog and restores it to the
 * triggering Remove button on close (WCAG 2.4.3). */
.vault-dialog-destructive .mud-dialog-title {
    font-weight: 700;
    letter-spacing: -0.2px;
    border-bottom: 1px solid #F5B8B2;
    color: #C0392B;
}

/* Attention row: documents not yet cleared by the virus scan take the V5 red-lt
 * tint (matching the prototype's signature-required row), reinforcing the
 * "Action required" callout. The Status badge carries the label in text, so the
 * tint is a redundant cue, not the sole signal (WCAG 1.4.1). */
.vault-table .gc-vault-row-attention td {
    background: #FDEEEC;
}

/* Long filenames truncate with an ellipsis; the full name stays reachable via the
 * cell's title attribute and the row never reflows the fixed table columns. */
.gc-vault-filename {
    display: inline-block;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── F-06 AI validator (V5 #screen-validator polish, L4-POLISH-05) ──
 * The finding-callout tint and acknowledged treatment are shared with the F-03
 * dashboard block above (v5-prototype.html lines 1005-1018). These add the
 * validator-only V5 details: the page subtitle, the mono clause-citation
 * treatment, the recommended-action label, and the empty-state illustration. */

/* Page subtitle: V5 .page-sub under the title (v5-prototype.html line 975). */
.validator-page-sub {
    color: #4A4A6A;
}

/* Clause citation: V5 renders the FAR/DFARS clause number in mono next to the
 * severity badge (v5-prototype.html line 1006). Severity is carried by the chip's
 * text + glyph, so the citation styling is not a colour-only cue (WCAG 1.4.1). */
.finding-clause-ref {
    /* §4.1 — canonical mono stack (aligned with the other clause-ref styles). */
    font-family: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #4A4A6A;
}

/* Recommended-action label: V5 .finding "Recommended action:" caption above the
 * remediation CTA (v5-prototype.html line 1008). */
.finding-action-label {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 11px;
    font-weight: 700;
    color: #8A8AAA;
}

/* Empty state: V5 muted illustration + microcopy when no findings exist. */
.finding-empty-glyph {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

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

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

/* Tenant activity (/admin/activity) expandable-row detail. The row itself is the
 * expand target; the detail panel tints against the row band and hosts the fields
 * not promoted to columns (actor role / target / reason) plus the raw event data. */
.gc-audit-detail {
    background-color: #F7F7FB;
    border-top: 1px solid var(--mud-palette-lines-default, #E0E0E0);
}

/* Raw event JSON: monospace, wrapped so a long value never forces the page to
 * scroll horizontally, and scrollable within its own box if it still overflows. */
.gc-audit-payload {
    margin: 0;
    font-family: var(--mud-typography-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.78rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 20rem;
    overflow-y: auto;
    color: #4A4A6A;
}