:root {
    --sidebar-width: 250px;
    --scrollbar-width: 17px;

    /* ── Z-INDEX LADDER (single source of truth) ──────────────────────────
       Governs CROSS-COMPONENT stacking only. The whole point is that a number
       chosen in one component must be comparable to a number chosen in another
       — so anything that can overlap something from a *different* component
       reads its tier from here instead of inventing a literal.

       LOCAL stacking is deliberately NOT on this ladder: a sticky <thead>
       pinned inside its own scroll box, or the Gantt's sticky left columns,
       compete only with their own siblings, so they keep small local values
       (1, 2, …). Don't promote those to ladder tiers.

       Ordering rationale (low → high):
         content     in-flow page content, the baseline
         sticky      page form submit bars pinned to the viewport bottom
         status      the fixed Avg/queries status cluster (bottom-left)
         sidebar     the left panel AND its Miller-column flyout. MUST sit
                     above page sticky bars (that was the bug: a z:10 submit
                     footer painted over the z:2 sidebar, burying the flyout)
                     and below modals/menus/overlays.
         blazor-err  framework's #blazor-error-ui strip
         modal*      app modals + their backdrops
         messaging   the messaging / my-messages slide-over panels
         overlay     full-screen blocking overlays (wiring, import busy)
         context     right-click context menus + their click-away backdrops */
    --z-content:         1;
    --z-sticky-footer:   10;
    --z-status-cluster:  20;
    --z-sidebar:        100;
    --z-blazor-error:  1000;
    --z-modal-backdrop:1050;
    --z-modal:         1060;
    --z-messaging:     1065;
    --z-overlay:       3000;
    --z-context-menu: 10000;

    /* The ONE "pink" used app-wide to flag a required field that is blank and
       therefore blocking a modal's Create/Save. Single source of truth — every
       edit modal references these vars (and the .field-required-blank class
       below), never a literal, so the shade stays consistent everywhere. */
    --field-required-border: #dc3545;
    --field-required-bg:     #f8d7da;
}

/* Paint a form control pink while it's required-but-blank. Shared by all edit
   modals; the per-field condition (which mirrors the matching IsModalValid
   term) decides WHEN to add the class, this decides how it looks. */
.field-required-blank,
.field-required-blank:focus {
    border-color: var(--field-required-border) !important;
    background-color: var(--field-required-bg) !important;
}

/* Shared page form submit bar — pinned to the bottom of a scrolling form so
   Save/Cancel stay reachable. Replaces a dozen identical inline copies; rides
   the --z-sticky-footer tier so the left-panel Miller flyout (--z-sidebar)
   always wins over it. Compose with Bootstrap's col-12 where the form is a
   grid row: class="col-12 form-sticky-footer". */
.form-sticky-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0;
    border-top: 1px solid #dee2e6;
    z-index: var(--z-sticky-footer);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

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

.validation-message {
    color: #e50000;
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Miller-column cascade (shared: My Messages §3.9, Profile §3.6.1) ──
   Extracted from MyMessagesPanel so both share one column engine. Global (not
   scoped) so a caller's <TrailingColumn> can reuse .cascade-col /
   .cascade-col-head for a seamless last column. The flex container is sized by
   its parent (e.g. the My Messages flyout body); these rules style the columns
   and rows only. */
.cascade-cols {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
.cascade-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid #e9ecef;
}
.cascade-col:last-child {
    border-right: none;
}
.cascade-col-head {
    position: sticky;
    top: 0;
    background: #f1f3f5;
    border-bottom: 1px solid #dee2e6;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}
.cascade-empty {
    padding: 0.6rem;
    color: #6c757d;
    font-size: 0.85rem;
}
/* Row — a label that ellipsizes, with a count/alarm pill pinned right.
   Selected row tinted with a blue left accent. */
.cascade-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #f1f3f5;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
}
.cascade-item:hover {
    background: #e7f1ff;
}
.cascade-item.sel {
    background: #cfe2ff;
    box-shadow: inset 3px 0 0 0 #0d6efd;
    font-weight: 600;
}
.cascade-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Red status dot (late / unread) — same red as the count pill, used where a
   boolean state needs a marker instead of a number. Shared by the cascade
   alarm and the My Messages unread indicator. */
.cascade-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #dc3545;
}