/* ============================================================
   B2B Cabinet styles
   ============================================================ */

.screen.b2b {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 32px 80px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* ── Header ──────────────────────────────────────────────── */
.b2b-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 28px 32px;
  border-radius: var(--r-2xl);
}
.b2b-mgr {
  text-align: right;
  border-left: 0.5px solid var(--stroke-1);
  padding-left: 28px;
  min-width: 240px;
}
.b2b-tier {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(143, 163, 186, 0.22), rgba(143, 163, 186, 0.08));
  border: 0.5px solid rgba(143, 163, 186, 0.4);
  color: #b9c6d6;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── KPI cards ───────────────────────────────────────────── */
.b2b-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.b2b-kpi {
  padding: 18px 20px;
  border-radius: var(--r-xl);
  position: relative;
}
.b2b-kpi-ic {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}

/* ── Credit line ─────────────────────────────────────────── */
.b2b-credit {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  border-radius: var(--r-xl);
}
.b2b-credit-bar {
  height: 8px;
  background: var(--stroke-1);
  border-radius: 999px;
  overflow: hidden;
}
.b2b-credit-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(79, 101, 128, 0.45);
}

/* ── Tabs ────────────────────────────────────────────────── */
.b2b-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--glass-1);
  border: 0.5px solid var(--stroke-1);
  border-radius: var(--r-pill);
  width: fit-content;
  margin-top: 4px;
}
.b2b-tab {
  background: transparent;
  border: 0;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.b2b-tab:hover { color: var(--fg); }
.b2b-tab.is-active {
  background: var(--glass-3);
  color: var(--fg);
  box-shadow: inset 0 0.5px 0 var(--sheen);
}

/* ── Filter row ──────────────────────────────────────────── */
.b2b-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Order rows ──────────────────────────────────────────── */
.b2b-orders-wrap { display: flex; flex-direction: column; gap: 14px; }
.b2b-orders { display: flex; flex-direction: column; gap: 12px; }
.b2b-order {
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color 0.15s;
}
.b2b-order.is-open { border-color: var(--stroke-3); }
.b2b-order-main {
  display: grid;
  grid-template-columns: 120px 1fr 200px 200px 36px;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
}
.b2b-order-photo {
  width: 120px; height: 80px;
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  border: 0.5px solid var(--stroke-1);
}
.b2b-flag {
  position: absolute;
  top: 6px; left: 6px;
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  color: #fff;
}
.b2b-order-info { min-width: 0; }
.b2b-order-status { text-align: left; }
.b2b-order-total { text-align: right; }
.b2b-order-toggle {
  background: transparent;
  border: 0;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  cursor: pointer;
}
.b2b-order-toggle:hover { background: var(--glass-2); color: var(--fg); }

/* ── Status badge ────────────────────────────────────────── */
.b2b-status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  border: 0.5px solid;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
}
.b2b-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

/* ── Tracker ─────────────────────────────────────────────────
   Geometry: stages laid on a 7-column grid (1fr each), so each
   stage center sits at (i + 0.5) / 7 of the row width.
   The line + fill are inset by half a column on each side so
   they begin under the first dot center and end under the last.
   The fill width is then mapped from progress (0..1) to the
   space BETWEEN those two anchors — so progress 1.0 fills to
   the last dot exactly, and 0 starts at the first dot.        */
.b2b-tracker {
  --tk-cols: 7;
  --tk-half: calc(50% / var(--tk-cols));   /* half of one column */
  padding: 14px 18px 14px;
  position: relative;
}
.b2b-tracker-line {
  height: 3px;
  background: var(--stroke-1);
  border-radius: 999px;
  position: relative;
  /* Anchor between first and last dot centers */
  margin: 4px var(--tk-half) 12px;
}
.b2b-tracker-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  border-radius: 999px;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(79, 101, 128, 0.45);
}
.b2b-tracker-stages {
  display: grid;
  grid-template-columns: repeat(var(--tk-cols), 1fr);
  align-items: start;
}
.b2b-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--fg-faint);
  position: relative;
  padding: 0 2px;
  min-width: 0;
}
.b2b-stage-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1.5px solid var(--stroke-2);
  /* Pull the dot up so its center sits ON the line (line is 3px tall,
     line bottom = top of stages row + 12px gap. We rise 17px to hit center) */
  margin-top: -17px;
  position: relative;
  z-index: 1;
  transition: all 0.2s;
  flex-shrink: 0;
}
.b2b-stage.is-done { color: var(--fg-muted); }
.b2b-stage.is-current .b2b-stage-dot {
  width: 14px; height: 14px;
  margin-top: -19px;   /* keep center on the line as size grew */
  box-shadow: 0 0 0 4px rgba(79, 101, 128, 0.22), 0 0 12px currentColor;
}
.b2b-stage.is-current { color: var(--fg); font-weight: 600; }
.b2b-stage-label {
  font-size: 10.5px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Order detail ────────────────────────────────────────── */
.b2b-order-detail {
  border-top: 0.5px solid var(--stroke-1);
  padding: 20px 24px;
  background: rgba(0,0,0,0.12);
}
.b2b-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.b2b-detail-col { display: flex; flex-direction: column; gap: 4px; }
.b2b-detail-col .t-eyebrow { margin-bottom: 8px; }

.b2b-pricerow {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 0.5px solid var(--stroke-1);
}
.b2b-pricerow:first-of-type { padding-top: 4px; }
.b2b-pricerow-vat span:first-child,
.b2b-pricerow-disc span:first-child { color: var(--fg-muted); }
.b2b-pricerow-total {
  margin-top: 6px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--stroke-2);
  border-bottom: 0;
  font-weight: 600;
  font-size: 16px;
}
.b2b-pricerow-total .t-tnum { font-size: 18px; }

.b2b-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--glass-1);
  border: 0.5px solid var(--stroke-1);
  margin-bottom: 6px;
  color: var(--fg-muted);
}
.b2b-doc:hover { background: var(--glass-2); color: var(--fg); }

.b2b-note {
  font-size: 12px;
  color: var(--fg-muted);
  padding: 10px 12px;
  background: var(--glass-1);
  border-radius: var(--r-md);
  border-left: 2px solid var(--brand-500);
  margin-top: 8px;
}

/* ── Pricing ─────────────────────────────────────────────── */
.b2b-pricing { display: flex; flex-direction: column; gap: 18px; }
.b2b-pricing-tiers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.b2b-tier-card {
  padding: 20px;
  border-radius: var(--r-xl);
  position: relative;
  --tc: #71717a;
}
.b2b-tier-card.is-current {
  border-color: var(--tc);
  box-shadow: 0 0 0 1px var(--tc), 0 12px 40px rgba(143, 163, 186, 0.22);
}
.b2b-tier-now {
  position: absolute;
  top: -10px; left: 16px;
  background: var(--tc);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.b2b-tier-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--stroke-1);
  font-size: 11px;
  color: var(--fg-muted);
}

.b2b-rates { padding: 20px 24px; border-radius: var(--r-xl); }
.b2b-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
}
.b2b-table th, .b2b-table td {
  text-align: left;
  padding: 10px 8px;
  font-size: 13px;
  border-bottom: 0.5px solid var(--stroke-1);
}
.b2b-table th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}
.b2b-table tbody tr:hover { background: var(--glass-1); }

.b2b-vat { padding: 20px 24px; border-radius: var(--r-xl); }
.b2b-vat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.b2b-vat-card {
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--glass-1);
  border: 0.5px solid var(--stroke-1);
}

/* ── New order ───────────────────────────────────────────── */
.b2b-new {
  padding: 28px 32px;
  border-radius: var(--r-2xl);
}
.b2b-new-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.b2b-country {
  background: var(--glass-1);
  border: 0.5px solid var(--stroke-1);
  border-radius: var(--r-xl);
  padding: 24px 18px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}
.b2b-country:hover {
  background: var(--glass-2);
  border-color: var(--stroke-3);
  transform: translateY(-2px);
}

/* ── Docs ────────────────────────────────────────────────── */
.b2b-docs {
  padding: 24px;
  border-radius: var(--r-xl);
}
.b2b-docs-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

/* ── Analytics ───────────────────────────────────────────── */
.b2b-analytics {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
}
.b2b-chart {
  padding: 22px 26px;
  border-radius: var(--r-xl);
}
.b2b-bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  height: 200px;
  align-items: end;
  margin-top: 24px;
}
.b2b-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: end;
}
.b2b-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  border-radius: 6px 6px 2px 2px;
  min-height: 8px;
  box-shadow: 0 0 12px rgba(79, 101, 128, 0.28);
  transition: opacity 0.15s;
}
.b2b-bar:hover { opacity: 0.85; }

.b2b-analytics-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.b2b-stat {
  padding: 18px 20px;
  border-radius: var(--r-xl);
}
.b2b-topbrand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--stroke-1);
}
.b2b-topbrand:last-child { border-bottom: 0; }
.b2b-topbar {
  flex: 1;
  height: 6px;
  background: var(--stroke-1);
  border-radius: 999px;
  overflow: hidden;
}
.b2b-topbar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  border-radius: 999px;
}

/* ── Responsive squish ───────────────────────────────────── */
@media (max-width: 1280px) {
  .b2b-kpis { grid-template-columns: repeat(2, 1fr); }
  .b2b-pricing-tiers { grid-template-columns: repeat(3, 1fr); }
  .b2b-vat-grid { grid-template-columns: repeat(2, 1fr); }
  .b2b-new-grid { grid-template-columns: repeat(2, 1fr); }
  .b2b-analytics { grid-template-columns: 1fr; }
  .b2b-order-main { grid-template-columns: 100px 1fr 160px 160px 36px; }
}