/*
 * Responsive wide-screen layout for Beszel.
 *
 * Beszel 0.18.7 limits the content to 2000px and its chart grid to two
 * columns. Use the whole viewport and progressively add columns while
 * keeping each chart roughly 380-450px wide on ultrawide displays.
 */

div[style*="--container"] {
  --container: calc(100vw - 1rem) !important;
}

@media (min-width: 1280px) {
  .xl\:grid-cols-2,
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row dense !important;
  }

  /*
   * Beszel spans the final odd card across the original two-column grid.
   * Keep explicit full-width mode intact, but release that automatic span.
   */
  .xl\:grid-cols-2 .odd\:last-of-type\:col-span-full:not(.col-span-full) {
    grid-column: auto !important;
  }
}

@media (min-width: 1800px) {
  .xl\:grid-cols-2,
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 2400px) {
  .xl\:grid-cols-2,
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 3200px) {
  .xl\:grid-cols-2,
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}