/* ===== Design tokens ===== */
:root {
  --cor-fundo: #f7f7f8;
  --cor-superficie: #ffffff;
  --cor-superficie-alt: #f1f1f4;
  --cor-borda: #e4e4e9;
  --cor-texto: #16151a;
  --cor-texto-suave: #6b6b75;
  --cor-texto-fraco: #a4a3ad;

  --cor-acento: #e2610f;
  --cor-acento-hover: #c9530a;
  --cor-acento-suave: #fde7d5;

  --cor-perigo: #d1373f;
  --cor-perigo-suave: #fbe1e2;
  --cor-sucesso: #1f9d55;
  --cor-sucesso-suave: #dcf5e5;
  --cor-aviso: #c2790a;
  --cor-aviso-suave: #fcecce;
  --cor-info: #2563a8;
  --cor-info-suave: #e0ecf9;

  --cor-sidebar: #121116;
  --cor-sidebar-texto: #b6b4c2;
  --cor-sidebar-texto-forte: #ffffff;
  --cor-sidebar-borda: rgba(255, 255, 255, 0.08);
  --cor-sidebar-hover: rgba(255, 255, 255, 0.06);

  --fonte-corpo: 'Inter', system-ui, -apple-system, sans-serif;

  --raio: 10px;
  --raio-pequeno: 8px;
  --sombra: 0 1px 2px rgba(16, 15, 20, 0.04), 0 1px 8px rgba(16, 15, 20, 0.04);
  --sombra-hover: 0 4px 10px rgba(16, 15, 20, 0.06), 0 2px 4px rgba(16, 15, 20, 0.05);
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--fonte-corpo);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  margin: 0;
  font-size: 0.925rem;
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--fonte-corpo); font-weight: 700; margin: 0; letter-spacing: -0.025em; color: var(--cor-texto); }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.02rem; margin-bottom: 1rem; letter-spacing: -0.01em; }
h3 { font-size: 0.95rem; }
p { margin: 0; }
a { color: var(--cor-acento); }

/* ===== App shell (sidebar layout) ===== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 224px;
  flex-shrink: 0;
  background: var(--cor-sidebar);
  color: var(--cor-sidebar-texto);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.9rem;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.2rem 0.5rem 1.4rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--cor-sidebar-borda);
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.brand-text {
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
  color: var(--cor-sidebar-texto-forte);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--raio-pequeno);
  color: var(--cor-sidebar-texto);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.nav-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.nav-link:hover { background: var(--cor-sidebar-hover); color: var(--cor-sidebar-texto-forte); }
.nav-link.ativo { background: var(--cor-acento); color: #fff; }
.nav-link.ativo svg { opacity: 1; }

.submenu-link {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: var(--raio-pequeno);
  color: var(--cor-sidebar-texto);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
}
.submenu-link:hover { background: var(--cor-sidebar-hover); color: var(--cor-sidebar-texto-forte); }
.submenu-link.ativo { background: var(--cor-acento); color: #fff; }

/* Submenu de itens de menu que agrupam mais de uma página (Loja, Estoque)
   — abre pra baixo, empurrando os itens seguintes. Clique no item pai
   alterna a classe "aberto" (ver sidebar.js); começa expandido quando a
   página atual já é uma das do grupo. */
.submenu-abaixo { display: none; flex-direction: column; gap: 0.1rem; margin: 0.15rem 0 0.35rem 1.85rem; }
.nav-item-submenu-baixo.aberto .submenu-abaixo { display: flex; }
.submenu-abaixo .submenu-link { font-size: 0.82rem; padding: 0.4rem 0.6rem; }
.sidebar-footer { border-top: 1px solid var(--cor-sidebar-borda); padding-top: 0.6rem; margin-top: 0.6rem; }

.app-content { flex: 1; min-width: 0; padding: 1.9rem 2.4rem 4rem; max-width: 1080px; }
.content-header { margin-bottom: 1.7rem; }
.content-subtitle { color: var(--cor-texto-suave); font-size: 0.87rem; margin-top: 0.25rem; }

/* ===== Cards ===== */
.card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
}
.card-header { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 0.85rem; }
.card-header img, .card-header .foto-vazia {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie-alt);
  flex-shrink: 0;
}
/* Foto do produto clicável pra trocar (ou adicionar, se ainda não tiver
   nenhuma) — sem precisar de um botão "Trocar foto" à parte. */
.foto-clicavel { cursor: pointer; transition: opacity 0.12s; }
.foto-clicavel:hover { opacity: 0.72; }
.card h3 { margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.95rem; }
.card > div { color: var(--cor-texto-suave); font-size: 0.83rem; }

/* ===== Badges ===== */
.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge.aberto, .badge.pago, .badge.entregue { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); }
.badge.fechado, .badge.cancelado { background: var(--cor-superficie-alt); color: var(--cor-texto-suave); }
.badge.pendente, .badge.a-entregar { background: var(--cor-aviso-suave); color: var(--cor-aviso); }
.badge.superado { background: var(--cor-perigo-suave); color: var(--cor-perigo); }
.badge.comprovante, .badge.principal { background: var(--cor-info-suave); color: var(--cor-info); margin-left: 0.25rem; }

/* ===== Etiquetas (tags livres do CRM) ===== */
.etiqueta {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--cor-superficie-alt);
  color: var(--cor-texto-suave);
  margin: 0 0.2rem 0.2rem 0;
}

/* ===== Forms ===== */
form.inline-fields { display: grid; gap: 0.8rem; margin-top: 0.7rem; }
form.inline-fields label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 0.28rem;
}
label { color: var(--cor-texto-suave); }
input, select, textarea {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  font-size: 0.87rem;
  font-family: inherit;
  width: 100%;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px var(--cor-acento-suave);
}
input[type="checkbox"] { width: auto; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.85rem !important;
  color: var(--cor-texto) !important;
  margin-bottom: 0 !important;
}
.dica { font-size: 0.8rem; color: var(--cor-texto-suave); margin-top: 0.3rem; }

/* Bolinha "?" ao lado de um label — passa o mouse (ou foca via teclado) e
   mostra a explicação do campo, sem precisar de um <p class="dica"> fixo
   ocupando espaço na tela o tempo todo. */
.ajuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.4px solid var(--cor-texto-suave);
  color: var(--cor-texto-suave);
  font-size: 0.66rem;
  font-weight: 700;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
  position: relative;
  flex-shrink: 0;
}
.ajuda::after {
  content: attr(data-ajuda);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cor-texto);
  color: #fff;
  padding: 0.45rem 0.6rem;
  border-radius: var(--raio-pequeno);
  font-size: 0.75rem;
  font-weight: 400;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
  z-index: 40;
  pointer-events: none;
  box-shadow: var(--sombra-hover);
}
.ajuda:hover::after, .ajuda:focus::after { opacity: 1; visibility: visible; }

/* ===== Buttons ===== */
button, a.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--raio-pequeno);
  background: var(--cor-acento);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.83rem;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.12s, transform 0.05s;
}
button:hover, a.btn:hover { background: var(--cor-acento-hover); }
button:active, a.btn:active { transform: translateY(1px); }
button.secondary, a.btn.secondary { background: var(--cor-superficie-alt); color: var(--cor-texto); }
button.secondary:hover, a.btn.secondary:hover { background: var(--cor-borda); }
button.danger, a.btn.danger { background: var(--cor-perigo); }
button.danger:hover, a.btn.danger:hover { background: #b32e35; }

.actions { display: flex; gap: 0.55rem; margin-top: 0.85rem; flex-wrap: wrap; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }

/* ===== Tables ===== */
table { width: 100%; border-collapse: collapse; background: var(--cor-superficie); }
th, td { text-align: left; padding: 0.6rem 0.65rem; border-bottom: 1px solid var(--cor-borda); font-size: 0.85rem; }
th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-texto-suave); font-weight: 600; }
.table-wrap { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); box-shadow: var(--sombra); }
.table-wrap table { border: none; box-shadow: none; }

/* Linhas de uma linha só (sem badges/botões quebrando pra baixo) — o que
   não couber rola na horizontal via .table-wrap, em vez de esticar a
   altura da linha. */
.tabela-compacta td, .tabela-compacta th { white-space: nowrap; padding: 0.55rem 0.4rem; }
/* Textos que podem ser bem longos (nome do perfume, do cliente, código de
   rastreio) truncam com "..." em vez de esticar a coluna — o valor
   completo continua acessível pelo title (tooltip) no elemento. */
.celula-truncada { display: inline-block; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.linha-acoes { display: flex; gap: 0.2rem; align-items: center; }
.linha-acoes button { flex-shrink: 0; }
.btn-icone { padding: 0.3rem 0.4rem; font-size: 0.95rem; line-height: 1; }
.btn-icone.popover-gatilho {
  background: var(--cor-superficie-alt);
  color: var(--cor-texto);
  border: none;
  border-radius: var(--raio-pequeno);
}
.btn-icone.popover-gatilho:hover { background: var(--cor-borda); text-decoration: none; }
td .dica { margin-left: 0.4rem; }

/* Balãozinho de clique genérico — usado pra "ver comprovantes" (evita
   esticar a linha da tabela com vários links) e pra "editar pedido" (mini
   formulário). Clique (não hover) pra funcionar em touch/celular também;
   fecha ao clicar fora (ver listener em pedidos.js/cliente.js). */
.popover { position: relative; display: inline-block; }
.popover-gatilho {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--cor-acento);
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
}
.popover-gatilho:hover { text-decoration: underline; }
.popover-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.3rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra-hover);
  padding: 0.6rem 0.7rem;
  white-space: nowrap;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 20;
}
.popover.aberto .popover-menu { display: flex; }
/* Popovers da última coluna (ações da linha) abrem pra esquerda, senão o
   balãozinho nasce fora da tela em linhas perto da borda direita. */
.linha-acoes .popover-menu { left: auto; right: 0; }
.popover-menu form { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.popover-menu label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }
.popover-menu input, .popover-menu select { width: 120px; }

a.link-discreto { color: var(--cor-acento); text-decoration: none; font-weight: 600; }
a.link-discreto:hover { text-decoration: underline; }

/* ===== Stat cards / gráfico (Financeiro) ===== */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.stat-card .valor { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-card .rotulo { font-size: 0.72rem; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.2rem; font-weight: 600; }
.grafico-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1.2rem 1.3rem 1rem;
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
}
.grafico-resumo { font-size: 0.82rem; color: var(--cor-texto-suave); margin-bottom: 1.1rem; }
.grafico-resumo strong { color: var(--cor-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.grafico-corpo { display: flex; gap: 0.7rem; }
.grafico-eixo {
  width: 44px;
  flex-shrink: 0;
  height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}
.grafico-eixo span { font-size: 0.64rem; color: var(--cor-texto-fraco); font-variant-numeric: tabular-nums; line-height: 1; }
.grafico-plot { flex: 1; min-width: 0; overflow-x: auto; }
.grafico-colunas { display: flex; align-items: flex-end; gap: 3px; min-width: 100%; }
.grafico-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 16px; }
.grafico-barra-area { height: 132px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.grafico-barra {
  width: 100%;
  max-width: 16px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--cor-superficie-alt);
  transition: opacity 0.12s;
}
.grafico-barra.tem-venda { background: var(--cor-acento-suave); }
.grafico-barra.pico { background: var(--cor-acento); }
.grafico-col:hover .grafico-barra { opacity: 0.75; }
.grafico-col.hoje .grafico-barra-area { border-bottom: 2px solid var(--cor-acento); }
.grafico-col-rotulo { margin-top: 0.35rem; font-size: 0.62rem; color: var(--cor-texto-fraco); font-variant-numeric: tabular-nums; }
.grafico-col.hoje .grafico-col-rotulo { color: var(--cor-acento); font-weight: 700; }
.grafico-vazio { display: flex; align-items: center; justify-content: center; height: 132px; color: var(--cor-texto-suave); font-size: 0.85rem; margin-left: 51px; }

.grafico-tooltip {
  position: fixed;
  background: var(--cor-sidebar);
  color: #fff;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-6px);
  transition: opacity 0.1s;
  white-space: nowrap;
  z-index: 50;
}
.grafico-tooltip.visivel { opacity: 1; }

/* ===== Misc ===== */
.subnav { display: flex; gap: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--cor-borda); }
.subnav-item { padding: 0.5rem 0; font-weight: 600; color: var(--cor-texto-suave); font-size: 0.87rem; }
.subnav-item.ativo { color: var(--cor-acento); border-bottom: 2px solid var(--cor-acento); }
.endereco-card { background: var(--cor-superficie-alt); border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); padding: 0.8rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.endereco-view { line-height: 1.7; }
.filtros { display: flex; gap: 0.75rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.filtros > div { min-width: 160px; }
.erro { color: var(--cor-perigo); font-size: 0.83rem; margin-top: 0.5rem; }

.login-box {
  max-width: 340px;
  margin: 12vh auto;
  background: var(--cor-superficie);
  padding: 2.1rem;
  border-radius: var(--raio);
  border: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-hover);
}
.login-box h1 { margin-bottom: 1.3rem; }
.login-box label {
  display: block;
  margin: 0.9rem 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.login-box label:first-of-type { margin-top: 0; }

/* ===== CRM: Kanban ===== */
.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 0.8rem;
  align-items: start;
}
.kanban-coluna {
  background: var(--cor-superficie-alt);
  border-radius: var(--raio);
  padding: 0.7rem;
  min-height: 120px;
  transition: background 0.12s;
}
.kanban-coluna.sobre-coluna { background: var(--cor-acento-suave); }
.kanban-coluna-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0.3rem 0.7rem;
}
.kanban-coluna-titulo { font-size: 0.78rem; font-weight: 700; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: 0.03em; }
.kanban-coluna-contagem { font-size: 0.75rem; color: var(--cor-texto-fraco); }
.kanban-cards { display: flex; flex-direction: column; gap: 0.6rem; }
.kanban-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: 0.65rem 0.75rem;
  cursor: grab;
  box-shadow: var(--sombra);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.arrastando { opacity: 0.4; }
.kanban-card-nome { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
.kanban-card-linha { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--cor-texto-suave); margin-top: 0.3rem; }
.kanban-card-linha.esfriando { color: var(--cor-perigo); }
.kanban-card-linha.pendente { color: var(--cor-aviso); }
.kanban-card-etiquetas { margin-top: 0.3rem; }
.kanban-vazio { font-size: 0.75rem; color: var(--cor-texto-fraco); text-align: center; padding: 0.6rem 0; }

@media print {
  .no-print, .sidebar { display: none !important; }
  body { background: #fff; }
  .card { border: none; padding: 0; box-shadow: none; }
}

/* ===== Responsive: sidebar becomes a top bar ===== */
@media (max-width: 880px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 0.75rem 1rem; }
  .sidebar-brand { border-bottom: none; padding: 0; margin: 0 1rem 0 0; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .sidebar-footer { border-top: none; padding: 0; margin: 0; }
  .app-content { padding: 1.5rem 1.2rem 3rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
}