/* =========================[ GRID SYSTEM ]========================= */

/* Container de linha */
.grid-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;
  font-size: small;
  font-weight: bolder;
}

/* Coluna genérica */
.grid-col {
  display: flex;
  flex-direction: column;
  padding-left: 4px;
  padding-right: 4px;
}

/* Tamanhos de coluna com base em 12 partes (como Bootstrap) */
.grid-col.col-12 { flex: 0 0 100%; }
.grid-col.col-11 { flex: 0 0 91.6667%; }
.grid-col.col-10 { flex: 0 0 83.3333%; }
.grid-col.col-9  { flex: 0 0 75%; }
.grid-col.col-8  { flex: 0 0 66.6667%; }
.grid-col.col-7  { flex: 0 0 58.3333%; }
.grid-col.col-6  { flex: 0 0 50%; }
.grid-col.col-5  { flex: 0 0 41.6667%; }
.grid-col.col-4  { flex: 0 0 33.3333%; }
.grid-col.col-3  { flex: 0 0 25%; }
.grid-col.col-2  { flex: 0 0 16.6667%; }
.grid-col.col-1  { flex: 0 0 8.3333%; }

/* Responsividade para telas menores */
@media (max-width: 768px) {
  .grid-col {
    flex: 0 0 100% !important;
  }
}

/* Espaçamento entre label e input */
.grid-col label {
  margin-bottom: 6px;
}

/* Inputs básicos dentro da grid */
.grid-col input,
.grid-col select,
.grid-col textarea {
  padding: 8px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 2px;
  font-size: small;
}




/* [DOCUMENTAÇÃO] */
/* ========================================================================== */
/*                              SISTEMA DE GRID                               */
/* ========================================================================== */
/*
  COMO USAR:

  1. .grid-row → Cria uma "linha" flexível para agrupar colunas.
     Ex: <div class="grid-row"> ... </div>

  2. .grid-col.col-* → Cria uma "coluna" com largura proporcional.
     Use col-1 até col-12 (sendo col-12 = 100% da linha).
     Ex: <div class="grid-col col-6">...</div> (50% da linha)

  3. A soma das colunas em cada .grid-row deve ser no máximo 12.
     Exemplo:
         <div class="grid-row">
           <div class="grid-col col-6">...</div>
           <div class="grid-col col-6">...</div>
         </div>

  4. Em telas pequenas (mobile), todas as colunas viram col-12 por padrão.

  5. Suporta:
     - <input>, <select>, <textarea> dentro de .grid-col
     - <label> é recomendado, mas opcional
     - Pode usar várias .grid-row dentro do mesmo container

  Dica: Use col-12 para campos longos como observações ou campos de texto extensos.
*/
/* ========================================================================== */