/* ==========================================================================
   Manto Alpha — Painel do dono (Fase 2)
   Responsabilidade única: estilos do módulo de produtos no admin — formulário,
   grade de estoque e lista. Consome os tokens de tokens.css e assume o shell
   (header, botões, toasts) já definido em base.css.
   ========================================================================== */

/* ==========================================================================
   Abas do painel
   Cinco seções numa página só. No celular a fila rola na horizontal em vez de
   quebrar em duas linhas: mantém tudo ao alcance do polegar numa faixa só.
   ========================================================================== */
.abas {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--ma-line);
  overflow-x: auto;
  scrollbar-width: none; /* a régua visual é o corte do último item */
}

.abas::-webkit-scrollbar {
  display: none;
}

.aba {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--peso-medio);
  color: var(--ma-ink-muted);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: var(--sp-3) var(--sp-4);
  min-height: 44px; /* alvo de toque confortável no celular */
  white-space: nowrap;
  cursor: pointer;
}

.aba:hover {
  color: var(--ma-ink);
}

/* Aba ativa: texto preto com o filete amarelo da marca embaixo. */
.aba--ativa {
  color: var(--ma-ink);
  font-weight: 700;
  border-bottom-color: var(--ma-accent);
}

.aba:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: -2px;
}

/* Contador de pedidos aguardando ação, preenchido por admin-abas.js. */
.aba__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--raio-full);
  background: var(--ma-accent);
  color: var(--ma-on-accent);
  font-size: var(--fs-xs);
  font-weight: var(--peso-forte);
}

/* O painel recebe foco (tabindex=0) porque a Visão geral é só texto: sem isso,
   quem navega por teclado não teria como rolar o conteúdo da aba. */
.aba-painel:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 4px;
  border-radius: var(--raio-sm);
}

/* ==========================================================================
   Barra de ação das listas — botão principal + busca
   ========================================================================== */
.barra-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Um amarelo por tela: com o formulário aberto, o primário é "Salvar
   produto" e o "+ Novo produto" passa a preto. */
#painel-produtos:has(> .form-produto:not([hidden])) .barra-acoes .btn--dourado,
#painel-financeiro:has(> #form-despesa:not([hidden])) .barra-acoes .btn--dourado,
#painel-afiliados:has(> #form-afiliado:not([hidden])) .barra-acoes .btn--dourado,
/* Configurações da loja moram na mesma aba das despesas: são ação secundária. */
#form-loja .btn--dourado {
  background: var(--ma-surface-inverse);
  color: var(--ma-ink-inverse);
}

/* A busca ocupa a sobra da linha e desce inteira no celular. */
.campo--busca {
  flex: 1 1 220px;
}

/* Segundo bloco da mesma aba (ex.: "Loja" depois da lista de despesas). */
.lista-produtos + .secao__titulo {
  margin-top: var(--sp-6);
}

.secao__titulo--menor {
  font-size: var(--fs-lg);
}

/* ==========================================================================
   Alertas acionáveis
   Cada um é um botão que leva à aba onde a pendência se resolve. A área some
   inteira quando não há nada a fazer.
   ========================================================================== */
.alertas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* Aviso da marca (.ma-alert--info): fundo creme-amarelado, texto preto. */
.alerta {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  color: var(--ma-ink);
  background: var(--ma-warning-bg);
  border: 1.5px solid var(--ma-amarelo-profundo);
  border-radius: var(--ma-radius-md);
  padding: var(--sp-3) var(--sp-4);
  min-height: 44px;
  cursor: pointer;
}

.alerta:hover {
  border-color: var(--ma-ink);
}

.alerta:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Dashboard — tiles de indicador (Fase 6)
   Números em texto (creme), nunca na cor da série; status usa cor semântica
   sempre acompanhada de rótulo textual.
   ========================================================================== */
.painel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.kpi {
  display: grid;
  gap: var(--sp-1);
  align-content: start;
  background: var(--ma-surface-raised);
  border: 1px solid var(--ma-line);
  border-radius: var(--raio-md);
  padding: var(--sp-4);
}

.kpi__rotulo {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ma-ink-muted);
}

.kpi__valor {
  font-size: var(--fs-xl);
  font-weight: var(--peso-forte);
  color: var(--ma-ink);
}

.kpi__nota {
  font-size: var(--fs-xs);
  color: var(--ma-ink-muted);
}

.kpi__status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ma-ink);
}

.kpi__ponto {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-full);
  flex-shrink: 0;
}

.kpi__ponto--novo { background: var(--ma-accent); }
.kpi__ponto--confirmado { background: var(--ma-success); }
.kpi__ponto--entregue { background: var(--ma-ink); }
.kpi__ponto--cancelado { background: var(--ma-line-strong); }

/* ==========================================================================
   Gráficos (SVG desenhado por admin-graficos.js)
   O SVG escala pelo viewBox; a folha só cuida da moldura e do texto ao redor.
   ========================================================================== */
.graficos {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

@media (min-width: 900px) {
  /* O Receita × Despesa ocupa a linha inteira; os outros dois dividem. */
  .graficos {
    grid-template-columns: 1fr 1fr;
  }

  .graficos > .gr:first-child {
    grid-column: 1 / -1;
  }
}

.gr {
  background: var(--ma-surface-raised);
  border: 1px solid var(--ma-line);
  border-radius: var(--raio-md);
  padding: var(--sp-4);
  margin: 0;
  min-width: 0; /* deixa o SVG encolher dentro da grade */
  /* A tabela de dados oculta (leitor de tela) não encolhe a 1px como um div:
     sem prendê-la aqui, ela alargava a página no celular. */
  position: relative;
  overflow: hidden;
}

.gr__titulo {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ma-ink);
}

.gr__sub {
  font-size: var(--fs-xs);
  color: var(--ma-ink-muted);
  margin-bottom: var(--sp-3);
}

.gr__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* admin-graficos.js pinta texto e grade por atributo SVG (cores pensadas para
   o fundo preto). CSS vence atributo de apresentação, então o tema claro é
   ajustado aqui sem tocar no módulo. As barras mantêm as cores das séries. */
.gr__svg text {
  fill: var(--ma-ink-muted);
  font-family: var(--ma-font-sans);
}

.gr__svg line {
  stroke: var(--ma-line);
}

/* Legenda: o quadradinho carrega a cor, o texto fica em tom de texto. */
.gr__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.gr__chave {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ma-ink-muted);
}

.gr__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Uma categoria só: o número é a resposta, não uma barra sozinha na escala.
   Figura grande usa os algarismos proporcionais da fonte (nada de tabular-nums,
   que deixa "121" frouxo neste tamanho). */
.gr__unico {
  padding: var(--sp-4) 0;
}

.gr__unico-valor {
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--ma-ink);
  line-height: 1.1;
}

.gr__unico-rotulo {
  font-size: var(--fs-sm);
  color: var(--ma-ink-muted);
}

/* ==========================================================================
   Formulário
   ========================================================================== */
.form-produto {
  display: grid;
  gap: var(--sp-4);
  background: var(--ma-surface-raised);
  border: 1px solid var(--ma-line);
  border-radius: var(--raio-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* Átomos de campo (.campo, rótulo, dica, inputs) moram em base.css — são
   usados também pelo diálogo do produto e pelo perfil do cliente. */

/* Duas colunas a partir do tablet; no celular tudo empilha. */
.form-produto__linha {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .form-produto__linha {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Grade de estoque por tamanho ----
   Colunas acompanham a grade da categoria (4 na camiseta, 5 na calça,
   1 no boné) sem precisar de CSS novo por categoria. */
.grade-estoque {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--sp-3);
}

.grade-estoque .campo__rotulo {
  text-align: center;
  letter-spacing: 0.06em;
}

.grade-estoque input {
  text-align: center;
}

/* ---- Lista de fotos do produto ----
   Uma linha por foto: ordem, URL e remover. A URL ocupa o espaço que sobra
   porque links do Cloudinary são longos e o dono precisa conferir o que colou. */
.fotos {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.foto {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-2);
}

.foto__ordem {
  min-width: 3.5ch;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ma-ink-muted);
}

.foto__remover {
  line-height: 1;
}

/* ---- Interruptores (ativo / destaque) ---- */
.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.opcao {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.opcao input {
  width: 20px;
  height: 20px;
  /* Preto e não amarelo: amarelo no fundo claro não dá o contraste de 3:1
     que um controle precisa. */
  accent-color: var(--ma-ink);
  cursor: pointer;
}

/* ---- Bloco de custo: visualmente separado, porque é dado privado ---- */
.bloco-custo {
  border-top: 1px dashed var(--ma-line-strong);
  padding-top: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
}

.bloco-custo__aviso {
  font-size: var(--fs-xs);
  color: var(--ma-ink-muted);
}

.form-produto__acoes {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ==========================================================================
   Lista de produtos
   ========================================================================== */
.lista-produtos {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}

/* ---- Grupos por categoria: <details> recolhível com contagem ---- */
.grupos-produtos {
  display: grid;
  gap: var(--sp-4);
}

.grupo__titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Alvo de toque confortável no celular, que é onde o painel é usado. */
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-2);
  border-bottom: 2px solid var(--ma-ink);
  font-size: var(--fs-sm);
  font-weight: var(--peso-forte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ma-ink);
  cursor: pointer;
}

.grupo__titulo:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

.grupo__contagem {
  color: var(--ma-ink-muted);
  font-weight: var(--peso-medio);
  letter-spacing: normal;
  text-transform: none;
}

.produto {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-4);
  align-items: start;
  background: var(--ma-surface-raised);
  border: 1px solid var(--ma-line);
  border-radius: var(--raio-md);
  padding: var(--sp-4);
}

/* Ações ao lado só a partir de 960px: os botões da marca (caixa alta, 40px)
   são largos, e abaixo disso espremiam o texto da linha por baixo deles. */
@media (min-width: 960px) {
  .produto {
    grid-template-columns: 64px 1fr auto;
    align-items: center;
  }
}

.produto__img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--ma-radius-sm);
  background: var(--ma-preto-manto);
}

.produto__img--vazia {
  display: grid;
  place-items: center;
  color: var(--ma-ink-inverse);
}

.produto__info {
  display: grid;
  gap: var(--sp-1);
  min-width: 0; /* deixa o nome quebrar em vez de esticar a linha */
}

.produto__nome {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.produto__preco {
  color: var(--ma-ink);
  font-weight: var(--peso-forte);
}

.produto__estoque {
  font-size: var(--fs-sm);
  color: var(--ma-ink-muted);
  /* pre-wrap mantém o espaçamento "P: 0   M: 0" mas deixa quebrar linha:
     com `pre`, a lista de itens de um pedido grande empurrava o card para
     fora da tela. */
  white-space: pre-wrap;
}

.produto__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  /* No celular e no tablet as ações ocupam a linha inteira, abaixo da miniatura. */
  grid-column: 1 / -1;
}

@media (min-width: 960px) {
  .produto__acoes {
    grid-column: auto;
  }
}

/* ==========================================================================
   Etiquetas de estado — .tag e variantes moradas em base.css (compartilhadas
   com o perfil); aqui fica só o container da lista do painel.
   ========================================================================== */
.produto__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

/* ---- Linha de pedido: sem miniatura, informação + ações ---- */
.produto--pedido {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .produto--pedido {
    grid-template-columns: 1fr auto;
  }
}

/* ==========================================================================
   Variantes de botão usadas só no painel
   ========================================================================== */
.btn--peq {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  min-height: 40px;
}

.btn--perigo {
  border: 2px solid var(--ma-danger);
  color: var(--ma-danger);
}

.btn--perigo:hover {
  background: var(--ma-danger);
  color: var(--ma-surface-raised);
}

/* ==========================================================================
   Ajuste de desconto na linha do pedido (Fase F) — editor inline, sem modal
   ========================================================================== */
.ajuste-desconto {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  border-top: 1px solid var(--ma-line);
  padding-top: var(--sp-3);
}

/* Uma linha por campo (desconto, personalização de cada item, prévia+aplicar). */
.ajuste-desconto__linha {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.ajuste-desconto__rotulo {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ma-ink-muted);
}

.ajuste-desconto input {
  font: 400 16px/1.4 var(--ma-font-sans);
  color: var(--ma-ink);
  background: var(--ma-surface-raised);
  border: 1.5px solid var(--ma-line-strong);
  border-radius: var(--ma-radius-md);
  padding: var(--sp-2) var(--sp-3);
  min-height: 40px;
  width: 84px;
}

.ajuste-desconto input:focus-visible {
  outline: none;
  border-color: var(--ma-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ma-amarelo-alpha) 55%, transparent);
}

.ajuste-desconto__previa {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ma-accent-text);
}

/* Editor de pagamento do afiliado reaproveita o editor inline; o campo de
   observação é a única exceção à largura curta dos inputs. */
.ajuste-desconto input.ajuste-desconto__largo {
  width: 100%;
  max-width: 420px;
}

.ajuste-desconto__opcao {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ma-ink);
  flex-basis: 100%;
}

.ajuste-desconto__opcao input[type='checkbox'] {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--ma-accent);
}