/* 
======================================================
  SISTEMA MINIMALISTA DE LAYOUT SAAS (GLOBAL)
======================================================
  - Centraliza a filosofia UI do sistema em 1 arquivo.
  - Impede que elementos fiquem esticados e descompassados.
  - Se aplica automaticamente a novas páginas.
*/

/* 
======================================================
  ESCALA GLOBAL DE INTERFACE (80% Zoom)
======================================================
  - Mantém celulares em 100% para preservar legibilidade.
  - A partir de tablets/desktops (768px+), encolhe a interface
    baseada em rem para 80%, gerando um visual premium compacto.
*/
html {
    font-size: 100%; /* Default Mobile */
}
@media (min-width: 768px) {
    html {
        font-size: 80%; /* Zoom out to 80% on Desktop */
    }
}

/* 1. CONTAINER BASE (O "Eixo" do sistema) */
.saas-container {
    width: 100% !important;
    max-width: 64rem !important; /* Aproximadamente 1024px (max-w-5xl). Bloqueia resoluções Wide demais. */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* 2. GRADE INTELIGENTE (O Fim dos "Elementos Largos")
   Em vez de definir 2 ou 3 colunas fixas (que esticam dependendo da tela), 
   o auto-fill calcula a matemática. O card NUNCA vai passar muito de 260px.
   Ele vai preferir criar uma nova coluna a esticar o elemento.
*/
.saas-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 1rem !important; /* Espaçamento cirúrgico de exatos 16px (gap-4 do Tailwind) */
    align-items: stretch;
}

/* Grade de alta densidade (Para telas/tabelas apertadas) */
.saas-grid-dense {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 0.75rem !important; /* 12px de gap */
}

/* 3. BOTÕES E COMPONENTES */
.saas-btn {
    padding: 0.5rem 1rem !important;    /* py-2 px-4 */
    font-size: 0.875rem !important;     /* text-sm */
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    transition: all 0.2s ease-in-out;
}

/* Trava o tamanho máximo dos Modais (Evita vazios pretos gigantes) */
.saas-modal {
    max-width: 28rem !important; /* max-w-md limit strict */
    padding: 1.25rem !important; /* p-5 encolhido */
}

/* Evitar que inputs fiquem gigantes em monitores Widescreen */
.saas-input-group {
    max-width: 100%;
}