/*
 * Kwalee BI — Dashboard KPI Section Layout
 *
 * CSS Grid wrapper for KPI tiles within the dashboard grid.
 * Column count is controlled via .max-cols-N utility classes (1–24).
 *
 * 5-tier responsive breakpoints (Tailwind-aligned):
 *   sm  (< 640px)        → horizontal scroll (snap)
 *   md  (640px – 767px)  → horizontal scroll (snap)
 *   lg  (768px – 1023px) → ⌈N/2⌉ cols
 *   xl  (1024px – 1279px)→ ⌈3N/4⌉ cols
 *   2xl (≥ 1280px)       → N cols (the max)
 *
 * Usage (Python):  DashboardConfig(kpi_max_cols=6)
 *   → className="dashboard-kpi-section max-cols-6"
 */

/* ─── Base: mobile + tablet / sm+md (< 768px) — horizontal scroll ─── */
.dashboard-kpi-section {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-xs);
}

.dashboard-kpi-section > * {
  flex: 0 0 auto;
  min-width: 10rem;
  max-width: 80vw;
  scroll-snap-align: start;
  padding: var(--spacing-sm) var(--spacing-md);
}

/* ─── lg (≥ 768px) — switch to grid ─── */
@media (min-width: 768px) {
  .dashboard-kpi-section {
    display: grid;
    grid-template-columns: repeat(var(--kpi-cols-lg, 2), 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .dashboard-kpi-section > * {
    flex: unset;
    min-width: 0;
    max-width: none;
    scroll-snap-align: unset;
    padding: var(--spacing-lg);
  }
}

/* ─── xl (1024px – 1279px) ─── */
@media (min-width: 1024px) {
  .dashboard-kpi-section {
    grid-template-columns: repeat(var(--kpi-cols-xl, 3), 1fr);
  }
}

/* ─── 2xl (≥ 1280px) ─── */
@media (min-width: 1280px) {
  .dashboard-kpi-section {
    grid-template-columns: repeat(var(--kpi-cols-2xl, 4), 1fr);
  }
}

/* ─── max-cols-N utility classes (1–24) ─────────────────────────
   Each sets five custom properties consumed by the breakpoints above:
     --kpi-cols-2xl → ≥ 1280px  (N)
     --kpi-cols-xl  → 1024–1279 (⌈3N/4⌉)
     --kpi-cols-lg  → 768–1023  (⌈N/2⌉)
     --kpi-cols-md  → 640–767   (⌈N/3⌉)
     --kpi-cols-sm  → < 640px   (⌈N/4⌉, min 1)
   ────────────────────────────────────────────────────────────── */
.max-cols-1 {
  --kpi-cols-2xl: 1;
  --kpi-cols-xl: 1;
  --kpi-cols-lg: 1;
  --kpi-cols-md: 1;
  --kpi-cols-sm: 1;
}
.max-cols-2 {
  --kpi-cols-2xl: 2;
  --kpi-cols-xl: 2;
  --kpi-cols-lg: 1;
  --kpi-cols-md: 1;
  --kpi-cols-sm: 1;
}
.max-cols-3 {
  --kpi-cols-2xl: 3;
  --kpi-cols-xl: 3;
  --kpi-cols-lg: 2;
  --kpi-cols-md: 1;
  --kpi-cols-sm: 1;
}
.max-cols-4 {
  --kpi-cols-2xl: 4;
  --kpi-cols-xl: 3;
  --kpi-cols-lg: 2;
  --kpi-cols-md: 2;
  --kpi-cols-sm: 1;
}
.max-cols-5 {
  --kpi-cols-2xl: 5;
  --kpi-cols-xl: 4;
  --kpi-cols-lg: 3;
  --kpi-cols-md: 2;
  --kpi-cols-sm: 2;
}
.max-cols-6 {
  --kpi-cols-2xl: 6;
  --kpi-cols-xl: 5;
  --kpi-cols-lg: 3;
  --kpi-cols-md: 2;
  --kpi-cols-sm: 2;
}
.max-cols-7 {
  --kpi-cols-2xl: 7;
  --kpi-cols-xl: 6;
  --kpi-cols-lg: 4;
  --kpi-cols-md: 3;
  --kpi-cols-sm: 2;
}
.max-cols-8 {
  --kpi-cols-2xl: 8;
  --kpi-cols-xl: 6;
  --kpi-cols-lg: 4;
  --kpi-cols-md: 3;
  --kpi-cols-sm: 2;
}
.max-cols-9 {
  --kpi-cols-2xl: 9;
  --kpi-cols-xl: 7;
  --kpi-cols-lg: 5;
  --kpi-cols-md: 3;
  --kpi-cols-sm: 3;
}
.max-cols-10 {
  --kpi-cols-2xl: 10;
  --kpi-cols-xl: 8;
  --kpi-cols-lg: 5;
  --kpi-cols-md: 4;
  --kpi-cols-sm: 3;
}
.max-cols-11 {
  --kpi-cols-2xl: 11;
  --kpi-cols-xl: 9;
  --kpi-cols-lg: 6;
  --kpi-cols-md: 4;
  --kpi-cols-sm: 3;
}
.max-cols-12 {
  --kpi-cols-2xl: 12;
  --kpi-cols-xl: 9;
  --kpi-cols-lg: 6;
  --kpi-cols-md: 4;
  --kpi-cols-sm: 3;
}
.max-cols-13 {
  --kpi-cols-2xl: 13;
  --kpi-cols-xl: 10;
  --kpi-cols-lg: 7;
  --kpi-cols-md: 5;
  --kpi-cols-sm: 4;
}
.max-cols-14 {
  --kpi-cols-2xl: 14;
  --kpi-cols-xl: 11;
  --kpi-cols-lg: 7;
  --kpi-cols-md: 5;
  --kpi-cols-sm: 4;
}
.max-cols-15 {
  --kpi-cols-2xl: 15;
  --kpi-cols-xl: 12;
  --kpi-cols-lg: 8;
  --kpi-cols-md: 5;
  --kpi-cols-sm: 4;
}
.max-cols-16 {
  --kpi-cols-2xl: 16;
  --kpi-cols-xl: 12;
  --kpi-cols-lg: 8;
  --kpi-cols-md: 6;
  --kpi-cols-sm: 4;
}
.max-cols-17 {
  --kpi-cols-2xl: 17;
  --kpi-cols-xl: 13;
  --kpi-cols-lg: 9;
  --kpi-cols-md: 6;
  --kpi-cols-sm: 5;
}
.max-cols-18 {
  --kpi-cols-2xl: 18;
  --kpi-cols-xl: 14;
  --kpi-cols-lg: 9;
  --kpi-cols-md: 6;
  --kpi-cols-sm: 5;
}
.max-cols-19 {
  --kpi-cols-2xl: 19;
  --kpi-cols-xl: 15;
  --kpi-cols-lg: 10;
  --kpi-cols-md: 7;
  --kpi-cols-sm: 5;
}
.max-cols-20 {
  --kpi-cols-2xl: 20;
  --kpi-cols-xl: 15;
  --kpi-cols-lg: 10;
  --kpi-cols-md: 7;
  --kpi-cols-sm: 5;
}
.max-cols-21 {
  --kpi-cols-2xl: 21;
  --kpi-cols-xl: 16;
  --kpi-cols-lg: 11;
  --kpi-cols-md: 7;
  --kpi-cols-sm: 6;
}
.max-cols-22 {
  --kpi-cols-2xl: 22;
  --kpi-cols-xl: 17;
  --kpi-cols-lg: 11;
  --kpi-cols-md: 8;
  --kpi-cols-sm: 6;
}
.max-cols-23 {
  --kpi-cols-2xl: 23;
  --kpi-cols-xl: 18;
  --kpi-cols-lg: 12;
  --kpi-cols-md: 8;
  --kpi-cols-sm: 6;
}
.max-cols-24 {
  --kpi-cols-2xl: 24;
  --kpi-cols-xl: 18;
  --kpi-cols-lg: 12;
  --kpi-cols-md: 8;
  --kpi-cols-sm: 6;
}