/* ===================================================================
   KPV POS Inventory — Design Tokens + Component Styles
   Scoped under .kpv-wholesale to prevent leaking into Filament chrome.
   =================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

.kpv-wholesale {
  /* ---------- COLOR — neutrals (the canvas) ---------- */
  --kpv-white:        rgb(255, 255, 255);
  --kpv-neutral-50:   rgb(250, 250, 250);
  --kpv-neutral-100:  rgb(246, 246, 246);
  --kpv-neutral-150:  rgb(245, 245, 245);
  --kpv-neutral-200:  rgb(229, 229, 229);
  --kpv-neutral-ring: rgb(236, 236, 238);
  --kpv-neutral-300:  rgb(221, 226, 230);
  --kpv-neutral-400:  rgb(196, 196, 196);
  --kpv-neutral-500:  rgb(150, 150, 150);
  --kpv-neutral-600:  rgb(115, 115, 115);
  --kpv-neutral-700:  rgb(51, 51, 51);
  --kpv-neutral-800:  rgb(38, 38, 38);
  --kpv-neutral-900:  rgb(23, 23, 23);
  --kpv-black:        rgb(0, 0, 0);

  /* ---------- COLOR — primary (gold) ---------- */
  --kpv-gold-50:      rgb(255, 247, 219);
  --kpv-gold-100:     rgb(255, 234, 168);
  --kpv-gold-200:     rgb(255, 218, 108);
  --kpv-gold-300:     rgb(246, 204,  78);
  --kpv-gold-400:     rgb(255, 202,  43);
  --kpv-gold-500:     rgb(245, 202,  72);
  --kpv-gold-600:     rgb(237, 185,  28);
  --kpv-gold-700:     rgb(217, 119,   6);
  --kpv-gold-800:     rgb(180,  83,   9);
  --kpv-gold-900:     rgb(120,  53,  15);

  /* ---------- COLOR — red (status / KPI ledger) ---------- */
  --kpv-red-50:       rgb(254, 242, 242);
  --kpv-red-200:      rgb(254, 202, 202);
  --kpv-red-500:      rgb(220,  38,  38);
  --kpv-red-600:      rgb(198,  17,  12);
  --kpv-red-700:      rgb(150,   0,   0);
  --kpv-red-900:      rgb( 94,   0,   0);
  --kpv-orange-600:   rgb(227,  65,  14);

  /* ---------- COLOR — semantic ---------- */
  --kpv-success-50:   rgb(242, 253, 245);
  --kpv-success-500:  rgb( 34, 197,  94);
  --kpv-success-600:  rgb( 22, 163,  74);
  --kpv-success-700:  rgb(  0, 132,  92);
  --kpv-info-600:     rgb( 46, 114, 210);
  --kpv-warning-600:  rgb(217, 119,   6);

  /* ---------- SEMANTIC tokens ---------- */
  --kpv-bg-page:        var(--kpv-neutral-50);
  --kpv-bg-surface:     var(--kpv-white);
  --kpv-bg-muted:       var(--kpv-neutral-100);
  --kpv-bg-inverse:     var(--kpv-neutral-900);

  --kpv-fg-default:     var(--kpv-neutral-900);
  --kpv-fg-muted:       var(--kpv-neutral-600);
  --kpv-fg-subtle:      var(--kpv-neutral-500);
  --kpv-fg-placeholder: var(--kpv-neutral-400);
  --kpv-fg-on-primary:  var(--kpv-white);
  --kpv-fg-on-dark:     var(--kpv-white);
  --kpv-fg-link:        var(--kpv-info-600);
  --kpv-fg-required:    var(--kpv-red-500);
  --kpv-fg-amount-due:  var(--kpv-red-600);
  --kpv-fg-gold-value:  var(--kpv-gold-600);

  --kpv-border-default: var(--kpv-neutral-200);
  --kpv-border-muted:   var(--kpv-neutral-ring);
  --kpv-border-strong:  var(--kpv-neutral-700);

  --kpv-action-primary-bg:        var(--kpv-gold-700);
  --kpv-action-primary-bg-hover:  var(--kpv-gold-800);
  --kpv-action-primary-fg:        var(--kpv-white);
  --kpv-action-secondary-bg:      var(--kpv-white);
  --kpv-action-secondary-border:  var(--kpv-neutral-200);
  --kpv-action-secondary-fg:      var(--kpv-neutral-800);

  /* ---------- TYPE — families ---------- */
  --kpv-font-sans:  "Inter", "Noto Sans Lao", system-ui, -apple-system,
                    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --kpv-font-lao:   "Noto Sans Lao", "Inter", system-ui, sans-serif;
  --kpv-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular,
                    Menlo, monospace;

  /* ---------- TYPE — scale ---------- */
  --kpv-text-xs:   12px;  --kpv-leading-xs:   16px;
  --kpv-text-sm:   14px;  --kpv-leading-sm:   20px;
  --kpv-text-base: 16px;  --kpv-leading-base: 24px;
  --kpv-text-lg:   18px;  --kpv-leading-lg:   28px;
  --kpv-text-xl:   20px;  --kpv-leading-xl:   28px;
  --kpv-text-2xl:  24px;  --kpv-leading-2xl:  32px;
  --kpv-text-3xl:  30px;  --kpv-leading-3xl:  36px;
  --kpv-text-4xl:  40px;  --kpv-leading-4xl:  48px;
  --kpv-text-5xl:  42px;  --kpv-leading-5xl:  48px;

  --kpv-weight-regular:  400;
  --kpv-weight-medium:   500;
  --kpv-weight-semibold: 600;
  --kpv-weight-bold:     700;

  --kpv-tracking-tight:  -0.025em;
  --kpv-tracking-normal: 0;

  /* ---------- RADIUS ---------- */
  --kpv-radius-xs:   2px;
  --kpv-radius-sm:   4px;
  --kpv-radius-md:   6px;
  --kpv-radius-lg:   8px;
  --kpv-radius-xl:  12px;
  --kpv-radius-2xl: 16px;
  --kpv-radius-full: 9999px;

  /* ---------- SHADOW / RING ---------- */
  --kpv-shadow-xs:    0 0.5px 2px 0 rgba(0,0,0,0.05);
  --kpv-shadow-sm:    0 1px 3px 0 rgba(0,0,0,0.06);
  --kpv-shadow-md:    0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
  --kpv-shadow-lg:    0 12px 24px -8px rgba(0,0,0,0.10);
  --kpv-shadow-focus: 0 0 0 3px rgba(217,119,6,0.18);
  --kpv-ring-card:   0 0 0 1px var(--kpv-border-muted), var(--kpv-shadow-sm);
  --kpv-ring-input:  0 0 0 1px var(--kpv-border-default), var(--kpv-shadow-xs);

  /* ---------- SPACING ---------- */
  --kpv-space-0:  0;
  --kpv-space-1:  4px;
  --kpv-space-2:  8px;
  --kpv-space-3:  12px;
  --kpv-space-4:  16px;
  --kpv-space-5:  20px;
  --kpv-space-6:  24px;
  --kpv-space-8:  32px;
  --kpv-space-10: 40px;
  --kpv-space-12: 48px;
  --kpv-space-16: 64px;

  /* ---------- LAYOUT ---------- */
  --kpv-sidebar-w: 320px;
  --kpv-topbar-h:   68px;
  --kpv-content-max: 1056px;
  --kpv-control-h:   38px;
  --kpv-row-h:       56px;

  /* ---------- MOTION ---------- */
  --kpv-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --kpv-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --kpv-dur-fast:    120ms;
  --kpv-dur-base:    180ms;
  --kpv-dur-slow:    280ms;

  /* base resets inside wrapper */
  font-family: var(--kpv-font-sans);
  color: var(--kpv-fg-default);
  background: var(--kpv-bg-page);
  font-size: var(--kpv-text-sm);
  line-height: var(--kpv-leading-sm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
}

.kpv-wholesale *, .kpv-wholesale *::before, .kpv-wholesale *::after {
  box-sizing: border-box;
}

/* ----------------------------------------------------- */
/* App shell (minus topbar — Filament provides that)     */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-app__body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.kpv-wholesale .kpv-app__main {
  flex: 1;
  padding: 24px 28px 56px;
  overflow-y: auto;
}
.kpv-wholesale .kpv-app__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ----------------------------------------------------- */
/* Sidebar                                               */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-sidebar {
  width: 304px; flex: none;
  background: #fff;
  border-right: 1px solid var(--kpv-border-muted);
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 22px;
  overflow-y: auto;
}
.kpv-wholesale .kpv-sidebar__head { display: flex; align-items: center; justify-content: space-between; }
.kpv-wholesale .kpv-sidebar__title { font-weight: 700; font-size: 18px; color: var(--kpv-fg-default); font-family: var(--kpv-font-lao); }
.kpv-wholesale .kpv-sidebar__reset {
  font-size: 13px; color: var(--kpv-info-600);
  background: none; border: none; cursor: pointer; padding: 4px;
}
.kpv-wholesale .kpv-sidebar__reset:hover { color: var(--kpv-gold-700); }
.kpv-wholesale .kpv-sidebar__group { display: flex; flex-direction: column; gap: 8px; }
.kpv-wholesale .kpv-sidebar__grouplabel {
  font-size: 12px; font-weight: 600; color: var(--kpv-fg-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; justify-content: space-between; align-items: baseline;
}
.kpv-wholesale .kpv-sidebar__hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--kpv-fg-subtle); }
.kpv-wholesale .kpv-sidebar__list { display: flex; flex-direction: column; gap: 2px; }
.kpv-wholesale .kpv-sidebar__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--kpv-neutral-800);
  transition: background var(--kpv-dur-fast) var(--kpv-ease-out);
  width: 100%;
}
.kpv-wholesale .kpv-sidebar__item:hover { background: var(--kpv-neutral-100); }
.kpv-wholesale .kpv-sidebar__item.is-active {
  background: #fffbf3; color: var(--kpv-gold-700);
  box-shadow: inset 0 0 0 1px #fdecce;
}
.kpv-wholesale .kpv-sidebar__item.is-active .kpv-sidebar__ic { color: var(--kpv-gold-700); }
.kpv-wholesale .kpv-sidebar__ic { width: 20px; height: 20px; color: var(--kpv-fg-muted); display: inline-flex; }
.kpv-wholesale .kpv-sidebar__itemlabels { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kpv-wholesale .kpv-sidebar__itemlabel { font-family: var(--kpv-font-lao); font-weight: 500; font-size: 14px; line-height: 18px; }
.kpv-wholesale .kpv-sidebar__itemen   { font-size: 11px; line-height: 14px; color: var(--kpv-fg-subtle); }
.kpv-wholesale .kpv-sidebar__item.is-active .kpv-sidebar__itemen { color: var(--kpv-gold-800); opacity: .7; }
.kpv-wholesale .kpv-sidebar__badge {
  margin-left: auto; background: #fffbf3; color: var(--kpv-gold-700);
  border: 1px solid #fdecce; border-radius: 6px;
  font-size: 12px; font-weight: 600; padding: 1px 8px;
  font-feature-settings: "tnum";
}
.kpv-wholesale .kpv-sidebar__item.is-active .kpv-sidebar__badge { background: #fff; }
.kpv-wholesale .kpv-sidebar__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kpv-wholesale .kpv-sidebar__custom {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px dashed var(--kpv-border-default);
  border-radius: 8px; padding: 8px 10px;
  font-size: 13px; color: var(--kpv-fg-muted); cursor: pointer;
}
.kpv-wholesale .kpv-sidebar__custom:hover { color: var(--kpv-gold-700); border-color: var(--kpv-gold-300); }
.kpv-wholesale .kpv-sidebar__custom.is-on {
  color: var(--kpv-gold-700); border-style: solid;
  border-color: var(--kpv-gold-300); background: #fffbf3;
  font-variant-numeric: tabular-nums;
}
[x-cloak] { display: none !important; }
.kpv-wholesale .kpv-customrange-wrap { position: relative; }
.kpv-wholesale .kpv-customrange {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  width: 240px; background: #fff; border-radius: 12px;
  box-shadow: var(--kpv-ring-card); padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.kpv-wholesale .kpv-customrange .kpv-input { padding: 6px 10px; }
.kpv-wholesale .kpv-customrange__actions {
  display: flex; justify-content: flex-end; gap: 8px;
}

/* segmented control */
.kpv-wholesale .kpv-segmented {
  display: inline-flex; padding: 3px; background: var(--kpv-neutral-100);
  border-radius: 8px; gap: 2px; align-self: flex-start;
}
.kpv-wholesale .kpv-segmented__opt {
  padding: 6px 12px; border-radius: 6px; background: transparent;
  border: none; cursor: pointer; font-family: var(--kpv-font-lao);
  font-weight: 500; font-size: 13px; color: var(--kpv-neutral-700);
}
.kpv-wholesale .kpv-segmented__opt.is-on { background: #fff; color: var(--kpv-fg-default); box-shadow: var(--kpv-shadow-xs); }

.kpv-wholesale .kpv-chip {
  background: #fff; border: 1px solid var(--kpv-border-default);
  border-radius: 9999px; padding: 4px 12px;
  font-family: var(--kpv-font-lao); font-weight: 500;
  font-size: 13px; color: var(--kpv-fg-default); cursor: pointer;
  transition: background var(--kpv-dur-fast), border-color var(--kpv-dur-fast);
}
.kpv-wholesale .kpv-chip:hover { border-color: var(--kpv-gold-300); }
.kpv-wholesale .kpv-chip.is-on { background: var(--kpv-gold-700); border-color: var(--kpv-gold-700); color: #fff; }

/* ----------------------------------------------------- */
/* Page header                                           */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-pagehead { display: flex; align-items: flex-end; gap: 16px; }
.kpv-wholesale .kpv-pagehead__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kpv-wholesale .kpv-pagehead__title {
  font-family: var(--kpv-font-lao);
  font-weight: 700; font-size: 28px; line-height: 36px; letter-spacing: -0.02em;
  color: var(--kpv-fg-default); margin: 0;
}
.kpv-wholesale .kpv-pagehead__actions { display: flex; gap: 8px; align-items: center; }

/* ----------------------------------------------------- */
/* Buttons                                               */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 14px/20px var(--kpv-font-sans);
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; box-shadow: var(--kpv-shadow-xs);
  transition: background var(--kpv-dur-fast), box-shadow var(--kpv-dur-fast), transform var(--kpv-dur-fast);
  text-decoration: none;
}
.kpv-wholesale .kpv-btn:active { transform: translateY(0.5px); }
.kpv-wholesale .kpv-btn--primary { background: var(--kpv-gold-700); color: #fff; }
.kpv-wholesale .kpv-btn--primary:hover { background: var(--kpv-gold-800); }
.kpv-wholesale .kpv-btn--secondary { background: #fff; color: var(--kpv-neutral-800); border-color: var(--kpv-border-default); }
.kpv-wholesale .kpv-btn--secondary:hover { background: var(--kpv-neutral-100); }

/* ----------------------------------------------------- */
/* KPI tiles                                             */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpv-wholesale .kpv-kpi {
  background: #fff; border-radius: 12px; padding: 18px 18px 16px;
  box-shadow: var(--kpv-ring-card); display: flex; flex-direction: column; gap: 10px;
  min-height: 132px; position: relative; overflow: hidden;
}
.kpv-wholesale .kpv-kpi__head { display: flex; align-items: baseline; justify-content: space-between; }
.kpv-wholesale .kpv-kpi__label { font-size: 13px; color: var(--kpv-fg-muted); font-weight: 500; }
.kpv-wholesale .kpv-kpi__sub   { font-size: 11px; color: var(--kpv-fg-subtle); text-transform: uppercase; letter-spacing: .04em; }
.kpv-wholesale .kpv-kpi__row { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.kpv-wholesale .kpv-kpi__figure {
  font: 700 30px/36px var(--kpv-font-sans);
  letter-spacing: -0.025em; color: var(--kpv-fg-default);
  font-variant-numeric: tabular-nums;
}
.kpv-wholesale .kpv-kpi__unit { font-size: 14px; font-weight: 500; color: var(--kpv-fg-muted); margin-left: 2px; }
.kpv-wholesale .kpv-kpi__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 500;
}
.kpv-wholesale .kpv-kpi__delta.is-up   { color: var(--kpv-success-600); }
.kpv-wholesale .kpv-kpi__delta.is-down { color: var(--kpv-red-500); }
.kpv-wholesale .kpv-spark { width: 100%; height: 36px; margin-top: auto; }
.kpv-wholesale .kpv-kpi--owe .kpv-kpi__figure { color: var(--kpv-red-600); }
.kpv-wholesale .kpv-kpi--gold .kpv-kpi__figure { color: var(--kpv-gold-700); }

/* ----------------------------------------------------- */
/* Toolbar above tables                                  */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: #fff;
  border: 1px solid var(--kpv-border-muted);
  border-radius: 12px 12px 0 0; border-bottom: none;
}
.kpv-wholesale .kpv-search {
  flex: 1; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  background: var(--kpv-neutral-50); border: 1px solid var(--kpv-border-default);
  border-radius: 8px; padding: 7px 12px;
  color: var(--kpv-fg-muted); font-size: 14px;
}
.kpv-wholesale .kpv-search input {
  border: none; background: transparent; outline: none;
  flex: 1; font: 400 14px/20px var(--kpv-font-sans);
  color: var(--kpv-fg-default);
}
.kpv-wholesale .kpv-search input::placeholder { color: var(--kpv-fg-placeholder); }

/* ----------------------------------------------------- */
/* Table                                                 */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-tbl {
  background: #fff; border-radius: 0 0 12px 12px;
  border: 1px solid var(--kpv-border-muted); border-top: 1px solid var(--kpv-border-muted);
  overflow: hidden;
}
.kpv-wholesale .kpv-tbl__row {
  display: grid; align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--kpv-border-muted);
  font: 400 14px/20px var(--kpv-font-sans);
  color: var(--kpv-fg-default);
  background: #fff; border-left: none; border-right: none;
  text-align: left; cursor: default; gap: 16px;
  width: 100%;
}
.kpv-wholesale .kpv-tbl__body { cursor: pointer; transition: background var(--kpv-dur-fast); }
.kpv-wholesale .kpv-tbl__body:hover { background: var(--kpv-neutral-50); }
.kpv-wholesale .kpv-tbl__body.is-selected { background: #fffbf3; box-shadow: inset 3px 0 0 var(--kpv-gold-700); }
.kpv-wholesale .kpv-tbl__body:last-child { border-bottom: none; }
.kpv-wholesale .kpv-tbl__head {
  background: var(--kpv-neutral-50);
  font-size: 13px; font-weight: 600; color: var(--kpv-fg-muted);
  padding-top: 10px; padding-bottom: 10px; cursor: default;
}
.kpv-wholesale .kpv-tbl__cell { min-width: 0; }
.kpv-wholesale .kpv-tbl__name { display: flex; align-items: center; gap: 10px; }
.kpv-wholesale .kpv-tbl__avatar {
  width: 32px; height: 32px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 13px;
}
.kpv-wholesale .kpv-tbl__namecol { display: flex; flex-direction: column; min-width: 0; }
.kpv-wholesale .kpv-tbl__namepri { font-weight: 600; color: var(--kpv-fg-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpv-wholesale .kpv-tbl__namesub { font-size: 12px; color: var(--kpv-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpv-wholesale .kpv-tbl__num { font-variant-numeric: tabular-nums; font-weight: 500; }
.kpv-wholesale .kpv-tbl__num--owe { color: var(--kpv-red-600); }
.kpv-wholesale .kpv-tbl__zero { color: var(--kpv-fg-placeholder); font-weight: 400; }
.kpv-wholesale .kpv-tbl__meta { color: var(--kpv-fg-muted); font-size: 13px; }

/* ----------------------------------------------------- */
/* Tags                                                  */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px;
  font-weight: 500; font-size: 12.5px; line-height: 18px;
  border: 1px solid transparent;
  font-family: var(--kpv-font-lao);
}
.kpv-wholesale .kpv-tag--paid   { background: var(--kpv-success-50); color: var(--kpv-success-600); border-color: #d3f3df; }
.kpv-wholesale .kpv-tag--unpaid { background: var(--kpv-red-50);     color: var(--kpv-red-600);    border-color: #fecaca; }
.kpv-wholesale .kpv-tag--partial{ background: #fffbf3;               color: var(--kpv-gold-700);   border-color: #fdecce; }
.kpv-wholesale .kpv-tag--draft  { background: var(--kpv-neutral-100);color: var(--kpv-neutral-700); border-color: var(--kpv-neutral-200); }

/* ----------------------------------------------------- */
/* Bottom row: tx counts + donut                         */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-bottomrow {
  display: grid; grid-template-columns: 360px 1fr; gap: 16px;
  align-items: start;
}
.kpv-wholesale .kpv-txcards { display: flex; flex-direction: column; gap: 12px; }
.kpv-wholesale .kpv-txcard {
  background: #fff; border: 1px solid var(--kpv-border-muted);
  border-radius: 10px; padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
}
.kpv-wholesale .kpv-txcard__body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpv-wholesale .kpv-txcard__label {
  font-family: var(--kpv-font-lao);
  font-size: 11px; color: var(--kpv-fg-muted); font-weight: 500;
}
.kpv-wholesale .kpv-txcard__count { display: flex; align-items: baseline; gap: 6px; }
.kpv-wholesale .kpv-txcard__big {
  font: 700 32px/1 var(--kpv-font-sans);
  color: var(--kpv-fg-default); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpv-wholesale .kpv-summary4__unit {
  font-family: var(--kpv-font-lao);
  font-size: 14px; color: var(--kpv-fg-muted); font-weight: 500;
}
.kpv-wholesale .kpv-txcard__delta {
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.kpv-wholesale .kpv-txcard__delta.is-up { color: var(--kpv-success-600); }
.kpv-wholesale .kpv-txcard__delta.is-down { color: var(--kpv-red-600); }
.kpv-wholesale .kpv-txcard__icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.kpv-wholesale .kpv-txcard__icon--buy      { background: rgba(46,114,210,0.10); color: #2E72D2; }
.kpv-wholesale .kpv-txcard__icon--sell     { background: rgba(150,0,0,0.10);    color: var(--kpv-red-700); }
.kpv-wholesale .kpv-txcard__icon--withdraw { background: rgba(217,119,6,0.12);  color: var(--kpv-gold-700); }

.kpv-wholesale .kpv-donutcard {
  background: #fff; border: 1px solid var(--kpv-border-muted);
  border-radius: 10px; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.kpv-wholesale .kpv-donutcard__title {
  font-family: var(--kpv-font-lao);
  font-weight: 600; font-size: 16px; color: var(--kpv-fg-default);
}
.kpv-wholesale .kpv-donutcard__row {
  display: grid; grid-template-columns: 300px 1fr; gap: 24px;
  align-items: center;
}
.kpv-wholesale .kpv-donut { display: block; margin: 0 auto; }
.kpv-wholesale .kpv-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.kpv-wholesale .kpv-legend__item {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 10px;
  align-items: baseline;
  padding-bottom: 10px; border-bottom: 1px solid var(--kpv-border-muted);
}
.kpv-wholesale .kpv-legend__item:last-child { border-bottom: none; }
.kpv-wholesale .kpv-legend__dot { width: 10px; height: 10px; border-radius: 999px; align-self: center; }
.kpv-wholesale .kpv-legend__label {
  font-family: var(--kpv-font-lao);
  font-weight: 500; font-size: 14px; color: var(--kpv-fg-default);
}
.kpv-wholesale .kpv-legend__pct {
  font: 700 18px/24px var(--kpv-font-sans);
  color: var(--kpv-fg-default); font-variant-numeric: tabular-nums;
  text-align: right; align-self: end;
}
.kpv-wholesale .kpv-legend__kip {
  grid-column: 2 / -1;
  font-size: 11.5px; color: var(--kpv-fg-muted); text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--kpv-font-lao);
}
.kpv-wholesale .kpv-donutcard__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--kpv-border-muted);
}
.kpv-wholesale .kpv-donutcard__footlabel {
  font-family: var(--kpv-font-lao);
  font-weight: 500; font-size: 14px; color: var(--kpv-fg-default);
}
.kpv-wholesale .kpv-donutcard__footvalue {
  font: 700 18px/1 var(--kpv-font-sans);
  color: var(--kpv-red-600); font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.kpv-wholesale .kpv-donutcard__more {
  font-family: var(--kpv-font-lao);
  font-size: 13px; color: var(--kpv-fg-muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.kpv-wholesale .kpv-donutcard__more:hover { color: var(--kpv-gold-700); }

/* ----------------------------------------------------- */
/* Two-column dashboard layout                           */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-dash { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }

/* ----------------------------------------------------- */
/* Right side panel (customer detail card)               */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-detail {
  background: #fff; border-radius: 12px;
  box-shadow: var(--kpv-ring-card); padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.kpv-wholesale .kpv-detail__title { font-size: 15px; font-weight: 600; color: var(--kpv-fg-default); }
.kpv-wholesale .kpv-detail__sub   { font-size: 13px; color: var(--kpv-fg-muted); }
.kpv-wholesale .kpv-detail__totals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 14px;
  background: var(--kpv-neutral-50); border-radius: 10px;
}
.kpv-wholesale .kpv-detail__metric { display: flex; flex-direction: column; gap: 2px; }
.kpv-wholesale .kpv-detail__mlabel { font-size: 11px; color: var(--kpv-fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.kpv-wholesale .kpv-detail__mvalue { font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.kpv-wholesale .kpv-detail__mvalue.owe { color: var(--kpv-red-600); }
.kpv-wholesale .kpv-detail__mvalue.gold { color: var(--kpv-gold-700); }
.kpv-wholesale .kpv-detail__history { display: flex; flex-direction: column; }
.kpv-wholesale .kpv-detail__event {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed var(--kpv-border-default);
}
.kpv-wholesale .kpv-detail__event:last-child { border-bottom: none; }
.kpv-wholesale .kpv-detail__eventic {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.kpv-wholesale .kpv-detail__eventic.sell { background: #fffbf3; color: var(--kpv-gold-700); }
.kpv-wholesale .kpv-detail__eventic.buy  { background: var(--kpv-success-50); color: var(--kpv-success-600); }
.kpv-wholesale .kpv-detail__eventic.with { background: var(--kpv-red-50); color: var(--kpv-red-600); }
.kpv-wholesale .kpv-detail__eventbody { font-size: 13px; line-height: 18px; }
.kpv-wholesale .kpv-detail__eventbody b { color: var(--kpv-fg-default); display: block; }
.kpv-wholesale .kpv-detail__eventbody span { color: var(--kpv-fg-muted); font-size: 12px; }
.kpv-wholesale .kpv-detail__eventamt { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; align-self: center; }

/* ----------------------------------------------------- */
/* Eyebrow util                                          */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-eyebrow {
  font-size: 12px; line-height: 16px;
  font-weight: 500; color: var(--kpv-fg-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ----------------------------------------------------- */
/* Layout wrapper: sidebar + main                        */
/* ----------------------------------------------------- */
.kpv-wholesale .kpv-layout {
  display: flex;
  min-height: 0;
  background: var(--kpv-bg-page);
}

/* detail panel empty state */
.kpv-wholesale .kpv-detail__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 40px 20px; color: var(--kpv-fg-subtle);
  font-size: 14px; text-align: center; min-height: 200px;
}

/* icon sizing helpers */
.kpv-wholesale .kpv-ic16 { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.kpv-wholesale .kpv-ic14 { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }
.kpv-wholesale .kpv-ic18 { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.kpv-wholesale .kpv-ic22 { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }