/* Publisher dashboard — SPEC-137 §17 (P5-G).
 * Visual language mirrors /admin/dashboard.css so the publisher and
 * admin surfaces feel consistent. Three blocks: metrics rail (single
 * row of compact cards), payouts grid (balance + chargeback widget),
 * payout history table.
 *
 * Everything reads brand tokens — no hard-coded colour, no inline
 * spacing. The chargeback widget uses the same green/amber/red bands
 * as W3-D's donut so a publisher reading both dashboards parses the
 * signal identically.
 */

/* ── Metrics rail ─────────────────────────────────────────────────── */
.metrics-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.metric-card {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  min-width: 0;
}
.metric-label {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.metric-value {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 1.875rem;
  font-weight: 600;
  margin: var(--space-2) 0 var(--space-1);
  color: var(--color-text);
  line-height: 1.1;
}
.metric-foot {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

/* ── Payouts grid (balance + chargeback) ──────────────────────────── */
.payouts-tab { margin-top: var(--space-6); }
.payouts-header h2 { margin-bottom: var(--space-1); }
.payouts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.payouts-balance,
.payouts-chargeback {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.balance-label,
.cb-label {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.balance-value {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 2.25rem;
  font-weight: 600;
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.1;
}
.balance-help,
.cb-help {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  margin: 0 0 var(--space-4);
}
.balance-eta {
  color: var(--color-success, #4E9470);
  font-size: 0.875rem;
  margin: var(--space-3) 0 0;
}

/* Chargeback widget — colour bands.
 * The dataset attribute drives the colour so the JS can flip bands
 * without touching the DOM tree.
 */
.cb-value {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 2.25rem;
  font-weight: 600;
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.1;
}
.cb-value[data-band="green"]  { color: var(--color-success, #4E9470); }
.cb-value[data-band="amber"]  { color: var(--color-amber, #E8A54B); }
.cb-value[data-band="red"]    { color: var(--color-error, #C44A35); }

.cb-sample {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: auto;
}
.cb-sample li {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius);
}
.cb-sample b { color: var(--color-text); font-weight: 600; }

/* ── Payout history ───────────────────────────────────────────────── */
.payouts-history {
  margin-top: var(--space-5);
  padding: var(--space-5);
}
.payouts-history-header h3 { margin-bottom: var(--space-1); }
.payouts-history-empty {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}
.payouts-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: 0.875rem;
}
.payouts-history-table th,
.payouts-history-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.payouts-history-table th {
  color: var(--color-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.payouts-history-table tbody tr:last-child td { border-bottom: 0; }

.status-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.status-pill[data-status="paid"]    { color: var(--color-success, #4E9470); }
.status-pill[data-status="pending"] { color: var(--color-amber, #E8A54B); }
.status-pill[data-status="failed"]  { color: var(--color-error, #C44A35); }
.status-pill[data-status="reversed"]{ color: var(--color-error, #C44A35); }

/* Flash messages (errors + success toasts) */
.flash-ok    { color: var(--color-success, #4E9470); padding: var(--space-3) var(--space-4); }
.flash-error { color: var(--color-error, #C44A35); padding: var(--space-3) var(--space-4); }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .metrics-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .metrics-rail { grid-template-columns: 1fr; }
  .payouts-grid { grid-template-columns: 1fr; }
  .cb-sample    { grid-template-columns: 1fr; }
  .payouts-history-table th:nth-child(5),
  .payouts-history-table td:nth-child(5) { display: none; }
}