/* ── Orca brand tokens ─────────────────────────────────────────── */
:root {
    --orca-navy:          #0F1E2E;
    --orca-navy-dark:     #0B1A2B;
    --orca-navy-hover:    #162638;
    --orca-teal:          #15807B;
    --orca-teal-dark:     #0f6560;
    --orca-teal-light:    #2bb3a3;
    --orca-teal-subtle:   rgba(21, 128, 123, 0.10);
    --orca-bg:            #EEF1F5;
    --orca-surface:       #FFFFFF;
    --orca-border:        #E2E7EE;
    --orca-border-top:    #E4E9EF;
    --orca-text:          #0F1E2E;
    --orca-body:          #56626f;
    /* #5B6876, not the original #6B7886 (AB#1204). The old value measured 4.51:1 on white —
       clearing WCAG AA's 4.5:1 by 0.01 — so it failed the moment it landed on anything but pure
       white, and this app puts it there routinely: Radzen stripes alternate grid rows #FAFAFA
       (4.32:1), the work-note entries carry a 4% teal tint (4.32:1), and the sweep chips are 12%
       (3.87:1). This value clears 4.5:1 on all of them (worst 4.89:1 on the chips, 5.70:1 on white)
       while staying lighter than --orca-body, so the grey scale keeps its order. Don't lighten it
       back without re-checking against those tinted backgrounds, not just white. */
    --orca-text-muted:    #5B6876;
    /* #626E7B, was #7A8693 (AB#1205). The old value measured 3.71:1 on a white card and 3.28:1 on
       --orca-bg, both under WCAG AA's 4.5:1 for body text — and one of its two uses (Home's "data as
       of" line) sits on --orca-bg, not a card, so check both when changing it. This clears 5.20 on
       white and 4.59 on --orca-bg, and stays lighter than --orca-text-muted so the scale keeps its
       order. */
    --orca-muted2:        #626E7B;

    /* #798592, was #9AA6B3 (AB#1205). **Non-text only** — a decoration tier, not a text tier. At 3.4:1
       or better on every light surface it lands on (white 3.76, the #F0F4F8 total row 3.40, the #FAFAFA
       grid stripe 3.60) it satisfies WCAG 1.4.11's 3:1 for the KPI info glyph and the Roll-Forward
       block divider. It is NOT good enough for body text (needs 4.5:1); .chart-subtitle used to sit
       here at 2.48:1 and moved to --orca-text-muted. Don't put text back on it.

       Note the total-row case, not just white: #86929F looked fine at 3.17:1 on white but measured
       2.87:1 on the #F0F4F8 total row the divider actually sits on. Check the tinted surfaces.

       This tier is now light-background-only. .login-subtitle used to borrow it for light text on
       --orca-navy, which pulled in the opposite direction — darkening for light backgrounds lowered
       contrast on dark ones. That case carries its own value in Login.razor.css instead, so this token
       has one job. */
    --orca-faint:         #798592;

    /* ── Radzen theme overrides ───────────────────────────────────── */
    --rz-primary:         var(--orca-teal);
    --rz-primary-dark:    var(--orca-teal-dark);
    --rz-primary-light:   var(--orca-teal-light);
    --rz-primary-lighter: var(--orca-teal-subtle);
}

/* ── Typography ────────────────────────────────────────────────── */
html, body {
    font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--orca-text);
    background-color: var(--orca-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: var(--orca-navy);
}

/* ── Links ─────────────────────────────────────────────────────── */
a, .btn-link {
    color: var(--orca-teal);
}

a:hover, .btn-link:hover {
    color: var(--orca-teal-dark);
}

/* ── Bootstrap button override ─────────────────────────────────── */
.btn-primary {
    background-color: var(--orca-teal);
    border-color: var(--orca-teal);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--orca-teal-dark);
    border-color: var(--orca-teal-dark);
    color: #fff;
}

.btn-outline-primary {
    color: var(--orca-teal);
    border-color: var(--orca-teal);
}

.btn-outline-primary:hover {
    background-color: var(--orca-teal);
    border-color: var(--orca-teal);
    color: #fff;
}

/* ── Radzen component overrides ────────────────────────────────── */
.rz-button-primary {
    background: var(--orca-teal) !important;
    border-color: var(--orca-teal) !important;
}

.rz-button-primary:hover:not(:disabled) {
    background: var(--orca-teal-dark) !important;
    border-color: var(--orca-teal-dark) !important;
}

.rz-badge-success {
    background: var(--orca-teal) !important;
}

/* ── Page content ───────────────────────────────────────────────── */
.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* ── Form validation ────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--orca-teal);
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* ── Blazor error UI ────────────────────────────────────────────── */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

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

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