/* ============================================================
   Vendor self-service portal — sibling of the Acquire PO console.
   Responsive (no scale transform). Namespaced under .vd-browser.
   ============================================================ */
.vd-browser {
  position: relative;
  background: var(--bg-pure-white);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.7), 0 30px 60px -40px rgba(233,78,27,0.2);
  font-family: 'Hanken Grotesk', sans-serif;
}

/* ---- browser chrome: light grey frame ---- */
.vd-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #E8E8E8; border-bottom: 1px solid rgba(30,34,41,0.08); }
.vd-tl { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.vd-tl.red { background: #FF5F57; }
.vd-tl.yellow { background: #FEBC2E; }
.vd-tl.green { background: #28C840; }
.vd-url {
  margin-left: 12px; flex: 0 1 320px; display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 8px; background: #fff; border: 1px solid rgba(30,34,41,0.08);
  font-size: 11.5px; color: #6b7280; font-weight: 500;
}
.vd-url svg { width: 12px; height: 12px; color: #9aa1ac; flex: none; }

.vd-app { background: var(--bg-pure-white); }

/* ---- header bar ---- */
.vd-top { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 16px 24px; border-bottom: 1px solid var(--border-muted-light); }
.vd-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.vd-logo { height: 36px; width: auto; display: block; flex: none; }
.vd-mono { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--orange-tint); color: var(--orange); font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 15px; letter-spacing: -0.02em; }
.vd-brand-name { font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--px-ink); white-space: nowrap; }

.vd-nav { display: flex; align-items: center; gap: 24px; }
.vd-nav span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--px-slate); white-space: nowrap; }
.vd-nav span svg { width: 16px; height: 16px; color: var(--px-muted); flex: none; }
.vd-nav span.active { color: var(--orange); }
.vd-nav span.active svg { color: var(--orange); }

.vd-top-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.vd-newwo { display: inline-flex; align-items: center; gap: 7px; background: #E8521A; color: #fff; font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 10px 15px; white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(232,82,26,0.7); }
.vd-newwo svg { width: 13px; height: 13px; flex: none; }
.vd-vendor-sel { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border-muted-light); border-radius: 8px; padding: 9px 13px; font-size: 12.5px; font-weight: 600; color: var(--px-ink); white-space: nowrap; }
.vd-vendor-sel svg { width: 14px; height: 14px; color: var(--px-muted); flex: none; }

/* ---- status cards ---- */
.vd-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 20px 24px 6px; }
.vd-kpi { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; border: 1px solid var(--border-muted-light); border-radius: 12px; padding: 15px 16px; background: var(--bg-pure-white); }
.vd-kpi.active { border: 2px solid #E8521A; padding: 14px 15px; }
.vd-kpi-ic { display: grid; place-items: center; flex: none; }
.vd-kpi-ic svg { width: 20px; height: 20px; color: var(--px-slate); }
.vd-kpi.active .vd-kpi-ic svg { color: #E8521A; }
.vd-kpi-lbl { font-size: 13px; font-weight: 600; color: var(--px-slate); }
.vd-kpi-v { margin-left: auto; font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -0.03em; color: var(--px-ink); }

/* ---- main: work orders + activity ---- */
.vd-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; padding: 18px 24px 26px; }
.vd-card { background: var(--bg-pure-white); border: 1px solid var(--border-muted-light); border-radius: 14px; overflow: hidden; }

.vd-card-head { display: flex; align-items: center; gap: 13px; padding: 18px 20px 14px; }
.vd-accent { width: 5px; height: 20px; background: var(--orange); border-radius: 3px; flex: none; }
.vd-card-head h3 { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 16px; letter-spacing: -0.01em; color: var(--px-ink); margin: 0; white-space: nowrap; }
.vd-card-sub { margin-left: auto; font-size: 11px; color: var(--px-muted); font-weight: 500; }

.vd-table-wrap { overflow-x: auto; }
.vd-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.vd-table thead th { background: var(--bg-subtle-gray); text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--px-muted); padding: 11px 9px; white-space: nowrap; }
.vd-table thead th:first-child { padding-left: 20px; }
.vd-table thead th:last-child { padding-right: 20px; }
.vd-table tbody td { font-size: 12px; color: var(--px-slate); padding: 15px 9px; border-top: 1px solid var(--border-muted-light); white-space: nowrap; }
.vd-table tbody td:first-child { padding-left: 20px; }
.vd-table tbody td:last-child { padding-right: 20px; }
.vd-table .wo-id { font-weight: 700; color: var(--px-ink); }
.vd-table .wo-reg { font-weight: 600; color: var(--px-ink); letter-spacing: 0.02em; }
.vd-table .wo-cost { font-family: 'Satoshi', sans-serif; font-weight: 700; color: var(--px-ink); }
.vd-table .wt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--px-ink); }
.vd-table .wt svg { width: 16px; height: 16px; color: var(--px-muted); flex: none; }

.vd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; }
.vd-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.vd-chip.warn { background: var(--px-warn-bg); color: var(--px-warn); }
.vd-chip.warn::before { background: var(--px-warn); }
.vd-chip.info { background: var(--px-info-bg); color: var(--px-info); }
.vd-chip.info::before { background: var(--px-info); }
.vd-chip.ok { background: var(--px-ok-bg); color: var(--px-ok); }
.vd-chip.ok::before { background: var(--px-ok); }

/* ---- activity feed ---- */
.vd-act-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.vd-act-head h3 { font-family: 'Satoshi', sans-serif; font-weight: 900; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); margin: 0; }
.vd-act-date { font-size: 11.5px; font-weight: 600; color: var(--px-slate); white-space: nowrap; }
.vd-act-body { padding: 6px 20px 18px; }
.vd-act-item { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--border-muted-light); }
.vd-act-item:first-child { border-top: none; }
.vd-act-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; }
.vd-act-dot.ok { background: var(--px-ok); box-shadow: 0 0 0 3px rgba(21,128,61,0.13); }
.vd-act-dot.amber { background: var(--px-warn); box-shadow: 0 0 0 3px rgba(180,83,9,0.13); }
.vd-act-dot.blue { background: var(--px-info); box-shadow: 0 0 0 3px rgba(29,95,180,0.13); }
.vd-act-text { font-size: 12px; color: var(--px-slate); line-height: 1.4; }
.vd-act-text b { font-weight: 700; color: var(--px-ink); }
.vd-act-text .t { display: block; font-size: 10.5px; color: var(--px-muted); margin-top: 2px; }

/* ---- single full-width work orders panel ---- */
.vd-main.vd-main--solo { grid-template-columns: 1fr; }
.vd-main.vd-main--solo .vd-table { min-width: 0; }
/* keep the card a clean rectangle — no scrollbar chrome (only trailing
   padding ever sits past the edge at narrow widths) */
.vd-main.vd-main--solo .vd-table-wrap { scrollbar-width: none; -ms-overflow-style: none; }
.vd-main.vd-main--solo .vd-table-wrap::-webkit-scrollbar { display: none; }
.vd-main.vd-main--solo .vd-table thead th,
.vd-main.vd-main--solo .vd-table tbody td { padding-left: 7px; padding-right: 7px; }
.vd-main.vd-main--solo .vd-table thead th:first-child,
.vd-main.vd-main--solo .vd-table tbody td:first-child { padding-left: 20px; }
.vd-main.vd-main--solo .vd-table thead th:last-child,
.vd-main.vd-main--solo .vd-table tbody td:last-child { padding-right: 20px; }

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .vd-main { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .vd-top { flex-wrap: wrap; gap: 16px; }
  .vd-nav { order: 3; width: 100%; gap: 18px; }
  .vd-top-actions { margin-left: auto; }
  .vd-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .vd-kpis { grid-template-columns: repeat(2, 1fr); }
  .vd-nav span svg { display: none; }
}

/* ============================================================
   Tooltip placement — straddle the window's left/right edges,
   fully visible inside the dark band (matches Acquire PO console).
   The window is narrowed so there are side gutters for the cards
   to hang into, so nothing is clipped by the section's overflow.
   ============================================================ */
.pxc-stage.pxc-stage--vendor { max-width: 900px; margin-left: auto; margin-right: auto; }
.pxc-stage--vendor .pxc { max-width: 236px; }
.pxc-stage--vendor .pxc.pxc-tl { top: 22%; left: -104px; right: auto; }
.pxc-stage--vendor .pxc.pxc-tr { top: 13%; right: -104px; left: auto; }

/* Mid widths: window fills the wrap, so tuck the overhang into the
   48px wrap padding while keeping both cards fully on-canvas. */
@media (max-width: 1180px) {
  .pxc-stage.pxc-stage--vendor { max-width: 100%; }
  .pxc-stage--vendor .pxc.pxc-tl { left: -32px; }
  .pxc-stage--vendor .pxc.pxc-tr { right: -32px; }
}
/* Narrow: callouts restack into a static grid (base .pxc rule) — let
   them go full width again. */
@media (max-width: 920px) {
  .pxc-stage--vendor .pxc { max-width: none; }
}