/* Base styles on the design tokens (css/tokens.css), following the apple-design skill. Hand-built components;
   Syncfusion only where master plan 6.2 says. Shared patterns (form controls, tabs, cards, tables) are styled once
   here, so the scoped .razor.css files only keep layout. */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-body);
    color: var(--color-text);
    background: var(--canvas);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

h1, h2, h3 {
    letter-spacing: var(--tracking-title);
    line-height: var(--leading-title);
    font-weight: 600;
}

h1 {
    margin: 0 0 var(--space-4);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
}

h1:focus {
    outline: none;
}

a {
    color: var(--color-primary);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--color-primary-hover);
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

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

.spacer {
    flex: 1;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Buttons: they answer the press at once (skill section 1), on transform only. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: var(--color-text);
    font: inherit;
    font-weight: 550;
    letter-spacing: var(--tracking-small);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--press-duration) ease-out;
}

.btn:hover {
    background: var(--surface-sunken);
    border-color: var(--line-control);
    color: var(--color-text);
}

.btn:active:not(:disabled) {
    transform: scale(var(--press-scale));
}

.btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary-hover);
    box-shadow: inset 0 1px 0 var(--edge-light), 0 1px 2px var(--primary-shadow);
    color: var(--color-on-primary);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-on-primary);
}

.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-on-primary);
}

.btn-danger:hover {
    background: color-mix(in srgb, var(--color-danger) 85%, black);
    border-color: color-mix(in srgb, var(--color-danger) 85%, black);
    color: var(--color-on-primary);
}

/* A destructive button repeated on every row would shout; inside a grid or a row table it is outlined and fills on hover. */
.e-grid .btn-danger, .wizard-table .btn-danger {
    background: transparent;
    color: var(--color-danger);
}

.e-grid .btn-danger:hover, .wizard-table .btn-danger:hover {
    background: var(--color-danger);
    color: var(--color-on-primary);
}

.btn-link {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--color-primary);
    padding-inline: var(--space-2);
}

.btn-link:hover {
    background: transparent;
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Forms. Plain controls are styled by element so every page gets the same edge, radius and focus ring; the
   :where() keeps the specificity at zero for the few layout tweaks in scoped CSS. Syncfusion's own inputs (e-control,
   e-input, anything inside one) follow the Syncfusion theme instead. */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.field > label,
.field > span:first-child,
.field-head > label,
.price-machines > label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-small);
}

/* The native file chooser button follows the button style. */
::file-selector-button {
    margin-right: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
}

:where(:is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="color"], .e-control, .e-input, .e-control *)) {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-control);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--color-text);
    font: inherit;
    letter-spacing: var(--tracking-body);
}

:where(:is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="color"], .e-control, .e-input, .e-control *):focus-visible) {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 28%, transparent);
}

:where(:is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="color"], .e-control, .e-input, .e-control *)[readonly]) {
    background: var(--surface-sunken);
}

:where(input, select, textarea):disabled {
    opacity: 0.6;
    cursor: default;
}

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--color-primary);
}

.check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

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

.form-error {
    background: var(--color-danger-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.logout-form {
    display: inline;
    margin: 0;
}

/* Sign-in pages (AuthLayout) */
.auth-layout {
    background: radial-gradient(ellipse 60rem 28rem at 50% -8%, var(--accent-soft), transparent), var(--canvas);
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.auth-card {
    width: min(100%, 24rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: var(--space-6);
    animation: var(--anim-enter);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.auth-brand h1 {
    margin: 0;
}

.auth-brand .brand-mark {
    width: 2.5rem;
    height: 2.5rem;
}

.login-form .btn-primary {
    width: 100%;
    justify-content: center;
}

.access-denied-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* Shell (P1-03, redesigned): a dark ink sidebar for structure and wayfinding, a light canvas for work. The sidebar
   is the heaviest layer (skill section 12), content sits on white cards with a hairline and a soft shadow. */
.app-main {
    padding: var(--space-5);
}

.shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--header-height) 1fr;
    grid-template-areas: "nav header" "nav main";
    min-height: 100vh;
}

.shell-header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
}

/* Desktop only, one surface per screen (skill rule 0.2): the header lets the page show through a little. */
@media (pointer: fine) {
    .shell-header {
        background: color-mix(in srgb, var(--canvas) 80%, transparent);
        backdrop-filter: blur(16px) saturate(160%);
    }
}

.shell-nav {
    grid-area: nav;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-3) var(--space-4);
    background: var(--sidebar);
    color: var(--nav-text);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.shell-main {
    grid-area: main;
    padding: var(--space-6) clamp(1rem, 3vw, 2.5rem) calc(var(--space-6) * 1.5);
    min-width: 0;
}

.brand, .header-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--nav-text-strong);
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: var(--tracking-title);
    text-decoration: none;
}

.brand {
    flex: none;
    height: var(--header-height);
    margin-bottom: var(--space-2);
    padding: 0 var(--space-2);
}

.brand:hover, .brand:focus-visible {
    color: var(--nav-text-strong);
}

.header-brand {
    display: none;
    color: var(--color-text);
}

.header-brand:hover {
    color: var(--color-text);
}

.brand-mark {
    flex: none;
    border-radius: 9px;
    box-shadow: 0 2px 8px var(--brand-glow);
}

.btn-icon {
    padding: var(--space-2);
    line-height: 0;
}

.nav-toggle {
    display: none;
}

.nav-scrim {
    display: none;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list > li + li {
    margin-top: 2px;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--nav-text);
    font-weight: 500;
    text-decoration: none;
    transition: transform var(--press-duration) ease-out;
    -webkit-tap-highlight-color: transparent;
}

.nav-link:hover {
    background: var(--nav-hover);
    color: var(--nav-text-strong);
}

.nav-link:active:not(.disabled) {
    transform: scale(0.985);
}

.nav-link.active {
    background: var(--nav-active);
    color: var(--nav-text-strong);
    font-weight: 600;
}

/* The current page is marked by a tab on the sidebar's edge as well as by tone and weight (not colour alone). */
.nav-link.active::before {
    content: "";
    position: absolute;
    left: calc(var(--space-3) * -1);
    top: 50%;
    width: 3px;
    height: 1.25rem;
    margin-top: -0.625rem;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.nav-icon {
    flex: none;
    opacity: 0.85;
}

.nav-link.active .nav-icon {
    color: var(--accent);
    opacity: 1;
}

.nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-link.disabled {
    color: var(--nav-text-dim);
    cursor: default;
}

.nav-link.disabled:hover {
    background: none;
    color: var(--nav-text-dim);
}

.nav-badge {
    min-width: 1.5rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

/* "More" is a labelled section that folds away. */
.nav-more {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--nav-line);
}

.nav-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--nav-text-label);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.nav-more > summary::-webkit-details-marker {
    display: none;
}

.nav-more > summary::after {
    content: "\203A";
    font-size: 1.125rem;
    line-height: 1;
    transition: transform var(--press-duration) ease-out;
}

.nav-more[open] > summary::after {
    transform: rotate(90deg);
}

.nav-more > summary:hover {
    color: var(--nav-text-strong);
}

.nav-more .nav-list {
    margin-top: var(--space-2);
}

.sector-switcher {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.sector-switcher select {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--surface);
    color: var(--color-text);
    font-weight: 500;
    box-shadow: var(--shadow-1);
}

.btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--color-text-muted);
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--surface);
    border-color: var(--line);
    color: var(--color-text);
}

.user-menu {
    position: relative;
}

.user-menu > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.1875rem var(--space-2) 0.1875rem 0.1875rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    list-style: none;
    cursor: pointer;
    transition: transform var(--press-duration) ease-out;
}

.user-menu > summary::-webkit-details-marker {
    display: none;
}

.user-menu > summary:hover,
.user-menu[open] > summary {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-1);
}

.user-menu > summary:active {
    transform: scale(var(--press-scale));
}

.user-menu .chevron {
    color: var(--color-text-muted);
}

.user-menu[open] .chevron {
    transform: rotate(180deg);
}

.avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: var(--tracking-small);
    box-shadow: inset 0 0 0 1px var(--edge-light);
}

.user-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* The menu grows out of its trigger: it is anchored at the top right, under the summary. */
.user-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    z-index: var(--z-menu);
    transform-origin: top right;
    animation: var(--anim-enter);
}

.language-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}

.user-menu-label {
    width: 100%;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.language-form .active {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
}

/* Narrow screens: the navigation becomes a drawer behind the menu button. It comes in from the left and a scrim
   dims the page behind it; tapping the scrim closes it. */
@media (max-width: 900px) {
    .shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "header" "main";
    }

    .nav-toggle {
        display: inline-flex;
    }

    .header-brand {
        display: flex;
    }

    .shell-nav {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        height: auto;
        width: min(84vw, var(--sidebar-width));
        z-index: calc(var(--z-sticky) + 5);
        box-shadow: var(--shadow-3);
    }

    .shell.nav-open .shell-nav {
        display: flex;
        animation: var(--anim-enter-left);
    }

    .nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-sticky) + 4);
        background: var(--color-overlay);
        animation: var(--anim-enter-fade);
    }

    .sector-switcher > span, .refresh span, .user-name, .user-menu .chevron {
        display: none;
    }
}

/* A styled scrollbar only for a mouse (skill rule 0.6). */
@media (pointer: fine) {
    .shell-nav {
        scrollbar-width: thin;
        scrollbar-color: var(--nav-scrollbar) transparent;
    }
}

/* Touch screens: every control reaches the minimum hit size (skill section 10). */
@media (pointer: coarse) {
    .btn, .nav-link, .nav-more > summary, .user-menu > summary,
    .client-tab, .pm-tab, .settings-tab, .parts-tab, .vesuvio-tab {
        min-height: var(--hit-min);
    }

    :where(:is(input, select):not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], .e-control, .e-input, .e-control *)) {
        min-height: var(--hit-min);
    }
}

/* Shared components (P1-04): modal, toasts, progress overlay, error panel. A modal task gets a scrim; the dialog
   arrives with opacity and scale in 200 ms and is replaced at once on close (a closing animation would have to hold
   the component in the tree). Reduced motion turns the arrival into a cross-fade (tokens.css). */
.modal-backdrop, .progress-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: var(--color-overlay);
    animation: var(--anim-enter-fade);
}

.modal {
    display: flex;
    flex-direction: column;
    width: min(100%, 28rem);
    max-height: calc(100dvh - 2 * var(--space-4));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: var(--space-5);
    animation: var(--anim-enter);
}

.modal-title {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-lg);
}

/* A dialog taller than the window scrolls inside, so its buttons stay reachable. The negative margin and equal
   padding keep focus rings at the edge from being clipped. */
.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    margin: -0.25rem;
    padding: 0.25rem;
    overflow-y: auto;
}

/* Dialogs that host Syncfusion controls keep the old behaviour: their popups may open inside the dialog and must not be clipped. */
.modal-body:has(.e-control) {
    margin: 0;
    padding: 0;
    overflow-y: visible;
}

.modal-message {
    margin: 0 0 var(--space-4);
    white-space: pre-line;
}

.modal-buttons {
    display: flex;
    flex: none;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.modal-body > .modal-message {
    margin-bottom: 0;
}

.toast-host {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(calc(100vw - 2 * var(--space-4)), 24rem);
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    animation: var(--anim-enter-right);
}

/* Status is colour, a glyph and the text, never colour alone. */
.toast-success::before,
.toast-error::before {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    color: var(--color-on-primary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

.toast-success {
    border-left-color: var(--color-success);
    background: var(--color-success-bg);
}

.toast-success::before {
    content: "\2713";
    background: var(--color-success);
}

.toast-error {
    border-left-color: var(--color-danger);
    background: var(--color-danger-bg);
}

.toast-error::before {
    content: "!";
    background: var(--color-danger);
}

.toast-text {
    flex: 1;
}

.btn-close {
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: var(--font-size-lg);
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: transform var(--press-duration) ease-out;
}

.btn-close:hover {
    color: var(--color-text);
    background: var(--surface-sunken);
}

.btn-close:active {
    transform: scale(var(--press-scale));
}

.progress-panel {
    min-width: 16rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    animation: var(--anim-enter);
}

.progress-panel p {
    margin: 0;
}

.progress-panel progress {
    width: 100%;
    accent-color: var(--color-primary);
}

/* The only endless animation, allowed because it is a loading indicator: ProgressOverlay removes it from the DOM
   as soon as the work ends (skill section 0.3). */
.spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--line);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.error-panel {
    max-width: 40rem;
}

.error-reference {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}

/* Help panel (P1-06): a side sheet that comes in from the right, over a scrim. */
.help-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--color-overlay);
    animation: var(--anim-enter-fade);
}

.help-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    width: min(100vw, 44rem);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    animation: var(--anim-enter-right);
}

.help-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
}

.help-panel-header h2 {
    margin: 0;
    font-size: var(--font-size-lg);
}

.help-panel-body {
    flex: 1;
    min-height: 0;
    padding: var(--space-3);
}

.help-content {
    width: 100%;
    height: 100%;
    border: none;
}

/* Shared patterns used by several pages. Tabs are one underlined control; cards one hairline surface; plain data
   tables one header style. Pages add only their own layout. */
.client-tabs, .pm-tabs, .settings-tabs, .parts-tabs, .vesuvio-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-bottom: 1px solid var(--line);
}

.client-tab, .pm-tab, .settings-tab, .parts-tab, .vesuvio-tab {
    margin-bottom: -1px;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-weight: 500;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--press-duration) ease-out;
}

.client-tab:hover, .pm-tab:hover, .settings-tab:hover, .parts-tab:hover, .vesuvio-tab:hover {
    background: var(--surface-sunken);
    color: var(--color-text);
}

.client-tab:active, .pm-tab:active, .settings-tab:active, .parts-tab:active, .vesuvio-tab:active {
    transform: scale(var(--press-scale));
}

.client-tab-active, .pm-tab.active, .settings-tab.active, .parts-tab.active, .vesuvio-tab.active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

.card, .list-editor, .pm-card, .machine-panel, .machine-combos, .costs, .history, .hierarchy section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.card {
    padding: var(--space-5);
}

/* Every page opens with this header: the title (and one line saying what the page is for) on the left, the primary
   action and secondary tools on the right. Wayfinding: where am I, what can I do here. */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
}

.page-header h1 {
    margin: 0;
}

.page-sub {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* A toolbar above a list: search first, filters next, actions at the end. */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.machine-table, .costs-table, .language-table, .pick, .wizard-table, .finance-banks {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-dense);
}

.machine-table th, .costs-table th, .language-table th, .pick th, .wizard-table th, .finance-banks thead th {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunken);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.machine-table td, .costs-table td, .language-table td, .pick td, .wizard-table td, .finance-banks td, .finance-banks tbody th, .finance-banks tfoot th {
    padding: var(--space-2) var(--space-3);
}

.machine-table tbody tr:hover, .costs-table tbody tr:hover, .language-table tbody tr:hover, .pick tbody tr:hover, .wizard-table tbody tr:hover, .finance-banks tbody tr:hover {
    background: var(--accent-soft);
}

.machine-table th, .machine-table td,
.costs-table th, .costs-table td,
.language-table th, .language-table td,
.pick th, .pick td,
.wizard-table th, .wizard-table td,
.finance-banks th, .finance-banks td {
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* To-do list (P2-09) */
.todo-new {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.todo-new .field {
    flex: 1 1 24rem;
    margin-bottom: 0;
}

.todo-text {
    white-space: pre-wrap;
}

.todo-finished {
    width: 1.1rem;
    height: 1.1rem;
}

.modal:has(.todo-item-dialog) {
    width: min(100%, 44rem);
}

.todo-item-dialog textarea {
    display: block;
    width: 100%;
    resize: vertical;
}

.todo-item-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

/* Settings lists (P2-04) */
.list-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    gap: var(--space-4);
}

.list-editor {
    min-width: 0;
    padding: var(--space-3);
}

.list-editor-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.list-editor-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
}

.list-editor-header .spacer {
    flex: 1;
}

.form-hint {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* Users (P2-07) */
.users-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.users-search {
    min-width: 14rem;
}

.user-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    column-gap: var(--space-4);
    max-width: 60rem;
    margin-bottom: var(--space-4);
}

.user-flags {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.user-flags .check {
    margin-bottom: 0;
}

.user-hint {
    grid-column: 1 / -1;
    margin: 0 0 var(--space-3);
}

.user-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.user-add {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.user-add select {
    flex: 1 1 12rem;
    min-width: 0;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
}

.chip-remove {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    padding: var(--space-1);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--press-duration) ease-out;
}

.chip-remove:active {
    transform: scale(var(--press-scale));
}

.chip-remove:hover {
    color: var(--color-danger);
}

/* User activity (P2-08) */
.user-activity-wrap {
    margin-top: var(--space-4);
}

.activity-range {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

.activity-date {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.log-changes {
    white-space: pre-wrap;
}

/* Clients (P3-01) */
.clients-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.clients-search {
    min-width: min(24rem, 100%);
}

.clients-language {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-1) var(--space-2) var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.clients-language legend {
    padding: 0 var(--space-1);
    font-size: var(--font-size-sm);
    letter-spacing: var(--tracking-small);
    color: var(--color-text-muted);
}

.clients-total {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-left: auto;
    font-size: var(--font-size-lg);
}

.clients-note {
    margin: 0 0 var(--space-3);
}

.client-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    column-gap: var(--space-4);
    max-width: 64rem;
    margin-bottom: var(--space-4);
}

.client-comments {
    grid-column: 1 / -1;
}

.client-comments textarea[readonly] {
    background: var(--surface-sunken);
}

.client-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.client-tabs {
    margin-top: var(--space-5);
}

.client-tabpanel {
    padding-top: var(--space-4);
}

.client-tab-actions {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.modal:has(.client-merge) {
    width: min(70rem, calc(100vw - 2 * var(--space-4)));
}

.client-merge {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.client-merge-destination {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.client-merge-destination h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-base);
}

.client-merge-destination dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
}

.client-merge-destination dt {
    color: var(--color-text-muted);
}

.client-merge-destination dd {
    margin: 0;
}

.client-check-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.client-check-status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 1.5rem;
    margin-bottom: var(--space-3);
}

.client-check-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: 0 0 var(--space-4);
}

.client-check-stats div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.client-check-stats dt {
    color: var(--color-text-muted);
}

.client-check-stats dd {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.modal-help {
    margin-right: auto;
}

/* Part management (P8-04, P8-05) */
.pm-tabs {
    margin-bottom: var(--space-4);
}

.pm-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    gap: var(--space-4);
    align-items: start;
}

.pm-card {
    min-width: 0;
    padding: var(--space-4);
}

.pm-card h2, .pm-card h3 {
    margin: 0;
    font-size: var(--font-size-lg);
}

.pm-card h3 {
    font-size: var(--font-size-base);
}

.pm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-2);
}

.pm-card > h2:first-child, .pm-card > .pm-card-header:first-child {
    margin-top: 0;
}

.pm-card dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-2) 0 0;
}

.pm-card dt {
    color: var(--color-text-muted);
}

.pm-card dd {
    margin: 0;
}

.pm-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    column-gap: var(--space-3);
    margin-top: var(--space-3);
}

.pm-form-actions {
    grid-column: 1 / -1;
    margin-bottom: var(--space-2);
}

.modal:has(.parts-assign) {
    width: min(80rem, calc(100vw - 2 * var(--space-4)));
}

.parts-assign {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.parts-assign-grids {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    margin-top: var(--space-3);
}

.parts-assign-grids h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-base);
}

.parts-assign-add {
    align-self: center;
}

.modal:has(.parts-dialog) {
    width: min(48rem, calc(100vw - 2 * var(--space-4)));
}

/* The title row of a detail page: a way back beside the name of what is open. */
.page-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.page-title h1 {
    margin: 0;
}

/* Wizards (quotation P5-03, case P6-03): the steps as a row of numbered pills (where am I), one panel for the current
   step, the actions under it. Moved from the quotation wizard's scoped CSS so every wizard looks the same. */
.wizard-steps ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--color-text-muted);
}

.wizard-step-number {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--surface-sunken);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.wizard-step.is-current {
    border-color: var(--color-primary);
    color: var(--color-text);
    font-weight: 600;
}

.wizard-step.is-current .wizard-step-number {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.wizard-step.is-done {
    color: var(--color-text);
}

.wizard-step.is-done .wizard-step-number {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.wizard-step.is-skipped {
    border-style: dashed;
}

.wizard-step-skipped {
    margin-left: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-muted);
}

.wizard-panel {
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.wizard-panel h2 {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-lg);
}

.wizard-group h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-base);
}

.wizard-actions,
.wizard-generate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.wizard-actions .btn,
.wizard-generate .btn {
    min-width: 7rem;
    justify-content: center;
}

.wizard-generate p {
    margin: 0;
}

.wizard-search input {
    min-width: min(18rem, 100%);
}

.wizard-chosen {
    margin: var(--space-3) 0 0;
    font-weight: 600;
}

.wizard-client {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-3);
}

.wizard-client dt {
    color: var(--color-text-muted);
}

.wizard-client dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* A search above a wizard's list keeps a readable width instead of running across the panel. */
.wizard-search {
    max-width: 28rem;
}

/* A side note inside a wizard panel (the client a case is for): a tone step, not a second card. */
.wizard-aside {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.wizard-aside h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-base);
}

/* A chip that toggles a filter (aria-pressed): its on state is outlined in the primary colour and heavier, not colour alone. */
.chip[aria-pressed="true"] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

/* Cases (P6-02): an overdue reminder tints its row and labels the Reminder cell, so the state is not colour alone. */
.case-grid .e-row.case-overdue td.e-rowcell {
    background: var(--color-warning-bg);
}

.case-overdue-label {
    margin-left: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-warning);
}

/* Detail pages (quotation P5-07, case P6-04): what the record is on the left, what to do with it on the right; one column
   under 1000px. Moved from the quotation page's scoped CSS so every detail page has the same rhythm. */
.details-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.details-main,
.details-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

@media (max-width: 1000px) {
    .details-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.details-grid h2 {
    margin: 0 0 var(--space-3);
}

.details-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.details-list dt {
    color: var(--color-text-muted);
}

.details-list dt,
.details-list dd {
    margin: 0;
}

@media (max-width: 480px) {
    .details-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .details-list dd {
        margin-bottom: var(--space-2);
    }
}

.details-file {
    overflow-wrap: anywhere;
}

/* A table inside a card scrolls inside it on a phone, never the page. */
.details-table-wrap {
    overflow-x: auto;
    margin-bottom: var(--space-3);
}

.details-nowrap {
    white-space: nowrap;
}

.details-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.details-hint {
    flex: 1 1 14rem;
    margin: 0;
}

.details-list + .details-row {
    margin-top: var(--space-3);
}

/* On a phone the back button, the title and the status chips wrap as whole items. */
.page-title {
    flex-wrap: wrap;
}

.page-title h1,
.page-title .chip {
    white-space: nowrap;
}

/* A card's heading with its one action on the right (Add activity, New quotation). */
.card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.card-head h2 {
    margin: 0;
}

/* Status reads by colour as well as by its word (DESIGN-SYSTEM.md section 4). */
.chip.status-ok {
    border-color: transparent;
    background: var(--color-success-bg);
}

.chip.status-pending {
    border-color: transparent;
    background: var(--color-warning-bg);
}

.chip.status-closed {
    border-color: transparent;
    background: var(--surface-sunken);
    color: var(--color-text-muted);
}

/* An activity feed (case activity, P6-04): who and when on one quiet line, the text under it, a hairline between entries. */
.feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feed-item {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line);
}

.feed-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.feed-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.feed-meta strong {
    color: var(--color-text);
    font-weight: 600;
}

.feed-text {
    margin: var(--space-1) 0 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Case payments (P6-05): a paid payment is tinted and labelled (gridView1_RowStyle), so the state is not colour alone; the
   expected total turns red and the missing amount reads as an error chip when the payments do not cover the case amount. */
.case-payments-grid .e-row.payment-paid td.e-rowcell {
    background: var(--color-success-bg);
}

.payment-paid-label {
    margin-left: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-success);
}

.payment-short {
    color: var(--color-danger);
}

.chip.status-error {
    border-color: transparent;
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Finance pages (P7-02, P7-04): cards stack with the section gap, the IVA fields sit in a row under the banks, a grid scrolls
   inside its card on a phone. */
.finance-section + .finance-section {
    margin-top: var(--space-5);
}

.finance-extra {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0 var(--space-4);
    max-width: 48rem;
    margin-top: var(--space-4);
}

.finance-grid {
    overflow-x: auto;
}

.finance-sign-hint {
    margin: 0 0 var(--space-3);
}

/* Finance (P7-02): the bank table reads like a ledger (bank names in the body weight, amounts right-aligned in tabular figures, the
   all-banks row set off by a stronger rule); the three forecast figures sit in a quiet row; a negative final balance and a case
   payment without quotation read as errors by colour and by their text. */
.finance-banks {
    max-width: 52rem;
}

.finance-banks tbody th {
    font-weight: 600;
}

.finance-banks .finance-num {
    text-align: right;
    white-space: nowrap;
}

.finance-banks tfoot th, .finance-banks tfoot td {
    border-top: 1px solid var(--line-strong);
    border-bottom: 0;
    font-weight: 600;
}

.finance-amount {
    width: 8.5rem;
    max-width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.finance-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-3) var(--space-4);
    max-width: 40rem;
    margin: 0 0 var(--space-4);
}

.finance-figures dt {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.finance-figures dd {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: var(--tracking-title);
    font-variant-numeric: tabular-nums;
}

/* The forecast grid's headers wrap between words, never inside one (Syncfusion's wrap breaks anywhere). */
.finance-grid .e-headercell .e-headertext {
    word-break: normal;
    overflow-wrap: normal;
}

/* The forecast grid grows with its rows up to a height, then scrolls inside itself under its header. */
.finance-grid .e-gridcontent .e-content {
    max-height: 36rem;
    overflow-y: auto;
}

.finance-negative {
    color: var(--color-danger);
}

.finance-missing {
    color: var(--color-danger);
    font-weight: 600;
}

/* Finance (P7-03): the invoice line of the payment dialog; the invoice totals read as right-aligned figures. */
.finance-pay-line {
    margin: 0 0 var(--space-4);
    font-variant-numeric: tabular-nums;
}

.finance-invoice-totals dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A status that needs fixing: red tint plus its word (DESIGN-SYSTEM.md section 4). */
.chip.status-error {
    border-color: transparent;
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* File check (P10-06): section titles as quiet labels, one card per folder with its figures, the path in mono, wrapped so its end stays readable. */
.file-check-section > h2 {
    margin: 0 0 var(--space-3);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.file-area h3 {
    margin: 0;
    font-size: var(--font-size-lg);
}

.file-area-root {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/* A quiet line under a field or inside a card: context, not a warning. */
.file-check-note {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.file-area-facts dt {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.file-area-facts dd {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: var(--tracking-title);
    font-variant-numeric: tabular-nums;
}

.file-area-newest {
    font-size: var(--font-size-sm);
}

.file-area-newest-name {
    overflow: hidden;
    max-width: 100%;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}