html, body {
    margin: 0;
    height: 100%;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

code, pre code {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.82em;
    padding: 0.12em 0.42em;
    border-radius: 4px;
    background-color: rgba(120, 130, 145, 0.10);
    letter-spacing: -0.01em;
}

/* Layout — MudAppBar renders as <header class="mud-appbar"> containing an
   inner <div class="mud-toolbar mud-toolbar-appbar"> that actually holds the
   ChildContent. So the flex layout for the crumbs lives on the INNER toolbar,
   not the outer header. Both need explicit rules for the 56px height and the
   20px horizontal inset (matches the sidebar's brand/nav padding). */
.app-topbar {
    height: 56px !important;
    min-height: 56px !important;
    background-color: var(--mud-palette-appbar-background) !important;
    border-bottom: 1px solid var(--mud-palette-divider);
    backdrop-filter: saturate(1.15);
    -webkit-backdrop-filter: saturate(1.15);
    padding: 0 !important;
    box-sizing: border-box;
}
.app-topbar .mud-toolbar-appbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 20px !important;
    box-sizing: border-box;
    width: 100%;
}
/* Header only has one anchored group now (workspace/env breadcrumb on the
   left) — the theme toggle and account switcher moved to the sidebar footer.
   Mirrors the sidebar logo pattern: no intermediate height, no explicit
   vertical padding; the flex-centering on the parent 56px .app-topbar is
   what centers the crumb pills top-to-bottom. */
.header-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: 0;
    margin-right: auto;
}
/* MudTooltip / MudMenu render wrapping <div>s that inherit display:inline-block
   by default — force them to flex-center their contents so the button inside
   sits on the same baseline as everything else. */
.app-topbar .mud-tooltip-root,
.app-topbar .mud-menu {
    display: inline-flex !important;
    align-items: center !important;
    height: 32px;
}
/* All icon buttons in the app bar share a 32px hit target so the theme
   toggle, mobile menu, and avatar look like siblings on the same row. */
.app-topbar .mud-icon-button {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.app-topbar .mud-icon-button .mud-icon-root {
    font-size: 1.15rem;
    line-height: 1;
}

.app-drawer {
    border-right: none;
    background-color: var(--mud-palette-drawer-background) !important;
    width: 264px !important;
}
.app-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.app-main {
    background-color: var(--mud-palette-drawer-background);
    min-height: 100vh;
    padding: 8px 8px 8px 0;
}
.app-main > .mud-container {
    background-color: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    min-height: calc(100vh - 72px);
    max-width: 100% !important;
    padding: 32px 40px !important;
}
@media (max-width: 900px) {
    .app-main { padding: 4px; }
    .app-main > .mud-container { padding: 20px !important; border-radius: 10px; }
}

/* Route enter transition — the whole page body fades in ~120ms so
   navigations feel smooth instead of instant-hard-cut. */
.mud-main-content > * {
    animation: page-enter 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes page-enter {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Nav — shadcn-style: minimal, medium-density, subtle hover, no active bar */
.mud-nav-link {
    border-radius: 8px !important;
    margin: 1px 8px;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    line-height: 1.2;
    color: var(--mud-palette-text-primary) !important;
    transition: background-color .12s ease, color .12s ease;
}
.mud-nav-link:hover {
    background-color: rgba(120, 130, 145, 0.10) !important;
}
.mud-nav-link.active {
    background-color: rgba(70, 87, 255, 0.14) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 500;
}
.mud-nav-link .mud-nav-link-icon {
    margin-inline-end: 12px !important;
    opacity: 0.75;
}
.mud-nav-link.active .mud-nav-link-icon { opacity: 1; }

/* Sidebar structure — brand top, scrollable groups, groups with labels.
   The brand block matches the app bar's exact 56px height (+1px border) so
   its bottom hairline lines up with the app bar bottom hairline on the
   right side of the drawer. Requires DrawerClipMode.Never so the drawer
   starts at y=0 rather than below the app bar. */
.nav-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 56px;
    padding: 0 20px;
    text-decoration: none;
    border-bottom: 1px solid var(--mud-palette-divider);
    transition: opacity .12s ease;
    flex-shrink: 0;
    box-sizing: border-box;
}
.nav-brand:hover { opacity: 0.85; }
/* The wordmark SVG has ~14px of top whitespace inside its 128-unit viewBox
   (translate(9,14)). At 24px rendered height that's ~2.6px of empty pixels
   above the glyph — enough to make the logo look bottom-heavy inside a
   flex-centered container. A -2px top margin cancels it out. */
.nav-brand img {
    display: block;
    height: 24px;
    width: auto;
    margin-top: -2px;
}
.nav-scroll {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 12px;
    overflow-y: auto;
    /* Takes remaining vertical space so the sidebar footer stays pinned to
       the bottom of the drawer (parent .mud-drawer-content is flex-column). */
    flex: 1 1 auto;
    min-height: 0;
}
.nav-group + .nav-group { margin-top: 10px; }
.nav-group-label {
    padding: 12px 20px 6px;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.72;
}

/* Sidebar footer — theme toggle + account switcher pinned to drawer bottom.
   The button spans nearly the full drawer width and shows the current user's
   avatar + email; the theme toggle sits next to it as a small icon button. */
.nav-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}
.nav-footer-menu {
    flex: 1 1 auto;
    min-width: 0;
}
.nav-account-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
    min-width: 0;
}
.nav-account-btn:hover {
    background: rgba(120, 130, 145, 0.10);
    border-color: var(--mud-palette-divider);
}
.nav-account-btn .app-avatar {
    width: 30px; height: 30px;
    flex-shrink: 0;
}
.nav-account-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.15;
}
.nav-account-email {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-account-hint {
    font-size: 0.66rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.75;
}
.nav-account-caret {
    opacity: 0.55;
    flex-shrink: 0;
}
.nav-account-btn:hover .nav-account-caret { opacity: 1; }
.nav-theme-btn {
    flex-shrink: 0;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
}

/* Papers/Cards */
.mud-paper, .mud-card {
    border-radius: 12px !important;
}

/* Shared "detail card" — used on every page that lays out paired info cards
   in a MudGrid (UserDetail, TenantDetail, EnvironmentOverview, …). MudGrid
   is flexbox under the hood, so `height: 100%` on the paper makes shorter
   cards stretch to match their taller neighbour instead of leaving jagged
   edges. Inner flex column keeps content anchored to the top; extra vertical
   space collects at the bottom, which reads as "this card just has less
   content" rather than "these cards are misaligned". */
.detail-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* Match ONLY the pattern where the card has a single wrapping <div> that
   holds all the content (UserDetail-style). Cards that put multiple children
   (header row + caption + table) as direct siblings of MudPaper skip this
   rule so a `d-flex` header row keeps its row direction — otherwise we'd
   accidentally flip the header to a centered vertical stack. */
.detail-card > div:only-child {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
/* Same guard for the button safety net — only applies inside the single-child
   wrapper pattern. */
.detail-card > div:only-child > .mud-button,
.detail-card > div:only-child > .mud-button-root {
    align-self: flex-start;
}

/* Log-style tables (login activity, audit) — MudSimpleTable had no responsive
   fallback and its cells were multi-line without vertical-alignment fixes,
   so both tables were blowing out of their card. The pattern here: a fixed
   table-layout with explicit <col> widths inside an overflow-x wrapper. The
   table respects the widths, tall cells align to the top, and on narrow
   viewports the wrapper scrolls horizontally instead of collapsing columns.
   Both /overview audit and login activity share the classes. */
.log-table-wrap {
    display: block;
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    background-color: var(--mud-palette-surface);
    /* Reset any inherited alignment / centering leaking from an outer flex
       parent — the wrap MUST be a full-width block. */
    align-self: stretch;
    margin: 0;
}
.log-table {
    width: 100%;
    min-width: 780px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.82rem;
    /* Defensive: any inherited text-align:center from an outer container
       (MudPaper, MudBlazor sim-table remnants) is reset here so cells are
       flush-left. Individual cells still declare text-align:left to defeat
       browser <th> default centering. */
    text-align: left;
}
.log-table thead th {
    text-align: left !important;
    padding: 10px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    background-color: rgba(120, 130, 145, 0.06);
    border-bottom: 1px solid var(--mud-palette-divider);
    white-space: nowrap;
}
.log-table tbody td {
    text-align: left !important;
    padding: 10px 14px;
    vertical-align: top;
    border-bottom: 1px solid var(--mud-palette-divider);
}
/* Nested MudChip renders as block-ish flex — force its containing td and
   the chip's content to hug the left edge instead of drifting to center. */
.log-table tbody td > .mud-chip {
    justify-self: flex-start;
}
.log-table tbody tr:last-child td { border-bottom: none; }
.log-table tbody tr:hover td { background-color: rgba(120, 130, 145, 0.04); }
.log-table .cell-primary {
    color: var(--mud-palette-text-primary);
    line-height: 1.35;
}
.log-table .cell-secondary {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    line-height: 1.3;
    margin-top: 2px;
}
.log-table .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.log-table code {
    background: transparent;
    padding: 0;
    font-size: 0.78rem;
}
.log-table .text-ok { color: var(--mud-palette-success); }
.log-table .text-warn { color: var(--mud-palette-warning); }
.log-table .location {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.log-table .flag {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}
.log-table .location-labels {
    min-width: 0;
    flex: 1 1 auto;
}
/* Audit payload cell — the JSON body was previously rendering as an unbounded
   <pre>, breaking the row layout. Cap the height, wrap the text, keep the
   scanability by keeping a subtle bg + border. */
.log-table .audit-payload {
    margin: 0;
    padding: 8px 10px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    line-height: 1.4;
    background-color: rgba(120, 130, 145, 0.08);
    border-radius: 6px;
    max-height: 140px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.mud-elevation-0 {
    box-shadow: none !important;
}
.mud-elevation-1 {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.mud-elevation-2 {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}
.mud-elevation-4 {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* Interactive papers get a lift on hover — used by StatCard and env cards. */
.env-card, .stat-card {
    transition: transform .16s cubic-bezier(0.16, 1, 0.3, 1),
                border-color .16s ease,
                background-color .16s ease,
                box-shadow .16s ease;
}
.env-card:hover, .stat-card:hover {
    transform: translateY(-1px);
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

/* Tables read better with subtle row separators and a light hover. */
.mud-table-container {
    border-radius: 12px;
    overflow: hidden;
}
.mud-table-cell {
    font-size: 0.8125rem;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.mud-table-head .mud-table-cell {
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.mud-table-row {
    transition: background-color .1s ease;
}

/* MudSimpleTable inside cards uses a lighter treatment */
.mud-simple-table table th {
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--mud-palette-divider);
}
.mud-simple-table table td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 0.85rem;
}

/* Chips: slightly bolder, softer default. */
.mud-chip {
    font-weight: 500;
    letter-spacing: 0.005em;
    height: 22px !important;
    font-size: 0.72rem !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
}
.mud-chip.mud-chip-size-small {
    height: 20px !important;
    font-size: 0.68rem !important;
    padding: 0 7px !important;
}
.mud-chip-outlined {
    border-color: var(--mud-palette-lines-default) !important;
}
/* Text-variant chips: subtle tinted background instead of the default flat one */
.mud-chip.mud-chip-text.mud-chip-color-primary {
    background-color: rgba(70, 87, 255, 0.14) !important;
    color: var(--mud-palette-primary) !important;
}
.mud-chip.mud-chip-text.mud-chip-color-success {
    background-color: rgba(22, 163, 74, 0.13) !important;
    color: #16a34a !important;
}
.mud-chip.mud-chip-text.mud-chip-color-warning {
    background-color: rgba(240, 176, 74, 0.14) !important;
    color: #b57519 !important;
}
.mud-chip.mud-chip-text.mud-chip-color-error {
    background-color: rgba(220, 76, 76, 0.12) !important;
    color: #dc2626 !important;
}
.mud-chip.mud-chip-text.mud-chip-color-info {
    background-color: rgba(59, 130, 246, 0.13) !important;
    color: #2563eb !important;
}

/* shadcn-style status badge — dot + text pill. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-badge-dot {
    width: 6px; height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
}
.status-badge-text {
    text-transform: capitalize;
}

.status-success {
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.28);
    color: #16a34a;
}
.status-success .status-badge-dot {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
.status-warning {
    background: rgba(240, 176, 74, 0.12);
    border-color: rgba(240, 176, 74, 0.32);
    color: #b57519;
}
.status-warning .status-badge-dot {
    background: #f0b04a;
    box-shadow: 0 0 0 3px rgba(240, 176, 74, 0.22);
}
.status-error {
    background: rgba(220, 76, 76, 0.10);
    border-color: rgba(220, 76, 76, 0.28);
    color: #dc2626;
}
.status-error .status-badge-dot {
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 76, 76, 0.20);
}
.status-info {
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.28);
    color: #2563eb;
}
.status-info .status-badge-dot {
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.20);
}
.status-neutral {
    background: rgba(120, 130, 145, 0.10);
    border-color: rgba(120, 130, 145, 0.25);
    color: var(--mud-palette-text-secondary);
}
.status-neutral .status-badge-dot {
    background: var(--mud-palette-text-secondary);
    box-shadow: 0 0 0 3px rgba(120, 130, 145, 0.18);
    opacity: 0.7;
}
/* Env mode aliases — same colors as info/success but semantically labelled. */
.status-live { background: rgba(22, 163, 74, 0.10); border-color: rgba(22, 163, 74, 0.28); color: #16a34a; }
.status-live .status-badge-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.status-test { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.28); color: #2563eb; }
.status-test .status-badge-dot { background: #2563eb; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.20); }

/* Buttons: consistent radius, subtle focus ring. */
.mud-button-root {
    border-radius: 8px !important;
    transition: background-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.mud-button-root:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(70, 87, 255, 0.28) !important;
}
.mud-button-root:active:not(:disabled) {
    transform: translateY(0.5px);
}

/* Text fields: focus ring aligned with primary. */
.mud-input-outlined.mud-input-outlined-with-label .mud-input-slot {
    border-radius: 8px;
}

/* Custom sign-out button inside the account menu. */
.app-logout-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .1s ease;
}
.app-logout-btn:hover {
    background-color: rgba(120, 130, 145, 0.08);
}
.app-logout-btn:focus-visible {
    outline: none;
    background-color: rgba(70, 87, 255, 0.12);
}

/* Breadcrumbs read lighter than default. */
.mud-breadcrumbs {
    font-size: 0.8rem;
}
.mud-breadcrumbs .mud-breadcrumb-item {
    color: var(--mud-palette-text-secondary);
}

/* Skeleton-ish pulse for loading placeholders if we choose to render them. */
@keyframes pulse-bg {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.85; }
}
.pulse {
    animation: pulse-bg 1.6s ease-in-out infinite;
}

/* Scrollbars: thin, theme-aware. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 130, 145, 0.35) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(120, 130, 145, 0.35);
    border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(120, 130, 145, 0.55); }

/* Standardised page header — used by the PageHeader.razor component. */
.page-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
.page-header-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header h4.mud-typography-h4 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.page-header .mud-typography-body2 {
    max-width: 780px;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* Compact info banner used in dialogs / details. */
.info-banner {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background-color: rgba(70, 87, 255, 0.10);
    border: 1px solid rgba(70, 87, 255, 0.25);
    color: var(--mud-palette-text-primary);
}
.info-banner .mud-icon-root {
    flex-shrink: 0;
    color: var(--mud-palette-primary);
}

/* Nav section labels (used by NavMenu). */
.nav-section-label {
    display: block;
    padding: 12px 20px 6px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.75;
}
.nav-context-caption {
    padding: 0 20px 8px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.55;
    letter-spacing: 0.02em;
}

/* shadcn-inspired top bar spacing (height rules live above). */
.app-topbar { padding: 0 16px; }
.app-brand {
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color .1s ease;
}
.app-brand:hover { background-color: rgba(120, 130, 145, 0.08); }
.app-brand .brand-name {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Vercel-style segmented breadcrumb — each level is a rounded pill with an
   inline unfold caret suggesting a future dropdown. Slashes between segments
   are dim/light so the eye tracks the segment names first. */
.crumb-seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px 0 10px;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
    max-width: 260px;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background-color .12s ease;
}
/* First crumb sits flush-left with the header edge — no extra left padding
   on the pill so its label lines up under the sidebar logo's 20px inset.
   Uses descendant (not child) selector because AuthorizeView may wrap. */
.header-left .crumb-seg:first-of-type {
    padding-left: 0;
    margin-left: -2px;
}
.crumb-seg:hover { background: rgba(120, 130, 145, 0.10); }
.crumb-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.crumb-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(120, 130, 145, 0.14);
    color: var(--mud-palette-text-secondary);
    text-transform: none;
}
.crumb-caret {
    opacity: 0.55;
    transition: opacity .12s ease;
    margin-left: 2px;
}
.crumb-seg:hover .crumb-caret { opacity: 1; }
.crumb-slash {
    display: inline-flex;
    align-items: center;
    height: 32px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.35;
    font-size: 1rem;
    font-weight: 300;
    margin: 0 2px;
    user-select: none;
    flex-shrink: 0;
}

/* Small colored dot next to the env name to signal mode at a glance. */
.mode-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
    align-self: center;
}
.dot-live { background: #34E3A8; box-shadow: 0 0 0 3px rgba(52, 227, 168, 0.22); }
.dot-test { background: #55E6FF; box-shadow: 0 0 0 3px rgba(85, 230, 255, 0.22); }

/* Account button + menu — avatar circle in the top bar. Same 32px footprint
   as the theme-toggle icon button so both right-side controls share a
   baseline. */
.app-account-btn {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.app-avatar {
    width: 28px; height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(70, 87, 255, 0.55), rgba(70, 87, 255, 0.25));
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(70, 87, 255, 0.4);
    transition: transform .1s ease;
}
.app-account-btn:hover .app-avatar { transform: scale(1.04); }
.app-account-menu {
    min-width: 240px;
    border-radius: 10px !important;
    border: 1px solid var(--mud-palette-divider) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}
.account-header { display: flex; flex-direction: column; gap: 4px; }

/* Detail page sub-title (below h4). Used inline. */
.entity-subhead {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
    margin-top: 2px;
}

/* Numbered timeline list — used by Permissions guide + Roles guide. */
.lifecycle-list {
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lifecycle-list > li {
    counter-increment: step;
    position: relative;
    padding: 10px 14px 10px 52px;
    border-radius: 10px;
    margin-bottom: 6px;
}
.lifecycle-list > li:hover {
    background: rgba(120, 130, 145, 0.06);
}
.lifecycle-list > li::before {
    content: counter(step);
    position: absolute;
    left: 12px; top: 10px;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(70, 87, 255, 0.15);
    color: var(--mud-palette-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Selection color pinned to primary so highlights don't look default-blue. */
::selection {
    background-color: rgba(70, 87, 255, 0.35);
}

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