/* SOL-955 — THE CANVAS IS PAINTED BY THE THEME. Decision recorded here because it was a choice, not a tidy-up:
   the two decorative radial-gradient washes and the green-tinted off-white beneath them are GONE, and nothing
   replaces them. Four reasons, in the order they decided it:

     1. They were the retired control-plane palette wearing a different notation. SOL-951 removed that skin's
        HEXES; these two washes were rgba() triples of two OTHER members of the same retired ramp, which is
        precisely why PlaneTellStylesheetTests — a hex scan — could not see them. (Deliberately not named here:
        this file's rule is that a value written in a comment is indistinguishable from a live one to a grep.
        The retired ramp is recorded once, in ADR-PlatformAdmin-Design-System-Alignment.md, Amendment 1.)
     2. Decorative saturated colour is the one thing ui-design-system.md rule 4 forbids outright — colour is
        reserved for status and risk. A brand wash behind an operations console spends the budget on flourish.
     3. The literal beneath them was a SECOND canvas colour, a green-tinted neutral disagreeing with the
        theme's own Background token. Two sources of truth for one surface; the theme wins.
     4. It was hardcoded LIGHT. A fixed wash cannot follow a palette switch, so it is exactly what would have
        to be unpicked again for dark mode (SOL-956). Expressing the gradient in theme variables was the other
        option on the table and was rejected: it would keep a decorative layer alive — and a dark-mode-correct
        gradient needs its own dark stops, i.e. new decorative tokens nobody wants to own.

   Why a background-color rule survives at all, given MudBlazor's own stylesheet already sets
   body { background-color: var(--mud-palette-background) }: it sets BODY, not HTML. Without this, the canvas
   outside the body box — the overscroll/rubber-band area — falls back to white and flashes against the
   theme's off-white on every scroll bounce. One token, applied to both elements, and dark mode moves it.

   font-family is the same story in the type axis: the stack that was here was a THIRD Segoe variant, narrower
   than the theme's and missing its Variable Text head. It now reads the theme token, with the ClearVue stack
   as the literal fallback for the pre-hydration frame before MudThemeProvider has emitted its variables (same
   token-with-fallback shape as .cv-fileimport-verbatim in TDAP). */
html, body {
    margin: 0;
    font-family: var(--mud-typography-default-family, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif);
    background-color: var(--mud-palette-background);
}

.brand-mark {
    letter-spacing: 0.08em;
    font-weight: 700;
}

/* SOL-951 — the STRUCTURAL PLANE TELL (three layers; see MainLayout.razor for what each one covers).
   Replaces the retired SOL-236 control-plane skin, whose banner rules restated that skin's teal/sand accent
   hexes as literals here. Those four values are gone from the product — deliberately not re-listed in this
   comment, because PlaneTellStylesheetTests scans this whole file for them and a "documentation" copy is
   indistinguishable from a real one to a grep. The retired values are recorded once, in
   docs/architecture/adr/ADR-PlatformAdmin-Design-System-Alignment.md, Amendment 1.

   ⚠️ Every colour below is a shared MudTheme token, deliberately. The tell is carried by FORM — placement,
   solid fill, square corners, uppercase, the rail spine — not by a bespoke hue, so it survives the next
   palette change including dark mode (SOL-956). Do not reintroduce a literal hex in these rules. */

/* Layer 1 — the hard plane badge, at the LEFT ORIGIN of the command bar. Solid-filled and square-cornered
   so it cannot be read as one of this app's outlined/rounded status chips. */
.pa-plane-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.15rem 0.5rem;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 0;                 /* square: the theme's 2px radius is the DECORATION grammar, not this */
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.7;
    white-space: nowrap;
}

/* Three classes deep on purpose: MudBlazor.min.css loads AFTER app.css, so a selector merely TYING with
   .mud-icon-root.mud-icon-size-small loses and the icon renders oversized with a stray 4px end-margin
   (.mud-icon-root ships one) on top of this rule's own gap. */
.pa-plane-badge .mud-icon-root.mud-icon-size-small {
    font-size: 0.95rem;
    margin-inline-end: 0;
}

/* Layer 2 — the plane spine: a full-height band down the outer edge of the nav rail. Pre-attentive; it
   registers before the badge is read, which is what covers an unfocused window and peripheral vision. */
.pa-plane-spine {
    border-left: 4px solid var(--mud-palette-primary);
}

/* Layer 3 — the demoted consequence strip. Quiet on purpose: it states the COST of a wrong click, not the
   identity of the plane (layer 1 does that). Semantic colour is confined to the icon, per the design system's
   "saturated colour is reserved for status and risk" rule. */
.pa-plane-consequence {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1rem;
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
    font-size: 0.8rem;
    line-height: 1.4;
}

.pa-plane-consequence__icon {
    color: var(--mud-palette-warning);
}

.pa-plane-consequence .mud-icon-root.mud-icon-size-small {
    font-size: 1rem;
    margin-inline-end: 0;
}

.mud-main-content {
    /* SOL-955 — was a literal 48px whose own comment named the token it was duplicating
       (ClearVueDesignTokens.AppbarHeight). MudThemeProvider emits that value as --mud-appbar-height at
       runtime, so read it: changing the command-bar height in the shared tokens now moves this with it
       instead of leaving a silently disagreeing copy. No fallback on purpose — before the theme provider
       has emitted its variables the calc() is simply invalid and the min-height does not apply, which is
       harmless for one frame, whereas a fallback would be the duplicated literal coming straight back. */
    min-height: calc(100vh - var(--mud-appbar-height));

    /* SOL-500 — the sticky-footer half, matching TDAP's .mud-main-content. The column is what gives
       .layout-meta-footer's `margin-top: auto` something to absorb; without it the stamp would sit
       immediately under the last content row, mid-screen, on every short page. Cross-axis alignment is
       flex's default `stretch`, so the consequence strip and MudContainer keep their full width — this
       changes where the free vertical space goes, not how anything is sized across. */
    display: flex;
    flex-direction: column;
}

/* SOL-237 — grayed roadmap affordance for unbuilt nav items (skeleton-on-a-switch, nav guide §4).
   Muted + non-interactive so a grayed roadmap item never reads as a live-but-broken link. Distinct
   from the "built-but-unentitled" upsell treatment that will replace it at MVP. */
.pa-nav-unbuilt {
    opacity: 0.45;
    font-style: italic;
    pointer-events: none;             /* belt-and-suspenders with Disabled="true" — never navigable */
    cursor: default;
}

.pa-nav-footer {
    opacity: 0.85;
}

/* SOL-71 Operations — shared right-alignment for the per-row action column and a friendly empty done-state. */
.pa-text-right {
    text-align: right;
}

.pa-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
}

/* SOL-72 Operations posture — per-row expand toggle column (narrow, chevron only) and the deep-posture
   detail panel (a compact key/value grid, Fluent-dense, hairline-bordered — not a shadowed card). */
.pa-col-expand {
    width: 44px;
}

.pa-detail-cell {
    padding: 0.75rem 1rem;
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pa-detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.5rem;
    row-gap: 0.35rem;
    max-width: 40rem;
}

.pa-detail-key {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.pa-detail-val {
    font-size: 0.8125rem;
}

/* SOL-347 Integration Hub — headline stat tiles: Fluent-dense, hairline-bordered blocks (no shadow, modest
   radius), and a hairline frame for the compact roll-up tables. Values read businesslike, not consumer-airy. */
.pa-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.pa-stat-tile {
    flex: 1 1 8rem;
    min-width: 8rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
}

.pa-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.pa-stat-value-muted {
    color: var(--mud-palette-text-secondary);
}

.pa-stat-label {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pa-hairline {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* SOL-378 entitlement viewer — the module → capability tree.
   Depth is carried by a hairline rule and an indent, never by a nested card or a shadow: a capability row
   must read as SUBORDINATE to its module row, not as a peer entitlement of its own. Row separation is a
   1px top border rather than padding, so a 13-row list stays dense/spreadsheet-grade. */
.pa-ent-row {
    padding: 0.35rem 0;
}

.pa-ent-row + .pa-ent-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pa-ent-children {
    margin: 0.2rem 0 0.1rem 0.35rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--mud-palette-lines-default);
}

.pa-ent-child-row {
    padding: 0.2rem 0;
}

/* A group heading inside a panel (entitled / not-entitled / one ungated surface) with its count on the
   right. Deliberately NOT styled like .pa-ent-row — a heading must never be mistaken for a key row. */
.pa-ent-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.pa-ent-group + .pa-ent-group {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* SOL-382 license-history add-on cell — the purchased add-on chips plus the three-way not-captured /
   none-sold markers on one dense grid line. Wraps rather than truncates: every recorded key stays
   readable in the cell. */
.pa-addon-cell {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* SOL-964 — the detail-panel-beside-a-list emphasis, expressed the Fluent way.

   Three panels (Tenants, TenantLicenses, PriceBookVersionDetail) carried Elevation="2" to say "this is the
   thing you selected; it sits on top of the list". That message is CORRECT — a heavier drop shadow is just
   the Material way of saying it, and it is outside the mandate's stated 0-1 elevation band. Flattening the
   three to a plain panel would have removed the shadow AND the distinction, which is uniformity bought with
   a real signal. This is the same message as a background step instead: one notch off the panel it sits
   beside, no shadow.

   The token is BackgroundGray, which SOL-978 made ClearVue-owned (#F3F2F1 light / #292827 dark) after ten
   live rules had been resolving it to MudBlazor's stock Material default. Its guarantees are what make this
   rule work and are guarded by BackgroundGrayTokenTests: BackgroundGray never equals Surface (so the step is
   always visible) and never equals Divider (so the outline stays legible on top of it). */
.pa-panel-emphasis {
    background-color: var(--mud-palette-background-gray);
}

/* SOL-500 — Layout Meta Footer. Deliberately the SAME class names and the same values as TDAP's
   (src/BinaryPlate.BlazorPlate.Tdap/wwwroot/css/app.css), because the ticket asks the control plane to carry
   the same treatment rather than a second design. The two stylesheets cannot be shared — TDAP's is a WASM
   static asset and this one is served by the Blazor Server host — so this is a mirror, and it is the kind of
   mirror that drifts. Change one, change the other.

   Theme-aware via --mud-palette-text-secondary rather than a fixed colour: this plane renders the shared
   ClearVue palette (SOL-951) and MudBlazor recomputes the token per theme, so the footer stays legible in
   light and dark without a prefers-color-scheme fork. */
.layout-meta-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;                 /* sticky footer — absorbs the free space in .mud-main-content's column */
    padding: 22px 12px 8px;
    font-size: 0.75rem;
    letter-spacing: 0.2px;
    color: var(--mud-palette-text-secondary);
}

.layout-meta-footer__separator {
    opacity: 0.5;
}