@import "bootstrap-icons/font/bootstrap-icons.css";

/* Variáveis baseadas na sua marca, mas modernizadas */
:root {
  --brand-primary: #E33DCF;
  --brand-hover: #c91eb5;
  --brand-soft: rgba(227, 61, 207, 0.08);
  --text-main: #0F172A; /* Slate 900 - Preto moderno */
  --text-muted: #64748B; /* Slate 500 - Cinza moderno */
  --bg-body: #F8FAFC;
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  --radius-lg: 16px;
  --font-sans: 'Inter', sans-serif;
}

body {
  background-color: var(--bg-body);
  color: var(--text-main);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  /* Garante scroll da página em todo o app */
  overflow-y: auto !important; 
}

/* Utilitário de animação suave */
.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Empurra o conteúdo pra baixo do header fixo */
.app-main.has-header {
  padding-top: 84px; /* altura segura p/ header (mobile/desktop) */
}

@media (max-width: 600px) {
  .app-main.has-header {
    padding-top: 96px;
  }
}

/* ========================================================== */
/* 🚀 GLOBAL FIX: Proporção Horizontal e Vertical */
/* ========================================================== */

/* 1. HORIZONTAL: Mantém a proporção mais "fechada" que você gostou */
.container-geral,
.container-fat,
.container-mureg,
.container-troca,
.container-geral-responsive {
    max-width: 1100px !important; /* Largura controlada */
    width: 96% !important;        /* Margem segura em telas menores */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* 2. TABELAS: Remove limites de largura mínima desnecessários */
.table-modern {
    width: 100% !important;
    min-width: unset !important;
}

/* 3. VERTICAL: Libera o crescimento dos cards em todas as páginas */
.geral-card,
.fat-card,
.mureg-card,
.troca-card,
.vigencia-page .geral-card {
    height: auto !important;      /* Cresce conforme o conteúdo */
    max-height: none !important;  /* Remove limites fixos */
    min-height: 80vh;             /* Garante um tamanho mínimo bonito */
    overflow: visible !important; /* Remove scroll interno, usa o da janela */
    margin-bottom: 40px !important; /* Respiro no final */
}

/* 4. LISTAS E WRAPPERS: Destrava o crescimento interno */
.groups-container,
.table-wrap,
.table-wrap-tall,
.inner-table-wrap {
    height: auto !important;
    max-height: none !important;  /* CRÍTICO: Remove travas de pixels */
    overflow: visible !important;
}

/* 5. PÁGINAS: Garante que o scroll do navegador funcione */
.geral-page,
.users-page,
.fat-page,
.mureg-page,
.troca-page {
    overflow-y: auto !important;
    height: auto !important;
    display: block !important;
}