/* ============================================================================
   DMSV3 · SALES (RETAIL) + B2B PROJECTS
   ----------------------------------------------------------------------------
   Extends the existing Salesdiary console system. Adds ONLY:
     · green (Sales) + violet (B2B) palette tokens
     · data-module="sale" / "b2b" accent overrides (mirrors module-accents.css)
     · sub-type chip vocabulary
     · the restructured grouped distributor sidebar (.dnav)
     · the prototype B2B-mode toggle widget + topbar pill
     · a few module atoms (RM-approval pill, override-discount cell,
       quotation image card, category line rows, convert/approval cards)
   No new chrome paradigm — lists stay .cons, details stay .pid.
   ============================================================================ */

:root {
  /* Sales — green */
  --sd-green-050: #EEF7F1;
  --sd-green-700: #2C7A4E;          /* hover/press for green primary */
  /* (--sd-green-600 #379862 and --sd-green-100 #E1F0E7 already exist) */

  /* B2B Projects — violet */
  --sd-violet-050: #F4F0FB;
  --sd-violet-100: #E9E1F7;
  --sd-violet-600: #6D4AB8;
  --sd-violet-700: #573A95;
}

/* ============================================================================
   MODULE ACCENTS  ·  data-module="sale" (green) — mirrors po/grn/disc blocks
   ============================================================================ */
[data-module="sale"] .kpiseg.is-active,
[data-module="sale"] .view-chip.is-on,
[data-module="sale"] .cons__primary {
  background: var(--sd-green-600);
  border-color: var(--sd-green-600);
}
[data-module="sale"] .kpiseg.is-active:hover,
[data-module="sale"] .view-chip.is-on:hover,
[data-module="sale"] .cons__primary:hover {
  background: var(--sd-green-700);
  border-color: var(--sd-green-700);
}
[data-module="sale"] .cons__chip.is-set:not(.is-date) {
  border-color: var(--sd-green-600);
  color: var(--sd-ink-900);
}
[data-module="sale"] .cons__chip.is-set:not(.is-date):hover { border-color: var(--sd-green-700); }
[data-module="sale"] .cons__chip.is-set:not(.is-date) .cons__chip-count { background: var(--sd-green-600); }
[data-module="sale"] .row.is-selected { background: var(--sd-green-050) !important; }
[data-module="sale"] .row.is-selected::before { background: var(--sd-green-600); }
[data-module="sale"] .cons__row-stripe { background: var(--sd-green-600); }
[data-module="sale"] .topbar__subnav a.is-active,
[data-module="sale"] .topbar__subnav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--sd-green-600); }
[data-module="sale"] .pid__tile--info { --pid-tile-accent: var(--sd-green-600); }
[data-module="sale"] .pid__kicker { color: var(--sd-green-700); }
[data-module="sale"] .pid__kicker::before { background: var(--sd-green-600); }
[data-module="sale"] .cons__icon-btn--accent {
  border-color: var(--sd-green-600); color: var(--sd-green-700);
}
[data-module="sale"] .cons__icon-btn--accent:hover { background: var(--sd-green-050); }

/* ============================================================================
   MODULE ACCENTS  ·  data-module="b2b" (violet)
   ============================================================================ */
[data-module="b2b"] .kpiseg.is-active,
[data-module="b2b"] .view-chip.is-on,
[data-module="b2b"] .cons__primary {
  background: var(--sd-violet-600);
  border-color: var(--sd-violet-600);
}
[data-module="b2b"] .kpiseg.is-active:hover,
[data-module="b2b"] .view-chip.is-on:hover,
[data-module="b2b"] .cons__primary:hover {
  background: var(--sd-violet-700);
  border-color: var(--sd-violet-700);
}
[data-module="b2b"] .cons__chip.is-set:not(.is-date) {
  border-color: var(--sd-violet-600);
  color: var(--sd-ink-900);
}
[data-module="b2b"] .cons__chip.is-set:not(.is-date):hover { border-color: var(--sd-violet-700); }
[data-module="b2b"] .cons__chip.is-set:not(.is-date) .cons__chip-count { background: var(--sd-violet-600); }
[data-module="b2b"] .row.is-selected { background: var(--sd-violet-050) !important; }
[data-module="b2b"] .row.is-selected::before { background: var(--sd-violet-600); }
[data-module="b2b"] .cons__row-stripe { background: var(--sd-violet-600); }
[data-module="b2b"] .topbar__subnav a.is-active,
[data-module="b2b"] .topbar__subnav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--sd-violet-600); }
[data-module="b2b"] .pid__tile--info { --pid-tile-accent: var(--sd-violet-600); }
[data-module="b2b"] .pid__kicker { color: var(--sd-violet-700); }
[data-module="b2b"] .pid__kicker::before { background: var(--sd-violet-600); }

/* ============================================================================
   SUB-TYPE CHIP  ·  small uppercase pill next to a doc number / kicker
   ============================================================================ */
.subtype-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--sd-radius-sm);
  font-family: var(--sd-font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}
.subtype-chip--po      { background: var(--sd-blue-100);   color: var(--sd-blue-700);   border-color: #C9DCEE; }
.subtype-chip--grn     { background: var(--sd-teal-100);   color: #0E6E7C;              border-color: #BEE5EA; }
.subtype-chip--disc    { background: var(--sd-amber-100);  color: var(--sd-amber-text); border-color: #F2D9A6; }
.subtype-chip--sale    { background: var(--sd-green-100);  color: var(--sd-green-700);  border-color: #BFE0CC; }
.subtype-chip--b2b     { background: var(--sd-violet-100); color: var(--sd-violet-700); border-color: #D8CBEF; }
/* detail-kicker variant sits inline in the kicker row */
.pid__kicker .subtype-chip { margin-left: 2px; }

/* ============================================================================
   RM-APPROVAL PILL (B2B order)  + OVERRIDE-DISCOUNT cell
   ============================================================================ */
.pill-rm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--sd-radius-pill);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill-rm__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pill-rm--approved { background: var(--sd-green-100);  color: var(--sd-green-700);  border-color: #BFE0CC; }
.pill-rm--approved .pill-rm__dot { background: var(--sd-green-600); }
.pill-rm--pending  { background: var(--sd-amber-100);  color: var(--sd-amber-text); border-color: #F2D9A6; }
.pill-rm--pending .pill-rm__dot  { background: var(--sd-amber-500); }
.pill-rm--rejected { background: var(--sd-red-100);    color: #A8273F;              border-color: #F1B4BD; }
.pill-rm--rejected .pill-rm__dot { background: var(--sd-red-600); }
.pill-rm--na { background: var(--sd-bg-soft); color: var(--sd-ink-400); border-color: var(--sd-line-200); }
.pill-rm--na .pill-rm__dot { background: var(--sd-ink-200); }

/* override-discount amber cell — blank when zero */
.ovr-disc {
  font-family: var(--sd-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--sd-amber-text);
  font-weight: 600;
}
.ovr-disc--zero { color: var(--sd-ink-300); font-weight: 400; }

/* balance cell — amber when outstanding (never red) */
.bal-amt {
  font-family: var(--sd-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--sd-ink-900);
  font-weight: 500;
}
.bal-amt--due { color: var(--sd-amber-text); font-weight: 600; }
.bal-amt--zero { color: var(--sd-green-600); }

/* paperclip / attachment indicator (quotation list) */
.attach-ind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--sd-violet-700);
  font-weight: 500;
}
.attach-ind svg { width: 14px; height: 14px; }
.attach-ind--none { color: var(--sd-ink-300); font-weight: 400; }

/* ============================================================================
   DETAIL ATOMS  ·  quotation image card / convert card / RM rate-approval card
   ============================================================================ */
/* generic linked-docs card body grid reused across detail pages */
.lnk-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lnk-chain { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lnk-chain__arrow { color: var(--sd-ink-300); width: 14px; height: 14px; flex-shrink: 0; }

/* Quotation: attached image card */
.qimg {
  display: flex;
  gap: 16px;
  align-items: center;
}
.qimg__thumb {
  width: 132px; height: 92px; flex-shrink: 0;
  border-radius: var(--sd-radius-md);
  border: 1px solid var(--sd-line-300);
  background: var(--sd-bg-soft);
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.qimg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qimg__thumb--empty { border-style: dashed; color: var(--sd-ink-300); flex-direction: column; gap: 6px; font-size: 11.5px; }
.qimg__thumb--empty svg { width: 22px; height: 22px; }
.qimg__body { min-width: 0; }
.qimg__name { font-size: 13px; font-weight: 500; color: var(--sd-ink-900); margin-bottom: 3px; }
.qimg__meta { font-size: 12px; color: var(--sd-ink-500); font-family: var(--sd-mono); }
.qimg__view {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px;
  font-size: 12.5px; font-weight: 500; color: var(--sd-violet-700);
  text-decoration: none;
}
.qimg__view svg { width: 13px; height: 13px; }
.qimg__view:hover { text-decoration: underline; }

/* full-image lightbox */
.qlightbox {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,.62);
  display: none; align-items: center; justify-content: center;
  padding: 40px;
}
.qlightbox.is-open { display: flex; }
.qlightbox__img {
  max-width: 90vw; max-height: 86vh;
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-shadow-lg);
  background: #fff;
}
.qlightbox__close {
  position: absolute; top: 20px; right: 24px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.qlightbox__close svg { width: 18px; height: 18px; }

/* Convert-to-order callout (violet) */
.convert-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--sd-violet-100);
  background: var(--sd-violet-050);
  border-radius: var(--sd-radius-lg);
  margin-top: 14px;
}
.convert-card__icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--sd-violet-600); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.convert-card__icon svg { width: 19px; height: 19px; }
.convert-card__body { flex: 1; min-width: 0; }
.convert-card__title { font-size: 14px; font-weight: 600; color: var(--sd-ink-900); margin-bottom: 2px; }
.convert-card__sub { font-size: 12.5px; color: var(--sd-ink-500); }
.convert-card__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--sd-violet-600); color: #fff;
  border: 1px solid var(--sd-violet-600); border-radius: var(--sd-radius-sm);
  padding: 9px 16px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.convert-card__btn:hover { background: var(--sd-violet-700); border-color: var(--sd-violet-700); }
.convert-card svg.convert-card__btn-ico { width: 15px; height: 15px; }
/* converted state — shows linked order chip */
.convert-card--done { background: var(--sd-green-050); border-color: #BFE0CC; }
.convert-card--done .convert-card__icon { background: var(--sd-green-600); }

/* RM Rate Approval card */
.rmcard {
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-lg);
  background: #fff;
  box-shadow: var(--sd-shadow-md);
  overflow: hidden;
  margin-top: 6px;
}
.rmcard__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sd-line-200);
  background: var(--sd-violet-050);
}
.rmcard__head-title { font-size: 14px; font-weight: 600; color: var(--sd-ink-900); }
.rmcard__head-spacer { flex: 1; }
.rmcard__stage {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sd-line-100);
}
.rmcard__av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--sd-violet-100); color: var(--sd-violet-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.rmcard__who { min-width: 0; flex: 1; }
.rmcard__who-name { font-size: 13px; font-weight: 500; color: var(--sd-ink-900); }
.rmcard__who-role { font-size: 11.5px; color: var(--sd-ink-500); }
.rmcard__when { font-family: var(--sd-mono); font-size: 11px; color: var(--sd-ink-400); white-space: nowrap; }

/* per-line rate matrix */
.rmrate { width: 100%; }
.rmrate__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.9fr;
  gap: 10px;
  padding: 9px 18px;
  align-items: center;
  border-bottom: 1px solid var(--sd-line-100);
  font-size: 12.5px;
}
.rmrate__row.is-head {
  background: var(--sd-bg-soft);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sd-ink-400);
}
.rmrate__sku { font-family: var(--sd-mono); font-size: 11.5px; color: var(--sd-ink-700); }
.rmrate__num { font-family: var(--sd-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--sd-ink-800); }
.rmrate__var { text-align: right; font-family: var(--sd-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.rmrate__var--up { color: var(--sd-red-600); }
.rmrate__var--ok { color: var(--sd-green-600); }
.rmcard__actions {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--sd-bg-softer);
  border-top: 1px solid var(--sd-line-200);
}
.rmcard__btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--sd-radius-sm); padding: 8px 14px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; border: 1px solid transparent;
}
.rmcard__btn svg { width: 14px; height: 14px; }
.rmcard__btn--approve { background: var(--sd-green-600); border-color: var(--sd-green-600); color: #fff; }
.rmcard__btn--approve:hover { background: var(--sd-green-700); }
.rmcard__btn--reject  { background: #fff; border-color: var(--sd-red-600); color: var(--sd-red-600); }
.rmcard__btn--reject:hover { background: var(--sd-red-100); }
.rmcard__btn--revise  { background: #fff; border-color: var(--sd-line-300); color: var(--sd-ink-700); }
.rmcard__btn--revise:hover { background: var(--sd-bg-soft); }
.rmcard__audit { padding: 10px 18px; font-size: 11.5px; color: var(--sd-ink-400); font-family: var(--sd-mono); }
.rmcard__spacer { flex: 1; }

/* "Fulfilled by us" badge on B2B identity card */
.badge--fulfil {
  background: var(--sd-violet-100); color: var(--sd-violet-700);
  border: 1px solid #D8CBEF;
}

/* ============================================================================
   GROUPED DISTRIBUTOR SIDEBAR (.dnav) — the restructured IA
   Wider than the icon rail; group labels + visible sub-items.
   ============================================================================ */
.dnav {
  width: 230px;
  flex-shrink: 0;
  height: 100%;
  background: #fff;
  border-right: 1px solid var(--sd-line-300);
  display: flex;
  flex-direction: column;
  font-family: var(--sd-font);
}
.dnav__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--sd-line-100);
}
.dnav__brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sd-blue-600), var(--sd-teal-600));
  color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center;
}
.dnav__brand-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.dnav__brand-name { font-size: 14px; font-weight: 600; color: var(--sd-ink-900); }
.dnav__brand-tag {
  font-family: var(--sd-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sd-teal-600); font-weight: 500;
}
.dnav__scroll { flex: 1; overflow-y: auto; padding: 10px 0 16px; }
.dnav__scroll::-webkit-scrollbar { width: 8px; }
.dnav__scroll::-webkit-scrollbar-thumb { background: var(--sd-line-200); border-radius: 999px; }

.dnav__group { padding: 4px 0; }
.dnav__group + .dnav__group { border-top: 1px solid var(--sd-line-100); margin-top: 4px; padding-top: 8px; }
.dnav__group-label {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 18px 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--sd-ink-400);
}
.dnav__group-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grp, var(--sd-ink-300)); flex-shrink: 0; }
.dnav__group--purchase { --grp: var(--sd-blue-600); }
.dnav__group--sales    { --grp: var(--sd-green-600); }
.dnav__group--b2b      { --grp: var(--sd-violet-600); }
.dnav__group--disc     { --grp: var(--sd-amber-500); }
.dnav__group--system   { --grp: var(--sd-ink-300); }

.dnav__item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 18px;
  color: var(--sd-ink-700);
  text-decoration: none;
  font-size: 13px;
  position: relative;
  border-left: 3px solid transparent;
  transition: background 120ms ease, color 120ms ease;
}
.dnav__item:hover { background: var(--sd-line-100); color: var(--sd-ink-900); }
.dnav__item-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--sd-ink-400); display: inline-flex; }
.dnav__item-icon svg { width: 18px; height: 18px; }
.dnav__item-label { flex: 1; min-width: 0; }
.dnav__item-badge {
  font-family: var(--sd-mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: var(--sd-ink-400); background: var(--sd-bg-soft);
  border-radius: var(--sd-radius-pill); padding: 1px 7px;
}
.dnav__item--sub { padding-left: 41px; font-size: 12.5px; color: var(--sd-ink-500); }
.dnav__item--sub::before {
  content: ""; position: absolute; left: 25px; top: 0; bottom: 0;
  width: 1px; background: var(--sd-line-200);
}
.dnav__item.is-active {
  background: var(--grp-bg, var(--sd-blue-050));
  color: var(--sd-ink-900);
  font-weight: 600;
  border-left-color: var(--grp, var(--sd-blue-600));
}
.dnav__item.is-active .dnav__item-icon { color: var(--grp, var(--sd-blue-600)); }
.dnav__item.is-active .dnav__item-badge { background: var(--grp, var(--sd-blue-600)); color: #fff; }
.dnav__group--purchase .dnav__item.is-active { --grp: var(--sd-blue-600);   --grp-bg: var(--sd-blue-050); }
.dnav__group--sales    .dnav__item.is-active { --grp: var(--sd-green-600);  --grp-bg: var(--sd-green-050); }
.dnav__group--b2b      .dnav__item.is-active { --grp: var(--sd-violet-600); --grp-bg: var(--sd-violet-050); }
.dnav__group--disc     .dnav__item.is-active { --grp: var(--sd-amber-500);  --grp-bg: var(--sd-amber-100); }
.dnav__group--system   .dnav__item.is-active { --grp: var(--sd-ink-500);    --grp-bg: var(--sd-line-100); }

/* B2B group is toggle-gated */
.dnav__group--b2b { display: none; }
body[data-b2b="on"] .dnav__group--b2b { display: block; animation: dnavReveal 180ms ease; }
@keyframes dnavReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* violet KPI segment + view-chip dot (extend console.css families) */
.kpiseg--violet { --kpiseg-accent: var(--sd-violet-600); }
.kpiseg--violet .kpiseg__spark { color: var(--sd-violet-600); }
.view-chip__dot--violet { background: var(--sd-violet-600); }

.dnav__version {
  padding: 10px 18px;
  border-top: 1px solid var(--sd-line-100);
  font-family: var(--sd-mono); font-size: 10.5px; color: var(--sd-teal-600);
}

/* ============================================================================
   B2B-MODE TOGGLE WIDGET (topbar) + active pill
   ============================================================================ */
.b2b-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-pill);
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.b2b-toggle:hover { border-color: var(--sd-violet-600); }
.b2b-toggle__label { font-size: 12px; font-weight: 500; color: var(--sd-ink-700); white-space: nowrap; }
.b2b-toggle__sw {
  position: relative; width: 34px; height: 18px; border-radius: 999px;
  background: var(--sd-line-300); transition: background 150ms ease; flex-shrink: 0;
}
.b2b-toggle__sw::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform 150ms ease;
}
body[data-b2b="on"] .b2b-toggle__sw { background: var(--sd-violet-600); }
body[data-b2b="on"] .b2b-toggle__sw::after { transform: translateX(16px); }
body[data-b2b="on"] .b2b-toggle { border-color: var(--sd-violet-600); }

.b2b-mode-pill {
  display: none;
  align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--sd-radius-pill);
  background: var(--sd-violet-100); color: var(--sd-violet-700);
  border: 1px solid #D8CBEF;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.b2b-mode-pill svg { width: 13px; height: 13px; }
body[data-b2b="on"] .b2b-mode-pill { display: inline-flex; }

/* category-level quotation line table = reuse pid__grid but 6 sane cols.
   override the grid template on the quotation page via a scoped class. */
.qgrid .pid__head,
.qgrid .lrow,
.qgrid .pid__totals {
  grid-template-columns: 2.4fr 1fr 0.7fr 1fr 1.2fr 2fr;
}

/* ============================================================================
   EXTRA CONSOLE COLUMNS  ·  Sales/B2B lists
   Defined for head + row + totals exactly like console.css so widths align.
   ============================================================================ */
.cons__head .th--cust,   .row .td--cust,   .cons__totals .td--cust   { flex: 1 1 0; min-width: 160px; }
.cons__head .th--ctype,  .row .td--ctype,  .cons__totals .td--ctype  { flex: 0 0 122px; }
.cons__head .th--person, .row .td--person, .cons__totals .td--person { flex: 0 0 118px; }
.cons__head .th--pill,   .row .td--pill,   .cons__totals .td--pill   { flex: 0 0 138px; }
.cons__head .th--ref,    .row .td--ref,    .cons__totals .td--ref    { flex: 0 0 150px; }
.cons__head .th--rm,     .row .td--rm,     .cons__totals .td--rm     { flex: 0 0 140px; }
.cons__head .th--attach, .row .td--attach, .cons__totals .td--attach { flex: 0 0 104px; }
.cons__head .th--conv,   .row .td--conv,   .cons__totals .td--conv   { flex: 0 0 120px; }
.cons__head .th--amt,    .row .td--amt,    .cons__totals .td--amt    { flex: 0 0 118px; text-align: right; }
.cons__head .th--qtyu,   .row .td--qtyu,   .cons__totals .td--qtyu   { flex: 0 0 112px; text-align: right; }
.cons__head .th--amt.is-sortable,
.cons__head .th--qtyu.is-sortable { justify-content: flex-end; }
.row .td--ref { font-family: var(--sd-mono); font-size: 11.5px; color: var(--sd-ink-700); }
.row .td--amt .amt { font-family: var(--sd-mono); font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--sd-ink-900); }
.row .td--qtyu { font-family: var(--sd-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--sd-ink-700); }
/* customer cell: name + code sub-line (mirrors branch cell) */
.cust__name { display:block; font-size: 13.5px; color: var(--sd-ink-900); font-weight: 500; line-height: 1.25; }
.cust__code { display:block; font-family: var(--sd-mono); font-size: 11px; color: var(--sd-ink-400); }
.ctype-tag {
  display:inline-flex; align-items:center; height:20px; padding:0 8px;
  border-radius: var(--sd-radius-sm); font-size: 11px; font-weight: 500;
  background: var(--sd-bg-soft); color: var(--sd-ink-600, var(--sd-ink-500)); border:1px solid var(--sd-line-200);
  white-space: nowrap;
}
.ctype-tag--retail { background: var(--sd-green-050); color: var(--sd-green-700); border-color:#BFE0CC; }
.ctype-tag--project{ background: var(--sd-violet-050); color: var(--sd-violet-700); border-color:#D8CBEF; }

/* ============================================================================
   ICON-RAIL FLYOUT  ·  self-contained copy of the production .fly control
   (mirrors css/v12.css so the new screens need only app.css + this file)
   ============================================================================ */
.rail__item[data-flyout] { position: relative; }
.rail__item[data-flyout]::after {
  content: ''; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--sd-line-300);
  transition: background .12s ease;
}
.rail__item[data-flyout]:hover::after,
.rail__item[data-flyout].is-trigger-hot::after,
.rail__item--active[data-flyout]::after { background: var(--sd-blue-600); }

/* Sales / B2B rail active accents */
.rail__item--sales.rail__item--active { color: var(--sd-green-700); }
.rail__item--sales.rail__item--active .rail__icon { color: var(--sd-green-600); }
.rail__item--b2b.rail__item--active { color: var(--sd-violet-700); }
.rail__item--b2b.rail__item--active .rail__icon { color: var(--sd-violet-600); }

/* B2B rail item is gated by B2B mode */
.rail__item--b2b { display: none; }
body[data-b2b="on"] .rail__item--b2b { display: flex; }

.fly {
  position: fixed; width: 296px; z-index: 200;
  background: #fff; border: 1px solid var(--sd-line-300); border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-md); padding: 10px;
  opacity: 0; transform: translateX(-6px); pointer-events: none;
  transition: opacity .14s ease-out, transform .14s ease-out;
}
.fly.is-open { opacity: 1; transform: translateX(0); pointer-events: auto; }
.fly::before {
  content: ''; position: absolute; left: -7px; top: 22px;
  width: 12px; height: 12px; background: #fff;
  border-left: 1px solid var(--sd-line-300); border-bottom: 1px solid var(--sd-line-300);
  transform: rotate(45deg);
}
.fly__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--sd-line-100); }
.fly__eyebrow { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--sd-ink-400); }
.fly__count { font-family: var(--sd-mono); font-size: 10.5px; color: var(--sd-ink-400); background: var(--sd-bg-soft); border-radius: var(--sd-radius-pill); padding: 1px 7px; }
.fly__item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; border-radius: var(--sd-radius-md); text-decoration: none; color: var(--sd-ink-700); position: relative; }
.fly__item-icon { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; background: var(--sd-bg-soft); color: var(--sd-ink-500); display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease, color .12s ease; }
.fly__item-icon svg { width: 16px; height: 16px; }
.fly__item-body { min-width: 0; flex: 1; }
.fly__item-label { display: block; font-size: 13.5px; font-weight: 500; color: var(--sd-ink-900); line-height: 1.3; }
.fly__item-sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--sd-ink-400); }
.fly__item-meta { margin-left: 8px; font-family: var(--sd-mono); font-size: 11px; color: var(--sd-ink-400); padding-top: 2px; }
.fly__item:hover { background: var(--sd-blue-050); color: var(--sd-ink-900); }
.fly__item:hover .fly__item-icon { background: var(--sd-blue-100); color: var(--sd-blue-600); }
.fly__foot { margin-top: 4px; padding: 8px 10px 6px; border-top: 1px solid var(--sd-line-100); font-size: 11px; color: var(--sd-ink-400); }

/* ============================================================================
   DETAIL LINE-TABLE  ·  extra columns for Retail/B2B order & invoice lines
   (extend the .pid__grid column set; mono/right like the others)
   ============================================================================ */
.pid__head .th--mrp,    .pid__rows .td--mrp    { flex: 0 0 84px; text-align: right; }
.pid__head .th--price,  .pid__rows .td--price  { flex: 0 0 86px; text-align: right; }
.pid__head .th--disc,   .pid__rows .td--disc   { flex: 0 0 96px; text-align: right; }
.pid__head .th--scheme, .pid__rows .td--scheme { flex: 0 0 104px; }
.pid__head .th--ovr,    .pid__rows .td--ovr    { flex: 0 0 100px; text-align: right; }
.pid__head .th--sub,    .pid__rows .td--sub    { flex: 0 0 100px; text-align: right; }
.pid__head .th--mrp.is-sortable, .pid__head .th--price.is-sortable { justify-content: flex-end; }
.pid__rows .td--mrp, .pid__rows .td--price, .pid__rows .td--sub, .pid__rows .td--ovr {
  font-family: var(--sd-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--sd-ink-800);
}
.pid__rows .td--mrp { color: var(--sd-ink-400); text-decoration: line-through; text-decoration-thickness: 1px; }
.pid__rows .td--disc { font-family: var(--sd-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--sd-green-700); text-align: right; }
.pid__rows .td--scheme { font-size: 11.5px; }
.scheme-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  border-radius: var(--sd-radius-xs); font-size: 10.5px; font-weight: 500;
  background: var(--sd-green-050); color: var(--sd-green-700); border: 1px solid #BFE0CC;
  white-space: nowrap;
}
.scheme-tag--none { background: transparent; border-color: transparent; color: var(--sd-ink-300); }
/* totals strip on the right of detail bottom row */
.tstrip { display: flex; flex-direction: column; gap: 0; }
.tstrip__row { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--sd-line-200); font-size: 13px; }
.tstrip__row:last-child { border-bottom: none; }
.tstrip__row .lbl { color: var(--sd-ink-500); }
.tstrip__row .val { font-family: var(--sd-mono); font-variant-numeric: tabular-nums; color: var(--sd-ink-900); font-weight: 500; }
.tstrip__row--muted .val { color: var(--sd-ink-500); font-weight: 400; }
.tstrip__row--disc .val { color: var(--sd-green-700); }
.tstrip__row--grand { border-top: 2px solid var(--sd-ink-900); border-bottom: none; margin-top: 4px; padding-top: 10px; }
.tstrip__row--grand .lbl { font-weight: 600; color: var(--sd-ink-900); }
.tstrip__row--grand .val { font-size: 16px; font-weight: 600; }
.tstrip__meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--sd-ink-400); font-family: var(--sd-mono); }