/*
Global stylesheet for the shared app CHROME of the protected shell — both the app-header nav spine
(Protected/Shell/AppHeader.razor) and the app-footbar status bar (Protected/Shell/AppFootbar.razor),
its footer twin.

This is a NON-ISOLATED global sheet (linked from App.razor), NOT AppHeader.razor.css / AppFootbar.razor.css
— the same decision as grid-shell.css and account-shell.css: this app does not serve Client-project scoped
CSS (only the host's own scoped bundle + these global sheets are linked), so chrome styling must live in a
global sheet to actually reach the browser. Every rule is scoped under the `.app-header` / `.app-footbar`
class so it cannot collide with the public pages, account pages, or the operational shell.

Both bars sit on the shell's DEEP band, which is a different backdrop from the page canvas, so they keep
their own per-surface role scales (--hdr-* on `.app-header`, --ftr-* on `.app-footbar`) rather than
consuming the canvas roles. The names are unchanged — every rule below and the app-header.feature /
app-footbar.feature runtime guards depend on them — but they are now ALIASES for the per-theme
--shell-chrome-* roles declared in custom.css, not hardcoded white-alpha.

  NOTE for anyone reading an older revision of this comment: the roles were originally local *literals*,
  justified by "the protected shell carries no theme class, so bare var(--muted) would fall back to
  inherited #fff". That premise is gone — the shell root now carries the resolved theme — and a local
  literal is exactly what would make these bars unswitchable. Do not re-hardcode them.

The contrast law that motivated the scale still holds and is re-derived PER SURFACE, not inherited: the
62% step is the smallest that clears WCAG 1.4.3 4.5:1 for small text on the dark band, and the 45%/30%
steps are non-text only. A light colourway must establish its own smallest passing step; see the
--shell-chrome-* notes in custom.css.

Grid placement inside GridLayout (grid-area, sticky) stays in grid-shell.css (page .app-header {…},
page .app-footbar {…}); this sheet is visual only and does not restate placement.
*/

.app-header {
    /* Header-local aliases for the per-theme deep-band roles. Consume these, never the canvas var(--muted). */
    --hdr-muted: var(--shell-chrome-muted);
    --hdr-muted-2: var(--shell-chrome-muted-2);
    --hdr-muted-3: var(--shell-chrome-muted-3);
    --hdr-rule: var(--shell-chrome-rule);
    --hdr-rule-strong: var(--shell-chrome-rule-strong);

    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* Match the operational shell's header row (grid-shell sets --header-height on <page>); fall back to
       the same 50px elsewhere. The design's 60px is scaled to the shell's row to keep the 1366x768
       vertical budget — a documented divergence; version + session move to the footbar later. */
    height: var(--header-height, 3.125rem);
    padding: 0 1rem;
    flex-wrap: nowrap;
    background: var(--shell-surface-deep);
    color: var(--shell-on-deep);
    font-family: Outfit, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.app-header a {
    color: inherit;
    text-decoration: none;
}

/* Vertical rule between zones (the design's .top-divider). */
.app-header__divider {
    width: 1px;
    height: 1.625rem;
    background: var(--hdr-rule-strong);
    flex-shrink: 0;
}

/* ===== Left · identity ===== */
.app-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
}

.app-header__mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.app-header__mark svg {
    display: block;
}

.app-header__wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}

.app-header__brand-name {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.app-header__brand-sub {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.5625rem;
    /* --hdr-muted, not --hdr-muted-2: the -2 step is deliberately below the small-text threshold on this
       band and is non-text only. Same reason for the role label below. */
    color: var(--hdr-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 1px;
    white-space: nowrap;
}

/* ===== Centre · open region (per-layout fill) ===== */
.app-header__centre {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 1.125rem;
    min-width: 0;
}

/* Breadcrumb fill (Account) — a semantic <ol>; separators are drawn with ::before so the DOM stays clean. */
.app-header__crumbs {
    min-width: 0;
}

.app-header__crumbs ol {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.71875rem;
    letter-spacing: 0.04em;
    color: var(--hdr-muted);
    min-width: 0;
}

.app-header__crumbs li {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    min-width: 0;
}

.app-header__crumbs li + li::before {
    content: "/";
    margin-right: 0.625rem;
    color: var(--hdr-muted-3);
    flex-shrink: 0;
}

.app-header__crumbs a {
    color: var(--hdr-muted);
}

.app-header__crumbs a:hover {
    color: var(--shell-on-deep);
}

.app-header__crumbs [aria-current="page"] {
    color: var(--shell-on-deep);
    /* Truncate rather than overflow the narrow header when enlarged text widens the breadcrumb. */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Default centre — chunk switcher + trial indicator (unchanged behaviour, restyled to the dark idiom). */
.app-header__chunks {
    flex: 0 1 auto;
    min-width: 0;
}

.app-header__chunk-title {
    font-weight: 600;
    white-space: nowrap;
}

.app-header__chunk-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-header__chunk-button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.app-header__chunk-button:hover {
    background: var(--shell-chrome-fill-hover);
}

.app-header__chunk-button.is-active {
    background: var(--shell-chrome-fill-active);
    border-color: var(--hdr-rule-strong);
    font-weight: 600;
}

.app-header__trial {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    flex: 0 1 auto;
    color: var(--hdr-muted);
}

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

/* ===== Right · utility + account ===== */
.app-header__right {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    /* Allow the cluster to yield (and its username to truncate) rather than force horizontal overflow
       when text-only zoom enlarges the content past the viewport-keyed collapse breakpoints. */
    min-width: 0;
}

/* Version moved to the footbar (.app-footbar__version in the .app-footbar section below); the header
   no longer renders it. */

/* Environment pill — variant re-keyed to design semantics: prod green, uat violet, dev amber. */
.app-header__env {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    height: 1.625rem;
    padding: 0 0.625rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-header__env-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px var(--shell-chrome-fill);
    flex-shrink: 0;
}

/* The pill hues are absolute brand colours, but whether a hue clears 3:1 as a boundary — and what its
   low-alpha tint composites to — depends on the band it sits on, so both live in the theme blocks. */
.app-header__env--prod {
    background: var(--shell-env-prod-fill);
    border-color: var(--shell-env-prod-border);
    color: var(--shell-env-prod-ink);
}

.app-header__env--uat {
    background: var(--shell-env-uat-fill);
    border-color: var(--shell-env-uat-border);
    color: var(--shell-env-uat-ink);
}

.app-header__env--dev {
    background: var(--shell-env-dev-fill);
    border-color: var(--shell-env-dev-border);
    color: var(--shell-env-dev-ink);
}

/* Icon buttons (notifications — inert; help). */
.app-header__icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--hdr-muted);
    cursor: pointer;
    transition: background .12s, color .12s;
}

.app-header__icon-button:hover {
    background: var(--shell-chrome-fill-hover);
    color: var(--shell-on-deep);
}

.app-header__icon-button:disabled {
    cursor: default;
    color: var(--hdr-muted-3);
}

.app-header__icon-button:disabled:hover {
    background: transparent;
}

/* Active state — used by the admin cog when the current area is /admin. */
.app-header__icon-button.is-active {
    background: var(--shell-chrome-fill-active);
    border-color: var(--hdr-rule-strong);
    color: var(--shell-on-deep);
}

.app-header__icon-button .material-icons {
    font-size: 1.125rem;
}

/* Decorative unread dot on the (inert) notifications control. */
.app-header__badge-dot {
    position: absolute;
    top: 0.4375rem;
    right: 0.5rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--shell-status-warn);
    box-shadow: 0 0 0 2px var(--shell-surface-deep);
}

/* Account pill — avatar (gradient, ink initials) + name/role stack. */
.app-header__account {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.25rem 0.625rem 0.25rem 0.25rem;
    margin-left: 0.25rem;
    border: 1px solid var(--hdr-rule);
    border-radius: 999px;
    transition: background .12s;
}

.app-header__account:hover {
    background: var(--shell-chrome-fill-subtle);
}

.app-header__avatar {
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-highlight), var(--brand-cambridge));
    color: var(--brand-ink);
    font-weight: 700;
    font-size: 0.6875rem;
    flex-shrink: 0;
}

.app-header__avatar .material-icons {
    font-size: 1.125rem;
    color: var(--brand-ink);
}

.app-header__user-detail {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.app-header__user-name {
    font-size: 0.78125rem;
    font-weight: 500;
    white-space: nowrap;
    /* Cap + ellipsis so a long name/email (e.g. the synthetic user) can't blow out the cluster width,
       especially under enlarged browser default font where the viewport-keyed collapses don't fire.
       The cap is px, NOT rem: a rem cap scales with the browser font-size, so under Large/Very-Large text
       it grows in lockstep with the name and never truncates — defeating the purpose. 192px == the old
       12rem at the 16px base, so default rendering is unchanged, but enlarged text now truncates and the
       account pill yields the width the frozen viewport breakpoints can't reclaim. */
    max-width: 192px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__user-role {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.5625rem;
    color: var(--hdr-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Sign-out — a POST form kept in the cluster (design divergence: it has no sign-out); restyled only. */
.app-header__signout {
    margin: 0;
}

.app-header__signout-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.125rem;
    min-height: 1.5rem;
    padding: 0 0.625rem;
    border: 1px solid var(--hdr-rule);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--hdr-muted);
    font: inherit;
    font-size: 0.78125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.app-header__signout-button:hover {
    background: var(--shell-chrome-fill-hover);
    color: var(--shell-on-deep);
}

.app-header__signout-button .material-icons {
    font-size: 1.125rem;
}

/* Visible focus for every interactive element (WCAG 2.4.7). The ring hue is per-theme, because it has to
   clear 3:1 against the band it is drawn on. */
.app-header a:focus-visible,
.app-header button:focus-visible {
    outline: 2px solid var(--shell-chrome-focus);
    outline-offset: 2px;
}

/* Narrow viewports: collapse account text and the sign-out label; keep controls reachable.
   /me is not resolution-gated, so it must reflow with no horizontal scroll. */
@media (max-width: 60rem) {
    .app-header__user-detail,
    .app-header__signout-label {
        display: none;
    }
}

/* Mobile: drop the wordmark (the mark stays), chunk labels, and env pill so the row fits ~375px. */
@media (max-width: 48rem) {
    .app-header {
        gap: 0.4rem;
        padding: 0 0.4rem;
    }

    .app-header__wordmark,
    .app-header__chunk-label,
    .app-header__env {
        display: none;
    }

    /* Reclaim width on the narrowest viewports (esp. under enlarged text): drop the inert notifications
       control (disabled "coming soon", so no functionality is lost) and tighten the icon-button box. */
    .app-header__icon-button:disabled {
        display: none;
    }

    .app-header__icon-button {
        width: 2rem;
        height: 2rem;
    }

    /* Drop the breadcrumb on the narrowest viewports: the brand mark already links to /app and the page's
       own <h1> carries the context, so it is redundant here — and removing it keeps the row within the
       viewport under enlarged text (the chunk switcher on other layouts is unaffected). */
    .app-header__crumbs {
        display: none;
    }
}

/* Honour reduced-motion for the micro-transitions. */
@media (prefers-reduced-motion: reduce) {
    .app-header__icon-button,
    .app-header__signout-button,
    .app-header__account,
    .app-header__chunk-button {
        transition: none;
    }
}

/* =====================================================================================
   FOOTBAR — the always-on status chrome bar (Protected/Shell/AppFootbar.razor), the footer
   twin of the header. It sits on the same deep band, so its --ftr-* roles alias the same per-theme
   --shell-chrome-* scale the header's --hdr-* roles do, for the same reason: the deep band is a
   different backdrop from the page canvas, and its steps must clear 1.4.3 against IT.
   ===================================================================================== */
.app-footbar {
    /* Footbar-local aliases for the per-theme deep-band roles. Consume these, never the canvas var(--muted).
       Note --ftr-rule takes the STRONG rule step: the footbar's zone divider is heavier than the header's. */
    --ftr-muted: var(--shell-chrome-muted);
    --ftr-muted-2: var(--shell-chrome-muted-2);
    --ftr-muted-3: var(--shell-chrome-muted-3);
    --ftr-rule: var(--shell-chrome-rule-strong);

    display: flex;
    align-items: center;
    gap: 0.625rem;
    /* Keep in lockstep with grid-shell.css --footbar-height: on GridLayout the footbar occupies a grid
       row of that height, so a mismatch here would clip the bar or open a gap below it. */
    height: 2.125rem;
    padding: 0 1rem;
    flex-wrap: nowrap;
    background: var(--shell-surface-deep);
    color: var(--shell-on-deep);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Grouped status segment: the label text takes the muted step (the smallest that clears WCAG 1.4.3 4.5:1
   on this band); the emphasised value takes the full band ink. */
.app-footbar__group {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ftr-muted);
    min-width: 0;
}

.app-footbar__group b {
    color: var(--shell-on-deep);
    font-weight: 600;
}

/* The health caption sits at the full band ink — it is the load-bearing state, not a muted label. */
.app-footbar__status-label {
    color: var(--shell-on-deep);
}

/* Vertical separators between segments (the design's .footbar .sep). */
.app-footbar__sep {
    width: 1px;
    height: 0.875rem;
    background: var(--ftr-muted-3);
    flex-shrink: 0;
}

/* Health dot — the ok hue when healthy, the warn hue (with its glow) when not. Both are per-theme: a dot
   is a non-text graphic and owes 3:1 against whichever band it is drawn on. */
.app-footbar__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--shell-status-ok);
    flex-shrink: 0;
}

.app-footbar__dot--warn {
    background: var(--shell-status-warn);
    box-shadow: 0 0 0 3px var(--shell-status-warn-glow);
}

/* Zone divider before the per-layout right fill (mirrors .app-header__divider). */
.app-footbar__divider {
    width: 1px;
    height: 1.125rem;
    background: var(--ftr-rule);
    flex-shrink: 0;
}

/* Right fill — the per-layout footer analogue of the header's centre fill; pushed to the end. */
.app-footbar__right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    color: var(--ftr-muted);
}

/* Read-only / status pill some layouts place in the right fill (mirrors the header env-pill idiom;
   consumes --brand-cambridge, the same re-key the design's .foot-tag uses). */
.app-footbar__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--shell-tag-border);
    border-radius: 999px;
    background: var(--shell-tag-fill);
    color: var(--shell-tag-ink);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

/* Visible focus for any interactive footbar control (WCAG 2.4.7); the ring hue is per-theme, as in the
   header. Any link/button added to the right fill also keeps a >=24px hit area (WCAG 2.5.8). */
.app-footbar a:focus-visible,
.app-footbar button:focus-visible {
    outline: 2px solid var(--shell-chrome-focus);
    outline-offset: 2px;
}

.app-footbar a,
.app-footbar button {
    min-height: 1.5rem;
}

/* Responsive collapse ladder (mirrors the header's). Each segment drops together with its leading
   separator via the matched --session / --region / --version modifiers, so no orphan separators remain.
   The health status + dot are never dropped. */
@media (max-width: 60rem) {
    /* Drop the version and the region to reclaim width; keep health + session. */
    .app-footbar__version,
    .app-footbar__sep--version,
    .app-footbar__group--region,
    .app-footbar__sep--region {
        display: none;
    }
}

@media (max-width: 48rem) {
    .app-footbar {
        gap: 0.4rem;
        padding: 0 0.6rem;
    }

    /* Narrowest (~375px, ungated layouts): also drop the right fill and the session segment so the row
       fits. Only the health status + dot remain — the load-bearing state. */
    .app-footbar__right,
    .app-footbar__divider,
    .app-footbar__group--session,
    .app-footbar__sep--session {
        display: none;
    }
}

/* No dot-glow transitions to honour; the footbar has none. This block is intentionally minimal —
   the dot's warn glow is a static box-shadow, not an animation. */

/* No protected-layout wrapper docking rules are needed here: the flex-column shell (min-height:100vh
   plus a flex:1 body region) that docks the footbar at the viewport bottom is supplied by the layout
   roots themselves — .dashboard-layout / .admin-layout in app-layouts.css and .account-app-shell in
   account-app.css. NOTE: an earlier version of this comment claimed the Client layout *.razor.css files
   provided it because the Server scoped bundle aggregates the Client project's scoped CSS. That is FALSE
   — the host bundle covers only the host's own components, so those files were dead at runtime and the
   docking was coming from elsewhere. See app-layouts.css. */