.navbar {
    background: var(--cb-navbar-tint) !important;
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 1px 2px rgba(60, 40, 20, 0.06),
        0 10px 24px rgba(60, 40, 20, 0.14),
        0 24px 48px rgba(60, 40, 20, 0.10);
    z-index: 2;
    padding: 0px;
}

@media (prefers-color-scheme: dark) {
    .navbar {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 1px 2px rgba(0, 0, 0, 0.50),
            0 10px 24px rgba(0, 0, 0, 0.55),
            0 24px 48px rgba(0, 0, 0, 0.40);
    }
}

nav {
    position: relative;
    border-bottom: 1px solid var(--cb-navbar-border);
    padding-bottom: 10px;
}

/* Warm gradient divider — replaces the old chunky 7px bar */
nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(168, 138, 96, 0) 0%,
        rgba(212, 152, 115, 0.65) 30%,
        rgba(155, 184, 158, 0.65) 70%,
        rgba(168, 138, 96, 0) 100%
    );
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    nav::after {
        background: linear-gradient(
            90deg,
            rgba(212, 181, 137, 0) 0%,
            rgba(212, 181, 137, 0.45) 30%,
            rgba(125, 145, 110, 0.45) 70%,
            rgba(212, 181, 137, 0) 100%
        );
    }
}

/* Editor-only 3-column grid layout (utilities / sizes / views).
   Scoped so it does not break simple Bootstrap navs on other pages
   (e.g. the index dashboard) that share the parchment-glass look. */
.cb-builder-nav #navbarNav {
    display: grid !important;
    grid-template-areas: "utilities sizes views";
    grid-template-columns: 50% 35%;
    max-height: 104px;
}


.cb-builder-nav .navbar-detail-bar {
    margin-right: 20px;
    margin-left: 50px;
    line-height: 15px;
}

/* Logo lift — subtle warm drop shadow to ground it on the parchment */
.navbar-brand .logo-thumb {
    filter: drop-shadow(0 2px 6px rgba(60, 40, 20, 0.12));
    transition: filter 0.3s ease, transform 0.3s ease;
}

.navbar-brand:hover .logo-thumb {
    filter: drop-shadow(0 4px 14px rgba(254, 132, 0, 0.30));
    transform: translateY(-1px);
}