/* DashboardGridTemplate - SPACING CONTRACT: Responsive grid with gaps */
.dashboard-grid-layout {
  display: grid;
  margin: 0;
}

/* Auto-fit responsive grid */
.dashboard-grid-layout.cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--min-card-width, var(--card-min-width)), 1fr));
}

/* Fixed column grids */
.dashboard-grid-layout.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

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

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

/* Gap variants */
.dashboard-grid-layout.gap-sm {
  gap: var(--space-2);  /* 8px */
}

.dashboard-grid-layout.gap-md {
  gap: var(--space-3);  /* 12px - Standard */
}

.dashboard-grid-layout.gap-lg {
  gap: var(--space-5);  /* 20px */
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .dashboard-grid-layout.cols-4,
  .dashboard-grid-layout.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dashboard-grid-layout.cols-2,
  .dashboard-grid-layout.cols-3,
  .dashboard-grid-layout.cols-4 {
    grid-template-columns: 1fr;
  }
  
  .dashboard-grid-layout.gap-md {
    gap: var(--space-3);
  }
  
  .dashboard-grid-layout.gap-lg {
    gap: var(--space-4);
  }
}