/* ===========================
   Page Title Breadcrumb UX
   =========================== */

/* Shared by every host page using _PageTitle; independent of feature layouts. */
.page-title-head.workspace-page-header {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    min-height: 4.5rem;
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    background: var(--theme-light-bg-subtle);
}
.workspace-page-header-title,
.workspace-page-header-nav { min-width: 0; overflow-wrap: anywhere; }
.workspace-page-header .breadcrumb { align-items: center; row-gap: .5rem; }
@media (max-width: 575.98px) {
    .page-title-head.workspace-page-header { margin: 1rem 0; padding: 1rem; }
    .workspace-page-header-nav { width: 100%; text-align: left !important; }
}

/* Disable Bootstrap breadcrumb auto separator so our '|' is the only separator */
#page-head-box .breadcrumb-pagetitle .breadcrumb-item + .breadcrumb-item::before {
    content: none !important;
}

/* Pipe separator */
#page-head-box .breadcrumb-pagetitle .breadcrumb-sep {
    list-style: none;
    opacity: .55;
    user-select: none;
}

/* Non-active breadcrumb links: classic link look (LIGHTER blue) */
#page-head-box .breadcrumb-pagetitle a.breadcrumb-linklike {
    /* Uses Bootstrap's RGB var if present; falls back to 13,110,253 */
    color: rgba(var(--bs-link-color-rgb, 13, 110, 253), .60) !important;
    text-decoration: underline !important;
    text-underline-offset: .15em;
}

    #page-head-box .breadcrumb-pagetitle a.breadcrumb-linklike:hover {
        color: rgba(var(--bs-link-color-rgb, 13, 110, 253), .82) !important;
        text-decoration-thickness: 2px;
    }

/* Logout: do NOT set color here — let the theme/system green apply */
#page-head-box .breadcrumb-pagetitle .breadcrumb-logout-btn {
    text-decoration: underline !important;
    text-underline-offset: .15em;
    cursor: pointer;
}

    #page-head-box .breadcrumb-pagetitle .breadcrumb-logout-btn:hover {
        text-decoration-thickness: 2px;
    }

/* Active crumb: subtle red glow pulse (low frequency) */
@keyframes breadcrumbGlowRed {
    0%, 100% {
        text-shadow: none;
        color: inherit;
    }

    50% {
        text-shadow: 0 0 6px rgba(220, 53, 69, .55);
        color: #dc3545;
    }
}

#page-head-box .breadcrumb-pagetitle .breadcrumb-item.active.breadcrumb-active-glow {
    animation: breadcrumbGlowRed 2.8s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #page-head-box .breadcrumb-pagetitle .breadcrumb-item.active.breadcrumb-active-glow {
        animation: none;
    }
}