/* ============================================================
   DASHBOARD LAYOUT — Phase 1 specific grid
   Reusable for other phases too (the structure is the same;
   only content varies).
   ============================================================ */

.dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Two-column row: chart (2/3) + side panel (1/3) */
.dashboard__row--split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--space-4);
}

/* Equal-split row — two cards of equal width */
.dashboard__row--equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Generic grid utility — 3 or 4 equal columns */
.dashboard-grid {
  display: grid;
  gap: var(--space-4);
}

.dashboard-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.dashboard-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .dashboard-grid--cols-3,
  .dashboard-grid--cols-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .dashboard-grid--cols-3,
  .dashboard-grid--cols-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1199px) {
  .dashboard__row--split,
  .dashboard__row--equal {
    grid-template-columns: 1fr;
  }
}