/* Apex Fee — Dashboard. Inherits all base tokens from styles.css and the
   calm visual vocabulary. Dashboard-scoped classes only. */

html, body { background: var(--bg); margin: 0; padding: 0; min-height: 100vh; }

/* Semantic states the dashboard needs beyond the base four.
   Brown HOLD (distinct from red), clean red Blocker, gold Warning. */
:root {
  --blocker-bg: #FBE4E2;
  --blocker-fg: #B42318;
  --blocker-dot: #D92D20;

  --warn-bg: #E5ECF8;
  --warn-fg: #274C9B;
  --warn-dot: #597AB6;

  --brownhold-bg: var(--hold-bg);
  --brownhold-fg: var(--hold-fg);
  --brownhold-dot: var(--hold-dot);
}



/* ─────────── Pills ─────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius:var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill .pdot { width: 7px; height: 7px; border-radius: 50%; }
.pill.success  { background: var(--ready-bg);     color: var(--ready-fg); }
.pill.success .pdot  { background: var(--ready-dot); }
.pill.review   { background: var(--review-bg);    color: var(--review-fg); }
.pill.review .pdot   { background: var(--review-dot); }
.pill.warn     { background: var(--warn-bg);      color: var(--warn-fg); }
.pill.warn .pdot     { background: var(--warn-dot); }
.pill.blocker  { background: var(--blocker-bg);   color: var(--blocker-fg); }
.pill.blocker .pdot  { background: var(--blocker-dot); }
.pill.hold     { background: var(--brownhold-bg); color: var(--brownhold-fg); }
.pill.hold .pdot     { background: var(--brownhold-dot); }
.pill.locked   { background: var(--excluded-bg);  color: var(--excluded-fg); }
.pill.locked .pdot   { background: var(--excluded-dot); }

/* ─────────── Recent billing runs table ─────────── */
.text-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.text-link svg { width: 12px; height: 12px; vertical-align: -1px; }
.text-link:hover { text-decoration: underline; }

/* ─────────── Needs attention list ─────────── */
@keyframes attnFlash {
  0%   { box-shadow: 0 0 0 0 rgba(39, 76, 155, 0); }
  18%  { box-shadow: 0 0 0 4px rgba(39, 76, 155, 0.28), var(--shadow-md); border-color: var(--accent); }
  100% { box-shadow: var(--shadow-sm); }
}

/* ─────────── Account health (quiet metrics) ─────────── */

/* ─────────── Recent activity timeline ─────────── */
.activity { display: flex; flex-direction: column; }

/* footer audit (reuse) keeps bottom calm */