/*
 * Header skins — applied platform-wide via the header_skin global setting
 * (admin > Header Skins). Everything is scoped under .skin-porcelain /
 * .skin-espresso on the authenticated top bar; "classic" adds no class,
 * so the default look never depends on this file.
 */

/* ==================== BAR PROPORTIONS (facelift) ====================== */

/* the classic bar is 50px via an inline style; skins get the mockup height */
.navbar__menu-container.skin-porcelain,
.navbar__menu-container.skin-espresso {
    height: 60px !important;
}
/* the side menus are nested in the bar and pinned to the old height */
.navbar__menu-container.skin-porcelain .navbar-vertical-left,
.navbar__menu-container.skin-espresso .navbar-vertical-left,
.navbar__menu-container.skin-porcelain .navbar-vertical-right,
.navbar__menu-container.skin-espresso .navbar-vertical-right {
    top: 60px !important;
}

/* ==================== UNIFORM ICON COLOR (facelift) =================== */

/* the strip icons are baked-color SVGs with mixed palettes; flatten them
   to one tone per skin (hover restores emphasis). Dropdown panels keep
   their original colors. */
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item i.fa,
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item .dropdown-call-btn img,
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item .dropdown-call-btn > svg {
    filter: brightness(0);
    opacity: .55;
    transition: opacity .15s;
}
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item:hover i.fa,
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item:hover .dropdown-call-btn img,
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item:hover .dropdown-call-btn > svg {
    opacity: .9;
}
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item .dropdown-menu i.fa,
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item .dropdown-menu img,
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item .dropdown-menu svg {
    filter: none;
    opacity: 1;
}

.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item .dropdown-call-btn img,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item .dropdown-call-btn > svg {
    filter: brightness(0) invert(.96) sepia(.08);
    opacity: .85;
}
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item:hover .dropdown-call-btn img,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item:hover .dropdown-call-btn > svg {
    opacity: 1;
}
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item .dropdown-menu img,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item .dropdown-menu svg {
    filter: none;
    opacity: 1;
}

/* ============== SKIN-ONLY ELEMENTS (hidden in Classic) =============== */

.skin-new-label,
.skin-user-chevron,
.skin-logout-item,
.skin-org-avatar,
.skin-menu-who,
.skin-menu-item,
.skin-collapse-icon {
    display: none;
}

/* ------------- sidebar collapse: panel icon instead of << ------------- */

.navbar__menu-container.skin-porcelain .open-sidebar,
.navbar__menu-container.skin-espresso .open-sidebar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    transition: background .15s;
}
.navbar__menu-container.skin-porcelain .open-sidebar > span,
.navbar__menu-container.skin-espresso .open-sidebar > span {
    display: none !important;
}
.navbar__menu-container.skin-porcelain .skin-collapse-icon,
.navbar__menu-container.skin-espresso .skin-collapse-icon {
    display: block;
}
.navbar__menu-container.skin-porcelain .open-sidebar {
    background: transparent;
    border: none;
    color: #6E6660;
}
.navbar__menu-container.skin-porcelain .open-sidebar:hover {
    background: #FFF1F5;
    color: #DB3A57;
}

/* --------------- avatar menu opens on hover (and click) --------------- */

.navbar__menu-container.skin-porcelain .nav-user-item .dropdown:hover #user-dropdown-menu,
.navbar__menu-container.skin-espresso .nav-user-item .dropdown:hover #user-dropdown-menu {
    display: block;
    left: auto;
    right: 0;
    top: 100%;
    margin-top: 4px;
}

/* ----------------- avatar dropdown: the mockup menu ------------------- */

.navbar__menu-container.skin-porcelain #user-dropdown-menu,
.navbar__menu-container.skin-espresso #user-dropdown-menu {
    min-width: 232px;
    padding: 12px !important;
    border: 1px solid #EAE4DC;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(60, 45, 30, .13);
}
.navbar__menu-container.skin-porcelain #user-dropdown-menu .skin-hide-item,
.navbar__menu-container.skin-espresso #user-dropdown-menu .skin-hide-item {
    display: none;
}
.navbar__menu-container.skin-porcelain .skin-menu-who,
.navbar__menu-container.skin-espresso .skin-menu-who {
    display: block;
    padding: 2px 10px 10px;
    border-bottom: 1px solid #F3EEE7;
    margin-bottom: 8px;
}
.skin-menu-who__name {
    font-weight: 600;
    font-size: 14px;
    color: #2B2622;
}
.skin-menu-who__email {
    font-size: 12.5px;
    color: #6E6660;
    margin-top: 2px;
}
.navbar__menu-container.skin-porcelain .skin-menu-item,
.navbar__menu-container.skin-espresso .skin-menu-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    color: #2B2622 !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.navbar__menu-container.skin-porcelain .skin-menu-item:hover,
.navbar__menu-container.skin-espresso .skin-menu-item:hover {
    /* the ONE menu hover (ghost-button type) — was hardcoded #FFF1F5 pink, which
       flashed light on the dark skin */
    background: var(--bb-primary-soft) !important;
    color: var(--bb-primary) !important;
}
/* unified menu anatomy (owner): every account-menu row wears the same hairline
   separator the +New / fly-out / cockpit menus have; Log out stays last, no line */
.navbar__menu-container.skin-porcelain .skin-menu-item,
.navbar__menu-container.skin-espresso .skin-menu-item,
.navbar__menu-container.skin-porcelain .bb-skin-switch,
.navbar__menu-container.skin-espresso .bb-skin-switch {
    border-bottom: 1px solid var(--bb-border);
    padding-bottom: 10px;
    margin-bottom: 8px;
}

/* ------------- company switcher pill: avatar chip + type -------------- */

.navbar__menu-container.skin-porcelain .skin-org-avatar,
.navbar__menu-container.skin-espresso .skin-org-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    margin-right: 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
}
.navbar__menu-container.skin-porcelain .skin-org-avatar {
    background: #FFF8E7;
    border: 1px solid #F0E6CE;
    color: #B45D08;
}
.navbar__menu-container.skin-espresso .skin-org-avatar {
    background: rgba(245, 169, 60, .16);
    color: #F5A93C;
}

.navbar__menu-container.skin-porcelain #organisation-info .organisation-name,
.navbar__menu-container.skin-espresso #organisation-info .organisation-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    word-break: normal;
}
.navbar__menu-container.skin-porcelain #organisation-info .organisation-plan,
.navbar__menu-container.skin-espresso #organisation-info .organisation-plan {
    font-size: 10.5px;
    line-height: 1.2;
}

/* ---- MOBILE header fit (owner 2026-07-11: the burger was pushed off-screen —
   the org pill (avatar + name + plan) ran to 312px on a 370px viewport, so the
   75px burger overflowed by ~17px). Shrink the name, tighten the pill padding,
   and drop the plan chip on the smallest phones so avatar + name + burger all
   sit inside the frame. The org identity (avatar + name) is what matters on
   mobile; the plan tier is secondary chrome. ---- */
@media (max-width: 767.98px) {
    .navbar__menu-container.skin-porcelain #organisation-info .organisation-name,
    .navbar__menu-container.skin-espresso #organisation-info .organisation-name {
        max-width: 40vw;
    }
    .navbar__menu-container.skin-porcelain #organisation-info > div.d-flex,
    .navbar__menu-container.skin-espresso #organisation-info > div.d-flex {
        padding: 4px 8px 4px 4px;
    }
    /* pack logo + org pill to the LEFT; the burger rides its own ml-auto to the right.
       the header row is justify-content:space-between (correct on desktop with the search
       box + right-side cluster) but on mobile only logo/pill/burger show and space-between
       scatters them into dead gaps (owner flagged the empty bands). Scope by :has(the org
       pill) so ONLY the auth header row flips — never the sidebar/guest rows. */
    .navbar__menu-container .d-flex.justify-content-between:has(#organisation-info) {
        justify-content: flex-start !important;
    }
    /* the burger sits in a wrapper (the ml-auto is on the inner button, so flex-start left it
       stranded beside the pill) — push the row child that holds the burger to the right edge */
    .navbar__menu-container .d-flex.justify-content-between:has(#organisation-info) > *:has(.navbar-toggler),
    .navbar__menu-container .d-flex.justify-content-between:has(#organisation-info) > .navbar-toggler {
        margin-left: auto !important;
    }
    /* the org pill GROWS to fill the space between the logo and the burger — no stranded gap
       (owner: "why the gap between the burger and the org button?"). It reads as a full-width
       org-context bar; the switcher chevron shows on the right so it looks like a selector,
       not a bar with dead space. The burger keeps its ml-auto → it stays hard right. */
    .navbar__menu-container #organisation-info { flex: 1 1 auto !important; min-width: 0; }
    .navbar__menu-container #organisation-info > div.d-flex { width: 100%; }
    .navbar__menu-container #organisation-info .organisation-name { margin-right: auto !important; }
    .navbar__menu-container #organisation-info .organisation-select { display: flex !important; }
}
@media (max-width: 480px) {
    /* smallest phones: the plan chip goes, the name gets the reclaimed room */
    .navbar__menu-container #organisation-info .organisation-plan { display: none !important; }
    .navbar__menu-container.skin-porcelain #organisation-info .organisation-name,
    .navbar__menu-container.skin-espresso #organisation-info .organisation-name {
        max-width: 46vw;
    }
}

.navbar__menu-container.skin-porcelain #switch-company-btn,
.navbar__menu-container.skin-espresso #switch-company-btn {
    background: none;
    border: none;
    padding: 0 0 0 8px;
    display: flex;
    align-items: center;
}
.navbar__menu-container.skin-porcelain #switch-company-btn img,
.navbar__menu-container.skin-espresso #switch-company-btn img {
    width: 11px;
    height: auto;
}
.navbar__menu-container.skin-porcelain #switch-company-btn img {
    opacity: .55;
}
.navbar__menu-container.skin-espresso #switch-company-btn img {
    filter: brightness(0) invert(.85);
    opacity: .9;
}

/* -------- "+ New": the add-entity plus becomes a labeled button ------- */

.navbar__menu-container.skin-porcelain #add-entity-button,
.navbar__menu-container.skin-espresso #add-entity-button {
    background: #DB3A57;
    border-radius: 11px;
    padding: 10px 17px !important;
    line-height: 1;
    transition: background .15s;
}
.navbar__menu-container.skin-porcelain #add-entity-button:hover,
.navbar__menu-container.skin-espresso #add-entity-button:hover {
    background: #C22F4A;
}
.navbar__menu-container.skin-porcelain #add-entity-button > svg,
.navbar__menu-container.skin-espresso #add-entity-button > svg {
    width: 17px;
    height: 17px;
    vertical-align: middle;
    filter: brightness(0) invert(1);
}
.navbar__menu-container.skin-porcelain .skin-new-label,
.navbar__menu-container.skin-espresso .skin-new-label {
    display: inline;
    vertical-align: middle;
    margin-left: 8px;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
}

/* ---------------- separators around the icon cluster ----------------- */

/* drawn as pseudo-element lines: a border here would follow the li's
   10px hover radius and render curved */
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-add-entity,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-add-entity {
    position: relative;
    padding-right: 14px;
    margin-right: 14px !important;
    align-self: center;
}
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-user-item,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-user-item {
    position: relative;
    padding-left: 14px;
    margin-left: 6px;
    align-self: center;
}
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-add-entity::after,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-add-entity::after,
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-user-item::before,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-user-item::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 26px;
}
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-add-entity::after,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-add-entity::after { right: 0; }
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-user-item::before,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-user-item::before { left: 0; }
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-add-entity::after,
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-user-item::before { background: #EAE4DC; }
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-add-entity::after,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-user-item::before { background: #3A2F25; }

/* --------- avatar: initials circle + chevron, logout in menu ---------- */

.navbar__menu-container.skin-porcelain #logout-btn,
.navbar__menu-container.skin-espresso #logout-btn,
.navbar__menu-container.skin-porcelain .nav-user-item i.fa-user,
.navbar__menu-container.skin-espresso .nav-user-item i.fa-user {
    display: none;
}
.navbar__menu-container.skin-porcelain .nav-user-item .username,
.navbar__menu-container.skin-espresso .nav-user-item .username {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0 !important;
    font-size: 12.5px;
    font-weight: 700;
}
.navbar__menu-container.skin-porcelain .nav-user-item .username {
    background: #2B2622;
    color: #FFF8E7 !important;
}
/* beat the broader espresso .username recolor (it has higher specificity) */
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-user-item .username,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-user-item .username span {
    background: #FFF8E7;
    color: #221B15 !important;
}
.navbar__menu-container.skin-porcelain .skin-user-chevron,
.navbar__menu-container.skin-espresso .skin-user-chevron {
    display: inline-block;
    margin-left: 6px;
}
.navbar__menu-container.skin-porcelain .skin-user-chevron { color: #A39B93; }
.navbar__menu-container.skin-espresso .skin-user-chevron { color: #B7AC9E; }

/* tokenized: the hardcoded #DB3A57 / #FFF1F5 hover flashed light on the dark skin.
   The icon is an inline svg with stroke=currentColor, so it follows this colour. */
/* NOTE: `.dropdown-menu a` in the selector so this out-specifies the generic
   `[data-bb-skin] .dropdown-menu a:not(.btn) { color: var(--bb-text) }` rule below. */
.navbar__menu-container.skin-porcelain .dropdown-menu a.skin-logout-item,
.navbar__menu-container.skin-espresso .dropdown-menu a.skin-logout-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--bb-danger) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.navbar__menu-container.skin-porcelain .dropdown-menu a.skin-logout-item:hover,
.navbar__menu-container.skin-espresso .dropdown-menu a.skin-logout-item:hover {
    background: var(--bb-danger-bg) !important;
}
.skin-logout-item .skin-logout-icon { flex: none; stroke: currentColor; }

/* ======================= GLOBAL SEARCH (skinned) ====================== */
/* rendered only when a skin is active; functionality lands separately */

.global-search__box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    height: 38px;
    padding: 0 13px;
    border-radius: 11px;
    font-size: 13.5px;
}
.global-search__box input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: inherit;
}
.global-search__box input::placeholder { color: inherit; opacity: .7; }
/* main.scss:2884 forces a border + glow on every input:focus with !important,
   which drew a second box inside this already-bordered search container.
   Neutralise the inner field; the container shows focus instead. */
.global-search__box input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.global-search__box:focus-within {
    border-color: var(--bb-primary) !important;
    box-shadow: 0 0 0 3px var(--bb-primary-soft);
}
.global-search__kbd {
    flex: none;
    font-size: 10.5px;
    border-radius: 5px;
    padding: 1px 6px;
}

.navbar__menu-container.skin-porcelain .global-search__box {
    background: #FAF7F2;
    border: 1px solid #EAE4DC;
    color: #6E6660;
    transition: border-color .15s, background .15s;
}
/* Focus reads as the field's own edge, not a halo around it. The old 3px translucent
   pink spread sat outside the border, so you saw two rings — the box edge and a soft
   glow — which looked like a rendering fault rather than focus. The ring is now INSET,
   so the box keeps one crisp outline and the whole control still reads as one input. */
.navbar__menu-container.skin-porcelain .global-search__box:focus-within {
    background: #ffffff;
    border-color: var(--bb-primary);
    box-shadow: inset 0 0 0 1px var(--bb-primary);
}
.navbar__menu-container.skin-porcelain .global-search__kbd {
    border: 1px solid #EAE4DC;
    background: #ffffff;
    color: #A39B93;
}

.navbar__menu-container.skin-espresso .global-search__box {
    background: #2E251D;
    border: 1px solid #3A2F25;
    color: #B7AC9E;
    transition: border-color .15s, background .15s;
}
.navbar__menu-container.skin-espresso .global-search__box:focus-within {
    background: #3A2F25;
    border-color: var(--bb-primary);
    box-shadow: inset 0 0 0 1px var(--bb-primary);
}
.navbar__menu-container.skin-espresso .global-search__box input { color: #FFF8E7; }
.navbar__menu-container.skin-espresso .global-search__kbd {
    border: 1px solid #3A2F25;
    background: #221B15;
    color: #847A6D;
}

/* ============================= PORCELAIN ============================= */

.navbar__menu-container.skin-porcelain {
    background: #ffffff !important;
    border-bottom: 1px solid #EAE4DC;
    box-shadow: 0 1px 4px rgba(60, 45, 30, .05);
}

.navbar__menu-container.skin-porcelain #organisation-info > div.d-flex {
    border: 1px solid #EAE4DC;
    border-radius: 11px;
    padding: 4px 11px 4px 5px;
    background: #ffffff;
    transition: border-color .15s, background .15s;
}
.navbar__menu-container.skin-porcelain #organisation-info > div.d-flex:hover {
    border-color: #DB3A57;
    background: #FFF1F5;
}

.navbar__menu-container.skin-porcelain .organisation-plan {
    background: #FDF0DC !important;
    color: #B45D08 !important;
    border: none;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item {
    border-radius: 10px;
    transition: background .15s;
}
.navbar__menu-container.skin-porcelain .desktop-navigation > li.nav-item:not(.nav-add-entity):not(.nav-user-item):hover {
    background: #FFF1F5;
}

/* ============================= ESPRESSO ============================= */

/* The app's main wrapper is a hardcoded light #f9f7f7 (inline style in app.blade).
   In espresso it shows as a pale frame behind every page's content — darken it to the
   page token so the whole surface follows the skin. Porcelain keeps its light frame. */
[data-bb-skin="espresso"] main.container-fluid { background: var(--bb-bg) !important; }

/* Checkboxes hardcode background:#fff (app.css) → a white box on the dark theme.
   Darken to the inset surface with a visible border; the red check still reads. */
[data-bb-skin="espresso"] .red-checkbox { background: var(--bb-inset); border-color: var(--bb-border-strong); }

/* --- Espresso: dropdown menus (New / call / notifications / settings / profile) were
   white on the dark app. One shared treatment darkens the container + tokenizes text,
   dividers and hover. Modals already use --bb-surface. --- */
[data-bb-skin="espresso"] .dropdown-menu {
    background: var(--bb-surface) !important;
    border: 1px solid var(--bb-border) !important;
    box-shadow: var(--bb-shadow-2) !important;
    color: var(--bb-text);
}
[data-bb-skin="espresso"] .dropdown-menu .dropdown-divider,
[data-bb-skin="espresso"] .dropdown-menu hr { border-top-color: var(--bb-border) !important; }
[data-bb-skin="espresso"] .dropdown-menu a:not(.btn),
[data-bb-skin="espresso"] .dropdown-menu .dropdown-item,
[data-bb-skin="espresso"] .dropdown-menu .text-dark,
[data-bb-skin="espresso"] .dropdown-menu div,
[data-bb-skin="espresso"] .dropdown-menu span,
[data-bb-skin="espresso"] .dropdown-menu b,
[data-bb-skin="espresso"] .dropdown-menu strong { color: var(--bb-text) !important; }
[data-bb-skin="espresso"] .dropdown-menu small,
[data-bb-skin="espresso"] .dropdown-menu .text-muted,
[data-bb-skin="espresso"] .dropdown-menu p,
[data-bb-skin="espresso"] .dropdown-menu .skin-menu-who__email { color: var(--bb-text-2) !important; }
[data-bb-skin="espresso"] .dropdown-menu .dropdown-item:hover,
[data-bb-skin="espresso"] .dropdown-menu a:not(.btn):hover { background: var(--bb-primary-soft) !important; color: var(--bb-primary) !important; }
/* notification rows (notify-item) carry their OWN white background -> transparent on the dark menu */
[data-bb-skin="espresso"] .notify-item,
[data-bb-skin="espresso"] .dropdown-menu .notify-item,
[data-bb-skin="espresso"] .dropdown-menu-notification .notify-item { background: transparent !important; }
[data-bb-skin="espresso"] .notify-item:hover,
[data-bb-skin="espresso"] .dropdown-menu .notify-item:hover { background: var(--bb-primary-soft) !important; }

/* The Bug-Bounty / help logo is a black-line PNG → nearly invisible on the dark modal.
   Whiten it with a filter (black -> white, transparency preserved) under espresso. */
[data-bb-skin="espresso"] .bug-programm img { filter: brightness(0) invert(1); }

.navbar__menu-container.skin-espresso.bg-yellow-light {
    background: #221B15 !important;
    border-bottom: none;
    /* the thin brand-red thread */
    box-shadow: 0 2px 0 #DB3A57;
}

/* company block becomes a darker well */
.navbar__menu-container.skin-espresso #organisation-info > div.d-flex {
    background: #2E251D;
    border: 1px solid #3A2F25;
    border-radius: 11px;
    padding: 4px 11px 4px 5px;
    transition: background .15s, border-color .15s;
}
.navbar__menu-container.skin-espresso #organisation-info > div.d-flex:hover {
    background: #3A2F25;
}
.navbar__menu-container.skin-espresso #organisation-info,
.navbar__menu-container.skin-espresso .organisation-name {
    color: #FFF8E7;
}

.navbar__menu-container.skin-espresso .organisation-plan {
    background: rgba(245, 169, 60, .16) !important;
    color: #F5A93C !important;
    border: none;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* Logo swap: light wordmark by default, the white "dark-mode" mark under espresso.
   Keyed on [data-bb-skin] so it works both in the app (attr on <body>) and in the
   design-system gallery (attr on #dsg-stage). */
.logo-full .logo-skin { vertical-align: middle; }
.logo-full .logo-skin--dark { display: none; }
[data-bb-skin="espresso"] .logo-full .logo-skin--light { display: none; }
[data-bb-skin="espresso"] .logo-full .logo-skin--dark { display: inline-block; }
/* espresso: the white mark sits straight on the bar — no cream chip, tokens elsewhere.
   The .sidebar-head wrapper itself carried a hardcoded white bg (the "little white box"
   behind the logo); make it follow the skin so the dark-mode mark isn't stranded on white. */
.navbar__menu-container.skin-espresso .sidebar-head .logo-full {
    background: transparent;
    padding: 2px 0;
}
[data-bb-skin="espresso"] .sidebar-head { background: transparent !important; }

/* -------- ESPRESSO: left/right SIDE MENU --------
   navbar-left.scss paints the vertical menu for the light theme only, so
   under espresso it stayed a white panel on a dark app. Re-skin it to the
   espresso chrome (values mirror bb-tokens espresso). .bg-white is a
   Bootstrap !important, so the container background needs !important too.
   Selectors stay minimally qualified so the scss :hover/active red still wins. */
/* NOTE on the .navbar-mobile.skin-espresso selectors below: the mobile menu is
   included AFTER .navbar__menu-container closes (navigation.blade.php ~489), so it can
   never be a descendant of it and none of these rules reached it — it rendered raw
   Bootstrap white on espresso. It therefore carries the skin class itself. The selectors
   are appended to the SAME rule blocks rather than duplicated, so the mobile panel can
   never drift from the desktop one. */
.navbar__menu-container.skin-espresso .navbar-vertical-left,
.navbar__menu-container.skin-espresso .navbar-vertical-right,
.navbar-mobile.skin-espresso {
    background: #221B15 !important;      /* match the top bar */
    border-top: 1px dashed #3A2F25;      /* was dashed #B5B5B5 */
    border-right-color: #3A2F25;
    box-shadow: none;
}
/* menu label text: muted cream (was $color_forms_dark) */
.navbar__menu-container.skin-espresso .navbar-vertical-left ul.navbar-nav > li > a,
.navbar__menu-container.skin-espresso .navbar-vertical-right ul.navbar-nav > li > a,
.navbar-mobile.skin-espresso ul.navbar-nav > li > a {
    color: #B7AC9E;
}
/* default line-icon stroke was #1A1A1A → invisible on dark; lift to muted cream */
.navbar__menu-container.skin-espresso .navbar-vertical-left .icon:not(.lock-icon-new):not(.website-builder) svg path,
.navbar__menu-container.skin-espresso .navbar-vertical-right .icon:not(.lock-icon-new):not(.website-builder) svg path,
.navbar-mobile.skin-espresso .icon:not(.lock-icon-new):not(.website-builder) svg path {
    stroke: #B7AC9E;
}
/* current / active row well was #fffad5 → espresso primary-soft */
.navbar__menu-container.skin-espresso .navbar-vertical-left li.current,
.navbar__menu-container.skin-espresso .navbar-vertical-left .dropdown-section.current,
.navbar__menu-container.skin-espresso .navbar-vertical-right li.current,
.navbar-mobile.skin-espresso li.current,
.navbar-mobile.skin-espresso .dropdown-section.current {
    background-color: rgba(229, 71, 99, .16);
}
/* the dropdown-section label and the divider between the two lists */
.navbar-mobile.skin-espresso ul.navbar-nav > li,
.navbar-mobile.skin-espresso .dropdown-section,
.navbar-mobile.skin-espresso .section-name { color: #B7AC9E; }
.navbar-mobile.skin-espresso hr { background-color: #3A2F25 !important; opacity: 1 !important; }
/* the burger that opens it: its paths are stroke="currentColor" and nothing set a colour,
   so it inherited black — invisible on the #221B15 bar. #B7AC9E is not a new choice, it is
   exactly what every other icon in this header already computes to. */
.navbar__menu-container.skin-espresso .mobile-menu-lines { color: #B7AC9E; }
/* collapsed-mode 'visible' section chip was #FFE7EB */
.navbar__menu-container.skin-espresso .navbar-vertical-left li.visible .dropdown-section {
    background-color: rgba(229, 71, 99, .16);
    color: #E54763;
}
/* Sidebar fly-out submenus now render the UNIVERSAL `.bb-menu` component
   (public/css/bb-components.css) — ONE tokenized panel + rows + hover, shared with the
   header "+ New" dropdown. The per-skin hex duplicates that used to live here
   (panel #2E251D, hairline #3A2F25, text #F4EDE3, bullet ring #4A3D30) are gone. */

/* logo: force INTEGER raster size (natural ratio at 100px wide = 32.28px
   tall — the fractional height makes Chrome rasterize the svg between
   pixel boundaries and it looks soft). 99x32 is integer and 0.1% off ratio. */
.navbar__menu-container.skin-porcelain .sidebar-head .logo-full img,
.navbar__menu-container.skin-espresso .sidebar-head .logo-full img {
    width: 99px;
    height: 32px;
    max-width: none;
}
/* collapsed sidebar: crop to just the mascot (left ~27px) — same asset */
.navbar__menu-container.skin-porcelain .sidebar-head:not(.opened) .logo-full,
.navbar__menu-container.skin-espresso .sidebar-head:not(.opened) .logo-full {
    width: 27px;
    overflow: hidden;
    flex: none;
}

/* sidebar collapse control on the dark bar */
.navbar__menu-container.skin-espresso .open-sidebar {
    background: transparent !important;
    border: none !important;
    color: #B7AC9E;
}
.navbar__menu-container.skin-espresso .open-sidebar:hover {
    background: #3A2F25 !important;
    color: #FFF8E7;
}

/* right icon strip: the icons are baked-color SVGs (content:url), so
   lighten them with a filter — but never inside the white dropdowns */
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item {
    border-radius: 10px;
    transition: background .15s;
}
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item:not(.nav-add-entity):not(.nav-user-item):hover {
    background: #3A2F25;
}
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item i.fa {
    filter: brightness(0) invert(.96) sepia(.08);
}
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item .dropdown-menu i.fa {
    filter: none;
}
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item > a.text-decoration-none,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item .username,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item > .nav-link.text-dark,
.navbar__menu-container.skin-espresso .desktop-navigation > li.nav-item > a.text-dark {
    color: #FFF8E7 !important;
}
/* (REMOVED) a stale rule here forced .dropdown-menu text to #343a40 — a leftover from when
   these fly-out panels stayed WHITE. The panels are DARK in espresso now (see the
   [data-bb-skin="espresso"] .dropdown-menu block above), so this made every top-bar menu's
   text dark-on-dark (New / Call / Notifications / Settings / Profile). The block above owns
   the text colour (item/div/span -> --bb-text, small/muted/p -> --bb-text-2). */

/* counter badges get a bar-colored ring so they read as floating dots */
.navbar__menu-container.skin-espresso .desktop-navigation .counter {
    border: 2px solid #221B15;
}

/* ============ CLICK TARGETS (whole pill / whole search box) ============ */
/* the chevron is no longer a separate button — the entire company pill opens
   the switcher (wired in navigation.blade.php), so it must read as clickable */
.navbar__menu-container.skin-porcelain #organisation-info > div.d-flex,
.navbar__menu-container.skin-espresso #organisation-info > div.d-flex {
    cursor: pointer;
}
/* the search box IS the input: fill it, one clean border (the box's
   focus-within), never a second outline/shadow on the inner <input> */
.global-search__box { cursor: text; }
.global-search__box input {
    width: 100%;
    box-shadow: none !important;
    outline: none !important;
}

/* ===== hover bridge (owner: "hard to move a mouse to this modal without it closing").
   The avatar/profile menu opens on :hover of .nav-user-item .dropdown, and the ~2px gap
   between the avatar and the panel dropped the :hover when the cursor crossed it. A
   transparent ::before on the panel extends its hoverable area up over the gap, so moving
   from the icon into the menu keeps the hover continuous. The panel lives INSIDE .dropdown,
   so hovering the bridge keeps .dropdown:hover true. ===== */
.navbar__menu-container .nav-user-item .dropdown > #user-dropdown-menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px; background: transparent;
}
/* keep the panel open while the cursor is anywhere on it (belt-and-braces for the CSS hover) */
.navbar__menu-container .nav-user-item .dropdown > #user-dropdown-menu:hover { display: block !important; }

/* ================== COCKPIT HEADER (slimmed adoption) ==================
   The cockpit nav carries .navbar__menu-container + skin-* now (owner: the
   slimmed version — same app-header look, Menu button kept). No +New in
   the cockpit; the rest of the right-side cluster stays. */
.cockpit-main-wrapper .nav-add-entity { display: none !important; }
/* the Leads item inherited the legacy dark ink on the adopted dark header; the icon
   is a raster pattern-fill (cannot follow color) so it lifts to a light mono tone */
.cockpit-main-wrapper .navbar__menu-container.skin-espresso #cockpit-leads-link { color: #F4EDE3 !important; }
.cockpit-main-wrapper .navbar__menu-container.skin-espresso #cockpit-leads-link svg { filter: brightness(0) invert(92%) sepia(6%) saturate(500%) hue-rotate(340deg); }