/* =============================================
   components/cards/cards.css

   ESCOPO: todos os cards do projecto
   (produto público, dashboard, feature, métrica)
   e a navegação de categorias.

   ORGANIZAÇÃO:
   1. Grid de cards
   2. Card base (partilhado por todos os tipos)
   3. Card — Produto (home + resultados)
   4. Card — Produto dashboard (meus produtos)
   5. Card — Feature (landing)
   6. Card — Métrica (dashboard)
   7. Navegação de categorias
   8. "Ver mais"
   9. Estado vazio (dashboard)
  10. Dark mode
  11. Responsive (mobile-first breakpoints)
============================================= */

/* ─────────────────────────────────────────────
   1. GRID DE CARDS
   auto-fill: cria tantas colunas quanto cabem.
   minmax(Xpx, 1fr): nunca abaixo de X, estica até 1fr.
   Resultado: grid fluida sem media queries para colunas.
───────────────────────────────────────────── */
.cards-grid {
  display: grid;
  gap: 1.5rem;
  /* Alinha os cards pelo topo quando têm alturas diferentes */
  align-items: start;
}

/* Máximo 3 colunas */
.cards-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Máximo 4 colunas */
.cards-grid--4 {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.card {
  background: var(--branco);
  border: 1px solid var(--azul-suave);
  border-radius: var(--raio);
  padding: 1.5rem;
  transition: transform var(--transicao), box-shadow var(--transicao),
    opacity var(--transicao);
  will-change: transform;
}

/* Hover: @media*/

@media (hover: hover) {
  .categoria-btn:hover {
    border-color: var(--azul-medio);
    color: var(--azul-medio);
    background: var(--azul-ultraclaro);
  }
  html.dark .categoria-btn:hover {
    background: #263548;
    border-color: var(--azul-medio);
    color: var(--azul-medio);
  }
  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
  }
}
/* Estado activo (feedback táctil em mobile e cliques rápidos) */
.card:active {
  transform: translateY(-1px);
  box-shadow: none;
  opacity: 0.92;
}

/*
  Focus visible: só aparece com navegação por teclado,
  nunca com rato. Essencial para acessibilidade.
  outline-offset garante que não fica colado ao borde do card.
*/
.card:focus-visible {
  outline: 2px solid var(--azul-medio);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul-medio) 20%, transparent);
}

/* ─────────────────────────────────────────────
   3. CARD — PRODUTO (home + resultados)
───────────────────────────────────────────── */
.card--produto {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /*
    cursor pointer porque o card inteiro é clicável.
    (O JS adiciona role="button" e tabindex="0".)
  */
  cursor: pointer;
}

/* Placeholder emoji quando não há foto */
.card--produto .produto__imagem {
  background: var(--azul-suave);
  border-radius: var(--raio-sm);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  /* Evita que o emoji seja seleccionado por acidente */
  user-select: none;
}

/*
  Foto real do produto — nova classe gerada pelo JS refactorizado.
  aspect-ratio garante proporção consistente independente do tamanho real da imagem.
  object-fit: cover nunca distorce.
*/
.card--produto .produto__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raio-sm);
  background: var(--azul-suave); /* placeholder enquanto carrega */
  display: block;
}

.card--produto .produto__nome {
  font-weight: 700;
  color: var(--texto);
  font-size: 1rem;
  /* Evita que nomes muito longos rebentem o card */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card--produto .produto__preco {
  font-family: var(--fonte-titulo);
  font-size: 1.4rem;
  font-weight: 900;
  color: #000080;
}

.card--produto .produto__loja {
  font-size: 0.85rem;
  color: var(--texto-suave);
  /* Trunca o nome da loja se for muito longo */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card--produto .produto__distancia {
  font-size: 0.8rem;
  color: var(--texto-suave);
}

/* Badges de estoque — pill colorida */
.card--produto .produto__estoque {
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  display: inline-block;
  font-weight: 700;
  /* align-self evita que a pill estica até à largura do card */
  align-self: flex-start;
  /* mt: auto empurra a pill para o fundo do card,
     alinhando todas as pills mesmo quando os cards
     têm alturas diferentes */
  margin-top: auto;
}

/* As cores das classes estoque-* devem estar no :root / tokens do projecto.
   Aqui apenas definimos estrutura; as cores vêm das variáveis globais. */
.estoque-ok {
  background: color-mix(in srgb, var(--sucesso, #22c55e) 15%, transparent);
  color: var(--sucesso-escuro, #15803d);
}
.estoque-baixo {
  background: color-mix(in srgb, var(--aviso, #f59e0b) 15%, transparent);
  color: var(--aviso-escuro, #b45309);
}
.estoque-zero {
  background: color-mix(in srgb, var(--erro, #ef4444) 15%, transparent);
  color: var(--erro-escuro, #b91c1c);
}

/* ─────────────────────────────────────────────
   4. CARD — PRODUTO DASHBOARD (meus produtos)
   Herda tudo de .card--produto.
   Adiciona apenas o bloco de acções (editar/remover).
───────────────────────────────────────────── */
.card--dashboard {
  /* O cursor do card pai é pointer; no dashboard
     o card em si não é clicável — só os botões */
  cursor: default;
}

.card__acoes {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Cada botão de acção ocupa metade do espaço */
.card__acoes .btn {
  flex: 1;
  min-width: 0; /* evita overflow em nomes longos */
}

/* Botão de remover — variante de perigo */
.btn--perigo {
  color: var(--erro);
  border-color: var(--erro);
}
.btn--perigo:active {
  background: color-mix(in srgb, var(--erro) 10%, transparent);
  transform: scale(0.96);
  filter: brightness(0.93);
}

/* ─────────────────────────────────────────────
   5. CARD — FEATURE (landing page)
───────────────────────────────────────────── */
.card--feature {
  text-align: center;
  background: var(--azul-ultraclaro);
  cursor: default;
}

/* Remove animação de hover dos cards não-clicáveis */
.card--feature:hover,
.card--feature:active {
  transform: none;
  box-shadow: none;
  opacity: 1;
}
.btn-edit-pd {
  color: var(--azul-medio);
}
.card__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  /* Evita selecção acidental do emoji */
  user-select: none;
}

.card--feature h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--azul-escuro);
  margin-bottom: 0.5rem;
}

.card--feature p {
  color: black;
  font-size: 0.95rem;
}

/* ─────────────────────────────────────────────
   6. CARD — MÉTRICA (dashboard)
───────────────────────────────────────────── */
.card--metric {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: default;
}

.card--metric:active {
  transform: none;
  box-shadow: none;
  opacity: 1;
}

.card__metric-label {
  font-size: 0.85rem;
  color: var(--texto-suave);
}

.card__metric-value {
  font-family: var(--fonte-titulo);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--azul-escuro);
  /*
    tabular-nums: alinha os dígitos em colunas —
    evita que o número "salte" quando muda de valor.
  */
  font-variant-numeric: tabular-nums;
}

.card__metric-sub {
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.card--metric-destaque {
  background: var(--azul-ultraclaro);
  border-color: var(--azul-claro);
}

/* ─────────────────────────────────────────────
   7. NAVEGAÇÃO DE CATEGORIAS
───────────────────────────────────────────── */
.categorias-nav {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  /*
    padding lateral para o scroll não cortar as sombras
    dos botões nas extremidades
  */
  padding-inline: 0.25rem;
  margin-bottom: 2rem;
  /* Esconde scrollbar visualmente mas mantém funcional */
  scrollbar-width: none;
  /* Comportamento de snap suave (melhora UX em mobile) */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.categorias-nav::-webkit-scrollbar {
  display: none;
}

.categoria-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 50px;
  border: 1.5px solid var(--azul-suave);
  background: var(--branco);
  color: var(--texto-suave);
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  cursor: pointer;
  /* Só as propriedades que mudam — NÃO usar transition: all */
  transition: background-color var(--transicao), color var(--transicao),
    border-color var(--transicao);
  /* Snap: cada botão encaixa ao scroll */
  scroll-snap-align: start;
  /* Evita que o botão se comprima quando a flex row está cheia */
  flex-shrink: 0;
}

/* Estado activo: feedback táctil */
.categoria-btn:active {
  opacity: 0.85;
  transform: scale(0.97);
}

/* Focus acessível */
.categoria-btn:focus-visible {
  outline: 2px solid var(--azul-medio);
  outline-offset: 3px;
}

.categoria-btn.activa {
  background: var(--azul-medio);
  color: var(--branco);
  border-color: var(--azul-medio);
}

/* ─────────────────────────────────────────────
   8. VER MAIS
───────────────────────────────────────────── */
.ver-mais-wrapper {
  text-align: center;
  margin-top: 2rem;
}

/* ─────────────────────────────────────────────
   9. ESTADO VAZIO (dashboard sem produtos)
   Classe criada aqui para retirar estilos inline do JS.
   O JS deve usar estas classes em vez de style="..."
───────────────────────────────────────────── */
.dashboard__vazio {
  text-align: center;
  padding: 3rem;
  color: var(--texto-suave);
  /* Ocupa todas as colunas da grid */
  grid-column: 1 / -1;
}

.dashboard__vazio-icone {
  font-size: 3rem;
  margin-bottom: 1rem;
  user-select: none;
}

.dashboard__vazio-titulo {
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 0.5rem;
}

.dashboard__vazio-desc {
  font-size: 0.9rem;
  color: var(--texto-suave);
}

/* ─────────────────────────────────────────────
  10. DARK MODE
   Centralizado aqui em vez de repetir por componente.
   Só sobrescreve o que as variáveis globais não cobrem.
───────────────────────────────────────────── */
html.dark .card {
  background: var(--fundo-card-dark, #1e293b);
  border-color: var(--borde-dark, #334155);
}

html.dark .card--feature {
  background: var(--azul-ultraclaro-dark, #1e293b);
}

html.dark .card--metric-destaque {
  background: var(--azul-ultraclaro-dark, #1e2a3a);
  border-color: var(--azul-claro-dark, #2d4a6e);
}

html.dark .produto__nome {
  color: var(--texto-dark, #e2e8f0);
}

html.dark .produto__preco {
  color: var(--azul-claro, #60a5fa);
}

html.dark .card__metric-value {
  color: var(--texto-dark, #e2e8f0);
}

html.dark .card--feature h3 {
  color: var(--texto-dark, #e2e8f0);
}
html.dark .card--feature p {
  color: var(--texto-dark, #e2e8f0);
}

html.dark .categoria-btn {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

html.dark .categoria-btn.activa {
  background: var(--azul-medio);
  color: var(--branco);
  border-color: var(--azul-medio);
}

/* Badges de estoque em dark mode — mais suaves */
html.dark .estoque-ok {
  background: color-mix(in srgb, var(--sucesso, #22c55e) 20%, #1e293b);
  color: #4ade80;
}
html.dark .estoque-baixo {
  background: color-mix(in srgb, var(--aviso, #f59e0b) 20%, #1e293b);
  color: #fbbf24;
}
html.dark .estoque-zero {
  background: color-mix(in srgb, var(--erro, #ef4444) 20%, #1e293b);
  color: #f87171;
}

/* ─────────────────────────────────────────────
  11. RESPONSIVE
   Mobile-first: o grid já é fluido com auto-fill.
   Só precisamos forçar colunas mínimas em ecrãs pequenos.
───────────────────────────────────────────── */

/* Tablet pequeno / mobile grande: máx. 2 colunas */
@media (max-width: 640px) {
  .cards-grid--3,
  .cards-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* No mobile o card não deve ter max-width — ocupa a coluna toda */
  .card--produto {
    max-width: 100%;
  }

  /* Reduz padding nos cards para ganhar espaço */
  .card {
    padding: 1rem;
  }

  /* Fonte do preço um pouco menor em ecrãs pequenos */
  .card--produto .produto__preco {
    font-size: 1.2rem;
  }
}

/* Mobile pequeno: 1 coluna */
@media (max-width: 380px) {
  .cards-grid--3,
  .cards-grid--4 {
    grid-template-columns: 1fr;
  }
}

/*
  Respeita a preferência do utilizador por menos movimento.
  Remove todas as animações e transições para utilizadores
  com sensibilidade a movimento (acessibilidade).
*/
@media (prefers-reduced-motion: reduce) {
  .card,
  .categoria-btn {
    transition: none;
    will-change: auto;
  }

  .card:hover {
    transform: none;
  }
}