/* Office Overview — summary stat strip + small polish.
   Isolated to the dashboard view; reuses app.css brand tokens only
   (no new color system, no gradients-for-decoration). Every choice reasoned:
   icons map to meaning, pending=warn, approved=good, tabular numerals. */

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 20px;
}
@media (max-width: 880px) { .dash-stats { grid-template-columns: 1fr 1fr; } }

.stat {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px;
  background: var(--card);
  border: 1px solid rgba(217, 224, 231, .7);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease;
}
.stat:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.stat-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-2); border: 1px solid #b6d2eb;
}
.stat-ico svg { width: 22px; height: 22px; }
.stat-body { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.stat-num { font-size: var(--fs-3xl); font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat-lbl { font-size: var(--fs-sm); color: var(--muted); }
.stat.is-warn .stat-ico { background: #fdf3e0; color: var(--warn); border-color: #eccf94; }
.stat.is-warn .stat-num { color: var(--warn); }
.stat.is-good .stat-ico { background: #e7f6ee; color: var(--good); border-color: #b7e3c8; }
.stat.is-good .stat-num { color: var(--good); }

@media (prefers-reduced-motion: reduce) {
  .stat:hover { transform: none; }
}