/* =====================================================
   Grid System (grid.css)
   - 12 colunas, mobile-first
   - Utilitários flex (.row / .col-*)
   - Utilitários grid (.grid / .col-span-*)
   - NÃO altera picker, kpis, action-cards, etc.
===================================================== */

/* -----------------------------
   Tokens / breakpoints
----------------------------- */
:root {
  --grid-gutter: 12px;
  --grid-max-width: 1120px;

  --grid-bp-sm: 480px;
  --grid-bp-md: 768px;
  --grid-bp-lg: 1024px;
}

/* -----------------------------
   Container (opcional)
----------------------------- */
.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* =====================================================
   FLEX GRID — .row + .col-*
   Uso típico:
   <div class="row">
     <div class="col-12 col-md-6">...</div>
     <div class="col-12 col-md-6">...</div>
   </div>
===================================================== */

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter);
}

/* Base para todas as colunas */
[class*="col-"] {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 100%;
}

/* --------- 12 colunas (mobile) --------- */
/* Mobile por padrão: col-12 = 100%, col-6 = 50%, etc. */

.col-1  { flex-basis: 8.3333%;  max-width: 8.3333%;  }
.col-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
.col-3  { flex-basis: 25%;      max-width: 25%;      }
.col-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
.col-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
.col-6  { flex-basis: 50%;      max-width: 50%;      }
.col-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
.col-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
.col-9  { flex-basis: 75%;      max-width: 75%;      }
.col-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.col-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
.col-12 { flex-basis: 100%;     max-width: 100%;     }

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* --------- Breakpoint SM (>= 480px) --------- */
@media (min-width: 480px) {
  .col-sm-1  { flex-basis: 8.3333%;  max-width: 8.3333%;  }
  .col-sm-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
  .col-sm-3  { flex-basis: 25%;      max-width: 25%;      }
  .col-sm-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
  .col-sm-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
  .col-sm-6  { flex-basis: 50%;      max-width: 50%;      }
  .col-sm-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
  .col-sm-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
  .col-sm-9  { flex-basis: 75%;      max-width: 75%;      }
  .col-sm-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
  .col-sm-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
  .col-sm-12 { flex-basis: 100%;     max-width: 100%;     }

  .col-sm-auto { flex: 0 0 auto; width: auto; }
}

/* --------- Breakpoint MD (>= 768px) --------- */
@media (min-width: 768px) {
  .col-md-1  { flex-basis: 8.3333%;  max-width: 8.3333%;  }
  .col-md-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
  .col-md-3  { flex-basis: 25%;      max-width: 25%;      }
  .col-md-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
  .col-md-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
  .col-md-6  { flex-basis: 50%;      max-width: 50%;      }
  .col-md-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
  .col-md-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
  .col-md-9  { flex-basis: 75%;      max-width: 75%;      }
  .col-md-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
  .col-md-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
  .col-md-12 { flex-basis: 100%;     max-width: 100%;     }

  .col-md-auto { flex: 0 0 auto; width: auto; }
}

/* --------- Breakpoint LG (>= 1024px) --------- */
@media (min-width: 1024px) {
  .col-lg-1  { flex-basis: 8.3333%;  max-width: 8.3333%;  }
  .col-lg-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
  .col-lg-3  { flex-basis: 25%;      max-width: 25%;      }
  .col-lg-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
  .col-lg-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
  .col-lg-6  { flex-basis: 50%;      max-width: 50%;      }
  .col-lg-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
  .col-lg-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
  .col-lg-9  { flex-basis: 75%;      max-width: 75%;      }
  .col-lg-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
  .col-lg-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
  .col-lg-12 { flex-basis: 100%;     max-width: 100%;     }

  .col-lg-auto { flex: 0 0 auto; width: auto; }
}

/* Align helpers dentro da row */
.row--center   { justify-content: center; }
.row--between  { justify-content: space-between; }
.row--end      { justify-content: flex-end; }
.row--middle   { align-items: center; }
.row--top      { align-items: flex-start; }
.row--bottom   { align-items: flex-end; }

/* Variedades de gap (opcionais) */
.row.gap-0  { gap: 0; }
.row.gap-4  { gap: 4px; }
.row.gap-8  { gap: 8px; }
.row.gap-16 { gap: 16px; }
.row.gap-24 { gap: 24px; }



/* =====================================================
   CSS GRID — .grid + .col-span-*
   Bom para layouts mais livres (cards, dashboards, etc.)
===================================================== */

.grid {
  display: grid;
  gap: var(--grid-gutter);
}

/* 2, 3, 4 colunas simples */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 12-col grid (quando precisares de granularidade fina) */
.grid-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Spans genéricos (para grid-12) */
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-5  { grid-column: span 5 / span 5; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-7  { grid-column: span 7 / span 7; }
.col-span-8  { grid-column: span 8 / span 8; }
.col-span-9  { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }

/* Responsivo para grid (MD / LG) */
@media (min-width: 768px) {
  .grid-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .col-md-span-1  { grid-column: span 1 / span 1; }
  .col-md-span-2  { grid-column: span 2 / span 2; }
  .col-md-span-3  { grid-column: span 3 / span 3; }
  .col-md-span-4  { grid-column: span 4 / span 4; }
  .col-md-span-5  { grid-column: span 5 / span 5; }
  .col-md-span-6  { grid-column: span 6 / span 6; }
  .col-md-span-7  { grid-column: span 7 / span 7; }
  .col-md-span-8  { grid-column: span 8 / span 8; }
  .col-md-span-9  { grid-column: span 9 / span 9; }
  .col-md-span-10 { grid-column: span 10 / span 10; }
  .col-md-span-11 { grid-column: span 11 / span 11; }
  .col-md-span-12 { grid-column: span 12 / span 12; }
}

@media (min-width: 1024px) {
  .grid-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .col-lg-span-1  { grid-column: span 1 / span 1; }
  .col-lg-span-2  { grid-column: span 2 / span 2; }
  .col-lg-span-3  { grid-column: span 3 / span 3; }
  .col-lg-span-4  { grid-column: span 4 / span 4; }
  .col-lg-span-5  { grid-column: span 5 / span 5; }
  .col-lg-span-6  { grid-column: span 6 / span 6; }
  .col-lg-span-7  { grid-column: span 7 / span 7; }
  .col-lg-span-8  { grid-column: span 8 / span 8; }
  .col-lg-span-9  { grid-column: span 9 / span 9; }
  .col-lg-span-10 { grid-column: span 10 / span 10; }
  .col-lg-span-11 { grid-column: span 11 / span 11; }
  .col-lg-span-12 { grid-column: span 12 / span 12; }
}