/* Hosting management sidebar (second sidebar shown on /cpanelmanager/manage/:id/* pages).
   The main sidebar column (.col-3) is pulled out of normal flow by huraga.css: it is
   position:fixed, pinned to the left edge, width driven by the --zh-sidebar-width custom
   property (260px, or 72px when body.zh-sidebar-collapsed). The content column (.col-md-9)
   is reserved space for it via an explicit margin-left/width calc against that same variable.
   Our second sidebar reuses the ".col-3" class (so it inherits that fixed positioning,
   background, border and padding for free) plus ".zh-hosting-col" to shift it one sidebar
   width to the right, and we extend the content column's reserved space to account for two
   sidebars instead of one — all scoped under body.zh-hosting-shell so pages without a hosting
   sidebar are completely unaffected. Reuses .zh-light-sidebar / .zh-side-nav / .zh-side-link /
   .zh-side-group / .zh-side-submenu / .zh-side-section styling already defined in
   build/css/huraga.css — only the pieces unique to this sidebar (the website selector and the
   "not available" menu state) are styled here. */

body.zh-hosting-shell {
    --zh-hosting-sidebar-width: 288px;
}

/* The hosting sidebar always stays fully expanded (icons + labels + selector + search) —
   only the main/leftmost sidebar collapses to a 72px icon rail via --zh-sidebar-width.
   This selector (6 classes) is more specific than huraga.css's shared `.col-3` width rules
   (at most 5), so its width/padding win regardless of body.zh-sidebar-collapsed. */
body.zh-hosting-shell > .container > .container > .row > .col-3.zh-hosting-col {
    left: var(--zh-sidebar-width, 260px);
    width: var(--zh-hosting-sidebar-width);
    padding: 82px 14px 18px;
    /* huraga.css pins this column with `position:fixed; inset:0 auto 0 0`, so with 12
       sections it runs past the viewport as soon as a group expands and the items below
       become unreachable. Scroll the column itself; overscroll-behavior stops the wheel
       from chaining to the page once the list hits its end. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d3d4e0 transparent;
}

body.zh-hosting-shell > .container > .container > .row > .col-3.zh-hosting-col::-webkit-scrollbar {
    width: 8px;
}

body.zh-hosting-shell > .container > .container > .row > .col-3.zh-hosting-col::-webkit-scrollbar-track {
    background: transparent;
}

body.zh-hosting-shell > .container > .container > .row > .col-3.zh-hosting-col::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #d3d4e0;
    background-clip: content-box;
}

body.zh-hosting-shell > .container > .container > .row > .col-3.zh-hosting-col:hover::-webkit-scrollbar-thumb {
    background: #b9bacb;
    background-clip: content-box;
}

/* The main icon rail can outgrow short viewports too, for the same reason. */
body.zh-hosting-shell > .container > .container > .row > .col-3:not(.zh-hosting-col) {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d3d4e0 transparent;
}

/* The content column must reserve space for BOTH sidebars. huraga.css sizes it with
   width + max-width + flex-basis together; because .row is a flex container with
   flex-shrink:0 here, the flex-basis is what actually decides the used width, so all
   three have to be overridden or the column keeps a one-sidebar width while being
   pushed over by two and overflows to the right by exactly the hosting sidebar width. */
body.zh-hosting-shell > .container > .container > .row > .col-12.col-md-9 {
    margin-left: calc(var(--zh-sidebar-width, 260px) + var(--zh-hosting-sidebar-width)) !important;
    width: calc(100% - (var(--zh-sidebar-width, 260px) + var(--zh-hosting-sidebar-width))) !important;
    max-width: calc(100% - (var(--zh-sidebar-width, 260px) + var(--zh-hosting-sidebar-width))) !important;
    flex: 0 0 calc(100% - (var(--zh-sidebar-width, 260px) + var(--zh-hosting-sidebar-width))) !important;
    min-width: 0 !important;
}

@media (max-width: 767.98px) {
    body.zh-hosting-shell > .container > .container > .row > .col-12.col-md-9 {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

.zh-hosting-sidebar {
    display: flex;
    flex-direction: column;
}

.zh-hosting-sidebar__label {
    display: block;
    margin: 0 0 6px 2px;
    color: #8d8fa3;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.zh-hosting-selector {
    margin: 0 0 14px;
    border: 1px solid #e5e5eb;
    border-radius: 10px;
    background: #f7f7f9;
}

.zh-hosting-selector__current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    cursor: pointer;
    list-style: none;
}

.zh-hosting-selector__current::-webkit-details-marker {
    display: none;
}

.zh-hosting-selector__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #6633eb, #4924bd);
}

.zh-hosting-selector__icon .icon {
    width: 15px;
    height: 15px;
}

.zh-hosting-selector__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.zh-hosting-selector__meta strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #151525;
    font-size: .81rem;
    font-weight: 650;
}

.zh-hosting-selector__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .63rem;
    font-weight: 700;
    text-transform: capitalize;
}

.zh-hosting-selector__status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.zh-hosting-selector__status--active {
    color: #1e8e5a;
    background: #e6f7ee;
}

.zh-hosting-selector__status--suspended,
.zh-hosting-selector__status--canceled,
.zh-hosting-selector__status--pending_setup {
    color: #b3541e;
    background: #fdf0e3;
}

.zh-hosting-selector__chevron {
    color: #8d94b5;
    font-style: normal;
    font-size: .85rem;
    transition: transform .18s ease;
}

.zh-hosting-selector[open] .zh-hosting-selector__chevron {
    transform: rotate(180deg);
}

.zh-hosting-selector__menu {
    display: grid;
    gap: 2px;
    padding: 4px 8px 8px;
    border-top: 1px solid #e5e5eb;
}

.zh-hosting-selector__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 7px;
    color: #2b2c3d;
    font-size: .78rem;
    text-decoration: none;
}

.zh-hosting-selector__option:hover {
    background: #f2f2f4;
}

.zh-hosting-selector__option.active {
    background: #eeeeef;
    font-weight: 650;
}

.zh-hosting-selector__option .zh-hosting-selector__status {
    padding: 0 6px;
    font-size: .58rem;
}

/* "Not available on your plan" menu entries: same rhythm as a real .zh-side-submenu link,
   but visibly inert — no href, muted color, lock icon, tooltip explains why. */
.zh-side-unavailable {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    color: #b4b6c4;
    font-size: .76rem;
    cursor: not-allowed;
}

.zh-side-unavailable .icon {
    width: 12px;
    height: 12px;
    flex: none;
}

.zh-hosting-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px 10px;
    border: 1px solid #e5e5eb;
    border-radius: 9px;
    background: #f7f7f9;
    transition: border-color .15s ease, background .15s ease;
}

.zh-hosting-search:focus-within {
    border-color: var(--zh-violet, #6535e8);
    background: #fff;
}

.zh-hosting-search .icon {
    width: 15px;
    height: 15px;
    flex: none;
    color: #9295ab;
}

.zh-hosting-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #242437;
    font-size: .8rem;
}

.zh-hosting-search__input::placeholder {
    color: #a3a5b8;
}

/* The current section gets a soft lavender pill instead of the main sidebar's neutral gray
   active state, to visually separate "where you are in this site's hosting tools" from
   "where you are in the main account nav". Same specificity (3 classes) as huraga.css's
   shared .zh-light-sidebar .zh-side-link.active rule, so this wins by simply loading after it. */
.zh-hosting-sidebar .zh-side-link.active,
.zh-hosting-sidebar .zh-side-link.active-parent {
    color: #151525;
    background: #f1edfd;
    border-radius: 10px;
}

.zh-hosting-sidebar .zh-side-link.active .icon,
.zh-hosting-sidebar .zh-side-link.active-parent .icon {
    color: var(--zh-violet, #6535e8);
}

/* Breadcrumb (Home icon > Websites > current domain) shown above the page <h1> on
   hosting-management pages only. huraga.css hides `.content-block > .breadcrumb` sitewide
   with !important; this re-enables just the .zh-breadcrumb variant, scoped to
   body.zh-hosting-shell, so breadcrumbs on every other page stay exactly as hidden as before.
   Kept inside the same (min-width:768px) breakpoint the markup's own `d-none d-md-flex`
   utility classes use, so this doesn't out-specificity `d-none` and force the breadcrumb
   to show on mobile — it stays hidden there like every other breadcrumb on the site. */
@media (min-width: 768px) {
    body.zh-hosting-shell .content-block > .zh-breadcrumb {
        display: flex !important;
    }
}

.zh-breadcrumb {
    --bs-breadcrumb-divider: '›';
    align-items: center;
    gap: 2px;
    margin-bottom: 18px;
    font-size: .82rem;
}

.zh-breadcrumb .breadcrumb-item,
.zh-breadcrumb .breadcrumb-item a {
    color: #8d8fa3;
    text-decoration: none;
}

.zh-breadcrumb .breadcrumb-item a:hover {
    color: var(--zh-violet, #6535e8);
}

.zh-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #c3c4d1;
}

.zh-breadcrumb .breadcrumb-item.active {
    max-width: 320px;
    overflow: hidden;
    color: #17172a;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zh-breadcrumb-home a {
    display: inline-flex;
    align-items: center;
}

.zh-breadcrumb-home .icon {
    width: 15px;
    height: 15px;
}

/* Mobile drawer entry point (mobile_menu.html.twig), shown only on hosting-management pages. */
.zh-mobile-hosting-group {
    padding: 14px 0 2px !important;
}

.zh-mobile-hosting-label {
    display: block;
    padding: 0 12px;
    color: #747586;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ==========================================================================
   Header — hosting-management pages
   huraga.css renders the brand lockup as a ::before/::after on `.col-3`, and
   the hosting sidebar is also a `.col-3`, so it was painting a second stray
   "Z" of its own. Suppress it there; the main rail keeps the real one.
   ========================================================================== */
body.zh-hosting-shell > .container > .container > .row > .col-3.zh-hosting-col::before,
body.zh-hosting-shell > .container > .container > .row > .col-3.zh-hosting-col::after {
    content: none !important;
}

@media (min-width: 768px) {
    /* huraga.css pins the header with `left: var(--zh-sidebar-width)`, which only
       reserves room for the main rail. The hosting sidebar (z-index 1030) then
       covers the header (1020) from 72px to 360px, burying the brand and toggle
       and leaving the nav stranded mid-bar. Start the header after BOTH sidebars. */
    body.zh-hosting-shell > .container > header {
        left: calc(var(--zh-sidebar-width, 260px) + var(--zh-hosting-sidebar-width)) !important;
        height: 72px;
        /* Now that it spans only the content area, sitting between white sidebars
           and a light page, a dark bar would read as a floating slab — so it gets
           the same light treatment, with legible dark text instead of inherited white. */
        color: #2b2c3d !important;
        background: rgba(255, 255, 255, .96) !important;
        border-bottom: 1px solid #e7e8ee !important;
        box-shadow: none !important;
        backdrop-filter: blur(12px);
    }

    body.zh-hosting-shell > .container > header .navbar {
        min-height: 72px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.zh-hosting-shell > .container > header .navbar-nav {
        gap: 2px;
        align-items: center;
    }

    /* The sidebar already carries the ZHosting lockup — repeating it here would
       collide with the breadcrumb directly beneath it. */
    body.zh-hosting-shell > .container > header .navbar-brand {
        display: none !important;
    }

    body.zh-hosting-shell > .container > header .nav-link {
        padding: 8px 12px !important;
        border-radius: 9px;
        color: #4a4c60 !important;
        font-size: .84rem;
        font-weight: 600;
        transition: color .15s ease, background-color .15s ease;
    }

    body.zh-hosting-shell > .container > header .nav-link:hover,
    body.zh-hosting-shell > .container > header .nav-link:focus-visible {
        color: #17172a !important;
        background: #f2f2f6;
    }

    body.zh-hosting-shell > .container > header .nav-link.active {
        color: var(--zh-violet, #6535e8) !important;
        background: #f1edfd;
    }

    body.zh-hosting-shell > .container > header .icon {
        color: #6b6d80;
    }

    body.zh-hosting-shell > .container > header .zh-sidebar-toggle {
        color: #6b6d80;
    }

    body.zh-hosting-shell > .container > header .zh-sidebar-toggle:hover {
        color: #17172a;
    }

    body.zh-hosting-shell > .container > header .zh-top-cart {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 12px;
        border-radius: 9px;
        color: #4a4c60 !important;
        font-size: .84rem;
        font-weight: 600;
        text-decoration: none;
    }

    body.zh-hosting-shell > .container > header .zh-top-cart:hover {
        color: #17172a !important;
        background: #f2f2f6;
    }

    body.zh-hosting-shell > .container > header .zh-top-cart b {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        color: #fff;
        background: var(--zh-violet, #6535e8);
        font-size: .66rem;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }

    body.zh-hosting-shell > .container > header .client-dropdown .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /* The avatar is a remote Gravatar; when it fails to resolve the element
       collapses to a broken-image glyph, so give it a brand-coloured disc to
       fall back to and clip whatever does load to a circle. */
    body.zh-hosting-shell > .container > header .client-dropdown img,
    body.zh-hosting-shell > .container > header .client-dropdown .rounded-circle {
        width: 28px;
        height: 28px;
        flex: none;
        border-radius: 50%;
        background: linear-gradient(135deg, #6633eb, #4924bd);
        object-fit: cover;
        overflow: hidden;
    }

    body.zh-hosting-shell > .container > header .client-dropdown span {
        overflow: hidden;
        max-width: 190px;
        color: #2b2c3d;
        font-size: .84rem;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.zh-hosting-shell > .container > header .form-select {
        padding: 6px 26px 6px 10px;
        border-color: #e2e3ec;
        border-radius: 9px;
        color: #4a4c60;
        font-size: .8rem;
    }
}

/* ---------------------------------------------------------------------------
   WEBSITE SELECTOR

   The selector lists the websites inside the current hosting account, an
   "Add a website" action, and — when the customer holds more than one hosting
   account — those other accounts as a second group. Each option therefore needs
   two lines (the domain, and what kind of website it is) rather than the single
   line the old hosting-order selector had.
   --------------------------------------------------------------------------- */

.zh-hosting-selector__group {
    display: block;
    padding: 8px 8px 4px;
    color: #8d8fa3;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.zh-hosting-selector__group:first-child {
    padding-top: 4px;
}

.zh-hosting-selector__note {
    display: block;
    padding: 8px;
    color: #6b6d80;
    font-size: .73rem;
    line-height: 1.45;
}

.zh-hosting-selector__option-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.zh-hosting-selector__option-meta .zh-side-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zh-hosting-selector__option-meta small {
    overflow: hidden;
    color: #8d8fa3;
    font-size: .63rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zh-hosting-selector__option.active .zh-hosting-selector__option-meta small {
    color: #6b6d80;
}

.zh-hosting-selector__add {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 8px;
    border-top: 1px solid #e5e5eb;
    color: #5528d4;
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
}

.zh-hosting-selector__add:hover {
    color: #4924bd;
    background: #f4f0ff;
}

.zh-hosting-selector__add-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 5px;
    color: #fff;
    font-size: .8rem;
    line-height: 1;
    background: linear-gradient(135deg, #6633eb, #4924bd);
}