/* Shell layout: header, navigation, main, footer. Mobile first; the content queue and approvals must work on a phone (BRD section 14). */

.app-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--color-header);
    color: var(--color-header-text);
}

.app-brand {
    color: var(--color-header-text);
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    min-height: var(--tap-size);
    display: inline-flex;
    align-items: center;
}

.app-brand:hover { text-decoration: underline; }

.app-header :focus-visible,
.app-nav :focus-visible {
    outline-color: var(--focus-color-on-dark);
    box-shadow: none;
}

.nav-toggle {
    min-height: var(--tap-size);
    min-width: var(--tap-size);
    padding: 0.25rem 0.9rem;
    /* Shown only on a phone once the interactive circuit is running (below); it does nothing before then. */
    display: none;
    align-items: center;
    gap: 0.5rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-header-text);
    background: transparent;
    border: 2px solid var(--color-header-text);
    border-radius: var(--radius);
    cursor: pointer;
}

.app-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* The menu is a plain list of links, visible by default, so navigation works with no script and before the Blazor circuit
   has connected. Once the layout is interactive (class set after its first interactive render) a phone collapses it into a
   drawer opened by the Menu button. */
.app-nav {
    display: block;
    background: var(--color-header);
    color: var(--color-header-text);
    padding: 0.5rem 1rem 1rem;
}

@media (max-width: 47.99em) {
    .app-shell--interactive .nav-toggle { display: inline-flex; }
    .app-shell--interactive .app-nav { display: none; }
    .app-shell--interactive .app-nav--open { display: block; }
}

.app-main {
    flex: 1;
    padding: 1rem;
    min-width: 0;
}

.app-footer {
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-soft);
    color: var(--color-muted);
    font-size: 0.9rem;
}

.app-footer p { margin: 0; }

/* Menu */
.nav-list, .nav-list--items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-section + .nav-section { margin-top: 0.75rem; }

.nav-group-label {
    display: block;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #d6dbe6;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--tap-size);
    padding: 0.4rem 0.75rem;
    color: var(--color-header-text);
    text-decoration: none;
    border-left: 4px solid transparent;
    border-radius: var(--radius);
}

.nav-link:hover { background: rgba(255, 255, 255, 0.14); text-decoration: underline; }

/* The current page is bold with a bar and underline, never colour alone. */
.nav-link--current {
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    border-left-color: var(--focus-color-on-dark);
    text-decoration: underline;
}

.nav-link__icon { width: 1.25rem; text-align: center; }

/* Wide screens: permanent side menu, no Menu button. */
@media (min-width: 48em) {
    .app-body { flex-direction: row; }

    .app-nav {
        flex: 0 0 15rem;
        padding: 1rem 0.75rem;
    }

    .app-main { padding: 1.5rem 2rem; }
}

@media (min-width: 80em) {
    .app-nav { flex-basis: 17rem; }
}