:root {
    color-scheme: light;
    --color-bg: #f4f6fa;
    --color-surface: #ffffff;
    --color-surface-soft: #f8f9fc;
    --color-border: #e0e5ef;
    --color-border-strong: #cbd3e1;
    --color-text: #18223a;
    --color-text-soft: #66708a;
    --color-text-muted: #939caf;
    --color-primary: #173f9f;
    --color-primary-strong: #0e2d78;
    --color-primary-soft: #edf2ff;
    --color-primary-border: #c7d4f0;
    --color-primary-fill: #dce6fb;
    --color-accent: #f5a000;
    --color-accent-strong: #d98900;
    --color-accent-soft: #fff6e4;
    --color-navy: #0d1833;
    --color-success: #287a54;
    --color-sidebar-text: #aeb9d0;
    --color-sidebar-muted: #7483a5;
    --color-nav-active: rgba(41, 83, 184, 0.2);
    --color-nav-active-border: rgba(95, 130, 220, 0.3);
    --color-brand-main: #5f82dc;
    --color-brand-accent: #f5a000;
    --color-hero-start: #0d1833;
    --color-hero-end: #173f9f;
    --color-hero-glow: rgba(245, 160, 0, 0.2);
    --color-hero-copy: #c7d3ee;
    --color-hero-eyebrow: #ffb82e;
    --color-package-start: #ffb82e;
    --color-package-end: #f5a000;
    --color-package-border: #ffc85d;
    --color-page-glow: rgba(23, 63, 159, 0.09);
    --color-danger: #b42318;
    --shadow-panel: 0 18px 50px rgba(15, 23, 42, 0.06);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
}

html[data-theme="sage"] {
    --color-bg: #f3f1eb;
    --color-surface: #fffdf9;
    --color-surface-soft: #f8f7f2;
    --color-border: #dedfd7;
    --color-border-strong: #c9ccc2;
    --color-text: #20251f;
    --color-text-soft: #62695f;
    --color-text-muted: #92998e;
    --color-primary: #60785a;
    --color-primary-strong: #42563e;
    --color-primary-soft: #edf2e9;
    --color-primary-border: #c9d5c4;
    --color-primary-fill: #dfe8db;
    --color-accent: #d98900;
    --color-accent-strong: #b56f00;
    --color-accent-soft: #fff5df;
    --color-navy: #252a24;
    --color-success: #47704b;
    --color-sidebar-text: #c1c8bd;
    --color-sidebar-muted: #899184;
    --color-nav-active: rgba(211, 199, 163, 0.12);
    --color-nav-active-border: rgba(211, 199, 163, 0.22);
    --color-brand-main: #8ca084;
    --color-brand-accent: #d8a02f;
    --color-hero-start: #252a24;
    --color-hero-end: #485144;
    --color-hero-glow: rgba(211, 199, 163, 0.2);
    --color-hero-copy: #c1c8bd;
    --color-hero-eyebrow: #d8cba8;
    --color-package-start: #8ca084;
    --color-package-end: #60785a;
    --color-package-border: #aebfa8;
    --color-page-glow: rgba(96, 120, 90, 0.1);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html,
body {
    color: var(--color-text);
    font-family: "Segoe UI Variable Text", "Segoe UI", Inter, ui-sans-serif, sans-serif;
    margin: 0;
    min-height: 100%;
}

body {
    background:
        radial-gradient(circle at 88% -10%, var(--color-page-glow), transparent 26rem),
        var(--color-bg);
    font-size: 14px;
    line-height: 1.5;
}

body.overlay-open {
    overflow: hidden;
}

a {
    color: var(--color-accent-strong);
}

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

::selection {
    background: #ffe4ad;
    color: #694300;
}

h1:focus {
    outline: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

/* Shared application actions. Keep page-specific CSS for layout and semantic
   variants only; primary and secondary actions should look the same everywhere. */
.button {
    align-items: center;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    gap: 0.45rem;
    justify-content: center;
    min-height: 2.55rem;
    padding: 0.6rem 0.95rem;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.button-primary {
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    color: #fff;
}

.button-primary:hover:not(:disabled) {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: #fff;
}

.button-quiet,
.button-secondary {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
}

.button-quiet:hover:not(:disabled),
.button-secondary:hover:not(:disabled) {
    background: var(--color-surface-soft);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.button.compact {
    font-size: 0.69rem;
    min-height: 2rem;
    padding: 0.35rem 0.6rem;
}

/* Shared list-view navigation, based on the stock balance/movement tabs. */
.view-switcher {
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 1rem;
    max-width: 100%;
    min-width: 0;
    padding: 0.65rem 1rem 0;
}

.view-switcher button {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--color-text-soft);
    cursor: pointer;
    display: inline-flex;
    flex: 0 1 auto;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    gap: 0.5rem;
    justify-content: center;
    max-width: 100%;
    min-height: 2.8rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.45rem 0.75rem;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.view-switcher button:hover:not(:disabled) {
    background: var(--color-surface-soft);
    color: var(--color-text);
}

.view-switcher button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    outline-offset: 2px;
}

.view-switcher button.selected,
.view-switcher button.active,
.view-switcher button[aria-pressed="true"],
.view-switcher button[aria-selected="true"] {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}

.view-switcher button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.view-switcher-count {
    background: var(--color-surface-soft);
    border-radius: 999px;
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.6rem;
    padding: 0.12rem 0.4rem;
}

.view-switcher-summary {
    align-self: center;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    margin-left: auto;
    padding: 0.45rem 0;
}

/* Shared clickable KPI/status filters. This is intentionally distinct from
   the linear view-switcher above. */
.quick-filter-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    margin-bottom: 1rem;
    min-width: 0;
}

.quick-filter-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 11px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 0.4rem;
    min-height: 5rem;
    min-width: 0;
    padding: 0.9rem 1rem;
    text-align: left;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.quick-filter-card:hover:not(:disabled) {
    border-color: var(--color-primary-border);
    box-shadow: 0 10px 24px rgba(31, 36, 30, 0.07);
    transform: translateY(-1px);
}

.quick-filter-card:focus-visible,
.quick-filter-chip:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    outline-offset: 2px;
}

.quick-filter-card.selected,
.quick-filter-card[aria-pressed="true"] {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.quick-filter-card:disabled,
.quick-filter-chip:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.quick-filter-card strong {
    color: var(--color-text);
    font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif;
    font-size: 1.5rem;
    font-weight: 680;
    line-height: 1;
}

.quick-filter-card span {
    color: var(--color-text-soft);
    font-size: 0.68rem;
}

.quick-filter-card.quick-filter-risk strong {
    color: var(--color-accent-strong);
}

.quick-filter-card.quick-filter-critical strong {
    color: var(--color-danger);
}

.quick-filter-chip {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    border-radius: 999px;
    color: var(--color-accent-strong);
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    padding: 0.32rem 0.55rem;
}

.quick-filter-chip strong {
    font-size: 0.76rem;
    margin-right: 0.12rem;
}

.quick-filter-chip.quick-filter-critical {
    background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
    color: var(--color-danger);
}

.quick-filter-chip.selected,
.quick-filter-chip[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* Shared data-list surface. Pages own only their column grid and genuine
   content variants; the panel, rows, hover and mobile labels stay consistent. */
.data-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    min-width: 0;
    overflow: hidden;
}

.data-list.data-list-embedded {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
}

.data-list-switcher {
    margin-bottom: 0;
}

.data-list-toolbar {
    align-items: end;
    background: var(--color-surface-soft);
    border-bottom: 1px solid var(--color-border);
    display: grid;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
}

.data-list-body {
    min-width: 0;
    overflow-x: auto;
}

.data-list-pagination {
    border-top: 1px solid var(--color-border);
    margin-top: 0;
    padding: 0.9rem 1rem;
}

.data-list-head,
.data-list-row {
    align-items: center;
    display: grid;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
}

.data-list-head {
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-size: 0.59rem;
    font-weight: 850;
    text-transform: uppercase;
}

.data-list-row {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-soft);
    font-size: 0.7rem;
    transition: background-color 100ms ease;
}

.data-list-row:hover {
    background: var(--color-surface-soft);
}

.data-list-primary strong,
.data-list-primary small {
    display: block;
}

.data-list-primary strong {
    color: var(--color-text);
    font-size: 0.74rem;
}

.data-list-primary small {
    color: var(--color-text-soft);
    margin-top: 0.15rem;
}

@media (max-width: 720px) {
    .view-switcher {
        align-items: stretch;
    }

    .view-switcher button {
        flex: 1 1 calc(50% - 0.25rem);
        white-space: normal;
    }

    .view-switcher-summary {
        flex-basis: 100%;
        margin-left: 0;
        text-align: right;
    }

    .quick-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .data-list.data-list-embedded {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        padding: 0.55rem;
    }

    .data-list-body {
        overflow: visible;
        padding: 0.55rem;
    }

    .data-list-head {
        display: none;
    }

    .data-list-row {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        gap: 0.65rem;
        margin-bottom: 0.55rem;
        min-width: 0;
        padding: 0.8rem;
    }

    .data-list-row:last-child {
        margin-bottom: 0;
    }

    .data-list-row > * {
        min-width: 0;
    }

    .data-list-row > [data-label]::before {
        color: var(--color-text-muted);
        content: attr(data-label);
        display: block;
        font-size: 0.55rem;
        font-weight: 800;
        margin-bottom: 0.18rem;
        text-transform: uppercase;
    }
}

@media (max-width: 420px) {
    .quick-filter-grid {
        grid-template-columns: 1fr;
    }
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(245, 160, 0, 0.3);
    outline-offset: 2px;
}

.valid.modified:not([type="checkbox"]) {
    border-color: #22c55e !important;
}

.invalid {
    border-color: #ef4444 !important;
}

.validation-message {
    color: var(--color-danger);
    font-size: 0.72rem;
}

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

.blazor-error-boundary {
    background: #7f1d1d;
    border-left: 4px solid #fca5a5;
    border-radius: var(--radius-sm);
    color: white;
    padding: 1rem;
}