/* ==========================================================
   VENDOR DASHBOARD OVERRIDES
   Restyling the kbmarketplace vendor dashboard to a modern
   admin-panel look. All selectors scoped under
   #kb-marketplace-layout to avoid affecting other pages.
   ========================================================== */


/* ==========================================================
   0. FULL-WIDTH BREAKOUT
   Force the vendor dashboard to use the full viewport width
   by overriding the theme's .container constraint.
   Uses :has() to scope changes only when the dashboard is present.
   ========================================================== */

/* Remove the container max-width when vendor dashboard is inside */
#wrapper .container:has(#kb-marketplace-layout) {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove the row wrapper padding/margins */
#wrapper .container:has(#kb-marketplace-layout) > .row-wrapper {
    margin-left: 0;
    margin-right: 0;
}

/* Make the content wrapper fill full width */
#wrapper .container:has(#kb-marketplace-layout) #content-wrapper {
    padding-left: 0;
    padding-right: 0;
}

/* Hide the page title/breadcrumb banner on vendor dashboard pages */
body[id^="module-kbmarketplace"] .page-title-wrapper {
    display: none;
}

/* Remove extra section wrapper padding */
body[id^="module-kbmarketplace"] #wrapper {
    padding-top: 0;
}

/* Same treatment on ANY page showing the seller admin chrome
   (addon kb* modules have body ids like module-kbbundleproduct-…) */
body:has(#vd-topbar) .page-title-wrapper {
    display: none;
}

body:has(#vd-topbar) #wrapper {
    padding-top: 0;
}

body:has(#vd-topbar) .back-top {
    display: none;
}

/* page.tpl-based seller pages (e.g. kbdealmanager): flatten the theme's
   #content box so the dashboard grid sits directly on the body bg */
body:has(#vd-topbar) #content {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}


/* ==========================================================
   0b. ADMIN CHROME — SLIM TOPBAR
   Rendered by _partials/seller-topbar.tpl in place of the
   storefront header on seller dashboard pages.
   ========================================================== */

.vd-topbar {
    position: sticky;
    top: 0;
    z-index: var(--vd-z-header, 200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--vd-topbar-height, 56px);
    padding: 0 20px;
    background-color: var(--vd-bg-topbar, #fff);
    box-shadow: var(--vd-topbar-shadow, 0 1px 4px rgba(37, 50, 55, 0.08));
}

.vd-topbar-left,
.vd-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.vd-topbar-logo {
    display: inline-flex;
    align-items: center;
}

.vd-topbar-logo img {
    max-height: 34px;
    width: auto;
}

.vd-topbar-divider {
    width: 1px;
    height: 24px;
    background-color: var(--vd-border, #e2e7ec);
}

.vd-topbar-title {
    font-size: var(--vd-font-size-sm, 12px);
    font-weight: 700;
    color: var(--vd-text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.vd-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vd-text-secondary, #6c757d);
    font-size: var(--vd-font-size-base, 14px);
    font-weight: 500;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--vd-card-radius-sm, 8px);
    transition: var(--vd-transition, all 0.2s ease);
}

.vd-topbar-link:hover,
.vd-topbar-link:focus {
    color: var(--vd-text-primary, #253237);
    background-color: var(--vd-bg-body, #f5f7fa);
    text-decoration: none;
}

.vd-topbar-link .material-icons {
    font-size: 19px;
}

.vd-topbar-logout:hover {
    color: var(--vd-danger, #dc3545);
}

/* Hamburger — hidden on desktop */
.vd-sidebar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--vd-border, #e2e7ec);
    border-radius: var(--vd-card-radius-sm, 8px);
    cursor: pointer;
}

.vd-sidebar-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--vd-text-primary, #253237);
    border-radius: 2px;
}

@media (max-width: 992px) {
    .vd-sidebar-toggle {
        display: inline-flex;
    }

    .vd-topbar-link span {
        display: none;
    }

    .vd-topbar-title {
        display: none;
    }

    .vd-topbar-divider {
        display: none;
    }

    /* Off-canvas sidebar — only when JS is active (body.vd-js),
       otherwise the sidebar keeps its stacked fallback position */
    body.vd-js #kblayout-leftcol {
        position: fixed;
        top: var(--vd-topbar-height, 56px);
        left: 0;
        bottom: 0;
        width: min(300px, 85vw);
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        z-index: calc(var(--vd-z-header, 200) + 1);
        overflow-y: auto;
        background-color: var(--vd-bg-body, #f5f7fa);
        box-shadow: 0 8px 24px rgba(37, 50, 55, 0.18);
        padding: 12px !important;
        margin: 0;
    }

    body.vd-js.vd-sidebar-open #kblayout-leftcol {
        transform: translateX(0);
    }
}


/* ==========================================================
   1. PAGE LAYOUT & BODY
   ========================================================== */

#kb-marketplace-layout {
    background-color: var(--vd-bg-body);
    color: var(--vd-text-primary);
    font-size: var(--vd-font-size-base);
    font-family: var(--vd-font-family);
    padding: 0;
    border: none;
}

#kb-marketplace-layout.outer-border {
    border: none;
}

#kb-marketplace-layout.pad5 {
    padding: 0;
}

/* Override the float-based layout with flexbox */
#kb-marketplace-layout > #kblayout-leftcol,
#kb-marketplace-layout > #kblayout-centercol {
    float: none !important;
}

#kb-marketplace-layout {
    display: flex;
    flex-wrap: wrap;
    min-height: calc(100vh - 200px);
}

#kblayout-leftcol {
    background-color: transparent;
    border-radius: 0;
    min-height: 100%;
    padding: 20px 0 20px 20px !important;
    /* fixed admin-style sidebar width instead of the 25% bootstrap column */
    flex: 0 0 290px;
    width: 290px !important;
    max-width: 290px;
}

#kblayout-centercol {
    background-color: var(--vd-bg-body);
    padding: 20px !important;
    border-radius: 0;
    flex: 1;
    min-width: 0;
}

/* Fix clearfix not needed with flex */
#kb-marketplace-layout > .clearfix {
    display: none;
}

/* Remove the overall outer border from page */
#kb-marketplace-layout .outer-border {
    border: none;
}


/* ==========================================================
   2. SIDEBAR / NAVIGATION
   ========================================================== */

/* The sidebar itself is a white rounded card */
#kb-seller-account-menus {
    padding: 0 !important;
    background-color: var(--vd-bg-sidebar);
    border: 1px solid var(--vd-sidebar-border);
    border-radius: var(--vd-card-radius);
    box-shadow: var(--vd-card-shadow);
    overflow: hidden;
}

#kb-seller-account-menus .kb-account-accordian {
    /* Mobile-only accordion toggle ("Seller Account Menu"). On core pages the JS
       hides it on desktop; on addon pages (sidebar injected via the seller_layout
       hook fallback) it was showing. Hide on desktop for uniformity — the mobile
       media query below (#kb-marketplace-layout .kb-account-accordian) re-shows it.
       Kept in the DOM (not removed) — it is a kb-common.js DOM contract. */
    display: none;
    background-color: var(--vd-bg-sidebar);
    border-bottom: 1px solid var(--vd-sidebar-border);
    color: var(--vd-text-primary);
    padding: 16px 20px;
    font-size: var(--vd-font-size-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#kb-seller-account-menus .kb-account-accordian .icon-plus {
    color: var(--vd-text-muted);
}

/* Menu container */
#kb-s-account-mlist {
    padding: 8px 0;
}

.kb-menu-block {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Section labels inside the sidebar (added by theme menus.tpl override) */
#kb-marketplace-layout .vd-menu-section-label {
    display: block;
    padding: 14px 20px 6px;
    font-size: var(--vd-font-size-xs);
    font-weight: 700;
    color: var(--vd-sidebar-section-label);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    list-style: none;
}

/* Individual menu items — rounded pill style.
   Covers BOTH the standard .kb-menu-list-item AND any non-standard
   top-level <li> that addon modules inject (kbproductreviews using
   .kb-seller-reviews-menu, kbseopro's bare <li>, kbpricecomparison's
   .kbpc-account-menu-item, …) so none of them escape the card. */
#kb-marketplace-layout .kb-menu-block > li:not(.vd-menu-section-label),
#kb-marketplace-layout .kb-menu-block > a > li {
    position: relative;
    list-style: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--vd-text-sidebar);
    padding: 9px 12px;
    margin: 1px 10px;
    font-size: var(--vd-font-size-base);
    font-weight: 400;
    line-height: 1.35;
    transition: var(--vd-transition);
    border-radius: var(--vd-card-radius-sm);
    border-left: none;
}

/* Some modules wrap the whole item in an inner <a> (and occasionally a
   nested span.link-item). Flatten those so they read like the rest. */
#kb-marketplace-layout .kb-menu-block > li > a {
    display: block;
    padding: 0;
    margin: 0;
    color: inherit;
    text-decoration: none;
}

#kb-marketplace-layout .kb-menu-block .link-item {
    display: inline;
    min-height: 0;
    height: auto;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    font: inherit;
    color: inherit;
    text-align: left;
}

#kb-marketplace-layout .kb-menu-block a {
    color: var(--vd-text-sidebar);
    text-decoration: none;
}

#kb-marketplace-layout .kb-menu-block a:hover {
    color: var(--vd-text-sidebar-hover);
    text-decoration: none;
}

#kb-marketplace-layout .kb-menu-block > li:not(.vd-menu-section-label):hover,
#kb-marketplace-layout .kb-menu-block > a > li:hover {
    background-color: var(--vd-bg-sidebar-hover);
    color: var(--vd-text-sidebar-hover);
}

#kb-marketplace-layout .kb-menu-block > li:hover a,
#kb-marketplace-layout .kb-menu-block > a:hover > li {
    color: var(--vd-text-sidebar-hover);
}

/* Active menu item — soft green pill (.kb-active-menuitem is the standard
   marker; some modules use a plain .active) */
#kb-marketplace-layout .kb-active-menuitem,
#kb-marketplace-layout .kb-menu-block > li.active,
#kb-marketplace-layout .kb-menu-block > a > li.active {
    background-color: var(--vd-bg-sidebar-active);
    border-color: transparent;
    color: var(--vd-text-sidebar-active);
    font-weight: 600;
    z-index: auto;
}

#kb-marketplace-layout .kb-active-menuitem a,
#kb-marketplace-layout .kb-menu-block > li.active a {
    color: var(--vd-text-sidebar-active);
}

#kb-marketplace-layout .kb-active-menuitem:hover {
    background-color: var(--vd-bg-sidebar-active);
    color: var(--vd-text-sidebar-active);
}

/* Menu icons — normalise both the KB icon font and standard material-icons */
#kb-marketplace-layout .kb-menu-block > li:not(.vd-menu-section-label) .kb-material-icons,
#kb-marketplace-layout .kb-menu-block > li:not(.vd-menu-section-label) .material-icons,
#kb-marketplace-layout .kb-menu-block > a > li .kb-material-icons,
#kb-marketplace-layout .kb-menu-block > a > li .material-icons {
    font-size: 19px;
    margin-right: 12px;
    width: 20px;
    vertical-align: middle;
    opacity: 0.75;
}

#kb-marketplace-layout .kb-active-menuitem .kb-material-icons,
#kb-marketplace-layout .kb-active-menuitem .material-icons,
#kb-marketplace-layout .kb-menu-block > li.active .material-icons {
    opacity: 1;
    color: var(--vd-secondary);
}

/* Menu badge */
#kb-marketplace-layout .kb-menu-badge {
    background-color: var(--vd-secondary-light);
    border: none;
    color: var(--vd-text-sidebar-active);
    font-size: var(--vd-font-size-xs);
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
}

#kb-marketplace-layout .kb-active-menuitem .kb-menu-badge {
    background-color: var(--vd-secondary);
    border: none;
    color: #fff;
}

/* Sub-menu items */
#kb-marketplace-layout .kb-menu-block li ul {
    background-color: var(--vd-bg-table-header);
    margin: 8px -12px -9px;
    padding: 8px 0 8px 44px;
    border-top: 1px solid var(--vd-border-light);
    border-radius: 0 0 var(--vd-card-radius-sm) var(--vd-card-radius-sm);
    list-style: none;
}

#kb-marketplace-layout .kb-menu-block li ul li {
    border-bottom: none;
    padding: 5px 0;
    margin: 0;
    background: none;
}

#kb-marketplace-layout .kb-menu-block li ul a {
    color: var(--vd-text-sidebar);
    font-size: var(--vd-font-size-sm);
}

#kb-marketplace-layout .kb-menu-block li ul a:hover {
    color: var(--vd-text-sidebar-hover);
}

#kb-marketplace-layout .kb-menu-block li ul a.smenu-other-feature-menu-active {
    color: var(--vd-text-sidebar-active);
    font-weight: 600;
}

/* Collapsible parents (Other Features + addon submenus) need room on the
   right for the +/- toggle. */
#kb-marketplace-layout .collapsible-otherfeature-menu {
    padding-right: 34px;
}

#kb-marketplace-layout #kb_otherfeature_menu > a {
    color: var(--vd-text-sidebar);
}

/* Submenu expand/collapse symbol.
   The addon templates put a static "+" glyph (<i> &#xe145;) inside the
   symbol AND kbmpsellersupport injects a :after "+"/"-". Hide the inner
   glyph so only the single toggling +/- remains, pinned to the right of
   the pill. Doubled #ids beat the module's injected <style>. */
#kb-marketplace-layout #kb-seller-account-menus .kb-smenu-accordian-symbol {
    float: none !important;
    position: absolute;
    top: 6px;
    right: 11px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: var(--vd-text-sidebar);
    opacity: 0.65;
    font-size: 16px;
}

#kb-marketplace-layout #kb-seller-account-menus .kb-smenu-accordian-symbol .kb-material-icons,
#kb-marketplace-layout #kb-seller-account-menus .kb-smenu-accordian-symbol .material-icons {
    display: none;
}

#kb-marketplace-layout #kb-seller-account-menus .kb-active-menuitem .kb-smenu-accordian-symbol {
    color: var(--vd-text-sidebar-active);
    opacity: 1;
}

#kb-marketplace-layout .kb-menu-block .collapsible-otherfeature-menu {
    background-color: transparent;
}

/* ---- Restore icons for items whose module ships a broken or absent glyph
   (FontAwesome classes that aren't loaded, or KB-font codepoints missing
   from the icon font, which render as tofu boxes). We draw a clean Material
   Icon via ::before. The Material Icons font is self-hosted by the theme so
   it's available here. Each rule is scoped to the specific item so good
   icons elsewhere are never touched. ---- */

/* Empty FontAwesome <i> slots: core "Customer Tickets" (icon-comment) and
   preferreddeliverytime "Delivery Time" (fa-clock). */
#kb-marketplace-layout .kb-menu-block i.icon-comment,
#kb-marketplace-layout .kb-menu-block i.fa-clock {
    font-family: 'Material Icons', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    width: 20px;
    margin-right: 12px;
    vertical-align: middle;
    opacity: 0.75;
}
#kb-marketplace-layout .kb-menu-block i.icon-comment::before { content: "\e0bf"; } /* forum */
#kb-marketplace-layout .kb-menu-block i.fa-clock::before { content: "\e8b5"; }     /* schedule */

/* Broken KB-font glyphs (tofu boxes): kbmpsellersupport "Customer Tickets",
   kbmarketplacesellerauction "Manage Auction", kbmarketplaceapi "API Keys".
   Suppress the bad char (font-size:0) and draw a Material Icon via ::before.
   Targeted via the module name in the link so good icons aren't affected. */
/* Doubled #id prefix so font-size:0 beats the base icon rule (which carries
   a :not() class and would otherwise keep the tofu glyph visible at 19px). */
#kb-marketplace-layout #kb-seller-account-menus .kb-menu-block > li:has(ul a[href*="kbmpsellersupport"]) > a > i,
#kb-marketplace-layout #kb-seller-account-menus .kb-menu-block > li:has(ul a[href*="kbmarketplacesellerauction"]) > a > i,
#kb-marketplace-layout #kb-seller-account-menus .kb-menu-block > a[href*="apikeys"] > li > i {
    font-size: 0;
    width: 20px;
    margin-right: 12px;
    vertical-align: middle;
    opacity: 0.75;
    display: inline-block;
}
#kb-marketplace-layout #kb-seller-account-menus .kb-menu-block > li:has(ul a[href*="kbmpsellersupport"]) > a > i::before,
#kb-marketplace-layout #kb-seller-account-menus .kb-menu-block > li:has(ul a[href*="kbmarketplacesellerauction"]) > a > i::before,
#kb-marketplace-layout #kb-seller-account-menus .kb-menu-block > a[href*="apikeys"] > li > i::before {
    font-family: 'Material Icons', Arial, sans-serif;
    font-style: normal;
    font-size: 19px;
    vertical-align: middle;
}
#kb-marketplace-layout #kb-seller-account-menus .kb-menu-block > li:has(ul a[href*="kbmpsellersupport"]) > a > i::before { content: "\e311"; }        /* headset_mic */
#kb-marketplace-layout #kb-seller-account-menus .kb-menu-block > li:has(ul a[href*="kbmarketplacesellerauction"]) > a > i::before { content: "\e90e"; } /* gavel */
#kb-marketplace-layout #kb-seller-account-menus .kb-menu-block > a[href*="apikeys"] > li > i::before { content: "\e0da"; }                              /* vpn_key */

/* SEO Settings (kbseopro) ships no <i> at all — prepend an icon on the link. */
#kb-marketplace-layout .kb-menu-block > li > a[href*="sellerseo"]::before {
    content: "\e8b6"; /* search */
    font-family: 'Material Icons', Arial, sans-serif;
    font-style: normal;
    font-size: 19px;
    width: 20px;
    margin-right: 12px;
    vertical-align: middle;
    opacity: 0.75;
    display: inline-block;
}


/* ==========================================================
   2b. DASHBOARD QUICK ACCESS GRID
   Injected by vendor-dashboard.js below the KPI cards so sellers
   can jump to common pages without the long sidebar.
   ========================================================== */

#kb-marketplace-layout .vd-quick-access {
    background-color: var(--vd-bg-card);
    border-radius: var(--vd-card-radius);
    box-shadow: var(--vd-card-shadow);
    padding: 16px 18px;
    margin: 16px 0 0;
}

#kb-marketplace-layout .vd-qa-head {
    font-size: var(--vd-font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--vd-text-secondary);
    margin-bottom: 12px;
}

#kb-marketplace-layout .vd-qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
}

#kb-marketplace-layout .vd-qa-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid var(--vd-border-light);
    border-radius: 10px;
    background-color: var(--vd-bg-card);
    color: var(--vd-text-primary);
    text-decoration: none;
    text-align: center;
    transition: var(--vd-transition);
}

#kb-marketplace-layout .vd-qa-tile:hover {
    border-color: rgba(128, 180, 53, 0.55);
    box-shadow: var(--vd-card-shadow-hover);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--vd-text-primary);
}

#kb-marketplace-layout .vd-qa-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--vd-secondary-light);
    color: var(--vd-secondary);
}

#kb-marketplace-layout .vd-qa-ico i {
    font-size: 22px;
    width: auto;
    margin: 0;
    opacity: 1;
    vertical-align: middle;
}

#kb-marketplace-layout .vd-qa-label {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--vd-text-primary);
}

/* Cycle pastel tints so the grid reads like the KPI cards */
#kb-marketplace-layout .vd-qa-tile:nth-child(6n+1) .vd-qa-ico { background: var(--vd-tint-blue); color: var(--vd-tint-blue-fg); }
#kb-marketplace-layout .vd-qa-tile:nth-child(6n+2) .vd-qa-ico { background: var(--vd-tint-green); color: var(--vd-tint-green-fg); }
#kb-marketplace-layout .vd-qa-tile:nth-child(6n+3) .vd-qa-ico { background: var(--vd-tint-purple); color: var(--vd-tint-purple-fg); }
#kb-marketplace-layout .vd-qa-tile:nth-child(6n+4) .vd-qa-ico { background: var(--vd-tint-amber); color: var(--vd-tint-amber-fg); }
#kb-marketplace-layout .vd-qa-tile:nth-child(6n+5) .vd-qa-ico { background: var(--vd-tint-red); color: var(--vd-tint-red-fg); }
#kb-marketplace-layout .vd-qa-tile:nth-child(6n+6) .vd-qa-ico { background: rgba(58,138,158,0.14); color: #2c7a8c; }

@media (max-width: 480px) {
    #kb-marketplace-layout .vd-qa-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    }
}


/* ==========================================================
   3. CONTENT AREA
   ========================================================== */

/* Main content panel */
#kb-marketplace-layout .kb-block.kb-panel.centerlftoffest {
    margin-left: 0;
    background-color: transparent;
}

#kb-marketplace-layout .kb-content {
    border: none;
    padding: 0;
    background-color: transparent;
}

/* Content header (page title bar) */
#kb-marketplace-layout .kb-content-header {
    border-bottom: none;
    margin-bottom: 24px;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#kb-marketplace-layout .kb-content-header::after {
    display: none;
}

#kb-marketplace-layout .kb-content-header h1 {
    font-size: var(--vd-font-size-h1);
    font-weight: 700;
    color: var(--vd-text-primary);
    margin: 0;
    float: none;
}

#kb-marketplace-layout .kb-content-header .kb-content-header-btn {
    float: none;
    margin-top: 0;
}

/* Vertical spacers */
#kb-marketplace-layout .kb-vspacer5 {
    height: 16px;
}

#kb-marketplace-layout .kb-vspacer10 {
    height: 24px;
}


/* ==========================================================
   4. CARDS & PANELS
   ========================================================== */

#kb-marketplace-layout .kb-panel {
    background-color: var(--vd-bg-card);
    border-radius: var(--vd-card-radius);
    box-shadow: var(--vd-card-shadow);
    margin-bottom: 20px;
}

#kb-marketplace-layout .kb-panel.outer-border {
    border: none;
    padding: 0;
}

/* Panel header */
#kb-marketplace-layout .kb-panel .kb-panel-header {
    background-color: transparent;
    padding: var(--vd-card-padding-sm) var(--vd-card-padding);
    border-bottom: 1px solid var(--vd-border-light);
    border-radius: var(--vd-card-radius) var(--vd-card-radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#kb-marketplace-layout .kb-panel .kb-panel-header h1 {
    font-size: var(--vd-font-size-lg);
    font-weight: 600;
    color: var(--vd-text-primary);
    margin: 0;
    padding: 0;
    float: none;
}

#kb-marketplace-layout .kb-panel .kb-panel-header .link {
    float: none;
    font-style: normal;
    font-size: var(--vd-font-size-sm);
}

#kb-marketplace-layout .kb-panel .kb-panel-header .link a {
    color: var(--vd-secondary);
    font-weight: 500;
    text-decoration: none;
}

#kb-marketplace-layout .kb-panel .kb-panel-header .link a:hover {
    color: var(--vd-secondary-hover);
    text-decoration: underline;
}

/* Panel body */
#kb-marketplace-layout .kb-panel .kb-panel-body {
    padding: var(--vd-card-padding);
    border-top: none;
}

#kb-marketplace-layout .kb-panel-table-body {
    padding: 0;
    border-top: none;
}

/* Accordion panels (collapsible) */
#kb-marketplace-layout .kb-panel-header-tab {
    cursor: pointer;
}

#kb-marketplace-layout .kb-accordian-symbol {
    color: var(--vd-text-secondary);
    font-size: 14px;
}

/* Clearfix inside panel headers */
#kb-marketplace-layout .kb-panel .kb-panel-header .clearfix {
    display: none;
}


/* ==========================================================
   5. DASHBOARD STAT BOXES
   ========================================================== */

#kb-marketplace-layout .summary-list-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0 0 24px 0;
    list-style: none;
}

/* Wrapper outer-border that contains the stats */
#kb-marketplace-layout .kb-content > .outer-border {
    border: none;
    background: transparent;
    padding: 0;
}

#kb-marketplace-layout .summary-list-group li.summary-box {
    display: block;
    margin: 0;
    padding: 0;
    background-color: var(--vd-bg-card);
    border-radius: var(--vd-card-radius);
    box-shadow: var(--vd-card-shadow);
    border: 1px solid var(--vd-border-light);
    overflow: hidden;
    transition: var(--vd-transition);
}

#kb-marketplace-layout .summary-list-group li.summary-box:hover {
    box-shadow: var(--vd-card-shadow-hover);
    transform: translateY(-2px);
}

/* Pastel tinted cards (Dashtar style) */
#kb-marketplace-layout li.blue-summary {
    background: linear-gradient(135deg, var(--vd-tint-blue) 0%, #f3f9fd 100%);
    border-color: transparent;
}

#kb-marketplace-layout li.purple-summary {
    background: linear-gradient(135deg, var(--vd-tint-purple) 0%, #f8f5fc 100%);
    border-color: transparent;
}

#kb-marketplace-layout li.green-summary {
    background: linear-gradient(135deg, var(--vd-tint-green) 0%, #f5faec 100%);
    border-color: transparent;
}

#kb-marketplace-layout li.yellow-summary {
    background: linear-gradient(135deg, var(--vd-tint-amber) 0%, #fefaf0 100%);
    border-color: transparent;
}

#kb-marketplace-layout li.red-summary {
    background: linear-gradient(135deg, var(--vd-tint-red) 0%, #fef4f3 100%);
    border-color: transparent;
}

/* Stat box content */
#kb-marketplace-layout .summary-single-box {
    padding: 18px 20px;
}

#kb-marketplace-layout .summary-single-box .mo_kpi_content {
    padding-left: 62px;
    height: auto;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Stat icon — circular white chip on the tinted card */
#kb-marketplace-layout .summary-single-box .mo_kpi_content i.big {
    width: 46px;
    height: 46px;
    line-height: 46px;
    font-size: 22px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(37, 50, 55, 0.08);
    background-color: #ffffff;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
}

#kb-marketplace-layout .blue-summary .mo_kpi_content i.big {
    background-color: #ffffff;
    color: var(--vd-tint-blue-fg);
}

#kb-marketplace-layout .purple-summary .mo_kpi_content i.big {
    background-color: #ffffff;
    color: var(--vd-tint-purple-fg);
}

#kb-marketplace-layout .green-summary .mo_kpi_content i.big {
    background-color: #ffffff;
    color: var(--vd-tint-green-fg);
}

#kb-marketplace-layout .yellow-summary .mo_kpi_content i.big {
    background-color: #ffffff;
    color: var(--vd-tint-amber-fg);
}

#kb-marketplace-layout .red-summary .mo_kpi_content i.big {
    background-color: #ffffff;
    color: var(--vd-tint-red-fg);
}

/* Stat title */
#kb-marketplace-layout .summary-single-box .mo_kpi_content .big-title {
    font-size: var(--vd-font-size-sm);
    color: var(--vd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 4px;
    order: 1;
}

/* Stat value */
#kb-marketplace-layout .summary-single-box .mo_kpi_content .big-value {
    font-size: var(--vd-font-size-stat);
    font-weight: 700;
    color: var(--vd-text-primary);
    order: 2;
}

/* Remove colored value text — keep neutral */
#kb-marketplace-layout .blue-summary .big-value,
#kb-marketplace-layout .purple-summary .big-value,
#kb-marketplace-layout .green-summary .big-value,
#kb-marketplace-layout .yellow-summary .big-value,
#kb-marketplace-layout .red-summary .big-value {
    color: var(--vd-text-primary);
}


/* ==========================================================
   6. TABLES
   ========================================================== */

#kb-marketplace-layout .kb-table-list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    min-width: 0;
}

#kb-marketplace-layout .kb-table-list thead {
    background: var(--vd-bg-table-header);
    height: auto;
}

#kb-marketplace-layout .kb-table-list th {
    background: var(--vd-bg-table-header);
    border: none;
    border-bottom: 2px solid var(--vd-border);
    padding: 12px 16px;
    font-size: var(--vd-font-size-sm);
    font-weight: 600;
    color: var(--vd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

#kb-marketplace-layout .kb-table-list tbody td {
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--vd-border-light);
    font-size: var(--vd-font-size-base);
    color: var(--vd-text-primary);
    vertical-align: middle;
}

#kb-marketplace-layout .kb-table-list tbody tr:hover {
    background-color: var(--vd-bg-table-hover);
}

#kb-marketplace-layout .kb-table-list tbody tr:last-child td {
    border-bottom: none;
}

#kb-marketplace-layout .kb-table-list a {
    color: var(--vd-text-link);
    text-decoration: none;
}

#kb-marketplace-layout .kb-table-list a:hover {
    color: var(--vd-primary);
    text-decoration: underline;
}

#kb-marketplace-layout .kb-empty-table {
    padding: 40px 16px;
    color: var(--vd-text-muted);
    font-style: italic;
}

/* Sales comparison tables */
#kb-marketplace-layout .dh-tbl-smmry {
    border: 1px solid var(--vd-border-light);
    border-radius: var(--vd-card-radius-sm);
    overflow: hidden;
}

#kb-marketplace-layout .dh-tbl-smmry thead {
    background-color: var(--vd-bg-table-header);
}

#kb-marketplace-layout .dh-tbl-smmry th {
    padding: 10px 14px;
    font-size: var(--vd-font-size-sm);
    font-weight: 600;
    color: var(--vd-text-primary);
}

#kb-marketplace-layout .dh-tbl-smmry td {
    padding: 8px 14px;
    font-size: var(--vd-font-size-base);
}

#kb-marketplace-layout .dh-tbl-smmry tr {
    border-bottom: 1px solid var(--vd-border-light);
}

#kb-marketplace-layout .dh-tbl-smmry a {
    color: var(--vd-text-link);
}

/* Sales comparison layout */
#kb-marketplace-layout .tbl-list-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0;
}

#kb-marketplace-layout .tbl-list-group .tbl-list {
    display: block;
    width: 100%;
    margin: 0;
}

/* Analysis popper / comparison indicators */
#kb-marketplace-layout .kb-positive-sign {
    color: var(--vd-success);
    font-weight: 600;
    font-size: var(--vd-font-size-sm);
}

#kb-marketplace-layout .kb-negative-sign {
    color: var(--vd-danger);
    font-weight: 600;
    font-size: var(--vd-font-size-sm);
}

#kb-marketplace-layout .kb-popper-info {
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-card-radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 10px 14px;
    font-size: var(--vd-font-size-sm);
}


/* ==========================================================
   7. FORMS & INPUTS
   ========================================================== */

#kb-marketplace-layout .kb-form {
    padding: var(--vd-card-padding);
}

#kb-marketplace-layout .kb-inpfield,
#kb-marketplace-layout .kb-inptexarea,
#kb-marketplace-layout .kb-inpselect {
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-card-radius-sm);
    background-color: #fff;
    padding: 8px 12px;
    font-size: var(--vd-font-size-base);
    color: var(--vd-text-primary);
    transition: var(--vd-transition);
    width: 100%;
}

#kb-marketplace-layout .kb-inpfield,
#kb-marketplace-layout .kb-inpselect {
    height: 40px;
}

#kb-marketplace-layout .kb-inpfield:focus,
#kb-marketplace-layout .kb-inptexarea:focus,
#kb-marketplace-layout .kb-inpselect:focus {
    border-color: var(--vd-secondary);
    background-color: #fff;
    box-shadow: 0 0 0 3px var(--vd-secondary-light);
    outline: none;
}

/* Labeled input groups */
#kb-marketplace-layout .kb-labeled-inpfield .inplbl,
#kb-marketplace-layout .kb-labeled-inpfield .inplbl-r {
    border-color: var(--vd-border);
    background-color: var(--vd-bg-table-header);
    color: var(--vd-text-secondary);
    border-radius: var(--vd-card-radius-sm) 0 0 var(--vd-card-radius-sm);
}

#kb-marketplace-layout .kb-labeled-inpfield .inplbl-r {
    border-radius: 0 var(--vd-card-radius-sm) var(--vd-card-radius-sm) 0;
}

/* Form labels */
#kb-marketplace-layout .kb-form .kblabel {
    font-size: var(--vd-font-size-base);
    font-weight: 500;
    color: var(--vd-text-primary);
    margin-bottom: 6px;
}

#kb-marketplace-layout .kb-form .kblabel i {
    background-color: var(--vd-secondary);
    border-radius: 50%;
    font-size: 18px;
}

/* Highlighted form label */
#kb-marketplace-layout .kb-form .highlighted-form-label {
    color: var(--vd-secondary);
    background-color: var(--vd-secondary-light);
    border: none;
    border-bottom: 1px solid var(--vd-secondary-light);
    border-radius: var(--vd-card-radius-sm);
    font-size: var(--vd-font-size-base);
}

/* Form validation */
#kb-marketplace-layout .kb-validation-error {
    color: var(--vd-danger);
    font-size: var(--vd-font-size-sm);
    margin-top: 4px;
}

#kb-marketplace-layout .kb-highlight-error-field {
    border-color: var(--vd-danger);
    background-color: var(--vd-danger-light);
}

/* Form help text */
#kb-marketplace-layout .form-inp-help {
    font-size: var(--vd-font-size-sm);
    color: var(--vd-text-muted);
    margin-top: 4px;
}

/* Form field blocks */
#kb-marketplace-layout .kb-form-label-block {
    margin-bottom: 8px;
}

/* Filter blocks */
#kb-marketplace-layout .kb-filter-container {
    background: var(--vd-bg-card);
    border: none;
    border-radius: var(--vd-card-radius);
    box-shadow: var(--vd-card-shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

#kb-marketplace-layout .kb-filter-header {
    font-size: var(--vd-font-size-lg);
    font-weight: 600;
    padding: var(--vd-card-padding-sm) var(--vd-card-padding);
    background-color: transparent;
    border-bottom: 1px solid var(--vd-border-light);
    color: var(--vd-text-primary);
}

#kb-marketplace-layout .kb-filter-block {
    padding: var(--vd-card-padding-sm) var(--vd-card-padding);
}


/* ==========================================================
   8. BUTTONS
   ========================================================== */

#kb-marketplace-layout .kbbtn {
    border-radius: var(--vd-card-radius-sm);
    padding: 8px 16px;
    font-size: var(--vd-font-size-base);
    font-weight: 500;
    transition: var(--vd-transition);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

#kb-marketplace-layout .kbbtn-big {
    padding: 10px 24px;
    font-size: var(--vd-font-size-lg);
    border-radius: var(--vd-card-radius-sm);
}

/* Primary buttons */
#kb-marketplace-layout .btn-primary,
#kb-marketplace-layout .kbbtn-success {
    background-color: var(--vd-secondary);
    border-color: var(--vd-secondary);
    color: #fff;
}

#kb-marketplace-layout .btn-primary:hover,
#kb-marketplace-layout .btn-primary:focus,
#kb-marketplace-layout .btn-primary:active,
#kb-marketplace-layout .kbbtn-success:hover {
    background-color: var(--vd-secondary-hover);
    border-color: var(--vd-secondary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(128, 180, 53, 0.3);
}

/* Success buttons */
#kb-marketplace-layout .btn-success {
    background-color: var(--vd-success);
    border-color: var(--vd-success);
    color: #fff;
    border-radius: var(--vd-card-radius-sm);
}

#kb-marketplace-layout .btn-success:hover,
#kb-marketplace-layout .btn-success:focus {
    background-color: #218838;
    border-color: #1e7e34;
    color: #fff;
    transform: translateY(-1px);
}

/* Danger buttons */
#kb-marketplace-layout .btn-danger {
    background-color: var(--vd-danger);
    border-color: var(--vd-danger);
    color: #fff;
    border-radius: var(--vd-card-radius-sm);
}

#kb-marketplace-layout .btn-danger:hover,
#kb-marketplace-layout .btn-danger:focus {
    background-color: #c82333;
    border-color: #bd2130;
    color: #fff;
    transform: translateY(-1px);
}

/* Warning buttons */
#kb-marketplace-layout .btn-warning {
    background-color: var(--vd-warning);
    border-color: var(--vd-warning);
    color: #212529;
    border-radius: var(--vd-card-radius-sm);
}

#kb-marketplace-layout .btn-warning:hover,
#kb-marketplace-layout .btn-warning:focus {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #212529;
}

/* Info buttons */
#kb-marketplace-layout .btn-info {
    background-color: var(--vd-info);
    border-color: var(--vd-info);
    color: #fff;
    border-radius: var(--vd-card-radius-sm);
}

#kb-marketplace-layout .btn-info:hover,
#kb-marketplace-layout .btn-info:focus {
    background-color: #138496;
    border-color: #117a8b;
    color: #fff;
}

/* Default/outline buttons */
#kb-marketplace-layout .btn-default,
#kb-marketplace-layout button.kbbtn-default {
    background-color: #fff;
    border: 1px solid var(--vd-border);
    color: var(--vd-text-primary);
    border-radius: var(--vd-card-radius-sm);
}

#kb-marketplace-layout .btn-default:hover,
#kb-marketplace-layout button.kbbtn-default:hover {
    background-color: var(--vd-bg-body);
    border-color: var(--vd-text-secondary);
    color: var(--vd-text-primary);
}

/* Button with Material icons */
#kb-marketplace-layout .btn .kb-material-icons,
#kb-marketplace-layout .kbbtn .kb-material-icons {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Status labels in tables */
#kb-marketplace-layout .label-success {
    background-color: var(--vd-success);
    border-radius: 4px;
    font-size: var(--vd-font-size-xs);
    padding: 4px 10px;
    font-weight: 500;
}

#kb-marketplace-layout .label-inactive {
    background-color: var(--vd-text-muted);
    border-radius: 4px;
    font-size: var(--vd-font-size-xs);
    padding: 4px 10px;
    font-weight: 500;
}


/* ==========================================================
   9. ALERTS & NOTIFICATIONS
   ========================================================== */

#kb-marketplace-layout .kbalert {
    border: none;
    border-radius: var(--vd-card-radius-sm);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: var(--vd-font-size-base);
    border-left: 4px solid;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#kb-marketplace-layout .kbalert i {
    font-size: 20px;
    margin-right: 0;
    flex-shrink: 0;
}

#kb-marketplace-layout .kbalert-info {
    background-color: var(--vd-info-light);
    border-left-color: var(--vd-info);
    color: #0c5460;
}

#kb-marketplace-layout .kbalert-success {
    background-color: var(--vd-success-light);
    border-left-color: var(--vd-success);
    color: #155724;
}

#kb-marketplace-layout .kbalert-warning {
    background-color: var(--vd-warning-light);
    border-left-color: var(--vd-warning);
    color: #856404;
}

#kb-marketplace-layout .kbalert-danger {
    background-color: var(--vd-danger-light);
    border-left-color: var(--vd-danger);
    color: #721c24;
}

#kb-marketplace-layout .kbalert ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

#kb-marketplace-layout .kbalert ul li::before {
    content: '\2022';
    margin-right: 6px;
    font-weight: bold;
}


/* ==========================================================
   10. MODALS
   ========================================================== */

#kb-marketplace-layout .kb-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--vd-z-modal-overlay);
}

#kb-marketplace-layout .kb-modal {
    z-index: var(--vd-z-modal);
    border: none;
    border-radius: var(--vd-card-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

#kb-marketplace-layout .kb-modal-header {
    background-color: var(--vd-primary);
    padding: 16px 20px;
}

#kb-marketplace-layout .kb-modal-header h1 {
    font-size: var(--vd-font-size-lg);
    font-weight: 600;
}

#kb-marketplace-layout .kb-modal-content {
    padding: var(--vd-card-padding);
    border: none;
    max-height: 500px;
}

#kb-marketplace-layout .kb-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--vd-border-light);
    background-color: var(--vd-bg-table-header);
}


/* ==========================================================
   11. PAGINATION
   ========================================================== */

#kb-marketplace-layout .kb-paginator-block {
    margin-top: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    height: auto;
}

#kb-marketplace-layout .kb-paginate-summary {
    color: var(--vd-text-secondary);
    font-size: var(--vd-font-size-sm);
    font-style: normal;
}

#kb-marketplace-layout .kb-pagination {
    display: flex;
    gap: 4px;
}

#kb-marketplace-layout .kb-pagination li {
    display: inline-flex;
    padding: 6px 12px;
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-card-radius-sm);
    font-size: var(--vd-font-size-base);
    background: #fff;
    color: var(--vd-text-primary);
    box-shadow: none;
    cursor: pointer;
    transition: var(--vd-transition);
}

#kb-marketplace-layout .kb-pagination li:hover {
    background-color: var(--vd-bg-body);
    border-color: var(--vd-text-secondary);
}

#kb-marketplace-layout .kb-pagination li.active {
    background-color: var(--vd-secondary);
    border-color: var(--vd-secondary);
    color: #fff;
}

#kb-marketplace-layout .kb-pagination li.first,
#kb-marketplace-layout .kb-pagination li.last {
    border-radius: var(--vd-card-radius-sm);
}

#kb-marketplace-layout .kb-pagination li a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================
   12. TABS (Product form, etc.)
   ========================================================== */

#kb-marketplace-layout .kb-tabs {
    border-bottom: 2px solid var(--vd-border);
    border-left: none;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

#kb-marketplace-layout .kb-tabs li {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--vd-text-secondary);
    font-weight: 500;
    font-size: var(--vd-font-size-base);
    padding: 10px 20px;
    height: auto;
    line-height: 1.5;
    cursor: pointer;
    transition: var(--vd-transition);
    overflow: visible;
}

#kb-marketplace-layout .kb-tabs li:hover {
    color: var(--vd-text-primary);
    border-bottom-color: var(--vd-text-secondary);
}

#kb-marketplace-layout .kb-tabs li.active {
    background: transparent;
    color: var(--vd-secondary);
    border-bottom: 2px solid var(--vd-secondary);
    font-weight: 600;
}

#kb-marketplace-layout .kb-tabs li.error-tab {
    color: var(--vd-danger);
    background: transparent;
    border-color: transparent;
}

#kb-marketplace-layout .kb-tabs li.active.error-tab {
    color: var(--vd-danger);
    border-bottom-color: var(--vd-danger);
}

#kb-marketplace-layout .kb_tab_container {
    border: none;
    border-top: none;
    background: var(--vd-bg-card);
    border-radius: 0 0 var(--vd-card-radius) var(--vd-card-radius);
    box-shadow: var(--vd-card-shadow);
}

#kb-marketplace-layout .kb_tab_content {
    padding: var(--vd-card-padding);
}


/* ==========================================================
   13. GRAPH / CHART AREA
   ========================================================== */

#kb-marketplace-layout .kb_graph_area {
    padding: 10px 0;
}

#kb-marketplace-layout .kb_graph_legend_container {
    padding: 10px 0;
    font-size: var(--vd-font-size-sm);
    color: var(--vd-text-secondary);
}

#kb-marketplace-layout .kb-sale-stat-tab select {
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-card-radius-sm);
    padding: 6px 10px;
    font-size: var(--vd-font-size-sm);
    background: #fff;
}

/* Loader */
#kb-marketplace-layout .loader128 {
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
}


/* ==========================================================
   14. ORDER VIEW / DETAIL PAGES
   ========================================================== */

#kb-marketplace-layout .ov-p-l {
    border: 1px solid var(--vd-border-light);
    border-radius: var(--vd-card-radius-sm);
    overflow: hidden;
    min-width: 0;
}

#kb-marketplace-layout .ov-p-l thead tr {
    background-color: var(--vd-bg-table-header);
    border-bottom: 2px solid var(--vd-border);
}

#kb-marketplace-layout .ov-p-l tfoot tr {
    background-color: var(--vd-bg-table-header);
    border-top: 2px solid var(--vd-border);
}

#kb-marketplace-layout .ov-p-l th,
#kb-marketplace-layout .ov-p-l td {
    padding: 12px 16px;
}

#kb-marketplace-layout .ov-p-l tbody tr td {
    border-bottom: 1px solid var(--vd-border-light);
}

/* Order summary boxes */
#kb-marketplace-layout .kb-cn-lb,
#kb-marketplace-layout .kb-cn-rb {
    border: 1px solid var(--vd-border-light);
    border-radius: var(--vd-card-radius-sm);
    overflow: hidden;
}

#kb-marketplace-layout .ov-s-head {
    background-color: var(--vd-bg-table-header);
    font-size: var(--vd-font-size-lg);
    padding: 14px 16px;
}

#kb-marketplace-layout .ov-s-lbl {
    font-size: var(--vd-font-size-base);
    color: var(--vd-text-secondary);
}

#kb-marketplace-layout .ov-s-value {
    font-size: var(--vd-font-size-base);
    font-style: normal;
}


/* ==========================================================
   15. MULTIACTION / BULK ACTIONS
   ========================================================== */

#kb-marketplace-layout .multiaction-group {
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#kb-marketplace-layout .multiaction-label {
    float: none;
    margin: 0;
    font-size: var(--vd-font-size-base);
    font-weight: 500;
    color: var(--vd-text-primary);
}

#kb-marketplace-layout .multiaction-field {
    float: none;
    margin: 0;
}

#kb-marketplace-layout .multiaction-field select {
    height: 36px;
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-card-radius-sm);
    padding: 4px 10px;
    font-size: var(--vd-font-size-base);
}

#kb-marketplace-layout .multiaction-group .kbbtn {
    float: none;
}


/* ==========================================================
   16. CATEGORY TREE
   ========================================================== */

#kb-marketplace-layout .tree .tree-selected {
    background-color: var(--vd-secondary);
    color: #fff;
    border-radius: 4px;
}

#kb-marketplace-layout .tree i.tree-dot {
    background-color: var(--vd-border);
}

#kb-marketplace-layout .tree .tree-selected i.tree-dot {
    background-color: #fff;
}


/* ==========================================================
   17. WELL / PANEL BOX
   ========================================================== */

#kb-marketplace-layout .well {
    background-color: var(--vd-bg-body);
    border: 1px solid var(--vd-border-light);
    border-radius: var(--vd-card-radius-sm);
    box-shadow: none;
}

#kb-marketplace-layout .kb-panel-box {
    border: 1px solid var(--vd-border-light);
    border-radius: var(--vd-card-radius-sm);
    padding: 16px 20px;
    margin-bottom: 20px;
}


/* ==========================================================
   18. PLUGIN-SPECIFIC OVERRIDES
   Apply consistent styling across all vendor-facing modules
   ========================================================== */

/* Catch-all for any KB seller module content within the layout */
#kb-marketplace-layout [class*="kb-seller"] .panel,
#kb-marketplace-layout [class*="kbseller"] .panel {
    background: var(--vd-bg-card);
    border: none;
    border-radius: var(--vd-card-radius);
    box-shadow: var(--vd-card-shadow);
}

#kb-marketplace-layout [class*="kb-seller"] .table,
#kb-marketplace-layout [class*="kbseller"] .table {
    border-collapse: separate;
    border-spacing: 0;
}

#kb-marketplace-layout [class*="kb-seller"] .form-control,
#kb-marketplace-layout [class*="kbseller"] .form-control {
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-card-radius-sm);
    padding: 8px 12px;
    font-size: var(--vd-font-size-base);
    transition: var(--vd-transition);
}

#kb-marketplace-layout [class*="kb-seller"] .form-control:focus,
#kb-marketplace-layout [class*="kbseller"] .form-control:focus {
    border-color: var(--vd-secondary);
    box-shadow: 0 0 0 3px var(--vd-secondary-light);
}

/* Ticket system styling */
#kb-marketplace-layout .ticket-list .panel,
#kb-marketplace-layout .ticket-view .panel {
    border: none;
    border-radius: var(--vd-card-radius);
    box-shadow: var(--vd-card-shadow);
}


/* ==========================================================
   19. MISCELLANEOUS
   ========================================================== */

/* GDPR links */
#kb-marketplace-layout .kb_gdpr_fc_rules li a {
    color: var(--vd-text-link);
}

#kb-marketplace-layout .kb_gdpr_fc_rules li a:before {
    color: var(--vd-text-secondary);
}

/* Payment info */
#kb-marketplace-layout #paymentinfo-note {
    color: var(--vd-text-primary);
}

#kb-marketplace-layout #paymentinfo-notice {
    color: var(--vd-danger);
}

/* Ratings */
#kb-marketplace-layout .vss_rating_filled {
    color: var(--vd-stat-yellow);
}

/* List action links */
#kb-marketplace-layout .kb-table-list .kb_list_action {
    text-decoration: none;
    color: var(--vd-text-link);
    cursor: pointer;
}

#kb-marketplace-layout .kb-table-list .kb_list_action:hover {
    text-decoration: underline;
}

/* List loader */
#kb-marketplace-layout #kb-list-loader {
    z-index: 10;
}

/* Product form specific */
#kb-marketplace-layout #kb-product-form .kb-panel {
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 0;
}

#kb-marketplace-layout #kb-product-form .kb-panel .kb-panel-header {
    background-color: var(--vd-bg-table-header);
    border: 1px solid var(--vd-border-light);
    border-radius: var(--vd-card-radius-sm);
    margin-bottom: 2px;
    cursor: pointer;
}

#kb-marketplace-layout #kb-product-form .kb-panel .kb-panel-body {
    border: 1px solid var(--vd-border-light);
    border-top: none;
    padding: var(--vd-card-padding);
}

/* Datetimepicker */
#kb-marketplace-layout .datetimepicker {
    border-radius: var(--vd-card-radius-sm);
    box-shadow: var(--vd-card-shadow);
}


/* ==========================================================
   19b. FILTER TOOLBAR (helper/filter.tpl — CSS-only restyle)
   ========================================================== */

#kb-marketplace-layout .kb-filter-block ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#kb-marketplace-layout .kb-filter-block ul li {
    float: none;
    width: auto;
    flex: 1 1 200px;
    min-width: 170px;
    max-width: 300px;
    margin: 0;
    padding: 0;
}

#kb-marketplace-layout .kb-filter-block .kblabel {
    font-size: var(--vd-font-size-sm);
    font-weight: 600;
    color: var(--vd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

#kb-marketplace-layout .kb-filter-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px dashed var(--vd-border-light);
}

/* Reset button as a quiet ghost button instead of loud yellow */
#kb-marketplace-layout .kb-filter-action-btn .btn-warning {
    background-color: #fff;
    border: 1px solid var(--vd-border);
    color: var(--vd-text-secondary);
}

#kb-marketplace-layout .kb-filter-action-btn .btn-warning:hover {
    background-color: var(--vd-bg-body);
    border-color: var(--vd-text-secondary);
    color: var(--vd-text-primary);
}


/* ==========================================================
   19c. TABLE ROW ACTIONS, SMALL BUTTONS, CHECKBOXES, SELECTS
   ========================================================== */

/* Row action links (Edit / Delete / icons) as ghost chip buttons */
#kb-marketplace-layout .kb-table-list .kb_list_action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin: 2px 2px;
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-card-radius-sm);
    background-color: #fff;
    color: var(--vd-text-secondary);
    font-size: var(--vd-font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: var(--vd-transition);
}

#kb-marketplace-layout .kb-table-list .kb_list_action:hover {
    border-color: var(--vd-secondary);
    color: var(--vd-secondary-hover);
    text-decoration: none;
    background-color: var(--vd-secondary-light);
}

#kb-marketplace-layout .kb-table-list .kb_list_action .kb-material-icons {
    font-size: 16px;
}

/* Small buttons (product form Save / Save and Stay) */
#kb-marketplace-layout .btn-sm {
    display: inline-block;
    padding: 9px 22px;
    border-radius: var(--vd-card-radius-sm);
    font-size: var(--vd-font-size-base);
    font-weight: 600;
    text-decoration: none;
    transition: var(--vd-transition);
}

#kb-marketplace-layout a.btn-sm.btn-success {
    background-color: var(--vd-secondary);
    border: 1px solid var(--vd-secondary);
    color: #fff;
}

#kb-marketplace-layout a.btn-sm.btn-success:hover {
    background-color: var(--vd-secondary-hover);
    border-color: var(--vd-secondary-hover);
    box-shadow: 0 4px 12px rgba(128, 180, 53, 0.3);
}

#kb-marketplace-layout a.btn-sm.btn-info {
    background-color: #fff;
    border: 1px solid var(--vd-secondary);
    color: var(--vd-secondary-hover);
}

#kb-marketplace-layout a.btn-sm.btn-info:hover {
    background-color: var(--vd-secondary-light);
}

/* Checkboxes & radios — brand accent without DOM changes */
#kb-marketplace-layout input[type="checkbox"],
#kb-marketplace-layout input[type="radio"] {
    accent-color: var(--vd-secondary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Native selects with a custom chevron */
#kb-marketplace-layout select.kb-inpselect,
#kb-marketplace-layout .multiaction-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Pill-style status labels (existing classes) */
#kb-marketplace-layout .label-success {
    background-color: var(--vd-pill-success-bg);
    color: var(--vd-pill-success-fg);
    border-radius: 999px;
    font-size: var(--vd-font-size-xs);
    padding: 4px 12px;
    font-weight: 600;
}

#kb-marketplace-layout .label-inactive {
    background-color: var(--vd-pill-neutral-bg);
    color: var(--vd-pill-neutral-fg);
    border-radius: 999px;
    font-size: var(--vd-font-size-xs);
    padding: 4px 12px;
    font-weight: 600;
}

/* Status icons (check / remove toggles in lists) */
#kb-marketplace-layout .kb-table-list .icon-check {
    color: var(--vd-pill-success-fg);
}

#kb-marketplace-layout .kb-table-list .icon-remove {
    color: var(--vd-pill-danger-fg);
}


/* ==========================================================
   20. RESPONSIVE
   ========================================================== */

@media (max-width: 992px) {
    #kb-marketplace-layout {
        flex-direction: column;
    }

    #kblayout-leftcol {
        min-height: auto;
        padding: 16px 16px 0 16px !important;
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100%;
    }

    #kblayout-centercol {
        border-radius: 0;
    }

    /* Show the mobile menu accordion */
    #kb-marketplace-layout .kb-account-accordian {
        display: block;
    }

    #kb-marketplace-layout .kb-menu-list-item {
        padding: 10px 16px;
    }

    #kb-marketplace-layout .summary-list-group {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }

    #kb-marketplace-layout .summary-single-box .mo_kpi_content .big-value {
        font-size: 22px;
    }

    #kb-marketplace-layout .tbl-list-group {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #kblayout-centercol {
        padding: 15px !important;
    }

    #kb-marketplace-layout .kb-content-header h1 {
        font-size: var(--vd-font-size-xl);
    }

    #kb-marketplace-layout .summary-list-group {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    #kb-marketplace-layout .summary-single-box {
        padding: 12px 14px;
    }

    #kb-marketplace-layout .summary-single-box .mo_kpi_content {
        padding-left: 0;
        text-align: center;
    }

    #kb-marketplace-layout .summary-single-box .mo_kpi_content i.big {
        position: static;
        transform: none;
        margin: 0 auto 8px;
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
    }

    #kb-marketplace-layout .summary-single-box .mo_kpi_content .big-title {
        font-size: 11px;
    }

    #kb-marketplace-layout .summary-single-box .mo_kpi_content .big-value {
        font-size: 20px;
    }

    /* Tables scroll horizontally */
    #kb-marketplace-layout .kb-panel .kb-panel-body {
        overflow-x: auto;
    }

    /* Pagination */
    #kb-marketplace-layout .kb-paginator-block {
        flex-direction: column;
        gap: 10px;
    }

    /* Modals */
    #kb-marketplace-layout .kb-modal {
        left: 5%;
        width: 90%;
    }

    /* Filter items stack full-width */
    #kb-marketplace-layout .kb-filter-block ul li {
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    #kblayout-centercol {
        padding: 10px !important;
    }

    #kb-marketplace-layout .summary-list-group {
        grid-template-columns: 1fr;
    }

    #kb-marketplace-layout .kb-content-header {
        flex-direction: column;
        gap: 10px;
    }

    #kb-marketplace-layout .kb-tabs {
        flex-direction: column;
        border-bottom: none;
    }

    #kb-marketplace-layout .kb-tabs li {
        width: 100%;
        border: 1px solid var(--vd-border);
        border-bottom: none;
        margin-bottom: 0;
        border-radius: 0;
    }

    #kb-marketplace-layout .kb-tabs li:first-child {
        border-radius: var(--vd-card-radius-sm) var(--vd-card-radius-sm) 0 0;
    }

    #kb-marketplace-layout .kb-tabs li:last-child {
        border-bottom: 1px solid var(--vd-border);
        border-radius: 0 0 var(--vd-card-radius-sm) var(--vd-card-radius-sm);
    }

    #kb-marketplace-layout .kb-tabs li.active {
        background-color: var(--vd-secondary);
        color: #fff;
        border-color: var(--vd-secondary);
    }

    #kb-marketplace-layout .kb-modal {
        left: 0;
        width: 100%;
    }
}


/* ==========================================================
   99. CONTENT-CARD WRAPPER  (added 2026-07-06)
   ----------------------------------------------------------
   Many seller plugin pages render a bare form / table / heading
   straight onto the grey content column (e.g. Payout Request,
   Seller Profile, Category Request, Earning, Transactions, Order
   Tracking, Delivery Time, Q&A…). They inherit the global type /
   input / table styling but had NO card container, so they looked
   unfinished next to the carded Dashboard / Wallet.

   Fix: give the single content column (.centerlftoffest) a white
   card by DEFAULT, and opt OUT (transparent gutter layout) only
   when the page already renders its own cards / KPI tiles / panels
   — detected with :has() so it self-adapts to every module without
   an per-page allow-list. Firefox 121+ / Chromium 105+ support
   :has(); on older engines the wrapper just stays transparent
   (the previous behaviour), so nothing breaks.
   ========================================================== */

#kb-marketplace-layout .kb-block.kb-panel.centerlftoffest {
    background-color: var(--vd-bg-card);
    border-radius: var(--vd-card-radius);
    box-shadow: var(--vd-card-shadow);
    padding: 26px 30px;
    margin-bottom: 20px;
}

/* Opt-out: pages that already build their own cards / KPI tiles /
   panels keep the multi-card-on-grey layout (no double nesting). */
#kb-marketplace-layout .kb-block.kb-panel.centerlftoffest:has(.summary-box),
#kb-marketplace-layout .kb-block.kb-panel.centerlftoffest:has(.card),
#kb-marketplace-layout .kb-block.kb-panel.centerlftoffest:has(.kb-panel-box),
#kb-marketplace-layout .kb-block.kb-panel.centerlftoffest:has(.kb-panel-header),
#kb-marketplace-layout .kb-block.kb-panel.centerlftoffest:has([class*="kbsw-"]),
#kb-marketplace-layout .kb-block.kb-panel.centerlftoffest:has([class*="kbsp-"]),
#kb-marketplace-layout .kb-block.kb-panel.centerlftoffest:has([class*="-summary-cards"]) {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

/* First child margin tidy-up so the leading heading doesn't add
   doubled spacing at the top of the content card. Harmless on the
   transparent (opt-out) pages too. */
#kb-marketplace-layout .kb-block.kb-panel.centerlftoffest > *:first-child {
    margin-top: 0;
}