/**
 * Logged-in panel: drop decorative dashboard top-header images and overlap layout.
 */

body.g-sidenav-show {
    --panel-shell-header-h: calc(env(safe-area-inset-top, 0px) + var(--panel-topbar-h, var(--panel-mobile-header-h, 72px)));
    --panel-mobile-header-h: 72px;
    /* Gap under fixed topbar + inner #page_layout breathing room (all panel pages) */
    --panel-below-header-gap: 32px;
    /* Match /orders/create (#page_layout padding-top: 8px) */
    --panel-page-layout-top: 8px;
}

/* panel-header-v2: fixed topbar + iq-banner padding-top */
body.g-sidenav-show .panel-topbar.iq-navbar {
    position: fixed !important;
}

/* Guest / legacy: sticky bar in document flow */
body.g-sidenav-show .iq-navbar:not(.panel-topbar),
body.g-sidenav-show .iq-navbar.navs-sticky:not(.panel-topbar),
body.g-sidenav-show .iq-navbar.navs-sticky.menu-sticky:not(.panel-topbar),
body.g-sidenav-show .iq-banner > .iq-navbar:not(.panel-topbar),
body.g-sidenav-show .iq-banner > nav.iq-navbar:not(.panel-topbar),
body.g-sidenav-show .main-content .iq-navbar:not(.panel-topbar) {
    position: sticky !important;
    top: env(safe-area-inset-top, 0px);
    z-index: 1050;
}

@media (min-width: 992px) {
    body.g-sidenav-show .sidebar + .main-content .iq-navbar:not(.panel-topbar),
    body.g-sidenav-show .sidebar + .main-content .iq-navbar.navs-sticky:not(.panel-topbar),
    body.g-sidenav-show .sidebar + .main-content .iq-navbar.navs-sticky.menu-sticky:not(.panel-topbar),
    body.g-sidenav-show .sidebar.sidebar-mini + .main-content .iq-navbar.navs-sticky.menu-sticky:not(.panel-topbar) {
        position: sticky !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
    }
}

body.g-sidenav-show .main-content > .iq-banner {
    position: relative;
    z-index: 1040;
}

/* First paint before hope-ui adds navbar-sticky-space (fixed-header fallback) */
body.g-sidenav-show #panel-ajax-content {
    padding-top: 0 !important;
}

/* Fixed panel-topbar: reserve header height on the content shell (not iq-banner) */
body.g-sidenav-show:has(.panel-topbar) .main-content .iq-banner {
    padding-top: 0 !important;
}

body.g-sidenav-show:has(.panel-topbar) #panel-ajax-content {
    padding-top: calc(var(--panel-shell-header-h, 72px) + var(--panel-below-header-gap, 20px)) !important;
    box-sizing: border-box;
}

body.g-sidenav-show:has(.panel-topbar) .main-content > #page_layout.content-inner,
body.g-sidenav-show:has(.panel-topbar) .main-content > #page_layout.container-fluid,
body.g-sidenav-show:not(.panel-test-top-banner):has(.panel-topbar) .main-content #page_layout.content-inner,
body.g-sidenav-show:not(.panel-test-top-banner):has(.panel-topbar) .main-content #page_layout.container-fluid {
    padding-top: calc(
        var(--panel-shell-header-h, 72px) + var(--panel-below-header-gap, 20px) + var(--panel-page-layout-top, 18px)
    ) !important;
    box-sizing: border-box;
}

/* Hope UI adds this for fixed nav; with sticky we only need a small gap */
body.g-sidenav-show .main-content .content-inner.navbar-sticky-space {
    padding-top: var(--panel-page-layout-top, 18px) !important;
}

body.g-sidenav-show:has(.panel-topbar) #panel-ajax-content #page_layout.content-inner,
body.g-sidenav-show:has(.panel-topbar) #panel-ajax-content #page_layout.container-fluid {
    padding-top: var(--panel-page-layout-top, 8px) !important;
    margin-top: 0 !important;
}

/* Legacy <br> spacers — gap comes from --panel-below-header-gap + --panel-page-layout-top */
body.g-sidenav-show #panel-ajax-content[data-panel-page="orders.index"] .orders-index-top-spacer,
body.g-sidenav-show #panel-ajax-content[data-panel-page="ai-recommended"] > br,
body.g-sidenav-show #panel-ajax-content[data-panel-page="services.updateServices"] > br,
body.g-sidenav-show #panel-ajax-content[data-panel-page="affiliates.index"] > br,
body.g-sidenav-show #panel-ajax-content[data-panel-page="child-panel.index"] > br,
body.g-sidenav-show #panel-ajax-content[data-panel-page="how-to-use"] > br,
body.g-sidenav-show .main-content .iq-banner > br {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

body.g-sidenav-show #panel-ajax-content[data-panel-page="affiliates.index"] #page_layout.content-inner,
body.g-sidenav-show #panel-ajax-content[data-panel-page="affiliates.index"] #page_layout.container-fluid {
    padding-top: var(--panel-page-layout-top, 8px) !important;
}

/* List / settings pages: breathing room under fixed topbar (not banner overlap pages) */
body.g-sidenav-show:has(.panel-topbar) #panel-ajax-content[data-panel-page="services.search.index"] #page_layout,
body.g-sidenav-show:has(.panel-topbar) #panel-ajax-content[data-panel-page="ai-recommended"] #page_layout,
body.g-sidenav-show:has(.panel-topbar) #panel-ajax-content[data-panel-page="orders.index"] #page_layout,
body.g-sidenav-show:has(.panel-topbar) #panel-ajax-content[data-panel-page="affiliates.index"] #page_layout,
body.g-sidenav-show:has(.panel-topbar) #panel-ajax-content[data-panel-page="child-panel.index"] #page_layout,
body.g-sidenav-show:has(.panel-topbar) #panel-ajax-content[data-panel-page="services.updateServices"] #page_layout,
body.g-sidenav-show:not(.panel-test-top-banner):has(.panel-topbar) #panel-ajax-content[data-panel-page="home"] #page_layout,
body.g-sidenav-show.services-search-page #page_layout,
body.g-sidenav-show.ai-recommended-page #page_layout,
body.g-sidenav-show.orders-index-page #page_layout,
body.g-sidenav-show.affiliates-index-page #page_layout,
body.g-sidenav-show.child-panel-index-page #page_layout,
body.g-sidenav-show.updates-index-page #page_layout,
body.g-sidenav-show.account-index-page:not(.panel-test-top-banner) #page_layout {
    padding-top: 16px !important;
    margin-top: 0 !important;
    box-sizing: border-box;
}

body.g-sidenav-show .iq-header-img {
    display: none !important;
}

body.g-sidenav-show .iq-navbar-header.orders-create-header,
body.g-sidenav-show .iq-navbar-header.balances-create-header,
body.g-sidenav-show .iq-navbar-header.massorder-create-header,
body.g-sidenav-show .iq-navbar-header.tickets-index-header,
body.g-sidenav-show .iq-navbar-header.services-search-header,
body.g-sidenav-show .iq-navbar-header.account-index-header,
#panel-ajax-content .iq-navbar-header.orders-create-header,
#panel-ajax-content .iq-navbar-header.balances-create-header,
#panel-ajax-content .iq-navbar-header.massorder-create-header,
#panel-ajax-content .iq-navbar-header.tickets-index-header,
#panel-ajax-content .iq-navbar-header.services-search-header,
#panel-ajax-content .iq-navbar-header.account-index-header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
}

body.g-sidenav-show .iq-navbar-header.tickets-page-banner,
body.g-sidenav-show .tickets-page-top,
body.g-sidenav-show .tickets-hero-slot,
body.g-sidenav-show .iq-navbar-header.account-page-header,
#panel-ajax-content .iq-navbar-header.tickets-page-banner,
#panel-ajax-content .tickets-page-top,
#panel-ajax-content .tickets-hero-slot,
#panel-ajax-content .iq-navbar-header.account-page-header {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

body.g-sidenav-show .account-page-header .card {
    margin-top: 0 !important;
}

body.g-sidenav-show .account-page-header br {
    display: none !important;
}

body.g-sidenav-show .tickets-page-banner .iq-container,
body.g-sidenav-show .tickets-page-top .iq-container,
body.g-sidenav-show .tickets-hero-slot,
#panel-ajax-content .tickets-page-top .iq-container,
#panel-ajax-content .tickets-hero-slot {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.g-sidenav-show.orders-create-page #page_layout,
body.g-sidenav-show #panel-ajax-content[data-panel-page="orders.create"] #page_layout {
    margin-top: 0 !important;
}

body.g-sidenav-show #panel-ajax-content > #page_layout.content-inner,
body.g-sidenav-show #panel-ajax-content > .col-lg-12:first-child,
body.g-sidenav-show #panel-ajax-content > .card-balances {
    margin-top: 0 !important;
}

body.g-sidenav-show.orders-create-page #page_layout .orders-create-layout,
body.g-sidenav-show #panel-ajax-content[data-panel-page="orders.create"] #page_layout .orders-create-layout {
    padding-top: 0 !important;
}

body.g-sidenav-show.balances-create-page #page_layout,
body.g-sidenav-show #panel-ajax-content[data-panel-page="balances.create"] #page_layout,
body.g-sidenav-show #panel-ajax-content[data-panel-page="balances.create"] .card-balances #page_layout {
    margin-top: 0 !important;
}

body.g-sidenav-show.tickets-index-page .card-header6,
body.g-sidenav-show #panel-ajax-content[data-panel-page="tickets.index"] .card-header6 {
    margin-top: 0 !important;
}

body.g-sidenav-show .iq-banner {
    background: transparent !important;
    background-image: none !important;
}

body.g-sidenav-show .navs-sticky.menu-sticky + .iq-navbar-header {
    padding-top: 0 !important;
}

/* Card elevation — panel content reads clearly without the blue hero */
body.g-sidenav-show .main-content #panel-ajax-content .card:not(.shadow-none),
body.g-sidenav-show .main-content #page_layout .card:not(.shadow-none),
body.g-sidenav-show .main-content .card-account,
body.g-sidenav-show .main-content #contact.dvgh,
body.g-sidenav-show .main-content #contact3.dvgh,
body.g-sidenav-show .main-content #contact3.card,
body.g-sidenav-show .main-content .refund-card,
body.g-sidenav-show .main-content .update-card,
body.g-sidenav-show .main-content .service-item,
body.g-sidenav-show .main-content .orders-service-info-card,
body.g-sidenav-show .main-content .des-neworder .card.card-des {
    box-shadow:
        0 4px 16px rgba(15, 23, 42, 0.1),
        0 1px 3px rgba(15, 23, 42, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
}

html.dark-mode body.g-sidenav-show .main-content #panel-ajax-content .card:not(.shadow-none),
html.dark-mode body.g-sidenav-show .main-content #page_layout .card:not(.shadow-none),
html.dark-mode body.g-sidenav-show .main-content .card-account,
html.dark-mode body.g-sidenav-show .main-content #contact.dvgh,
html.dark-mode body.g-sidenav-show .main-content #contact3.dvgh,
html.dark-mode body.g-sidenav-show .main-content #contact3.card,
html.dark-mode body.g-sidenav-show .main-content .refund-card,
html.dark-mode body.g-sidenav-show .main-content .update-card,
html.dark-mode body.g-sidenav-show .main-content .service-item,
html.dark-mode body.g-sidenav-show .main-content .orders-service-info-card,
html.dark-mode body.g-sidenav-show .main-content .des-neworder .card.card-des {
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(148, 163, 184, 0.12) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}