/* vmshub-kpi.css — ladrilhos (KPI) do tema VMSHub. UMA regra para colunas, alturas por fila e rodapé ancorado (25/10/2026). Só tokens do tema.
   Uso:  <div class="vm-tiles"><div class="vm-tiles__g"> <div class="vm-tile"> …corpo… <div class="vm-tile__f">rodapé</div> </div> … </div></div>
   Colunas = f(largura do .vm-tiles, nº de ladrilhos n): m = colunas que cabem (>= 208 px cada); linhas = ceil(n/m); os n ladrilhos se
   distribuem por IGUAL nas linhas (as linhas maiores primeiro). Toda linha fica cheia: sem órfão, sem meia fila vazia. Altura: cada fila pela mais alta.
   Sem suporte a round()/:has() (navegador antigo) cai na grade auto-fit abaixo. Mais de 12 ladrilhos: quem monta define style="--n:N". */
.vm-tiles { container: vm-tiles / inline-size; }
.vm-tiles__g { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); }
.vm-tiles__g > * { min-width: 0; }
.vm-tile { display: flex; flex-direction: column; gap: 4px; }
.vm-tile__f { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.vm-tile__bar { display: block; height: 6px; border-radius: 3px; background: var(--track-bg); overflow: hidden; }
.vm-tile__bar > i { display: block; height: 100%; min-width: 4px; border-radius: 3px; background: var(--sa-primary-fg); }
@supports (width: round(up, 5px, 2px)) and selector(:has(*)) {
  .vm-tiles__g {
    grid-template-columns: repeat(60, minmax(0, 1fr));   /* 60 = mmc de 1..6: cada fila divide 60 por igual */
    column-gap: 0; margin-inline: -8px;                   /* o respiro entre colunas vem da margem de 8 px de cada ladrilho (um gap de 60 colunas estouraria a largura) */
    --n: 1; --m: 1;
    --r: round(up, calc(var(--n) / var(--m)), 1);         /* linhas */
    --q: round(down, calc(var(--n) / var(--r)), 1);       /* mínimo por linha */
    --e: calc(var(--n) - var(--q) * var(--r));            /* linhas com um ladrilho a mais */
  }
  .vm-tiles__g > * {
    margin-inline: 8px;
    --big: clamp(0, calc(var(--e) * (var(--q) + 1) - var(--i, 1) + 1), 1);   /* 1 se o ladrilho i está numa linha maior */
    grid-column: span calc(60 / (var(--q) + var(--big)));
  }
  @container vm-tiles (min-width: 432px)  { .vm-tiles__g { --m: 2; } }
  @container vm-tiles (min-width: 656px)  { .vm-tiles__g { --m: 3; } }
  @container vm-tiles (min-width: 880px)  { .vm-tiles__g { --m: 4; } }
  @container vm-tiles (min-width: 1104px) { .vm-tiles__g { --m: 5; } }
  @container vm-tiles (min-width: 1328px) { .vm-tiles__g { --m: 6; } }
  .vm-tiles__g:has(> :nth-child(2))  { --n: 2; }
  .vm-tiles__g:has(> :nth-child(3))  { --n: 3; }
  .vm-tiles__g:has(> :nth-child(4))  { --n: 4; }
  .vm-tiles__g:has(> :nth-child(5))  { --n: 5; }
  .vm-tiles__g:has(> :nth-child(6))  { --n: 6; }
  .vm-tiles__g:has(> :nth-child(7))  { --n: 7; }
  .vm-tiles__g:has(> :nth-child(8))  { --n: 8; }
  .vm-tiles__g:has(> :nth-child(9))  { --n: 9; }
  .vm-tiles__g:has(> :nth-child(10)) { --n: 10; }
  .vm-tiles__g:has(> :nth-child(11)) { --n: 11; }
  .vm-tiles__g:has(> :nth-child(12)) { --n: 12; }
  .vm-tiles__g > :nth-child(1)  { --i: 1; }
  .vm-tiles__g > :nth-child(2)  { --i: 2; }
  .vm-tiles__g > :nth-child(3)  { --i: 3; }
  .vm-tiles__g > :nth-child(4)  { --i: 4; }
  .vm-tiles__g > :nth-child(5)  { --i: 5; }
  .vm-tiles__g > :nth-child(6)  { --i: 6; }
  .vm-tiles__g > :nth-child(7)  { --i: 7; }
  .vm-tiles__g > :nth-child(8)  { --i: 8; }
  .vm-tiles__g > :nth-child(9)  { --i: 9; }
  .vm-tiles__g > :nth-child(10) { --i: 10; }
  .vm-tiles__g > :nth-child(11) { --i: 11; }
  .vm-tiles__g > :nth-child(12) { --i: 12; }
}