/*
 * 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 {
    background: #FFF1F5;
    color: #DB3A57 !important;
}

/* ------------- 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;
}

.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; }

.navbar__menu-container.skin-porcelain .skin-logout-item,
.navbar__menu-container.skin-espresso .skin-logout-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #DB3A57 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.navbar__menu-container.skin-porcelain .skin-logout-item:hover,
.navbar__menu-container.skin-espresso .skin-logout-item:hover {
    background: #FFF1F5;
}

/* ======================= 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; }
.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;
}
.navbar__menu-container.skin-porcelain .global-search__box:focus-within {
    background: #ffffff;
    border-color: #D9D2C8;
    box-shadow: 0 0 0 3px rgba(219, 58, 87, .08);
}
.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: #4A3D30;
    box-shadow: 0 0 0 3px rgba(219, 58, 87, .12);
}
.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 ============================= */

.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;
}

/* the mascot logo keeps its colors on a cream chip */
.navbar__menu-container.skin-espresso .sidebar-head .logo-full {
    background: #FFF8E7;
    border-radius: 10px;
    padding: 2px 10px;
}

/* 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;
}
/* dropdown panels stay light — restore their own text color */
.navbar__menu-container.skin-espresso .desktop-navigation .dropdown-menu,
.navbar__menu-container.skin-espresso .desktop-navigation .dropdown-menu .text-dark,
.navbar__menu-container.skin-espresso .desktop-navigation .dropdown-menu .username {
    color: #343a40 !important;
}

/* 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;
}