/* ============================================================
   Portal 3 — Dashboard 2
   Mirror of the portal dashboard structure rendered with the
   portal3 token system. Keep monochrome — accent + muted only.
   ============================================================ */

.dash2 .dash {
  padding: 8px 32px 40px;
}

/* Section wrapper + title */
.dash2 .dash-section + .dash-section { margin-top: 8px; }
.dash2 .dash-section-h {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 10px;
}

/* ---------- KPI cards with icon ---------- */
.dash2 .kpi--icon {
  padding: 14px 16px;
  gap: 10px;
}
.dash2 .kpi--icon .kpi-row-h {
  gap: 12px;
  align-items: center;
}
.dash2 .kpi-ico {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent) 10%, var(--paper));
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--line));
  flex-shrink: 0;
}
/* Variants intentionally collapsed to the neutral accent look —
   the user prefers the portal3 monochrome style. */
.dash2 .kpi-ico--blue,
.dash2 .kpi-ico--cyan,
.dash2 .kpi-ico--green,
.dash2 .kpi-ico--purple,
.dash2 .kpi-ico--yellow,
.dash2 .kpi-ico--red {
  background: color-mix(in oklab, var(--accent) 10%, var(--paper));
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 18%, var(--line));
}

.dash2 .kpi-text {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash2 .kpi-text .kpi-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.dash2 .kpi-text .kpi-val {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
  margin-top: 4px;
  color: var(--ink);
}
.dash2 .kpi-val--danger  { color: var(--bad); }
.dash2 .kpi-val--warning { color: var(--assigned); }
.dash2 .kpi-val-suffix {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}

.dash2 .kpi-footer-row {
  display: flex; align-items: baseline;
  gap: 8px;
  font-size: 12px;
  margin-top: 2px;
}
.dash2 .kpi-trend {
  font-family: var(--font-mono);
  font-size: 12px;
}
.dash2 .kpi-trend.up   { color: var(--good); }
.dash2 .kpi-trend.down { color: var(--bad); }
.dash2 .kpi-trend.neutral { color: var(--muted); }
.dash2 .kpi-vs {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.dash2 .stock-breakdown {
  display: flex; gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.dash2 .stock-breakdown .count { color: var(--ink); font-weight: 700; }
.dash2 .stock-breakdown .count--available { color: var(--good); }
.dash2 .stock-breakdown .count--reserved  { color: var(--assigned); }

/* ---------- Card row grids ---------- */
.dash2 .grid-25-45-30 {
  display: grid;
  grid-template-columns: 25% 1fr 30%;
  gap: 14px;
}
.dash2 .grid-equal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.dash2 .grid-3-equal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) {
  .dash2 .grid-25-45-30 { grid-template-columns: 1fr; }
}

/* ---------- Pipeline stages (Inquiry Pipeline + Revenue rows) ---------- */
.dash2 .pipeline-stage,
.dash2 .revenue-row {
  margin-bottom: 14px;
}
.dash2 .pipeline-stage:last-child,
.dash2 .revenue-row:last-child { margin-bottom: 0; }
.dash2 .pipeline-stage-head,
.dash2 .revenue-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
  font-size: 13px;
}
.dash2 .pipeline-stage-head .lbl,
.dash2 .revenue-row-head .lbl { font-weight: 500; color: var(--ink-2); }
.dash2 .pipeline-stage-head .ct {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 14px;
  color: var(--ink);
}
.dash2 .pipeline-stage-head .ct.danger  { color: var(--bad); }
.dash2 .pipeline-stage-head .ct.warn    { color: var(--assigned); }
.dash2 .pipeline-stage-head .ct.primary { color: var(--accent); }
.dash2 .pipeline-stage-head .ct.muted   { color: var(--muted); }
.dash2 .revenue-row-head .vals {
  display: inline-flex; align-items: baseline; gap: 8px;
}
.dash2 .revenue-row-head .vals b {
  font-family: var(--font-display);
  font-weight: 700; color: var(--ink);
}
.dash2 .revenue-row-head .vals .pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.dash2 .progress {
  height: 6px;
  background: var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.dash2 .progress .fill {
  height: 100%;
  background: var(--accent);
  border-radius: 0;
}
.dash2 .progress .fill.danger,
.dash2 .progress .fill.warn,
.dash2 .progress .fill.primary,
.dash2 .progress .fill.grey,
.dash2 .progress .fill.violet,
.dash2 .progress .fill.violet-mid,
.dash2 .progress .fill.violet-light {
  background: var(--accent);
}
.dash2 .progress .fill.danger { background: var(--bad); }
.dash2 .progress .fill.warn   { background: var(--assigned); }
.dash2 .progress .fill.grey   { background: var(--muted); }
/* Revenue chart variants reuse accent at decreasing opacity so the
   stack stays monochrome. */
.dash2 .progress .fill.violet       { background: color-mix(in oklab, var(--accent) 75%, transparent); }
.dash2 .progress .fill.violet-mid   { background: color-mix(in oklab, var(--accent) 55%, transparent); }
.dash2 .progress .fill.violet-light { background: color-mix(in oklab, var(--accent) 35%, transparent); }

.dash2 .pipeline-summary,
.dash2 .revenue-summary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between;
  font-size: 13px;
}
.dash2 .pipeline-summary .muted { color: var(--muted); }
.dash2 .pipeline-summary b { font-family: var(--font-display); font-weight: 700; }
.dash2 .revenue-summary {
  font-weight: 700;
  font-family: var(--font-display);
}

/* ---------- Client engagement table (in-card table) ---------- */
.dash2 .ce-table,
.dash2 .table-stacked,
.dash2 .table-ranked,
.dash2 .simple-table {
  width: 100%;
  border-collapse: collapse;
}
.dash2 .ce-table th,
.dash2 .table-stacked th,
.dash2 .table-ranked th,
.dash2 .simple-table th {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-2);
  white-space: nowrap;
}
.dash2 .ce-table th.center,
.dash2 .table-stacked th.center,
.dash2 .table-ranked th.center,
.dash2 .simple-table th.center { text-align: center; }
.dash2 .ce-table th.right,
.dash2 .table-stacked th.right,
.dash2 .table-ranked th.right,
.dash2 .simple-table th.right { text-align: right; }
.dash2 .ce-table td,
.dash2 .table-stacked td,
.dash2 .table-ranked td,
.dash2 .simple-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  vertical-align: top;
}
.dash2 .ce-table tr:last-child td,
.dash2 .table-stacked tr:last-child td,
.dash2 .table-ranked tr:last-child td,
.dash2 .simple-table tr:last-child td { border-bottom: 0; }
.dash2 .ce-table td.center,
.dash2 .table-ranked td.center,
.dash2 .simple-table td.center {
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.dash2 .ce-table td.right,
.dash2 .table-stacked td.right,
.dash2 .table-ranked td.right,
.dash2 .simple-table td.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash2 .ce-table .client-name { font-weight: 600; font-size: 13px; }
.dash2 .ce-table .client-last {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Stacked cell (primary line + small sub line) */
.dash2 .cell-pri { display: block; font-weight: 600; font-size: 13px; }
.dash2 .cell-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Ranked table — rank cell */
.dash2 .table-ranked .rank {
  width: 24px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
}

/* qty + revenue stack used in product tables */
.dash2 .qty-stack {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  gap: 1px;
}
.dash2 .qty-stack .qty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}
.dash2 .qty-stack .qty-lbl {
  color: var(--muted);
  margin-right: 4px;
}
.dash2 .qty-stack .rev {
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  color: var(--ink);
}
.dash2 .qty-stack .idle-danger {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bad);
  font-weight: 600;
}
.dash2 .qty-stack .idle-warn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--assigned);
  font-weight: 600;
}

/* ---------- Funnel rows (Promotions card) ---------- */
.dash2 .funnel-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}
.dash2 .funnel-row:last-child { border-bottom: 0; }
.dash2 .funnel-row .lbl { font-weight: 500; color: var(--ink-2); }
.dash2 .funnel-row .vals {
  display: inline-flex; align-items: baseline; gap: 8px;
}
.dash2 .funnel-row .num {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  color: var(--ink);
}
.dash2 .funnel-row .pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.dash2 .funnel-row .num.primary,
.dash2 .funnel-row .pct.primary { color: var(--accent); }
.dash2 .funnel-row .num.good,
.dash2 .funnel-row .pct.good    { color: var(--good); }
.dash2 .funnel-row .num.warn,
.dash2 .funnel-row .pct.warn    { color: var(--assigned); }

/* ---------- Badges (status pills inside cards) ---------- */
.dash2 .badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  white-space: nowrap;
}
.dash2 .badge.dot::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: var(--radius);
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}
.dash2 .badge.success {
  color: var(--good);
  border-color: color-mix(in oklab, var(--good) 25%, transparent);
  background: color-mix(in oklab, var(--good) 8%, transparent);
}
.dash2 .badge.info {
  color: var(--transit);
  border-color: color-mix(in oklab, var(--transit) 25%, transparent);
  background: color-mix(in oklab, var(--transit) 8%, transparent);
}
.dash2 .badge.warn {
  color: var(--assigned);
  border-color: color-mix(in oklab, var(--assigned) 25%, transparent);
  background: color-mix(in oklab, var(--assigned) 8%, transparent);
}
.dash2 .badge.danger {
  color: var(--bad);
  border-color: color-mix(in oklab, var(--bad) 25%, transparent);
  background: color-mix(in oklab, var(--bad) 8%, transparent);
}
.dash2 .badge.neutral {
  color: var(--muted);
}

/* ============================================================
   Sample-specific components
   ============================================================ */

/* ---------- Sample A — Composite themed cards ---------- */
.dash2 .composite-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) {
  .dash2 .composite-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dash2 .composite-row { grid-template-columns: 1fr; }
}

.dash2 .composite-card {
  background: color-mix(in oklab, var(--accent) 7%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--line));
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.dash2 .composite-h {
  display: flex; flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.dash2 .composite-h .lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.dash2 .composite-h .val {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
}
.dash2 .composite-h .val small {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
  letter-spacing: 0;
}
.dash2 .composite-stats {
  display: flex; flex-direction: column;
  gap: 6px;
}
.dash2 .composite-stat {
  display: flex; align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.dash2 .composite-stat .stat-val {
  order: -1;                       /* number renders first, label right after */
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  min-width: 64px;
  text-align: right;               /* right-aligned so values sit close to labels */
}
.dash2 .composite-stat .stat-lbl { color: var(--muted); }
.dash2 .composite-stat .stat-val.up   { color: var(--good); }
.dash2 .composite-stat .stat-val.down { color: var(--bad); }
.dash2 .composite-stat .stat-val.warn { color: var(--assigned); }

/* ---------- Card header link (e.g. "View all") ---------- */
.dash2 .card-h .card-link {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 500;
}
.dash2 .card-h .card-link:hover {
  color: var(--accent);
  text-decoration: none;
}