/* Camada deste app sobre o relatorio.css (copia intacta do Comercial Inside).
   Paleta, tipografia e gradiente vieram de la: verde #2F5233 no claro e #7FB489
   no escuro, gradiente do hero #16261A -> #2F5233 -> #3E6B3F, titulos em serifa.
   O relatorio ja define os tokens para tema claro e escuro; nada aqui fixa cor
   crua fora do gradiente da marca, entao a tela acompanha o tema do sistema. */

body { background: var(--bg); color: var(--ink); text-align: left; }

:root {
  --fava-grad: linear-gradient(150deg, #16261A 0%, #2F5233 55%, #3E6B3F 100%);
  --fava-claro: #F4F7F1;
  --raio: 10px;
  --margem: clamp(12px, 3vw, 28px);
}

/* ═══════════════════════ login ═══════════════════════ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: var(--fava-grad);
}
.login-box {
  width: 100%;
  max-width: 372px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px 24px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}
.login-logo { width: 132px; height: auto; margin: 0 auto 14px; display: block; }
.login-eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.login-titulo {
  margin: 0 0 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.login-sub { margin: 0 0 20px; font-size: 12.5px; color: var(--muted); }
.login-label {
  display: block;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 0 0 5px;
}
.login-input {
  width: 100%;
  padding: 9px 11px;
  margin: 0 0 15px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.login-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.login-btn {
  width: 100%;
  padding: 10px 14px;
  margin-top: 4px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.login-btn:hover { filter: brightness(1.08); }
.login-btn[disabled] { opacity: .6; cursor: progress; }
.login-erro {
  margin: 14px 0 0;
  padding: 10px 12px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--red-ink);
  background: var(--red-bg);
  border: 1px solid var(--red-line);
  border-radius: 8px;
}
.login-rodape { margin: 0; font-size: 11px; color: rgba(244, 247, 241, .65); }


/* ═══════════════════════ navbar ═══════════════════════
   Inspirada na barra do portal "Automações Fava": faixa escura fina, brasão +
   nome à esquerda, seções à direita com a ativa em bloco verde-limão da altura
   toda, depois usuário, troca de tema e Sair. A barra fica escura nos dois
   temas de propósito — é a casca do app, como no portal. */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  gap: 14px;
  height: 54px;
  padding-left: var(--margem);
  background: #0F150F;
  border-bottom: 1px solid #1F2A1E;
}
.nav-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  text-decoration: none;
}
.nav-brasao { width: 26px; height: 26px; object-fit: contain; }
.nav-nome {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F4F7F1;
  white-space: nowrap;
}

.nav-itens {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-itens::-webkit-scrollbar { display: none; }
.nav-item {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(244, 247, 241, .72);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav-item:hover { color: #F4F7F1; background: rgba(244, 247, 241, .06); }
.nav-item.ativo {
  color: #16260F;
  background: #8FBF3F;              /* o limão do portal, para a seção corrente */
  border-bottom-color: #6E9A2C;
}

.nav-conta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 0 var(--margem) 0 14px;
  border-left: 1px solid #1F2A1E;
}
.nav-usuario {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  font-size: 11.5px;
  color: rgba(244, 247, 241, .9);
  background: rgba(244, 247, 241, .08);
  border-radius: 20px;
  white-space: nowrap;
}
.nav-usuario svg { width: 14px; height: 14px; flex: none; opacity: .75; }
.nav-usuario b { font-weight: 600; text-transform: lowercase; }

.nav-tema {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #E9C15A;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.nav-tema:hover { background: rgba(244, 247, 241, .08); }
.nav-tema svg { width: 16px; height: 16px; }
/* mostra o destino do clique: sol quando está escuro, lua quando está claro */
.nav-tema .icone-lua { display: none; }
:root[data-theme="light"] .nav-tema .icone-sol { display: none; }
:root[data-theme="light"] .nav-tema .icone-lua { display: block; color: #CFE3B4; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .nav-tema .icone-sol { display: none; }
  :root:not([data-theme]) .nav-tema .icone-lua { display: block; color: #CFE3B4; }
}

.nav-sair {
  padding: 6px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #E8796B;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.nav-sair:hover { background: rgba(232, 121, 107, .14); }

@media (max-width: 760px) {
  .nav { gap: 8px; height: 50px; }
  .nav-nome { display: none; }            /* fica só o brasão */
  .nav-usuario b { display: none; }       /* fica só o ícone de usuário */
  .nav-item { padding: 0 12px; font-size: 10.5px; }
  .nav-conta { padding-left: 8px; gap: 6px; }
}


/* ═══════════════════════ fotografia na navbar ═══════════════════════ */
.nav-foto {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 11px;
  color: rgba(244, 247, 241, .55);
  white-space: nowrap;
}

/* ═══════════════════════ resumo e cartão do representante ═══════════════════════ */
.resumo {
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  padding: 12px var(--margem) 0;
  font-size: 12px;
  color: var(--muted);
}
.resumo b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.repcard {
  display: flex;
  gap: 10px 26px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px var(--margem) 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--raio);
}
.repcard-nome {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.repcard-stat { display: flex; flex-direction: column; gap: 1px; }
.repcard-stat .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.repcard-stat .val { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ═══════════════════════ setas de tendência ═══════════════════════ */
.seta {
  margin-left: 5px;
  font-size: 10px;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0 2px;
}
.seta-sobe { color: var(--blue-ink); }
.seta-cai { color: var(--red-ink); }
.seta-igual { color: var(--green-ink); }
.seta:hover { filter: brightness(1.25); }

/* ═══════════════════════ atalhos de data ═══════════════════════ */
.atalhos { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 6px; }
.atalhos button {
  padding: 4px 10px;
  font: inherit;
  font-size: 11px;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
}
.atalhos button:hover { border-color: var(--accent); color: var(--accent); }
.atalhos button.ativo { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.campo-nota { margin: 0; font-size: 11px; line-height: 1.45; color: var(--faint); }

/* ═══════════════════════ modal de movimentos ═══════════════════════ */
.modal-fundo { position: fixed; inset: 0; z-index: 310; background: rgba(10, 14, 9, .5); }
.modal {
  position: fixed;
  z-index: 311;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 94vw);
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}
.modal-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-topo h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  color: var(--ink);
}
.modal-sub { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.modal-corpo { flex: 1; overflow-y: auto; padding: 4px 18px 18px; }
.mov-secao { margin-top: 14px; }
.mov-secao h3 { margin: 0 0 7px; font-size: 12.5px; font-weight: 700; }
.mov-secao h3.sobe { color: var(--blue-ink); }
.mov-secao h3.cai { color: var(--red-ink); }
.mov-vazio { margin: 0; font-size: 12px; color: var(--faint); }
.mov-tabela { width: 100%; border-collapse: collapse; font-size: 12px; }
.mov-tabela th {
  padding: 5px 7px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.mov-tabela td { padding: 5px 7px; border-bottom: 1px solid var(--border); color: var(--ink); }
.mov-tabela td.num, .mov-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mov-tabela tfoot td { font-weight: 700; border-bottom: none; }

/* ═══════════════════════ barra de controles ═══════════════════════ */
.barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px var(--margem) 0;
}
.filtro-icone {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.filtro-icone:hover { border-color: var(--accent); color: var(--accent); }
.filtro-icone.ativo { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.filtro-icone svg { width: 17px; height: 17px; }
.filtro-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: 2px solid var(--bg);
  border-radius: 9px;
}

.busca-wrap { position: relative; flex: 1 1 220px; min-width: 0; max-width: 420px; }
.busca-lupa {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--faint);
  pointer-events: none;
}
.busca {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
}
.busca:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.faixas { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.faixas .filterbtn {
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  border-radius: var(--raio);
}

/* ═══════ chips de filtro ativo ═══════
   Prefixo "f" porque .chip/.chips ja existem no relatorio.css, para os cartoes
   de KPI: sem o prefixo, aquele flex-direction:column deixava o chip com 68px
   de altura e o × embaixo do texto. */
.fchips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px var(--margem) 0;
}
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;          /* sem isso o rótulo quebra e o chip vira um bloco */
  padding: 4px 6px 4px 10px;
  font-size: 11.5px;
  color: var(--ink);
  background: var(--green-bg);
  border: 1px solid var(--green-line);
  border-radius: 20px;
}
.fchip b { font-weight: 700; }
.fchip-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--green-ink);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.fchip-x:hover { background: var(--green-line); }
.fchip-limpar {
  align-self: center;
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 20px;
  cursor: pointer;
}
.fchip-limpar:hover { color: var(--accent); border-color: var(--accent); }

/* ═══════════════════════ edição pendente ═══════════════════════ */
.edicao {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px var(--margem) 0;
  padding: 9px 12px;
  background: var(--edit-bg);
  border: 1px solid var(--orange-line);
  border-radius: var(--raio);
}
.edicao-texto { flex: 1 1 200px; font-size: 12px; color: var(--ink); }

/* ═══════════════════════ tabela ═══════════════════════ */
/* Sem rolagem lateral: a largura minima de 980px e o nowrap do relatorio saem,
   e as colunas menos essenciais somem por faixa de largura (ver mais abaixo). */
#conteudo > .tablewrap { margin: 14px var(--margem) 0; }
.tablewrap { border-radius: var(--raio); }
#sec-cultivar.tablewrap { overflow-x: hidden; overflow-y: auto; max-height: 72vh; }
table { min-width: 0; table-layout: auto; }
tbody td { white-space: normal; }
td.name { white-space: normal; word-break: break-word; }
thead th { white-space: normal; }
td.num, th.num, tbody td.num { white-space: nowrap; }
tfoot td { position: sticky; bottom: 0; background: var(--surface-alt); font-weight: 700; }

#conteudo > .legend { margin: 14px var(--margem) 0; }
#conteudo > .foot { margin: 10px var(--margem) 0; text-align: left; }
.avisos {
  margin: 8px var(--margem) 36px;
  padding: 0 0 0 18px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--faint);
}

/* Prioridade das colunas — a ordem de sumico foi escolhida pelo que menos
   muda a leitura: peso e obtentora primeiro, depois saldo a efetivar (hoje
   sempre 0,0), tecnologia e saldo a vender. Cultivar, vendido, faturado,
   % utilizado e valor negociado nunca somem. */
@media (max-width: 1280px) { .col-peso  { display: none; } }
@media (max-width: 1120px) { .col-obt   { display: none; } }
@media (max-width: 980px)  { .col-efet  { display: none; } }
@media (max-width: 860px)  { .col-tec   { display: none; } }
@media (max-width: 720px)  { .col-saldo { display: none; } }
@media (max-width: 600px)  { .col-disp  { display: none; } }

@media (max-width: 1000px) {
  .pill-rot { display: none; }          /* fica só o número; a cor já dá a faixa */
  .meta-input { width: 54px; }
}
@media (max-width: 860px) {
  table { font-size: 12px; }
  tbody td { padding: 6px 6px; }
  thead th { padding: 8px 6px; font-size: 10px; }
  tr.client-row td { font-size: 11px; }
  .meta-input { width: 48px; }
}
@media (max-width: 600px) {
  table { font-size: 11.5px; }
  tbody td { padding: 6px 4px; }
  thead th { padding: 7px 4px; font-size: 9.5px; }
  .pill { padding: 1px 6px; font-size: 10px; }
}

/* ═══════════════════════ gaveta de filtros ═══════════════════════ */
.gaveta-fundo {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 14, 9, .45);
}
.gaveta {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 301;
  width: min(360px, 92vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -14px 0 40px rgba(0, 0, 0, .28);
}
.gaveta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.gaveta-topo h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  color: var(--ink);
}
.gaveta-fechar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.gaveta-fechar:hover { color: var(--ink); border-color: var(--accent); }
.gaveta-fechar svg { width: 15px; height: 15px; }

.gaveta-corpo { flex: 1; overflow-y: auto; padding: 6px 18px 18px; }
.grupo { padding: 14px 0; border-bottom: 1px solid var(--border); }
.grupo:last-child { border-bottom: none; }
.grupo h3 {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.campo { display: block; margin-bottom: 10px; }
.campo > span {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.campo .selectf, .campo .ms-btn { width: 100%; }
.gaveta .multiselect { width: 100%; }
.gaveta .ms-panel { width: 100%; }

.gaveta-rodape {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.gaveta-limpar {
  flex: 1;
  padding: 9px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.gaveta-ok {
  flex: 1;
  padding: 9px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
}
.gaveta-limpar:hover { border-color: var(--accent); }
.gaveta-ok:hover { filter: brightness(1.08); }

/* ═══════════════════════ estados ═══════════════════════ */
.app-estado {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px var(--margem);
  font-size: 13px;
  color: var(--muted);
}
.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.app-erro {
  margin: 26px var(--margem);
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--red-ink);
  background: var(--red-bg);
  border: 1px solid var(--red-line);
  border-radius: var(--raio);
}