/* ==========================================================================
   DASHBOARD — page-specific layout
   ========================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 1200px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }

/* 4-column variant used by most list pages' mini stat row. Self-contained
   (own breakpoints) rather than relying on cascade order against the base
   .stat-grid rules above, so it collapses correctly wherever it's used. */
.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .stat-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-grid--4 { grid-template-columns: 1fr; } }

/* Fixed-width sidebar + flexible content, in either order. Also
   self-contained for the same reason. */
.content-row--sidebar-left { grid-template-columns: 320px 1fr; }
.content-row--sidebar-right { grid-template-columns: 1fr 320px; }
@media (max-width: 991px) {
  .content-row--sidebar-left, .content-row--sidebar-right { grid-template-columns: 1fr; }
}

.chart-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 991px) { .chart-row { grid-template-columns: 1fr; } }

.chart-canvas-wrap { position: relative; height: 260px; }
.chart-canvas-wrap.is-donut { height: 220px; }

.content-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  align-items: start;
}
@media (max-width: 991px) { .content-row { grid-template-columns: 1fr; } }

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}
@media (max-width: 1200px) { .quick-actions-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 576px) { .quick-actions-grid { grid-template-columns: repeat(2, 1fr); } }

.quick-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.quick-action-btn:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.quick-action-btn i { font-size: 1.3rem; color: var(--color-primary); }
.quick-action-btn span { font-size: 12px; font-weight: var(--fw-medium); color: var(--color-text-primary); }

.legend-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }