* {
    scrollbar-color: var(--scrollbar-color) transparent;
}

.dialog-title-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "dialog-icon dialog-title dialog-format";
    grid-column-gap: 10px;
}

fluent-toolbar fluent-divider {
    border: 0;
}

fluent-toolbar fluent-switch,
fluent-toolbar p {
    margin-inline-end: 15px;
}

fluent-toolbar[orientation=horizontal] {
    width: 100%;
    padding-right: calc(var(--design-unit) * 2px);
}

fluent-toolbar::part(positioning-region) {
    row-gap: calc(var(--design-unit) * 1.5px);
}

fluent-toolbar::part(end) {
    flex-wrap: wrap;
    row-gap: calc(var(--design-unit) * 1.5px);
}

/* Hide any web components that haven't been */
:not(:defined),
.before-upgrade {
    visibility: hidden;
}

.col-long-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%;
}

.trace-tag-icon {
    margin-right: 3px;
}

:root {
    --scrollbar-color: #8B8B8B;
    --log-critical: #F8ECEB;
    --log-error: #F8ECEB;
    --log-warning: #FBF3DD;
    --info: #717171 !important;
    --warning: #E85E36 !important;
    --success: #108310 !important;
    --badge-fill-error: var(--error);
    --badge-fill-warning: var(--warning);
    --badge-color-error: var(--foreground-on-accent-rest);
    --foreground-subtext-rest: #5D5D5D;
    --foreground-subtext-hover: #6C6C6C;
    --foreground-settings-text: var(--foreground-subtext-rest);
    --error-ui-foreground-color: #131313;
    --error-ui-accent-foreground-color: #1d00d0;
    --reconnection-ui-bg: rgb(255, 255, 255);
    --error-counter-badge-foreground-color: var(--neutral-fill-rest);
    --kbd-background-color: var(--neutral-layer-4);
    --dialog-background-color: #ffffff;
    --dialog-border-color: #e5e5e5;
    --messagebar-success-background-color: #f1faf1;
    --messagebar-success-border-color: #9fd89f;
    --messagebar-error-background-color: #FDF3F4;
    --messagebar-error-border-color: #f1bbbc;
    --messagebar-warning-background-color: #FDF6F3;
    --messagebar-warning-border-color: #f4bfab;
    --messagebar-info-background-color: #f5f5f5;
    --messagebar-info-border-color: #d1d1d1;
    --chat-background-color: var(--neutral-layer-floating);
    --chat-user-background-color: #f7f7f7;
    --chat-codeblock-background-color: var(--neutral-fill-hover);
    --table-header-border-color: var(--neutral-stroke-rest);
    --table-body-border-color: #f2f2f2;
    --layout-toolbar-padding: calc(var(--design-unit) * 1.5px);
    --layout-left-padding: calc(var(--design-unit) * 4.5px);
    --layout-right-padding: calc(var(--design-unit) * 2px);
    --inline-icon-margin: 5px;
    /*
        --neutral-layer-2 is the background for the body of most of the site so
        we can default the datagrid hover color to that and just override it as
        necessary elsewhere (e.g. in the details view)
    */
    --datagrid-hover-color: var(--neutral-layer-2-hover);
    --property-grid-background-color: #fbfbfb;
    --property-grid-genai-dialog-background-color: #fbfbfb;
    /* highlight JS theme variables */
    --hljs-default: #545454;
    --hljs-comment: #696969;
    --hljs-variable: #d91e18;
    --hljs-literal: #aa5d00;
    --hljs-attribute: #aa5d00;
    --hljs-string: green;
    --hljs-section: #007faa;
    --hljs-keyword: #7928a1;
    /* geni visualizer */
    --main-container-background-color: #f7f7f7;
    --main-sidebar-background-color: #f7f7f7;
    --llm-background-color: #a6e9ed;
    --llm-color: #00666d;
    --message-background-color: #ebf3fc;
    --message-color: #115ea3;
    --tool-calls-background-color: #f2fbf2;
    --tool-calls-color: #11910d;
    --tool-response-background-color: #e0c8b0;
    --tool-response-color: #5a2e00;
    --output-background-color: #f4bfab;
    --output-color: #7a2101;
    /* accent variables */
    --accent-teal: #14959B;
    --accent-marigold: #E9C877;
    --accent-brass: #9F724F;
    --accent-peach: #F39E67;
    --accent-coral: #E1694E;
    --accent-royal-blue: #5F79DE;
    --accent-orchid: #C764BA;
    --accent-brand-blue: #0E62AD;
    --accent-seafoam: #55BFA9;
    --accent-mink: #9C9587;
    --accent-cyan: #0E858B;
    --accent-gold: #D7A763;
    --accent-bronze: #7B4F2E;
    --accent-orange: #F57D1A;
    --accent-rust: #E0522A;
    --accent-navy: #1B3A70;
    --accent-berry: #C239B3;
    --accent-ocean: #0E5E77;
    --accent-jade: #3BAB8E;
    --accent-olive: #6F6652;
    /* status colors (app-specific) */
    --status-success: #2DA44E;
    --status-error: #D13438;
    --status-warning: #E8890C;
}

/* ── Theme (Aspire-style JS-driven design tokens) ─────────────────────────
   wwwroot/js/app-theme.js pins the Fluent design tokens (accent, neutral,
   fill) on #aspire-design-system and sets data-theme=dark|light on <html>.
   No !important accent overrides here — the token-emitted values win the
   cascade. The body uses --neutral-layer-2 like the real Aspire dashboard. */
body {
    background-color: var(--neutral-layer-2) !important;
}

[data-theme="dark"] {
    /* Dark neutral layer ramp. app-theme.js drives baseLayerLuminance and the
       neutral palette (violet-tinted); these colors are derived from that palette. */
    --scrollbar-color: #9F9F9F;
    --log-critical: #493634;
    --log-error: #493634;
    --log-warning: #3F3A2B;
    --foreground-subtext-rest: #8D8D8D;
    --foreground-subtext-hover: #A1A1A1;
    --foreground-settings-text: #A8A8A8;
    --error-ui-foreground-color: #000000;
    --error-ui-accent-foreground-color: #512bd4;
    --reconnection-ui-bg: #D6D6D6;
    --error-counter-badge-foreground-color: #ffffff;
    --kbd-background-color: var(--fill-color);
    --dialog-background-color: #1F1B29;
    --dialog-border-color: #352F45;
    --messagebar-success-background-color: #052505;
    --messagebar-success-border-color: #107C10;
    --messagebar-error-background-color: #3F1011;
    --messagebar-error-border-color: #D13438;
    --messagebar-warning-background-color: #411200;
    --messagebar-warning-border-color: #DA3B01;
    --messagebar-info-background-color: #141414;
    --messagebar-info-border-color: #666;
    --chat-background-color: #212121;
    --chat-user-background-color: #333;
    --chat-codeblock-background-color: var(--neutral-layer-4);
    --table-header-border-color: var(--neutral-stroke-rest);
    --table-body-border-color: #474747;
    /* overrides of default fluentui-blazor styling */
    --error: #E10B11 !important;
    color-scheme: dark;
    --property-grid-background-color: #333333;
    --property-grid-genai-dialog-background-color: #383838;
    /* highlight JS theme variables */
    --hljs-default: #f8f8f2;
    --hljs-comment: #d4d0ab;
    --hljs-variable: #ffa07a;
    --hljs-literal: #f5ab35;
    --hljs-attribute: gold;
    --hljs-string: #abe338;
    --hljs-section: #00e0e0;
    --hljs-keyword: #dcc6e0;
    /* geni visualizer */
    --main-container-background-color: #333333;
    --main-sidebar-background-color: #272727;
    --events-background-color: var(--neutral-fill-layer-rest);
    --llm-background-color: #00666d;
    --llm-color: #a6e9ed;
    --message-background-color: #063004;
    --message-color: #5ec75a;
    --tool-calls-background-color: #082338;
    --tool-calls-color: #62abf5;
    --tool-response-background-color: #3b2a1f;
    --tool-response-color: #e0c8b0;
    --output-background-color: #7a2101;
    --output-color: #f4bfab;
    /* accent variables */
    --accent-teal: #2CB7BD;
    --accent-marigold: #F3D58E;
    --accent-brass: #BF8B64;
    --accent-peach: #FFC18F;
    --accent-coral: #F89170;
    --accent-royal-blue: #88A1F0;
    --accent-orchid: #E19AD4;
    --accent-brand-blue: #1A7ECF;
    --accent-seafoam: #74D6C6;
    --accent-mink: #B9B2A4;
    --accent-cyan: #17A0A6;
    --accent-gold: #E3BA7A;
    --accent-bronze: #8E6038;
    --accent-orange: #FFA44A;
    --accent-rust: #EA6A3E;
    --accent-navy: #2A4C8A;
    --accent-berry: #D150C3;
    --accent-ocean: #16728F;
    --accent-jade: #51C0A5;
    --accent-olive: #847B63;
}

.fluent-data-grid-row.hover:not([row-type='header'],[row-type='sticky-header']):hover td {
    cursor: auto !important;
}

.enable-row-click .fluent-data-grid-row.hover:not([row-type='header'],[row-type='sticky-header'], .empty-content-row, .loading-content-row):hover td {
    cursor: pointer !important;
}

[data-theme="light"] {
    color-scheme: light;
}

fluent-select.resource-list {
    /* overrides of default fluentui-blazor styling */
    --disabled-opacity: 0.7;
}

[data-theme="dark"] fluent-select.resource-list {
    /* overrides of default fluentui-blazor styling */
    --disabled-opacity: 0.85;
}

h1 {
    font-size: var(--type-ramp-plus-4-font-size);
    line-height: var(--type-ramp-plus-4-line-height);
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

#components-reconnect-modal {
    background-color: var(--neutral-layer-floating) !important;
}

.components-rejoining-animation div {
    border-color: var(--accent-fill-active) !important;
}

@media (max-width: 768px) {
    fluent-toolbar[orientation=horizontal].main-toolbar {
        padding-left: calc(var(--design-unit) * 2px);
        padding-right: calc(var(--design-unit) * 2px);
    }

    /* we want less padding on mobile screens to preserve screen height for other elements */
    .page-header {
        padding: calc(var(--design-unit) * 1.5px) calc(var(--design-unit) * 2.5px) 0;
        width: fit-content;
    }

    .page-header > h1 {
        white-space: normal;
    }

    .hidden-on-mobile {
        visibility: collapse;
    }
}

@media (min-width: 768px) {
    fluent-toolbar[orientation=horizontal].main-toolbar {
        padding-left: var(--layout-left-padding);
        padding-right: var(--layout-right-padding);
    }

    .page-header {
        padding: calc(var(--design-unit) * 1.5px) var(--layout-left-padding);
    }
 }

.datagrid-overflow-area,
.parent-details-container {
    /*
        Height of the browser - static height for other content
        TODO: Is there a better way to do this?
    */
    height: 100%;
    min-width: 100%;
    overflow: auto;
}

.fluent-data-grid .empty-content-cell,
.fluent-data-grid .loading-content-cell {
    padding: calc(var(--design-unit) * 5px);
    display: flex;
    align-items: center;
    height: auto !important; /* override height in td style attribute */
    justify-content: center;
}
/*
    Default LoadingContent template has align-items set to start, so the
    text doesn't line up with the spinner properly. It is set via inline style
    so we need to use !important to override it.
*/
.fluent-data-grid .loading-content-cell .stack-horizontal {
    align-items: center !important;
    column-gap: calc(var(--design-unit) * 2px) !important;
}

.custom-body-content {
    margin-right: 10px;
}

.top-messagebar {
    padding: calc(var(--design-unit) * 4px);
    padding-top: calc(var(--design-unit) * 2px);
    padding-bottom: 0 !important;
    width: 100%;
}

.fluent-messagebar.intent-success {
    background-color: var(--messagebar-success-background-color) !important;
    border: 1px solid var(--messagebar-success-border-color) !important;
}

.fluent-messagebar.intent-error {
    background-color: var(--messagebar-error-background-color) !important;
    border: 1px solid var(--messagebar-error-border-color) !important;
}

.fluent-messagebar.intent-warning {
    background-color: var(--messagebar-warning-background-color) !important;
    border: 1px solid var(--messagebar-warning-border-color) !important;
}

.fluent-messagebar.intent-info {
    background-color: var(--messagebar-info-background-color) !important;
    border: 1px solid var(--messagebar-info-border-color) !important;
}

/* The fluent dialog's default fill color is too dark in our current dark theme.
   Setting it to the floating layer allows it to stand out more and doesn't impact light theme. */
fluent-dialog::part(control) {
    background: var(--dialog-background-color);
    border: 1px solid var(--dialog-border-color);
}

fluent-dialog[class~="right"]::part(control) {
    border-left-width: 1px !important;
}

fluent-dialog fluent-toolbar {
    background-color: var(--dialog-background-color);
}

/* Changing the dialog's fill color means stealth buttons on the dialog have the wrong background,
   so change it to match */
fluent-dialog fluent-button[appearance=stealth]:not(:hover)::part(control),
fluent-dialog fluent-button[appearance=lightweight]:not(:hover)::part(control),
fluent-dialog fluent-anchor[appearance=stealth]:not(:hover)::part(control),
fluent-dialog fluent-anchor[appearance=lightweight]:not(:hover)::part(control) {
    background: var(--dialog-background-color);
}

/* But changing the stealth button's background in dialogs means the stealth buttons used as headers for grid cells
   now have the wrong background. So change that back */
fluent-dialog td[cell-type=columnheader] fluent-button[appearance=stealth]:not(:hover)::part(control) {
    background: var(--fill-layer);
}

.pane-details-subtext {
    color: var(--foreground-subtext-rest);
    padding-left: 0.5rem;
    font-size: 12px;
}

td .long-inner-content {
    width: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parent-details-container {
    display: grid;
    grid-template-rows: 1fr;
    gap: calc(var(--design-unit) * 2px);
}

.version {
    color: var(--foreground-subtext-rest);
    text-align: end;
    font-size: small;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 4px;
    margin-top: auto;
}

.anchor-no-padding::part(control) {
    padding: 0;
    flex-grow: 0;
}

.button-hyperlink::part(control), .button-hyperlink-no-icon::part(control) {
    padding: 0;
}

.button-hyperlink::part(start) {
    margin-inline-end: var(--inline-icon-margin);
}

.ellipsis-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fluent-popover-header,
.fluent-popover-body {
    color: var(--neutral-foreground-rest);
}

.subtext {
    color: var(--foreground-subtext-rest);
}

.selected-row .subtext {
    color: var(--neutral-foreground-rest);
}

.validation-message {
    color: var(--error);
}

.selected-row,
.selected-row fluent-button[appearance=lightweight]:not(:hover)::part(control),
.selected-row fluent-anchor[appearance=lightweight]:not(:hover)::part(control) {
    background-color: var(--neutral-fill-secondary-rest); /* Same color as the menu hover */
}

.selected-row fluent-button[appearance=lightweight]:hover::part(control),
.selected-row fluent-anchor[appearance=lightweight]:hover::part(control){
    background-color: var(--neutral-fill-stealth-rest); /* Essentially inverts the hover compared to an unselected row */
}

.severity-icon {
    vertical-align: text-bottom;
    margin-right: var(--inline-icon-margin);
}

.persistent-container-icon {
    vertical-align: text-bottom;
    margin-left: var(--inline-icon-margin);
}

.align-text-bottom {
    vertical-align: text-bottom;
}

.visually-hidden {
     top: 0;
     left: -2px;
     width: 1px;
     height: 1px;
     position: absolute;
     overflow: hidden;
 }

split-panels::part(handle) {
    display: none;
}

div.error-counter-badge {
    padding: 3px 3px;
    color: var(--error-counter-badge-foreground-color) !important; /* color is applied directly to div style, so !important to override since we can't use a more specific selector */
}

.layout >.header > .header-gutters {
    margin: 0;
}

layout > .header {
    font-size: var(--type-ramp-base-font-size);
}

.flex-filler {
    flex-grow: 1;
}

/* Aspire 13.5 page title in header */
.page-title-slot {
    font-weight: 400;
    font-size: var(--type-ramp-plus-2-font-size, 20px);
    color: var(--neutral-foreground-rest);
    margin-left: 0;
}

.page-title-separator {
    margin: 0 8px;
    font-weight: 300;
    font-size: var(--type-ramp-plus-2-font-size, 20px);
    color: var(--neutral-foreground-rest);
    opacity: 0.5;
}

.app-name-text {
    font-weight: 600;
}


kbd {
    color: unset;
    background-color: var(--kbd-background-color);
}

fluent-switch.table-switch::part(label) {
     width: 160px;
}

/*
    If ShowHover is enabled on a FluentDataGrid, we need to tweak the way anchors and buttons
    are colored when a row is hovered
*/
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-anchor[appearance=lightweight]::part(control):not(:hover),
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-anchor[appearance=stealth]::part(control):not(:hover),
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-button[appearance=lightweight]::part(control):not(:hover),
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-button[appearance=stealth]::part(control):not(:hover) {
    background-color: var(--datagrid-hover-color);
}

.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-anchor[appearance=lightweight]::part(control):hover,
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-anchor[appearance=stealth]::part(control):hover,
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-button[appearance=lightweight]::part(control):hover,
.fluent-data-grid-row:not([row-type='header'],[row-type='sticky-header']).hover:hover fluent-button[appearance=stealth]::part(control):hover {
    background-color: var(--fill-color);
}

.property-grid-container {
    grid-area: main;
    overflow: auto;
    width: 100%;
    height: 100%;
    padding: calc(var(--design-unit) * 1px);
    padding-top: 0;
}

.property-grid-container fluent-accordion {
    gap: calc(var(--design-unit) * 2px);
    margin-bottom: calc(var(--design-unit) * 1px);
    --fill-color: var(--property-grid-background-color);
}

.property-grid-container > fluent-accordion > fluent-accordion-item::part(heading) {
    padding-left: calc(var(--design-unit) * 2px);
}

.property-grid-container fluent-accordion .fluent-data-grid {
    --datagrid-hover-color: var(--neutral-layer-1-hover);
}

.property-grid-container fluent-accordion-item,
.property-grid-container fluent-accordion-item::part(region) {
    background-color: var(--property-grid-background-color);
}

/* This is a hack because we can't do a selector that selects inside of a ::part,
   which is what we'd need to do to access `::part(heading):not(:hover) .icon`.
   So instead we just change the color token the non-hovered state uses.
*/
.property-grid-container fluent-accordion-item::part(icon) {
    --neutral-fill-stealth-rest-on-neutral-fill-layer-rest: var(--property-grid-background-color);
}

.property-grid-container fluent-accordion-item::part(region) {
    padding: 0;
    /* overflow hidden masks content in the item's rounded borders */
    overflow: hidden;
}

.property-grid-container fluent-accordion-item::part(heading-content) {
    font-weight: 600;
    font-size: var(--type-ramp-plus-1-font-size);
}

.property-grid-container fluent-accordion .fluent-data-grid-row:last-of-type {
    border-bottom: none;
}

.property-grid-container fluent-accordion .fluent-data-grid-row fluent-button[appearance=stealth]::part(control):not(:hover),
.property-grid-container fluent-accordion .fluent-data-grid-row fluent-button[appearance=lightweight]::part(control):not(:hover) {
    background-color: var(--fill-color);
}

.property-grid-container fluent-accordion .fluent-data-grid-row:is([row-type='header'],[row-type='sticky-header']) fluent-button[appearance=stealth]::part(control):hover,
.property-grid-container fluent-accordion .fluent-data-grid-row:is([row-type='header'],[row-type='sticky-header']) fluent-button[appearance=lightweight]::part(control):hover {
    background-color: var(--neutral-fill-stealth-hover-on-neutral-fill-layer-rest);
}

/* Under the current dark theme, the fluent-badge background color was too dark on --neutral-layer-1 */
[data-theme="dark"] .property-grid-container fluent-accordion-item fluent-badge::part(control) {
    background-color: var(--neutral-fill-active);
}

.property-grid-container tr:last-child td {
    /* bottom of the table is at the bottom of an accordion item so hide the bottom row's bottom border */
    border-bottom: none;
}

.items-footer {
    display: flex;
    column-gap: 20px;
    min-height: 46px;
    align-items: center;
}

.items-footer .result-count {
    padding-left: var(--layout-left-padding);
}

/* Minimal prev/next pager in the footer strip. Keeps server-side paging
   functional while matching the real dashboard's neutral footer: the
   "Showing N items" count stays left-aligned (see .result-count above)
   and the pager sits quietly on the right edge of the same strip. */
.items-footer .pagination-controls {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    column-gap: 2px;
    padding-right: var(--layout-left-padding);
}

.items-footer .page-indicator {
    color: var(--neutral-foreground-rest);
    opacity: 0.7;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    padding: 0 8px;
    white-space: nowrap;
}

.items-footer .page-button::part(control) {
    min-width: 28px;
    height: 28px;
    padding: 0;
}

/* Align the toast with the top of the body/bottom of the header
   and the right edge of the filter box
*/
.layout .fluent-toast-provider.position-topright {
    top: 50px;
    right: calc(var(--design-unit) * 1.5px);
}


/* Some of the data-columns (e.g. logs and details in the resource page)
   should not have ellipsis as this is unnecessary and a bit distracting.

*/
.fluent-data-grid .no-ellipsis {
    text-overflow: unset;
}

.url-overflow {
    overflow-x: visible !important;
}

.url-overflow .fluent-overflow-more fluent-button {
    vertical-align: middle;
}

.url-button {
    height: unset;
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
}

.url-button::part(control) {
    padding: calc(((var(--design-unit) * 0.5) - var(--stroke-width)) * 1px) calc((var(--design-unit) - var(--stroke-width)) * 1px);
}

.mobile-toolbar {
    width: 100%;
    height: max(5vh, 30px);
}

.mobile-absolute-toolbar {
    position: absolute;
    left: 0;
    bottom: 0;
}

.page-content-container {
    height: 100%;
    overflow: auto;
}

.log-overflow {
    --console-theme-black: #0C0C0C;
    --console-theme-blue: #0037DA;
    --console-theme-cyan: #3A96DD;
    --console-theme-green: #13A10E;
    --console-theme-magenta: #CD13E8;
    --console-theme-bg-red: #F80F24;
    --console-theme-fg-red: #C50F1F;
    --console-theme-white: #CCCCCC;
    --console-theme-yellow: #C19C00;

    --console-theme-bright-black: #767676;
    --console-theme-bright-blue: #3B78FF;
    --console-theme-bright-cyan: #61D6D6;
    --console-theme-bright-green: #16C60C;
    --console-theme-bright-magenta: #DA01FA;
    --console-theme-bright-red: #E74856;
    --console-theme-bright-white: #F2F2F2;
    --console-theme-bright-yellow: #F9F1A5;

    --line-number-color: #848484;
    --timestamp-color: var(--line-number-color);
    --resource-text-color: #000;
    --console-background-color: var(--console-theme-black);
    --console-background-color-hover: #1D1D1D;
    --console-font-color: var(--console-theme-white);

    width: 100%;
    overflow: auto;
}

.console-overflow {
    background-color: var(--console-background-color);
    height: 100%;
}

.log-container {
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 13px;
    line-height: 20px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wrap-log-container .log-line-row-container {
    overflow: visible;
}

.wrap-log-container .log-content {
    white-space: nowrap;
    overflow-wrap: normal;
}

.log-line-row-container {
    width: 100%;
    overflow: hidden;
}

.log-line-row {
    cursor: text;
    padding: 0 12px 0 0;
    white-space: pre-wrap;

    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.log-line-area {
    flex-grow: 1;
    justify-content: flex-start;
    display: flex;
    flex-direction: row;
}

.log-line-number {
    min-width: 53px;
    text-align: right;
    align-self: flex-start;
    flex-shrink: 0;
    color: var(--line-number-color);
    user-select: none;
    cursor: default;
    height: 100%;
    margin-right: 20px;
}

.log-content {
    word-break: break-all;
    position: relative;
    margin-right: 6px;
    user-select: text;
    cursor: text;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.resource-select-resource-label {
    color: var(--accent-foreground-rest);
}

.filter-input-container {
    width: 85%;
}

.filter-button-container {
    display: flex;
}

.layout fluent-toolbar > .fluent-input-label {
    margin-bottom: 0;
}

.input-container .fluent-input-label {
    font-weight: 500 !important;
    font-size: 13.5px !important;
}

.action-divider {
    display: inline;
    height: 20px;
}

.grid-action-container {
    display: inline-flex;
    column-gap: 4px;
    align-items: center;
}

.empty-data::before {
    content: "-"
}

.fluent-data-grid {
    height: auto !important; /* override height in table style attribute */
    --fluent-data-grid-resize-handle-color: var(--neutral-stroke-rest) !important; /* neutral resize handle, not accent */
}

/* Sort/resize icons in the column header menu: FluentUI's web component
   overrides --accent-fill-rest to cyan inside the menu; force the app's
   purple accent (matches the Aspire dashboard). */
fluent-menu-item svg[slot="start"] {
    fill: #6f3dff !important;
}
[data-theme="dark"] fluent-menu-item svg[slot="start"] {
    fill: #d6aeff !important;
}

.main-grid-expand-container {
    display: inline-block;
    width: 18px;
}

.main-grid-expand-container svg {
    transition: transform 0.1s linear;
    pointer-events: none;
}

.main-grid-collapsed svg {
    transform: rotate(0deg);
}

.main-grid-expanded svg {
    transform: rotate(90deg);
}

.main-grid-expand-button {
    width: 18px;
    height: 24px;
    min-width: 18px;
    vertical-align: middle;
}

.main-grid .fluent-data-grid-row:not([row-type='sticky-header']) td.expand-col {
    padding-left: 0;
    border-left: 0;
}

.main-grid .fluent-data-grid-row:not([row-type='sticky-header'], .empty-content-row) td:first-child:not(.expand-col) {
    padding-left: calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width) + 5)* 1px);
}

/* Line up the first column header with the content. TODO: A bit of a mess. See if it can be improved */
.main-grid .column-header:not(.select-all):first-of-type {
    padding-inline-start: calc(var(--design-unit)* 2px) !important;
}
.column-header:not(.select-all):first-of-type, .trace-view-grid .column-header:not(.select-all):first-of-type {
    padding-inline-start: 0px !important;
}

/* Forces the grid to always take up the width of its rows, and the rows to
   always take up the width of the cells. This fixes a few odd rendering
   things, but also enables us to set overflow-x: clip on the grid to prevent
   an odd visual glitch with the menu when it is at the far right of the viewport.
   (Real Aspire Resources page scoped CSS, globalized — b- attributes stripped) */
.fluent-data-grid,
.fluent-data-grid-row {
    min-width: min-content;
}

/* Ensures that any popups (e.g. menus) don't overflow past the right edge of
   the grid causing a visual flicker of the horizontal scrollbar appearing and
   disappearing */
.fluent-data-grid {
    overflow-x: clip;
}

.toolbar-left {
    margin-left: 0;
}

.setting-subtext {
    color: var(--foreground-settings-text);
    font-size: var(--type-ramp-minus-1-font-size);
    margin: 0;
}

.setting-title {
    margin-bottom: 4px;
    display: inline-block;
}

.volume-mount-type-icon {
    vertical-align: text-bottom;
    margin-right: 3px
}

.clear-button::part(control) {
    padding: 0 calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
}

.language-select {
    margin-bottom: 2px;
    min-width: 235px;
}

.resources-filter-popup {
    max-height: 400px;
    overflow-y: auto;
}

.filter-menu-item::part(content) {
    max-width: 300px;
}

/*
    Korean text can have bad wrapping behavior. See https://github.com/w3c/csswg-drafts/issues/4285
    This rule prevents Korean "Close" text in tooltip from wrapping. See https://github.com/microsoft/aspire/issues/8170
*/
fluent-tooltip[anchor="dialog_close"] > div {
    word-break: keep-all;
}

.block-warning {
    font-family: var(--body-font);
    border: 1px solid var(--messagebar-warning-border-color);
    background-color: var(--messagebar-warning-background-color);
    color: var(--neutral-foreground-rest);
    display: grid;
    grid-template-columns: 24px auto;
    width: fit-content;
    align-items: center;
    min-height: 36px;
    border-radius: calc(var(--control-corner-radius)* 1px);
    padding: 0 12px;
    column-gap: 8px;
}

.block-warning-icon {
    grid-column: 1;
    display: flex;
    justify-content: center;
}

.block-warning-message {
    grid-column: 2;
    padding: 8px 0;
    align-self: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.block-warning-message .title {
    font-weight: 600;
    padding: 0 4px 0 0;
}

.resource-icon {
    vertical-align: text-bottom;
    margin-right: var(--inline-icon-margin);
}

.aspire-menu-container {
    --aspire-menu-max-width: 368px;
}

.aspire-menu-container fluent-menu-item::part(content) {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aspire-menu-container fluent-menu fluent-menu {
    max-width: var(--aspire-menu-max-width);
}

.overflow-fluent-menu-item::part(content) {
    width: 100%;
    text-overflow: ellipsis;
}

.fluent-messagebar-action {
    font-size: var(--type-ramp-minus-1-font-size);
}

.filter-group > legend {
    font-size: var(--type-ramp-plus-2-font-size);
    font-weight: 500;
}

#chat-modal-dialog::part(control) {
    background-color: var(--chat-background-color);
    border: 1px solid var(--neutral-stroke-divider-rest);
}

fluent-dialog#chat-modal-dialog fluent-button[appearance=stealth]:not(:hover)::part(control) {
    background: var(--chat-background-color);
}

/* ════════════════════════════════════════════════════════════════════════
   Altar Admin — app-specific styles (appended to real Aspire 13.4.6 CSS)
   ════════════════════════════════════════════════════════════════════════ */

html, body {
    height: 100%;
}

/* ── Layout (real Aspire MainLayout.razor.css, v13.4.6) ─────────────────────
   Grid areas: "icon head" / "nav messagebar" / "nav main". The scoped ::deep
   selectors from the real file are globalized — this app has no scoped layout
   CSS, the rules live here in app.css. */

@media (min-width: 768px) {
    .layout {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "head head"
            "nav messagebar"
            "nav main";
        background-color: var(--fill-color);
        color: var(--neutral-foreground-rest);
    }

    .layout > .aspire-icon {
        display: none;
    }

    .layout > header {
        grid-area: head;
    }

    .layout > .fluent-appbar,
    .layout > .desktop-nav-rail {
        grid-area: nav;
        overflow-y: auto;
        background: var(--neutral-layer-4);
    }

    .layout > .desktop-nav-rail {
        display: flex;
        flex-direction: column;
    }

    .layout > .desktop-nav-rail > .fluent-appbar {
        flex: 1;
        overflow-y: auto;
    }

    .layout > .layout-body-container {
        grid-area: main;
        overflow-x: auto; /* allow horizontal scrolling */
        overflow: auto;
        border-left: 1px solid var(--neutral-stroke-rest);
        display: flex;
        flex: 1;
    }

    .layout .layout-sidebar-spacer {
        flex: 0 0 auto;
        width: 480px;
    }

    .layout > .messagebar-container {
        grid-area: messagebar;
        border-top: 1px solid var(--neutral-stroke-rest);
        border-left: 1px solid var(--neutral-stroke-rest);
        display: flex;
    }

    .header-right {
        margin-left: auto;
    }

    /* .header.header beats FluentHeader's own scoped .header[b-x] (accent
       background) — same trick as the real dashboard's [b-x].layout > header */
    .layout > header.header {
        background-color: var(--neutral-layer-4);
        margin-bottom: 0;
    }

    .layout > header > .header-gutters > fluent-anchor {
        font-size: var(--type-ramp-plus-2-font-size);
    }

    .aspire-icon fluent-anchor.logo::part(control) {
        padding: 0;
        border: none;
    }

    .aspire-icon fluent-anchor.logo,
    .aspire-icon fluent-anchor.logo::part(control),
    .aspire-icon fluent-anchor.logo::part(content) {
        height: 24px;
        width: 24px;
    }

    .layout > header > .header-gutters {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .layout {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas:
            "head head"
            "nav-menu nav-menu"
            "messagebar messagebar"
            "main main";
        background-color: var(--fill-color);
        color: var(--neutral-foreground-rest);
    }

    .layout > .aspire-icon {
        display: none;
    }

    .layout > header {
        grid-area: head;
    }

    .layout > .fluent-appbar {
        grid-area: nav;
        overflow-y: auto;
        background: var(--neutral-layer-4);
    }

    .layout > .layout-body-container {
        grid-area: main;
        overflow-x: auto; /* allow horizontal scrolling */
        overflow: auto;
        border-left: 1px solid var(--neutral-stroke-rest);
    }

    .layout > .messagebar-container {
        grid-area: messagebar;
        border-top: 1px solid var(--neutral-stroke-rest);
        border-left: 1px solid var(--neutral-stroke-rest);
        display: flex;
    }

    .header-right {
        margin-left: auto;
    }

    .layout > .aspire-icon {
        padding-left: 15px;
        background-color: var(--neutral-layer-4);
    }

    .layout > .aspire-icon fluent-anchor {
        margin-left: 5px;
    }

    .layout > .aspire-icon .navigation-button {
        border: 1px solid #a8aeb3;
    }

    .layout > header.header {
        background-color: var(--neutral-layer-4);
        margin-bottom: 0;
    }

    .layout > header > .header-gutters > fluent-anchor {
        font-size: var(--type-ramp-plus-2-font-size);
    }

    .aspire-icon fluent-anchor.logo::part(control) {
        padding: 0;
        border: none;
    }

    .aspire-icon fluent-anchor.logo,
    .aspire-icon fluent-anchor.logo::part(control),
    .aspire-icon fluent-anchor.logo::part(content) {
        height: 24px;
        width: 24px;
    }

    .layout > header > .header-gutters {
        margin-left: 0;
    }
}

.desktop-nav-menu > .fluent-appbar-item > .fluentui-counterbadge-container > a > .stack-vertical {
    /* FluentAppBarItems have a default width. However, we have a wide range of widths
       in content depending on the language (ie, from traces to seguimientos).
       Remove the default horizontal padding to allow for more text */
    padding-left: 0;
    padding-right: 0;
}

/* Aspire 13.5 nav rail: icon-only (hide text labels) */
.desktop-nav-menu .fluent-appbar-item [part='label'] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Aspire 13.5 nav rail: hover + active affordance */
.desktop-nav-menu .fluent-appbar-item > .fluentui-counterbadge-container > a {
    transition: background-color 120ms ease;
}

.desktop-nav-menu .fluent-appbar-item > .fluentui-counterbadge-container > a:hover {
    background-color: var(--neutral-fill-stealth-hover);
}

.desktop-nav-menu .fluent-appbar-item > .fluentui-counterbadge-container > a.active {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
    box-shadow: inset 3px 0 0 0 var(--accent-fill-rest);
}

.desktop-nav-menu .fluent-appbar-item > .fluentui-counterbadge-container > a.active [part='label'] {
    font-weight: 600;
}

/* ── Nav rail toggle (expand/collapse) ──────────────────────────────────── */
.nav-toggle-bottom {
    display: block;
    width: 100%;
    height: 48px !important;
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
}

.nav-toggle-bottom::part(control) {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    justify-content: center !important;
}

.nav-toggle-bottom:hover::part(control) {
    background: var(--neutral-fill-stealth-hover) !important;
}

.nav-toggle-content {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
}

.nav-toggle-label {
    font-size: var(--type-ramp-base-font-size, 14px);
    white-space: nowrap;
}

/* Expanded nav rail */
.layout.nav-expanded .desktop-nav-rail {
    min-width: 176px;
}

.layout.nav-expanded .desktop-nav-rail .desktop-nav-menu .fluent-appbar-item [part='label'] {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
    text-align: left;
    font-size: var(--type-ramp-base-font-size, 13px);
    line-height: 1;
}

.layout.nav-expanded .desktop-nav-rail .desktop-nav-menu .fluent-appbar-item .stack-vertical {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    column-gap: 12px !important;
    padding-left: 20px !important;
    padding-right: 8px !important;
}

.layout.nav-expanded .desktop-nav-rail .desktop-nav-menu .fluent-appbar-item,
.layout.nav-expanded .desktop-nav-rail .desktop-nav-menu .fluent-appbar-item > .fluentui-counterbadge-container,
.layout.nav-expanded .desktop-nav-rail .desktop-nav-menu .fluent-appbar-item > .fluentui-counterbadge-container > a {
    width: 100% !important;
}

.layout.nav-expanded .desktop-nav-rail .nav-toggle-content {
    justify-content: flex-start;
    padding-left: 20px;
}

.layout > header > .header-gutters > fluent-button[appearance=stealth]:not(:hover)::part(control),
.layout > header > .header-gutters > fluent-anchor[appearance=stealth]:not(:hover)::part(control),
.layout > header > .header-gutters > fluent-anchor[appearance=stealth].logo::part(control),
.layout > .aspire-icon fluent-anchor[appearance=stealth].logo::part(control) {
    background-color: transparent;
}

.header-gutters .header-button {
    height: 32px;
    display: block;
    margin-left: 6px;
}

.header-gutters .header-button::part(control) {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: transparent !important;
}

.header-gutters .header-button:hover::part(control) {
    background-color: var(--neutral-fill-stealth-hover) !important;
}

.layout > header > .header-gutters > .header-button-selected:not(:hover)::part(control) {
    background-color: var(--chat-background-color) !important;
}

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

#blazor-error-ui a {
    color: var(--error-ui-accent-foreground-color);
}

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

/* ── Page content layout (real AspirePageContentLayout.razor.css, v13.4.6) ── */

.content-layout {
    height: 100%;
    width: 100%;
    display: grid;

    grid-template-areas:
            "page-header"
            "main"
            "footer";

    grid-template-rows: auto 1fr auto;
}

.content-header {
    grid-area: page-header;
    word-break: break-all;
}

/* Hide the H1 page title since it's now shown in the header bar (Aspire 13.5 pattern) */
.content-header > .page-header {
    display: none;
}

.title-toolbar-inline {
    padding-left: 0px;
    padding-top: 0px;
}

.title-toolbar-inline > h1 {
    margin-left: 0;
}

/* ── Typography ─────────────────────────────────────────────────────────── */

h1, h2, .page-title, .section-title {
    font-family: var(--body-font);
}

.page-title {
    margin: 0 0 16px;
    font-size: var(--type-ramp-plus-1-font-size, 16px);
    font-weight: 600;
}

.section-title {
    margin-top: 32px;
    padding-left: 24px; /* align with stat-card content (cards have 24px inner padding) */
}

/* ── Surfaces (cards) ───────────────────────────────────────────────────── */

.table-card {
    border-radius: 6px !important;
    background-color: var(--neutral-layer-1) !important;
    border: 1px solid var(--neutral-stroke-rest) !important;
    box-shadow: none !important;
    animation: card-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    height: auto !important; /* fluent-card host defaults to height:100% — don't stretch to fill main */
    padding: 0 !important;
    overflow: hidden;
}

@keyframes card-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .table-card {
        animation: none;
    }
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

.altar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.altar-table th {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-rest);
}

.altar-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.altar-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--neutral-foreground-rest) 4%, transparent);
}

.altar-table tbody tr:last-child td {
    border-bottom: none;
}

.altar-grid {
    width: 100%;
}

/* ── Dashboard chart grid ─────────────────────────────────────────────────
   Two chart cards side-by-side on wide screens, stacked on narrow ones.
   Cards sit flush to the main area like the data-grid pages. */

.dashboard-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 1024px) {
    .dashboard-charts {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

.chart-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 32px 0;
}

.chart-card-title {
    margin: 0;
    font-size: var(--type-ramp-plus-1-font-size, 16px);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.chart-card-subtitle {
    font-size: 12px;
    color: var(--neutral-foreground-rest);
    opacity: 0.6;
    white-space: nowrap;
}

/* ── Orders by status bar chart ─────────────────────────────────────────── */

.chart-card {
    /* shares .table-card's surface styling (radius, background, border via
       !important, padding: 0, height: auto) — only overflow needs repeating
       since .table-card is a separate class on the same element */
    overflow: hidden;
}

.chart-panel {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 28px 32px 24px;
    min-height: 260px;
}

.chart-bar-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.chart-bar-track {
    position: relative;
    width: 100%;
    max-width: 64px;
    height: 180px;
    background: color-mix(in srgb, var(--neutral-foreground-rest) 5%, transparent);
    border-radius: 6px;
}

.chart-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bar-height);
    background: var(--bar-color);
    border-radius: 6px 6px 0 0;
    box-shadow: 0 0 14px color-mix(in srgb, var(--bar-color) 30%, transparent);
    transform-origin: bottom;
    animation: bar-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chart-bar-value {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--bar-height) + 6px);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.chart-bar-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
    opacity: 0.6;
    text-align: center;
}

.chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    font-size: 13px;
    color: var(--neutral-foreground-rest);
    opacity: 0.5;
}

/* Per-chart bar colors, scoped per chart panel so the two dashboard charts
   don't fight over nth-child color assignments. Orders uses the dark-theme
   accent ramp + Aspire status colors, speaking the same color language as
   the status dots used elsewhere. Revenue uses teal/coral for credited and
   reversed, and the app's purple accent for the key net figure. */
.chart-panel--orders .chart-bar-column:nth-child(1) { --bar-color: var(--accent-gold); }             /* pending */
.chart-panel--orders .chart-bar-column:nth-child(2) { --bar-color: var(--status-success); }    /* completed */
.chart-panel--orders .chart-bar-column:nth-child(3) { --bar-color: var(--status-error); }      /* failed */
.chart-panel--orders .chart-bar-column:nth-child(4) { --bar-color: var(--accent-royal-blue); }        /* refunded */
.chart-panel--orders .chart-bar-column:nth-child(5) { --bar-color: var(--accent-orchid); }            /* partially refunded */

.chart-panel--revenue .chart-bar-column:nth-child(1) { --bar-color: var(--accent-teal); }             /* credited */
.chart-panel--revenue .chart-bar-column:nth-child(2) { --bar-color: var(--accent-coral); }            /* reversed */

/* Net Gold Credited is the key number — accent bar, accent value, stronger glow */
.chart-panel--revenue .chart-bar-column.chart-bar-column--net { --bar-color: var(--accent-fill-rest); }
.chart-panel--revenue .chart-bar-column--net .chart-bar-value { color: var(--accent-foreground-rest); }
.chart-panel--revenue .chart-bar-column--net .chart-bar {
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent-fill-rest) 45%, transparent);
}

@keyframes bar-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

.chart-panel--orders .chart-bar-column:nth-child(1) .chart-bar { animation-delay: 0.10s; }
.chart-panel--orders .chart-bar-column:nth-child(2) .chart-bar { animation-delay: 0.16s; }
.chart-panel--orders .chart-bar-column:nth-child(3) .chart-bar { animation-delay: 0.22s; }
.chart-panel--orders .chart-bar-column:nth-child(4) .chart-bar { animation-delay: 0.28s; }
.chart-panel--orders .chart-bar-column:nth-child(5) .chart-bar { animation-delay: 0.34s; }

.chart-panel--revenue .chart-bar-column:nth-child(1) .chart-bar { animation-delay: 0.10s; }
.chart-panel--revenue .chart-bar-column:nth-child(2) .chart-bar { animation-delay: 0.16s; }
.chart-panel--revenue .chart-bar-column:nth-child(3) .chart-bar { animation-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
    .chart-bar {
        animation: none;
    }
}

@media (max-width: 768px) {
    .chart-panel {
        padding: 20px 16px 16px;
        gap: 8px;
        min-height: 220px;
    }

    .chart-bar-track {
        height: 150px;
        max-width: 44px;
    }
}

/* ── Status colors ──────────────────────────────────────────────────────── */

.status-success {
    color: var(--status-success);
}

.status-error {
    color: var(--status-error);
}

.status-warning {
    color: var(--status-warning);
}

.status-neutral {
    color: var(--neutral-foreground-rest);
    opacity: 0.5;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    flex: none;
}

.status-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ── Badges & monospace ─────────────────────────────────────────────────── */

.role-pill {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    background-color: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
    opacity: 0.85;
    font-size: 12px;
    line-height: 18px;
}

.role-pill-accent {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent);
    color: var(--accent-foreground-rest);
    opacity: 1;
}

.mono {
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 12px;
}

/* ── Admin edit/detail surfaces ─────────────────────────────────────────── */

.admin-scroll-main {
    grid-area: main;
    overflow: auto;
}

.route-loading {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.admin-page-content,
.admin-detail-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px var(--layout-right-padding) 24px var(--layout-left-padding);
}

.detail-heading,
.card-heading,
.form-actions,
.admin-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.detail-heading h1,
.admin-card h2 {
    margin: 4px 0;
}

.admin-card {
    height: auto !important;
    padding: 20px !important;
    border: 1px solid var(--neutral-stroke-rest) !important;
    border-radius: 6px !important;
    background: var(--neutral-layer-1) !important;
}

.admin-purpose-card {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
    gap: 8px 16px;
}

.admin-purpose-card h2,
.admin-purpose-card p {
    grid-column: 1 / -1;
}

.compact-purpose {
    display: block !important;
}

.compact-purpose label,
.compact-purpose input {
    width: 100%;
}

.admin-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 16px 0;
}

.admin-form-grid label,
.compact-purpose label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea,
.compact-purpose input {
    box-sizing: border-box;
    width: 100%;
    min-height: 34px;
    padding: 6px 9px;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    font: inherit;
}

.admin-form-grid input:focus,
.admin-form-grid select:focus,
.admin-form-grid textarea:focus,
.compact-purpose input:focus {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

.admin-form-grid textarea {
    min-height: 90px;
    resize: vertical;
}

.admin-form-grid .span-two {
    grid-column: 1 / -1;
}

.admin-form-grid .checkbox-label {
    flex-direction: row;
    align-items: center;
    align-self: end;
}

.admin-form-grid .checkbox-label input {
    width: auto;
    min-height: 0;
}

.inline-editor {
    margin: 16px var(--layout-right-padding) 16px var(--layout-left-padding);
}

.form-actions {
    justify-content: flex-start;
}

.admin-list-row {
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.admin-list-row:last-child {
    border-bottom: 0;
}

.admin-list-row small,
.empty-state,
.owned-items,
.admin-card p {
    color: var(--neutral-foreground-hint);
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
    gap: 0;
    margin: 12px 0 0;
}

.detail-grid dt,
.detail-grid dd {
    margin: 0;
    padding: 10px 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    overflow-wrap: anywhere;
}

.detail-grid dt {
    font-weight: 600;
}

.danger-card {
    border-color: color-mix(in srgb, var(--status-warning) 45%, var(--neutral-stroke-rest)) !important;
}

@media (max-width: 768px) {
    .admin-two-column,
    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-form-grid .span-two {
        grid-column: auto;
    }

    .admin-purpose-card {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-grid dt {
        padding-bottom: 0;
        border-bottom: 0;
    }
}

/* ── Fluent control focus treatment (Aspire 13.5 port) ──────────────────── */
/*
    Fluent/FAST text inputs draw their focus affordance as an accent bar on the
    host's ::after pseudo-element. Replace with a modern box-consistent focus ring:
    1. --focus-stroke-width: 0 collapses the underline bar.
    2. An accent outline on ::part(root) provides the replacement ring.
    Also override the resting background-image (a gradient that draws only a
    bottom border) with a flat fill + uniform 1px border on all four sides.
*/
fluent-text-field,
fluent-search,
fluent-number-field,
fluent-text-area {
    --focus-stroke-width: 0;
}

fluent-text-field::part(root),
fluent-search::part(root),
fluent-number-field::part(root),
fluent-text-area::part(control) {
    background: var(--neutral-layer-1) !important;
    border: 1px solid var(--neutral-stroke-rest) !important;
}

fluent-text-field:focus-within::part(root),
fluent-search:focus-within::part(root),
fluent-number-field:focus-within::part(root),
fluent-text-area:focus-within::part(control) {
    outline: 2px solid var(--accent-fill-rest);
}

fluent-select::part(control),
fluent-combobox::part(control) {
    background: var(--neutral-layer-1) !important;
    border: 1px solid var(--neutral-stroke-rest) !important;
}

fluent-select,
fluent-combobox {
    --focus-stroke-width: 0;
}

fluent-select:focus-within::part(control),
fluent-combobox:focus-within::part(control) {
    outline: 2px solid var(--accent-fill-rest);
}

/* ── Login (real Aspire login-card port) ────────────────────────────────── */

.login-shell {
    background-color: var(--neutral-layer-4);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

[data-theme="dark"] .login-shell {
    background-color: var(--neutral-layer-3);
}

.login-form {
    --error: #FF8181;
    background-color: var(--neutral-layer-1);
    padding: calc(var(--design-unit) * 5px);
    border-radius: calc(var(--design-unit) * 2.5px);
    display: grid;
    grid-column-gap: calc(var(--design-unit) * 5px);
    grid-template-columns: auto 25em;
    grid-template-rows: auto;
    grid-template-areas:
        "logo entry";
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
}

.login-logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-logo fluent-icon {
    width: 96px;
    height: 96px;
}

.login-entry-container {
    grid-area: entry;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--design-unit) * 1px);
}

.login-entry-container fluent-text-field {
    width: 100%;
    margin-bottom: 8px;
}

.login-entry-container fluent-text-field::part(root) {
    border-color: var(--accent-fill-rest) !important;
}

.login-entry-header {
    color: var(--accent-foreground-rest);
}

.login-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 1rem;
    font-size: var(--type-ramp-plus-4-font-size, 28px);
    font-weight: 400;
    font-family: var(--body-font);
    color: inherit;
}

.login-entry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.login-entry-footer .login-error {
    color: var(--error);
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    display: flex;
    align-items: center;
    column-gap: 4px;
    margin: 0;
}

.login-entry-footer fluent-button {
    margin-left: auto;
}

@media (max-width: 768px) {
    .login-form {
        grid-template-columns: 1fr;
        grid-template-rows: 5em auto;
        grid-template-areas:
            "logo"
            "entry";
    }
}

/* ── Misc ───────────────────────────────────────────────────────────────── */

h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

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