.navbar-fixed-top {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1030; /* similar to Bootstrap fixed header layering */
        }

        h4, .h4 {
            font-size: 1rem;
            margin-top: 0;
            margin-bottom: .5rem;
            font-weight: 500;
            line-height: 1.2;
        }

        /* Show folders: prevent icon "jump" on hover (theme uses top:-64px sprite effect) */
        .show-folders-service .nav-tabs li a i img {
            position: static !important;
            top: auto !important;
            display: block;
        }
        .show-folders-service .nav-tabs li a i img:last-child {
            display: none;
        }
        .show-folders-service .nav-tabs > li > a:hover i img:first-child,
        .show-folders-service .nav-tabs > li > a:focus i img:first-child,
        .show-folders-service .nav-tabs > li.active > a i img:first-child {
            display: none;
        }
        .show-folders-service .nav-tabs > li > a:hover i img:last-child,
        .show-folders-service .nav-tabs > li > a:focus i img:last-child,
        .show-folders-service .nav-tabs > li.active > a i img:last-child {
            display: block;
        }

/* --- BS5 compatibility for show_folders "tabs" markup (make it a vertical list) --- */
.show-folders-service .nav.nav-tabs {
    border-bottom: 0;
    display: block;            /* cancel BS5 flex tabs look */
    flex-wrap: initial;
}

.show-folders-service .nav.nav-tabs > li {
    width: 100%;
    float: none;               /* legacy-safe */
    display: block;
    margin: 0;
    list-style: none;
}

.show-folders-service .nav.nav-tabs > li > a {
    display: block;            /* full clickable row */
    border: 0;                 /* remove tab borders (BS5/BS3 mix) */
    background: transparent;
    text-decoration: none;
}

/* Keep hover/active background consistent even without BS3 "active" semantics */
.show-folders-service .nav.nav-tabs > li > a:hover,
.show-folders-service .nav.nav-tabs > li > a:focus {
    background-color: #007dbb;
    color: #fff;
}

/* Make sure text inside becomes white on hover (you have spans/small) */
.show-folders-service .nav.nav-tabs > li > a:hover span,
.show-folders-service .nav.nav-tabs > li > a:hover small,
.show-folders-service .nav.nav-tabs > li > a:focus span,
.show-folders-service .nav.nav-tabs > li > a:focus small {
    color: #fff;
}

/* Calendar view: display items as a responsive grid (Bootstrap 5 friendly) */
.show-folders-grid .nav.nav-tabs {
    border-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.show-folders-grid .nav.nav-tabs > li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;

    /* the template sets width: 19% on desktop / 100% on mobile inline;
       we let that drive the layout, but also provide a sane minimum */
    min-width: 180px;
}

.show-folders-grid .nav.nav-tabs > li > a {
    display: block;
    height: 100%;
    padding: 18px 12px;
    border: 1px solid #f2f2f2;
    border-radius: 6px;
    background: #fff;
}

.show-folders-grid .nav.nav-tabs > li > a:hover,
.show-folders-grid .nav.nav-tabs > li > a:focus {
    background-color: #007dbb;
    border-color: #007dbb;
    color: #fff;
}

/* Breadcrumb (page-banner): white links + white divider "»" */
.page-banner .breadcrumb {
    --bs-breadcrumb-divider: "»";
}

.page-banner .breadcrumb-item + .breadcrumb-item::before {
    color: #fff;
    opacity: 0.9; /* optional */
}

.page-banner .breadcrumb a,
.page-banner .breadcrumb-item {
    color: #fff;
}

.page-banner .breadcrumb-item.active {
    color: #fff;
    opacity: 0.9; /* optional */
}

/* Breadcrumb: single row + nice divider (») */
.page-banner .breadcrumb {
    --bs-breadcrumb-divider: "»";
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    white-space: nowrap;
    gap: 0; /* keep Bootstrap spacing behavior */
    color: #fff;
}

/* Make sure items don't become blocks */
.page-banner .breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

/* Optional: make the scrollbar less annoying (keeps functionality) */
.page-banner .breadcrumb {
    scrollbar-width: thin;           /* Firefox */
}
.page-banner .breadcrumb::-webkit-scrollbar {
    height: 6px;                     /* Chromium */
}
.page-banner .breadcrumb::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.35);
    border-radius: 10px;
}