/**
 * Poupex Play 4.0 — Timeline e Notificações
 * Namespace: .pp4-* / --pp4-*  ·  Escopo: .pp4-notif
 *
 * Sprint 12 do redesign visual.
 *
 * ------------------------------------------------------------------
 * O QUE A AUDITORIA ENCONTROU
 * ------------------------------------------------------------------
 * Existe UM sistema de notificação de verdade:
 *
 *   user_alerts (1.235 linhas)  + user_alert_reads (188)
 *   lib/user_alerts.php         list_for_reader / unread_count / mark_read
 *   /api/alertas                GET lista · POST mark_read
 *   sino da topbar              painel montado por JS em _bottom.php
 *
 * `comunidade_notificacoes` (19 linhas) tem `tipo` e `lido` reais, mas
 * NENHUMA função de leitura — buscá-la exigiria SQL novo. Transações,
 * tarefas concluídas e conquistas idem: `historico.php` monta as
 * próprias consultas inline, não há helper reutilizável. Por isso a
 * Central mostra alertas e só; o resto ganha estado vazio honesto com
 * link para a tela onde o dado realmente vive.
 *
 * ------------------------------------------------------------------
 * COMPONENTE AGNÓSTICO À ORIGEM
 * ------------------------------------------------------------------
 * `.pp4-tl-item` não sabe o que é um alerta de Trade. Recebe marcador,
 * categoria, título, texto, horário e estado de leitura. No dia em que
 * existir uma tabela de eventos unificada — jogos, Eloah Kids,
 * PoupexAI, PouFit, PouFinanças — a marcação é a mesma e este arquivo
 * não muda uma linha.
 *
 * Reaproveitados, sem cópia local:
 *   section.css   .pp4-sec / __head / __title / __count / __sub
 *   tabs.css      .task-tabs / .task-tab      filtros
 *   activity.css  .pp4-act-empty              estados vazios
 *   activity.css  .pp4-act-skeleton           carregamento
 *
 * ------------------------------------------------------------------
 * O PAINEL DO SINO
 * ------------------------------------------------------------------
 * A seção 6 estiliza o dropdown da topbar. Aquele HTML é gerado por
 * `_bottom.php` via innerHTML, com nomes de classe fixos
 * (`app-topbar__alert-item`, `__alert-title`, `__alert-dot`,
 * `__alert-body`, `__alert-when`, `__alerts-empty`). Nenhum foi
 * renomeado — o JavaScript não foi tocado.
 */

/* ============================================================
   1 · CONTÊINER
   ============================================================ */

.pp4-notif {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-6);
  width: 100%;
  min-width: 0;
  color: var(--pp4-color-text);
}

.pp4-notif [hidden] { display: none !important; }

/* `.shell--app p` = 0,1,1 (creme). Aqui 0,2,1. */
.pp4-notif p { color: var(--pp4-color-text-muted) !important; }

/* ============================================================
   2 · RESUMO
   ============================================================ */

.pp4-notif-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pp4-space-3);
}

.pp4-notif-summary__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--pp4-space-4) var(--pp4-space-5);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
}

.pp4-notif-summary__value {
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-2xl);
  font-weight: var(--pp4-weight-bold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pp4-notif-summary__value--unread { color: var(--pp4-color-blue-bright) !important; }

.pp4-notif-summary__label {
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
}

/* ============================================================
   2b · LAYOUT DE DUAS COLUNAS
   ============================================================

   A partir de 1200px a timeline divide a área com os atalhos. Não é
   enfeite: numa coluna só, a 1440px, cada linha de texto passava de
   120 caracteres — muito acima da faixa legível. Com o aside, a linha
   cai para ~90 e a largura sobrando deixa de ser desperdício. */

.pp4-notif-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp4-space-6);
  align-items: start;
}

@media (min-width: 1200px) {
  .pp4-notif-cols { grid-template-columns: minmax(0, 1fr) 300px; }
  .pp4-notif-cols > .pp4-notif-aside { position: sticky; top: var(--pp4-space-5); }
  .pp4-notif-aside .pp4-notif-links { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   3 · TIMELINE
   ============================================================

   Marcação:

     <ol class="pp4-timeline">
       <li class="pp4-tl-day"><span>Hoje</span></li>
       <li class="pp4-tl-item pp4-tl-item--financeiro pp4-tl-item--unread">
         <span class="pp4-tl-item__marker">…svg…</span>
         <div class="pp4-tl-item__body">
           <div class="pp4-tl-item__head">
             <span class="pp4-tl-item__title">…</span>
             <span class="pp4-tl-item__cat">…</span>
           </div>
           <p class="pp4-tl-item__text">…</p>
           <span class="pp4-tl-item__when">…</span>
         </div>
       </li>
     </ol>

   O trilho vertical é um pseudo-elemento do item, não um elemento
   próprio: assim a lista pode ser filtrada e reordenada sem que sobre
   uma linha solta no fim. */

.pp4-timeline {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

/* --- Cabeçalho de dia ------------------------------------------------ */

.pp4-tl-day {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-4) 0 var(--pp4-space-2);
  margin: 0 !important;
}

.pp4-tl-day:first-child { padding-top: 0; }

.pp4-tl-day > span {
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Fio que preenche a linha até a borda direita. */
.pp4-tl-day::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--pp4-color-border);
}

/* --- Item ------------------------------------------------------------ */

.pp4-tl-item {
  position: relative;
  display: flex;
  gap: var(--pp4-space-4);
  padding: var(--pp4-space-4) 0;
  margin: 0 !important;
}

/* Trilho: desce do centro do marcador até o fim do item. O último item
   de cada bloco não desenha nada abaixo de si. */
.pp4-tl-item::before {
  content: "";
  position: absolute;
  left: 19px;
  top: calc(var(--pp4-space-4) + 40px);
  bottom: 0;
  width: 2px;
  background: var(--pp4-color-border);
}

.pp4-tl-item:last-child::before,
.pp4-tl-item:has(+ .pp4-tl-day)::before { display: none; }

.pp4-tl-item__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--pp4-color-border);
  border-radius: 50%;
  background: var(--pp4-color-surface-2);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-tl-item__marker svg {
  width: 19px;
  height: 19px;
  color: inherit !important;
  stroke: currentColor;
}

.pp4-tl-item__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--pp4-space-4);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
  transition:
    border-color var(--pp4-duration) var(--pp4-ease),
    background var(--pp4-duration) var(--pp4-ease);
}

.pp4-tl-item:hover .pp4-tl-item__body {
  border-color: var(--pp4-color-border-strong);
  background: var(--pp4-color-surface-2);
}

.pp4-tl-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp4-space-3);
  flex-wrap: wrap;
}

.pp4-tl-item__title,
html[data-theme] .pp4-tl-item__title {
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  line-height: 1.3;
  min-width: 0;
}

.pp4-tl-item__cat {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px var(--pp4-space-2);
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-surface-3);
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-xs);
  font-weight: var(--pp4-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.pp4-tl-item__text,
html[data-theme] .pp4-tl-item__text {
  margin: 0 !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
  line-height: var(--pp4-leading-snug);
  overflow-wrap: anywhere;
}

.pp4-tl-item__when {
  color: var(--pp4-color-text-subtle) !important;
  font-size: var(--pp4-text-xs);
  font-variant-numeric: tabular-nums;
}

/* --- Não lido --------------------------------------------------------
   Sinalizado por cor de borda e um ponto, não por fundo: uma lista com
   50 itens não lidos toda acesa vira ruído. */

.pp4-tl-item--unread .pp4-tl-item__body { border-color: rgba(91, 140, 255, 0.45); }

.pp4-tl-item--unread .pp4-tl-item__marker {
  border-color: transparent;
  background: var(--pp4-color-blue);
  color: #ffffff !important;
}

.pp4-tl-item--unread .pp4-tl-item__title::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--pp4-color-blue-bright);
  vertical-align: middle;
}

/* --- Categorias ------------------------------------------------------
   Todas derivam do Azul Royal e do Verde Neon. Um evento de categoria
   desconhecida cai no marcador neutro acima — nada quebra. */

.pp4-tl-item--financeiro .pp4-tl-item__marker { color: var(--pp4-color-success) !important; border-color: rgba(0, 230, 118, 0.35); }
.pp4-tl-item--apps       .pp4-tl-item__marker { color: var(--pp4-color-blue-bright) !important; border-color: rgba(91, 140, 255, 0.35); }
.pp4-tl-item--jogos      .pp4-tl-item__marker { color: var(--pp4-color-blue-bright) !important; border-color: rgba(91, 140, 255, 0.35); }
.pp4-tl-item--equipe     .pp4-tl-item__marker { color: var(--pp4-color-blue-bright) !important; border-color: rgba(91, 140, 255, 0.35); }
.pp4-tl-item--carreira   .pp4-tl-item__marker { color: var(--pp4-color-success) !important; border-color: rgba(0, 230, 118, 0.35); }
.pp4-tl-item--promocoes  .pp4-tl-item__marker { color: var(--pp4-color-warning) !important; border-color: rgba(245, 158, 11, 0.35); }
.pp4-tl-item--seguranca  .pp4-tl-item__marker { color: var(--pp4-color-danger) !important; border-color: rgba(244, 63, 94, 0.35); }

/* O estado "não lido" vence a cor de categoria: é a informação mais
   urgente do item. Especificidade 0,3,0 contra os 0,2,0 acima. */
.pp4-notif .pp4-tl-item--unread .pp4-tl-item__marker {
  color: #ffffff !important;
  border-color: transparent;
}

/* ============================================================
   4 · ESQUELETO
   ============================================================ */

.pp4-tl-skeleton {
  display: flex;
  gap: var(--pp4-space-4);
  padding: var(--pp4-space-4) 0;
}

.pp4-tl-skeleton__marker { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }

.pp4-tl-skeleton__body {
  display: flex;
  flex-direction: column;
  gap: var(--pp4-space-2);
  flex: 1 1 auto;
  padding: var(--pp4-space-4);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
}

.pp4-tl-skeleton__line { height: 12px; border-radius: var(--pp4-radius-sm); }
.pp4-tl-skeleton__line--title { width: 42%; height: 15px; }
.pp4-tl-skeleton__line--sm { width: 68%; }

/* ============================================================
   5 · ATALHOS PARA O QUE NÃO ESTÁ AQUI
   ============================================================

   Depósitos, saques, tarefas, conquistas e comissões não têm origem
   legível sem SQL novo. Em vez de abas vazias fingindo categorias, um
   bloco honesto que leva para onde o dado realmente está. */

.pp4-notif-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--pp4-space-3);
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

.pp4-notif-links__item,
html[data-theme] .pp4-notif-links__item {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  min-width: 0;
  padding: var(--pp4-space-3) var(--pp4-space-4) !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-md) !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none;
  transition: border-color var(--pp4-duration) var(--pp4-ease), background var(--pp4-duration) var(--pp4-ease);
}

.pp4-notif-links__item:hover,
html[data-theme] .pp4-notif-links__item:hover {
  border-color: var(--pp4-color-blue-bright) !important;
  background: var(--pp4-color-surface-2) !important;
}

.pp4-notif-links__item:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-notif-links__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--pp4-color-surface-3);
  color: var(--pp4-color-text-muted) !important;
}

.pp4-notif-links__icon svg { width: 17px; height: 17px; stroke: currentColor; }

.pp4-notif-links__label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp4-notif-links__chev {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--pp4-color-text-subtle) !important;
}

/* ============================================================
   6 · PAINEL DO SINO (topbar)
   ============================================================

   Escopado em `.pp4-shell` e não em `.pp4-notif`: a topbar é do shell e
   aparece em todas as telas. Classes preservadas — o JS as escreve. */

.pp4-shell .app-topbar__alerts-panel,
html[data-theme] .pp4-shell .app-topbar__alerts-panel {
  width: min(360px, calc(100vw - var(--pp4-space-6)));
  max-height: min(70vh, 520px);
  padding: 0 !important;
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: var(--pp4-radius-lg) !important;
  background: var(--pp4-color-bg-elevated) !important;
  background-image: none !important;
  box-shadow: 0 18px 40px rgba(5, 7, 13, 0.55) !important;
  overflow: hidden;
}

.pp4-shell .app-topbar__alerts-head,
html[data-theme] .pp4-shell .app-topbar__alerts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp4-space-3);
  padding: var(--pp4-space-3) var(--pp4-space-4) !important;
  border-bottom: 1px solid var(--pp4-color-border) !important;
  background: transparent !important;
}

.pp4-shell .app-topbar__alerts-head strong {
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-bold);
}

.pp4-shell .app-topbar__alerts-close,
html[data-theme] .pp4-shell .app-topbar__alerts-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--pp4-radius-sm) !important;
  background: transparent !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--pp4-duration) var(--pp4-ease), color var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-topbar__alerts-close:hover {
  background: var(--pp4-color-surface-2) !important;
  color: var(--pp4-color-text) !important;
}

.pp4-shell .app-topbar__alerts-list {
  display: flex;
  flex-direction: column;
  max-height: min(56vh, 400px);
  padding: var(--pp4-space-2) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Itens montados pelo JS ------------------------------------------ */

.pp4-shell .app-topbar__alert-item,
html[data-theme] .pp4-shell .app-topbar__alert-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--pp4-space-3) !important;
  border: 0 !important;
  border-radius: var(--pp4-radius-md) !important;
  background: transparent !important;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-topbar__alert-item:hover { background: var(--pp4-color-surface) !important; }

.pp4-shell .app-topbar__alert-item + .app-topbar__alert-item {
  border-top: 1px solid var(--pp4-color-border) !important;
  border-radius: 0 !important;
}

.pp4-shell .app-topbar__alert-title,
html[data-theme] .pp4-shell .app-topbar__alert-title {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  color: var(--pp4-color-text) !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
}

.pp4-shell .app-topbar__alert-title > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp4-shell .app-topbar__alert-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pp4-color-blue-bright) !important;
}

.pp4-shell .app-topbar__alert-body,
html[data-theme] .pp4-shell .app-topbar__alert-body {
  margin: 0 !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
  line-height: var(--pp4-leading-snug);
  overflow-wrap: anywhere;
}

.pp4-shell .app-topbar__alert-when,
html[data-theme] .pp4-shell .app-topbar__alert-when {
  margin: 0 !important;
  color: var(--pp4-color-text-subtle) !important;
  font-size: var(--pp4-text-xs);
  font-variant-numeric: tabular-nums;
}

.pp4-shell .app-topbar__alerts-empty,
html[data-theme] .pp4-shell .app-topbar__alerts-empty {
  margin: 0 !important;
  padding: var(--pp4-space-6) var(--pp4-space-4) !important;
  color: var(--pp4-color-text-muted) !important;
  font-size: var(--pp4-text-sm);
  text-align: center;
}

/* Rodapé com o link para a Central. Estático no parcial, fora do
   `#app-alerts-list` que o JS reescreve. */
.pp4-shell .pp4-alerts-foot {
  display: flex;
  padding: var(--pp4-space-2);
  border-top: 1px solid var(--pp4-color-border);
}

.pp4-shell .content .pp4-alerts-foot__link,
.pp4-shell .pp4-alerts-foot__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  border-radius: var(--pp4-radius-sm);
  color: var(--pp4-color-blue-bright) !important;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  text-decoration: none;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .pp4-alerts-foot__link:hover { background: var(--pp4-color-surface) !important; }

/* --- Selo de contagem ------------------------------------------------ */

.pp4-shell .app-topbar__alerts-badge,
html[data-theme] .pp4-shell .app-topbar__alerts-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--pp4-color-bg);
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-blue) !important;
  color: #ffffff !important;
  font-size: 0.65rem;
  font-weight: var(--pp4-weight-bold);
  line-height: 1;
}

/* O JS aplica `.is-zero` quando não há nada — some em vez de exibir 0. */
.pp4-shell .app-topbar__alerts-badge.is-zero { display: none !important; }

/* ============================================================
   7 · COR DOS LINKS — espelhos das regras genéricas
   ============================================================

   `brand-theme.css:644` = 0,7,1 e `:808` = 0,8,1, ambas !important.
   Cadeia completa → 0,10,1. */

.pp4-shell .content .pp4-notif a.pp4-notif-links__item:not(.app-sidebar__link):not(.app-topbar__deposit):not(.dep-submit):not(.pp-painel-btn):not(.page-header__back):not(.app-topbar__tab) {
  color: var(--pp4-color-text) !important;
}

.pp4-shell a.pp4-alerts-foot__link:not(.app-sidebar__link):not(.app-topbar__deposit):not(.dep-submit):not(.pp-painel-btn):not(.page-header__back):not(.app-topbar__tab) {
  color: var(--pp4-color-blue-bright) !important;
}

/* ============================================================
   8 · RESPONSIVIDADE
   ============================================================ */

@media (max-width: 1023px) {
  .pp4-notif-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pp4-notif { gap: var(--pp4-space-5); }

  .pp4-notif-summary { grid-template-columns: minmax(0, 1fr); }
  .pp4-notif-summary__cell {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pp4-space-3);
    padding: var(--pp4-space-3) var(--pp4-space-4);
  }
  .pp4-notif-summary__value { font-size: var(--pp4-text-xl); }

  .pp4-tl-item { gap: var(--pp4-space-3); }
  .pp4-tl-item__body { padding: var(--pp4-space-3); }

  /* Título e categoria não cabem na mesma linha em 390px. */
  .pp4-tl-item__head { flex-direction: column; align-items: flex-start; gap: 4px; }

  .pp4-notif-links { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 359px) {
  /* O marcador vira um ponto: 40px de diâmetro mais o cartão não cabem
     em 320px sem espremer o texto a duas palavras por linha. */
  .pp4-tl-item__marker { width: 26px; height: 26px; }
  .pp4-tl-item__marker svg { width: 13px; height: 13px; }
  .pp4-tl-item::before { left: 12px; top: calc(var(--pp4-space-4) + 26px); }
  .pp4-tl-item__cat { display: none; }
}

/* ============================================================
   9 · MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pp4-tl-item__body,
  .pp4-notif-links__item,
  .pp4-shell .app-topbar__alert-item,
  .pp4-shell .app-topbar__alerts-close { transition: none !important; }
}