/* =========================================================
   Authenticated layout AppBar + Breadcrumbs
   Preserved from your supplied appbar.css.
   ========================================================= */

.app-shell-bar {
    background-color: var(--mud-palette-appbar-background) !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-theme-dark .app-shell-bar,
html.dark .app-shell-bar,
body.dark .app-shell-bar {
    color: var(--mud-palette-text-primary) !important;
}

.app-shell-bar .mud-icon-button,
.app-shell-bar .mud-icon-root {
    color: var(--mud-palette-text-primary) !important;
}

.app-shell-bar .mud-breadcrumbs,
.app-breadcrumbs {
    color: var(--mud-palette-text-primary) !important;
}

    .app-shell-bar .mud-breadcrumbs a,
    .app-shell-bar .mud-breadcrumbs li,
    .app-shell-bar .mud-breadcrumbs span,
    .app-shell-bar .mud-breadcrumbs p,
    .app-shell-bar .mud-breadcrumbs svg,
    .app-shell-bar .mud-breadcrumbs .mud-typography,
    .app-shell-bar .mud-breadcrumbs .mud-breadcrumb-item,
    .app-shell-bar .mud-breadcrumbs .mud-breadcrumb-separator,
    .app-shell-bar .mud-breadcrumbs .mud-icon-root {
        color: var(--mud-palette-text-primary) !important;
        fill: currentColor !important;
    }

    .app-shell-bar .mud-breadcrumbs .mud-disabled,
    .app-shell-bar .mud-breadcrumbs [aria-disabled="true"],
    .app-shell-bar .mud-breadcrumbs .mud-breadcrumb-item-disabled {
        color: var(--mud-palette-text-primary) !important;
        opacity: 0.72;
    }

    .app-shell-bar .mud-breadcrumbs a:hover,
    .app-shell-bar .mud-breadcrumbs a:hover .mud-typography,
    .app-shell-bar .mud-breadcrumbs a:hover .mud-icon-root {
        color: var(--mud-palette-text-primary) !important;
        opacity: 0.82;
    }

.app-shell-bar .mud-badge-root {
    color: var(--mud-palette-text-primary) !important;
}

.app-shell-bar.mud-appbar {
    box-shadow: none;
}

/* =========================================================
   Public AppBar: the only file that sizes the public logo.
   Both pages use PublicAppBar and these same rules.
   ========================================================= */

.ws-public-shell {
    --ws-header-height: 80px;
    --ws-logo-height: 80px;
}

.ws-appbar {
    height: var(--ws-header-height, 80px);
    background: rgba(11, 25, 41, .96) !important;
    color: #fff !important;
    border: 0;
    /* Inset separator does not take height away from the 80px logo. */
    box-shadow: inset 0 -1px 0 var(--ws-border-dark);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

    .ws-appbar .mud-toolbar {
        height: 100%;
        min-height: var(--ws-header-height, 80px) !important;
        padding: 0;
    }

    .ws-appbar .ws-appbar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        max-width: var(--ws-content-width);
        height: 100%;
        min-height: 0;
        margin-inline: auto;
        padding-inline: var(--ws-gutter);
    }

    .ws-appbar .ws-brand-link {
        display: inline-flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border-radius: 6px;
        color: #fff;
        text-decoration: none;
    }

    .ws-appbar .ws-brand-logo {
        display: block;
        width: auto;
        height: var(--ws-logo-height, 80px);
        max-width: 100%;
        object-fit: contain;
    }

    /* Compatibility for a text brand if another public page uses it. */
    .ws-appbar .ws-brand {
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: .02em;
    }

    .ws-appbar .ws-nav-desktop {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 14px;
        margin-left: auto;
    }

    .ws-appbar .ws-nav-btn,
    .ws-appbar .ws-btn-primary {
        min-height: 44px;
        padding: 10px 18px;
        border-radius: 9px;
        font-family: var(--ws-font-body) !important;
        font-size: .875rem !important;
        font-weight: 600 !important;
        line-height: 1.4;
        text-transform: none !important;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: none !important;
        transition: background-color 160ms ease;
    }

    .ws-appbar .ws-nav-btn {
        color: #e4edf3 !important;
    }

        .ws-appbar .ws-nav-btn:hover {
            background: #1c3044 !important;
        }

    .ws-appbar .ws-btn-primary {
        background: var(--ws-signal) !important;
        color: var(--ws-ink) !important;
    }

        .ws-appbar .ws-btn-primary:hover {
            background: #7ce4ed !important;
            transform: none;
        }

    .ws-appbar .ws-nav-menu-btn {
        color: #e4edf3 !important;
    }

    .ws-appbar :where(a, button):focus-visible {
        outline: 3px solid var(--ws-signal);
        outline-offset: 5px;
    }

@media (max-width: 600px) {
    /* Keep the original 80px logo. Let the header grow if the links wrap. */
    .ws-appbar {
        position: sticky !important;
        top: 0;
        height: auto;
        flex-shrink: 0;
    }

        .ws-appbar .mud-toolbar {
            height: auto;
        }

        .ws-appbar .ws-appbar-inner {
            height: auto;
            min-height: var(--ws-header-height, 80px);
            flex-wrap: wrap;
            gap: 8px;
            padding-block: 0;
        }

        .ws-appbar .ws-nav-desktop {
            flex-wrap: wrap;
            gap: 4px;
        }

        .ws-appbar .ws-nav-btn, .ws-appbar .ws-btn-primary {
            padding-inline: 12px;
        }

        .ws-appbar .ws-brand {
            font-size: .98rem;
        }
}

@media (max-width: 400px) {
    .ws-appbar .ws-nav-btn {
        padding-inline: 8px;
    }
}