/* Page shells: public site (MainLayout, EmptyLayout) and console (ConsoleLayout, ConsoleSideMenu). */

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

.layout-main {
    flex: 1 0 auto;
}

/* Public header and footer */
.sh-public-bar.mud-appbar {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.sh-public-bar .brand-title.mud-typography {
    font-size: 18px;
    font-weight: 600;
}

.sh-header-user .mud-button-label {
    gap: 10px;
}

.sh-public-footer.mud-paper {
    background: var(--mud-palette-surface);
    border-radius: 0;
}

/* Console drawer: rounded panel with a scrolling menu and the user card below it. */
.sh-console .mud-drawer.sh-drawer {
    background: var(--mud-palette-background);
    border: 0;
}

.sh-drawer .mud-drawer-content {
    padding: 8px 0 8px 8px;
    box-sizing: border-box;
    overflow: hidden;
}

.sh-nav-panel {
    height: 100%;
    box-sizing: border-box;
    padding: 10px 8px 8px;
    border-radius: var(--sh-radius-lg);
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sh-nav {
    flex: 1;
    min-height: 0;
    margin-right: -6px;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.sh-brand {
    height: 36px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    font-weight: 600;
}

.sh-brand sup {
    font-size: 10px;
}

.sh-grp {
    padding: 10px 8px 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-disabled);
}

.sh-nav .mud-nav-item {
    padding: 0;
}

.sh-nav .mud-nav-link {
    height: 32px;
    padding: 0 6px;
    align-items: center;
    border-radius: var(--sh-radius-sm);
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.mud-navmenu.sh-nav .mud-nav-link:hover:not(.mud-nav-link-disabled),
.mud-navmenu.sh-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--sh-raised);
    color: var(--mud-palette-text-primary);
}

/* The link icon is drawn as the section's pastel tile; ConsoleNavLink sets --sh-tile. */
.sh-nav .mud-nav-link .mud-nav-link-icon {
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    padding: 3px;
    margin: 0;
    border-radius: var(--sh-radius-sm);
    background: var(--sh-tile, var(--sh-control));
}

/* MudBlazor colours nav icons with a more specific rule. */
.mud-navmenu.sh-nav .mud-nav-link .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--sh-on-tile);
}

.sh-nav .mud-nav-link .mud-nav-link-text {
    margin: 0;
}

.sh-app-switch-wrap {
    position: relative;
    margin: 6px 0 4px;
}

.sh-app-switch.mud-button-root {
    height: 40px;
    padding: 0 8px 0 6px;
    border-radius: var(--sh-radius);
    background: var(--sh-raised);
    color: var(--mud-palette-text-primary);
    box-shadow: none;
}

.sh-app-switch.mud-button-root:hover {
    background: var(--sh-control);
}

.sh-app-switch .mud-button-label {
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
}

.sh-app-switch .mud-button-icon-end {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
}

.sh-app-switch-name {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-user {
    flex: none;
    height: 44px;
    padding: 0 2px 0 6px;
    border-radius: var(--sh-radius);
    background: var(--sh-raised);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sh-user-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--sh-radius-sm);
}

.sh-user-name {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile top bar, only below the desktop breakpoint where the drawer is temporary. */
.sh-mobilebar.mud-appbar {
    background: var(--mud-palette-background);
}

@media (min-width: 960px) {
    .sh-mobilebar.mud-appbar {
        display: none;
    }

    .sh-console .mud-main-content {
        padding-top: 0;
    }
}

@media (max-width: 599px) {
    .sh-public-bar .brand-title.mud-typography,
    .sh-header-user .mud-button-label > span {
        display: none;
    }
}