/* === Dashboard styles =================================================
 * The landing page. KPI tiles reuse .cust-kpis / .tile; only the quick-
 * action row, the two-column attention/activity layout, and the role-gate
 * live here.
 * ===================================================================== */

/* Sensitive financials are hidden from employees (they're read-only and
   already blocked from Partners/Compensation elsewhere). Pure CSS so it
   tracks the body.role-* class without any JS role subscription. */
body.role-employee .dash-sensitive { display: none !important; }

/* ─── Quick actions ──────────────────────────────────────────────── */
.dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

/* ─── Two-column: attention + recent activity ────────────────────── */
.dash-cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
@media (max-width: 900px) {
  .dash-cols { grid-template-columns: 1fr; }
}

.dash-card__title {
  font-size: var(--text-2xs);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: var(--s-3);
}

/* Needs-attention items */
.dash-attn {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.dash-attn__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--rs);
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast);
}
.dash-attn__item:hover { background: var(--surface-3, var(--surface-2)); }
.dash-attn__item--warn { background: var(--amber-tint); }
.dash-attn__item--bad { background: var(--negative-tint); }
.dash-attn__label { font-size: var(--text-sm); color: var(--t2); }
.dash-attn__value {
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  font-size: var(--text-sm);
  color: var(--tx);
}
.dash-attn__value.is-warn { color: var(--amber-lo); }
.dash-attn__value.is-bad { color: var(--negative); }
.dash-attn__clear {
  padding: var(--s-3);
  text-align: center;
  color: var(--t3);
  font-size: var(--text-sm);
}

/* Recent activity */
.dash-activity {
  display: flex;
  flex-direction: column;
}
.dash-activity__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--b0);
}
.dash-activity__row:last-child { border-bottom: none; }
.dash-activity__tag {
  font-size: var(--text-2xs);
  font-weight: var(--w-semibold);
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--t2);
  white-space: nowrap;
}
.dash-activity__tag--in  { background: var(--primary-tint); color: var(--primary-deep); }
.dash-activity__tag--out { background: var(--negative-tint); color: var(--negative); }
.dash-activity__main { min-width: 0; }
.dash-activity__desc {
  font-size: var(--text-sm);
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-activity__sub {
  font-size: var(--text-xs);
  color: var(--t3);
}
.dash-activity__amt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  text-align: right;
  white-space: nowrap;
}
.dash-activity__amt.is-in  { color: var(--primary-deep); }
.dash-activity__amt.is-out { color: var(--negative); }
.dash-activity__empty { padding: var(--s-4); text-align: center; color: var(--t3); font-size: var(--text-sm); }