/* ===================================================================
   ONIX Estoque — COMPONENTES visuais (classes usadas por src/components/*.js)
   Nunca estilize um <button>/<input>/<table> solto: use estas classes
   através das funções de src/components/. Cores/medidas só via tokens.
   =================================================================== */

/* ---------- Botão ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--esp-2); justify-content: center;
  padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-sm);
  font-weight: var(--peso-semi); font-size: var(--fs-base);
  background: var(--cor-card); border: 1px solid var(--cor-borda); color: var(--cor-texto);
  transition: background var(--transicao), filter var(--transicao);
}
.btn:hover { background: var(--cor-card-hover); }
.btn svg { width: 17px; height: 17px; }
.btn.primary { background: var(--cor-marca); border-color: var(--cor-marca); color: var(--cor-marca-contraste); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--cor-vermelho); border-color: var(--cor-vermelho-borda); }
.btn.danger:hover { background: var(--cor-vermelho-suave); }
.btn.bloco { width: 100%; }
.btn.grande { padding: var(--esp-4) var(--esp-5); font-size: var(--fs-md); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Campo (input / select) ---------- */
.field { margin-bottom: var(--esp-4); }
.field label { display: block; font-size: var(--fs-sm); color: var(--cor-texto-2); margin-bottom: var(--esp-2); font-weight: var(--peso-medio); }
.field input, .field select {
  width: 100%; background: var(--cor-card); border: 1px solid var(--cor-borda);
  color: var(--cor-texto); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-sm);
  font-size: var(--fs-md); outline: none; transition: border-color var(--transicao);
}
.field input:focus, .field select:focus { border-color: var(--cor-marca); }
.field .erro-campo { color: var(--cor-vermelho); font-size: var(--fs-xs); margin-top: var(--esp-1); min-height: 14px; }
.field-row { display: flex; gap: var(--esp-3); }
.field-row .field { flex: 1; }

/* ---------- Cabeçalho de página ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--esp-6); flex-wrap: wrap; gap: var(--esp-3); }
.page-head h2 { font-size: var(--fs-xl); font-weight: var(--peso-bold); }
.page-head p { color: var(--cor-texto-2); font-size: var(--fs-base); margin-top: var(--esp-1); }

/* ---------- Card / grade ---------- */
.grid { display: grid; gap: var(--esp-5); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--cor-card); border: 1px solid var(--cor-borda);
  border-radius: var(--raio); padding: var(--esp-6);
}
.card .label { color: var(--cor-texto-2); font-size: var(--fs-base); display: flex; align-items: center; gap: var(--esp-2); }
.card .value { font-size: var(--fs-2xl); font-weight: var(--peso-bold); margin: var(--esp-2) 0 var(--esp-3); letter-spacing: -.5px; }
.card .sub { color: var(--cor-texto-3); font-size: var(--fs-xs); margin-top: var(--esp-1); }
.stat-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: var(--esp-4); }
.stat-icon svg { width: 22px; height: 22px; }
.i-marca { background: var(--cor-marca-suave); color: var(--cor-marca); }
.i-verde { background: var(--cor-verde-suave); color: var(--cor-verde); }
.i-vermelho { background: var(--cor-vermelho-suave); color: var(--cor-vermelho); }

/* ---------- Filtros (segmentado) e busca ---------- */
.seg { display: inline-flex; background: var(--cor-card); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); overflow: hidden; }
.seg button { padding: var(--esp-2) var(--esp-4); font-size: var(--fs-sm); font-weight: var(--peso-semi); color: var(--cor-texto-2); white-space: nowrap; }
.seg button.on { background: var(--cor-marca-suave); color: var(--cor-marca); }
/* Toggle de modo da recepção com 4 opções: aperta o padding p/ caber no mobile */
.seg-modo button { padding-left: var(--esp-3); padding-right: var(--esp-3); }
.busca {
  display: flex; align-items: center; gap: var(--esp-2); background: var(--cor-card);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); padding: 0 var(--esp-4); flex: 1; min-width: 180px;
}
.busca svg { width: 16px; height: 16px; color: var(--cor-texto-3); }
.busca input { flex: 1; background: none; border: none; outline: none; color: var(--cor-texto); padding: var(--esp-3) 0; font-size: var(--fs-base); }

/* ---------- Tabela / lista de linhas ---------- */
.tabela { display: flex; flex-direction: column; }
.tabela-head, .tabela-row {
  display: grid; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-2);
}
.tabela-head {
  font-size: var(--fs-xs); font-weight: var(--peso-semi); text-transform: uppercase;
  letter-spacing: .04em; color: var(--cor-texto-3); border-bottom: 1px solid var(--cor-borda);
}
.tabela-row { border-bottom: 1px solid var(--cor-borda-suave); }
.tabela-row:hover { background: var(--cor-card); border-radius: var(--esp-2); }
.tabela .num { font-variant-numeric: tabular-nums; text-align: right; }
.tabela .acoes { display: flex; gap: var(--esp-1); justify-content: flex-end; }
.mini-btn { width: 32px; height: 32px; border-radius: var(--esp-2); display: grid; place-items: center; color: var(--cor-texto-3); border: 1px solid transparent; }
.mini-btn:hover { border-color: var(--cor-borda); color: var(--cor-texto); }
.mini-btn svg { width: 16px; height: 16px; }
.mini-btn.del:hover { color: var(--cor-vermelho); border-color: var(--cor-vermelho-borda); }
.pos { color: var(--cor-verde); }
.neg { color: var(--cor-vermelho); }

/* ---------- Abas (áreas agrupadas) ---------- */
.abas { display: flex; gap: var(--esp-1); border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--esp-6); overflow-x: auto; }
.aba {
  padding: var(--esp-3) var(--esp-4); font-size: var(--fs-base); font-weight: var(--peso-semi);
  color: var(--cor-texto-2); border-bottom: 2px solid transparent; white-space: nowrap;
  margin-bottom: -1px; transition: color var(--transicao), border-color var(--transicao);
}
.aba:hover { color: var(--cor-texto); }
.aba.on { color: var(--cor-marca); border-bottom-color: var(--cor-marca); }

/* ---------- Estado vazio ---------- */
.empty { text-align: center; color: var(--cor-texto-3); padding: var(--esp-10) var(--esp-5); }
.empty svg { width: 46px; height: 46px; margin-bottom: var(--esp-3); opacity: .5; }

/* ---------- Selo / badge ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: var(--fs-xs); font-weight: var(--peso-semi); padding: 4px var(--esp-2); border-radius: var(--esp-2); }
.badge.ok { color: var(--cor-verde); background: var(--cor-verde-suave); }
.badge.ruim { color: var(--cor-vermelho); background: var(--cor-vermelho-suave); }
.badge.neutro { color: var(--cor-texto-2); background: var(--cor-card); border: 1px solid var(--cor-borda); }
.badge.alerta { color: var(--cor-amarelo-alerta); background: var(--cor-amarelo-alerta-suave); }

/* ---------- Modal ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: none; place-items: center; z-index: 100; padding: var(--esp-5);
}
.overlay.open { display: grid; }
.modal {
  width: 100%; max-width: 440px; background: var(--cor-fundo-elev);
  border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); padding: var(--esp-6);
  max-height: 90vh; overflow-y: auto; box-shadow: var(--sombra);
}
.modal h3 { font-size: var(--fs-lg); font-weight: var(--peso-bold); margin-bottom: var(--esp-5); }
.modal-actions { display: flex; gap: var(--esp-3); margin-top: var(--esp-6); }
.modal-actions .btn { flex: 1; }
@keyframes modalPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.overlay.open .modal { animation: modalPop .18s ease-out; }
.confirm-msg { color: var(--cor-texto-2); font-size: var(--fs-base); line-height: 1.55; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: var(--esp-6); left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--cor-fundo-elev); border: 1px solid var(--cor-borda); color: var(--cor-texto);
  padding: var(--esp-3) var(--esp-6); border-radius: var(--raio-sm); font-size: var(--fs-base); font-weight: var(--peso-medio);
  box-shadow: var(--sombra); z-index: 200; transition: transform .3s; display: flex; align-items: center; gap: var(--esp-2);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast svg { width: 18px; height: 18px; color: var(--cor-verde); }
.toast.erro svg { color: var(--cor-vermelho); }

/* ================= RESPONSIVO ================= */
@media (max-width: 1100px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .cols-4 { grid-template-columns: 1fr; }
  .seg { width: 100%; }
  .seg button { flex: 1; }
  .tabela .acoes { opacity: 1; }
}