/* Carteira (fatia 24).
   Estilos da tela "Carteira", desenhada por public/carteira.js. Só tokens do giro-v1: nenhuma
   cor, fonte ou sombra solta. Carregar depois de ds/giro-v1/tokens.css e
   ds/giro-v1/components.css.
   Onde a coluna da direita fica é decidido pela largura da própria carteira (container query), não
   da janela: a mesma tela entra na página inteira ou no miolo de 1060 px do index.html, e a tabela
   precisa de uns 820 px para não rolar de lado. Abaixo de 1140 px de carteira a coluna desce para
   baixo da tabela. Até 760 px de janela (ponto de quebra do giro-v1, ESPECIFICACAO.md) tudo vira
   uma coluna e a tabela dá lugar aos cartões por cliente (as duas formas estão no HTML, esta
   folha escolhe, como no funil da Visão geral). */

.carteira {
  container: carteira / inline-size;
  display: grid;
  gap: var(--giro-space-5);
  min-width: 0;
}

/* ---------- cabeçalho ---------- */

.carteira__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--giro-space-4);
}

.carteira__identidade {
  display: grid;
  gap: var(--giro-space-1);
  min-width: 0;
  max-width: 64ch;
}

.carteira__nome { overflow-wrap: anywhere; }

.carteira__titulo {
  display: flex;
  align-items: center;
  font-size: var(--giro-text-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--giro-text);
}

/* ---------- totais ---------- */

.carteira__totais {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--giro-space-4);
}

.carteira__total {
  display: grid;
  align-content: start;
  gap: var(--giro-space-2);
}

/* o rótulo do total é um h2 com cara de eyebrow: a regra de título do giro-v1 (.giro h2) é mais
   específica que .giro-eyebrow, então o tamanho volta aqui */
.carteira__total h2.giro-eyebrow {
  font-size: var(--giro-text-xs);
  line-height: 1.5;
  letter-spacing: .1em;
}

.carteira__numero {
  font-size: var(--giro-text-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--giro-brand-green);
  font-variant-numeric: tabular-nums;
}

.carteira__numero--vazio {
  font-size: var(--giro-text-lg);
  color: var(--giro-text-muted);
}

.carteira__total .giro-help { font-size: var(--giro-text-sm); }

/* ---------- grade: tabela à esquerda, coluna à direita ---------- */

.carteira__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--giro-space-4);
  align-items: start;
}

.carteira__coluna {
  display: grid;
  gap: var(--giro-space-4);
  min-width: 0;
}

.carteira__bloco {
  display: grid;
  gap: var(--giro-space-3);
  min-width: 0;
}

/* o cartão da tabela respira menos: a largura vai para as colunas */
.carteira__clientes { padding: var(--giro-space-4); }

/* ---------- tabela dos clientes ---------- */

.carteira__tabela .giro-table th,
.carteira__tabela .giro-table td {
  padding: var(--giro-space-3) var(--giro-space-2);
  vertical-align: top;
}

.carteira__tabela .giro-table thead th {
  font-size: var(--giro-text-xs);
  line-height: 1.4;
  vertical-align: bottom;
}

/* o nome é cabeçalho de linha, mas não leva o fundo do cabeçalho de coluna */
.carteira__tabela .giro-table tbody th {
  min-width: 9em;
  background: transparent;
  color: var(--giro-text);
  font-weight: 400;
}

.carteira__tabela .giro-table td.num { white-space: nowrap; }
/* o número não quebra; a linha de apoio embaixo dele ("de 15 abertas", "adesão 85%") pode quebrar */
.carteira__tabela .giro-table td.num .giro-help { white-space: normal; }

.carteira__celula-fase { min-width: 8.5em; }
.carteira__celula-atencao .carteira__selos { margin-top: var(--giro-space-2); }

.carteira__cliente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--giro-space-2);
  min-width: 0;
}

/* o nome do cliente é o alvo principal da linha: texto na cor de ação, 44 px de altura */
/* ".giro button { font: inherit }" do giro-v1 vence uma classe sozinha: os botões próprios desta
   tela levam o escopo .carteira para o peso e o tamanho valerem */
.carteira .carteira__abrir {
  display: inline-flex;
  align-items: center;
  min-height: var(--giro-control-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--giro-brand-green);
  font: inherit;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.carteira .carteira__abrir:hover { text-decoration: underline; }

.carteira__motivos {
  font-size: var(--giro-text-sm);
  line-height: 1.45;
}

.carteira__fase,
.carteira__portao,
.carteira__semana,
.carteira__pausa,
.carteira__adesao,
.carteira__abertas,
.carteira__nosso {
  display: block;
}

.carteira__portao,
.carteira__pausa { margin-top: var(--giro-space-1); }
.carteira__semana { margin-top: var(--giro-space-1); }
.carteira__portao .giro-badge { margin-top: var(--giro-space-1); }

.carteira__selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--giro-space-1);
}

.carteira__acao {
  padding-left: var(--giro-space-2);
  padding-right: var(--giro-space-2);
  text-align: left;
}

/* o botão discreto alinha o texto com o resto da coluna, na tabela e nos cartões */
.carteira__tabela .carteira__acao,
.carteira__dados .carteira__acao { margin-left: calc(-1 * var(--giro-space-2)); white-space: nowrap; }

/* os cartões por cliente: só abaixo de 760 px (a regra de mídia no fim troca as formas) */
.carteira__cartoes {
  display: none;
  gap: var(--giro-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carteira__cartao {
  display: grid;
  gap: var(--giro-space-2);
  padding-bottom: var(--giro-space-4);
  border-bottom: 1px solid var(--giro-border);
  min-width: 0;
}

.carteira__cartao:last-child { padding-bottom: 0; border-bottom: 0; }

.carteira__cartao-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--giro-space-2);
}

.carteira__dados,
.carteira__numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--giro-space-3);
  margin: 0;
  font-size: var(--giro-text-sm);
}

.carteira__dados div,
.carteira__numeros div { min-width: 0; }

.carteira__dados dt,
.carteira__numeros dt {
  color: var(--giro-text-muted);
  font-size: var(--giro-text-xs);
  font-weight: 600;
}

.carteira__dados dd,
.carteira__numeros dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.carteira__numeros dd strong {
  font-size: var(--giro-text-lg);
  color: var(--giro-brand-green);
}

/* "N% da trilha": o selo do cenário, a barra (progress do giro-v1) e o número, numa linha que
   quebra quando a célula é estreita. A barra tem largura fixa para as linhas da tabela alinharem. */
.carteira__trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--giro-space-1) var(--giro-space-2);
  margin-top: var(--giro-space-1);
}

.carteira__progresso {
  flex: 0 0 5.5em;
  width: 5.5em;
}

.carteira__pct { white-space: nowrap; }

/* os exemplos: a mesma lista da coluna da direita, em duas colunas quando cabe */
.carteira__exemplos {
  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
  gap: 0 var(--giro-space-5);
}

.carteira__exemplos .carteira__item { border-top: 0; padding: var(--giro-space-2) 0; }
.carteira__exemplos .carteira__trilha { margin-top: 0; }

/* ---------- coluna da direita ---------- */

.carteira__lista {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carteira__item {
  display: grid;
  gap: var(--giro-space-1);
  padding: var(--giro-space-3) 0;
  border-top: 1px solid var(--giro-border);
  min-width: 0;
}

.carteira__item:first-child { padding-top: 0; border-top: 0; }
.carteira__item:last-child { padding-bottom: 0; }

.carteira__item-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--giro-space-1) var(--giro-space-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.carteira__item .giro-help,
.carteira__ligados { overflow-wrap: anywhere; }

.carteira__link { justify-self: start; }

[data-bloco="coletores"] .carteira__item { gap: 0; padding: var(--giro-space-2) 0; }

/* fatia 28: a lixeira. A lista rola dentro do bloco (pode ter dezenas de pastas) e o botão
   restaurar fica do tamanho do texto, alinhado à esquerda como os outros links da coluna. */
.carteira__lixeira { max-height: 28rem; overflow-y: auto; }
.carteira__lixeira .carteira__item:first-child { border-top: 0; }
.carteira__lixeira .carteira__acao { justify-self: start; margin-left: calc(-1 * var(--giro-space-2)); }
[data-bloco="coletores"] .carteira__item:first-child { padding-top: 0; }

.carteira__contagens,
.carteira__coleta {
  font-size: var(--giro-text-xs);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.carteira__falhando {
  color: var(--giro-danger);
  font-weight: 700;
}

.carteira__alertas { gap: var(--giro-space-1); }

.carteira .carteira__alerta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--giro-space-1) var(--giro-space-2);
  width: 100%;
  min-height: var(--giro-control-height);
  padding: var(--giro-space-2);
  border: 1px solid transparent;
  border-radius: var(--giro-radius-md);
  background: transparent;
  color: var(--giro-text);
  font: inherit;
  font-size: var(--giro-text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--giro-duration) var(--giro-ease), border-color var(--giro-duration) var(--giro-ease);
}

.carteira .carteira__alerta:hover {
  background: var(--giro-surface-subtle);
  border-color: var(--giro-border);
}

.carteira__alerta-texto {
  flex-basis: 100%;
  color: var(--giro-text-muted);
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .carteira__alerta { transition: none; }
}

/* ---------- carteira estreita: a coluna da direita desce para baixo da tabela ---------- */

@container carteira (max-width: 1140px) {
  .carteira__grade { grid-template-columns: minmax(0, 1fr); }
  .carteira__coluna--lado { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ---------- até 760 px: uma coluna e os cartões no lugar da tabela ---------- */

@media (max-width: 760px) {
  .carteira { gap: var(--giro-space-4); }
  .carteira .giro-card { padding: var(--giro-space-4); }
  .carteira__totais { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--giro-space-3); }
  .carteira__numero { font-size: var(--giro-text-xl); }
  .carteira__novo { flex: 1 1 100%; }
  .carteira__coluna--lado { grid-template-columns: minmax(0, 1fr); }
  /* a tabela troca pelos cartões: nada de rolagem lateral escondendo o sinal de atenção */
  .carteira__tabela { display: none; }
  .carteira__cartoes { display: grid; }
}