/*
 * client/css/vendor-desktop.css
 * Lizimas Store - premium desktop skin for the vendor dashboard.
 *
 * Scoped entirely under .vendor-desktop-shell (added to the existing
 * .admin-shell wrapper in client/vendor/dashboard) so it can safely
 * override the shared admin.css classes (.admin-sidebar, .tab-btn, .panel,
 * etc.) without touching how those same classes render on the staff and
 * admin panels, which reuse admin.css but never carry this wrapper class.
 * Same navy/gold palette as vendor-mobile.css, so the desktop and mobile
 * vendor experiences read as one brand.
 */

.vendor-desktop-shell {
    --vd-navy: #1a1a2e;
    --vd-gold: #f4b400;
    --vd-bg: #f4f5f7;
    --vd-border: #e2e4ea;
    --vd-muted: #9aa1ae;
    --vd-subtext: #6b7280;
    --vd-amber-bg: #fff3d6;
    --vd-amber-text: #9a6b00;
    --vd-green-bg: #e6f4ea;
    --vd-green-text: #1e7e34;
    --vd-red: #DC2626;
    --vd-info-bg: #eef1fa;
    --vd-info-text: #3a4568;

    background: var(--vd-bg) !important;
}

/* --- Sidebar --------------------------------------------------------- */

.vendor-desktop-shell .admin-sidebar {
    background: var(--vd-navy) !important;
    border-right: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

.vendor-desktop-shell .sidebar-brand {
    padding: 20px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-weight: 700;
}

.vendor-desktop-shell .sidebar-brand-icon {
    background: var(--vd-gold) !important;
    color: var(--vd-navy) !important;
    /* "LV" (Lizimas Vendor) - two letters, so a touch smaller than admin's "L" */
    font-size: 13px !important;
    letter-spacing: .02em;
}

.vendor-desktop-shell .sidebar-nav {
    padding: 14px 10px 20px;
    overflow-y: auto;
    flex: 1;
}

.vendor-desktop-shell .vd-group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    padding: 16px 12px 6px;
}

.vendor-desktop-shell .vd-group-label:first-child {
    padding-top: 4px;
}

.vendor-desktop-shell .tab-btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent !important;
    color: rgba(255,255,255,0.72) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 2px;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.vendor-desktop-shell .tab-btn:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}

.vendor-desktop-shell .tab-btn.active {
    background: var(--vd-gold) !important;
    color: var(--vd-navy) !important;
    font-weight: 700;
}

.vendor-desktop-shell .tab-btn .sidebar-icon {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.vendor-desktop-shell .vd-sub-item {
    padding-left: 30px !important;
    font-size: 13px;
}

/* --- Top bar ----------------------------------------------------------- */

.vendor-desktop-shell .vd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-bottom: 1px solid var(--vd-border);
    padding: 14px 28px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.vendor-desktop-shell .vd-search {
    flex: 1;
    max-width: 420px;
    position: relative;
}

.vendor-desktop-shell .vd-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--vd-border);
    border-radius: 10px;
    font-size: 13.5px;
    background: var(--vd-bg);
    color: var(--vd-navy);
}

.vendor-desktop-shell .vd-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vd-muted);
    pointer-events: none;
}

.vendor-desktop-shell .vd-topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.vendor-desktop-shell .vd-bell-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--vd-navy);
    padding: 6px;
    display: flex;
}

.vendor-desktop-shell .vd-bell-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--vd-red);
    color: #fff;
    border-radius: 10px;
    font-size: 10px;
    padding: 1px 5px;
    font-weight: 700;
}

.vendor-desktop-shell .vd-avatar-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--vd-bg);
    border: 1px solid var(--vd-border);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
}

.vendor-desktop-shell .vd-avatar-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--vd-navy);
    color: var(--vd-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.vendor-desktop-shell .vd-avatar-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vd-navy);
    line-height: 1.3;
}

.vendor-desktop-shell .vd-avatar-role {
    font-size: 10.5px;
    color: var(--vd-muted);
    line-height: 1.3;
}

.vendor-desktop-shell .admin-main {
    padding: 24px 28px !important;
}

/* --- Dashboard home ------------------------------------------------------ */

.vendor-desktop-shell .vd-welcome-banner {
    background: linear-gradient(135deg, var(--vd-navy), #232345);
    border-radius: 16px;
    padding: 26px 28px;
    color: #fff;
    margin-bottom: 20px;
}

.vendor-desktop-shell .vd-welcome-banner h2 {
    margin: 0 0 4px;
    font-size: 21px;
}

.vendor-desktop-shell .vd-welcome-banner p {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 13.5px;
}

.vendor-desktop-shell .vd-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.vendor-desktop-shell .vd-stat-card {
    background: #fff;
    border: 1px solid var(--vd-border);
    border-radius: 14px;
    padding: 18px;
}

.vendor-desktop-shell .vd-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.vendor-desktop-shell .vd-stat-label {
    font-size: 12.5px;
    color: var(--vd-subtext);
    margin-bottom: 4px;
}

.vendor-desktop-shell .vd-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--vd-navy);
}

.vendor-desktop-shell .vd-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 980px) {
    .vendor-desktop-shell .vd-content-grid { grid-template-columns: 1fr; }
}

.vendor-desktop-shell .vd-card {
    background: #fff;
    border: 1px solid var(--vd-border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
}

/* Chart.js with maintainAspectRatio:false needs a positioned, height-bounded
   parent - without one the canvas has no determinate height to fill (its own
   container only shrink-wraps around it) and can render as a huge, empty
   chart with the axis stuck at "1.0" (Ryan caught this live on both the
   Overview and Reports tabs, Sept 2026). Used by both vd-sales-overview-chart
   and vendor-reports-chart. */
.vendor-desktop-shell .vd-chart-container {
    position: relative;
    height: 260px;
}

.vendor-desktop-shell .vd-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.vendor-desktop-shell .vd-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--vd-navy);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vendor-desktop-shell .vd-card-title a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vd-gold);
    text-decoration: none;
}

.vendor-desktop-shell .vd-quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--vd-bg);
    border: 1px solid var(--vd-border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vd-navy);
    cursor: pointer;
}

.vendor-desktop-shell .vd-quick-action:hover {
    background: #eef0f4;
}

.vendor-desktop-shell .vd-notif-row {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f1f4;
    font-size: 12.5px;
}

.vendor-desktop-shell .vd-notif-row:last-child {
    border-bottom: none;
}

.vendor-desktop-shell .vd-help-card {
    background: var(--vd-bg);
    border: 1px dashed var(--vd-border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.vendor-desktop-shell .vd-help-card a {
    display: inline-block;
    margin-top: 10px;
    background: var(--vd-navy);
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

/* --- Sidebar: expandable groups + bottom vendor profile card ----------- */

.vendor-desktop-shell .vd-nav-parent {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent !important;
    color: rgba(255,255,255,0.72) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 2px;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.vendor-desktop-shell .vd-nav-parent:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}

.vendor-desktop-shell .vd-nav-parent .sidebar-icon {
    font-size: 15px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.vendor-desktop-shell .vd-nav-label {
    flex: 1;
}

.vendor-desktop-shell .vd-nav-chevron {
    font-size: 17px;
    line-height: 1;
    color: rgba(255,255,255,0.4);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.vendor-desktop-shell .vd-nav-group.vd-nav-open .vd-nav-chevron {
    transform: rotate(90deg);
}

.vendor-desktop-shell .vd-nav-badge {
    background: #DC2626;
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    flex-shrink: 0;
}

.vendor-desktop-shell .vd-nav-children {
    display: none;
    flex-direction: column;
}

.vendor-desktop-shell .vd-nav-group.vd-nav-open .vd-nav-children {
    display: flex;
}

.vendor-desktop-shell .vd-sidebar-profile {
    margin: 10px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.vendor-desktop-shell .vd-sidebar-profile-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.vendor-desktop-shell .vd-sidebar-profile-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--vd-gold);
    color: var(--vd-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.vendor-desktop-shell .vd-sidebar-profile-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.vendor-desktop-shell .vd-sidebar-profile-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-top: 3px;
}

.vendor-desktop-shell .vd-sidebar-profile-link {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--vd-gold);
    text-decoration: none;
}

/* --- Dashboard home: rating stars, primary CTA, quick-action rows ------- */

.vendor-desktop-shell .vd-stat-stars {
    font-size: 12px;
    color: var(--vd-gold);
    margin-top: 3px;
    letter-spacing: 1px;
}

.vendor-desktop-shell .vd-primary-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--vd-navy);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 18px;
    text-align: center;
}

.vendor-desktop-shell .vd-primary-cta:hover {
    background: #232345;
}

.vendor-desktop-shell .vd-quick-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f1f4;
    padding: 11px 0;
    cursor: pointer;
}

.vendor-desktop-shell .vd-quick-row:last-child {
    border-bottom: none;
}

.vendor-desktop-shell .vd-quick-row:hover {
    background: #fafafa;
}

.vendor-desktop-shell .vd-quick-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.vendor-desktop-shell .vd-quick-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.vendor-desktop-shell .vd-quick-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--vd-navy);
}

.vendor-desktop-shell .vd-quick-sub {
    font-size: 11.5px;
    color: var(--vd-subtext);
}

.vendor-desktop-shell .vd-quick-chevron {
    font-size: 18px;
    color: var(--vd-muted);
    flex-shrink: 0;
}

.vendor-desktop-shell #vd-sidebar-profile-menu.vd-nav-open {
    display: flex;
}

/* Bulk-action overlays: display is driven purely by the `hidden` attribute
   (no inline display:flex, which would otherwise beat the UA [hidden] rule
   and leave the modal visible even while hidden) - centering only kicks in
   once JS clears `hidden`. */
.vendor-desktop-shell #vd-bulk-confirm-overlay:not([hidden]),
.vendor-desktop-shell #vd-bulk-results-overlay:not([hidden]) {
    display: flex;
}

.vendor-desktop-shell #vd-consignment-create-overlay:not([hidden]) {
    display: flex;
}

.vendor-desktop-shell #vd-ad-campaign-create-overlay:not([hidden]) {
    display: flex;
}

.vendor-desktop-shell #vendor-products-bulk-bar:not([hidden]) {
    display: flex;
}

/* Sales channel update-secret sub-form: same hidden/display:flex conflict class -
   display is driven purely by the `hidden` attribute. */
.vendor-desktop-shell #vd-channel-update-secret-view:not([hidden]) {
    display: flex;
}

.vendor-desktop-shell #vd-sidebar-profile-chevron.vd-nav-open {
    transform: rotate(90deg);
}

/* ===== Product Management (vendor-products.js), Lizimas colours ===== */
:root { --vp-gold: #f4b400; --vp-gold-ink: #946c00; --vp-gold-soft: #fdf3d6; --vp-navy: #1a1a2e; --vp-line: #e6e7eb; --vp-muted: #6b7280; }
.vp-crumb { color: var(--vp-gold-ink); font-weight: 600; font-size: 14px; margin: 4px 0 10px; }
.vp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.vp-title { margin: 0; font-size: 24px; font-weight: 700; color: #222; }
.vp-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-head-sep { width: 1px; height: 30px; background: var(--vp-line); }
.vp-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 6px; font: 600 14px/1 sans-serif; font-family: inherit; cursor: pointer; border: 1px solid transparent; background: #fff; color: #222; }
.vp-btn-outline { border-color: #d6d8dd; }
.vp-btn-outline:hover { border-color: var(--vp-navy); }
.vp-btn-outline-gold { border-color: var(--vp-gold); color: var(--vp-gold-ink); }
.vp-btn-outline-gold:hover { background: var(--vp-gold-soft); }
.vp-btn-gold { background: var(--vp-gold); color: var(--vp-navy); box-shadow: 0 2px 6px rgba(244,180,0,.35); }
.vp-btn-gold:hover { filter: brightness(.96); }
.vp-btn:focus-visible, .vp-pill:focus-visible, .vp-bulk-btn:focus-visible, .vp-name:focus-visible, .vp-link:focus-visible, .vp-kebab:focus-visible { outline: 2px solid var(--vp-navy); outline-offset: 2px; }
.vp-tier { font-size: 12.5px; color: var(--vp-muted); margin: -4px 0 10px; }
.vp-dd { position: relative; }
.vp-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px; background: #fff; border: 1px solid var(--vp-line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 6px; }
.vp-menu[hidden] { display: none; }
.vp-menu-right { left: auto; right: 0; }
.vp-menu-up { top: auto; bottom: calc(100% + 8px); }
.vp-menu button, .vp-row-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 6px; font: 500 13.5px/1.3 sans-serif; font-family: inherit; color: #222; cursor: pointer; }
.vp-menu button:hover, .vp-row-menu button:hover { background: #f4f5f7; }
.vp-danger { color: #c62828 !important; }
.vp-row-menu { position: fixed; z-index: 400; width: 160px; background: #fff; border: 1px solid var(--vp-line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 6px; }

.vp-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vp-status-label { font-size: 12px; font-weight: 600; color: var(--vp-muted); text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
.vp-pill-group { display: inline-flex; gap: 8px; background: var(--vp-gold-soft); border-radius: 22px; padding: 5px 8px; flex-wrap: wrap; }
.vp-pill { border: 1px solid #cfd2d8; background: #fff; color: #333; border-radius: 999px; padding: 5px 14px; font: 500 13px/1.3 sans-serif; font-family: inherit; cursor: pointer; white-space: nowrap; }
.vp-pill:hover { border-color: var(--vp-gold); }
.vp-pill-active { border-color: var(--vp-gold); color: var(--vp-gold-ink); background: #fffaf0; font-weight: 700; }
.vp-pill-n { font-size: 11.5px; color: var(--vp-muted); font-weight: 500; }

.vp-search-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.vp-search, .vp-country { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid #d6d8dd; border-radius: 6px; height: 50px; flex: 1 1 320px; max-width: 480px; }
.vp-search input { flex: 1; border: 0; outline: none; font: 14px sans-serif; font-family: inherit; padding: 0 16px; background: transparent; height: 100%; }
.vp-search svg { color: var(--vp-gold-ink); margin-right: 14px; flex-shrink: 0; }
.vp-search:focus-within, .vp-country:focus-within { border-color: var(--vp-navy); }
.vp-country-label { position: absolute; top: -8px; left: 16px; background: #fff; padding: 0 4px; font-size: 11px; font-style: italic; color: #555; }
.vp-country select { appearance: none; -webkit-appearance: none; border: 0; outline: none; background: transparent; width: 100%; height: 100%; padding: 8px 40px 0 18px; font: 14.5px sans-serif; font-family: inherit; color: #222; cursor: pointer; }
.vp-country svg { position: absolute; right: 16px; color: var(--vp-gold-ink); pointer-events: none; }

.vp-card { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 1px solid #eceef1; }
.vp-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: #fafafa; border-bottom: 1px solid #eceef1; border-radius: 6px 6px 0 0; flex-wrap: wrap; }
#vendor-products-selected-count { font-size: 14px; color: #555; }
.vp-bulk-actions { display: flex; align-items: center; gap: 6px; }
.vp-bulk-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; font: 500 14px sans-serif; font-family: inherit; color: #222; cursor: pointer; padding: 6px 10px; border-radius: 6px; }
.vp-bulk-btn:hover:not(:disabled) { background: #f0f1f3; }
.vp-bulk-btn:disabled { color: #9ca0a8; cursor: default; }
.vp-bulk-more:disabled { color: #444; opacity: .75; }
.vp-bulk-sep { width: 1px; height: 26px; background: var(--vp-line); }

.vp-table-scroll { overflow-x: auto; }
.vp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 980px; }
.vp-table th { text-align: left; font-weight: 500; color: #333; font-size: 14px; padding: 18px 12px; border-bottom: 1px solid #e3e5e8; white-space: nowrap; background: #fff; }
.vp-table td { padding: 14px 12px; border-bottom: 1px solid #f0f1f3; vertical-align: middle; color: #222; }
.vp-table tbody tr:hover td { background: #fcfcfd; }
.vp-table .vp-num { text-align: right; white-space: nowrap; }
.vp-col-check { width: 44px; padding-left: 20px !important; }
.vp-col-check input { width: 18px; height: 18px; accent-color: var(--vp-gold); cursor: pointer; }
.vp-col-name { min-width: 240px; max-width: 380px; }
.vp-col-actions { white-space: nowrap; text-align: right; }
.vp-help { display: inline-flex; vertical-align: -2px; color: var(--vp-muted); cursor: help; }
.vp-name { background: none; border: 0; padding: 0; text-align: left; font: 600 13.5px/1.4 sans-serif; font-family: inherit; color: var(--vp-navy); cursor: pointer; }
.vp-name:hover { text-decoration: underline; }
.vp-name-deleted { color: #9ca0a8; text-decoration: line-through; font-weight: 500; }
.vp-row-deleted td { color: #9ca0a8; }
.vp-sub { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.vp-qc { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 4px; padding: 2px 7px; }
.vp-qc-ok { background: #e7f6ec; color: #1b7a3d; }
.vp-qc-wait { background: #eef2ff; color: #3949ab; }
.vp-qc-warn { background: #fff4d6; color: #8a6100; }
.vp-qc-bad { background: #fdecec; color: #b3261e; }
.vp-live, .vp-notlive { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.vp-live { color: #1b7a3d; }
.vp-notlive { color: #6b7280; }
.vp-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vp-reason { font-size: 11.5px; color: var(--vp-muted); margin-top: 3px; max-width: 200px; line-height: 1.35; }
.vp-muted { color: #9ca0a8; font-size: 12.5px; }
.vp-switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; vertical-align: middle; }
.vp-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.vp-switch span { position: absolute; inset: 0; background: #cfd2d8; border-radius: 22px; transition: background .15s; }
.vp-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.vp-switch input:checked + span { background: var(--vp-gold); }
.vp-switch input:checked + span::after { transform: translateX(18px); }
.vp-switch input:disabled { cursor: not-allowed; }
.vp-switch input:disabled + span { opacity: .45; }
.vp-switch input:focus-visible + span { outline: 2px solid var(--vp-navy); outline-offset: 2px; }
.vp-link { background: none; border: 0; color: var(--vp-navy); font: 600 13px sans-serif; font-family: inherit; cursor: pointer; padding: 6px 8px; text-decoration: underline; }
.vp-kebab { background: none; border: 0; color: #444; cursor: pointer; padding: 6px; border-radius: 6px; display: inline-flex; vertical-align: middle; }
.vp-kebab:hover { background: #f0f1f3; }
.vp-empty { text-align: center; color: #9ca0a8; padding: 56px 12px !important; font-size: 14px; }
.vp-pager { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 12px 20px; flex-wrap: wrap; font-size: 13.5px; color: #444; }
.vp-pager:empty { display: none; }
.vp-pager-nav { display: flex; align-items: center; gap: 6px; }
.vp-range { margin-right: 10px; }
.vp-pg-btn { background: none; border: 0; color: #444; cursor: pointer; padding: 6px; border-radius: 6px; display: inline-flex; }
.vp-pg-btn:hover:not(:disabled) { background: #f0f1f3; }
.vp-pg-btn:disabled { color: #c3c6cc; cursor: default; }
.vp-per select { border: 0; border-bottom: 1px solid #999; background: transparent; font: 14px sans-serif; font-family: inherit; padding: 2px 4px; margin-left: 6px; cursor: pointer; }

/* Manage Columns > Table Filters drawer */
.vp-drawer-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6); display: flex; justify-content: flex-end; }
.vp-drawer { width: 584px; max-width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.2); animation: vpSlideIn .2s ease-out; }
@keyframes vpSlideIn { from { transform: translateX(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.vp-drawer-head { display: flex; align-items: center; gap: 18px; padding: 44px 60px 0 84px; }
.vp-drawer-back { background: none; border: 0; color: var(--vp-gold-ink); cursor: pointer; padding: 4px; margin-left: -34px; display: inline-flex; border-radius: 6px; }
.vp-drawer-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--vp-gold-ink); }
.vp-drawer-body { flex: 1; overflow-y: auto; padding: 36px 60px 20px 84px; }
.vp-drawer-sub { font-size: 14px; font-weight: 600; color: #6b7280; }
.vp-drawer-hint { font-size: 10.5px; font-style: italic; color: #8a8f98; margin: 6px 0 16px; }
.vp-drawer-list { border: 1px solid #eceef1; border-radius: 2px; }
.vp-drawer-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #eceef1; font-size: 14.5px; color: #8a8f98; cursor: pointer; position: relative; }
.vp-drawer-item:last-child { border-bottom: 0; }
.vp-drawer-item-on { color: #222; }
.vp-drawer-item input { position: absolute; opacity: 0; width: 20px; height: 20px; left: 16px; margin: 0; cursor: pointer; }
.vp-drawer-box { width: 18px; height: 18px; border: 1.5px solid #b8bcc4; border-radius: 4px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.vp-drawer-item input:checked + .vp-drawer-box { background: var(--vp-gold); border-color: var(--vp-gold); }
.vp-drawer-item input:checked + .vp-drawer-box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--vp-navy); border-bottom: 2px solid var(--vp-navy); transform: rotate(-45deg) translate(1px, -1px); }
.vp-drawer-item input:focus-visible + .vp-drawer-box { outline: 2px solid var(--vp-navy); outline-offset: 2px; }
.vp-drawer-status { font-size: 12.5px; color: #1b7a3d; margin-top: 12px; min-height: 16px; }
.vp-drawer-foot { padding: 20px 58px 40px; }
.vp-drawer-btns { display: flex; gap: 12px; }
.vp-drawer-default, .vp-drawer-apply { flex: 1; justify-content: center; height: 58px; font-size: 15px; }
.vp-drawer-default { color: #8a8f98; font-weight: 500; }
.vp-drawer-reset { display: block; margin: 26px auto 0; background: none; border: 0; color: var(--vp-gold-ink); font: 600 14.5px sans-serif; font-family: inherit; cursor: pointer; }
.vp-drawer-reset:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .vp-drawer-head { padding: 24px 20px 0 52px; }
    .vp-drawer-body { padding: 24px 20px 12px; }
    .vp-drawer-foot { padding: 16px 20px 28px; }
}
/* fit the Product Management table in the content column */
.vp-table { min-width: 0; table-layout: auto; }
.vp-table th { text-transform: none; letter-spacing: 0; font-size: 13.5px; padding: 16px 10px; }
.vp-table td { padding: 12px 10px; }
.vp-col-name { min-width: 200px; max-width: 320px; }
.vp-table td.vp-col-visible { min-width: 150px; }
.vp-reason { max-width: 190px; }
.vp-cur { font-size: 11.5px; color: #8a8f98; font-weight: 400; }
.vp-col-name { min-width: 180px; }
.vp-table td.vp-col-visible { min-width: 130px; }
.vp-reason { max-width: 160px; }
.vp-cur { display: block; }
.vp-table td.vp-col-visible { min-width: 0; }
.vp-table td:nth-child(3) { word-break: break-all; min-width: 90px; }
.vp-notlive:focus-visible { outline: 2px solid var(--vp-navy); outline-offset: 2px; border-radius: 4px; }

/* ===== Consignment Orders (vendor-consignments.js) ===== */
.vco-crumb-muted { color: #8a8f98; font-weight: 500; }
.vco-crumb-sep { color: #8a8f98; margin: 0 6px; }
.vco-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.vco-filters-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vco-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vco-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vco-pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #cfd2d8; background: #fff; color: #333; border-radius: 999px; padding: 5px 12px; font: 500 13px sans-serif; font-family: inherit; cursor: pointer; white-space: nowrap; }
.vco-pill:hover { border-color: var(--vp-gold); }
.vco-pill-on { border-color: var(--vp-gold); color: var(--vp-gold-ink); background: #fffaf0; font-weight: 600; }
.vco-pill:focus-visible, .vco-chip-btn:focus-visible, .vco-co:focus-visible, .vco-go:focus-visible { outline: 2px solid var(--vp-navy); outline-offset: 2px; }
.vco-chip { display: inline-flex; align-items: center; border: 1px solid var(--vp-gold); color: var(--vp-gold-ink); background: #fffaf0; border-radius: 999px; padding: 5px 12px; font: 500 13px sans-serif; font-family: inherit; }
.vco-chip-btn { cursor: pointer; }
.vco-top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vco-search-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vco-bulk { display: flex; gap: 10px; }
.vco-select-wrap, .vco-field-wrap { position: relative; }
.vco-select-wrap select { appearance: none; -webkit-appearance: none; height: 48px; min-width: 280px; border: 1px solid #e0e2e6; border-radius: 4px; background: #fff; padding: 0 40px 0 12px; font: 14px sans-serif; font-family: inherit; color: #6b7280; cursor: pointer; }
.vco-select-wrap svg { position: absolute; right: 12px; top: 15px; color: var(--vp-gold-ink); pointer-events: none; }
.vco-go { width: 52px; height: 48px; border: 0; border-radius: 4px; background: var(--vp-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.vco-go:disabled { background: #dfe1e5; color: #8a8f98; cursor: default; }
.vco-searches { display: flex; gap: 14px; flex-wrap: wrap; }
.vco-search { display: flex; align-items: center; height: 52px; background: #fff; border: 1px solid #dcdfe4; border-radius: 4px; }
.vco-search:focus-within { border-color: var(--vp-navy); }
.vco-search input { border: 0; outline: none; background: transparent; height: 100%; padding: 0 12px; font: 14px sans-serif; font-family: inherit; min-width: 0; flex: 1; }
.vco-search > svg { color: var(--vp-gold-ink); margin-right: 12px; flex-shrink: 0; }
.vco-search-co { width: 280px; }
.vco-search-prod { width: 380px; }
.vco-field-wrap { border-right: 1px solid #dcdfe4; height: 100%; display: flex; align-items: center; }
.vco-field-wrap select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; height: 100%; padding: 0 28px 0 12px; font: 14px sans-serif; font-family: inherit; color: #333; cursor: pointer; }
.vco-field-wrap svg { position: absolute; right: 9px; color: #333; pointer-events: none; }
.vco-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.vco-list-card, .vco-detail-card { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 1px solid #eceef1; min-height: 520px; }
.vco-table { min-width: 0; }
.vco-table tbody tr { cursor: pointer; }
.vco-row-on td { background: #fffaf0 !important; }
.vco-co { background: none; border: 0; padding: 0; font: 600 13.5px sans-serif; font-family: inherit; color: var(--vp-navy); cursor: pointer; }
.vco-co:hover { text-decoration: underline; }
.vco-user { font-size: 12px; color: #6b7280; margin: 2px 0 5px; }
.vco-actions { white-space: nowrap; }
.vco-actions .vp-link { padding: 4px 6px; }
.vco-empty { text-align: center; color: #555; padding: 30px 12px !important; font-size: 14px; }
.vco-detail-card { padding: 22px 24px; }
.vco-detail-empty { height: 470px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9ca0a8; gap: 10px; text-align: center; font-size: 14px; }
.vco-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vco-detail-co { font-size: 20px; font-weight: 700; color: #222; }
.vco-detail-meta { font-size: 12.5px; color: #6b7280; margin-top: 3px; }
.vco-steps { display: flex; list-style: none; padding: 0; margin: 20px 0 8px; counter-reset: s; }
.vco-steps li { flex: 1; position: relative; text-align: center; font-size: 12.5px; color: #8a8f98; padding-top: 30px; counter-increment: s; }
.vco-steps li::before { content: counter(s); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: #e6e7eb; color: #555; font-weight: 700; font-size: 12px; line-height: 24px; z-index: 1; }
.vco-steps li::after { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: #e6e7eb; }
.vco-steps li:first-child::after { display: none; }
.vco-steps li.vco-step-on { color: #222; font-weight: 600; }
.vco-steps li.vco-step-on::before { background: var(--vp-gold); color: var(--vp-navy); }
.vco-steps li.vco-step-on::after { background: var(--vp-gold); }
.vco-stop { margin: 18px 0 6px; padding: 10px 12px; border-radius: 6px; background: #fdecec; color: #b3261e; font-size: 13px; font-weight: 600; }
.vco-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 20px; margin: 18px 0; }
.vco-facts dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #8a8f98; font-weight: 600; }
.vco-facts dd { margin: 4px 0 0; font-size: 13.5px; color: #222; }
.vco-items { min-width: 0; }
.vco-item-name { font-weight: 600; font-size: 13px; }
.vco-item-sku { font-size: 11.5px; color: #6b7280; word-break: break-all; }
.vco-f-label { display: block; font-size: 13.5px; font-weight: 600; color: #333; margin: 18px 0 8px; }
.vco-f-input { width: 100%; height: 46px; border: 1px solid #cfd2d8; border-radius: 6px; padding: 0 12px; font: 14px sans-serif; font-family: inherit; background: #fff; box-sizing: border-box; }
.vco-f-range { display: flex; align-items: center; gap: 8px; }
.vco-f-error { color: #b3261e; font-size: 13px; margin-top: 10px; min-height: 16px; }
@media (max-width: 1180px) { .vco-body { grid-template-columns: 1fr; } .vco-detail-card { min-height: 0; } .vco-detail-empty { height: 160px; } }

/* ===== Monitor your promotions (vendor-promo-monitor.js) ===== */
.vpmon-crumb-link { background: none; border: 0; padding: 0; font: 500 14px sans-serif; font-family: inherit; color: #8a8f98; cursor: pointer; }
.vpmon-crumb-link:hover { text-decoration: underline; }
.vpmon-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.vpmon-title { margin: 0; font-size: 24px; font-weight: 700; color: #444; }
.vpmon-export { text-transform: uppercase; letter-spacing: .02em; }
.vpmon-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vpmon-status-bar { background: #fff; border-top: 3px solid var(--vp-gold); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.1); padding: 12px 22px; margin-bottom: 22px; }
.vpmon-status-label { font-size: 14px; font-weight: 600; color: #444; text-transform: uppercase; margin-right: 4px; }
.vpmon-pill { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 4px 11px; background: #eceef1; color: #555; font: 700 13px sans-serif; font-family: inherit; text-transform: uppercase; cursor: pointer; }
.vpmon-pill:hover { background: #e2e4e8; }
.vpmon-pill-on { background: var(--vp-gold); color: var(--vp-navy); }
.vpmon-pill:focus-visible { outline: 2px solid var(--vp-navy); outline-offset: 2px; }
.vpmon-dot { width: 8px; height: 8px; border-radius: 50%; }
.vpmon-pill-ongoing .vpmon-dot { background: #7ac943; }
.vpmon-pill-expired .vpmon-dot { background: #f2c94c; }
.vpmon-card-desk { background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.08); min-height: 560px; }
.vpmon-table { min-width: 860px; }
.vpmon-table th { font-weight: 500; font-size: 14px; padding: 20px 14px; }
.vpmon-table td { padding: 14px; }
.vpmon-product { font-weight: 600; font-size: 13.5px; color: #222; }
.vpmon-kind { font-size: 12px; color: #6b7280; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vpmon-period { white-space: nowrap; font-size: 13px; }
.vpmon-badge { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; }
.vpmon-badge-ongoing { background: #e7f6ec; color: #1b7a3d; }
.vpmon-badge-expired { background: #fff4d6; color: #8a6100; }
.vpmon-empty { text-align: center; color: #555; padding: 26px 12px !important; font-size: 14px; }
.vco-top-actions, .vco-searches { margin-left: auto; }
.vco-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
#vco-list { overflow-x: auto; }
.vco-actions { white-space: normal; }
.vco-actions .vp-link { display: block; padding: 2px 0; text-align: left; }

/* ===== Promotions Management - desktop (vendor-center.js renderPromoOverview) ===== */
.vc-pm-host { margin-bottom: 26px; }
.vc-crumb { font-size: 14px; font-weight: 600; margin: 4px 0 10px; }
.vc-crumb-muted { color: #8a8f98; font-weight: 500; }
.vc-crumb-sep { color: #8a8f98; margin: 0 6px; }
.vc-crumb-on { color: var(--vp-gold-ink); }
.vc-pm-title { font-size: 24px !important; margin: 0 0 22px !important; color: #111 !important; }
.vc-pm-grid { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr); gap: 28px; align-items: start; }
.vc-pm-h { font-size: 20px; font-weight: 600; color: #222; margin: 0 0 12px; }
.vc-pm-h-gap { margin-top: 26px; }
.vc-pm-left .vc-promo-none { margin-left: 6px; font-size: 14.5px; }
.vc-pm-left .vc-center { justify-content: flex-start; margin-left: 40%; }
.vc-pm-rev-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.vc-pm-rev-head .vc-pm-h { margin: 0; }
.vc-pm-rev-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vc-pm-rev-tools .vc-country { min-width: 200px; height: 46px; }
.vc-pm-chart { max-width: 460px; }
.vc-pm-chart .vc-chart-card { box-shadow: 0 1px 4px rgba(0,0,0,.12); border-radius: 4px; }
.vc-pm-chart .vc-chart-caption { text-align: center; }
@media (max-width: 1100px) { .vc-pm-grid { grid-template-columns: 1fr; } .vc-pm-left .vc-center { margin-left: 0; } }

/* Promotions Management > View All (campaign list page) */
.vpc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.vpc-back { background: none; border: 0; color: #222; cursor: pointer; padding: 4px; display: inline-flex; border-radius: 6px; }
.vpc-title { margin: 0; font-size: 24px; font-weight: 700; color: #111; }
.vpc-filter { background: none; border: 0; color: var(--vp-gold-ink); cursor: pointer; padding: 4px; display: inline-flex; border-radius: 6px; }
.vpc-back:focus-visible, .vpc-filter:focus-visible { outline: 2px solid var(--vp-navy); outline-offset: 2px; }
.vpc-filters-hidden .vc-pillbar { display: none !important; }
.vpc-host .vc-camp-head { justify-content: space-between; margin-bottom: 18px; }
.vpc-host .vc-camp-search { max-width: 280px; height: 48px; background: #fff; }
.vpc-host .vc-table-wrap { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 4px; }
.vpc-host .vc-camp-table th { font-weight: 500; text-transform: none; font-size: 14px; padding: 20px 16px; }
.vpc-host .vc-camp-table td { padding: 18px 16px; }
.vc-pm-rev-tools .vc-chips { flex-wrap: nowrap; }

/* =====================================================================
   Full width + readability pass (Ryan, Sept 2026)
   Every vendor page now fills the space beside the sidebar, the way
   Vendor Center does, instead of a 1000px centred column; and
   nothing is smaller than ~12.5px, body text ~14.5-15px. Desktop shell
   only - the phone layout, admin and staff panels are untouched.
   ===================================================================== */

/* --- fill the page --- */
.vendor-desktop-shell .admin-main { padding: 20px 28px 32px !important; }
.vendor-desktop-shell .tab-content { max-width: none !important; width: 100%; margin: 0 !important; padding: 8px 4px 24px !important; box-sizing: border-box; }
.vendor-desktop-shell .admin-topbar { margin: -20px -28px 18px !important; }
.vendor-desktop-shell .panel { padding: 22px 24px; }
.vc-pm-chart { max-width: 560px; }
.vp-search, .vp-country { max-width: 560px; }
.vco-search-co { width: 320px; }
.vco-search-prod { width: 440px; }
.vco-select-wrap select { min-width: 320px; }
.vpc-host .vc-camp-search { max-width: 360px; }

/* --- base text --- */
.vendor-desktop-shell .admin-main { font-size: 15px; line-height: 1.5; }
.vendor-desktop-shell .admin-page-title { font-size: 24px !important; }
.vendor-desktop-shell .admin-page-subtitle { font-size: 15px !important; line-height: 1.55; color: #555; }
.vendor-desktop-shell .panel h3 { font-size: 18px; }
.vendor-desktop-shell .panel h4 { font-size: 16px; }
.vendor-desktop-shell table th { font-size: 14.5px; }
.vendor-desktop-shell table td { font-size: 14.5px; }
.vendor-desktop-shell .status-badge { font-size: 12.5px; padding: 4px 10px; }
.vendor-desktop-shell .no-data { font-size: 15px; }
.vendor-desktop-shell .admin-main label { font-size: 14px; }
.vendor-desktop-shell .admin-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.vendor-desktop-shell .admin-main select,
.vendor-desktop-shell .admin-main textarea { font-size: 14.5px !important; min-height: 42px; box-sizing: border-box; }
.vendor-desktop-shell .admin-main textarea { min-height: 84px; }
.vendor-desktop-shell .admin-main button { font-size: max(14px, 1em); }
.vendor-desktop-shell .admin-main input[type="checkbox"], .vendor-desktop-shell .admin-main input[type="radio"] { width: 18px; height: 18px; }

/* --- sidebar --- */
.vendor-desktop-shell .tab-btn { font-size: 15px !important; }
.vendor-desktop-shell .vd-sub-item { font-size: 14px !important; }
.vendor-desktop-shell .vd-group-label { font-size: 12px; }

/* --- small inline sizes written straight into the page markup --- */
.vendor-desktop-shell .admin-main [style*="font-size:10px"], .vendor-desktop-shell .admin-main [style*="font-size: 10px"],
.vendor-desktop-shell .admin-main [style*="font-size:10.5px"], .vendor-desktop-shell .admin-main [style*="font-size: 10.5px"],
.vendor-desktop-shell .admin-main [style*="font-size:11px"], .vendor-desktop-shell .admin-main [style*="font-size: 11px"] { font-size: 12.5px !important; }
.vendor-desktop-shell .admin-main [style*="font-size:11.5px"], .vendor-desktop-shell .admin-main [style*="font-size: 11.5px"],
.vendor-desktop-shell .admin-main [style*="font-size:12px"], .vendor-desktop-shell .admin-main [style*="font-size: 12px"] { font-size: 13.5px !important; }
.vendor-desktop-shell .admin-main [style*="font-size:12.5px"], .vendor-desktop-shell .admin-main [style*="font-size: 12.5px"],
.vendor-desktop-shell .admin-main [style*="font-size:13px"], .vendor-desktop-shell .admin-main [style*="font-size: 13px"] { font-size: 14.5px !important; }
.vendor-desktop-shell .admin-main [style*="font-size:13.5px"], .vendor-desktop-shell .admin-main [style*="font-size: 13.5px"],
.vendor-desktop-shell .admin-main [style*="font-size:14px"], .vendor-desktop-shell .admin-main [style*="font-size: 14px"] { font-size: 15px !important; }

/* --- Product Management / Consignment / Monitoring / Table Filters --- */
.vp-crumb { font-size: 15px; }
.vp-title, .vpmon-title, .vpc-title { font-size: 26px; }
.vp-btn { font-size: 15px; height: 46px; }
.vp-tier { font-size: 14px; }
.vp-status-label { font-size: 13px; }
.vp-pill, .vco-pill { font-size: 14px; padding: 6px 15px; }
.vp-pill-n { font-size: 12.5px; }
.vp-search input, .vp-country select, .vco-search input, .vco-field-wrap select, .vco-select-wrap select { font-size: 15px !important; }
.vp-country-label { font-size: 12px; }
#vendor-products-selected-count, .vp-bulk-btn { font-size: 15px; }
.vp-table { font-size: 14.5px; }
.vp-table th { font-size: 15px !important; }
.vp-name, .vco-co, .vpmon-product { font-size: 15px; }
.vp-qc { font-size: 12.5px; padding: 3px 8px; }
.vp-live, .vp-notlive { font-size: 14px; }
.vp-reason, .vp-muted { font-size: 13px; }
.vp-cur { font-size: 12.5px; }
.vp-link { font-size: 14.5px; }
.vp-menu button, .vp-row-menu button { font-size: 15px; }
.vp-pager, .vp-per select { font-size: 15px; }
.vp-empty, .vco-empty, .vpmon-empty { font-size: 15px; }
.vp-drawer-title { font-size: 24px; }
.vp-drawer-sub { font-size: 15.5px; }
.vp-drawer-hint { font-size: 13px; }
.vp-drawer-item { font-size: 16px; }
.vp-drawer-status { font-size: 14px; }
.vco-chip { font-size: 14px; }
.vco-user { font-size: 13.5px; }
.vco-detail-co { font-size: 22px; }
.vco-detail-meta, .vco-steps li { font-size: 14px; }
.vco-facts dt { font-size: 12.5px; }
.vco-facts dd { font-size: 15px; }
.vco-item-name { font-size: 14.5px; }
.vco-item-sku { font-size: 13px; }
.vco-f-label { font-size: 15px; }
.vpmon-status-label { font-size: 15px; }
.vpmon-pill { font-size: 14px; padding: 5px 13px; }
.vpmon-kind { font-size: 13.5px; }
.vpmon-badge { font-size: 11.5px; }
.vpmon-period { font-size: 14px; }

/* --- vendor-center pages on desktop (Stock Recommendation, Promotions, Ads, Users, Applications) --- */
.vendor-desktop-shell .vc-muted, .vendor-desktop-shell .vc-label, .vendor-desktop-shell .vc-tile-sub, .vendor-desktop-shell .vc-mono { font-size: 14px; }
.vendor-desktop-shell .vc-empty, .vendor-desktop-shell .vc-chart-empty, .vendor-desktop-shell .vc-chart-caption { font-size: 15px; }
.vendor-desktop-shell .vc-badge { font-size: 12.5px; }
.vendor-desktop-shell .vc-pill-label { font-size: 13px; }
.vendor-desktop-shell .vc-pill { font-size: 14px; }
.vendor-desktop-shell .vc-pill-caps { font-size: 13.5px; }
.vendor-desktop-shell .vc-table { font-size: 14.5px; }
.vendor-desktop-shell .vc-table th { font-size: 15px; }
.vendor-desktop-shell .vc-prod-name { font-size: 15px; }
.vendor-desktop-shell .vc-prod-sku, .vendor-desktop-shell .vc-hl-was, .vendor-desktop-shell .vc-hl-sold { font-size: 13px; }
.vendor-desktop-shell .vc-pager { font-size: 15px; }
.vendor-desktop-shell .vc-camp-mini-name { font-size: 15.5px; }
.vendor-desktop-shell .vc-camp-mini-meta { font-size: 13.5px; }
.vendor-desktop-shell .vc-chip { font-size: 14.5px; padding: 8px 16px; }
.vendor-desktop-shell .vc-chart-sub { font-size: 14px; }
.vendor-desktop-shell .vc-chart .vc-axis { font-size: 12px; }
.vendor-desktop-shell .vc-tooltip { font-size: 13.5px; }
.vendor-desktop-shell .vc-hl-sale { font-size: 15.5px; }
.vendor-desktop-shell .vc-camp-card .vc-kv, .vendor-desktop-shell .vc-camp-summary .vc-kv { font-size: 14.5px; }
.vendor-desktop-shell .vc-join-pct, .vendor-desktop-shell .vc-text-btn { font-size: 13.5px; }
.vendor-desktop-shell .vc-perm-intro, .vendor-desktop-shell .vc-perm-label { font-size: 14.5px; }
.vendor-desktop-shell .vc-perm-desc, .vendor-desktop-shell .vc-uline-label, .vendor-desktop-shell .vc-uline-error { font-size: 14px; }
.vendor-desktop-shell .vc-ads-lead, .vendor-desktop-shell .vc-ad-benefit-text, .vendor-desktop-shell .vc-radio-desc { font-size: 15px; }
.vc-pm-h { font-size: 21px; }
.vc-crumb { font-size: 15px; }
/* dashboard + sidebar sizes */
.vendor-desktop-shell .vd-nav-parent { font-size: 15px !important; }
.vendor-desktop-shell .vd-nav-badge { font-size: 12px; }
.vendor-desktop-shell .vd-search input { font-size: 15px !important; }
.vendor-desktop-shell .vd-avatar-name { font-size: 14px; }
.vendor-desktop-shell .vd-avatar-role { font-size: 12.5px; }
.vendor-desktop-shell .vd-bell-badge { font-size: 11.5px; }
.vendor-desktop-shell .vd-welcome-banner h2 { font-size: 24px; }
.vendor-desktop-shell .vd-welcome-banner p { font-size: 15.5px; }
.vendor-desktop-shell .vd-stat-label { font-size: 14.5px; }
.vendor-desktop-shell .vd-stat-value { font-size: 26px; }
.vendor-desktop-shell .vd-stat-stars { font-size: 13.5px; }
.vendor-desktop-shell .vd-card-title { font-size: 17px; }
.vendor-desktop-shell .vd-card-title a, .vendor-desktop-shell .vd-help-card a { font-size: 14px; }
.vendor-desktop-shell .vd-quick-action { font-size: 15px; }
.vendor-desktop-shell .vd-quick-title { font-size: 15px; }
.vendor-desktop-shell .vd-quick-sub { font-size: 13.5px; }
.vendor-desktop-shell .vd-notif-row { font-size: 14.5px; }
.vendor-desktop-shell .vd-sidebar-profile-name { font-size: 14px; }
.vendor-desktop-shell .vd-sidebar-profile-badge { font-size: 11.5px; }
.vendor-desktop-shell .vd-sidebar-profile-link { font-size: 13.5px; }

/* Account Statements > Transactions Exports */
.vs-exports-card { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 1px solid #eceef1; padding: 24px 22px 10px; margin-top: 24px; }
.vs-exports-title { margin: 0 0 18px 12px; font-size: 20px; font-weight: 600; color: #222; }
.vs-exports-scroll { overflow-x: auto; }
.vs-exports-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 700px; }
.vs-exports-table th { text-align: left; font-weight: 500; font-size: 15px; color: #444; padding: 14px 16px; border-bottom: 1px solid #e3e5e8; background: #fff; text-transform: none; }
.vs-exports-table td { padding: 14px 16px; border-bottom: 1px solid #f0f1f3; color: #222; }
.vs-right { text-align: right !important; }
.vs-exports-empty { text-align: center; color: #8a8f98; padding: 50px 12px !important; font-size: 15px; }
.vs-export-status { display: inline-block; font-size: 12.5px; font-weight: 700; border-radius: 4px; padding: 3px 8px; }
.vs-export-ready { background: #e7f6ec; color: #1b7a3d; }
.vs-export-failed { background: #fdecec; color: #b3261e; }
.vs-dl { background: none; border: 0; color: #946c00; font-weight: 700; font-size: 14.5px; cursor: pointer; text-decoration: underline; padding: 4px; }
.vs-exports-pager { display: flex; justify-content: flex-end; align-items: center; gap: 32px; padding: 18px 12px 12px; font-size: 15px; color: #444; flex-wrap: wrap; }
.vs-pg-group { display: inline-flex; gap: 14px; }
.vs-pg { background: none; border: 0; font-size: 20px; line-height: 1; color: #444; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.vs-pg:disabled { color: #c3c6cc; cursor: default; }
.vs-dl:focus-visible, .vs-pg:focus-visible { outline: 2px solid #1a1a2e; outline-offset: 2px; }

/* ===== Account Statements (vendor-statements.js) ===== */
#tab-wallet.vs-statements-mode > .admin-page-title, #tab-wallet.vs-statements-mode > .admin-page-subtitle { display: none; }
.vs-crumb { font-size: 15px; font-weight: 600; margin: 6px 0 10px; }
.vs-crumb-muted, .vs-crumb-sep { color: #8a8f98; font-weight: 500; }
.vs-crumb-sep { margin: 0 6px; }
.vs-crumb-on { color: #946c00; }
.vs-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.vs-title { margin: 0; font-size: 26px; font-weight: 600; color: #111; }
.vs-export-btn { background: #f4b400; color: #1a1a2e; border: 0; border-radius: 4px; padding: 12px 20px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); font-family: inherit; }
.vs-export-btn:hover { filter: brightness(.96); }
.vs-btn-outline { background: #fff; color: #1a1a2e; border: 1px solid #1a1a2e; border-radius: 4px; padding: 11px 18px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.vs-export-btn:focus-visible, .vs-btn-outline:focus-visible, .vs-chip:focus-visible, .vs-row:focus-visible { outline: 2px solid #1a1a2e; outline-offset: 2px; }
.vs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #e3e5e8; }
.vs-card { background: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.14); padding: 44px 20px 42px; text-align: center; }
.vs-card-value { font-size: 36px; font-weight: 500; color: #222; line-height: 1.15; }
.vs-card-label { font-size: 15.5px; color: #555; margin-top: 10px; }
.vs-filterbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: #fff; border-top: 3px solid #f4b400; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.1); padding: 12px 28px; margin-bottom: 26px; }
.vs-filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vs-currency { border-left: 1px solid #e3e5e8; padding-left: 26px; }
.vs-filter-label { font-size: 15px; font-weight: 500; color: #8a8f98; text-transform: uppercase; margin-right: 4px; }
.vs-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 4px 12px; background: #eceef1; color: #444; font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.vs-chip-on { background: #f4b400; color: #1a1a2e; }
.vs-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vs-chip-open .vs-dot, .vs-status-open .vs-dot { background: #9ca0a8; }
.vs-chip-paid .vs-dot, .vs-status-paid .vs-dot { background: #7ac943; }
.vs-chip-unpaid .vs-dot, .vs-status-unpaid .vs-dot { background: #f2c94c; }
.vs-status-rejected .vs-dot { background: #d93025; }
.vs-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: #444; cursor: pointer; position: relative; margin-left: 6px; }
.vs-radio input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.vs-radio span { width: 20px; height: 20px; border: 2px solid #8a8f98; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.vs-radio input:checked + span { border-color: #f4b400; }
.vs-radio input:checked + span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f4b400; }
.vs-radio input:focus-visible + span { outline: 2px solid #1a1a2e; outline-offset: 2px; }
.vs-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 28px; align-items: start; }
.vs-list { background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.1); overflow: hidden; }
.vs-list-head { display: flex; justify-content: space-between; background: #f7f7f8; padding: 20px 28px; font-size: 15px; color: #555; }
.vs-row { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 14px; padding: 20px 28px; border: 0; border-bottom: 1px solid #eceef1; background: #fff; text-align: left; cursor: pointer; font-family: inherit; }
.vs-row:hover { background: #fcfcfd; }
.vs-row-on { background: #fffaf0 !important; box-shadow: inset 4px 0 0 #f4b400; }
.vs-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vs-row-period { font-size: 17px; color: #222; font-weight: 500; }
.vs-row-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; color: #6b7280; }
.vs-row-no { word-break: break-all; }
.vs-flag { flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.vs-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #333; font-size: 14px; }
.vs-row-pay { border: 1px solid #dcdfe4; border-radius: 4px; padding: 7px 12px; font-size: 17px; color: #222; white-space: nowrap; }
.vs-list-empty { padding: 40px 20px; text-align: center; color: #8a8f98; font-size: 15px; }
.vs-detail { background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.1); display: flex; flex-direction: column; min-height: 640px; }
.vs-detail-empty { align-items: center; justify-content: center; color: #8a8f98; font-size: 15px; }
.vs-detail-head { padding: 24px 28px 18px; border-bottom: 1px solid #eceef1; }
.vs-detail-period { font-size: 16px; font-weight: 600; color: #222; }
.vs-detail-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 14.5px; color: #6b7280; }
.vs-detail-meta .vs-status { background: #f4f5f7; border-radius: 999px; padding: 2px 10px; }
.vs-line { display: flex; justify-content: space-between; gap: 12px; padding: 16px 28px; border-bottom: 1px solid #eceef1; font-size: 16.5px; color: #222; }
.vs-line > span:first-child { font-weight: 500; }
.vs-line-strong { font-weight: 700; letter-spacing: .02em; }
.vs-line-strong > span:first-child { font-weight: 600; }
.vs-detail-body { flex: 1; }
.vs-detail-body .vs-line { font-size: 15.5px; color: #444; }
.vs-detail-foot { border-top: 6px solid #f4f5f7; }
.vs-detail-note { padding: 10px 28px; font-size: 14px; color: #6b7280; }
.vs-detail-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 20px 28px 24px; }
@media (max-width: 1100px) { .vs-main-grid { grid-template-columns: 1fr; } .vs-detail { min-height: 0; } .vs-cards { gap: 16px; } .vs-card-value { font-size: 28px; } }
.vendor-desktop-shell .vc-chip, .vc-pm-rev-tools .vc-chip { white-space: nowrap; }