/* Overview tab: stat tiles + the 7-day calls bar chart. */
.stat-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat-tile{
  background: var(--void); border: 1px solid var(--line); border-radius: 10px; padding: 20px 18px;
  position: relative; overflow: hidden; opacity: 0; animation: tile-reveal 0.4s ease forwards;
}
.stat-tile::before{ content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--tile-accent, var(--accent-bright)); opacity: 0.75; }
.stat-tile .chip{
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 9px;
  background: color-mix(in srgb, var(--tile-accent, var(--accent-bright)) 16%, white);
  color: var(--tile-accent, var(--accent-bright)); display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.stat-tile .v{ font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.stat-tile .l{ font-size: 11px; color: var(--paper-dim); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 9px; font-weight: 600; }
.stat-tile.hero{ grid-column: span 2; padding: 24px 22px; }
.stat-tile.hero .v{ font-size: 42px; }
@keyframes tile-reveal{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: translateY(0); } }
.overview-grid .stat-tile:nth-child(1){ animation-delay: 0.02s; }
.overview-grid .stat-tile:nth-child(2){ animation-delay: 0.06s; }
.overview-grid .stat-tile:nth-child(3){ animation-delay: 0.10s; }
.overview-grid .stat-tile:nth-child(4){ animation-delay: 0.14s; }
.overview-grid .stat-tile:nth-child(5){ animation-delay: 0.18s; }
.overview-grid .stat-tile:nth-child(6){ animation-delay: 0.22s; }

.overview-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 700px){ .overview-grid{ grid-template-columns: repeat(2, 1fr); } .stat-tile.hero{ grid-column: span 2; } }
.bar-chart{ display: flex; align-items: flex-end; gap: 10px; height: 140px; padding: 0 4px; }
.bar-chart .bar-col{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.bar-chart .bar{
  width: 100%; max-width: 34px; background: var(--accent-bright);
  border-radius: 4px 4px 0 0; min-height: 3px; transition: height 0.4s ease;
}
.bar-chart .bar-count{ font-family: var(--font-mono); font-size: 11px; color: var(--paper-dim); }
.bar-chart .bar-label{ font-family: var(--font-display); font-size: 10.5px; font-weight: 500; color: var(--paper-dim); text-transform: uppercase; }
/* Shared "muted status text" utility -- also used outside this tab
   (Accounts' empty/loading states), but it's a stats/reporting-flavored
   label so it lives alongside the chart it was introduced for. */
.recent-locked{ color: var(--paper-dim); font-size: 13px; }