/* =========================================================
   EstoqueFácil — Estilos principais
   ========================================================= */

:root{
  --cor-primaria: #2563eb;
  --cor-primaria-escura: #1d4ed8;
  --cor-sucesso: #16a34a;
  --cor-erro: #dc2626;
  --cor-alerta: #d97706;

  --bg: #f4f6fb;
  --bg-card: #ffffff;
  --bg-sidebar: #111827;
  --texto: #1f2937;
  --texto-suave: #6b7280;
  --borda: #e5e7eb;
  --sombra: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --raio: 10px;
}

.tema-escuro{
  --bg: #0f172a;
  --bg-card: #1e293b;
  --bg-sidebar: #0b1220;
  --texto: #e5e7eb;
  --texto-suave: #94a3b8;
  --borda: #334155;
  --sombra: 0 1px 3px rgba(0,0,0,.4);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--texto);
  transition: background .2s, color .2s;
}
a{ color: var(--cor-primaria); text-decoration:none; }
h1,h2,h3{ margin: 0 0 .5rem 0; }
img{ max-width:100%; }

/* ---------- Botões e formulários ---------- */
.botao{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1.1rem; border-radius: var(--raio);
  border:none; cursor:pointer; font-size:.95rem; font-weight:600;
  background: var(--borda); color: var(--texto);
  transition: filter .15s, transform .05s;
}
.botao:hover{ filter: brightness(0.95); }
.botao:active{ transform: scale(.98); }
.botao-primario{ background: var(--cor-primaria); color:#fff; }
.botao-primario:hover{ background: var(--cor-primaria-escura); }
.botao-sucesso{ background: var(--cor-sucesso); color:#fff; }
.botao-erro{ background: var(--cor-erro); color:#fff; }
.botao-pequeno{ padding:.35rem .7rem; font-size:.82rem; }
.botao-outline{ background:transparent; border:1px solid var(--borda); color:var(--texto); }

label{ display:block; font-size:.85rem; font-weight:600; margin: .8rem 0 .3rem; color: var(--texto-suave); }
input, select, textarea{
  width:100%; padding:.6rem .7rem; border-radius:8px;
  border:1px solid var(--borda); background: var(--bg-card); color: var(--texto);
  font-size:.95rem;
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--cor-primaria); outline-offset:1px; }
.campo-linha{ display:flex; gap:1rem; flex-wrap:wrap; }
.campo-linha > div{ flex:1; min-width:160px; }

/* ---------- Alertas ---------- */
.alerta{ padding:.7rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:.9rem; }
.alerta-sucesso{ background:#dcfce7; color:#166534; }
.alerta-erro{ background:#fee2e2; color:#991b1b; }
.alerta-info{ background:#dbeafe; color:#1e40af; }
.tema-escuro .alerta-sucesso{ background:#14532d; color:#bbf7d0; }
.tema-escuro .alerta-erro{ background:#7f1d1d; color:#fecaca; }
.tema-escuro .alerta-info{ background:#1e3a8a; color:#bfdbfe; }

/* ---------- Tela de login / instalação ---------- */
.auth-wrapper{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--cor-primaria), #0f172a);
  padding:1rem;
}
.auth-card{
  background: var(--bg-card); padding:2.2rem; border-radius:16px;
  width:100%; max-width:400px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.auth-titulo{ font-size:1.5rem; }
.auth-sub{ color: var(--texto-suave); margin-bottom:1rem; font-size:.9rem; }
.auth-card form button{ width:100%; margin-top:1.3rem; }
.auth-rodape{ text-align:center; margin-top:1rem; font-size:.85rem; color: var(--texto-suave); }

/* ---------- Layout do app (sidebar + conteúdo) ---------- */
.layout{ display:flex; min-height:100vh; }

.sidebar{
  width:240px; background: var(--bg-sidebar); color:#e5e7eb; flex-shrink:0;
  display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0;
  transition: transform .25s ease; z-index:1000; overflow-y:auto;
}
.sidebar-logo{ padding:1.3rem 1.2rem; font-size:1.2rem; font-weight:800; color:#fff; display:flex; align-items:center; gap:.5rem; }
.sidebar nav{ flex:1; padding:.5rem; }
.sidebar nav a{
  display:flex; align-items:center; gap:.7rem; color:#cbd5e1; padding:.65rem .9rem;
  border-radius:8px; margin-bottom:.15rem; font-size:.92rem; font-weight:500;
}
.sidebar nav a:hover{ background: rgba(255,255,255,.07); color:#fff; }
.sidebar nav a.ativo{ background: var(--cor-primaria); color:#fff; }
.sidebar-rodape{ padding:1rem; font-size:.78rem; color:#94a3b8; border-top:1px solid rgba(255,255,255,.08); }

.conteudo{ flex:1; margin-left:240px; min-width:0; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.4rem; background: var(--bg-card); border-bottom:1px solid var(--borda);
  position: sticky; top:0; z-index: 50;
}
.topbar-titulo{ font-size:1.1rem; font-weight:700; }
.topbar-acoes{ display:flex; align-items:center; gap:.7rem; }
.menu-toggle{ display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--texto); }
.icone-btn{ background:none; border:none; cursor:pointer; font-size:1.2rem; color: var(--texto-suave); }

.pagina{ padding:1.4rem; max-width:1300px; margin: 0 auto; }

/* ---------- Cards de dashboard ---------- */
.grid-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.card{ background: var(--bg-card); border:1px solid var(--borda); border-radius: var(--raio); padding:1.2rem; box-shadow: var(--sombra); }
.card-metric .num{ font-size:1.9rem; font-weight:800; }
.card-metric .label{ color: var(--texto-suave); font-size:.85rem; }
.card-metric .icone{ font-size:1.6rem; }
.card-metric{ display:flex; flex-direction:column; gap:.3rem; }
.card-metric-topo{ display:flex; justify-content:space-between; align-items:flex-start; }

/* ---------- Tabelas ---------- */
.tabela-wrapper{ background: var(--bg-card); border:1px solid var(--borda); border-radius: var(--raio); overflow:auto; box-shadow: var(--sombra); }
table{ width:100%; border-collapse: collapse; min-width:600px; }
thead th{ text-align:left; font-size:.78rem; text-transform:uppercase; color: var(--texto-suave); padding:.8rem 1rem; border-bottom:1px solid var(--borda); white-space:nowrap; }
tbody td{ padding:.8rem 1rem; border-bottom:1px solid var(--borda); font-size:.9rem; }
tbody tr:hover{ background: rgba(37,99,235,.04); }
.tema-escuro tbody tr:hover{ background: rgba(255,255,255,.03); }
.linha-estoque-baixo{ background: rgba(220,38,38,.08) !important; }
.linha-estoque-baixo td:first-child{ border-left:3px solid var(--cor-erro); }

.badge{ display:inline-block; padding:.2rem .6rem; border-radius:99px; font-size:.75rem; font-weight:700; }
.badge-vermelho{ background:#fee2e2; color:#991b1b; }
.badge-verde{ background:#dcfce7; color:#166534; }
.badge-cinza{ background:#e5e7eb; color:#374151; }
.tema-escuro .badge-vermelho{ background:#7f1d1d; color:#fecaca; }
.tema-escuro .badge-verde{ background:#14532d; color:#bbf7d0; }
.tema-escuro .badge-cinza{ background:#334155; color:#cbd5e1; }

/* ---------- Barra de ferramentas (busca/filtros) ---------- */
.toolbar{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; justify-content:space-between; }
.toolbar-busca{ display:flex; gap:.6rem; flex:1; min-width:240px; }
.toolbar-busca input{ flex:1; }

/* ---------- Modal simples ---------- */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:2000; padding:1rem; }
.overlay.visivel{ display:flex; }
.modal{ background: var(--bg-card); border-radius: var(--raio); padding:1.5rem; width:100%; max-width:480px; max-height:90vh; overflow:auto; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px){
  .sidebar{ transform: translateX(-100%); }
  .sidebar.aberta{ transform: translateX(0); }
  .conteudo{ margin-left:0; }
  .menu-toggle{ display:inline-block; }
}

/* ---------- Impressão (relatórios) ---------- */
@media print{
  .sidebar, .topbar, .toolbar, .no-print{ display:none !important; }
  .conteudo{ margin-left:0 !important; }
  body{ background:#fff; color:#000; }
  .card, .tabela-wrapper{ box-shadow:none; border:1px solid #999; }
}

.relatorio-cabecalho{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; border-bottom:2px solid var(--texto); padding-bottom:.8rem; }
.relatorio-cabecalho h2{ margin:0; }
.relatorio-meta{ font-size:.8rem; color: var(--texto-suave); margin-top:.2rem; }

.vazio{ text-align:center; padding:3rem 1rem; color: var(--texto-suave); }
.vazio .icone{ font-size:2.5rem; display:block; margin-bottom:.6rem; }