/* ══════════════════════════════════════════════════════════════
   SUPER PET - ESTILOS GLOBAIS
   Variáveis CSS e estilos base reutilizáveis em todo o sistema
   ══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   VARIÁVEIS CSS - TEMA ESCURO (PADRÃO)
   ──────────────────────────────────────────────────────────── */
:root {
  /* Cores de fundo */
  --bg: #080b14;
  --surface: #0e1220;
  --card: #131929;
  
  /* Bordas */
  --border: #1a2540;
  --border2: #253055;
  
  /* Cores de destaque - palette mais vibrante */
  --blue: #4d8dff;
  --green: #1fd97a;
  --amber: #f5a623;
  --red: #ff4545;
  --purple: #b06aff;
  --teal: #14b8a6;
  --pink: #ec4899;
  --orange: #f97316;
  
  /* Textos */
  --txt: #dce6f7;
  --txt2: #6b7fa3;
  --txt3: #323d5c;
  
  /* Fontes */
  --mono: 'DM Mono', monospace;
  
  /* Gradientes */
  --grad-blue: linear-gradient(135deg, #4d8dff, #7b5bf6);
  --grad-green: linear-gradient(135deg, #1fd97a, #14b8a6);
  --grad-red: linear-gradient(135deg, #ff4545, #ec4899);
  --grad-amber: linear-gradient(135deg, #f5a623, #f97316);
  --grad-purple: linear-gradient(135deg, #b06aff, #ec4899);
  
  /* Glassmorphism helpers */
  --glass: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
}

/* ────────────────────────────────────────────────────────────
   VARIÁVEIS CSS - TEMA CLARO
   ──────────────────────────────────────────────────────────── */
body.light-theme {
  --bg: #f0f4fb;
  --surface: #ffffff;
  --card: #ffffff;
  --border: #dde4f0;
  --border2: #c5d0e4;
  --txt: #0f172a;
  --txt2: #475569;
  --txt3: #94a3b8;
  --glass: rgba(0,0,0,0.02);
  --glass-border: rgba(0,0,0,0.06);
}

/* ────────────────────────────────────────────────────────────
   RESET E ESTILOS BASE
   ──────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
}

/* ────────────────────────────────────────────────────────────
   UTILITÁRIOS
   ──────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--glass) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 14px;
}

.card-p {
  padding: 20px;
}

/* ────────────────────────────────────────────────────────────
   SCROLLBAR CUSTOMIZADO
   ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border2);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ────────────────────────────────────────────────────────────
   ANIMAÇÕES
   ──────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ────────────────────────────────────────────────────────────
   CLASSES UTILITÁRIAS — PADRÕES DE LAYOUT RECORRENTES
   ──────────────────────────────────────────────────────────── */

/* Título de seção dentro de modais e cards */
.section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}

/* Texto auxiliar abaixo de campos de formulário */
.field-hint {
  font-size: 11px;
  color: var(--txt3);
  margin-top: 4px;
  line-height: 1.4;
}

/* Grids de formulário — 2 colunas */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row-sm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Grids de formulário — 3 e 4 colunas */
.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.form-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Espaçamento padronizado */
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }

/* Altura mínima consistente em inputs e selects */
.form-input,
.form-select {
  min-height: 38px;
}

/* ────────────────────────────────────────────────────────────
   ACENTO DE COR POR MÓDULO
   Borda esquerda colorida diretamente no .page-title.
   Nenhum HTML foi alterado — apenas seletores de ID.
   ──────────────────────────────────────────────────────────── */

/* 🟢 Verde — Produtos, Estoque, Inventário */
#page-produtos .page-title,
#page-dashboard-estoque .page-title,
#page-inventario .page-title,
#page-relatorio-validades .page-title {
  border-left: 4px solid var(--green);
  padding-left: 12px;
}

/* 🔵 Azul — Dashboard, Financeiro, Contas, Bancos, Relatórios */
#page-home .page-title,
#page-dashboard-financeiro .page-title,
#page-boletos .page-title,
#page-despesas .page-title,
#page-dre .page-title,
#page-bancos .page-title,
#page-movimentacoes .page-title,
#page-contador-dinheiro .page-title,
#page-contas-gerenciais .page-title,
#page-relatorios .page-title,
#page-relatorio-vendas-produto .page-title,
#page-relatorios-custom .page-title {
  border-left: 4px solid var(--blue);
  padding-left: 12px;
}

/* 🟡 Amber — Vendas, PDV, iFood */
#page-dashboard-vendas .page-title,
#page-recebimento-vendas .page-title,
#page-ifood .page-title,
#page-info-entregas .page-title,
#page-formas-pagamento .page-title,
#page-taxas-venda .page-title,
#page-cupomVenda .page-title {
  border-left: 4px solid var(--amber);
  padding-left: 12px;
}

/* 🟣 Roxo — Compras, Clientes, Fornecedores, Devoluções */
#page-pedidos-compra .page-title,
#page-notas .page-title,
#page-importar .page-title,
#page-fragmentacoes .page-title,
#page-clientes .page-title,
#page-fornecedores .page-title,
#page-beneficiarios .page-title,
#page-servicos-entrega .page-title,
#page-dashboard-rx .page-title,
#page-devolucoes .page-title,
#page-vouchers .page-title {
  border-left: 4px solid var(--purple);
  padding-left: 12px;
}

/* 🩵 Teal — Nutricional */
#page-nutricional .page-title {
  border-left: 4px solid var(--teal);
  padding-left: 12px;
}

/* ⚙️ Neutro — Configurações, Sistema */
#page-ajustes .page-title,
#page-config-empresa .page-title,
#page-sql-manager .page-title,
#page-backup .page-title,
#page-config-email-smtp .page-title,
#page-config-notif-avisos .page-title {
  border-left: 4px solid var(--txt3);
  padding-left: 12px;
}