/* =========================================================
   Authenticated layout AppBar + Breadcrumbs
   ========================================================= */

.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);
}

/* If your theme has a dark appbar and you want white text there */
.mud-theme-dark .app-shell-bar,
html.dark .app-shell-bar,
body.dark .app-shell-bar {
    color: var(--mud-palette-text-primary) !important;
}

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

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

    /* Breadcrumb links, labels, icons, separators */
    .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;
    }

    /* Current / disabled breadcrumb */
    .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;
    }

    /* Hover should not become primary blue/purple */
    .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;
    }

/* Badge/icon color in the appbar */
.app-shell-bar .mud-badge-root {
    color: var(--mud-palette-text-primary) !important;
}

/* Optional: make transparent/light appbars look clean */
.app-shell-bar.mud-appbar {
    box-shadow: none;
}

.ws-appbar {
    background: rgba(10, 14, 22, 0.72) !important;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

.ws-appbar-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ws-brand-link {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    text-decoration: none;
}

.ws-brand {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.ws-nav-desktop {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.ws-nav-btn {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 600;
    border-radius: 999px !important;
    padding-inline: 1rem !important;
}

    .ws-nav-btn:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
    }

.ws-btn-primary {
    border-radius: 999px !important;
    padding: .85rem 1.35rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(29, 78, 216, 0.28);
    transition: transform .25s ease, box-shadow .25s ease;
}

.ws-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(29, 78, 216, 0.36);
}

.ws-brand-logo {
    height: 80px;
    width: auto;
    object-fit: contain;
}


@media (max-width: 600px) {
    .ws-appbar-inner {
        min-height: 72px;
    }

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

    .ws-brand-logo {
        height: 80px;
    }
}