/* Cloudpedia Sidebar Navigation Styles */

/* Gap between the fixed rail and page content. Added to every push offset.
   The toggle sits inside the rail; the rail is flush with the content (0). */
:root {
    --cp-nav-gutter: 0px;
}

/* Base Sidebar Styling */
.cp-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 90px;
    height: 100vh;
    background: var(--cp-primary-600);
    z-index: 1000;
    transition: width 0.3s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
}

.cp-sidebar-inner {
    display: flex;
    flex-direction: column;
    padding: 35px 0 91px 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.cp-sidebar.expanded {
    width: 285px;
}

/* Sidebar Toggle Button */
.cp-sidebar-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 1px solid rgba(245, 239, 235, 0.4);
    background: var(--cp-primary-500);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    box-shadow: none;
    z-index: 10;
}

.cp-sidebar.expanded .cp-sidebar-toggle {
    transform: translateY(-50%) rotate(180deg);
}

.cp-sidebar-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 2px;
}

.cp-sidebar-toggle .fas {
    font-size: 11px;
    line-height: 1;
}

/* Logo Section */
.cp-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 24px 0;
    flex-shrink: 0;
}

/* All-white logo: the WebP alpha channel is used as a CSS mask over a white
   fill, same technique as .cp-icon, so no chip is needed (#240). */
/* The mark uses currentColor as its mask fill, so core `a:hover` (0,1,1) would
   recolor it — this (0,2,0) rule pins the logo white on hover instead (kept
   clickable, no dim, normal pointer cursor first via text-decoration reset). */
.cp-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.cp-logo-link:hover {
    color: #ffffff;
}

.cp-logo-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 2px;
}

.cp-logo-link .cp-logo-mark {
    background-color: currentColor;
}

.cp-logo-link .cp-logo-mark.logo-collapsed {
    width: 36px;
    height: 36px;
    display: block;
    -webkit-mask: url('../assets/img/sidebar/cloudpedia-logo-collapse.webp') center / contain no-repeat;
    mask: url('../assets/img/sidebar/cloudpedia-logo-collapse.webp') center / contain no-repeat;
}

.cp-logo-link .cp-logo-mark.logo-expanded {
    width: 160px;
    height: 36px;
    display: none;
    -webkit-mask: url('../assets/img/sidebar/cloudpedia-logo-expand.webp') center / contain no-repeat;
    mask: url('../assets/img/sidebar/cloudpedia-logo-expand.webp') center / contain no-repeat;
}

.cp-sidebar.expanded .cp-logo-link .cp-logo-mark.logo-collapsed {
    display: none;
}

.cp-sidebar.expanded .cp-logo-link .cp-logo-mark.logo-expanded {
    display: block;
}

/* Logo divider */
.cp-sidebar-logo::after {
    content: none;
}

/* Main Navigation */
.cp-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.cp-sidebar-nav::before {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.18);
    margin-bottom: 8px;
}

.cp-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cp-nav-divider {
    height: 1px;
    margin: 8px 12px;
    background: rgba(255, 255, 255, 0.18);
}

.cp-nav-item {
    margin: 0;
    padding: 1px 12px;
}

.cp-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 8px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    height: 38px;
    position: relative;
    white-space: nowrap;
    border-radius: 8px;
}

.cp-sidebar.expanded .cp-nav-link {
    justify-content: flex-start;
    padding: 0 12px;
}

.cp-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.cp-nav-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}

.cp-nav-link:focus-visible {
    color: #ffffff;
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: -2px;
}

/* Shared mask icon base: takes the surrounding text colour */
.cp-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--cp-icon-src) center / contain no-repeat;
    mask: var(--cp-icon-src) center / contain no-repeat;
}

.cp-icon--home { --cp-icon-src: url('../assets/img/sidebar/home.svg'); }
.cp-icon--services { --cp-icon-src: url('../assets/img/sidebar/services.svg'); }
.cp-icon--domain { --cp-icon-src: url('../assets/img/sidebar/domain.svg'); }
.cp-icon--products { --cp-icon-src: url('../assets/img/sidebar/products.svg'); }
.cp-icon--billing-invoices { --cp-icon-src: url('../assets/img/sidebar/billing-invoices.svg'); }
.cp-icon--support-ticket { --cp-icon-src: url('../assets/img/sidebar/support-ticket.svg'); }

.cp-nav-label {
    display: none;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.cp-sidebar.expanded .cp-nav-label {
    display: inline;
}

/* Bottom user row (#238) */
.cp-icon--user-login {
    --cp-icon-src: url('../assets/img/sidebar/user-login.svg');
}

.cp-icon--signout-logout {
    --cp-icon-src: url('../assets/img/sidebar/signout-logout.svg');
}

.cp-sidebar-bottom {
    padding: 0 12px;
    flex-shrink: 0;
}

.cp-sidebar-bottom::before {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.18);
    margin-bottom: 16px;
}

.cp-user-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cp-sidebar.expanded .cp-user-row {
    flex-direction: row;
    gap: 8px;
}

.cp-bottom-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 10px;
}

.cp-bottom-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.cp-bottom-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}

.cp-bottom-link:focus-visible {
    color: #ffffff;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.cp-user-info {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.cp-sidebar.expanded .cp-user-info {
    display: block;
}

.cp-user-name {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cp-user-role {
    display: block;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.cp-user-action {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.cp-link-login {
    gap: 12px;
    height: 44px;
    padding: 0 8px;
    white-space: nowrap;
}

.cp-sidebar.expanded .cp-link-login {
    justify-content: flex-start;
    padding: 0 12px;
    gap: 16px;
}

.cp-bottom-label {
    display: none;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.cp-sidebar.expanded .cp-bottom-label {
    display: inline;
}

/* Page Wrapper */
.cp-page-wrapper {
    margin-left: calc(90px + var(--cp-nav-gutter));
    transition: margin-left 0.3s ease;
}

.cp-page-wrapper.cp-no-sidebar {
    margin-left: 0;
}

.cp-sidebar.expanded ~ .cp-page-wrapper {
    margin-left: calc(285px + var(--cp-nav-gutter));
}

/* #76 — push layout containment and overflow safeguards
   Content must use the width left after the rail; page-level horizontal
   overflow is forbidden, only designated tables scroll internally. Compact
   desktop (769–1199px) must wrap action groups safely. */
.cp-page-wrapper,
.cp-page-wrapper .container,
.cp-page-wrapper .row,
#main-body,
.primary-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.cp-page-wrapper .container {
    width: 100%;
}

/* Email verification banner aligned with Vercel-style content cards (issue 309).
   Mirror the main content box (#main-body .container > .row > .primary-content): 15px left, 45px right,
   because the #76 `.row { max-width: 100% }` cancels the row's right gutter. The card inside carries the content max-width.
   Scoped to pages with in-scope wrapper classes only. */
.cp-page-wrapper:has(.cp-home-vercel, .user-profile-20i, .user-security-20i, #inputExistingPassword, .cp-services-wrap, .cp-domains-wrap, .cp-invoices-wrap, .cp-quotes-wrap, .cp-productdetails-wrap, .user-management-cloudx, .account-manage-cloudx, .cp-contact-new, #tableEmailsList, .cp-announcements-wrap, .cp-downloads-wrap, .cp-ticket-submit, .submit-ticket-two-20i, .cp-tickets-wrap, .invoice-wrapper, .product-upgrade-page, .upgrade-summary-page, .cp-domain-register-vercel, .cp-domain-transfer-vercel, .view-ticket, .cp-confirm-wrap) .email-verification .container {
    width: calc(100% - 60px);
    max-width: none;
    margin-left: 15px;
    margin-right: 0;
}

/* 2FA recommendation banner (#401): same Home card alignment as the email banner above. */
.cp-page-wrapper:has(.cp-home-vercel) .cp-twofa-banner-wrap .container {
    width: calc(100% - 60px);
    max-width: none;
    margin-left: 15px;
    margin-right: 0;
}

/* Designated data tables scroll inside their own containers */
.dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Cards and panels must not force page overflow */
.cp-invoice-card,
.cp-home-wrapper .card,
.cp-services-panel,
.cp-tickets-panel,
.cp-renewal-panel,
.cp-domain-panel,
.cp-profile-card,
.cp-hd-card {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 1199px) and (min-width: 769px) {
    .cp-invoice-tabs-inner {
        flex-wrap: wrap;
        row-gap: 12px;
        overflow-x: visible;
    }

    .cp-invoice-status-badges,
    .cp-profile-actions,
    .cp-services-panel-header,
    .cp-services-panel-actions,
    .cp-tickets-panel-header,
    .cp-tickets-panel-actions,
    .cp-renewal-panel-header,
    .cp-domain-panel-header,
    .cp-hd-page-header,
    .header-topbar .right-topbar-content,
    .header-topbar .active-client {
        flex-wrap: wrap;
        min-width: 0;
    }

    .cp-bulk-actions-bar {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .cp-balance-card,
    .cp-stat-card,
    .cp-hd-hero-card {
        min-width: 0;
        max-width: 100%;
    }
}

/* Mobile Menu Toggle — header-owned, left slot inside sticky header (Hidden on Desktop) */
.cp-mobile-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    align-items: center;
    justify-content: center;
}

.cp-mobile-drawer-enabled .cp-mobile-menu-toggle {
    display: none;
}

.cp-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cp-sidebar-backdrop.visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .cp-sidebar {
        left: -285px;
        width: 285px;
        z-index: 1100;
        border-radius: 0;
    }

    .cp-sidebar.mobile-open {
        left: 0;
    }

    .cp-sidebar.expanded {
        left: 0;
        width: 285px;
    }

    .cp-sidebar-toggle {
        display: none;
    }

    .cp-page-wrapper {
        margin-left: 0;
    }

    .cp-mobile-drawer-enabled > .container {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .cp-mobile-drawer-enabled > .container > .top-nav-main-sec-header,
    .cp-mobile-drawer-enabled > .container > .navbar {
        flex: 1;
        min-width: 0;
    }

    .cp-mobile-drawer-enabled .cp-mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cp-mobile-menu-toggle::before,
    .cp-mobile-menu-toggle::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 2px;
        background: #000;
        transition: all 0.3s ease;
    }

    .cp-mobile-menu-toggle::before {
        top: 12px;
    }

    .cp-mobile-menu-toggle::after {
        bottom: 12px;
    }

    .cp-mobile-drawer-enabled .top-nav-mobile-toggle {
        display: none;
    }

    .cp-sidebar-backdrop.visible {
        display: block;
    }

    .cp-sidebar:not(.mobile-open) {
        left: -285px;
    }

    .cp-nav-label,
    .cp-bottom-label {
        display: inline;
    }

    .cp-user-row {
        flex-direction: row;
        gap: 8px;
    }

    .cp-user-info {
        display: block;
    }

    .cp-link-login {
        justify-content: flex-start;
        padding: 0 12px;
    }

    .cp-sidebar-nav {
        padding: 8px 0;
    }

    .cp-nav-link {
        justify-content: flex-start;
        padding: 0 12px;
    }

    .cp-nav-link:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .cp-logo-link .cp-logo-mark.logo-collapsed {
        display: none;
    }

    .cp-logo-link .cp-logo-mark.logo-expanded {
        display: block;
    }
}

/* Scrollbar Styling for Sidebar Nav */
.cp-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.cp-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.cp-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.cp-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* RTL Support */
body.body-rtl .cp-sidebar {
    right: 0;
    left: auto;
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
}

body.body-rtl .cp-sidebar-toggle {
    right: auto;
    left: 6px;
}

body.body-rtl .cp-sidebar.expanded .cp-sidebar-toggle {
    transform: translateY(-50%) rotate(0deg);
}

body.body-rtl .cp-sidebar:not(.expanded) .cp-sidebar-toggle {
    transform: translateY(-50%) rotate(180deg);
}

body.body-rtl .cp-page-wrapper {
    margin-right: calc(90px + var(--cp-nav-gutter));
    margin-left: 0;
}

body.body-rtl .cp-page-wrapper.cp-no-sidebar {
    margin-right: 0;
}

body.body-rtl .cp-sidebar.expanded ~ .cp-page-wrapper {
    margin-right: calc(285px + var(--cp-nav-gutter));
    margin-left: 0;
}

@media (max-width: 768px) {
    body.body-rtl .cp-sidebar {
        right: -285px;
        left: auto;
        border-radius: 0;
    }

    body.body-rtl .cp-sidebar.mobile-open {
        right: 0;
    }

    body.body-rtl .cp-mobile-drawer-enabled > .container {
        flex-direction: row-reverse;
    }
}

/* ---------------------------------------------------------------------------
   Retained !important — sticky header (10 declarations below).
   Audited 2026-08-26; kept deliberately. The competing declarations live in the
   PARENT theme, which we never edit:
     - templates/cloudx/js/cloudx.js:320  wgsMakeHeaderSticky() writes an INLINE
       style on scroll: headerBarPrimary.nextElementSibling.style.marginTop = ...
     - templates/cloudx/css/cloudx.css:14001
       .sticky-header-enabled.make-header-sticky { position: fixed } — (0,2,0)
   Each block below says which of the two it is fighting and whether !important
   is actually required. Do not bulk-delete: this is scroll-driven behaviour,
   invisible to a static computed-style diff or a screenshot. Verify by
   scrolling a real page past the header threshold, not by reading the CSS.
   --------------------------------------------------------------------------- */

/* Announcement Banner — markup removed in issue 338; display: none kept as a guard */
.announcement-banner {
    display: none;
}

.side-header-menu-active-theme .navbar .view-cart-top {
    margin-left: auto;
    margin-right: 44px;
}

/* Sticky Header fix for cp-sidebar - Using position: sticky is smoother than fixed */
/* LIKELY REDUNDANT, UNVERIFIED — `#header-top-sticky` is (1,0,0) and already
   outranks the parent's (0,2,0) `position: fixed`, so !important should not be
   needed here; no inline style competes for these four properties. Left in
   place because the deciding behaviour only appears while scrolling past the
   header threshold, which no offline check we have can observe. */
#header-top-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 998 !important;
    background-color: #fafafa !important;
    border-bottom: 1px solid #eaeaea;
}

/* Parent theme JS applies position: fixed and margin-top to elements. 
   Since we use position: sticky (which stays in flow), we need to override those. */
/* LIKELY REDUNDANT, UNVERIFIED — same reasoning: (1,2,0) beats the parent's
   (0,2,0). This is the class cloudx.js toggles on scroll (cloudx.js:319/322). */
#header-top-sticky.make-header-sticky {
    position: sticky !important;
    left: auto !important;
    width: auto !important;
}

/* Prevent unwanted margin from parent theme JS on any following elements */
/* LOAD-BEARING — DO NOT REMOVE. This is the one declaration here that cannot be
   replaced by a specificity bump. cloudx.js:320 sets element.style.marginTop
   directly on the next sibling on every scroll event, and an inline style
   outranks every selector in the cascade. !important is the only mechanism that
   wins. Remove it and the content below the header jumps as the user scrolls. */
#header-top-sticky + *,
#header-top-sticky.make-header-sticky + * {
    margin-top: 0 !important;
}

/* Specific reset for the old sidebar and breadcrumbs */
/* UNVERIFIED — may be covered already by the `#header-top-sticky + *` rule above
   if this element is the header's next sibling, or may be a separate target the
   parent JS also margins. Same inline-style opponent, so if it IS needed,
   !important is again the only thing that works. Not safe to drop on inspection. */
.side-menu-bar-cloudx {
    margin-top: 0 !important;
}

/* Notification button — align icon and badge side-by-side like cart */
.notification-client-right .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Cart badge — blue to match notification badge */
.view-cart-top .cart-btn .badge-info {
    background-color: var(--cp-primary-500);
}

/* Notification badge — inline rounded square to match cart badge structure */
span.badge.badge-notification {
    background-color: var(--cp-primary-500);
    color: #fff;
    border-radius: 4px;
    position: static;
}

/* Inherited CloudX account switcher: use Cloudpedia's natural palette. */
.header-topbar .active-client .btn-active-client {
    color: var(--cp-gray-900);
}

.header-topbar .active-client .fad.fa-random::before {
    color: var(--cp-primary-500);
}

.header-topbar .active-client .fad.fa-random::after {
    color: var(--cp-primary-100);
}

/* Default client-area page canvas — white.
   Parent cloudx.css paints body.primary-bg-color / section#main-body /
   #main-body.body-background-cloudx pale lavender-grey (#f1f3fa). Override
   here (child, always loaded, after the parent CSS) so equal specificity
   wins by source order — no !important, never edit the parent. Page-specific
   styles may opt into another canvas when the design calls for it. */
body.primary-bg-color,
section#main-body,
#main-body.body-background-cloudx {
    background-color: #ffffff;
}