/* Margem Região (margem.html) — margem e despesa por filial.
   Herda tokens e componentes de css/styles.css (.card, .kpi-strip, .excel-btn,
   .auth-gate); aqui só o que é próprio desta tela.

   Convenção do repositório: NENHUM backdrop-filter neste arquivo, nem no
   overlay do modal. Ver o comentário no topo de css/styles.css — já borrou
   texto de botão em WebView Android três vezes, inclusive em elemento IRMÃO
   do overlay. Esta tela usa fundo sólido escuro no lugar. */

/* ---------- Topo no mesmo padrão do Painel Comercial e do GPD ----------
   20/09/2026: "o agente de layout precisa cuidar das mudanças" — deixar a
   Margem Região igual ao topo que index.html e gpd.html ganharam em
   19/09/2026 (chapa xadrez de aço com véu escuro por cima). Receita copiada
   ao pé da letra de css/styles.css (html.tema-vidro body header.top) e
   css/gpd.css (body:not(.gpd-tema-claro) header.top): mesmo degradê, mesma
   imagem, mesmo tamanho de ladrilho (127x90). Esta tela não tem botão
   claro/escuro — aplica direto em header.top, sem gate de classe no html,
   porque aqui o escuro É o único estado hoje. Se um dia ganhar o tema Aiko
   (claro), css/tema-aiko.css já traz a regra "html.tema-aiko header.top"
   pronta e cobre esta página também, sem precisar duplicar aqui. */
header.top{
  background:
    linear-gradient(180deg, rgba(10,12,16,0.66) 0%, rgba(10,12,16,0.72) 70%, rgba(10,12,16,0.88) 100%),
    url("chapa-xadrez.jpg") left top / 127px 90px repeat;
  box-shadow:0 12px 30px -16px rgba(0,0,0,0.8);
}
/* A textura de linhas repetidas do tema clássico (::before em styles.css)
   fica por cima da chapa e brigava com o desenho dela — desligada, como o
   painel e o GPD já fazem quando a chapa entra. */
header.top::before{ display:none; }

.header-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.margem-header-btn{ margin-top:0; }

.margem-fonte{
  font-size:11.5px;
  color:var(--text-faint);
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:600;
}

/* ---------- Seletor de mês ---------- */
.margem-meses{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}
.margem-mes-btn{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:13px;
  font-weight:600;
  color:var(--text-dim);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 15px;
  cursor:pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.margem-mes-btn:hover{ color:var(--text); border-color:var(--text-faint); }
.margem-mes-btn[aria-selected="true"]{
  color:#12151A;
  background:var(--accent);
  border-color:var(--accent-deep);
}

.margem-kpis{
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.margem-aviso{
  margin-top:16px;
  border:1px solid rgba(225,149,60,0.4);
  background:rgba(225,149,60,0.1);
  color:var(--warn);
  border-radius:var(--radius);
  padding:12px 16px;
  font-size:13px;
  line-height:1.5;
}

.margem-card-filiais{ margin-top:24px; }
.card + .card{ margin-top:24px; }

.margem-toolbar{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.margem-mes-pill{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:12px;
  color:var(--accent);
  border:1px solid rgba(242,183,5,0.35);
  border-radius:999px;
  padding:2px 9px;
  margin-left:6px;
  vertical-align:middle;
}

/* ---------- Cards de filial ---------- */
/* 3 colunas fixas no desktop de propósito, não auto-fit: são sempre SEIS
   filiais, e o auto-fit espalhava 5 numa linha e deixava a sexta órfã na
   linha de baixo. 3x2 fecha o bloco e ainda dá largura pro número não
   quebrar em duas linhas. */
.margem-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 1180px){ .margem-grid{ grid-template-columns: repeat(2, 1fr); } }
.margem-filial{
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 18px 14px;
  cursor:pointer;
  text-align:left;
  color:inherit;
  font:inherit;
  transition: border-color .12s, transform .12s;
}
.margem-filial:hover{ border-color:var(--accent-deep); transform:translateY(-2px); }
.margem-filial-topo{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:12px;
}
.margem-filial-nome{
  font-family:'Oswald', sans-serif;
  font-size:17px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:600;
}
.margem-filial-pct{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:19px;
  font-weight:600;
}
.margem-filial-pct.good{ color:var(--good); }
.margem-filial-pct.bad{ color:var(--bad); }

.margem-barra{
  height:8px;
  border-radius:999px;
  background:var(--line-soft);
  overflow:hidden;
  display:flex;
  margin-bottom:12px;
}
.margem-barra-desp{ background:var(--bad); }
.margem-barra-res{ background:var(--good); }

.margem-linhas{ display:grid; gap:6px; }
.margem-linha{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:13px;
}
.margem-linha span{ color:var(--text-dim); }
.margem-linha strong{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}
.margem-linha.destaque strong{ color:var(--accent); font-size:14.5px; }

.margem-filial-rodape{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line-soft);
  font-size:11.5px;
  color:var(--text-faint);
  display:flex; justify-content:space-between; gap:8px;
}
.margem-divergencia{ color:var(--warn); }

/* ---------- Tabelas ---------- */
.margem-tabela-wrap{ overflow-x:auto; }
.margem-tabela th.num, .margem-tabela td.num{ text-align:right; }
.margem-tabela thead th{ cursor:default; }
.margem-tabela thead th:hover{ color:var(--text-faint); }
.margem-tabela tbody tr{ cursor:default; }
.margem-tabela tbody td.mono{
  font-family:'JetBrains Mono', ui-monospace, monospace;
}
.margem-tabela td.nome{ font-weight:600; white-space:nowrap; }
.margem-tabela .good{ color:var(--good); }
.margem-tabela .bad{ color:var(--bad); }

.margem-evolucao td.num, .margem-evolucao th.num{ min-width:78px; }
.margem-evolucao td.heat{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:600;
  border-radius:6px;
}

/* ---------- Modal de despesas ---------- */
.margem-modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px; }
.margem-modal-backdrop{ position:absolute; inset:0; background:rgba(6,8,11,0.82); }
.margem-modal-card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  width:min(620px, 100%);
  max-height:82vh;
  overflow-y:auto;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.8);
}
.margem-modal-card h3{
  font-family:'Oswald'; font-size:15px; text-transform:uppercase; letter-spacing:0.06em;
  font-weight:600; margin-bottom:4px;
}
.margem-modal-card .card-sub{ margin-bottom:18px; }

/* ---------- Lançamento de despesa (só quem pode editar vê) ---------- */
.margem-tabela-despesas th.acoes, .margem-tabela-despesas td.acoes{ width:34px; text-align:right; }

.margem-categoria-input{
  width:100%;
  min-width:0;
  font-size:13.5px;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:6px 9px;
  font-family:inherit;
}
.margem-categoria-input:focus{ outline:none; border-color:var(--accent); }

.margem-valor-input{
  width:130px;
  text-align:right;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:14px;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:6px 9px;
}
.margem-valor-input:focus{ outline:none; border-color:var(--accent); }

.margem-excluir{
  background:none; border:none; cursor:pointer;
  color:var(--text-faint); font-size:19px; line-height:1; padding:2px 4px;
}
.margem-excluir:hover{ color:var(--bad); }

.margem-despesa-form{ margin-top:16px; }
.margem-despesa-campos{ display:flex; gap:8px; flex-wrap:wrap; }
.margem-despesa-campos input{
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 12px;
  font-size:14px;
  font-family:inherit;
}
.margem-despesa-campos input:focus{ outline:none; border-color:var(--accent); }
.margem-despesa-campos input[type="text"]{ flex:1 1 200px; min-width:0; }
.margem-despesa-campos input[type="number"]{
  width:130px; text-align:right;
  font-family:'JetBrains Mono', ui-monospace, monospace;
}
/* O <span> em volta do texto do botão NÃO é decoração: .excel-btn tem
   camada por cima e sem ele o texto some sobre o dourado. Ver a nota grande
   no topo de css/styles.css. */
.margem-despesa-campos .excel-btn{ margin-top:0; }

.margem-modal-rodape{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:18px;
  font-size:13px; color:var(--text-dim);
}
.margem-modal-rodape strong{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  color:var(--text); margin-left:6px;
}
.margem-modal-rodape strong.good{ color:var(--good); }
.margem-modal-rodape strong.bad{ color:var(--bad); }

.margem-modal-x{
  position:absolute; top:12px; right:14px;
  background:none; border:none; color:var(--text-dim);
  font-size:24px; line-height:1; cursor:pointer;
}
.margem-modal-x:hover{ color:var(--text); }

@media (max-width: 640px){
  .header-right{ align-items:flex-start; width:100%; }
  .margem-grid{ grid-template-columns:1fr; }
  .margem-kpis{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------ IMPRESSÃO
   "Preciso de opção para imprimir o resultado" (usuário, 2026-09-04).

   Impressão do próprio navegador em vez de PDF gerado por JS: o que sai no
   papel é exatamente o que está na tela, com os mesmos números, e o diálogo
   do navegador já oferece "Salvar como PDF" pra quem quer arquivo. Um
   gerador próprio seria uma segunda implementação do relatório pra manter em
   sincronia com a primeira — e é aí que os dois passam a divergir.

   O tema da tela é escuro; no papel isso vira um borrão de toner. Aqui o
   fundo é branco e o texto preto, mantendo só as cores que CARREGAM
   SIGNIFICADO (verde de resultado, vermelho de despesa/pior região) — sem
   elas o relatório impresso perde a leitura de bom/ruim que a tela dá. */
@media print{
  @page{ size: A4 portrait; margin: 12mm; }

  html, body{
    background:#fff !important;
    color:#111 !important;
  }
  /* Cabeçalho do site, seletor de mês e qualquer botão não vão pro papel:
     ninguém clica numa folha, e eles roubariam a primeira página inteira. */
  header.top,
  .margem-meses,
  .margem-header-btn,
  #margemPrintBtn,
  #margemLogoutBtn,
  #margemAuthGate,
  #margemFonte,
  #margemModal,
  .margem-filial-rodape,
  .margem-modal{
    display:none !important;
  }
  /* #margemMesTitulo fica DE FORA da lista acima de propósito: é a pílula que
     diz qual mês está impresso. Sem ela o papel sai sem identificação, e um
     relatório de resultado sem o mês não serve pra arquivar. */
  .wrap{ max-width:none; padding:0; }

  /* Cards viram blocos com borda fina: sombra e fundo escuro só gastam tinta. */
  .card,
  .margem-filial,
  .kpi,
  .margem-kpis > *{
    background:#fff !important;
    border:1px solid #bbb !important;
    box-shadow:none !important;
    color:#111 !important;
  }
  h3, .card-sub, .margem-filial-nome, .margem-linha span, .margem-linha strong{
    color:#111 !important;
  }
  .card-sub, .margem-linha span{ color:#555 !important; }

  /* Cores que significam alguma coisa sobrevivem — em tons que ainda leem
     bem impressos em preto e branco (mais escuros que os da tela). */
  .margem-filial-pct.good, .margem-tabela .good, .good{ color:#0a6b3d !important; }
  .margem-filial-pct.bad, .margem-tabela .bad, .bad{ color:#a41b1d !important; }
  .margem-linha.destaque strong{ color:#8a6100 !important; }
  /* Sem isto o Chrome descarta fundos ao imprimir — e aqui o fundo É o dado:
     as barrinhas de proporção e o mapa de calor da evolução (verde acima da
     média, vermelho abaixo) viram células brancas iguais sem ele. */
  .margem-barra, .margem-barra-desp, .margem-barra-res,
  .margem-evolucao td.heat{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Filial não pode partir no meio da página: metade dos números numa folha
     e metade na outra é pior que uma folha a mais.
     O .card NÃO entra aqui (entrava até 04/09/2026): um card do tamanho do
     bloco "Filiais" que não pode quebrar é empurrado inteiro pra próxima
     folha, e a anterior fica com um vazio enorme — foi o que o usuário viu.
     Card quebra normalmente; o que se protege é o título ficar órfão no pé
     da página, sem a tabela dele. */
  .margem-filial{ break-inside: avoid; page-break-inside: avoid; }
  .card h3, .card .card-sub{ break-after: avoid; page-break-after: avoid; }
  .margem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

  /* ---- KPIs ----
     Três defeitos do bloco de KPI só aparecem no papel, e juntos deixavam as
     seis caixas VAZIAS: (a) .kpi tem overflow:hidden e .kpi .val tem
     white-space:nowrap, então valor mais largo que a coluna é cortado fora
     em vez de quebrar; (b) o tamanho da fonte é clamp(...1.45vw...), e vw em
     mídia paginada se resolve contra a página, não contra a janela onde foi
     desenhado; (c) o rótulo reserva min-height:2.5em pra alinhar na tela,
     altura que no papel é só buraco. Aqui tudo isso é fixado em px. */
  .kpi-strip, .margem-kpis{
    background:#fff !important;
    border-color:#bbb !important;
    overflow:visible !important;
    grid-template-columns: repeat(3, 1fr) !important;
    margin-top:0 !important;
  }
  .kpi{ overflow:visible !important; padding:10px 12px !important; }
  .kpi-3d::before{ display:none !important; }
  .kpi .label{
    font-size:8.5px !important;
    min-height:0 !important;
    color:#555 !important;
    margin-bottom:2px;
  }
  .kpi .val{
    font-size:15px !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    margin-top:2px !important;
    color:#111 !important;
  }
  .kpi .val.good{ color:#0a6b3d !important; }
  .kpi .val.bad{ color:#a41b1d !important; }
  .kpi .foot{ font-size:9px !important; color:#555 !important; margin-top:2px !important; }

  /* ---- Tabelas ----
     As duas tabelas são mais largas que o A4 retrato: a do comparativo tem 8
     colunas e a da evolução tem 1 + um mês por coluna (já são 9 meses). Na
     tela o .margem-tabela-wrap rola de lado; no papel não existe rolagem, e
     o que passa da margem simplesmente some — o usuário perdeu as colunas
     RESULTADO e % RESULT. inteiras. Fonte e respiro menores fazem tudo caber
     sem precisar virar a folha pra paisagem. */
  .margem-tabela-wrap{ overflow:visible !important; }
  .margem-tabela{ width:100% !important; table-layout:auto; font-size:10px !important; }
  .margem-tabela thead th{ font-size:8px !important; padding:0 4px 5px !important; color:#555 !important; }
  .margem-tabela tbody td{ padding:5px 4px !important; }
  .margem-tabela td.nome{ white-space:nowrap; }
  /* A evolução é a mais apertada das duas — uma coluna por mês, hoje 9 e
     crescendo até 12 em dezembro. Ganha corpo menor que o comparativo pra
     continuar cabendo quando o ano fechar. E o min-width por coluna, que era
     o que estourava a largura, não vale no papel. */
  .margem-evolucao{ font-size:8.5px !important; }
  .margem-evolucao td.num, .margem-evolucao th.num{ min-width:0 !important; }
  .margem-evolucao thead th{ font-size:7px !important; }
}

/* ------------------------------------------------------------- KPIs 3D
   20/09/2026: o usuário mandou um print dos cartões do topo do Painel
   Comercial e disse "é para deixar no padrão novo" — a régua de KPIs desta
   tela (Receita das filiais / Margem bruta / Despesas / Resultado / Melhor
   região / Pior região) era uma faixa única com divisórias de 1px (receita
   antiga de .kpi-strip em css/styles.css); agora vira cartões separados.

   Nada reinventado: o HTML já marca cada KPI com "kpi kpi-3d" (ver
   js/margem.js), então o gradiente escuro do cartão e o brilho diagonal
   (::before) já vêm prontos de css/styles.css — falta só soltar a faixa
   (fundo/borda do contêiner) e arredondar/dar sombra funda em cada cartão.
   Números de sombra/brilho copiados do fim de css/gpd.css
   (body:not(.gpd-tema-claro) .gpd-plano-kpis .kpi), que é a MESMA receita
   visual do painel só que em versão OPACA — o painel usa vidro translúcido
   com backdrop-filter (css/tema-vidro-lilas.css), que esta tela não carrega
   e que a convenção do repo pede pra evitar em CSS novo (já borrou texto em
   WebView Android mais de uma vez). Alinhamento continua à esquerda, como
   a tela já usa — o GPD centraliza o conteúdo, aqui não. */
.margem-kpis{
  background:transparent;
  border:0;
  border-radius:0;
  gap:6px;
  overflow:visible;
}
.margem-kpis .kpi-3d{
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255,255,255,0.14),
    0 16px 30px -14px rgba(0,0,0,0.8),
    0 3px 8px rgba(0,0,0,0.35);
}
.margem-kpis .kpi-3d .label{
  font-size:14px;
  font-weight:700;
  letter-spacing:0.05em;
  color:#E6EAF0;
}

/* Impressão: os cartões já viram bloco branco com borda fina (regra "-webkit-
   print-color-adjust" nem entra aqui porque box-shadow:none !important já
   está coberto acima, em ".kpi"); só falta tirar o canto de 28px, que no
   papel não soma nada e ainda deixava um fio cinza curvo estranho ao lado
   do próximo cartão. */
@media print{
  .margem-kpis .kpi-3d{ border-radius:6px !important; }
}

/* ---------------------------------------------------------------------
   IMPRESSÃO COLORIDA (20/09/2026: "impressão colorida"). O bloco de print
   acima nasceu "econômico": fundo branco e TUDO em #111, com só três cores
   sobrevivendo em tons escuros. Aqui as cores voltam às da tela — o papel
   continua branco (fundo escuro gastaria tinta à toa), mas percentual,
   resultado, barras e mapa de calor saem coloridos.
   print-color-adjust:exact no documento inteiro: sem isso o Chrome descarta
   fundo/gradiente na impressão e as barrinhas saem brancas.
   --------------------------------------------------------------------- */
@media print{
  html, body{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* percentual da filial e das tabelas, nas cores da tela */
  .margem-filial-pct.good, .margem-tabela .good, .kpi .val.good, .good{ color:#12A05F !important; }
  .margem-filial-pct.bad, .margem-tabela .bad, .kpi .val.bad, .bad{ color:#D4333A !important; }
  /* linha "Resultado" de cada filial: âmbar, como na tela */
  .margem-linha.destaque strong{ color:#C08A00 !important; }
  /* pílulas de mês (topo do bloco Filiais) e faixa de aviso mantêm o âmbar */
  .margem-mes-pill, #margemMesTitulo{
    color:#8A6100 !important;
    border-color:rgba(242,183,5,0.55) !important;
    background:rgba(242,183,5,0.16) !important;
  }
  .margem-aviso{
    color:#7A5800 !important;
    border-color:rgba(242,183,5,0.55) !important;
    background:rgba(242,183,5,0.10) !important;
  }
  /* barras de proporção e mapa de calor: cor cheia, sem lavar */
  .margem-barra, .margem-barra-desp, .margem-barra-res,
  .margem-evolucao td.heat{ filter:none !important; opacity:1 !important; }
}
@media print{
  /* trilho da barra (o pedaço que sobra depois do verde/vermelho) claro no
     papel: no escuro ele é quase preto e vira um tarjão de tinta. */
  .margem-barra{ background:#E6EAEF !important; border:1px solid #cfd5dc !important; }
}

/* Retrato x Paisagem no cabeçalho (20/09/2026). Dois botões em cápsula, o
   escolhido em dourado — mesmo desenho das pílulas do painel. Não precisa
   de regra de impressão própria: mora dentro do header.top, que o @media
   print já esconde inteiro. */
.margem-orientacao{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel-2);
}
.margem-orient-btn,
.margem-ajuste-btn{
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--text-dim);
  font-family:'Inter', sans-serif;
  font-size:11.5px;
  font-weight:600;
  padding:6px 12px;
  cursor:pointer;
  white-space:nowrap;
  transition:color .15s ease, background .15s ease;
}
.margem-orient-btn:hover,
.margem-ajuste-btn:hover{ color:var(--accent); }
.margem-orient-btn.is-on,
.margem-ajuste-btn.is-on{
  color:#151a1f;
  background:linear-gradient(160deg, #ffe066 0%, #f2b705 55%, #c89100 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.6), 0 2px 5px rgba(0,0,0,0.35);
}

/* Medição pro "Caber em 1 página" (01/10/2026): por um instante, antes de
   abrir o diálogo, a tela esconde o mesmo que a impressão esconde dentro do
   .wrap, pra altura medida ser a do papel. Ver margemPrepararAjuste. */
html.margem-medindo .margem-meses,
html.margem-medindo #margemFonte,
html.margem-medindo .margem-filial-rodape,
html.margem-medindo #margemModal,
html.margem-medindo .margem-modal{ display:none !important; }