/* =========================================================================
   Painel dos Vendedores — estilos
   Diferente da TV da diretoria: aqui quem abre e' o vendedor, quase sempre
   no CELULAR, entao a pagina ROLA e e' montada mobile-first (uma coluna).
   Em tela larga (tablet/TV do salao) o grid vira 3 colunas.

   Tema escuro unico, igual ao painel de TV, pra as duas telas parecerem do
   mesmo sistema.
   ========================================================================= */

:root {
  color-scheme: dark;
  --surface-1: #17171a;
  --surface-2: #0b0b0d;
  --surface-3: #212126;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #8b8a84;
  --border: rgba(255,255,255,0.09);

  --acento: #3987e5;
  --ouro:   #e8b923;
  --prata:  #b9c2cc;
  --bronze: #c87d43;

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #e66767;

  --radius: 14px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  padding: 12px;
  padding-bottom: 32px;
}

/* ---------------------------------------------------------------- header */

.vd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 4px 14px;
}

.vd-titulo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.vd-marca { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; }

.vd-mes {
  font: inherit;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  cursor: pointer;
}
.vd-mes option { background: var(--surface-1); color: var(--text-primary); }

.vd-atualizado { font-size: 0.72rem; color: var(--text-muted); }
.vd-atualizado.stale { color: var(--warning); }

/* ----------------------------------------------------------------- grid */

.vd-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.vd-main[hidden] { display: none; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  min-width: 0;
}

.card-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.card h2 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
}

.card-sub {
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: none;
}

/* ------------------------------------------------------- meta / barra */

.meta-numeros {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.meta-numeros strong { font-size: clamp(1.7rem, 7vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; }
.meta-numeros span { font-size: 0.85rem; color: var(--text-muted); }
.meta-numeros .meta-pct { margin-left: auto; font-size: 1.15rem; font-weight: 700; color: var(--acento); }

.selo {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.selo:empty { display: none; }
.selo.bronze { color: var(--bronze); }
.selo.prata  { color: var(--prata); }
.selo.ouro   { color: var(--ouro); }

.barra-trilho {
  position: relative;
  height: 26px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.barra-preenchida {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2a78d6, #3987e5);
  transition: width 700ms ease;
}
.barra-preenchida.bronze { background: linear-gradient(90deg, #a2632f, var(--bronze)); }
.barra-preenchida.prata  { background: linear-gradient(90deg, #8e97a1, var(--prata)); }
.barra-preenchida.ouro   { background: linear-gradient(90deg, #c2971a, var(--ouro)); }

/* Rotulo do alvo da barra. A barra mede ate a PROXIMA medalha, e o "75%"
   grande do cabecalho mede a meta do mes - dois percentuais diferentes na
   mesma area, entao o alvo vai escrito junto da barra pra nao confundir. */
.barra-alvo {
  display: flex;
  justify-content: flex-end;
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Selos das tres medalhas: o ladder inteiro de relance. Conquistada acende
   e ganha ✓; pendente fica apagada. Substituiu as marcas na barra, que
   ficavam impossiveis de ler (560k/580k/600k caem a ~3% de distancia uma da
   outra quando a regua vai de 0 ate 600k). */
.barra-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.selo-faixa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--text-muted);
  white-space: nowrap;
}
.selo-faixa .emoji { font-size: 0.95rem; filter: grayscale(1) opacity(0.4); }
.selo-faixa .legenda-nome { font-weight: 700; }
.selo-faixa .legenda-valor { opacity: 0.8; }
.selo-faixa .legenda-check { font-weight: 700; }

.selo-faixa.atingida { color: var(--text-primary); }
.selo-faixa.atingida .emoji { filter: none; }
.selo-faixa.bronze.atingida { border-color: var(--bronze); background: rgba(200,125,67,0.14); }
.selo-faixa.prata.atingida  { border-color: var(--prata);  background: rgba(185,194,204,0.14); }
.selo-faixa.ouro.atingida   { border-color: var(--ouro);   background: rgba(232,185,35,0.14); }
.selo-faixa.bronze.atingida .legenda-check { color: var(--bronze); }
.selo-faixa.prata.atingida .legenda-check  { color: var(--prata); }
.selo-faixa.ouro.atingida .legenda-check   { color: var(--ouro); }

.meta-frase {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.meta-frase b { color: var(--text-primary); }

/* -------------------------------------------------------------- ranking */

.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* Quando a equipe cresce, o cartao rola por dentro. Um degrade no pe avisa
   que tem mais gente embaixo - sem isso a ultima linha so' aparece cortada
   e parece defeito. So' aparece quando REALMENTE ha o que rolar (a classe
   e' posta pelo JS), senao seria uma sombra permanente por cima do ultimo
   colocado. */
.card-ranking { position: relative; }
.card-ranking.tem-scroll::after {
  content: '';
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  height: 26px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(to top, var(--surface-1), transparent);
  pointer-events: none;
}

.linha-vd {
  display: grid;
  grid-template-columns: 2.1rem 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  position: relative;
  overflow: hidden;
  /* A linha NUNCA encolhe. Sem isso o flex do cartao espremia as linhas e
     cortava o "7x 1o do dia" pela metade quando o espaco apertava - o certo
     e' a lista rolar por dentro, nao o texto sumir. */
  flex: 0 0 auto;
}
/* Barra de participacao no total da equipe, atras do conteudo da linha. */
.linha-vd::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: rgba(57,135,229,0.16);
}
.linha-vd > * { position: relative; }

.linha-vd.p1 { background: rgba(232,185,35,0.12); box-shadow: inset 0 0 0 1px rgba(232,185,35,0.35); }
.linha-vd.p2 { background: rgba(185,194,204,0.10); box-shadow: inset 0 0 0 1px rgba(185,194,204,0.28); }
.linha-vd.p3 { background: rgba(200,125,67,0.10); box-shadow: inset 0 0 0 1px rgba(200,125,67,0.28); }

.medalha { font-size: 1.35rem; text-align: center; line-height: 1; }
.medalha.num { font-size: 0.9rem; font-weight: 700; color: var(--text-muted); }

.vd-nome { font-weight: 700; font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O "faltam R$ X pro 2o" e' o gancho da tela - ele pode quebrar em duas
   linhas no celular em vez de ser cortado com reticencias. */
.vd-extra {
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: normal;
  line-height: 1.35;
}
.vd-valor { font-weight: 700; font-size: 1rem; white-space: nowrap; }

.ranking-semana .linha-vd { grid-template-columns: 2.1rem 1fr auto; }

/* Mini barras de % da meta por semana */
.semanas-barras { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.sem-linha { display: grid; grid-template-columns: 5.6rem 1fr 2.9rem; align-items: center; gap: 8px; font-size: 0.72rem; }
.sem-rotulo { color: var(--text-muted); white-space: nowrap; }
.sem-trilho { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.sem-fill { height: 100%; border-radius: 999px; background: var(--acento); }
.sem-fill.good { background: var(--good); }
.sem-fill.warning { background: var(--warning); }
.sem-pct { text-align: right; color: var(--text-secondary); }

/* --------------------------------------------- os quatro blocos iguais

   Semana · Itens por pessoa · CMV médio · Ticket médio tem todos a MESMA
   anatomia (título · número grande · barra · legenda) de proposito: no
   desenho da diretoria eles sao quatro quadrados iguais, e a leitura de
   relance so' funciona se o olho achar o numero sempre no mesmo lugar. */

.bloco { display: flex; flex-direction: column; }

.bloco-tag {
  font-size: 0.66rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bloco-valor {
  font-size: clamp(1.6rem, 4.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: auto 0 10px;           /* empurra o numero pro meio do bloco */
  white-space: nowrap;
}
.bloco-valor.good { color: var(--good); }
.bloco-valor.warning { color: var(--warning); }
.bloco-valor.critical { color: var(--critical); }

.bloco-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  margin-bottom: 8px;
}
.bloco-barra > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--acento);
  transition: width 600ms ease;
}
.bloco-barra > span.good { background: var(--good); }
.bloco-barra > span.warning { background: var(--warning); }
.bloco-barra > span.critical { background: var(--critical); }

.bloco-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ------------------------------------------------- medidores e numeroes */

.medidores { display: flex; flex-direction: column; gap: 12px; margin: auto 0 0; }

.medidor-rotulo {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.78rem; margin-bottom: 5px;
}
.medidor-rotulo b { font-size: 1.05rem; }
.medidor-rotulo .meta-txt { color: var(--text-muted); font-size: 0.7rem; }
.medidor-trilho { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.medidor-fill { height: 100%; border-radius: 999px; background: var(--acento); transition: width 600ms ease; }
.medidor-fill.good { background: var(--good); }
.medidor-fill.warning { background: var(--warning); }

.numerao { font-size: clamp(1.8rem, 9vw, 2.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.numerao.good { color: var(--good); }
.numerao.warning { color: var(--warning); }
.numerao.critical { color: var(--critical); }
.numerao-sub { margin-top: 6px; font-size: 0.78rem; color: var(--text-muted); }

/* ------------------------------------------------------ estado / avisos */

.vd-estado { padding: 30px 6px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
.vd-estado[hidden] { display: none; }

.vd-aviso {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(250,178,25,0.12);
  border: 1px solid rgba(250,178,25,0.35);
  color: #ffdf9e;
  font-size: 0.74rem;
  line-height: 1.45;
}
.vd-aviso[hidden] { display: none; }

/* ------------------------------------------------------------ telas largas

   Aqui a tela vira o desenho da diretoria: TRES faixas, tudo visivel de uma
   vez, sem rolagem. O celular continua empilhando e rolando (nao tem como
   caber 6 blocos numa tela de 390px), mas no desktop/tablet/TV o painel e'
   uma coisa so':

       ┌──────────────── META DO MÊS ────────────────┐
       ├── TOP VENDEDORES ──┬─ SEMANA ─┬─ ITENS/PES ─┤
       ├──── DESPERDÍCIO ───────────────┬─ TICKET ───┤
*/

@media (min-width: 900px) {
  html, body { height: 100%; }
  body {
    padding: 14px 18px;
    overflow: hidden;                       /* nada de rolagem: tela unica */
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;  /* header · painel · estado · aviso */
    gap: 0;
  }

  .vd-main {
    /* Coluna 1 = ranking (o bloco alto da esquerda no desenho).
       Colunas 2 e 3 = os quatro blocos iguais, em 2 x 2. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
  }

  .card-meta     { grid-column: 1 / -1; grid-row: 1; }
  .card-ranking  { grid-column: 1;      grid-row: 2 / 4; }  /* altura inteira */
  #bl-semana     { grid-column: 2;      grid-row: 2; }
  #bl-itens      { grid-column: 3;      grid-row: 2; }
  #bl-cmv        { grid-column: 2;      grid-row: 3; }
  #bl-ticket     { grid-column: 3;      grid-row: 3; }

  /* Sem min-height:0 os cartoes se recusam a encolher e a pagina volta a
     rolar mesmo com overflow:hidden no body. */
  .card { min-height: 0; display: flex; flex-direction: column; }

  /* Se a equipe crescer, a rolagem fica DENTRO do ranking - a pagina em si
     continua sem rolar. */
  .ranking { overflow-y: auto; min-height: 0; }

  .vd-marca { font-size: 1.45rem; }
}