@import "tailwindcss";

/* O Tailwind varre estes diretórios em busca das classes usadas nas telas. */
@source "../../views";
@source "../../helpers";
@source "../../javascript";

/* Todos os temas do daisyUI ficam disponíveis para troca em tempo de execução
   pelo seletor da barra superior. Sem escolha gravada, vale "corporate" no claro
   e "business" quando o sistema operacional pede escuro. A lista precisa ser
   mantida junto com ThemesHelper::THEMES, que monta o seletor. */
@plugin "daisyui" {
  themes: corporate --default, business --prefersdark, light, dark, cupcake,
    bumblebee, emerald, synthwave, retro, cyberpunk, valentine, halloween,
    garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury,
    dracula, cmyk, autumn, acid, lemonade, night, coffee, winter, dim, nord,
    sunset, caramellatte, abyss, silk;
}

/* Tabelas financeiras: números alinhados e com largura de dígito constante,
   para as colunas de valor lerem como coluna e não como texto. */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* O `.label` do daisyUI não quebra linha, mas o texto de ajuda dos formulários é
   frase, e não rótulo: sem isto ele estica a coluna do grid e vaza por cima do
   campo vizinho. Vale só para o hint dentro do fieldset — o `.label` usado como
   prefixo de um input continua como o daisyUI desenhou. */
.fieldset > .label {
  display: block;
  white-space: normal;
}

/* O `.badge` tem altura fixa: texto que quebra em duas linhas transborda a caixa.
   Badge é rótulo curto — segura tudo em uma linha e, se faltar espaço, o rótulo
   é que precisa encurtar. */
.badge {
  white-space: nowrap;
}

/* Alvo de toque no celular. Os botões de ação da tabela têm 24px e os
   checkboxes 20px — o ponteiro do mouse acerta, o dedo não. A recomendação é
   44px, e a regra vale só em tela pequena: no computador a lista continua
   densa, como é melhor para varrer muitas linhas. */
@media (max-width: 639px) {
  .btn-xs,
  .btn-sm,
  .select-sm,
  .input-sm {
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  .checkbox {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* A linha da tabela precisa de folga para caber o alvo maior. */
  .table :where(td, th) {
    padding-block: 0.75rem;
  }
}