/* Screen-specific tweaks */

/* Home — customer list */
.client-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pv-s-3);
}
@media (min-width: 768px) {
  .client-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1100px) {
  .client-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.client-card {
  display: grid;
  gap: var(--pv-s-3);
  padding: var(--pv-s-4);
  background: var(--pv-bg-1);
  border: 1px solid var(--pv-line);
  border-radius: var(--pv-r-lg);
  cursor: pointer;
  transition:
    transform 200ms,
    border-color 200ms,
    box-shadow 200ms;
}
.client-card:hover {
  transform: translateY(-2px);
  border-color: rgba(46, 156, 119, 0.35);
  box-shadow: var(--pv-shadow-md);
}
.client-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--pv-s-2);
}
.client-card-name {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--pv-fg-0);
  line-height: 1.3;
}
.client-card-fantasia {
  font-size: var(--t-xs);
  color: var(--pv-fg-2);
}
.client-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--pv-s-2);
}
.client-card-city {
  font-size: var(--t-xs);
  color: var(--pv-fg-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.client-card-limit {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-base);
  color: var(--pv-fg-0);
  font-weight: 600;
}
.client-card-limit.zero {
  color: var(--pv-fg-mute);
}
/* Micro-rótulo do card ("Disponível"): mesmo idioma dos demais rótulos da
   UI clara — sem caixa alta, peso 600 (antes destoava em ALL CAPS). */
.client-card-caption {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--pv-fg-2);
}

/* Customer detail */
.customer-header {
  display: flex;
  flex-direction: column;
  gap: var(--pv-s-3);
  padding: var(--pv-s-5);
  background: var(--pv-bg-1);
  border: 1px solid var(--pv-line);
  border-radius: var(--pv-r-lg);
}
.customer-header h1 {
  font-size: var(--t-xl);
}
@media (min-width: 768px) {
  .customer-header h1 {
    font-size: var(--t-2xl);
  }
}
.customer-tags {
  display: flex;
  gap: var(--pv-s-2);
  flex-wrap: wrap;
}

/* Breakpoint de viewport (768px) não é o mesmo que "espaço disponível": a
   partir de 768px a sidebar (240px) entra em cena e o conteúdo tem BEM menos
   largura que o viewport — 4 colunas fixas ali estourava (valor truncado e o
   card Score empurrado pra fora da tela, sem rolagem — P0 do pente-fino de UX,
   jul/2026). auto-fit com minmax mede o espaço REAL do container: 2 colunas
   no celular, cresce sozinho pra 3/4 conforme sobra espaço (sidebar, tablet
   paisagem, desktop) — sem media query, sem número mágico de breakpoint. */
.stats-row {
  display: grid;
  gap: var(--pv-s-3);
  /* 150px empilhava os 4 indicadores em 1 coluna em telas de 320px de largura
     (2×150px + gap já estoura os ~288px úteis depois do padding da página) —
     achado da revisão adversarial, rodada 2, ago/2026. 136px mantém 2 colunas
     no menor celular relevante sem voltar o overflow que o auto-fit evita. */
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
}

.score-stars {
  color: var(--pv-amber);
  font-size: var(--t-xl);
  letter-spacing: 0.1em;
}
.score-stars .off {
  color: var(--pv-bg-3);
}

/* Catalog */
.catalog-tabs-wrap {
  position: relative;
  margin-bottom: var(--pv-s-3);
}
/* F2 (DEC-024): topo enxuto do catálogo — busca fixa + UMA linha com os
   chips de coleção e o botão "Filtros · N" (o restante dos filtros vive na
   gaveta — ver .sheet-filtros em components.css). */
.catalog-filterbar {
  display: flex;
  flex-direction: column;
  gap: var(--pv-s-2);
}
/* Alternador de visão (Pronta entrega × Venda programada — DEC-050): estados
   de cor em components.css/apple.css (.view-toggle), junto dos outros
   controles de seleção (.chip/.tab) — aqui só a largura própria da linha
   (não esticar full-width dentro do .catalog-filterbar em coluna). */
.view-toggle {
  align-self: flex-start;
}
.catalog-toprow {
  display: flex;
  align-items: center;
  gap: var(--pv-s-3);
  min-width: 0;
}
.catalog-toprow .chip-row-wrap {
  flex: 1;
  min-width: 0;
}
.filter-group-label {
  flex-shrink: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--pv-fg-2);
}
.chip-row {
  display: flex;
  gap: var(--pv-s-2);
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar {
  display: none;
}

/* Product page */
.size-table {
  display: grid;
  gap: 4px;
}

/* Cart */
.cart-empty {
  padding: var(--pv-s-10) var(--pv-s-5);
  text-align: center;
  color: var(--pv-fg-2);
}

/* Checkout success */
.success-screen {
  text-align: center;
  padding: var(--pv-s-10) var(--pv-s-5);
  max-width: 480px;
  margin: 0 auto;
}
.success-screen .order-number {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  color: var(--pv-fg-0);
  margin: var(--pv-s-4) 0;
  letter-spacing: 0.02em;
}
.success-check {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(111, 168, 106, 0.15);
  color: var(--pv-success);
  display: grid;
  place-items: center;
  margin: 0 auto var(--pv-s-4);
}

/* Loader fullscreen */
.fullscreen-loader {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 13, 0.92);
  backdrop-filter: blur(6px);
  z-index: 700; /* escala documentada no bloco Toast de components.css */
  display: grid;
  place-items: center;
}
.fullscreen-loader .inner {
  text-align: center;
}
.fullscreen-loader .inner .spinner {
  margin: 0 auto var(--pv-s-3);
}
.fullscreen-loader .inner div:last-child {
  color: var(--pv-fg-1);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Indicadores (antigo Painel gerencial). Gráfico de evolução diária
   desenhado em SVG puro (sem lib externa — ver screens/indicadores.js). */
.chart-wrap {
  width: 100%;
}
.chart-svg {
  display: block;
  width: 100%;
  height: 180px;
}
.chart-baseline {
  stroke: var(--pv-line);
  stroke-width: 1;
}
.chart-area {
  fill: rgba(46, 156, 119, 0.14);
  stroke: none;
}
.chart-line {
  fill: none;
  stroke: var(--pv-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-dot {
  fill: var(--pv-gold);
}
.chart-top-label {
  margin-bottom: var(--pv-s-2);
}
.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--pv-s-2);
}

/* Mapa comercial (#/mapa) — SVG próprio sobre a malha municipal do IBGE
   (screens/mapaComercial.js). Mobile primeiro: mapa em coluna única; no
   desktop o painel do município abre ao lado. */
.mapa-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pv-s-3);
}
.select-uf-mapa {
  width: auto;
  min-width: 160px;
}
.legenda-vendedores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pv-s-2);
}
.legenda-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--pv-bg-2);
  border: 1px solid var(--pv-line);
  font-size: var(--t-xs);
  color: var(--pv-fg-1);
  white-space: nowrap;
}
.legenda-cor {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.mapa-sem-municipio {
  border: 1px solid var(--pv-line);
  border-radius: var(--pv-r-md);
  padding: var(--pv-s-2) var(--pv-s-3);
}
.mapa-sem-municipio summary {
  cursor: pointer;
}
.mapa-sem-municipio .stack-sm {
  margin-top: var(--pv-s-2);
}
.mapa-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pv-s-4);
  align-items: start;
}
.mapa-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
}
.mapa-municipio {
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 0.8;
  cursor: pointer;
  transition: filter 120ms;
}
.mapa-municipio:hover,
.mapa-municipio:focus-visible {
  filter: brightness(1.25);
  stroke: var(--pv-gold);
  outline: none;
}
/* Território compartilhado (2+ vendedores): tracejado grosso sinaliza a
   sobreposição no mapa — o painel do clique lista todos os donos. */
.mapa-municipio-compartilhado {
  stroke: rgba(0, 0, 0, 0.85);
  stroke-width: 2;
  stroke-dasharray: 4 2;
}
.mapa-bolha {
  fill: var(--pv-gold-hi);
  fill-opacity: 0.9;
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 0.8;
  pointer-events: none;
}
/* Painel lateral do município: no mobile o detalhe abre em bottom sheet
   (mesmo padrão do menu "Mais" de shell.js), então o aside some. */
.painel-municipio {
  display: none;
}
.linha-cliente-mapa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pv-s-2);
  padding: 8px 0;
  border-bottom: 1px solid var(--pv-line);
  color: var(--pv-fg-0);
  text-decoration: none;
}
.linha-cliente-mapa:hover .linha-cliente-nome {
  color: var(--pv-gold-hi);
}
.linha-cliente-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linha-cliente-badges {
  display: inline-flex;
  gap: var(--pv-s-1);
  flex: none;
}
/* O split lado a lado só cabe confortavelmente a partir de 1024px (mesmo
   corte de .grid-3/.catalog-grid em layout.css) — com a sidebar (240px)
   somada ao painel do município, 768px deixava o SVG menor que no mobile
   (achado do pente fino P1). Entre 768–1023 o mapa segue full-width, coluna
   única, com o detalhe do município no bottom sheet (igual mobile). */
@media (min-width: 1024px) {
  .mapa-layout {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  }
  .painel-municipio {
    display: block;
  }
}

/* ===================== Integrações (DEC-028) ===================== */
.integr-lista {
  display: flex;
  flex-direction: column;
  gap: var(--pv-s-3);
}
.integr-card {
  display: flex;
  align-items: center;
  gap: var(--pv-s-4);
  padding: var(--pv-s-4);
  background: var(--pv-bg-1);
  border: 1px solid var(--pv-border, #2a2e36);
  border-radius: var(--pv-radius-2, 12px);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.05s ease;
}
.integr-card:hover {
  border-color: var(--pv-accent, #2e9c77);
  background: var(--pv-bg-2);
}
.integr-card:active {
  transform: translateY(1px);
}
.integr-card:focus-visible {
  outline: 2px solid var(--pv-accent, #2e9c77);
  outline-offset: 2px;
}
.integr-card-icone {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--t-sm, 14px);
  letter-spacing: 0.03em;
  background: var(--pv-bg-3);
  color: var(--pv-fg-1);
}
.integr-card-corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.integr-card-titulo {
  display: flex;
  align-items: center;
  gap: var(--pv-s-2);
}
.integr-card-tag {
  font-size: var(--t-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pv-fg-2);
  border: 1px solid var(--pv-border, #2a2e36);
  border-radius: 999px;
  padding: 1px 8px;
}
.integr-card-direita {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--pv-s-3);
}
.integr-card-chevron {
  font-size: 22px;
  line-height: 1;
  color: var(--pv-fg-mute, #5f646c);
}
.integr-status {
  margin: var(--pv-s-4) 0;
  padding: var(--pv-s-3) var(--pv-s-4);
  border-radius: var(--pv-radius-2, 12px);
  border: 1px solid var(--pv-border, #2a2e36);
  background: var(--pv-bg-1);
}
.integr-status.tone-success {
  border-color: rgba(46, 156, 119, 0.35);
  background: rgba(46, 156, 119, 0.08);
}
.integr-status.tone-danger {
  border-color: rgba(176, 70, 60, 0.35);
  background: rgba(176, 70, 60, 0.08);
}
.integr-status.tone-warning {
  border-color: rgba(217, 140, 43, 0.3);
  background: rgba(217, 140, 43, 0.08);
}
.integr-resultado {
  margin-top: var(--pv-s-4);
  padding: var(--pv-s-3) var(--pv-s-4);
  border-radius: 10px;
  font-size: var(--t-sm, 14px);
}
.integr-resultado.is-ok {
  background: rgba(46, 156, 119, 0.1);
  color: var(--pv-success, #2e9c77);
  border: 1px solid rgba(46, 156, 119, 0.3);
}
.integr-resultado.is-erro {
  background: rgba(176, 70, 60, 0.1);
  color: var(--pv-danger, #b0463c);
  border: 1px solid rgba(176, 70, 60, 0.3);
}
.integr-confirmar {
  margin-top: var(--pv-s-3);
  padding: var(--pv-s-3) var(--pv-s-4);
  border-radius: 10px;
  border: 1px dashed var(--pv-border, #2a2e36);
  background: var(--pv-bg-1);
}

/* ===================== Crédito (aprovação de exceção) ===================== */
/* Os 3 cards da fila (Crédito, Gestor, Cadastros) têm título de tamanho
   diferente; ".row-between" normal quebra linha quando o título mais longo
   ("Pendentes de Gestor (2º nível · escalados)") não cabe ao lado do botão —
   o "Atualizar" pulava pra baixo só nesse card, um card com o botão em cada
   posição (achado do pente fino P1). Título trunca (não quebra) e o botão
   fica sempre fixo na mesma posição nos 3 cards. */
.credit-queue-head {
  flex-wrap: nowrap;
}
.credit-queue-head h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.credit-queue-head .btn {
  flex-shrink: 0;
}

/* ===================== Studio (DEC-027) ===================== */
/* A reserva de espaço aqui existia por causa da bottom-nav fixa (achado do
   pente fino P1); o drawer mobile (DEC-045) não ocupa espaço fixo no
   rodapé — o padding padrão de .main já é suficiente. */

/* ===================== Usuários (DEC-033) ===================== */
/* Nome/e-mail podem chegar perto do limite de 120 caracteres (padrão B.5 de
   docs/padroes-campos.md) — trunca com reticências em vez de estourar a
   lista; o valor completo fica no `title` (tooltip). `flex-wrap: nowrap`
   no cabeçalho (mesmo padrão de .credit-queue-head) para o nome encolher
   e as badges (Você/Ativo/Inativo) ficarem fixas em vez de empurrar linha. */
.usuario-linha-head {
  flex-wrap: nowrap;
}
.usuario-nome {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usuario-linha-head .badge {
  flex-shrink: 0;
}
.usuario-detalhe {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ===================== Central de Configurações (DEC-069) ===================== */
/* Hub por assunto (#/admin/configuracoes) — cada card é um <a> inteiro
   clicável (mesmo padrão de .product-card em screens.css/catalog.js);
   .card/.card-hover já dão fundo, borda e o realce de hover, então só o
   layout interno é novo aqui. Card sem tela de edição ainda (Empresa &
   Marca) nasce <div>, não <a> — sem href não pode parecer clicável. */
.config-card {
  display: flex;
  flex-direction: column;
  gap: var(--pv-s-3);
}
.config-card-head {
  display: flex;
  align-items: center;
  gap: var(--pv-s-2);
  color: var(--pv-gold);
}
.config-card-head h3 {
  margin: 0;
  color: var(--pv-fg-0);
  font-size: var(--t-base);
}
.config-card-stats {
  margin-top: auto;
  padding-top: var(--pv-s-2);
  border-top: 1px solid var(--pv-line);
}
.config-card-stat-value {
  color: var(--pv-fg-0);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.config-card-cta {
  align-self: flex-start;
}