/* Corvue UI wrapper and SuperAdmin experiment styles */
/* This stylesheet is global by design so MudBlazor wrapper roots render consistently. */

/* Global box spacing: provide subtle rhythm between adjacent wrapper surfaces */
:is(.cv-card, .cv-section, .cv-alert, .cv-info-box, .cv-loading) + :is(.cv-card, .cv-section, .cv-alert, .cv-info-box, .cv-loading) {
    margin-top: var(--cv-gap-stack);
}

/* Small-caps labels: one look for every uppercase label a wrapper draws, from the --cv-label-* tokens.
   .cv-label is the class for new markup; the wrapper classes below are listed so their markup need not
   change. Each wrapper keeps its own colour, padding and fill. The wrappers styled in scoped files
   (CvPodStat, CvListRow, CvDetailGroup, CvTable headers, CvAnalyticsGrid headers) read the same tokens
   there, because a scoped rule outranks this one. The page-header eyebrow is one step larger
   (--cv-eyebrow-size; see CvPageHeader below). */
.cv-label,
.cv-page-header__eyebrow,
.cv-stat-card__label,
.cv-stat-card__highlight,
.cv-action-card__badge,
.cv-settings-toggle-row__state-pill {
    font-size: var(--cv-label-size);
    font-weight: var(--cv-label-weight);
    letter-spacing: var(--cv-label-tracking);
    line-height: 1.3;
    text-transform: uppercase;
}

/* CvButton. Size is a height scale: Small --cv-control-height-sm (2rem), Medium --cv-control-height
   (2.5rem, the same as an input), Large --cv-control-height-lg (2.75rem). On a touch screen Medium and
   Large keep the 2.75rem touch target (below); Small stays 2rem, for dense rows and table actions. */
.cv-button {
    border-radius: var(--cv-radius-control);
    min-height: var(--cv-control-height);
    padding-inline: 1rem;
    font-weight: 600;
    text-transform: none;
    gap: 0.5rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cv-button.cv-button--small {
    min-height: var(--cv-control-height-sm);
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
}

.cv-button.cv-button--large {
    min-height: var(--cv-control-height-lg);
    padding-inline: 1.25rem;
    font-size: 0.9375rem;
}

@media (pointer: coarse) {
    .cv-button.cv-button--medium,
    .cv-button.cv-button--large {
        min-height: var(--cv-touch-target);
    }
}

/* Flat: no MudBlazor elevation and no hover lift. Focus is an outline ring. */
.cv-button,
.cv-button:hover,
.cv-button:focus-visible,
.cv-button:active,
.cv-icon-button,
.cv-icon-button:hover,
.cv-icon-button:focus-visible,
.cv-icon-button:active {
    box-shadow: none;
    transform: none;
}

.cv-button:focus-visible,
.cv-icon-button:focus-visible {
    outline: var(--cv-focus-ring);
    outline-offset: var(--cv-focus-offset);
}

/* MudButton renders everything CvButton passes it inside a .mud-button-label span, so the root's gap
   above only ever spaces that single span: StartIcon, the text and EndIcon sit inside the label with
   no gap between them ("View Microsoft 365→", "←Back"). The label inherits the root's inline-flex,
   so the spacing has to be set here. Same fix CvNavigationSection's toggle needed. */
.cv-button .mud-button-label {
    gap: 0.5rem;
}

.cv-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* CvIconButton */
.cv-icon-button {
    border-radius: var(--cv-radius-control);
    transition: background-color 0.18s ease, color 0.18s ease;
}

/* Button tones (CvButton and CvIconButton). Each tone reads the --cv-tone-* tokens in brand.css,
   which switch with the theme, so there is no dark-mode override. Success is green and Warning amber,
   the same colours as the success and warning badges, alerts and list-row rules. */
:is(.cv-button, .cv-icon-button):is(.cv-button--primary, .cv-icon-button--primary) {
    --cv-btn-bg: var(--cv-tone-primary-bg);
    --cv-btn-fg: var(--cv-tone-primary-fg);
    --cv-btn-hover: var(--cv-tone-primary-hover);
    --cv-btn-line: var(--cv-tone-primary-line);
    --cv-btn-text: var(--cv-tone-primary-text);
}

:is(.cv-button, .cv-icon-button):is(.cv-button--secondary, .cv-icon-button--secondary) {
    --cv-btn-bg: var(--cv-tone-secondary-bg);
    --cv-btn-fg: var(--cv-tone-secondary-fg);
    --cv-btn-hover: var(--cv-tone-secondary-hover);
    --cv-btn-line: var(--cv-tone-secondary-line);
    --cv-btn-text: var(--cv-tone-secondary-text);
}

:is(.cv-button, .cv-icon-button):is(.cv-button--accent, .cv-icon-button--accent) {
    --cv-btn-bg: var(--cv-tone-accent-bg);
    --cv-btn-fg: var(--cv-tone-accent-fg);
    --cv-btn-hover: var(--cv-tone-accent-hover);
    --cv-btn-line: var(--cv-tone-accent-line);
    --cv-btn-text: var(--cv-tone-accent-text);
}

:is(.cv-button, .cv-icon-button):is(.cv-button--support, .cv-icon-button--support) {
    --cv-btn-bg: var(--cv-tone-support-bg);
    --cv-btn-fg: var(--cv-tone-support-fg);
    --cv-btn-hover: var(--cv-tone-support-hover);
    --cv-btn-line: var(--cv-tone-support-line);
    --cv-btn-text: var(--cv-tone-support-text);
}

:is(.cv-button, .cv-icon-button):is(.cv-button--success, .cv-icon-button--success) {
    --cv-btn-bg: var(--cv-tone-success-bg);
    --cv-btn-fg: var(--cv-tone-success-fg);
    --cv-btn-hover: var(--cv-tone-success-hover);
    --cv-btn-line: var(--cv-tone-success-line);
    --cv-btn-text: var(--cv-tone-success-text);
}

:is(.cv-button, .cv-icon-button):is(.cv-button--warning, .cv-icon-button--warning) {
    --cv-btn-bg: var(--cv-tone-warning-bg);
    --cv-btn-fg: var(--cv-tone-warning-fg);
    --cv-btn-hover: var(--cv-tone-warning-hover);
    --cv-btn-line: var(--cv-tone-warning-line);
    --cv-btn-text: var(--cv-tone-warning-text);
}

:is(.cv-button, .cv-icon-button):is(.cv-button--neutral, .cv-icon-button--neutral) {
    --cv-btn-bg: var(--cv-tone-neutral-bg);
    --cv-btn-fg: var(--cv-tone-neutral-fg);
    --cv-btn-hover: var(--cv-tone-neutral-hover);
    --cv-btn-line: var(--cv-tone-neutral-line);
    --cv-btn-text: var(--cv-tone-neutral-text);
}

:is(.cv-button, .cv-icon-button):is(.cv-button--danger, .cv-icon-button--danger) {
    --cv-btn-bg: var(--cv-tone-danger-bg);
    --cv-btn-fg: var(--cv-tone-danger-fg);
    --cv-btn-hover: var(--cv-tone-danger-hover);
    --cv-btn-line: var(--cv-tone-danger-line);
    --cv-btn-text: var(--cv-tone-danger-text);
}

.cv-button.cv-button--filled,
.cv-icon-button.cv-icon-button--filled {
    background-color: var(--cv-btn-bg);
    color: var(--cv-btn-fg);
}

.cv-button.cv-button--filled:hover,
.cv-icon-button.cv-icon-button--filled:hover {
    background-color: var(--cv-btn-hover);
}

.cv-button.cv-button--outlined,
.cv-button.cv-button--text,
.cv-icon-button.cv-icon-button--outlined,
.cv-icon-button.cv-icon-button--text {
    color: var(--cv-btn-text);
}

.cv-button.cv-button--outlined,
.cv-icon-button.cv-icon-button--outlined {
    border-color: var(--cv-btn-line);
}

.cv-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--cv-radius-round);
    font-size: 1rem;
    background: transparent;
    color: var(--cv-support);
    transition: color 0.18s ease, background-color 0.18s ease;
}

.cv-help-icon:hover,
.cv-help-icon:focus-visible {
    color: var(--cv-text);
    background: var(--cv-surface-hover);
}

.cv-help-icon:focus-visible {
    outline: var(--cv-focus-ring);
    outline-offset: var(--cv-focus-offset);
}

/* Overlays are the only raised surfaces. MudDialog and MudSnackbar only ever render through the
   CvDialog / ICvDialogService and ICvSnackbarService wrappers. */
.mud-dialog {
    border-radius: var(--cv-radius-card);
    box-shadow: var(--cv-elevation-overlay);
}

/* CvSnackbarService sets SnackbarTypeClass to cv-snackbar-host, so the host is a neutral surface;
   the tone shows in the glyph (Warning and Danger only) and, for those two, a left rule. */
.mud-snackbar.cv-snackbar-host {
    border: var(--cv-border-width) solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    color: var(--cv-text);
    box-shadow: var(--cv-elevation-overlay);
}

.mud-snackbar.cv-snackbar-host--warning {
    border-left: var(--cv-rule-width) solid var(--cv-attention-warning);
}

.mud-snackbar.cv-snackbar-host--danger {
    border-left: var(--cv-rule-width) solid var(--cv-attention-danger);
}

/* Keep tooltip popovers readable on smaller viewports */
.mud-tooltip {
    max-width: min(240px, calc(100vw - 32px));
    white-space: normal;
    overflow-wrap: break-word;
}

/* ==========================================================================
   Left navigation: CvNavigationDrawer, CvNavigationSection, CvNavigationItem, CvNavigationRail,
   CvNavigationRailItem and NavMenu's own chrome (brand row, footer, rail flyout, phone drawer).

   "Quiet navy" (docs/ui.md, Standard navigation shell pattern): one solid --cv-nav-bg surface, 36px rows
   (2.75rem on touch screens), small-caps section labels, and ONE active signal (a 3px left rule, a tint
   and a 600-weight label). Every colour is a --cv-nav-* token from brand.css, so dark mode needs no
   override here. Focus rings use --cv-nav-focus, because --cv-focus-color is too dark on navy.
   ========================================================================== */

/* One focus ring for every nav control. */
.cv-navigation-drawer :is(a, button):focus-visible,
.cv-navigation-rail :is(a, button):focus-visible,
.nav-shell :is(a, button):focus-visible {
    outline: 2px solid var(--cv-nav-focus);
    outline-offset: -2px;
}

/* Thin, quiet scrollbars on the nav lists. */
.cv-navigation-drawer__nav,
.cv-navigation-rail__nav,
.nav-menu__rail-flyout-list {
    scrollbar-width: thin;
    scrollbar-color: var(--cv-nav-line-strong) transparent;
}

.cv-navigation-drawer__nav::-webkit-scrollbar,
.cv-navigation-rail__nav::-webkit-scrollbar,
.nav-menu__rail-flyout-list::-webkit-scrollbar {
    width: 6px;
}

.cv-navigation-drawer__nav::-webkit-scrollbar-thumb,
.cv-navigation-rail__nav::-webkit-scrollbar-thumb,
.nav-menu__rail-flyout-list::-webkit-scrollbar-thumb {
    background: var(--cv-nav-line-strong);
    border-radius: var(--cv-radius-round);
}

.cv-navigation-drawer__nav::-webkit-scrollbar-track,
.cv-navigation-rail__nav::-webkit-scrollbar-track,
.nav-menu__rail-flyout-list::-webkit-scrollbar-track {
    background: transparent;
}

/* CvNavigationDrawer */
.cv-navigation-drawer {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: var(--cv-nav-bg);
    color: var(--cv-nav-text);
    box-shadow: none;
}

.cv-navigation-drawer__header {
    flex-shrink: 0;
    min-height: var(--cv-shell-top, 3.5rem);
    display: flex;
    align-items: center;
    padding: 0 var(--cv-space-2) 0 var(--cv-space-3);
    border-bottom: 1px solid var(--cv-nav-line);
}

.cv-navigation-drawer__footer {
    flex-shrink: 0;
    padding: var(--cv-space-2) var(--cv-space-2) var(--cv-space-3);
    border-top: 1px solid var(--cv-nav-line);
}

.cv-navigation-drawer__nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--cv-space-2);
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
}

/* MudDivider is full width by default, and .mud-divider-fullwidth sets flex-grow: 1. Inside the nav's flex
   column that made the divider soak up every spare pixel, opening a gap under Home on a short rail. */
.cv-navigation-drawer__divider {
    flex: 0 0 auto !important;
    margin: var(--cv-space-2) 0 !important;
    border-color: var(--cv-nav-line) !important;
    opacity: 1;
}

/* CvNavigationItem (a MudNavLink: the class lands on the <a>) and the rail flyout's NavLinks. */
.cv-navigation-item {
    margin: 0 !important;
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--cv-nav-row-h);
    padding: 0 var(--cv-space-3) !important;
    border: 0;
    border-radius: var(--cv-radius-control);
    background: transparent;
    box-shadow: none;
    color: var(--cv-nav-text) !important;
    text-decoration: none;
    overflow: hidden;
    transition: background-color var(--cv-motion-fast) var(--cv-ease-out), color var(--cv-motion-fast) var(--cv-ease-out);
}

/* The one active signal: a 3px rule on the item's left edge, the active tint and a stronger label. */
.cv-navigation-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.375rem;
    bottom: 0.375rem;
    width: var(--cv-rule-width);
    border-radius: 0 var(--cv-radius-chip) var(--cv-radius-chip) 0;
    background: var(--cv-nav-rule);
    opacity: 0;
}

.cv-navigation-item .mud-nav-link-text,
.cv-navigation-item .cv-navigation-item__label,
.cv-navigation-item .cv-navigation-item__icon,
.cv-navigation-item .cv-navigation-item__icon i {
    color: inherit !important;
}

.cv-navigation-item .mud-nav-link-text {
    width: 100%;
}

.cv-navigation-item:hover {
    background: var(--cv-nav-hover);
    color: var(--cv-nav-text-strong) !important;
}

.cv-navigation-item.active,
.cv-navigation-item[aria-current="page"] {
    background: var(--cv-nav-active);
    color: var(--cv-nav-text-strong) !important;
}

.cv-navigation-item.active::before,
.cv-navigation-item[aria-current="page"]::before {
    opacity: 1;
}

.cv-navigation-item.active .cv-navigation-item__label,
.cv-navigation-item[aria-current="page"] .cv-navigation-item__label {
    font-weight: 600;
}

.cv-navigation-item__content {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0.625rem;
}

.cv-navigation-item__icon {
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    opacity: 0.72;
}

.cv-navigation-item:hover .cv-navigation-item__icon,
.cv-navigation-item.active .cv-navigation-item__icon,
.cv-navigation-item[aria-current="page"] .cv-navigation-item__icon {
    opacity: 1;
}

.cv-navigation-item__label-shell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.cv-navigation-item__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
}

.cv-navigation-item__subtitle {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    color: var(--cv-nav-muted);
}

.cv-navigation-item__meta {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding-left: var(--cv-space-1);
    flex-shrink: 0;
}

/* Count chips: neutral by default; a tone colours one only where the count needs action. */
.cv-navigation-item__badge,
.cv-navigation-rail-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.0625rem 0.3125rem;
    border-radius: var(--cv-radius-chip);
    background: var(--cv-nav-chip-bg);
    color: var(--cv-nav-text-strong);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.cv-navigation-item__badge--warning,
.cv-navigation-rail-item__badge--warning {
    background: var(--cv-nav-meter-warning);
    color: #1A1204;
}

.cv-navigation-item__badge--danger,
.cv-navigation-rail-item__badge--danger {
    background: var(--cv-nav-meter-danger);
    color: #2A0705;
}

/* CvNavigationSection: a quiet small-caps label that is still a real button. */
.cv-navigation-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--cv-space-3);
}

.cv-navigation-section__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-space-2);
    width: 100%;
    min-height: 1.75rem;
    padding: 0 var(--cv-space-3);
    border: 0;
    border-radius: var(--cv-radius-control);
    background: transparent;
    color: var(--cv-nav-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cv-navigation-section__label {
    font-size: var(--cv-label-size);
    font-weight: var(--cv-label-weight);
    letter-spacing: var(--cv-label-tracking);
    text-transform: uppercase;
    line-height: 1.3;
}

.cv-navigation-section__toggle:hover {
    color: var(--cv-nav-text-strong);
}

/* The chevron shows on hover or focus, or while the section is collapsed. */
.cv-navigation-section__chevron {
    display: inline-flex;
    font-size: 0.6875rem;
    opacity: 0;
    transition: opacity var(--cv-motion-fast) var(--cv-ease-out);
}

.cv-navigation-section__toggle:hover .cv-navigation-section__chevron,
.cv-navigation-section__toggle:focus-visible .cv-navigation-section__chevron,
.cv-navigation-section__toggle[aria-expanded="false"] .cv-navigation-section__chevron {
    opacity: 1;
}

.cv-navigation-section__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cv-navigation-section__content[hidden] {
    display: none;
}

/* NavMenu: brand row and footer */
.nav-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-space-2);
    width: 100%;
}

.nav-menu__brand {
    display: flex;
    align-items: center;
    gap: var(--cv-space-2);
    min-width: 0;
    color: var(--cv-nav-text-strong);
    text-decoration: none;
}

/* The Corvue "C" mark, cropped from the same artwork the sign-in screens use. */
.nav-menu__brand-mark {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: var(--cv-radius-control);
    background-color: #11152B;
    background-image: url("/img/corvue_blue.png");
    background-repeat: no-repeat;
    background-size: 7.47rem auto;
    background-position: -2.87rem -1.15rem;
}

.nav-menu__brand-text {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.nav-menu__compact-toggle,
.nav-menu__mobile-close {
    flex-shrink: 0;
    color: var(--cv-nav-muted) !important;
}

.nav-menu__compact-toggle:hover,
.nav-menu__mobile-close:hover {
    color: var(--cv-nav-text-strong) !important;
    background: var(--cv-nav-hover) !important;
}

.nav-menu__mobile-close {
    display: none !important;
}

.nav-menu__footer {
    display: flex;
    flex-direction: column;
    gap: var(--cv-space-2);
}

/* AI credits: a label, a figure and a 4px bar. The bar is teal, amber below 20% left and red below 5%. */
.nav-menu__token-pill {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: var(--cv-space-1) var(--cv-space-2);
    border-radius: var(--cv-radius-control);
    color: var(--cv-nav-text);
    text-decoration: none;
}

.nav-menu__token-pill:hover {
    background: var(--cv-nav-hover);
    color: var(--cv-nav-text-strong);
}

.nav-menu__token-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cv-space-2);
    min-width: 0;
}

.nav-menu__token-label {
    font-size: 0.75rem;
    font-weight: 600;
}

.nav-menu__token-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--cv-nav-muted);
}

.nav-menu__token-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 4px;
    border-radius: var(--cv-radius-round);
    overflow: hidden;
    background: var(--cv-nav-line);
}

.nav-menu__token-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cv-nav-meter);
    transition: width var(--cv-motion-slow) var(--cv-ease-out);
}

.nav-menu__token-bar-fill--warning {
    background: var(--cv-nav-meter-warning);
}

.nav-menu__token-bar-fill--danger {
    background: var(--cv-nav-meter-danger);
}

.nav-menu__footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-space-2);
    min-height: 2rem;
}

.nav-menu__footer-row .nav-menu__super-admin {
    flex: 1;
    min-width: 0;
}

.nav-menu__version {
    margin-left: auto;
    padding: 0 var(--cv-space-2);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--cv-nav-muted);
    white-space: nowrap;
}

/* CvNavigationRail: the compact 72px rail. The .sidebar is the same width, so no strip shows beside it. */
.cv-navigation-rail {
    position: relative;
    width: var(--cv-nav-rail-width);
    flex: 0 0 var(--cv-nav-rail-width);
    display: flex;
    align-items: stretch;
    height: 100%;
    overflow: visible;
    z-index: 1200;
}

.cv-navigation-rail__shell {
    width: var(--cv-nav-rail-width);
    flex: 0 0 var(--cv-nav-rail-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: var(--cv-nav-bg);
    color: var(--cv-nav-text);
    box-shadow: none;
}

.cv-navigation-rail__header {
    flex-shrink: 0;
    padding: var(--cv-space-2) var(--cv-space-1);
    border-bottom: 1px solid var(--cv-nav-line);
}

.cv-navigation-rail__footer {
    flex-shrink: 0;
    padding: var(--cv-space-2) var(--cv-space-1);
    border-top: 1px solid var(--cv-nav-line);
}

.cv-navigation-rail__nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--cv-space-1);
    overflow-y: auto;
    overflow-x: hidden;
}

.cv-navigation-rail__flyout {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--cv-nav-rail-width);
    width: var(--cv-nav-flyout-width);
    display: flex;
    flex-direction: column;
    border: 0;
    border-left: 1px solid var(--cv-nav-line);
    border-radius: 0 var(--cv-radius-card) var(--cv-radius-card) 0;
    background: var(--cv-nav-bg);
    color: var(--cv-nav-text);
    box-shadow: var(--cv-elevation-overlay);
    overflow: hidden;
    z-index: 1;
    animation: cv-nav-flyout-slide var(--cv-motion-base) var(--cv-ease-out);
}

@keyframes cv-nav-flyout-slide {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* CvNavigationRailItem: an icon over one short line of label. */
.cv-navigation-rail-item {
    position: relative;
    width: 100%;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cv-space-1) 0.125rem;
    border: 0;
    border-radius: var(--cv-radius-control);
    background: transparent;
    color: var(--cv-nav-text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--cv-motion-fast) var(--cv-ease-out), color var(--cv-motion-fast) var(--cv-ease-out);
}

.cv-navigation-rail-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.625rem;
    bottom: 0.625rem;
    width: var(--cv-rule-width);
    border-radius: 0 var(--cv-radius-chip) var(--cv-radius-chip) 0;
    background: var(--cv-nav-rule);
    opacity: 0;
}

.cv-navigation-rail-item:hover,
.cv-navigation-rail-item--open {
    background: var(--cv-nav-hover);
    color: var(--cv-nav-text-strong);
}

.cv-navigation-rail-item.active,
.cv-navigation-rail-item--active {
    background: var(--cv-nav-active);
    color: var(--cv-nav-text-strong);
}

.cv-navigation-rail-item.active::before,
.cv-navigation-rail-item--active::before {
    opacity: 1;
}

.cv-navigation-rail-item__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0.25rem;
}

.cv-navigation-rail-item__icon-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cv-navigation-rail-item__icon {
    display: inline-flex;
    font-size: 1.125rem;
    line-height: 1;
}

.cv-navigation-rail-item__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.cv-navigation-rail-item__badge {
    position: absolute;
    top: -0.375rem;
    left: calc(100% - 0.25rem);
    min-width: 1rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
}

/* A section whose flyout holds a count shows a dot, not a number. */
.cv-navigation-rail-item__dot {
    position: absolute;
    top: -0.125rem;
    right: -0.25rem;
    width: 6px;
    height: 6px;
    border-radius: var(--cv-radius-round);
    background: var(--cv-nav-text-strong);
    box-shadow: 0 0 0 2px var(--cv-nav-bg);
}

.nav-menu--rail .nav-menu__header {
    flex-direction: column;
    gap: var(--cv-space-1);
}

.nav-menu--rail .nav-menu__brand-text,
.nav-menu--rail .nav-menu__token-head {
    display: none;
}

.nav-menu--rail .nav-menu__footer-row {
    flex-direction: column;
    gap: var(--cv-space-1);
}

.nav-menu--rail .nav-menu__version {
    margin: 0;
    padding: 0;
    font-size: 0.5625rem;
}

.nav-menu--rail .nav-menu__token-pill {
    padding: var(--cv-space-2) var(--cv-space-1);
}

.nav-menu__rail-flyout {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.nav-menu__rail-flyout-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--cv-shell-top, 3.5rem);
    padding: 0 var(--cv-space-2) 0 var(--cv-space-4);
    border-bottom: 1px solid var(--cv-nav-line);
}

.nav-menu__rail-flyout-title {
    font-size: var(--cv-label-size);
    font-weight: var(--cv-label-weight);
    letter-spacing: var(--cv-label-tracking);
    text-transform: uppercase;
    color: var(--cv-nav-muted);
}

.nav-menu__rail-flyout-close {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--cv-radius-control);
    background: transparent;
    color: var(--cv-nav-muted);
    font-size: 0.75rem;
    cursor: pointer;
}

.nav-menu__rail-flyout-close:hover {
    background: var(--cv-nav-hover);
    color: var(--cv-nav-text-strong);
}

.nav-menu__rail-flyout-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--cv-space-2);
    overflow-y: auto;
}

/* Touch screens keep 44px targets. */
@media (pointer: coarse) {
    .cv-navigation-drawer,
    .cv-navigation-rail,
    .nav-shell {
        --cv-nav-row-h: 2.75rem;
    }

    .cv-navigation-section__toggle {
        min-height: 2.75rem;
    }

    .cv-navigation-section__chevron {
        opacity: 1;
    }
}

/* Phone (767.98px and below): NavMenu draws a 3.5rem bar with a menu button, and the expanded drawer
   opens over a scrim as an off-canvas panel. Closed, the panel is hidden, so nothing in it takes focus. */
.nav-shell {
    height: 100%;
}

.nav-shell__bar,
.nav-shell__scrim {
    display: none;
}

.nav-shell__panel {
    height: 100%;
}

@media (max-width: 767.98px) {
    .nav-shell {
        height: auto;
    }

    .nav-shell__bar {
        display: flex;
        align-items: center;
        gap: var(--cv-space-2);
        min-height: 3.5rem;
        padding: 0 var(--cv-space-3) 0 var(--cv-space-2);
        background: var(--cv-nav-bg);
        color: var(--cv-nav-text-strong);
    }

    .nav-shell__menu-button {
        color: var(--cv-nav-text-strong) !important;
    }

    .nav-shell__panel {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1260;
        width: min(20rem, 86vw);
        height: 100%;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--cv-motion-slow) var(--cv-ease-out), visibility 0s linear var(--cv-motion-slow);
    }

    .nav-shell--open .nav-shell__panel {
        transform: translateX(0);
        visibility: visible;
        box-shadow: var(--cv-elevation-overlay);
        transition: transform var(--cv-motion-slow) var(--cv-ease-out);
    }

    .nav-shell--open .nav-shell__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1250;
        background: var(--cv-nav-scrim);
    }

    .nav-shell .nav-menu__compact-toggle {
        display: none !important;
    }

    .nav-shell .nav-menu__mobile-close {
        display: inline-flex !important;
    }
}

/* CvCard: a flat framed surface. 1px border, card radius, no shadow, no hover lift, and a hairline
   header divider instead of a grey header band. The icon is a muted glyph, not a tinted chip. */
.cv-card {
    border: var(--cv-border-width) solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background-color: var(--cv-surface);
    overflow: hidden;
    box-shadow: var(--cv-elevation-flat);
}

.cv-card--interactive {
    cursor: pointer;
    transition: border-color 0.18s ease;
}

.cv-card--interactive:hover {
    border-color: var(--cv-hover-border);
}

.cv-card--interactive:focus-visible {
    outline: var(--cv-focus-ring);
    outline-offset: var(--cv-focus-offset);
}

/* Link cards (CvCard and CvActionCard with an Href): the title is the real <a href>, and its ::before
   stretches over the card so a click anywhere navigates. Controls inside the card (header actions, help
   icons, buttons, fields, other links) are lifted above the overlay and keep working; the link never
   wraps them. The focus ring is drawn on the card, not on the title. */
:is(.cv-card--link, .cv-action-card--link) {
    position: relative;
}

.cv-card__link,
.cv-card__link:hover,
.cv-card__link:focus {
    color: inherit;
    text-decoration: none;
}

.cv-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.cv-card__link:focus-visible {
    outline: none;
}

:is(.cv-card--link, .cv-action-card--link) :is(a, button, input, select, textarea, label, summary, [tabindex]):not(.cv-card__link) {
    position: relative;
    z-index: 2;
}

:is(.cv-card--link, .cv-action-card--link):has(.cv-card__link:focus-visible) {
    border-color: var(--cv-hover-border);
    outline: var(--cv-focus-ring);
    outline-offset: var(--cv-focus-offset);
}

.cv-card__header,
.cv-card__footer {
    padding: 1rem var(--cv-card-pad);
}

.cv-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: var(--cv-border-width) solid var(--cv-border-subtle);
    background-color: transparent;
}

.cv-card__header-main {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.cv-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
    color: var(--cv-text-muted);
}

.cv-card__icon-img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

/* An h3 by default (HeadingLevel), styled by class so the level never changes the look. Paired with
   .cv-card so it outranks brand.css's dark-mode h1-h6 colour rule. */
.cv-card .cv-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--cv-text);
}

.cv-card__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--cv-text-muted);
}

.cv-card__body {
    padding: var(--cv-card-pad);
}

.cv-card__footer {
    border-top: var(--cv-border-width) solid var(--cv-border-subtle);
    background-color: transparent;
}

/* CvActionCard: the same flat frame as CvCard, with a muted glyph and a quiet chip badge. */
.cv-action-card {
    border: var(--cv-border-width) solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    padding: var(--cv-card-pad);
    box-shadow: var(--cv-elevation-flat);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cv-action-card--interactive {
    cursor: pointer;
    transition: border-color 0.18s ease;
}

.cv-action-card--interactive:hover {
    border-color: var(--cv-hover-border);
}

.cv-action-card--interactive:focus-visible {
    outline: var(--cv-focus-ring);
    outline-offset: var(--cv-focus-offset);
}

.cv-action-card__header,
.cv-action-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cv-action-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--cv-text-muted);
}

.cv-action-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: var(--cv-radius-chip);
}

.cv-action-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.cv-action-card__title,
.cv-action-card__description {
    margin: 0;
}

.cv-action-card__title {
    font-size: 1.03rem;
    font-weight: 700;
    color: var(--cv-text);
}

.cv-action-card__description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--cv-text-muted);
}

.cv-action-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cv-action-card__footer {
    padding-top: 1rem;
    border-top: var(--cv-border-width) solid var(--cv-border-subtle);
    color: var(--cv-text);
    font-size: 0.84rem;
    font-weight: 700;
}

.cv-action-card__footer i {
    color: var(--cv-secondary);
}

/* Action-card badges: a tint of the tone's palette colour with the tone's text colour. Both are
   tokens that switch with the theme, so there is no dark override. */
.cv-action-card__badge--primary {
    background: color-mix(in srgb, var(--cv-primary) 12%, transparent);
    color: var(--cv-tone-primary-text);
}

.cv-action-card__badge--secondary,
.cv-action-card__badge--support {
    background: color-mix(in srgb, var(--cv-secondary) 14%, transparent);
    color: var(--cv-tone-support-text);
}

.cv-action-card__badge--accent {
    background: color-mix(in srgb, var(--cv-accent) 18%, transparent);
    color: var(--cv-tone-accent-text);
}

.cv-action-card__badge--neutral {
    background: color-mix(in srgb, var(--cv-neutral) 18%, transparent);
    color: var(--cv-tone-neutral-text);
}

/* Success and Warning: the status badge colours (CvStatusBadge). */
.cv-action-card__badge--success {
    background: var(--status-satisfactory-bg);
    color: var(--status-satisfactory-text);
}

.cv-action-card__badge--warning {
    background: var(--status-needs-attention-bg);
    color: var(--status-needs-attention-text);
}

.cv-action-card__badge--danger {
    background: color-mix(in srgb, var(--cv-tone-danger-bg) 14%, transparent);
    color: var(--cv-tone-danger-text);
}

/* CvStatCard: a framed, label-first figure. Flat: a 1px border, the card radius, no shadow or
   gradient. The 3px top rule is an inset shadow so it follows the corner radius; it is transparent on a
   calm figure and takes the attention colour when the figure wants a look. Tone no longer colours. */
.cv-stat-card {
    border: var(--cv-border-width) solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    padding: var(--cv-space-4) var(--cv-space-5);
    box-shadow: inset 0 var(--cv-rule-width) 0 transparent;
    display: flex;
    flex-direction: column;
    gap: var(--cv-space-2);
    min-width: 0;
}

.cv-stat-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cv-space-1) var(--cv-space-2);
    min-width: 0;
}

.cv-stat-card__icon {
    font-size: 0.875rem;
    line-height: 1;
    color: var(--cv-text-muted);
    flex-shrink: 0;
}

.cv-stat-card__label,
.cv-stat-card__support {
    margin: 0;
}

.cv-stat-card__label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--cv-text-muted);
}

.cv-stat-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--cv-text);
    overflow-wrap: anywhere;
}

.cv-stat-card__support {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--cv-text-muted);
}

/* Highlight: a neutral 4px chip beside the label. */
.cv-stat-card__highlight {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--cv-radius-chip);
    background: var(--cv-surface-sunken);
    color: var(--cv-text);
    white-space: nowrap;
}

.cv-stat-card--attention-warning {
    box-shadow: inset 0 var(--cv-rule-width) 0 var(--cv-attention-warning);
}

.cv-stat-card--attention-warning .cv-stat-card__value {
    color: var(--cv-attention-warning-text);
}

.cv-stat-card--attention-danger {
    box-shadow: inset 0 var(--cv-rule-width) 0 var(--cv-attention-danger);
}

.cv-stat-card--attention-danger .cv-stat-card__value {
    color: var(--cv-attention-danger-text);
}

@media (max-width: 575.98px) {
    .cv-stat-card__value {
        font-size: 1.5rem;
    }
}

/* CvPageHeader (Plain): no box, border, gradient or shadow. The root is a column, so the back link
   sits above the title and the body spans the full width; that is what lets __actions'
   margin-left: auto push the actions to the right edge. The header no longer emits the legacy
   modern-page-header class, whose brand.css flex row used to squeeze the body to its content. */
.cv-page-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0 0 var(--cv-gap-section);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cv-page-header__back {
    align-self: flex-start;
}

.cv-page-header__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    width: 100%;
}

.cv-page-header__main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1 1 18rem;
    min-width: 0;
}

/* A muted glyph, sized to sit on the title's first line. */
.cv-page-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 2.1rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cv-text-muted);
}

.cv-page-header__text {
    min-width: 0;
}

/* Optional context line above the title (Eyebrow): a small-caps label (above), one step larger. */
.cv-page-header__eyebrow {
    margin: 0 0 0.375rem;
    font-size: var(--cv-eyebrow-size);
    color: var(--cv-text-muted);
}

.cv-page-header__text h1 {
    margin: 0;
    color: var(--cv-text);
}

.cv-page-header__text p {
    margin: 0.375rem 0 0;
    color: var(--cv-text-muted);
}

.cv-page-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .cv-page-header__actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* CvPageHeader Variant="Band": the hub-page band. Navy (--cv-band-bg), a lime eyebrow, a white title
   and a muted lede; the icon is not rendered. The band is a dark surface in both themes, so it
   re-declares the text, hover and focus tokens and the whole --cv-tone-* set (the dark-theme fills,
   with white-line outlines and white text; Danger, Success and Warning keep a light tint of their colour
   for outlined and text buttons) so every button inside it inverts. MudBlazor's disabled
   and hover colours are re-declared too: they are dark greys meant for a light surface. */
.cv-page-header.cv-page-header--band {
    --cv-text: var(--cv-band-text);
    --cv-text-muted: var(--cv-band-muted);
    --cv-border: var(--cv-band-line);
    --cv-surface-hover: rgba(255, 255, 255, 0.08);
    /* --cv-focus-ring is resolved where it is declared (:root), so restate it, not just the colour. */
    --cv-focus-color: #68CAE5;
    --cv-focus-ring: 2px solid #68CAE5;
    --mud-palette-action-default-hover: rgba(255, 255, 255, 0.08);
    --mud-palette-action-disabled: rgba(255, 255, 255, 0.45);
    --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.14);

    --cv-tone-primary-bg: #7E8FBE;
    --cv-tone-primary-fg: #0A1023;
    --cv-tone-primary-hover: #93A2CB;
    --cv-tone-primary-line: var(--cv-band-line);
    --cv-tone-primary-text: var(--cv-band-text);
    --cv-tone-secondary-bg: #68CAE5;
    --cv-tone-secondary-fg: #07141D;
    --cv-tone-secondary-hover: #82D8ED;
    --cv-tone-secondary-line: var(--cv-band-line);
    --cv-tone-secondary-text: var(--cv-band-text);
    --cv-tone-accent-bg: #B7DE63;
    --cv-tone-accent-fg: #0D1708;
    --cv-tone-accent-hover: #C8E68A;
    --cv-tone-accent-line: var(--cv-band-line);
    --cv-tone-accent-text: var(--cv-band-text);
    --cv-tone-support-bg: #5EAFCB;
    --cv-tone-support-fg: #08131C;
    --cv-tone-support-hover: #77BDD5;
    --cv-tone-support-line: var(--cv-band-line);
    --cv-tone-support-text: var(--cv-band-text);
    --cv-tone-neutral-bg: #8ACAC2;
    --cv-tone-neutral-fg: #071513;
    --cv-tone-neutral-hover: #9FD7D0;
    --cv-tone-neutral-line: var(--cv-band-line);
    --cv-tone-neutral-text: var(--cv-band-muted);
    --cv-tone-danger-bg: #F87171;
    --cv-tone-danger-fg: #20090B;
    --cv-tone-danger-hover: #FB8D8D;
    --cv-tone-danger-line: rgba(252, 165, 165, 0.6);
    --cv-tone-danger-text: #FCA5A5;
    --cv-tone-success-bg: #34D399;
    --cv-tone-success-fg: #052E1F;
    --cv-tone-success-hover: #6EE7B7;
    --cv-tone-success-line: rgba(110, 231, 183, 0.6);
    --cv-tone-success-text: #6EE7B7;
    --cv-tone-warning-bg: #FBBF24;
    --cv-tone-warning-fg: #1F1300;
    --cv-tone-warning-hover: #FCD34D;
    --cv-tone-warning-line: rgba(252, 211, 77, 0.6);
    --cv-tone-warning-text: #FCD34D;

    gap: 0.75rem;
    padding: 1.75rem 2rem;
    border-radius: var(--cv-radius-card);
    background: var(--cv-band-bg);
    color: var(--cv-band-text);
}

.cv-page-header--band .cv-page-header__eyebrow {
    margin-bottom: 0.5rem;
    color: var(--cv-band-eyebrow);
}

.cv-page-header--band .cv-page-header__text h1 {
    font-size: clamp(1.75rem, 2.6vw, 2.375rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.cv-page-header--band .cv-page-header__text p {
    max-width: 46rem;
    margin-top: 0.5rem;
    font-size: 1rem;
}

/* Outlined and text buttons sit on the navy, so hover is a light wash rather than MudBlazor's dark one. */
.cv-page-header--band :is(.cv-button--outlined, .cv-button--text, .cv-icon-button--outlined, .cv-icon-button--text):hover {
    background-color: var(--cv-surface-hover);
}

.cv-page-header--band .cv-button--outlined:hover,
.cv-page-header--band .cv-icon-button--outlined:hover {
    border-color: var(--cv-band-text);
}

.cv-page-header--band .cv-help-icon {
    color: var(--cv-band-muted);
}

@media (max-width: 767.98px) {
    .cv-page-header.cv-page-header--band {
        padding: 1.25rem 1rem;
    }
}

/* CvSection */
.cv-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: var(--cv-gap-section);
}

.cv-section__header {
    gap: 1rem;
    flex-wrap: wrap;
}

/* The title is an h2 by default (HeadingLevel), styled by class so it looks the same at any level.
   Paired with .cv-section so it outranks brand.css's dark-mode h1-h6 colour rule. */
.cv-section .cv-section__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.4;
    color: var(--cv-text);
}

.cv-section .cv-section__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--cv-text-muted);
}

.cv-section__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* CvFilterBar, CvTable and CvPager. Their roots are MudPapers, so the root rules live here, not in
   the scoped files. The filter bar and pager are unframed rows: they normally sit inside a CvCard,
   and a second frame there would nest boxes. The table carries the one frame. */
.cv-filter-bar {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.cv-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.cv-table {
    border: var(--cv-border-width) solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    overflow: hidden;
    box-shadow: none;
}

/* Row rules: a 3px left rule for rows that need attention. Set on the <tr> from the row template. */
.cv-table .cv-table__row--warning {
    box-shadow: inset var(--cv-rule-width) 0 0 var(--cv-attention-warning);
}

.cv-table .cv-table__row--danger {
    box-shadow: inset var(--cv-rule-width) 0 0 var(--cv-attention-danger);
}

/* CvAlert: a MudAlert in its Outlined variant, restyled as a quiet notice. A sunken block with a 3px
   left rule in the tone colour, body text in --cv-text, the control radius and no shadow; the tone also
   tints the glyph. Same family as the CvPod NotConfigured and Error notices. The .mud-alert pairing
   outranks MudBlazor's own .mud-alert-outlined-{severity} colour and border. */
.mud-alert.cv-alert {
    --cv-alert-rule: var(--cv-support);
    --cv-alert-icon: var(--cv-support);
    border: 0;
    border-left: var(--cv-rule-width) solid var(--cv-alert-rule);
    border-radius: var(--cv-radius-control);
    background: var(--cv-surface-sunken);
    color: var(--cv-text);
    box-shadow: none;
}

.mud-alert.cv-alert .mud-alert-icon {
    color: var(--cv-alert-icon);
}

.mud-alert.cv-alert--primary {
    --cv-alert-rule: var(--cv-primary);
    --cv-alert-icon: var(--cv-primary);
}

.mud-alert.cv-alert--secondary {
    --cv-alert-rule: var(--cv-secondary);
}

.mud-alert.cv-alert--neutral {
    --cv-alert-rule: var(--cv-border-strong);
    --cv-alert-icon: var(--cv-text-muted);
}

.mud-alert:is(.cv-alert--accent, .cv-alert--success) {
    --cv-alert-rule: var(--status-satisfactory);
    --cv-alert-icon: var(--status-satisfactory-text);
}

.mud-alert.cv-alert--warning {
    --cv-alert-rule: var(--cv-attention-warning);
    --cv-alert-icon: var(--cv-attention-warning-text);
}

.mud-alert.cv-alert--danger {
    --cv-alert-rule: var(--cv-attention-danger);
    --cv-alert-icon: var(--cv-attention-danger-text);
}

.cv-alert .mud-alert-message {
    width: 100%;
}

.cv-alert__title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.cv-alert__content {
    line-height: 1.55;
}

/* Links take the body colour, so the underline is what marks them. */
.cv-alert__content a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* The alert is a light sunken block now (dark navy in dark mode), so the code chip is a hairline
   tint in the body colour rather than Bootstrap's pink. */
.cv-alert__content code,
.cv-alert__title code {
    color: inherit;
    background: var(--cv-border-subtle);
    padding: 0.1rem 0.35rem;
    border-radius: var(--cv-radius-chip);
}

/* CvStatusBadge: a subtle tint from the --status-* tokens, a 4px chip and weight 600. The tone
   modifier replaces Bootstrap's bg-* classes; .badge stays only for its padding and size. The :is()
   pairing outranks brand.css's later .badge radius. Primary, Secondary and Support read as the
   informational blue, Accent as Success, and Neutral as a sunken chip with a hairline. */
.cv-status-badge:is(.cv-status-badge--primary, .cv-status-badge--secondary, .cv-status-badge--support,
    .cv-status-badge--accent, .cv-status-badge--success, .cv-status-badge--warning,
    .cv-status-badge--danger, .cv-status-badge--neutral) {
    border-radius: var(--cv-radius-chip);
    font-weight: 600;
    background: var(--cv-surface-sunken);
    color: var(--cv-text-muted);
}

.cv-status-badge:is(.cv-status-badge--primary, .cv-status-badge--secondary, .cv-status-badge--support) {
    background: var(--status-in-progress-bg);
    color: var(--status-in-progress-text);
}

.cv-status-badge:is(.cv-status-badge--accent, .cv-status-badge--success) {
    background: var(--status-satisfactory-bg);
    color: var(--status-satisfactory-text);
}

.cv-status-badge.cv-status-badge--warning {
    background: var(--status-needs-attention-bg);
    color: var(--status-needs-attention-text);
}

.cv-status-badge.cv-status-badge--danger {
    background: var(--status-at-risk-bg);
    color: var(--status-at-risk-text);
}

.cv-status-badge.cv-status-badge--neutral {
    box-shadow: inset 0 0 0 var(--cv-border-width) var(--cv-border);
}

/* CvLoading */
.cv-loading {
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    color: var(--cv-text-muted);
}

.cv-loading--inline {
    min-height: auto;
    flex-direction: row;
    justify-content: flex-start;
}

.cv-loading__label {
    color: var(--cv-text-muted);
}

/* SuperAdmin Dashboard: styled by SuperAdmin/Dashboard.razor.css (this global copy, which painted the section
   cards with gradients, was removed in S10). */

/* CvDropBoard (the dashboard pods and the company overview). Its roots are MudBlazor drop containers and
   zones, so the rules live here, not in a scoped file. */
.cv-drop-board {
    width: 100%;
}

.cv-drop-board__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.cv-drop-board__zone-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.cv-drop-board__zone-heading {
    padding: 0 0.25rem;
}

.cv-drop-board__zone-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--cv-text);
}

.cv-drop-board__zone-subtitle {
    margin: 0.25rem 0 0;
    color: var(--cv-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.cv-drop-board__zone {
    position: relative;
    min-height: 14rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.65rem;
    border-radius: var(--cv-radius-card);
    /* Zones stay invisible until a drag starts (--dragging), so a resting board reads as plain pods. */
    border: 1px dashed transparent;
    background: transparent;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.cv-drop-board__zone--dragging {
    border-color: var(--cv-border-strong);
    background: var(--cv-surface-sunken);
}

/* An empty zone is a compact CvEmptyState (.cv-drop-board__zone-empty), the same empty look as a pod's
   or a table's; it brings its own styles. */

.cv-drop-board__item {
    position: relative;
    border-radius: var(--cv-radius-card);
}

.cv-drop-board__item-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.75rem 0.55rem;
    color: var(--cv-text-muted);
}

.cv-drop-board__item-toolbar--actions-only {
    justify-content: flex-end;
}

.cv-drop-board__item-drag-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--cv-radius-control);
    background: transparent;
    color: var(--cv-text-muted);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.cv-drop-board__item:hover .cv-drop-board__item-drag-hint {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}

.cv-drop-board__item-toolbar-actions {
    display: inline-flex;
    align-items: center;
}

.cv-drop-board__remove-button {
    margin-right: -0.35rem;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.cv-drop-board__item:hover .cv-drop-board__remove-button,
.cv-drop-board__item:focus-within .cv-drop-board__remove-button {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

@media (hover: none) {
    .cv-drop-board__remove-button {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
    }
}

.cv-drop-board__item-body {
    height: 100%;
}

/* The drag ghost is an overlay, so it is the one board surface that is raised. */
.cv-drop-board__item--dragging {
    opacity: 0.9;
    box-shadow: var(--cv-elevation-overlay);
}

.cv-drop-board__zone--can-drop .cv-drop-board__item::before,
.cv-drop-board__zone--can-drop::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    height: 0.95rem;
    border-radius: var(--cv-radius-chip);
    border: 1px dashed var(--cv-hover-border);
    background: transparent;
    pointer-events: none;
    z-index: 1;
}

.cv-drop-board__zone--can-drop .cv-drop-board__item::before {
    top: -0.75rem;
}

.cv-drop-board__zone--can-drop::after {
    left: 1.2rem;
    right: 1.2rem;
    bottom: 0.35rem;
}

.cv-drop-board__zone--can-drop {
    border-color: var(--cv-hover-border) !important;
    background: var(--cv-surface-sunken) !important;
}

.cv-drop-board__zone--no-drop {
    border-color: var(--cv-attention-danger) !important;
    background: var(--cv-surface-sunken) !important;
}

.cv-drop-board__zone .mud-dropitem-placeholder {
    min-height: 1.15rem !important;
    height: 1.15rem !important;
    flex: 0 0 1.15rem !important;
    margin: 0.3rem 0;
    border-radius: var(--cv-radius-chip);
    border: 1px dashed var(--cv-hover-border);
    background: transparent;
    box-shadow: none;
}

@media (max-width: 1199.98px) {
    .cv-drop-board__grid {
        grid-template-columns: 1fr;
    }
}

/* CvDropBoard grid (Layout="Grid", the dashboard): one zone laid out as a 12-column grid. MudBlazor's item
   element is the grid's direct child and carries the span class (cv-drop-board__cell--third/half/
   two-thirds/full) through ItemsClassSelector. Breakpoints follow the board's own width (a container
   query), not the window: 12 columns from 68rem, two from 40rem, one below. Rows stretch, so the pods in
   a row share one height. */
.cv-drop-board--grid {
    container: cv-drop-board / inline-size;
}

.cv-drop-board--grid .cv-drop-board__grid {
    display: block;
}

.cv-drop-board--grid .cv-drop-board__zone-column {
    display: block;
}

.cv-drop-board--grid .cv-drop-board__zone {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: stretch;
    gap: var(--cv-space-3);
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--cv-radius-card);
    outline: 1px dashed transparent;
    outline-offset: var(--cv-space-1);
    transition: outline-color 0.18s ease;
}

.cv-drop-board--grid .cv-drop-board__zone > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.cv-drop-board--grid .cv-drop-board__zone > .cv-drop-board__cell {
    display: flex;
    flex-direction: column;
}

.cv-drop-board--grid .cv-drop-board__zone > .cv-drop-board__cell--third {
    grid-column: span 4;
}

.cv-drop-board--grid .cv-drop-board__zone > .cv-drop-board__cell--half {
    grid-column: span 6;
}

.cv-drop-board--grid .cv-drop-board__zone > .cv-drop-board__cell--two-thirds {
    grid-column: span 8;
}

.cv-drop-board--grid .cv-drop-board__zone > .cv-drop-board__cell--full {
    grid-column: 1 / -1;
}

.cv-drop-board--grid .cv-drop-board__cell > .cv-drop-board__item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cv-drop-board--grid .cv-drop-board__item-body {
    flex: 1;
    min-width: 0;
}

/* A movable cell shows the grab cursor on its frame; a locked one (CanDrag false) is a plain pod. */
.cv-drop-board--grid .cv-drop-board__cell:not(.cv-drop-board__cell--locked) {
    cursor: grab;
}

.cv-drop-board--grid .cv-drop-board__cell:not(.cv-drop-board__cell--locked) .cv-drop-board__item {
    outline: 1px dashed var(--cv-border-strong);
    outline-offset: 2px;
}

/* While dragging, the board shows its outline instead of the column board's insertion bars. */
.cv-drop-board--grid .cv-drop-board__zone--dragging,
.cv-drop-board--grid .cv-drop-board__zone--can-drop {
    border: 0 !important;
    background: transparent !important;
    outline-color: var(--cv-hover-border);
}

.cv-drop-board--grid .cv-drop-board__zone--can-drop .cv-drop-board__item::before,
.cv-drop-board--grid .cv-drop-board__zone--can-drop::after {
    content: none;
}

.cv-drop-board--grid .cv-drop-board__zone .mud-dropitem-placeholder {
    grid-column: 1 / -1;
    margin: 0;
}

@container cv-drop-board (max-width: 68rem) {
    .cv-drop-board--grid .cv-drop-board__zone {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cv-drop-board--grid .cv-drop-board__zone > .cv-drop-board__cell--third,
    .cv-drop-board--grid .cv-drop-board__zone > .cv-drop-board__cell--half {
        grid-column: span 1;
    }

    .cv-drop-board--grid .cv-drop-board__zone > .cv-drop-board__cell--two-thirds,
    .cv-drop-board--grid .cv-drop-board__zone > .cv-drop-board__cell--full {
        grid-column: 1 / -1;
    }
}

@container cv-drop-board (max-width: 40rem) {
    .cv-drop-board--grid .cv-drop-board__zone {
        grid-template-columns: minmax(0, 1fr);
    }

    .cv-drop-board--grid .cv-drop-board__zone > .cv-drop-board__cell {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cv-drop-board--grid .cv-drop-board__zone {
        transition: none;
    }
}

/* Cv field wrappers */
.cv-text-field,
.cv-select,
.cv-slider {
    width: 100%;
}

.cv-text-field .mud-input-control,
.cv-select .mud-input-control,
.cv-slider .mud-slider {
    margin-top: 0;
}

.cv-slider__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.cv-slider__label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cv-text);
}

.cv-slider__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: rgba(43, 163, 197, 0.14);
    color: #1e789a;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.cv-slider__control {
    padding-inline: 0.2rem;
}

.cv-slider__ticks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.25rem;
    margin-top: 0.2rem;
}

.cv-slider__tick {
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--cv-text-muted);
    text-align: center;
    white-space: nowrap;
}

.cv-slider__tick:first-child {
    text-align: left;
}

.cv-slider__tick:last-child {
    text-align: right;
}

.cv-slider__tick--active {
    color: var(--cv-support);
    font-weight: 700;
}

.cv-slider__helper-text {
    margin-top: 0.35rem;
}

/* Input error state (Error and ErrorText on every Cv* input). A red outline, a red label and a red message
   led by a warning glyph, at weight 600, so it never reads as helper text.
   - The MudBlazor inputs (CvTextField, CvSelect, CvChipMultiSelect, CvCountrySelect) draw their own error
     state from --mud-palette-error with !important; .cv-field--error points that variable at the Corvue
     danger text colour, which keeps the label and message at AA contrast on the surface in both themes.
   - The wrappers that render their own message (CvDatePicker, CvSwitch, CvCheckbox, CvSlider) use
     .cv-field__error. */
.cv-field--error {
    --mud-palette-error: var(--cv-attention-danger-text);
}

.cv-field--error .mud-input-helper-text.mud-input-error,
.cv-field__error {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-weight: 600;
}

.cv-field__error {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--cv-attention-danger-text);
}

.cv-field--error .mud-input-helper-text.mud-input-error::before,
.cv-field__error::before {
    content: "\f333"; /* bi-exclamation-circle */
    flex-shrink: 0;
    font-family: "bootstrap-icons";
    font-weight: normal;
}

/* Bootstrap-backed fields: CvDatePicker, CompanySearchDropdown and ContactSearchDropdown. They match the
   MudBlazor outlined inputs (CvTextField, CvSelect): --cv-control-height, a --cv-border-strong outline on
   the whole input group, the control radius, a muted hover border, a 2px primary border on focus (as
   MudBlazor draws it: the 1px border plus a 1px inset outline), and the label notched into the top
   border, as MudBlazor floats a label when the field has a placeholder. --cv-field-notch-bg is the notch's
   fill: set it where a field sits on a sunken surface. */
.cv-field {
    position: relative;
}

.cv-field.cv-field--labelled {
    margin-top: 0.5rem;
}

.cv-field .cv-field__label {
    position: absolute;
    top: 0;
    left: 0.625rem;
    z-index: 4;
    max-width: calc(100% - 1.25rem);
    margin: 0;
    padding: 0 0.25rem;
    overflow: hidden;
    transform: translateY(-50%);
    background: var(--cv-field-notch-bg, var(--cv-surface));
    color: var(--cv-text-muted);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.cv-field .input-group {
    flex-wrap: nowrap;
    min-height: var(--cv-control-height);
    border: var(--cv-border-width) solid var(--cv-border-strong);
    border-radius: var(--cv-radius-control);
    background: var(--cv-surface);
    transition: border-color 0.2s ease;
}

.cv-field .input-group:hover {
    border-color: var(--cv-text-muted);
}

.cv-field .input-group:focus-within {
    border-color: var(--cv-primary);
    outline: var(--cv-border-width) solid var(--cv-primary);
    outline-offset: calc(-2 * var(--cv-border-width));
}

.cv-field .input-group > :is(.form-control, .input-group-text, .btn) {
    min-height: calc(var(--cv-control-height) - 2 * var(--cv-border-width));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cv-field .input-group > .form-control {
    padding: 0 0.875rem;
    color: var(--cv-text);
    font-size: 0.875rem;
}

.cv-field .input-group > .form-control:focus {
    background: transparent;
    box-shadow: none;
}

.cv-field .input-group > .form-control::placeholder {
    color: var(--cv-text-muted);
    opacity: 1;
}

.cv-field .input-group > .input-group-text {
    padding: 0 0 0 0.875rem;
    color: var(--cv-text-muted);
}

.cv-field .input-group > .input-group-text + .form-control {
    padding-left: 0.625rem;
}

.cv-field .input-group > .btn {
    padding: 0 0.75rem;
    color: var(--cv-text-muted);
}

.cv-field .input-group > .btn:hover,
.cv-field .input-group > .btn:focus-visible {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}

.cv-field .input-group > .btn:focus-visible {
    outline: var(--cv-focus-ring);
    outline-offset: calc(-1 * var(--cv-focus-offset));
}

.cv-field .input-group:has(.form-control:disabled) {
    background: var(--cv-surface-sunken);
    border-color: var(--cv-border);
}

.cv-field .input-group > .form-control:disabled {
    color: var(--cv-text-muted);
}

.cv-field.cv-field--error .input-group,
.cv-field.cv-field--error .input-group:hover {
    border-color: var(--cv-attention-danger-text);
}

.cv-field.cv-field--error .input-group:focus-within {
    outline-color: var(--cv-attention-danger-text);
}

.cv-field.cv-field--error .cv-field__label {
    color: var(--cv-attention-danger-text);
}

.cv-field .form-text {
    margin-top: 0.25rem;
    padding-inline: 0.875rem;
    color: var(--cv-text-muted);
    font-size: 0.75rem;
}

.cv-field .cv-field__error {
    padding-inline: 0.875rem;
}

/* The company and contact search results: an overlay, so raised, on the stacking token. Paired with
   .cv-field and .dropdown-menu to outrank brand.css's dropdown-menu rules, which load later. */
.cv-field .dropdown-menu.cv-search-field__menu {
    z-index: var(--cv-z-dropdown);
    max-height: 18.75rem;
    overflow-y: auto;
    margin-top: var(--cv-space-1);
    border: var(--cv-border-width) solid var(--cv-border);
    border-radius: var(--cv-radius-control);
    background: var(--cv-surface);
    box-shadow: var(--cv-elevation-overlay);
}

.cv-mud-popover-provider {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1600;
}

.cv-mud-popover-provider .mud-popover,
.cv-mud-popover-provider .mud-overlay {
    pointer-events: auto;
}

.cv-chip-multi-select {
    display: grid;
    gap: 0.75rem;
}

.cv-chip-multi-select__field .mud-input-control {
    margin-top: 0;
}

.cv-chip-multi-select__selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cv-chip-multi-select__selected-chip {
    margin: 0;
    box-shadow: none;
}

/* MudChip only renders through Corvue wrappers (CvChipMultiSelect). Every size takes the 4px chip
   radius instead of MudBlazor's pill; the size pairing matches MudBlazor's own selectors. */
.mud-chip:is(.mud-chip-size-small, .mud-chip-size-medium, .mud-chip-size-large, .mud-chip-label) {
    border-radius: var(--cv-radius-chip);
}


/* SuperAdmin logs */
.superadmin-logs__header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

.superadmin-logs__refresh-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 11rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--cv-border);
    border-radius: 14px;
    background: var(--cv-surface-sunken);
}

.superadmin-logs__meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}

.superadmin-logs__field-help {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--cv-text-muted);
}

.superadmin-logs__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.superadmin-logs__results-card .cv-card__body {
    padding-top: 0.5rem;
}

.superadmin-logs__results-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem 1rem;
    font-size: 0.88rem;
    color: var(--cv-text-muted);
}

.superadmin-logs__row {
    transition: background-color 0.18s ease;
}

.superadmin-logs__row:hover {
    background: var(--cv-surface-sunken);
}

.superadmin-logs__row--danger {
    background: var(--cv-tone-danger-bg);
}

.superadmin-logs__row--warning {
    background: var(--cv-tone-warning-bg);
}

.superadmin-logs__timestamp,
.superadmin-logs__tenant {
    white-space: nowrap;
    color: var(--cv-text-muted);
    font-size: 0.88rem;
}

.superadmin-logs__message {
    color: var(--cv-text);
    font-weight: 600;
    line-height: 1.45;
    word-break: break-word;
}

.superadmin-logs__source {
    margin-top: 0.25rem;
    color: var(--cv-text-muted);
    font-size: 0.85rem;
    word-break: break-word;
}

.superadmin-logs__details-row td {
    padding-top: 0;
    background: var(--cv-surface-sunken);
}

.superadmin-logs__details {
    padding: 1rem 0;
}

.superadmin-logs__detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.superadmin-logs__detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--cv-border);
    border-radius: 14px;
    background: var(--cv-surface);
}

.superadmin-logs__detail-item span {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}

.superadmin-logs__detail-item strong {
    color: var(--cv-text);
    word-break: break-word;
}

.superadmin-logs__detail-panel {
    margin-top: 1rem;
}

.superadmin-logs__detail-panel h4,
.superadmin-logs__detail-panel summary {
    margin-bottom: 0.5rem;
    color: var(--cv-text);
    font-size: 0.95rem;
    font-weight: 700;
}

.superadmin-logs__detail-pre {
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--cv-border);
    border-radius: 14px;
    background: var(--cv-surface);
    color: var(--cv-text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 22rem;
    overflow: auto;
}

.superadmin-logs__detail-pre--danger {
    border-color: var(--cv-tone-danger-line);
    background: var(--cv-tone-danger-bg);
    color: var(--cv-tone-danger-text);
}

.superadmin-logs__empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--cv-text-muted);
}

.superadmin-logs__empty i {
    display: block;
    margin-bottom: 0.85rem;
    color: var(--cv-support);
    font-size: 2.25rem;
}

.superadmin-logs__empty h3 {
    margin-bottom: 0.35rem;
    color: var(--cv-text);
    font-size: 1.1rem;
}

.superadmin-logs__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    color: var(--cv-text-muted);
    font-size: 0.88rem;
}

@media (max-width: 991.98px) {
    .superadmin-logs__header-actions,
    .superadmin-logs__results-meta,
    .superadmin-logs__pagination {
        justify-content: flex-start;
    }

    .superadmin-logs__refresh-meta {
        min-width: 0;
        width: 100%;
    }
}


/* SuperAdmin statistics overview */
.statistics-overview-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 1rem;
}

.statistics-overview-page__header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0.75rem;
}

.statistics-overview-page__meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 13rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--cv-border);
    border-radius: 14px;
    background: var(--cv-surface-sunken);
}

.statistics-overview-page__meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}

.statistics-overview-page__meta-support {
    color: var(--cv-text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.statistics-overview-page__tenant-select {
    min-width: 15rem;
}

.statistics-overview-page__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.statistics-overview-page__tab-content {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.statistics-overview-page__section {
    margin-bottom: 0;
}

.statistics-overview-page__section-actions {
    min-width: 15rem;
}

.statistics-overview-page__feedback-card,
.statistics-overview-page__legacy-card,
.statistics-overview-page__table-card {
    margin-top: 0;
}

.statistics-overview-page__feedback-copy,
.statistics-overview-page__legacy-copy,
.statistics-overview-page__tool-summary {
    margin: 0;
    color: var(--cv-text-muted);
    line-height: 1.6;
}

.statistics-overview-page__table-card .cv-card__body {
    padding-top: 0.45rem;
}

.statistics-overview-page__table-meta {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--cv-tone-support-bg);
    color: var(--cv-tone-support-text);
    font-size: 0.78rem;
    font-weight: 700;
}

.statistics-overview-page__pill {
    display: inline-flex;
    align-items: center;
    margin: 0.125rem 0.35rem 0.125rem 0;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
}

.statistics-overview-page__pill--primary {
    background: var(--cv-border);
    color: var(--cv-text);
}

.statistics-overview-page__pill--secondary {
    background: var(--cv-tone-support-bg);
    color: var(--cv-tone-support-text);
}

.statistics-overview-page__pill--neutral {
    background: var(--cv-tone-success-bg);
    color: var(--cv-tone-success-text);
}

.statistics-overview-page__pill--warning {
    background: var(--cv-tone-warning-bg);
    color: var(--cv-tone-warning-text);
}

.statistics-overview-page__pill--success {
    background: var(--cv-tone-success-bg);
    color: var(--cv-tone-success-text);
}

.statistics-overview-page__pill--danger {
    background: var(--cv-tone-danger-bg);
    color: var(--cv-tone-danger-text);
}

.statistics-overview-page__code {
    font-size: 0.82rem;
}

.statistics-overview-page__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--cv-text-muted);
}

.statistics-overview-page__empty-state i {
    font-size: 1.85rem;
    color: var(--cv-tone-success-text);
}

.statistics-overview-page__empty-state h3 {
    margin: 0 0 0.2rem;
    color: var(--cv-text);
    font-size: 1rem;
    font-weight: 700;
}

.statistics-overview-page__empty-state p {
    margin: 0;
}

.statistics-overview-page__guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.statistics-overview-page__guide-item {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface-sunken);
}

.statistics-overview-page__guide-item h4 {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: var(--cv-text);
    font-size: 0.95rem;
    font-weight: 700;
}

.statistics-overview-page__guide-item ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--cv-text-muted);
}

.statistics-overview-page__guide-item li + li {
    margin-top: 0.35rem;
}

.statistics-overview-page__tool-actions {
    display: grid;
    gap: 0.9rem;
}

.statistics-overview-page__tool-summary code {
    word-break: break-word;
}

.statistics-overview-page__spinning-icon {
    animation: statistics-overview-spin 1s linear infinite;
}

@keyframes statistics-overview-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ── Compact inline filter row for Intelligence & other filter-heavy pages ── */
.cv-filter-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cv-filter-row > .cv-filter-select {
    max-width: 260px;
    min-width: 180px;
    flex: 1 1 200px;
}

.cv-filter-row > .cv-filter-search {
    max-width: 440px;
    min-width: 240px;
    flex: 1 1 300px;
}

@media (max-width: 767.98px) {
    .cv-filter-row > .cv-filter-select,
    .cv-filter-row > .cv-filter-search {
        max-width: 100%;
        min-width: 100%;
    }

    .statistics-overview-page__header-actions {
        justify-content: stretch;
    }

    .statistics-overview-page__meta,
    .statistics-overview-page__section-actions,
    .statistics-overview-page__tenant-select {
        min-width: 100%;
        width: 100%;
    }

    .statistics-overview-page__tabs {
        flex-direction: column;
    }
}

/* ── CvSettingsToggleRow ── */
/* A flat token row: 1px border, the card radius, hover changes the border only. The icon is a muted
   glyph and the state pill a 4px chip. Every colour is a token, so the row needs no dark overrides
   apart from the MudBlazor switch internals below. */
.cv-settings-toggle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    transition: border-color 0.18s ease;
}

.cv-settings-toggle-row:hover {
    border-color: var(--cv-hover-border);
}

.cv-settings-toggle-row--disabled {
    opacity: 0.55;
    pointer-events: none;
}

.cv-settings-toggle-row__info {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    flex: 1;
    min-width: 0;
}

.cv-settings-toggle-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    color: var(--cv-text-muted);
    font-size: 1rem;
    line-height: 1.25;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.cv-settings-toggle-row__text {
    flex: 1;
    min-width: 0;
}

.cv-settings-toggle-row__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cv-text);
    line-height: 1.25;
}

.cv-settings-toggle-row__description {
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--cv-text-muted);
    line-height: 1.5;
}

.cv-settings-toggle-row__affects {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cv-tone-neutral-text);
    display: inline-flex;
    align-items: center;
}

.cv-settings-toggle-row__controls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.cv-settings-toggle-row__state-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--cv-radius-chip);
}

.cv-settings-toggle-row__state-pill--on {
    background: var(--status-satisfactory-bg);
    color: var(--status-satisfactory-text);
}

.cv-settings-toggle-row__state-pill--off {
    background: var(--cv-surface-sunken);
    color: var(--cv-text-muted);
    box-shadow: inset 0 0 0 1px var(--cv-border);
}

.cv-settings-toggle-row__extra {
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid var(--cv-border-subtle);
}

/* Dark mode: the MudBlazor switch internals only. */
[data-bs-theme="dark"] .cv-settings-toggle-row .mud-switch .mud-switch-track {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .cv-settings-toggle-row .mud-switch-checked .mud-switch-track {
    background-color: rgba(30, 120, 154, 0.72);
    border-color: rgba(30, 120, 154, 0.40);
}

[data-bs-theme="dark"] .cv-settings-toggle-row .mud-switch .mud-switch-thumb {
    background-color: #e8ecf2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

[data-bs-theme="dark"] .cv-settings-toggle-row .mud-switch-checked .mud-switch-thumb {
    background-color: #ffffff;
}

@media (max-width: 575.98px) {
    .cv-settings-toggle-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .cv-settings-toggle-row__controls {
        width: 100%;
        justify-content: space-between;
    }
}

/* ── Switch track & thumb (scoped to settings toggle row) ── */

/* Visually hide the switch label — the row title already provides the text.
   Kept in the DOM for screen readers and to ensure MudBlazor renders the full switch layout. */
.cv-settings-toggle-row .mud-switch .mud-switch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Off state: visible neutral-grey track, light thumb */
.cv-settings-toggle-row .mud-switch .mud-switch-track {
    background-color: rgba(13, 23, 51, 0.18);
    border: 1px solid rgba(13, 23, 51, 0.10);
}

.cv-settings-toggle-row .mud-switch .mud-switch-thumb {
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(13, 23, 51, 0.18);
}

/* On state: coloured track (#1E789A), white thumb */
.cv-settings-toggle-row .mud-switch-checked .mud-switch-track {
    background-color: rgba(30, 120, 154, 0.82);
    border-color: rgba(30, 120, 154, 0.38);
}

.cv-settings-toggle-row .mud-switch-checked .mud-switch-thumb {
    background-color: #ffffff;
}

/* CvSwitch Size="CvSize.Small": a switch among compact controls (a pod head, a toolbar). The label matches
   the segmented control beside it (0.75rem, semibold, muted) instead of MudBlazor's body1 typography. */
.cv-switch--small .mud-switch {
    margin: 0;
}

.cv-switch--small .mud-switch .mud-switch-label,
.cv-switch--small .mud-switch .mud-typography {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    color: var(--cv-text-muted);
}

/* ==========================================================================
   Analytics workspace (/analytics, /analytics/interactions, /analytics/companies,
   /analytics/staff)

   Shared feature styling keyed off the `analytics-page` hook each analytics page
   already declares on its root element. Kept here rather than in per-page scoped
   CSS so the four pages cannot drift apart, per docs/ui.md's shared-wrapper-CSS
   guidance. Colours come from the Corvue palette (Primary #0D1733,
   Secondary #2BA3C5, Support #1E789A).
   ========================================================================== */

.analytics-page__filter-meta {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.analytics-page__filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: #eef4fb;
    color: #0d1733;
    border: 1px solid rgba(13, 23, 51, 0.08);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

.analytics-page__filter-chip i {
    color: #1e789a;
}

.analytics-page__filter-chip--page {
    background: #edf2ff;
}

.analytics-page__filter-chip--search {
    background: #dff5fb;
}

.analytics-page__filter-chip--filters {
    background: #e4f3f0;
}

.analytics-page__filter-chip--filters i {
    color: #2d716c;
}

/* Quick-view toggle chips. One consistent treatment so the row reads as a set of
   view switches rather than a row of unrelated actions of varying severity. */
.analytics-page__quick-views {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.analytics-page__quick-view {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(13, 23, 51, 0.16);
    background: #ffffff;
    color: #0d1733;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.analytics-page__quick-view i {
    color: #1e789a;
}

.analytics-page__quick-view:hover:not(:disabled) {
    background: #eef4fb;
    border-color: rgba(30, 120, 154, 0.42);
}

.analytics-page__quick-view:focus-visible {
    outline: 2px solid #2ba3c5;
    outline-offset: 2px;
}

.analytics-page__quick-view[aria-pressed="true"] {
    background: #1e789a;
    border-color: #1e789a;
    color: #ffffff;
}

.analytics-page__quick-view[aria-pressed="true"] i {
    color: #ffffff;
}

/* The one genuinely semantic view keeps a risk cue when active. */
.analytics-page__quick-view--risk[aria-pressed="true"] {
    background: #a84133;
    border-color: #a84133;
}

[data-bs-theme="dark"] .analytics-page__filter-chip {
    background: rgba(43, 163, 197, 0.12);
    border-color: rgba(126, 143, 190, 0.28);
    color: #e6ecf8;
}

[data-bs-theme="dark"] .analytics-page__filter-chip i,
[data-bs-theme="dark"] .analytics-page__quick-view i {
    color: #68cae5;
}

[data-bs-theme="dark"] .analytics-page__filter-chip--page {
    background: rgba(126, 143, 190, 0.16);
}

[data-bs-theme="dark"] .analytics-page__filter-chip--search {
    background: rgba(94, 175, 203, 0.18);
}

[data-bs-theme="dark"] .analytics-page__filter-chip--filters {
    background: rgba(138, 202, 194, 0.16);
}

[data-bs-theme="dark"] .analytics-page__quick-view {
    background: rgba(18, 27, 54, 0.85);
    border-color: rgba(126, 143, 190, 0.32);
    color: #e6ecf8;
}

[data-bs-theme="dark"] .analytics-page__quick-view:hover:not(:disabled) {
    background: rgba(43, 163, 197, 0.16);
    border-color: rgba(104, 202, 229, 0.5);
}

[data-bs-theme="dark"] .analytics-page__quick-view[aria-pressed="true"] {
    background: #5eafcb;
    border-color: #5eafcb;
    color: #0a1023;
}

[data-bs-theme="dark"] .analytics-page__quick-view[aria-pressed="true"] i {
    color: #0a1023;
}

[data-bs-theme="dark"] .analytics-page__quick-view--risk[aria-pressed="true"] {
    background: #d98b7f;
    border-color: #d98b7f;
    color: #0a1023;
}

/* Keep the page-size control compact, per docs/ui.md's list pattern. */
.analytics-page__page-size {
    min-width: 9.5rem;
}

/* CvInfoBox — standing "how this works" explanation. Quieter than CvAlert, which is for
   actionable page state. See docs/ui.md, "Standard information box pattern". */
.cv-info-box {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface-sunken);
}

.cv-info-box__title,
.cv-info-box__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cv-text);
}

.cv-info-box__icon {
    color: var(--cv-support);
    font-weight: 400;
}

.cv-info-box__body {
    color: var(--cv-text-muted);
    line-height: 1.55;
}

/* Untitled boxes lead with the icon beside the body rather than above it. */
.cv-info-box__inline {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cv-info-box__inline > .cv-info-box__icon {
    line-height: 1.55;
}

.cv-info-box__inline > .cv-info-box__body {
    flex: 1 1 auto;
    min-width: 0;
}

.cv-info-box__body p {
    margin-bottom: 0.6rem;
}

.cv-info-box__body p:last-child,
.cv-info-box__body ol:last-child,
.cv-info-box__body ul:last-child {
    margin-bottom: 0;
}

.cv-info-box__body ol,
.cv-info-box__body ul {
    padding-left: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cv-info-box__body code {
    color: #0f5f75;
    background: rgba(43, 163, 197, 0.1);
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
}

.cv-info-box__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.35rem;
}

/* Native <details> disclosure — no JS, works without interactivity. */
.cv-info-box--collapsible > .cv-info-box__summary {
    cursor: pointer;
    list-style: none;
}

.cv-info-box--collapsible > .cv-info-box__summary::-webkit-details-marker {
    display: none;
}

.cv-info-box--collapsible > .cv-info-box__summary:focus-visible {
    outline: var(--cv-focus-ring);
    outline-offset: var(--cv-focus-offset);
    border-radius: var(--cv-radius-chip);
}

.cv-info-box__chevron {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--cv-text-muted);
    transition: transform 0.18s ease;
}

.cv-info-box--collapsible[open] .cv-info-box__chevron {
    transform: rotate(180deg);
}

.cv-info-box--collapsible[open] > .cv-info-box__summary {
    margin-bottom: 0.35rem;
}

.cv-info-box--support {
    background: rgba(43, 163, 197, 0.08);
    border-color: rgba(43, 163, 197, 0.18);
}

.cv-info-box--secondary {
    background: rgba(43, 163, 197, 0.08);
    border-color: rgba(43, 163, 197, 0.18);
}

.cv-info-box--accent,
.cv-info-box--success {
    background: rgba(162, 211, 57, 0.12);
    border-color: rgba(162, 211, 57, 0.28);
}

.cv-info-box--warning {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.24);
}

.cv-info-box--danger {
    background: rgba(207, 93, 71, 0.1);
    border-color: rgba(207, 93, 71, 0.24);
}

.cv-info-box--primary,
.cv-info-box--neutral {
    background: rgba(13, 23, 51, 0.04);
}

[data-bs-theme="dark"] .cv-info-box__body code {
    color: #9fdcee;
    background: rgba(43, 163, 197, 0.16);
}

[data-bs-theme="dark"] .cv-info-box--support,
[data-bs-theme="dark"] .cv-info-box--secondary {
    background: rgba(43, 163, 197, 0.14);
    border-color: rgba(104, 202, 229, 0.28);
}

[data-bs-theme="dark"] .cv-info-box--accent,
[data-bs-theme="dark"] .cv-info-box--success {
    background: rgba(162, 211, 57, 0.14);
    border-color: rgba(162, 211, 57, 0.3);
}

[data-bs-theme="dark"] .cv-info-box--warning {
    background: rgba(255, 193, 7, 0.14);
    border-color: rgba(255, 193, 7, 0.28);
}

[data-bs-theme="dark"] .cv-info-box--danger {
    background: rgba(217, 139, 127, 0.14);
    border-color: rgba(217, 139, 127, 0.3);
}

/* Demo environment banner (DemoModeBanner). A layout-level strip, so it drops the rounded
   corners, shadow and bottom margin the standalone CvAlert surface carries. */
.demo-mode-banner {
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
}

/* ── Expandable table rows (CvDisclosureButton + CvDetailRow) ──
   Global rather than scoped: the <tr> being expanded is written by the page inside a CvTable
   RowTemplate, so no wrapper's scoped stylesheet can reach it. Pages apply these through
   CvDetailRow.ExpandableRowClass(expanded). See docs/ui.md, on-demand row detail. */
.cv-row--expandable {
    cursor: pointer;
}

.cv-row--expandable:hover > td {
    background: rgba(43, 163, 197, 0.05);
}

.cv-row--expanded > td,
.cv-detail-row > td {
    background: rgba(13, 23, 51, 0.03);
}

.cv-detail-row > td {
    padding-top: 0.25rem;
}

[data-bs-theme="dark"] .cv-row--expandable:hover > td {
    background: rgba(43, 163, 197, 0.1);
}

[data-bs-theme="dark"] .cv-row--expanded > td,
[data-bs-theme="dark"] .cv-detail-row > td {
    background: rgba(255, 255, 255, 0.04);
}

/* ── CvTileGrid ──
   The one set of tile-grid breakpoints (docs/ui.md, tile grid); the column count is the only
   variable. Global rather than scoped because the tiles are CvStatCard roots rendered by another
   wrapper. */
.cv-tile-grid {
    --cv-tile-grid-columns: 4;
    display: grid;
    grid-template-columns: repeat(var(--cv-tile-grid-columns), minmax(0, 1fr));
    gap: var(--cv-gap-grid);
}

.cv-tile-grid--2 {
    --cv-tile-grid-columns: 2;
}

.cv-tile-grid--3 {
    --cv-tile-grid-columns: 3;
}

.cv-tile-grid--4 {
    --cv-tile-grid-columns: 4;
}

/* Five and six across: compact figure tiles on a full-width settings page (docs/ui.md, settings tile rule). */
.cv-tile-grid--5 {
    --cv-tile-grid-columns: 5;
}

.cv-tile-grid--6 {
    --cv-tile-grid-columns: 6;
}

/* Below 1400px a five- or six-column grid would squeeze a figure, so it drops to three. */
@media (max-width: 1399.98px) {
    .cv-tile-grid--5,
    .cv-tile-grid--6 {
        --cv-tile-grid-columns: 3;
    }
}

/* Tablet: four tiles pair up two by two; two- and three-column grids keep their columns. */
@media (max-width: 1199.98px) {
    .cv-tile-grid--4,
    .cv-tile-grid--5,
    .cv-tile-grid--6 {
        --cv-tile-grid-columns: 2;
    }

    .cv-tile-grid--4.cv-tile-grid--span-odd > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Small tablet: two across; an odd last tile takes the full row rather than half of it. The gap is
   --cv-gap-grid at every width. */
@media (max-width: 767.98px) {
    .cv-tile-grid {
        --cv-tile-grid-columns: 2;
    }

    .cv-tile-grid--span-odd > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Phone: one tile per row. */
@media (max-width: 575.98px) {
    .cv-tile-grid {
        --cv-tile-grid-columns: 1;
    }
}

/* ── CvSettingsTile / CvSettingsTileGrid ──
   Settings hubs (docs/ui.md, Standard settings hub pattern): compact flat tiles, as many ~10rem columns as fit,
   so five to six or more across on a wide screen and two, then one, on a phone. */
.cv-settings-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: var(--cv-gap-grid);
}

.cv-settings-tile {
    display: flex;
    flex-direction: column;
    gap: var(--cv-space-1);
    min-width: 0;
    min-height: 6.5rem;
    padding: var(--cv-space-3);
    border: var(--cv-border-width) solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    color: var(--cv-text);
    box-shadow: var(--cv-elevation-flat);
    text-decoration: none;
}

.cv-settings-tile--link {
    cursor: pointer;
    transition: border-color var(--cv-motion-fast) var(--cv-ease-out), background-color var(--cv-motion-fast) var(--cv-ease-out);
}

.cv-settings-tile--link:hover {
    border-color: var(--cv-hover-border);
    color: var(--cv-text);
}

.cv-settings-tile--link:focus-visible {
    outline: var(--cv-focus-ring);
    outline-offset: var(--cv-focus-offset);
}

.cv-settings-tile--disabled {
    background: var(--cv-surface-sunken);
    cursor: default;
}

.cv-settings-tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-space-2);
    min-height: 1.5rem;
    margin-bottom: var(--cv-space-1);
}

.cv-settings-tile__icon {
    display: inline-flex;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--cv-text-muted);
}

.cv-settings-tile__title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cv-text);
    overflow-wrap: anywhere;
}

.cv-settings-tile__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 0.78125rem;
    line-height: 1.4;
    color: var(--cv-text-muted);
}

.cv-settings-tile--disabled .cv-settings-tile__title {
    color: var(--cv-text-muted);
}

/* ── CvDialogOverlay ──
   The scrim and shell for a component-owned CvDialog (the ones ICvDialogService cannot launch). Global because
   the shell holds another wrapper's root. */
.cv-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 2rem 1rem;
}

.cv-dialog-overlay__scrim {
    position: fixed;
    inset: 0;
    background: var(--cv-scrim);
}

.cv-dialog-overlay__shell {
    position: relative;
    width: 100%;
    margin: auto;
    border: var(--cv-border-width) solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    box-shadow: var(--cv-elevation-overlay);
}

.cv-dialog-overlay__shell--xs { max-width: 26rem; }
.cv-dialog-overlay__shell--sm { max-width: 34rem; }
.cv-dialog-overlay__shell--md { max-width: 42rem; }
.cv-dialog-overlay__shell--lg { max-width: 56rem; }
.cv-dialog-overlay__shell--xl { max-width: 72rem; }

@media (max-width: 767.98px) {
    .cv-dialog-overlay {
        padding: 1rem 0.5rem;
    }
}

/* ── CvPod stat grid ──
   A pod with StatColumns set carries the tile-grid classes beside the legacy tickets-grid, so its
   cells follow the breakpoints above. brand.css loads after this file and its .tickets-grid fixes four
   columns (two below 768px) at the same specificity, so the pair of classes restates the tile grid's
   columns here; the tickets-grid gap and bottom margin stay. */
.cv-pod__stats.cv-tile-grid {
    grid-template-columns: repeat(var(--cv-tile-grid-columns), minmax(0, 1fr));
}