:root {
    --app-topbar-height: 60px;
}

@media (max-width: 991.98px) {
    :root {
        --app-topbar-height: 56px;
    }
}

.app-breadcrumbs {
    position: -webkit-sticky;
    position: sticky;
    top: var(--app-topbar-height, 60px);
    z-index: 7;
    width: 100%;
    padding: 0.45rem clamp(1rem, 2.5vw, 2rem);
    background: #f6f6f6;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.app-breadcrumbs nav {
    background: transparent;
    margin: 0;
    padding: 0;
}

.app-breadcrumbs .breadcrumb {
    --bs-breadcrumb-divider: "›";
    align-items: center;
    font-size: 0.875rem;
}

.app-breadcrumbs .breadcrumb-item,
.app-breadcrumbs .breadcrumb-item a {
    color: #64748b;
}

.app-breadcrumbs .breadcrumb-item a {
    font-weight: 600;
    text-decoration: none;
}

.app-breadcrumbs .breadcrumb-item a:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.app-breadcrumbs .breadcrumb-item.active {
    max-width: min(48vw, 34rem);
    overflow: hidden;
    color: #1e293b;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .app-breadcrumbs {
        padding: 0.5rem 1rem;
        overflow-x: auto;
    }

    .app-breadcrumbs .breadcrumb {
        width: max-content;
        max-width: none;
        font-size: 0.8rem;
    }

    .app-breadcrumbs .breadcrumb-item.active {
        max-width: 55vw;
    }
}

@media print {
    .app-breadcrumbs {
        display: none !important;
    }
}