/* =========================================================
   Componente: Card, KPI Card (com variacao), Progress/Frequencia
   ========================================================= */

/* Sem sombra: o fio de 1px ja separa o card do fundo. A --shadow-md em TODO
   card era o que dava a pagina o ar de coisas empilhadas boiando; sombra volta
   a significar 'isto flutua de verdade' e fica com modal, dropdown e sheet. */
/* Leva "layout premium": cartao SEM borda no claro, separado do fundo pelo
   contraste (branco sobre #F4F6F3) e por uma sombra de luz ambiente; no escuro,
   onde sombra nao le, volta o fio de 1px (--card-border). */
.card-cf {
  background: var(--bg-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad);
}
.card-cf.is-interactive {
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card-cf.is-interactive:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--card-border);
}
.card-cf__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.card-cf__title { font-size: var(--text-md); font-weight: var(--fw-semibold); margin: 0; }

/* ---------- Card de metrica (UNICO do sistema — ver components/metricCard.js)
   Substitui as tres familias que existiam antes do Bloco A: .kpi-cf (dashboard),
   .kpi-card-cf (CrudPage/Loja) e .stat-card (Relatorios/Perfil/Escolinhas).
   ---------- */

/* A TIRA DE INDICADORES (leva "layout premium", 2026-10-01).

   A "banda de placar" (uma faixa so, dividida por fios de 1px feitos com gap
   sobre o fundo da borda) saiu: o dono quis o nivel da referencia, onde cada
   indicador e um CARTAO proprio, branco, separado dos vizinhos por respiro.
   O grid continua o mesmo (auto-fit + minmax, com o min() que evita o
   estouro classico quando a tela e mais estreita que o minimo). */
.metric-strip-cf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--gap-cards);
  margin-bottom: var(--gap-cards);
}

.metric-cf {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
/* So card clicavel reage ao mouse — animar um card que nao leva a lugar
   nenhum promete um clique que nao existe. A reacao e a sombra subir um
   degrau (a referencia nao desloca o cartao). */
/* Indicador solto numa coluna do grid do Bootstrap (relatorios de Cobrancas,
   Comandas, Notificacoes, Produtos): estica a altura da linha. */
.row > [class*="col"] > .metric-cf { height: 100%; }
.metric-cf.is-link {
  transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.metric-cf.is-link:hover {
  box-shadow: var(--shadow-card-hover);
  color: inherit;
}

.metric-cf__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
/* min-width:0 e o que permite o valor encolher dentro do flex em vez de
   estourar a caixa — era assim que `R$ 1.620,00` vazava do card no celular. */
.metric-cf__main { min-width: 0; flex: 1; }

/* O ICONE EM CIRCULO (liberado pelo dono nesta leva; a leva anterior o tinha
   tirado por puxar o olho antes do numero). Circulo de 40px no fundo SOFT do
   tom, glifo no tom cheio — o fundo e claro o bastante para o numero, que e
   maior e mais escuro, continuar sendo a primeira coisa lida. */
.metric-cf__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  flex: none;
  font-size: 1rem;
}
.metric-cf__icon.tone-brand   { color: var(--color-primary); background: var(--color-primary-soft); }
.metric-cf__icon.tone-success { color: var(--color-success); background: var(--color-success-soft); }
.metric-cf__icon.tone-warning { color: var(--color-warning); background: var(--color-warning-soft); }
.metric-cf__icon.tone-danger  { color: var(--color-danger);  background: var(--color-danger-soft); }
.metric-cf__icon.tone-info    { color: var(--color-info);    background: var(--color-info-soft); }

/* No escuro os fundos "soft" (#ecfdf3 e cia) sao quase brancos e o circulo
   viraria uma bola brilhante: tinta translucida da propria cor, com o glifo
   na cor viva — mesmo padrao do .badge-cf. A primaria-soft do escuro ja e
   translucida no proprio token. */
:root[data-theme='dark'] .metric-cf__icon.tone-success { background: rgba(22, 163, 74, 0.16);  color: #6ee7a0; }
:root[data-theme='dark'] .metric-cf__icon.tone-warning { background: rgba(217, 119, 6, 0.16);  color: #fcd68a; }
:root[data-theme='dark'] .metric-cf__icon.tone-danger  { background: rgba(220, 38, 38, 0.16);  color: #fca5a5; }
:root[data-theme='dark'] .metric-cf__icon.tone-info    { background: rgba(8, 145, 178, 0.16);  color: #7dd3e8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .metric-cf__icon.tone-success { background: rgba(22, 163, 74, 0.16);  color: #6ee7a0; }
  :root:not([data-theme='light']) .metric-cf__icon.tone-warning { background: rgba(217, 119, 6, 0.16);  color: #fcd68a; }
  :root:not([data-theme='light']) .metric-cf__icon.tone-danger  { background: rgba(220, 38, 38, 0.16);  color: #fca5a5; }
  :root:not([data-theme='light']) .metric-cf__icon.tone-info    { background: rgba(8, 145, 178, 0.16);  color: #7dd3e8; }
}

/* Rotulo: 13px em caixa de sentenca, na cor secundaria — nomeia o numero
   sem competir com ele (era a caixa alta de sumula de 11px). */
.metric-cf__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Valor e delta na mesma linha; o delta desce para baixo do valor quando nao
   cabe (flex-wrap), em vez de espremer o numero. */
.metric-cf__linha {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--space-2);
  row-gap: 2px;
  margin-top: 4px;
}
.metric-cf__value {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  /* `normal`, e nao `anywhere`: com `anywhere` o navegador quebrava DENTRO do
     numero e deixava ",00" sozinho na segunda linha. */
  overflow-wrap: normal;
  white-space: nowrap;
  /* Valor que ainda assim nao couber (milhoes em R$ no cartao de 2 colunas)
     termina em reticencias, com o numero inteiro no title — nunca alarga o
     cartao nem a pagina. */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* 12+ caracteres ("R$ 1.234.567,89"): um degrau menor de tamanho. */
.metric-cf__value.is-longo { font-size: var(--text-lg); }
/* Delta como na referencia: seta de tendencia e o percentual na cor do
   sentido, sem pilula — a cor ja diz o sentido, e a seta diz de novo para
   quem nao distingue a cor. */
.metric-cf__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.metric-cf__delta.up   { color: var(--trend-up); }
.metric-cf__delta.down { color: var(--trend-down); }
.metric-cf__delta.flat { color: var(--text-muted); }

/* Rodape com fio: a nota de apoio a esquerda e, quando o cartao e link, a
   seta a direita (a referencia: "+$2,987 From last month ->"). So existe
   quando ha nota ou link; cartoes da mesma linha continuam com a mesma
   altura porque itens de grid esticam juntos. */
.metric-cf__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
  margin-block-start: var(--space-4);
}
/* Nota: informacao real de apoio, mas sem cor nem seta de tendencia — nao
   pode ser confundida com uma variacao medida. */
.metric-cf__note { font-size: var(--text-xs); color: var(--text-muted); min-width: 0; }
.metric-cf__seta { font-size: 0.8rem; color: var(--text-muted); margin-left: auto; transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.metric-cf.is-link:hover .metric-cf__seta { color: var(--color-primary); transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .metric-cf.is-link:hover .metric-cf__seta { transform: none; }
}

/* No celular a tira vira duas colunas (era uma so, e o dashboard gastava 5,9
   telas de rolagem). Em duas colunas o cartao fica com ~171px: o icone SOBE
   para cima do texto e o valor ganha a largura inteira — e assim que dinheiro
   cabe ("R$ 12.345,67" medido numa linha so a 390px). */
@media (max-width: 575.98px) {
  .metric-strip-cf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-cf { padding: var(--space-4); }
  .metric-cf__top { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .metric-cf__main { width: 100%; }
  /* Em ~171px o rotulo quebra em duas linhas em vez de virar reticencia —
     "Frequencia media (30d)" cortado no meio nao diz mais o que e o numero. */
  .metric-cf__label { white-space: normal; }
  .metric-cf__icon { width: 36px; height: 36px; font-size: 0.9rem; }
  .metric-cf__value { font-size: var(--text-lg); }
  .metric-cf__value.is-longo { font-size: var(--text-md); }
  .metric-cf__foot { margin-block-start: var(--space-3); padding-top: var(--space-2); }
}

/* ---------- Barra de progresso / frequencia ---------- */
.progress-cf {
  height: 8px;
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-cf__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width var(--dur-slow) var(--ease-out);
}
.progress-cf__bar.good { background: var(--presente); }
.progress-cf__bar.warn { background: var(--justificada); }
.progress-cf__bar.bad  { background: var(--falta); }

/* Barra com rotulo e valor (components/progressBar.js, leva "layout
   premium"): a "Product Sales" da referencia. */
.progresso-cf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.progresso-cf + .progresso-cf { margin-top: var(--space-4); }
.progresso-cf__topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); min-width: 0; }
.progresso-cf__rotulo { font-size: var(--text-sm); color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progresso-cf__valor { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; flex: none; }
.progresso-cf__trilha { height: 10px; border-radius: var(--radius-full); background: var(--bg-muted); overflow: hidden; }
.progresso-cf__barra { height: 100%; border-radius: var(--radius-full); background: var(--color-primary); transition: width var(--dur-slow) var(--ease-out); }
.progresso-cf__barra.tom-success { background: var(--color-success); }
.progresso-cf__barra.tom-warning { background: var(--color-warning); }
.progresso-cf__barra.tom-danger  { background: var(--color-danger); }

/* Anel de frequencia (radial) */
.ring-cf {
  --val: 0;
  --size: 88px;
  --stroke: 9px;
  --color: var(--color-primary);
  width: var(--size); height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, var(--bg-surface) calc(100% - var(--stroke)), transparent calc(100% - var(--stroke) + 1px)),
    conic-gradient(var(--color) calc(var(--val) * 1%), var(--bg-muted) 0);
}
.ring-cf__num {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* Alvo de toque dos atalhos do cabecalho de card (bloco H; regra canonica em
   buttons.css). Eram os MENORES alvos do sistema: 19px de altura, porque sao
   links de texto puro ("Ver comandas", "Repor estoque") sem padding nenhum.
   `inline-flex` para a caixa poder ter altura sem empurrar a linha do titulo. */
@media (hover: none) and (pointer: coarse), (max-width: 991.98px) {
  .card-cf__header a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- Secoes recolhiveis no celular (bloco H) ----------
   Ver components/secaoRecolhivel.js para o porque. A seta so existe onde o
   recolhimento existe: no desktop os cartoes estao sempre abertos e um botao
   que nao faz nada seria ruido (e um alvo de teclado que nao leva a lugar
   nenhum). */
.secao-toggle-cf { display: none; }

@media (max-width: 991.98px) {
  .secao-toggle-cf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Alvo de toque do bloco H. Estende-se para a esquerda com margem negativa
       para o dedo poder acertar a area toda a direita do titulo. */
    min-width: 44px;
    min-height: 44px;
    margin: -10px -8px -10px 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
  }
  .secao-toggle-cf__seta {
    transition: transform var(--dur-base) var(--ease-out);
  }
  .card-cf.is-recolhido .secao-toggle-cf__seta {
    transform: rotate(-90deg);
  }
  /* Cartao fechado nao pode manter a margem de baixo do cabecalho: sem isto
     sobra uma faixa vazia de var(--space-4) embaixo de cada titulo fechado, e
     11 delas somam quase uma tela de volta. */
  .card-cf.is-recolhido .card-cf__header {
    margin-bottom: 0;
  }
}

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

/* =========================================================
   Rodape do modal da comanda: total + acoes.

   Era `d-flex justify-content-between` com os dois botoes numa linha so. Medido
   no celular (390px, corpo do modal com 358px uteis): o conteudo pedia 454px, o
   "Fechar e pagar" saia 96px PARA FORA do modal e o rodape passava a rolar de
   lado. Como `.btn-cf` tem `white-space: nowrap`, nada quebrava sozinho — a
   linha simplesmente vazava.

   Agora e coluna por padrao (celular) e vira linha a partir de 576px, que e o
   mesmo ponto de corte usado pelas colunas do formulario logo acima.
   ========================================================= */
.comanda-rodape-cf {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-4);
}
.comanda-rodape-cf__valor {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.comanda-rodape-cf__acoes {
  display: flex;
  gap: var(--space-2);
}
/* No celular os dois botoes dividem a linha em partes iguais, em vez de cada um
   pedir a largura do proprio texto — que e o que estourava a caixa. */
.comanda-rodape-cf__acoes > .btn-cf { flex: 1 1 0; min-width: 0; }

@media (min-width: 576px) {
  .comanda-rodape-cf {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  /* No desktop volta a ser do tamanho do texto: esticar botao em tela larga
     deixa alvos enormes e desalinhados do resto do sistema. */
  .comanda-rodape-cf__acoes > .btn-cf { flex: 0 0 auto; }
}

/* Linha "adicionar item" do modal da comanda.

   Grid proprio, sem `row`/`col-*`: a `.row` do Bootstrap tem margem negativa de
   gutter e, dentro do corpo do modal (que nao tem o padding compensatorio de um
   `.container`), ela ficava 4px para FORA dos dois lados — o modal inteiro
   passava a rolar de lado. Medido: linha em left=12/right=378 contra um corpo
   de 16 a 374. */
.comanda-add-cf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
/* No celular o produto ocupa a linha inteira; Qtd e Adicionar dividem a de
   baixo. O nome do produto e o texto mais longo desta linha e o que mais sofre
   com meia largura. */
.comanda-add-cf__produto { grid-column: 1 / -1; }

@media (min-width: 576px) {
  .comanda-add-cf { grid-template-columns: 2fr 1fr 1fr; }
  .comanda-add-cf__produto { grid-column: auto; }
}

/* Topo da aba "Comandas Abertas": busca + acao.

   Coluna no celular (a busca ocupa a linha toda e o botao vem embaixo, em
   largura cheia) e linha a partir de 576px, com a busca crescendo e o botao do
   tamanho do texto. */
.comandas-topo-cf {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.comandas-topo-cf__busca { min-width: 0; }
.comandas-topo-cf > .btn-cf { width: 100%; }

@media (min-width: 576px) {
  .comandas-topo-cf { flex-direction: row; align-items: center; justify-content: space-between; }
  .comandas-topo-cf__busca { flex: 1 1 auto; max-width: 320px; }
  .comandas-topo-cf > .btn-cf { width: auto; flex: none; }
}

/* Valor da comanda no cartao: era `h5`, que e um CABECALHO — o cartao ja tem o
   nome/numero como titulo logo acima, e dois cabecalhos empilhados confundem
   quem navega por eles. Aqui e um numero, e numero pede tabular. */
.comanda-card__valor {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}