/* FORJA V24.0.0 — Fase E: remover item "só hoje", gesto de arrastar, menu
 * "⋮" como alternativa sem gesto, e os 3 estados da refeição (Pendente /
 * Parcial / Concluída). Arquivo isolado de propósito (mesmo motivo do
 * v18_dieta_evolucao.css/js): não editar as regras já existentes de
 * .fj62-diary-item/.diet13-*, só somar por cima. Precisa carregar DEPOIS de
 * v18_0_4.css (é isso que garante que os !important abaixo vençam a regra
 * de 2 colunas que o v18_0_4 já define pra .fj62-diary-item) — por isso o
 * link deste arquivo é somado dentro de accent_style_block() em layout.php,
 * no fim da cadeia de CSS responsivo, não no <head> fixo.
 * Usa só variáveis de cor já existentes no tema FORJA (mesma decisão da
 * v23_melhorias.css) — nada de cor nova só pra esta função.
 */

/* -----------------------------------------------------------------------
 * 1) Linha do item ativo: texto + confirmar (44px) + menu "⋮" (44px).
 * --------------------------------------------------------------------- */
.fj62-diary-item.has-kebab{
  grid-template-columns:minmax(0,1fr) 44px 44px!important;
}
.fj62-diary-kebab{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  border:0;
  background:transparent;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  color:var(--text-muted);
  cursor:pointer;
}
.fj62-diary-kebab:hover,.fj62-diary-kebab:focus-visible,.fj62-diary-kebab[aria-expanded="true"]{
  background:var(--bg-soft);
  color:var(--text-main);
}
.fj62-diary-kebab i{font-size:17px;line-height:1;}

/* Menu suspenso do "⋮" — plano, sem depender de posicionamento JS além de
 * abrir/fechar (fica ancorado à direita da própria linha). */
.fj62-diary-menu{
  position:absolute;
  right:8px;
  z-index:6;
  margin-top:2px;
  background:var(--bg-surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm,8px);
  box-shadow:var(--shadow-card,0 10px 28px rgba(0,0,0,.18));
  overflow:hidden;
  min-width:168px;
}
.fj62-diary-menu[hidden]{display:none;}
.fj62-diary-menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:44px;
  padding:0 14px;
  border:0;
  background:transparent;
  color:var(--danger);
  font:inherit;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.fj62-diary-menu-item:hover,.fj62-diary-menu-item:focus-visible{background:var(--danger-bg);}

/* -----------------------------------------------------------------------
 * 2) Gesto de arrastar (estilo app de e-mail): a linha vira um "trilho"
 *    (overflow:hidden), o painel vermelho de "Remover" fica atrás, e o
 *    conteúdo visível desliza por cima via transform — nunca via JS
 *    recriando o layout, só translateX.
 * --------------------------------------------------------------------- */
.fj62-diary-row{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-sm,8px);
}
.fj62-diary-row .fj62-diary-item{
  position:relative;
  z-index:1;
  background:var(--bg-surface);
  transition:transform .18s ease;
  touch-action:pan-y;
}
.fj62-diary-row.is-dragging .fj62-diary-item{transition:none;}
.fj62-diary-row.is-swiped .fj62-diary-item{transform:translateX(-84px);}
.fj62-diary-swipe-reveal{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
}
.fj62-diary-swipe-btn{
  width:84px;
  min-height:44px;
  border:0;
  background:var(--danger);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.fj62-diary-swipe-btn i{font-size:16px;}
@media (prefers-reduced-motion: reduce){
  .fj62-diary-row .fj62-diary-item{transition:none;}
}

/* -----------------------------------------------------------------------
 * 3) Item removido só hoje: linha discreta com "Restaurar" — a dieta-base
 *    continua com o item cadastrado, só o consumo de hoje muda.
 * --------------------------------------------------------------------- */
.fj62-diary-item.is-removed{
  opacity:.62;
}
.fj62-diary-item.is-removed .fj62-diary-item-text strong{
  text-decoration:line-through;
  text-decoration-color:var(--text-muted);
}
.fj62-diary-removed-tag{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  border-radius:999px;
  background:var(--bg-soft);
  color:var(--text-muted);
  font-size:11px;
  font-style:normal;
  font-weight:600;
  vertical-align:middle;
}
.fj62-diary-restore-btn{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0!important;
  border:0;
  border-radius:50%;
  background:var(--bg-soft);
  color:var(--brand-primary);
  display:inline-grid;
  place-items:center;
  cursor:pointer;
}
.fj62-diary-restore-btn:hover,.fj62-diary-restore-btn:focus-visible{background:var(--border-soft);}
.fj62-diary-restore-btn i{font-size:18px;}

/* -----------------------------------------------------------------------
 * 4) Os 3 estados da refeição (Pendente / Parcial / Concluída) — um
 *    indicador visual sutil (borda lateral), sempre calculado a partir dos
 *    itens ativos de hoje na própria função que já gera o card (nunca em
 *    JS) — ver dieta_meal_card_html() em includes/modules/dieta.php.
 * --------------------------------------------------------------------- */
.diet13-meal.fj62-meal--pendente{border-left:3px solid var(--border-strong);}
.diet13-meal.fj62-meal--parcial{border-left:3px solid var(--warning);}
.diet13-meal.fj62-meal--concluida{border-left:3px solid var(--success);}
.diet13-meal.fj62-meal--vazia{border-left:3px solid var(--border-soft);}

/* -----------------------------------------------------------------------
 * 5) Toast de desfazer — role="status"+aria-live já no HTML; aqui só o
 *    visual. Um só toast por vez (o JS remove o anterior antes de abrir
 *    outro), fixo no rodapé, acima da navegação inferior do FORJA.
 * --------------------------------------------------------------------- */
.fj62-undo-toast{
  position:fixed;
  left:50%;
  bottom:calc(84px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,0);
  z-index:60;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(92vw,420px);
  padding:12px 14px;
  border-radius:var(--radius-sm,10px);
  background:var(--text-main);
  color:var(--bg-page);
  box-shadow:var(--shadow-card,0 10px 28px rgba(0,0,0,.28));
  font-size:14px;
}
:root[data-theme="dark"] .fj62-undo-toast,
:root:not([data-theme="light"]) .fj62-undo-toast{
  background:var(--bg-surface);
  color:var(--text-main);
  border:1px solid var(--border-soft);
}
.fj62-undo-toast-msg{flex:1;min-width:0;}
.fj62-undo-toast-btn{
  flex:0 0 auto;
  min-height:36px;
  padding:0 12px;
  border:0;
  border-radius:999px;
  background:var(--brand-primary);
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
@media (prefers-reduced-motion: no-preference){
  .fj62-undo-toast{animation:fj62-toast-in .18s ease-out;}
}
@keyframes fj62-toast-in{
  from{opacity:0;transform:translate(-50%,8px);}
  to{opacity:1;transform:translate(-50%,0);}
}

/* Alvo mínimo de toque em qualquer botão novo desta fase, mesmo em telas
 * bem estreitas (320px) — auditoria mobile V21/V22 já cobrou isso antes. */
@media (max-width:360px){
  .fj62-diary-swipe-btn{width:72px;}
  .fj62-diary-row.is-swiped .fj62-diary-item{transform:translateX(-72px);}
}