/* ==========================================================================
   Dashboard Executivo - o que e proprio do painel.

   A MOLDURA NAO ESTA AQUI: `.card`, `.card-cabecalho` e `.leads-nota` vem de
   elementos.css e leads.css, e uma copia delas viveria divergindo da original
   a cada ajuste de espacamento.

   O que este arquivo tem e o que so existe no painel: a REGUA - os numeros de
   um card em uma linha, com um selo colorido por bloco, usada pelos dois cards
   de cima - e o grafico de distribuicao por analista.

   Os dois cards de cima deixaram de usar `.metrica` e `.leads-numeros` quando
   ganharam a regua. As duas classes seguem vivas em leads.css, que e onde
   nasceram: a lista de lojas, a previa da importacao e a tela de distribuicao
   continuam com elas.

   Ver public/js/pages/dashboard/distribuicao.js, que explica POR QUE as barras
   sao deitadas e por que o comprimento delas e proporcional ao maior total.
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* As duas abas do card                                                */
/* ------------------------------------------------------------------ */
/*
 * O <wa-tab-group> nasce com uma borda inferior na regua de abas e um respiro
 * proprio; o que falta e o painel nao encostar nela.
 */
.dist-abas::part(body) {
  padding-block-start: var(--esp-4);
}

/* ------------------------------------------------------------------ */
/* A legenda                                                           */
/* ------------------------------------------------------------------ */
/*
 * ACIMA das barras, e nao embaixo: ela e o dicionario do grafico, e um
 * dicionario depois do texto e um dicionario que se le tarde demais - a pessoa
 * chega nas barras sem saber o que cada cor quer dizer e sobe de volta.
 *
 * `flex-wrap` porque sao ate oito itens: em tela estreita eles quebram em
 * linhas em vez de espremer o nome de cada etapa.
 */
.dist-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  margin: 0 0 var(--esp-5);
  padding: 0;
  list-style: none;
}

.dist-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto);
}

/*
 * A categoria ZERADA fica, apagada. Some-la faria a legenda mudar de tamanho
 * conforme o dia, e a etapa por onde ninguem esta passando e informacao - a
 * mesma decisao do card de etapas ao lado.
 */
.dist-legenda-item--vazia {
  opacity: 0.45;
}

.dist-legenda-rotulo {
  color: var(--cor-texto-fraco);
}

.dist-legenda-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cor-titulo);
}

/*
 * O quadradinho de cor. `--cor-fatia` vem no `style` de cada item, montado no
 * JS - e o mesmo mecanismo das fatias da barra, e e o que permite a regra de
 * cor morar em UM lugar so (a lista de categorias) em vez de virar oito
 * seletores aqui que teriam de repetir as siglas do dominio.
 */
.dist-marca {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--cor-fatia, var(--cor-borda-forte));
}

/* ------------------------------------------------------------------ */
/* As barras                                                           */
/* ------------------------------------------------------------------ */

.dist-barras {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Tres colunas: nome, trilho e total.
 *
 * O nome tem largura FIXA (uma faixa), e nao `auto`: com `auto` a coluna
 * acompanharia o nome mais longo da lista, e os trilhos de todas as pessoas
 * mudariam de comprimento no dia em que alguem com nome grande entrasse na
 * equipe - as barras deixariam de ser comparaveis entre um dia e outro.
 *
 * O total tambem e fixo, pelo mesmo motivo do outro lado: sem isso, a chegada
 * de alguem com 1.000 lojas encurtaria todos os trilhos de uma vez.
 */
.dist-linha {
  display: grid;
  grid-template-columns: 11rem 1fr 3.5rem;
  align-items: center;
  gap: var(--esp-3);
}

.dist-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto);
}

/*
 * O trilho e o 100% da REGUA - o maior total da aba -, e nao o total da pessoa.
 * A barra de quem tem menos simplesmente nao o preenche ate o fim, e a sobra
 * cinza e o que faz o volume ser comparavel de relance.
 *
 * `overflow: hidden` para o arredondamento das pontas valer para a primeira e a
 * ultima fatia sem que cada uma precise saber se e uma das duas.
 */
.dist-trilho {
  display: flex;
  align-items: stretch;
  height: 18px;
  border-radius: var(--raio-pill);
  background: var(--cor-superficie-baixa);
  overflow: hidden;
}

/*
 * A largura de cada fatia vem no `style`, em porcentagem. `flex: 0 0 auto`
 * porque sem isso o flex redistribuiria o espaco que sobra entre as fatias e a
 * barra fecharia sempre a largura inteira - que e exatamente a leitura que
 * escolhemos NAO dar (ver o cabecalho de distribuicao.js).
 *
 * Sem `min-width`: fatia minuscula fica minuscula, de proposito. O numero exato
 * esta no `title` da fatia e no rotulo acessivel da barra.
 */
.dist-fatia {
  flex: 0 0 auto;
  background: var(--cor-fatia, var(--cor-borda-forte));
}

.dist-total {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cor-titulo);
}

/* ------------------------------------------------------------------ */
/* A nota e o vazio                                                    */
/* ------------------------------------------------------------------ */

.dist-nota {
  margin: var(--esp-4) 0 0;
  font-size: var(--txt-corpo-p);
}

.dist-vazio {
  padding: var(--esp-6) 0;
  text-align: center;
  color: var(--cor-texto-fraco);
}

.dist-vazio p {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Tela estreita                                                       */
/* ------------------------------------------------------------------ */
/*
 * Abaixo de 640px as tres colunas nao cabem: 11rem de nome mais 3,5rem de total
 * deixariam ao trilho uma faixa curta demais para as fatias se distinguirem.
 *
 * O nome sobe para a propria linha, com o total ao lado dele, e o trilho ocupa
 * a largura toda embaixo. A comparacao entre pessoas continua valendo - todos
 * os trilhos seguem com a mesma largura e a mesma regua.
 */
@media (max-width: 640px) {
  .dist-linha {
    grid-template-columns: 1fr auto;
    gap: var(--esp-1) var(--esp-3);
  }

  .dist-trilho {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------ */
/* A regua: os numeros de um card em UMA linha, com cor por bloco       */
/* ------------------------------------------------------------------ */
/*
 * UM esqueleto, DOIS cards - as oito etapas da esteira e as quatro contagens
 * da base. Sao a mesma leitura ("de que tamanho e cada parte disto?") no mesmo
 * painel, lado a lado; dois desenhos para ela obrigariam a reaprender a ler a
 * tela do card da esquerda para o da direita. O que muda entre os dois e o
 * numero de colunas, que e o que os modificadores dizem.
 *
 * COLUNAS IGUAIS E FIXAS, sempre numa linha so - e nao o `auto-fit` de
 * `.leads-numeros`: com auto-fit o navegador quebra a regua em duas fileiras
 * assim que o card estreita, e quatro etapas em cima e quatro embaixo nao se
 * leem mais como uma escada de SC a LA - leem-se como dois grupos. O
 * `minmax(0, 1fr)` e o que permite a coluna encolher abaixo do conteudo em vez
 * de estourar a largura do card.
 *
 * O respiro e `--esp-2` e nao `--gutter`: com oito colunas, o vao do gutter
 * comeria mais largura que os proprios numeros.
 */
.regua {
  display: grid;
  gap: var(--esp-2);
}

/* As oito etapas da esteira: SC..LA, mais a perda. */
.regua--etapas {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* As quatro contagens da base: o total e tres recortes dele. */
.regua--faixas {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.regua-bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
  padding: var(--esp-2) 2px;
  border-radius: var(--raio-controle);
  background: var(--cor-superficie-baixa);

  /*
   * O cursor avisa que ha o que ler ali.
   *
   * O bloco nao e clicavel e o selo e curto por obrigacao - "CF" sozinho nao
   * diz nada a quem chegou esta semana, e "Ativas" nao diz que o numero e o
   * status `Cadastrada` da planilha. `help` e o que convida a parar o mouse em
   * cima e receber o `title` - mesma escolha da marca de edicao das atividades.
   */
  cursor: help;
}

/*
 * O rotulo e um SELO colorido - a mesma forma das pills das listas.
 *
 * ACIMA do numero e nao abaixo, ao contrario do rotulo de `.metrica`: o selo
 * e o que diz "de que isto e o numero" antes de o olho chegar no "quanto", e
 * numa regua de oito procurar PE entre elas e a primeira coisa que se faz.
 *
 * A cor entra por `--cor-selo`, no `style` de cada bloco, e nao por uma
 * variante por valor: sao duas paletas de dominio diferentes na mesma tela -
 * a rampa `--etapa-N` das etapas e as `--carteira-*` das faixas da planilha -,
 * e cada card ja e dono da sua. Mesmo mecanismo das fatias do grafico abaixo.
 *
 * ## Por que o TEXTO do selo nao e colorido, e nas pills e
 *
 * Esta e a unica diferenca em relacao a `.pill` e a `.esteira-faixa`, e ela
 * nao e descuido. Aqueles selos tem uma tripla propria por variante - tint,
 * borda e TEXTO -, com o texto escolhido a mao para bater 4,5:1 no fundo
 * tintado. Nem `--etapa-N` nem `--carteira-*` sao essa tripla: sao cores de
 * PREENCHIMENTO, com piso de 3:1 de area, e nenhuma foi escolhida para receber
 * letra em cima (ver tokens.css).
 *
 * Forcar a rampa das etapas a virar cor de texto exigiria escurecer os oito
 * tons ate 4,5:1 - e ai a rampa morre, que e justamente o que se quer ver: ela
 * vai do cinza palido de "sem contato" ao verde cheio de "loja ativa", e essa
 * variacao de luminosidade E a informacao. Escurecidos por igual, os oito viram
 * oito tons medios quase iguais.
 *
 * Entao a cor fica onde ela pode ficar inteira - a AREA do selo: a borda no tom
 * cheio e o fundo no mesmo tom diluido no fundo do bloco. A letra fica em tinta
 * neutra, legivel nos dois temas sem depender de qual degrau e.
 *
 * O `color-mix` dilui contra `--cor-superficie-baixa`, que e o fundo do bloco,
 * e nao contra branco: assim o tema escuro se resolve sozinho, sem uma segunda
 * tabela de tons. Mesma tecnica do cabecalho em layout.css.
 *
 * A cor nunca viaja sozinha: o rotulo esta escrito dentro do selo, e o nome por
 * extenso esta no `title` e no documento.
 */
.regua-selo {
  /*
   * O selo TRUNCA, e nao empurra.
   *
   * Na regua de faixas o rotulo e uma palavra inteira ("Não cadastrar"), e nao
   * uma sigla de duas letras. Sem isto ele mandaria na largura da coluna e a
   * linha unica se perderia - que e justamente o que a regua existe para
   * garantir. Truncado, o rotulo continua inteiro no `title`.
   */
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--esp-2);
  border: 1px solid var(--cor-selo, var(--cor-borda-forte));
  border-radius: var(--raio-pill);
  background: color-mix(
    in srgb,
    var(--cor-selo, var(--cor-borda-forte)) 28%,
    var(--cor-superficie-baixa)
  );
  font-size: var(--txt-rotulo);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cor-texto);
}

/*
 * `tabular-nums` sem o zero cortado, pelo mesmo motivo do contador da lista:
 * o zero riscado existe para desambiguar 0 de O num bloco de digitos (CNPJ,
 * valor), e aqui ele so viraria um simbolo estranho - e metade das etapas de
 * uma esteira que esta comecando marca justamente zero.
 */
.regua-valor {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-titulo-m);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cor-titulo);
  font-variant-numeric: tabular-nums;
}

.regua-nota {
  font-size: var(--txt-rotulo-p);
  color: var(--cor-texto-fraco);
  font-variant-numeric: tabular-nums;
}

/*
 * Estreitou, o NUMERO encolhe - a regua nao quebra.
 *
 * So na regua de OITO colunas: a largura do card cai pela metade no painel de
 * 900px e cada coluna fica com ~50px. O que estoura primeiro e "100,0%", que
 * precisa caber inteiro - e o unico texto da coluna que nao pode ser adivinhado
 * pela posicao. Diminuir o numero custa menos que perder a linha unica, que e o
 * que faz a escada ser escada.
 *
 * A regua de quatro colunas nao entra aqui: com o dobro de largura por coluna
 * ela nao aperta, e encolher o numero dela junto seria pagar o preco sem ter o
 * problema - os dois cards ficam lado a lado, e numeros de tamanhos diferentes
 * sem motivo visivel se leem como dois desenhos, e nao como um par.
 */
@media (max-width: 1200px) {
  .regua--etapas .regua-valor {
    font-size: var(--txt-titulo-p);
  }

  .regua--etapas .regua-nota {
    font-size: 10px;
  }

  /*
   * Na regua de faixas quem aperta primeiro e o SELO, e nao o numero.
   *
   * "Não cadastrar" e o rotulo mais longo da tela e, com o card pela metade,
   * ele passa da coluna e trunca. Aqui ele perde um ponto de corpo e o respiro
   * lateral, que e o bastante para caber inteiro - trocar duas letras
   * aparadas por um selo um pouco menor e barato, e a fatia e o numero ficam
   * do tamanho que estao.
   */
  .regua--faixas .regua-selo {
    padding: 0 var(--esp-1);
    font-size: var(--txt-rotulo-p);
    letter-spacing: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Os dois cards de cima terminam na MESMA linha                       */
/* ------------------------------------------------------------------ */
/*
 * Eles sao irmaos na mesma fileira da grade e se leem como um par. Com alturas
 * diferentes o par vira um degrau: o card mais curto deixa um vazio embaixo de
 * si, e o olho le esse vazio como "falta alguma coisa aqui" - quando o que ha e
 * so uma nota de rodape mais curta que a do vizinho.
 *
 * A COLUNA da grade ja tem a altura da fileira: item de grid estica por padrao.
 * Quem nao acompanhava era o `<article class="card">` dentro dela, que parava
 * na propria altura de conteudo. `height: 100%` resolve, porque a coluna tem
 * altura definida pela fileira.
 *
 * O `display: flex` vai no CARD, e nao na coluna, de proposito: a coluna troca
 * de classe conforme o escopo do usuario e pode ficar vazia (ver `montarPainel`),
 * e regra de display de autor na coluna venceria um `[hidden]` do navegador -
 * a armadilha ja documentada no botao de mover da esteira.
 *
 * Esticado o card, sobra decidir ONDE entra o espaco extra. Ele entra ANTES do
 * link, e nao depois da regua: o link de "ver a lista" e o rodape dos dois
 * cards, e alinhado nos dois o par fecha embaixo na mesma linha. O respiro
 * minimo continua sendo o do `margin-top` original, agora como `padding`.
 */
.painel-lojas > .card,
.painel-esteira > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.painel-lojas .card-corpo,
.painel-esteira .card-corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.painel-lojas .leads-acoes,
.painel-esteira .leads-acoes {
  margin-top: auto;
  padding-top: var(--esp-5);
}