/* ===== CORREÇÕES DE LAYOUT GLOBAIS - VERSÃO FINAL ===== */

/* Utilitários Base.
   IMPORTANTE: `.hidden` precisa vir DEPOIS de `.flex` (ambos !important, mesma
   especificidade → vence quem vem por último). Assim, num elemento com as duas
   classes (padrão Tailwind de toggle: `class="hidden ... flex ..."`), o `.hidden`
   vence e o elemento fica oculto até o JS remover a classe `hidden`. Se `.flex`
   viesse por último, a barra de cotação (e afins) ficaria sempre visível. */
.flex {
    display: flex !important;
}

.hidden {
    display: none !important;
}

.items-center {
    align-items: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 0.75rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

.gap-6 {
    gap: 1.5rem !important;
}

/* Grid System Responsivo */
.grid-modern {
    display: grid !important;
    gap: 1.5rem !important;
}

/* NÃO reintroduzir `.grid-cols-1 { ... !important }` aqui.
   O Tailwind (site.dist.css) já define `.grid-cols-1` como coluna única. Uma
   versão com `!important` neste breakpoint (min-width:0) vencia TODAS as variantes
   responsivas — inclusive valores arbitrários como `lg:grid-cols-[280px_1fr]`
   (sidebar do Catálogo) e `sm:grid-cols-2` — colapsando-as para 1 coluna e
   empilhando layouts que deveriam ter sidebar. Deixe o Tailwind cuidar disso. */

/* Breakpoint sm (Tailwind ≥ 640px). Necessário porque .hidden tem !important
   acima e sobrescreveria sm:flex / sm:inline / sm:inline-flex sem essas regras. */
@media (min-width: 640px) {
    .sm\:flex {
        display: flex !important;
    }

    .sm\:inline {
        display: inline !important;
    }

    .sm\:inline-flex {
        display: inline-flex !important;
    }

    .sm\:hidden {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .md\:flex {
        display: flex !important;
    }

    .md\:hidden {
        display: none !important;
    }

    .md\:inline {
        display: inline !important;
    }

    .md\:inline-flex {
        display: inline-flex !important;
    }
    /* Overrides de md:grid-cols-* removidos: existiam só para counter o antigo
       `.grid-cols-1 !important` (já removido). O Tailwind (site.dist.css) já
       cobre todos os grid-cols em todos os breakpoints. */
}

@media (min-width: 1024px) {
    /* Overrides de lg:grid-cols-* removidos: existiam só para counter o antigo
       `.grid-cols-1 !important` (já removido). Mantê-los quebrava xl:grid-cols-4
       (o `lg:grid-cols-3 !important` vencia o `xl:grid-cols-4` do Tailwind).
       O Tailwind já cobre todos os breakpoints, inclusive o hero 12-col da home. */
    .lg\:flex {
        display: flex !important;
    }

    .lg\:hidden {
        display: none !important;
    }

    .lg\:inline {
        display: inline !important;
    }

    .lg\:inline-flex {
        display: inline-flex !important;
    }
}

/* Header e Navbar Fixes */
.app-header {
    background: white !important;
    border-bottom: 1px solid #e5e7eb !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    width: 100% !important;
}

.navbar-modern {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.75rem 0 !important;
    width: 100% !important;
}

.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    /* Forçar horizontal */
    align-items: center !important;
    gap: 0.25rem !important;
    background: #f1f5f9 !important;
    padding: 0.375rem !important;
    border-radius: 1rem !important;
    margin: 0 auto !important;
    /* Centralizar se necessário */
}

/* Esconde navbar horizontal abaixo de 1280px (Tailwind xl). Com 8 links admin
   visíveis, telas <1280px ficam apertadas e geram overflow horizontal. Nesse
   range a navegação fica via menu hamburger (.mobile-menu). */
@media (max-width: 1023px) {
    .navbar-nav.md\:flex {
        display: none !important;
    }
}

.nav-link-modern {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 0.75rem !important;
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    min-width: max-content !important;
    /* Evitar quebra */
}

.nav-link-modern:hover {
    color: #16a34a !important;
    background: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
}

.nav-link-modern.active {
    background: white !important;
    color: #16a34a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Brading no Navbar */
.navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
}

.navbar-brand-icon {
    width: 2.25rem !important;
    height: 2.25rem !important;
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
}

/* Fixes para Filtros e Formulários */
.form-select-modern {
    min-width: 160px !important;
    /* Garantir que fornecedores e categorias apareçam */
}

@media (min-width: 1024px) {
    .lg\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }
}

/* Cards e Listas */
.card-modern {
    background: white !important;
    border-radius: 1rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
}

.card-body-modern {
    padding: 1.5rem !important;
}

.card-header-modern {
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Badges Modernas */
.badge-modern {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Cores de Texto e Fundo Gerais */
.text-green-600 {
    color: #16a34a !important;
}

.text-gray-600 {
    color: #4b5563 !important;
}

.text-gray-900 {
    color: #111827 !important;
}

.bg-green-100 {
    background-color: #dcfce7 !important;
}

.bg-primary-500 {
    background-color: #22c55e !important;
}

/* Correção para Imagens Quebradas */
img.rounded-lg {
    min-height: 40px !important;
    background-color: #f3f4f6 !important;
}

/* Dashboard Stat Cards - Explicit Gradients */
.bg-gradient-to-br.from-green-500.to-green-600 {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: white !important;
}

.bg-gradient-to-br.from-blue-500.to-blue-600 {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
}

.bg-gradient-to-br.from-purple-500.to-purple-600 {
    background: linear-gradient(135deg, #a855f7, #9333ea) !important;
    color: white !important;
}

.bg-gradient-to-br.from-orange-500.to-orange-600 {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: white !important;
}

.text-white {
    color: white !important;
}

.text-green-100 {
    color: #dcfce7 !important;
}

.text-blue-100 {
    color: #dbeafe !important;
}

.text-purple-100 {
    color: #f3e8ff !important;
}

.text-orange-100 {
    color: #ffedd5 !important;
}

/* Centralização do Conteúdo Principal */
.container-modern {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
}

.app-main {
    padding-top: 2rem !important;
    padding-bottom: 4rem !important;
}
/* Corre��o para Tabelas Modernas (Substituindo @apply do Tailwind) */
.table-modern {
    width: 100% !important;
    border-collapse: collapse !important;
    text-indent: 0 !important;
    border-color: inherit !important;
}

.table-modern thead {
    background-color: #f9fafb !important;
    display: table-header-group !important;
    vertical-align: middle !important;
    border-color: inherit !important;
}

.table-modern th {
    padding: 0.75rem 1.5rem !important;
    text-align: left !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Exceção: colunas numéricas marcadas com utilitário de alinhamento não devem
   ser forçadas à esquerda pela regra genérica acima (especificidade maior). */
.table-modern th.text-end,
.table-modern th.text-right {
    text-align: right !important;
}

.table-modern tbody {
    display: table-row-group !important;
    vertical-align: middle !important;
    border-color: inherit !important;
}

.table-modern tbody tr {
    border-bottom: 1px solid #e5e7eb !important;
    display: table-row !important;
    vertical-align: inherit !important;
    border-color: inherit !important;
}

.table-modern tbody tr:last-child {
    border-bottom: none !important;
}

.table-modern td {
    padding: 1rem 1.5rem !important;
    white-space: nowrap !important;
    font-size: 0.875rem !important;
    color: #111827 !important;
}

.table-modern tbody tr:hover {
    background-color: #f9fafb !important;
}

/* Badges e Bot�es dentro da tabela */
.table-modern .badge-modern {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.625rem !important;
}

.table-modern .btn-outline-modern {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.875rem !important;
}

/* Badge variants */
.badge-warning-modern {
    background-color: #fffbeb !important;
    color: #b45309 !important;
}

.badge-primary-modern {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}

.badge-success-modern {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
}

.badge-error-modern {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}

/* Corre��o espec�ficas para telas menores */
.overflow-x-auto {
    overflow-x: auto !important;
}