/* ══════════════════════════════════════════════════════════════════════════════
   v2 — sistema de desenho novo.  Carrega DEPOIS do app.css e vai por cima.
   Referência: Stripe (barra lateral que colapsa, tabelas densas mas legíveis,
   cor quase só para estado).  Paleta e logótipo Knotify×BP mantêm-se.
   Ver docs/REDESENHO_V2.md.  NADA aqui muda os cálculos.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  --ctl-h:34px;            /* altura padrão de TODO o controlo: botão, campo, select */
  --ctl-h-sm:28px;         /* variante densa: campos DENTRO de tabelas (Correcção tem ~600 linhas) */
  --rail-w:236px;          /* barra lateral aberta */
  --rail-w-min:60px;       /* barra lateral fechada — só ícones */
  --radius:10px;
  --shadow-1:0 1px 2px rgba(16,42,71,.06), 0 1px 3px rgba(16,42,71,.08);
  --shadow-2:0 4px 12px rgba(16,42,71,.10), 0 2px 4px rgba(16,42,71,.06);
  --row-hover:#F7F9FC;
}

/* ── 1. BARRA LATERAL ──────────────────────────────────────────────────────── */
/* Fechada mostra ícones (poupa largura, que as tabelas precisam).
   Abre ao passar o rato, ou fica fixa se o utilizador a pregar. */

.v2 .sidebar{display:none}          /* a barra antiga em acordeão sai de cena */

.v2-rail{
  width:var(--rail-w-min); min-width:var(--rail-w-min);
  background:var(--nav); color:#fff;
  display:flex; flex-direction:column; flex-shrink:0;
  transition:width .16s ease, min-width .16s ease;
  position:relative; z-index:30;
}
.v2-rail:hover, .v2-rail.pinned{ width:var(--rail-w); min-width:var(--rail-w); }


.v2-rail-scroll{flex:1; overflow-y:auto; overflow-x:hidden; padding:14px 0 8px}
.v2-rail-scroll::-webkit-scrollbar{width:6px}
.v2-rail-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}

/* Etiqueta do grupo — só aparece com a barra aberta */
.v2-grp{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.38); padding:14px 16px 6px; white-space:nowrap;
  opacity:0; transition:opacity .12s; height:0; overflow:hidden;
}
.v2-rail:hover .v2-grp, .v2-rail.pinned .v2-grp{opacity:1; height:auto}
.v2-grp-sep{height:1px;background:rgba(255,255,255,.10);margin:8px 12px}
.v2-rail:hover .v2-grp-sep, .v2-rail.pinned .v2-grp-sep{display:none}

.v2-item{
  display:flex; align-items:center; gap:12px;
  padding:0 16px; height:38px; cursor:pointer;
  color:rgba(255,255,255,.78); font-size:13px; white-space:nowrap;
  border-left:3px solid transparent; overflow:hidden;
}
.v2-item .ic{font-size:15px; width:20px; text-align:center; flex-shrink:0}
.v2-item .tx{opacity:0; transition:opacity .12s}
.v2-rail:hover .v2-item .tx, .v2-rail.pinned .v2-item .tx{opacity:1}
.v2-item:hover{background:rgba(255,255,255,.07); color:#fff}
.v2-item.active{
  background:rgba(255,255,255,.11); color:#fff; font-weight:600;
  border-left-color:var(--bp-lime);
}

.v2-rail-foot{border-top:1px solid rgba(255,255,255,.10); padding:6px 0; flex-shrink:0}
.v2-pin{
  display:flex;align-items:center;gap:12px;padding:0 16px;height:34px;cursor:pointer;
  color:rgba(255,255,255,.45);font-size:12px;white-space:nowrap;overflow:hidden;
}
.v2-pin:hover{color:#fff}
.v2-pin .tx{opacity:0;transition:opacity .12s}
.v2-rail:hover .v2-pin .tx, .v2-rail.pinned .v2-pin .tx{opacity:1}
.v2-bp{display:flex;align-items:center;gap:8px;padding:8px 16px;overflow:hidden}
.v2-bp img{width:24px;height:24px;flex-shrink:0}
.v2-bp .tx{font-size:9px;color:rgba(255,255,255,.42);line-height:1.3;white-space:nowrap;opacity:0;transition:opacity .12s}
.v2-rail:hover .v2-bp .tx, .v2-rail.pinned .v2-bp .tx{opacity:1}

/* ── 2. BARRA DE TOPO ──────────────────────────────────────────────────────── */

.v2 .topbar{
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:0 20px; height:56px; gap:16px;
  /* flex:none é obrigatório: a barra é filha de um .main em coluna e, numa página com
     conteúdo alto, encolhia de 56 px para 35 px — os 56 px são altura DESEJADA, não
     mínima. Apanhado a medir a barra de contexto, que assenta nesta altura. */
  flex:none;
}
.v2 .topbar::before{height:2px}          /* a risca BP fica: e aqui que vive a identidade */
.v2 .topbar h1{font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.v2 .bc-ws{color:var(--text-muted);font-weight:500}
.v2 .bc-sep{color:var(--border)}

/* Procurar — passa a um botão só (opção 4, escolhida pelo dono). A caixa larga deixava um
   vazio enorme entre ela e o canto da conta; e depois da primeira semana ninguém clica nela,
   usa-se o Ctrl+K. O atalho fica no title, para quem ainda não o sabe. */
.v2 .v2-icobtn{
  width:34px;height:34px;border-radius:8px;flex:none;
  border:1px solid var(--ghost-border);background:var(--surface);color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;
  transition:background .15s, border-color .15s;
}
.v2 .v2-icobtn:hover,.v2 .v2-icobtn:focus-visible{background:var(--ghost-bg);border-color:var(--accent);outline:none}
/* Conta e sair andam juntos, separados do resto por uma linha. */
.v2 .v2-acct{display:flex;align-items:center;gap:8px;padding-left:12px;margin-left:4px;border-left:1px solid var(--border)}

/* A marca vai para o TOPO DA BARRA LATERAL, como no o9 — não para a barra de cima.
   A primeira tentativa (`outer-square-line-white`) era um quadrado 100% OPACO e 72% branco:
   na barra navy não lia como marca, lia como um buraco branco. O o9 safa-se porque a mole
   dele é ESCURA sobre barra clara; aqui seria o contrário. Usa-se agora o traçado
   transparente recolorido a branco — o símbolo pousa no navy, sem caixa.
   Fica preso à largura da barra RECOLHIDA, para não saltar de sítio quando ela abre. */
.v2-rail-head{
  height:56px; flex:none; display:flex; align-items:center; justify-content:flex-start;
  padding-left:calc((var(--rail-w-min) - 34px) / 2);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.v2-rail-head img{width:32px;height:32px;display:block;flex:none}

/* ── 3. PALETA DE COMANDOS (Ctrl+K) ────────────────────────────────────────── */
/* Resolve o "sei que a página existe mas não a encontro". */

.v2-cmdk-bg{
  position:fixed; inset:0; background:rgba(16,42,71,.34);
  display:none; z-index:1000; padding-top:12vh;
  backdrop-filter:blur(2px);
}
.v2-cmdk-bg.open{display:block}
.v2-cmdk{
  width:min(560px,92vw); margin:0 auto; background:var(--surface);
  border-radius:12px; box-shadow:var(--shadow-2); overflow:hidden;
}
.v2-cmdk input{
  width:100%; border:0; border-bottom:1px solid var(--border);
  padding:16px 18px; font-size:15px; outline:none; color:var(--text);
  font-family:inherit; background:transparent;
}
.v2-cmdk-list{max-height:340px; overflow-y:auto; padding:6px}
.v2-cmdk-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:7px; cursor:pointer; font-size:13.5px;
}
.v2-cmdk-item .ic{font-size:15px;width:20px;text-align:center}
.v2-cmdk-item .ws{margin-left:auto;font-size:11px;color:var(--text-muted)}
.v2-cmdk-item.sel{background:var(--ghost-bg)}
.v2-cmdk-item.sel .ws{color:var(--accent)}
.v2-cmdk-empty{padding:22px;text-align:center;color:var(--text-muted);font-size:13px}

/* ── 4. TABELAS ────────────────────────────────────────────────────────────── */
/* TENTATIVA FALHADA, e porque: puseram-se os cabecalhos em cinzento claro (a la Stripe)
   e ficou PIOR — o cinzento era o mesmo do fundo da pagina, por isso o cabecalho deixou
   de ser uma fronteira. O dono comparou lado a lado e disse que a v1 lia melhor. Voltou
   o navy com texto branco, mais um ponto de tamanho, riscas alternadas e mais folga nas
   linhas. Nao repetir a experiencia. */

.v2 th{
  background:var(--nav); color:#fff;
  font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  padding:10px 12px; border-bottom:2px solid var(--nav);
}
.v2 .tw-scroll th{background:var(--nav); border-bottom:2px solid var(--nav)}
.v2 td{padding:9px 12px; border-bottom:1px solid #E6ECF4; color:var(--text)}
/* Riscas alternadas: numa tabela de 15 colunas e o que impede o olho de saltar de linha. */
.v2 tbody tr:nth-child(even) td{background:#FAFCFE}
.v2 tbody tr:hover td{background:#EDF3FA}
.v2 table{font-size:13.5px}

/* Números: alinhados à direita e com algarismos de largura fixa, para as
   colunas de € baterem certo umas com as outras. */
.v2 td.num, .v2 th.num, .v2 .num{text-align:right; font-variant-numeric:tabular-nums}

/* Estado — o único sítio onde entra cor a sério */
.v2 .pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:99px;font-size:11px;font-weight:600;
  background:var(--ghost-bg);color:var(--text-muted);white-space:nowrap;
}
.v2 .pill-ok{background:#E8F6EC;color:#1B7A3D}
.v2 .pill-warn{background:#FDF3E2;color:var(--warn)}
.v2 .pill-bad{background:#FBEAEA;color:var(--danger)}
.v2 .pill-info{background:#E9F1F9;color:var(--accent)}

/* ── 5. CARTÕES ────────────────────────────────────────────────────────────── */

.v2 .card{
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-1); padding:18px 20px; margin-bottom:16px;
}
.v2 .card-hd{
  font-size:13px; font-weight:600; color:var(--text); text-transform:none;
  letter-spacing:0; margin-bottom:14px;
}
/* Cartão de resumo — a ideia do Xero: título, número grande, e UMA acção */
.v2-stat{display:flex;flex-direction:column;gap:4px}
.v2-stat .lbl{font-size:12px;color:var(--text-muted)}
.v2-stat .big{font-size:26px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.v2-stat .sub{font-size:12px;color:var(--text-muted)}
.v2-grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}

/* Estado vazio desenhado — hoje quase não existem na app */
.v2-empty{
  text-align:center;padding:46px 20px;color:var(--text-muted);
  border:1px dashed var(--ghost-border);border-radius:var(--radius);background:var(--surface);
}
.v2-empty .ic{font-size:30px;opacity:.5;display:block;margin-bottom:10px}
.v2-empty .t{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}

/* ── 6. BOTÕES E FILTROS ───────────────────────────────────────────────────── */

.v2 .btn{border-radius:7px;padding:7px 13px;font-size:12.5px;box-shadow:var(--shadow-1)}
.v2 .btn:hover{background:var(--ghost-bg)}
.v2 .btn-p{box-shadow:none}
.v2 .btn-export{border-radius:7px;box-shadow:none}

/* Ficha de filtro — campo, valor e contagem, como no o9 */
.v2-chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border);border-radius:7px;background:var(--surface);
  padding:5px 10px;font-size:12px;cursor:pointer;white-space:nowrap;
}
.v2-chip:hover{border-color:var(--ghost-border)}
.v2-chip .k{color:var(--text-muted)}
.v2-chip .v{font-weight:600}
.v2-chip .n{background:var(--ghost-bg);border-radius:99px;padding:0 6px;font-size:10.5px;color:var(--text-muted)}
.v2-chip.on{border-color:var(--accent);background:#F2F7FC}
.v2-chip.on .v{color:var(--accent)}
.v2-chipbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}

/* ── 7. ECRÃS ESTREITOS ────────────────────────────────────────────────────── */
@media (max-width:820px){
  .v2-rail{position:fixed;top:0;bottom:0;left:0}
  .v2 .main{margin-left:var(--rail-w-min)}
}

/* ── 8. CARTÕES DE PILAR (Dashboard de vendas) ─────────────────────────────── */
/* A ideia do Xero: rótulo discreto, número grande, uma linha de contexto. A cor do
   pilar deixou de ser um traço decorativo e passou a ser a barra da FATIA no total. */

.v2-sec{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--nav);margin:4px 2px 10px;
}

.v2-pill{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-1); overflow:hidden; cursor:pointer;
  transition:border-color .14s, box-shadow .14s;
}
.v2-pill:hover{border-color:var(--ghost-border); box-shadow:var(--shadow-2)}
.v2-pill.sel{border-color:var(--pill); box-shadow:var(--shadow-2)}
.v2-pill .hd{display:flex;justify-content:space-between;align-items:center;padding:13px 14px 0}
.v2-pill .hd .t{font-size:13px;font-weight:600;color:var(--text)}
.v2-pill .hd .x{font-size:14px;color:var(--ghost-border)}
.v2-pill.sel .hd .x{color:var(--pill)}
.v2-pill .big{
  padding:5px 14px 0;font-size:29px;font-weight:700;letter-spacing:-.025em;
  color:var(--nav);font-variant-numeric:tabular-nums;line-height:1.12;
}
.v2-pill .meta{padding:4px 14px 0;font-size:11.5px;color:var(--text-muted)}
.v2-pill .bar{height:4px;margin:11px 14px 0;background:var(--ghost-bg);border-radius:99px;overflow:hidden}
.v2-pill .bar i{display:block;height:100%;background:var(--pill);border-radius:99px}
.v2-pill .rows{padding:9px 0 10px}

.v2-pill-row{display:flex;align-items:center;gap:7px;padding:4px 14px;font-size:11.5px}
.v2-pill-row i{width:6px;height:6px;border-radius:50%;flex:none}
.v2-pill-row .n{color:#4A5768;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pill-row .v{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;min-width:58px;text-align:right}
.v2-pill-row .p{color:var(--text-muted);min-width:32px;text-align:right;font-size:10.5px}
.v2-pill-foot{padding:5px 14px 2px;font-size:10.5px;color:var(--text-muted)}

/* ── 9. CONTROLO SEGMENTADO E AVISOS ───────────────────────────────────────── */

.v2-seg{
  display:inline-flex; gap:2px; padding:3px; margin-bottom:14px;
  background:var(--ghost-bg); border:1px solid var(--border); border-radius:9px;
}
.v2-seg button{
  border:0; background:transparent; cursor:pointer; font:inherit;
  padding:6px 14px; border-radius:7px; font-size:12.5px; font-weight:600;
  color:var(--text-muted);
}
.v2-seg button:hover{color:var(--text)}
.v2-seg button.on{background:var(--surface); color:var(--nav); box-shadow:var(--shadow-1)}

/* Aviso: aparece quando há algo por corrigir, e leva lá. Amarelo discreto — se gritar
   sempre, deixa de se ver. */
.v2-note{
  display:flex; align-items:center; gap:9px;
  padding:9px 14px; margin-bottom:10px;
  background:#FDF9EC; border:1px solid #F3E3B8; border-radius:9px;
}
.v2-note .ic{font-size:14px;flex:none}
.v2-note .tx{font-size:12.5px;color:#8A6410;flex:1}
.v2-note .go{font-size:12px;color:#8A6410;font-weight:600;cursor:pointer;white-space:nowrap}
.v2-note .go:hover{text-decoration:underline}

/* Cinco pilares numa linha, como na v1. O auto-fit dava 4 + 1 no portátil dele e empurrava
   metade da página para baixo da dobra — o que ele viu como "só mostra parte da página". */
.v2-pillgrid{display:grid;gap:12px;margin-bottom:16px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){.v2-pillgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:780px){.v2-pillgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── 10. GRÁFICO DE EVOLUÇÃO ───────────────────────────────────────────────── */
/* Antes as barras flutuavam sem referência nenhuma: dava para ver qual era maior, não
   para dizer quanto. Entram linhas de referência com valor, a tracejado e por trás — a
   grelha é andaime, o dado é a barra. As cores passam a ser as da casa. */

.v2-chart{position:relative;padding-left:48px}
.v2-chart .grid{position:absolute;left:48px;right:0;bottom:var(--foot);height:var(--ch);pointer-events:none}
.v2-chart .grid i{position:absolute;left:0;right:0;border-top:1px dashed var(--border)}
.v2-chart .grid i.zero{border-top:1px solid var(--ghost-border)}
.v2-chart .grid i b{
  position:absolute;left:-48px;top:-7px;width:42px;text-align:right;
  font-size:10px;font-weight:500;color:var(--text-muted);font-variant-numeric:tabular-nums;
}

.v2-bars{display:flex;align-items:flex-end;justify-content:space-around;gap:var(--gap);overflow-x:auto;position:relative}
/* As barras repartem a largura, MAS com tecto. Sem o tecto, um mes sozinho dava uma barra
   com 1800 px — uma mancha de cor a atravessar o ecra, que nao e um grafico. Com tecto de
   230 px: aos 7 meses nada muda (ficam ~197 px), e uma barra sozinha fica com 230 px e
   centrada, que e como qualquer grafico a serio se comporta. */
.v2-bar-col{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  flex:1 1 0;max-width:230px;min-width:52px;cursor:pointer;transition:opacity .18s;
}
.v2-bar-col.dim{opacity:.3}
.v2-bar-col:hover{opacity:1}
.v2-bar-col .v{font-size:12.5px;font-weight:700;color:var(--nav);font-variant-numeric:tabular-nums;line-height:1.2}
.v2-bar-col .p{font-size:10px;margin-bottom:5px;font-variant-numeric:tabular-nums}
.v2-bar-col .stack{width:100%;border-radius:4px 4px 0 0;overflow:hidden;display:flex;flex-direction:column}
.v2-bar-col.sel .stack{box-shadow:0 0 0 2px var(--bp-green)}
.v2-bar-col .foot{height:var(--foot);padding-top:7px;text-align:center}
.v2-bar-col .foot .l{display:block;font-size:11px;font-weight:600;color:var(--text);white-space:nowrap}
.v2-bar-col .foot .s{display:block;font-size:9.5px;color:var(--text-muted)}

.v2-legenda{display:flex;gap:16px;flex-wrap:wrap;padding:12px 0 2px;padding-left:48px}
.v2-legenda span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.v2-legenda i{width:10px;height:10px;border-radius:3px;flex:none}

/* ── 11. SELECTOR DE PERÍODO (Dashboard + Óleos) ───────────────────────────── */
/* Eram treze botões soltos, cada um com a sua moldura — treze coisas a pedir atenção
   para responder a uma pergunta só: que período. Passam a um comando segmentado. */

.v2-ym{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.v2 .v2-ym-year{
  padding:6px 12px;border:1px solid var(--ghost-border);border-radius:8px;
  font:inherit;font-size:14px;font-weight:700;color:var(--nav);
  background:var(--surface);cursor:pointer;
}
.v2 .v2-ym-year:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,111,163,.14)}
.v2 .v2-ym-seg{display:inline-flex;height:var(--ctl-h);box-sizing:border-box;border:1px solid var(--ghost-border);border-radius:8px;overflow:hidden;background:var(--surface)}
.v2 .v2-ym-b{
  padding:0 12px;border:none;border-right:1px solid var(--border);
  background:transparent;color:var(--nav);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;line-height:1;
}
.v2 .v2-ym-b:last-child{border-right:none}
.v2 .v2-ym-b:hover:not(:disabled):not(.on){background:var(--ghost-bg)}
.v2 .v2-ym-b.on{background:var(--nav);color:#fff}
/* Mês sem dados: apagado e sem cursor — diz "não há nada aqui" sem precisar de explicação. */
.v2 .v2-ym-b:disabled{color:#C3CEDB;background:var(--page);cursor:not-allowed}

/* ── 12. CARTÃO DA CONTA ───────────────────────────────────────────────────── */
/* A barra gastava um terço da largura com nome, papel, "✓ Sincronizado" e um Sair
   vermelho — sendo o Sair a acção menos usada e a que mais saltava à vista. Fica um
   círculo com as iniciais; o estado dos dados vira um ponto de cor. */

.v2 .v2-avatar{
  position:relative;width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid var(--ghost-border);background:var(--nav);color:#fff;
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:box-shadow .15s;
}
.v2 .v2-avatar:hover,.v2 .v2-avatar.on{box-shadow:0 0 0 3px rgba(45,111,163,.18)}
/* Ponto de estado: verde sincronizado, âmbar a sincronizar, vermelho com erro. */
.v2 .v2-avatar i{
  position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--bp-green);border:2px solid var(--surface);
}

.v2-userpop{
  position:absolute;top:52px;right:16px;z-index:60;width:290px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(16,42,71,.16);padding:14px;
}
.v2-userpop[hidden]{display:none}
.v2-userpop .hd{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.v2-userpop .av{
  width:42px;height:42px;border-radius:50%;flex:none;background:var(--nav);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}
.v2-userpop .who{min-width:0}
.v2-userpop .who>div:first-child{font-size:14px;font-weight:600;color:var(--text);line-height:1.3}
.v2-userpop .mail{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-userpop .chip{
  display:inline-block;padding:3px 10px;border-radius:20px;background:var(--ghost-bg);
  border:1px solid var(--ghost-border);font-size:11.5px;font-weight:600;color:var(--nav);
}
.v2-userpop .sep{height:1px;background:var(--border);margin:12px 0}
.v2-userpop .row{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;padding:3px 0}
.v2-userpop .row .k{color:var(--text-muted);flex:none}
.v2-userpop .row>span:last-child{color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.v2-userpop .out{
  width:100%;padding:9px;border-radius:8px;border:1px solid var(--ghost-border);
  background:var(--surface);color:var(--danger);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.v2-userpop .out:hover{background:#FDF3F3;border-color:var(--danger)}

/* ── 13. BOTÃO DE SAIR ─────────────────────────────────────────────────────── */
/* Opção A, escolhida pelo dono: círculo do mesmo diâmetro do avatar, para os dois lerem
   como um par. Cinzento em repouso — sair é a acção MENOS usada da app e não pode ser o
   que mais salta à vista — e só fica vermelho quando o rato lá chega, ou seja, avisa
   antes de se carregar. Ícone em SVG e não o carácter ⏻, que em Windows sai caixa
   nalgumas fontes. */
.v2 .v2-pw{
  width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid var(--ghost-border);background:var(--surface);color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.v2 .v2-pw svg{width:17px;height:17px;display:block}
.v2 .v2-pw:hover,.v2 .v2-pw:focus-visible{color:var(--danger);border-color:var(--danger);background:#FDF3F3;outline:none}
/* O mesmo ícone dentro do cartão, ao lado da palavra. */
.v2-userpop .out svg{width:15px;height:15px;display:block}

/* ── 14. BARRA DE CONTEXTO DA PÁGINA ───────────────────────────────────────── */
/* Cola-se por baixo da barra de topo (56 px) e acompanha a rolagem. Nasceu de uma pergunta
   dele sobre o o9: o período estava no meio da página e desaparecia mal se rolasse, e a
   meio das tabelas já não havia maneira de saber se se estava a ver o ano ou só Março.
   Do o9 fica a IDEIA (contexto sempre à vista), não o mecanismo: as opções ficam abertas,
   sem janela por cima — um período de treze botões não justifica um clique extra. */
.v2-pagebar{
  position:sticky; top:56px; z-index:9;
  /* margens negativas = ao padding do .content (20 px), para a barra ir de ponta a ponta
     e o conteúdo não aparecer pelas beiras ao passar por baixo. O puxão para cima só se
     aplica quando a barra é a PRIMEIRA coisa da página — nos Óleos vem por baixo dos
     separadores e, se puxasse, tapava-os. */
  margin:0 0 14px; padding:12px 0 10px;
  background:var(--page);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.v2-pagebar:first-child{margin-top:-20px}

/* Zona de cabecalho fixa: separadores + filtro de datas, um bloco so, colado ao topo ao
   rolar. Substitui o pagebar solto no Dashboard; a dar consistencia as restantes paginas. */
.v2-headzone{ position:sticky; top:56px; z-index:9; background:var(--page);
  margin:-20px 0 14px; padding:8px 0 0; }
.v2-headzone .v2-seg{ margin-bottom:8px; }
.v2-headzone .v2-pagebar{ position:static; margin:0; padding:0 0 8px; border-bottom:none; }
/* Filtro de subconjunto (Tudo / Loja / Combustível). Vive na barra dos FILTROS,
   ao pé das datas — não ao lado dos separadores. Os separadores dizem QUE VISTA
   se está a ver; isto diz DE QUE PARTE DO NEGÓCIO. São coisas diferentes, e
   lado a lado com o mesmo peso pareciam seis botões irmãos. Por isso é mais
   pequeno e mais discreto do que o .v2-seg. */
.v2-subseg{ display:inline-flex; gap:1px; padding:2px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.v2-subseg button{ border:0; background:transparent; cursor:pointer; font:inherit;
  padding:4px 10px; border-radius:6px; font-size:12px; font-weight:600; color:var(--text-muted); }
.v2-subseg button:hover:not([disabled]){ color:var(--text) }
.v2-subseg button.on{ background:var(--nav); color:#fff }
.v2-subseg button[disabled]{ opacity:.38; cursor:not-allowed }
.v2-pagebar .v2-ym{margin-bottom:0}
.v2-pagebar .n{margin-left:auto; font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums}
/* Ficha do filtro activo — mostra o que está a filtrar e deixa limpá-lo aqui mesmo. */
.v2-pagebar .v2-chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:20px;
  background:#E8F5EE; border:1px solid #BFE3CE; color:#0B6B36;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.v2-pagebar .v2-chip b{cursor:pointer; color:#5E8C74; font-weight:700; line-height:1}
.v2-pagebar .v2-chip b:hover{color:var(--danger)}

/* ── 15. TABELA "RESULTADO POR CATEGORIA" ──────────────────────────────────── */
/* Estava a viver de estilos em linha com uma dúzia de cinzentos inventados (#f4f4f0,
   #fcfcfb, #faf9f6, #888, #777, #aaa, #bbb…) e com o cabeçalho a #faf9f6 sobre texto
   #eef2f6 — branco sobre branco, que só se lia porque a regra .v2 th tapava por cima.
   Passa a classes e à paleta. Nenhum número muda. */

.v2 table.v2-cat{width:100%;border-collapse:collapse;font-size:13px}
.v2 table.v2-cat th{
  position:sticky;top:0;z-index:1;
  padding:7px 10px;text-align:left;white-space:nowrap;
  font-size:11.5px;font-weight:600;color:#fff;background:var(--nav);
}
.v2 table.v2-cat th.num{text-align:right}
.v2 table.v2-cat td{padding:7px 10px;border-bottom:1px solid var(--border)}
.v2 table.v2-cat td.num{text-align:right;font-variant-numeric:tabular-nums}
.v2 table.v2-cat td.soft{color:var(--text-muted)}
.v2 table.v2-cat td.fee{color:#8A5C00}

/* Linha de categoria: clicável, com risca alternada e realce ao passar o rato. */
.v2 table.v2-cat tr.cat{cursor:pointer;transition:background .12s}
.v2 table.v2-cat tr.cat:nth-of-type(even){background:#FAFCFE}
.v2 table.v2-cat tr.cat:hover{background:var(--ghost-bg)}
.v2 table.v2-cat tr.cat td.lbl{font-weight:600}
/* Seleccionada: barra verde à esquerda em vez de só fundo — vê-se de relance qual está a
   filtrar o resto da página. */
.v2 table.v2-cat tr.cat.on{background:#E8F5EE}
.v2 table.v2-cat tr.cat.on td:first-child{box-shadow:inset 3px 0 0 var(--bp-green)}

/* Sub-linhas de "Outros" — recuadas e mais leves: são desdobramento, não categorias. */
.v2 table.v2-cat tr.sub td{padding:4px 10px;font-size:11.5px;color:var(--text-muted);background:#FCFDFE}
.v2 table.v2-cat tr.sub td.lbl{padding-left:26px}

/* Total: separado por cima e mais pesado, para não se confundir com mais uma linha. */
.v2 table.v2-cat tr.tot td{
  border-top:2px solid var(--nav);border-bottom:none;
  padding:9px 10px;font-weight:800;background:var(--ghost-bg);
}

/* ── 16. ABA P&L (Resultado) ───────────────────────────────────────────────── */
/* Dois problemas. Primeiro, os dois cartões tinham max-width:560px e ficavam empilhados
   num terço do ecrã, com o resto vazio. Segundo, e pior: os valores em € não alinhavam
   entre si — num P&L, comparar linhas passava por contar casas decimais com o dedo. */

.v2-pnl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:14px;align-items:start;width:100%}

/* Reserva SEMPRE o espaco da barra de scroll (scrollbar-gutter:stable). Sem isto, a barra
   aparece so nas paginas altas e empurra ~10px a barra de topo e os icones (procurar/conta/
   sair) — que assim mudavam de sitio entre paginas. Com a reserva, topo e conteudo ficam
   SEMPRE no mesmo sitio. O custo e uma tira fina (10px) a direita, igual em todas as paginas.
   (O vazio grande de antes era o bug do .app shrink-wrap, ja corrigido — nao isto.) */
.v2 .main{scrollbar-gutter:stable}
/* Barra de scroll fina e discreta — a nativa do Windows (15px, cinzenta) era grossa e feia.
   Fica 10px, polegar arredondado, sem calha; a tira reservada fica discreta. */
.v2 .main::-webkit-scrollbar{width:10px}
.v2 .main::-webkit-scrollbar-track{background:transparent}
.v2 .main::-webkit-scrollbar-thumb{background:var(--ghost-border);border-radius:6px;border:2px solid var(--page)}
.v2 .main::-webkit-scrollbar-thumb:hover{background:#9fb0c4}
.v2 .main{scrollbar-width:thin;scrollbar-color:var(--ghost-border) transparent}

/* Correccao de dados: pagina normal (rola como as outras) — UMA barra vertical (a
   pagina). A tabela e larga, por isso rola na horizontal dentro da sua caixa
   (overflow-x). Os separadores ficam colados no topo (sticky, regra #tabs-recon
   acima). Antes tentou-se altura fixa, mas prendia a pesquisa e encolhia a tabela. */

/* ── Separadores "split" (Catalogo, Promocoes) fixos ao rolar ───────────────
   Aqui a barra de separadores vive num contentor proprio (#tabs-...), separado
   do conteudo. Para o sticky ter por onde viajar, e o CONTENTOR que fica fixo
   (o parent, a .page, e alto). Mesmo aspecto do .v2-headzone das outras paginas. */
.v2 #tabs-recon,.v2 #tabs-products,.v2 #tabs-calc,.v2 #tabs-vendasug{
  position:sticky;top:56px;z-index:9;background:var(--page);
  margin:-20px -20px 14px;padding:8px 20px 0;
}
.v2 .card.v2-pnl{padding:16px}
.v2-pnl-t{font-weight:600;font-size:14.5px;color:var(--text);margin-bottom:3px}
.v2-pnl-sub{font-size:12px;color:var(--text-muted);margin-bottom:6px;line-height:1.5}
.v2-pnl-nota{font-size:11px;color:var(--text-muted);margin-top:8px;line-height:1.55}
.v2-pnl-hd{font-weight:700;font-size:12px;margin:14px 0 2px;letter-spacing:.01em}

/* Uma linha do mapa. O valor à direita, sempre com algarismos de largura fixa. */
.v2-pnl-r{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:13.5px}
.v2-pnl-r .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-pnl-r.ind1>span:first-child{padding-left:14px}
.v2-pnl-r.ind2>span:first-child{padding-left:28px}
.v2-pnl-r.neg{color:#B45309}
.v2-pnl-r.mut{color:var(--text-muted)}
.v2-pnl-r.sm{font-size:12px}
.v2-pnl-r.b{border-top:1px solid var(--border);font-weight:700;margin-top:2px;padding-top:6px}

/* Lucro total — o número que se veio aqui buscar. */
.v2-pnl-tot{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  margin-top:10px;padding:10px 0 2px;border-top:2px solid var(--nav);
  font-weight:800;font-size:16.5px;
}
.v2-pnl-tot .v{font-variant-numeric:tabular-nums}

/* Tabela da taxa BP dentro do cartão. */
.v2 .v2-pnl table{width:100%;border-collapse:collapse;font-size:13px}
.v2 .v2-pnl th{padding:7px 8px;font-size:11.5px;font-weight:600;color:#fff;background:var(--nav);text-align:right}
.v2 .v2-pnl th:first-child{text-align:left}
.v2 .v2-pnl td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:right;font-variant-numeric:tabular-nums}
.v2 .v2-pnl td:first-child{text-align:left}
.v2 .v2-pnl tbody tr:last-child td{border-bottom:none;border-top:2px solid var(--nav);font-weight:800;padding-top:8px}

/* Faixa de totais no topo do P&L. Ele deu por falta dela: o lucro só aparecia lá no fim,
   depois de percorrer todos os pilares, e as vendas totais estavam escondidas no meio de
   uma frase. São quatro parcelas e não três de propósito — com a Taxa BP à vista, a conta
   fecha diante dos olhos: vendas − custo − taxa = lucro. */
.v2-pnl-lane{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;
  margin:10px 0 4px;
}
.v2-pnl-lane>div{background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.v2-pnl-lane .k{font-size:11px;color:var(--text-muted);white-space:nowrap}
.v2-pnl-lane .v{font-size:17px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.v2-pnl-lane .v.neg{color:#B45309}
.v2-pnl-lane .v i{font-style:normal;font-size:12px;font-weight:600;opacity:.75}
.v2-pnl-lane .fim{background:var(--ghost-bg)}

/* ── 17. FAIXA DE KPI + REPARTIÇÃO POR CANAL ───────────────────────────────── */
.v2 .card.v2-kpi{margin-bottom:8px;padding:12px 4px;display:flex;flex-wrap:wrap;align-items:flex-start}
.v2-kpi .it{flex:1;min-width:150px;padding:2px 16px}
.v2-kpi .it+.it{border-left:1px solid var(--border)}
.v2-kpi .k{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:3px}
.v2-kpi .v{font-size:19px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.v2-kpi .s{font-size:10.5px;color:var(--text-muted);margin-top:2px}

/* Repartição por canal, dentro do cartão das Vendas. Estava a 10 px num cinzento
   lavado; a soma das três linhas é o próprio total do cartão, por isso tem de se ler. */
.v2-kpi-split{margin-top:7px;padding-top:6px;border-top:1px solid var(--border);padding-right:6px}
.v2-kpi-split .r{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--text-muted);line-height:1.75}
.v2-kpi-split .r .v{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* Falta de ficheiro de frota: é o que faz o Mapa Contabilístico não fechar. */
.v2-kpi-split .warn{
  margin-top:6px;padding:4px 8px;border-radius:6px;
  background:#FDF6E7;border:1px solid #E8CE95;color:#8A5C00;
  font-size:11px;font-weight:600;line-height:1.4;
}

/* ── 18. CONTROLOS — UMA ALTURA SÓ ─────────────────────────────────────────── */
/* Ele reparou que a caixa de procura e o botão do Excel tinham alturas diferentes (≈26 px
   contra 34) e disse o que interessa: isto tem de ser um PADRÃO, não um remendo. 34 px é a
   altura que já usam o avatar, o botão de sair, o de procurar e os meses do selector de
   período — logo é o botão que está certo e o campo que estava fora.
   Regra para a varredura pelas outras páginas: todo o controlo tem --ctl-h de altura,
   13 px de texto e 8 px de raio. Quem precisar de outra largura muda a largura, não a
   altura. */
.v2 .v2-input,
.v2 .btn-export,
.v2 .v2-ym-year{min-height:var(--ctl-h);height:var(--ctl-h);box-sizing:border-box}

.v2 .v2-input{
  padding:0 12px;border:1px solid var(--ghost-border);border-radius:8px;
  background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:400;
  outline:none;transition:border-color .15s, box-shadow .15s;
}
.v2 .v2-input::placeholder{color:var(--text-muted)}
.v2 .v2-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,111,163,.14)}
.v2 .btn-export{border-radius:8px;font-size:13px;padding:0 14px}

/* Atalhos de administração dentro do cartão da conta. */
.v2-userpop .v2-pop-links{display:flex;flex-direction:column;gap:2px}
.v2-userpop .lk{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;
  font-size:13px;color:var(--text);cursor:pointer;
}
.v2-userpop .lk:hover{background:var(--ghost-bg)}
.v2-userpop .lk span{font-size:14px;line-height:1;width:18px;text-align:center}

/* ═══ 19. CAMADA GLOBAL DE MIGRAÇÃO ═════════════════════════════════════════
   As 18 páginas trazem 1.559 estilos em linha. Refazê-las uma a uma como se fez o
   Dashboard seriam ~18 sessões. Esta camada arruma de uma vez o que é MECÂNICO e
   repetido — campos e células de tabela — e deixa para trabalho à mão o que carrega
   significado (cores e tamanhos de texto).

   Sim, leva !important. É a única forma de um estilo de folha ganhar a um estilo em
   linha, e é deliberadamente limitado a um punhado de propriedades de FORMA (altura,
   tipo de letra, moldura). Largura, cor e posição continuam a mandar a partir da
   página. À medida que cada página for passada à mão, os estilos em linha saem e esta
   camada deixa de ser precisa para ela. */

/* ── Campos e selects: uma forma só, em toda a app ─────────────────────────── */
.v2 input:not([type]),
.v2 input[type="text"], .v2 input[type="number"], .v2 input[type="search"],
.v2 input[type="date"], .v2 input[type="month"], .v2 select{
  height:var(--ctl-h) !important; box-sizing:border-box !important;
  font-family:inherit !important; font-size:13px !important;
  padding:0 10px !important;
  border:1px solid var(--ghost-border) !important; border-radius:8px !important;
  background:var(--surface); color:var(--text); outline:none;
}
.v2 input:focus, .v2 select:focus{
  border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(45,111,163,.14);
}
.v2 input::placeholder{color:var(--text-muted)}

/* Dentro de tabelas manda a densidade: a Correcção tem centenas de linhas com campos
   editáveis e 34 px por linha faria dela um rolo interminável. */
.v2 td input:not([type="checkbox"]):not([type="radio"]),
.v2 td select{
  height:var(--ctl-h-sm) !important; font-size:12.5px !important; padding:0 8px !important;
  border-radius:6px !important;
}

/* Caixas de selecção: só o tamanho e a cor de realce, que vinham do browser. */
.v2 input[type="checkbox"], .v2 input[type="radio"]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}

/* ── Células de tabela: uma régua só ───────────────────────────────────────── */
/* Não mexe em cor nem em alinhamento — isso é decisão de cada página. Só arruma o
   espaçamento e a linha de separação, que estavam escritos à mão 540 vezes. */
.v2 .card table td{border-bottom:1px solid var(--border)}
.v2 .card table tbody tr:last-child td{border-bottom:none}

/* ── 20. PRIMEIRA COLUNA CONGELADA (tabelas em matriz) ─────────────────────── */
/* "Compras por fornecedor" é Fornecedor + Tipo + UMA COLUNA POR MÊS + Total + Δ. Com 12
   meses são ~16 colunas: não há ecrã que as mostre sem as tornar ilegíveis, e encolher
   não é resposta — a tabela é uma matriz, é para isso que serve.
   O que se resolve é a dor real: ao arrastar para a direita perdia-se de vista DE QUEM é
   a linha. Com a primeira coluna presa, o nome anda sempre com os olhos.
   Reutilizável: basta pôr class="frz" na tabela dentro de um .tw-scroll. */

.v2 .tw-scroll table.frz th:first-child,
.v2 .tw-scroll table.frz td:first-child{
  position:sticky; left:0;
  box-shadow:1px 0 0 var(--border), 4px 0 8px -6px rgba(16,42,71,.35);
}
.v2 .tw-scroll table.frz td:first-child{z-index:2; background:var(--surface)}
.v2 .tw-scroll table.frz thead th{z-index:3}
.v2 .tw-scroll table.frz thead th:first-child{z-index:4}   /* o canto: preso em cima E à esquerda */
/* Riscas alternadas: a célula presa tem de trazer o fundo dela, senão via-se o conteúdo
   a deslizar por baixo. */
.v2 .tw-scroll table.frz tbody tr:nth-child(even) td:first-child{background:#FAFCFE}