.app-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 17rem minmax(0, 1fr);
}

.app-sidebar {
    border-right: 1px solid var(--surface-border);
    background: var(--surface-card);
    padding: 1.5rem 1rem;
}

.app-mobile-navigation { display: none; }

.app-main {
    min-width: 0;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-card);
    backdrop-filter: blur(18px);
    padding: 1rem 1.5rem;
}

.app-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.app-topbar__brand-block {
    display: grid;
    gap: 0.2rem;
}

.app-topbar__brand-mark {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    background: var(--color-volt);
    box-shadow: 0 0 0 0.3rem rgba(114, 179, 0, 0.18);
}

.app-topbar__subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.app-topbar__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app-topbar__user {
    display: grid;
    justify-items: end;
    gap: 0.1rem;
}

.app-topbar__user-secondary {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.app-content {
    padding: 1.5rem;
}

.app-nav {
    display: grid;
    gap: 1.25rem;
}

.app-nav__group {
    display: grid;
    gap: 0.35rem;
}

.app-nav__title {
    margin: 0 0 0.35rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.app-nav__link {
    border-left: 2px solid transparent;
    padding: 0.65rem 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.app-nav__link:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

.app-nav__link.active {
    border-left-color: var(--color-volt);
    background: rgba(114, 179, 0, 0.08);
    color: var(--text-primary);
}

.app-nav__caption {
    display: grid;
    gap: 0.75rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.dashboard-grid,
.metrics-grid,
.stack-grid {
    display: grid;
    gap: 1rem;
}

.dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stack-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
    align-items: start;
}

.stat-card__label {
    margin: 0 0 0.4rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.stat-card__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0;
}

.status-list,
.legacy-list,
.trace-list {
    display: grid;
    gap: 0.75rem;
}

.status-list__item,
.legacy-list__item,
.trace-list__item {
    display: grid;
    gap: 0.35rem;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.status-list__item p,
.legacy-list__item p,
.trace-list__item p,
.trace-list__item ul {
    margin: 0;
    color: var(--text-secondary);
}

.quick-links-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.quick-link-card {
    display: grid;
    gap: 0.45rem;
    min-height: 100%;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.quick-link-card:hover {
    transform: translateY(-1px);
    border-color: rgba(114, 179, 0, 0.55);
    background: rgba(114, 179, 0, 0.08);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}

.quick-link-card strong {
    font-size: 0.98rem;
}

.quick-link-card p {
    margin: 0;
    color: var(--text-secondary);
}

.inline-form,
.filters-grid {
    display: grid;
    gap: 1rem;
}

.filters-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.k-form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.error-banner {
    border: 1px solid rgba(255, 77, 0, 0.3);
    border-radius: var(--radius-md);
    background: rgba(255, 77, 0, 0.08);
    color: var(--text-primary);
    padding: 0.9rem 1rem;
}

.subtle-text {
    color: var(--text-secondary);
}

.table-caption {
    margin: 0 0 1rem;
    color: var(--text-secondary);
}

.detail-drawer {
    position: sticky;
    top: 6rem;
}

.detail-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.detail-drawer__title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 1.35rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.detail-drawer__meta {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.detail-drawer__meta strong {
    color: var(--text-primary);
}

.page-note {
    display: grid;
    gap: 0.25rem;
}

.page-note p {
    margin: 0;
    color: var(--text-secondary);
}

.page-note strong {
    color: var(--text-primary);
}

.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.breadcrumb span::after {
    content: "/";
    margin-left: 0.45rem;
}

.breadcrumb span:last-child::after {
    content: none;
}

.login-validation {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 77, 0, 0.3);
    border-radius: var(--radius-md);
    background: rgba(255, 77, 0, 0.08);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.login-validation:empty {
    display: none;
}

.login-validation ul {
    margin: 0;
    padding-left: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    color: var(--text-primary);
    font-size: 0.85rem;
}

.blazor-error-boundary {
    background: rgba(255, 77, 0, 0.08);
    border: 1px solid rgba(255, 77, 0, 0.3);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 1rem;
}

@media (max-width: 1024px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        display: none;
    }

    .app-mobile-navigation { display: block; margin: 0; padding-inline: 1rem; background: var(--surface-card); }

    .stack-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .app-topbar,
    .app-content {
        padding: 1rem;
    }

    .app-topbar {
        position: static;
        align-items: flex-start;
        flex-direction: column;
    }

    .app-topbar__meta {
        justify-content: flex-start;
    }

    .filters-grid {
        grid-template-columns: 1fr;
    }
}
.skip-link { position: absolute; top: -5rem; left: 1rem; z-index: 100; padding: 1rem; background: var(--surface-card); color: var(--text-primary); }
.skip-link:focus { top: 1rem; }

.contextual-help {
    margin-top: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    max-width: 70rem;
}

.contextual-help summary {
    cursor: pointer;
    font-weight: 600;
}

.contextual-help p {
    line-height: 1.6;
}

.contextual-help label {
    display: block;
    margin-bottom: var(--space-2);
}

.contextual-help textarea {
    width: 100%;
    resize: vertical;
}
.catalog-demo { display: grid; gap: var(--space-4); }
.catalog-demo > .k-button, .catalog-demo .k-filter-bar > .k-button { justify-self: start; }
.catalog-demo form { display: grid; gap: var(--space-4); }
.catalog-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.catalog-result { min-height: 44px; display: flex; align-items: center; padding-block: var(--space-2); border-top: 1px solid var(--surface-divider); font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5; }
.catalog-icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-3); padding-block: var(--space-3); }
.catalog-icons > span { display: flex; align-items: center; gap: var(--space-2); font-size: 0.75rem; color: var(--text-secondary); }
.catalog-demo .k-page-header__title { font-size: 1.25rem; }
.catalog-demo .k-page-header { flex-direction: column; align-items: flex-start; margin-bottom: 0; }
.catalog-demo .k-table { min-width: 28rem; }
.catalog-demo .k-table th { vertical-align: middle; }
.catalog-demo .k-table th .k-button { padding-inline: 0.25rem; }
@media (max-width: 480px) { .catalog-form-grid { grid-template-columns: 1fr; } }

.report-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin-block: 1.5rem; }
.report-summary > div { min-width: 0; }
.report-summary dt { color: var(--text-secondary); }
.report-summary dd { margin: 0.25rem 0 0; font-weight: 700; overflow-wrap: anywhere; }

/* Operational shell: one navigation tree across viewport sizes. */
.app-shell--grouped { display:grid; grid-template-columns:240px minmax(0,1fr); grid-template-rows:52px minmax(0,1fr); min-height:100dvh; }
.app-shell--grouped > .k-app-header { grid-column:1 / -1; grid-row:1; }
.app-shell--grouped > .app-content { grid-column:2; grid-row:2; min-width:0; }
.k-app-header { height:52px; box-sizing:border-box; display:flex; align-items:center; gap:1rem; padding:0 1rem; position:sticky; top:0; z-index:30; background:var(--surface-card); border-bottom:1px solid var(--surface-border); min-width:0; }
.k-app-header__brand { text-decoration:none; color:var(--text-primary); white-space:nowrap; }
.k-app-header__tenant { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; color:var(--text-secondary); }
.k-app-header__actions { display:flex; gap:.5rem; align-items:center; margin-left:auto; flex-shrink:0; }
.k-shell-menu { display:none; }
.k-nav-drawer { grid-column:1; grid-row:2; position:sticky; top:52px; margin:0; width:240px; height:calc(100dvh - 52px); max-height:none; max-width:none; box-sizing:border-box; padding:1rem .75rem; border:0; border-right:1px solid var(--surface-border); background:var(--surface-card); color:var(--text-primary); overflow:auto; }
.k-nav-drawer__close { display:none; }
.app-nav { display:flex; flex-direction:column; gap:1rem; }
.app-nav__search { display:grid; gap:.35rem; position:sticky; top:-1rem; background:var(--surface-card); padding:.5rem 0; z-index:1; }
.app-nav__search input { width:100%; min-width:0; box-sizing:border-box; padding:.55rem; background:var(--surface-card); color:var(--text-primary); border:1px solid var(--surface-border); border-radius:var(--radius-sm); }
.app-nav__search small { color:var(--text-secondary); }
.k-nav-section { margin-bottom:.5rem; }
.k-nav-section > summary { cursor:pointer; padding:.6rem .35rem; font-weight:600; color:var(--text-primary); }
.k-nav-section__links { display:grid; gap:.15rem; }
.app-nav__link { border-left-width:1px; overflow-wrap:anywhere; min-height:32px; box-sizing:border-box; padding:.5rem .65rem; }
.app-nav [hidden] { display:none !important; }
.k-shell-account { position:relative; }
.k-shell-account > summary { cursor:pointer; padding:.5rem; }
.k-shell-account__panel { position:absolute; right:0; top:calc(100% + .5rem); width:min(20rem,calc(100vw - 2rem)); box-sizing:border-box; padding:1rem; background:var(--surface-card); border:1px solid var(--surface-border); display:grid; gap:.75rem; max-height:calc(100dvh - 80px); overflow:auto; overflow-wrap:anywhere; }
.k-shell-theme { display:flex; flex-wrap:wrap; gap:.25rem; }
.k-shell-theme [aria-pressed=true] { background:var(--color-volt); color:#0a0a0a; }
.k-shell-help { width:min(42rem,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); box-sizing:border-box; overflow:auto; padding:1rem; background:var(--surface-card); color:var(--text-primary); border:1px solid var(--surface-border); }
.k-shell-help::backdrop,.k-nav-drawer::backdrop { background:rgb(0 0 0 / .5); }
.k-nav-drawer__close { min-height:44px; font:inherit; cursor:pointer; border:1px solid var(--surface-border); border-radius:var(--radius-sm); background:var(--surface-card); color:var(--text-primary); padding:.5rem .75rem; }
.k-app-header :focus-visible,.k-nav-drawer :focus-visible,.k-shell-help :focus-visible { outline:2px solid var(--text-primary); outline-offset:2px; }
@media(max-width:1023px) {
 .app-shell--grouped { grid-template-columns:minmax(0,1fr); grid-template-rows:48px minmax(0,1fr); }
 .app-shell--grouped > .app-content { grid-column:1; padding:1rem; }
 .k-app-header { height:48px; gap:.5rem; padding:0 .5rem; }
 .k-shell-menu { display:inline-block; }
 .k-nav-drawer { position:fixed; inset:0 auto 0 0; width:min(320px,calc(100vw - 2rem)); height:100dvh; max-height:100dvh; padding:1rem; z-index:50; }
 .k-nav-drawer__close { display:block; margin-bottom:1rem; }
 .k-nav-drawer:not([open]) { display:none; }
 .k-app-header button,.k-shell-account > summary,.k-shell-theme button,.k-nav-drawer__close,.k-nav-section summary,.app-nav__link { min-height:44px; }
 .app-nav__search input { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { .app-nav__link { transition:none; } }

/* Operational shell and one-click contextual reading. */
.app-shell--grouped > .app-content { padding:.75rem 1rem; }
.k-app-header__brand { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; font:800 1.25rem/1 var(--font-display); letter-spacing:-.02em; }
.k-app-header__logo { display:block; width:32px; height:32px; flex-shrink:0; }
.k-app-header__logo--dark { display:none; }
html.dark .k-app-header__logo--light { display:none; }
html.dark .k-app-header__logo--dark { display:block; }
.k-app-header__tenant { font-size:.8125rem; font-weight:500; max-width:22ch; }
.k-app-header .k-button { display:inline-flex; justify-content:center; align-items:center; min-width:44px; min-height:44px; padding:.5rem; }
.k-app-header svg, .k-shell-help__heading svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.k-shell-account > summary { list-style:none; }
.k-shell-account > summary::-webkit-details-marker { display:none; }
.k-shell-account__panel { border-radius:var(--radius-md); box-shadow:0 12px 32px rgb(0 0 0 / .2); z-index:40; }
.k-shell-help { width:min(40rem,calc(100vw - 2rem)); padding:0 1.25rem 1.25rem; border-radius:var(--radius-md); }
.k-shell-help__heading { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; background:var(--surface-card); }
.k-shell-help__heading h2 { margin:0; font-size:1.125rem; font-weight:600; }
.k-shell-help .contextual-help { margin:0; padding:0; border:0; background:transparent; font-size:1rem; line-height:1.6; max-width:65ch; }
.k-shell-help .contextual-help > p { margin:0 0 1rem; }
.contextual-help__question { margin-top:1.25rem; border-top:1px solid var(--surface-divider); padding-top:.5rem; }
.contextual-help__question > summary { min-height:44px; cursor:pointer; align-content:center; font-weight:600; }
@media(max-width:640px) {
 .k-app-header__wordmark { display:none; }
 .k-app-header__tenant { display:none; }
 .app-shell--grouped > .app-content { padding:.5rem .75rem; }
 .k-shell-help { width:100%; max-width:100%; margin:auto 0 0; max-height:85dvh; border-radius:var(--radius-md) var(--radius-md) 0 0; }
}

@media(min-width:1024px) { .k-app-header .k-shell-menu { display:none; } }
h1.k-page-header__title[tabindex="-1"]:focus { outline:none; }

.k-shell-theme .k-button[aria-pressed="true"], .k-shell-theme .k-button[aria-pressed="true"]:hover:not(:disabled), .k-shell-theme .k-button[aria-pressed="true"]:focus { background:var(--color-volt); color:#0a0a0a; }

html:has(.k-detail-panel:modal) { overflow:hidden; }