/* ============================================================
   dashboard.css — GymBI by Statvo
   PURPOSE: Styles for the dashboard module — KPI cards,
   chart containers, and responsive chart sizing.
   ============================================================ */

/* ------------------------------------------------------------
   KPI CARDS
   Already use .card .card-sm from glass.css — these add the
   hover/click affordance for clickable cards.
   ------------------------------------------------------------ */
.kpi-card {
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.kpi-clickable:hover {
  background: var(--glass-3);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   CHART CARD
   Slightly taller padding to give charts breathing room.
   ------------------------------------------------------------ */
.chart-card {
  display: flex;
  flex-direction: column;
}

/* Chart canvas wrapper — fixes height so Chart.js responsive
   sizing doesn't grow infinitely (a common Chart.js pitfall) */
.chart-wrap {
  position: relative;
  height: 220px;
  width: 100%;
}

/* Donut chart needs slightly less height since it has a legend below */
.chart-wrap-donut {
  height: 240px;
}

/* On mobile, reduce chart height to fit more on screen */
@media (max-width: 640px) {
  .chart-wrap { height: 180px; }
  .chart-wrap-donut { height: 200px; }
}

/* ------------------------------------------------------------
   KPI GRID RESPONSIVE
   This overrides/extends the .grid-4 from layout.css for the
   dashboard specifically — 6 KPI cards need their own rhythm.
   ------------------------------------------------------------ */
#kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

@media (max-width: 640px) {
  #kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
}

/* ------------------------------------------------------------
   CHARTS GRID
   2 columns on desktop, 1 on mobile/tablet.
   ------------------------------------------------------------ */
#charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 900px) {
  #charts-grid {
    grid-template-columns: 1fr;
  }
}