/*
  Wortic macOS UI Kit — Notification Item
  wm-notification-item — a unidade da central de notificações: quem, o
  quê, quando, lida ou não, e a ação que resolve.

  Não confundir com Toast (components/toast/): toast é aviso que PASSA
  — flutua, expira sozinho, não fica em lugar nenhum depois. O item de
  notificação é o oposto — fica, pode ser revisto, tem estado de leitura
  que só o usuário muda. Ver docs/notification-item.json > quando_nao_usar.
*/

@layer components {
  .wm-notification-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-6);
    padding: var(--wm-space-6) var(--wm-space-7);
    background: var(--wm-surface-primary);
    transition: background var(--wm-duration-fast) var(--wm-ease-standard);
  }

  .wm-notification-item:hover {
    background: var(--wm-fill-quaternary, var(--wm-fill-secondary));
  }

  /* Hairline interna de 0.5px entre itens de uma mesma lista — recuada,
     não toca as bordas do painel (mesmo idioma do settings-row). */
  .wm-notification-item + .wm-notification-item::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: var(--wm-space-7);
    border-top: var(--wm-border-width-hairline) solid var(--wm-separator);
    pointer-events: none;
  }

  /* Ponto de não-lida: presença, não é a única pista — o peso da fonte
     do texto principal também muda (ver __text abaixo). O estado real
     mora em data-unread, lido pelo JS da central; o CSS só desenha. */
  .wm-notification-item__unread-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-block-start: calc(var(--wm-space-6) + 2px);
    border-radius: 50%;
    background: var(--wm-accent);
    box-shadow: 0 0 0 3px var(--wm-accent-fill);
  }
  .wm-notification-item[data-unread="false"] .wm-notification-item__unread-dot {
    background: transparent;
    box-shadow: none;
  }

  .wm-notification-item__icon {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--wm-label-secondary);
    background: var(--wm-fill-secondary);
    box-shadow: inset 0 0 0 var(--wm-border-width-hairline) var(--wm-separator);
  }
  .wm-notification-item__icon .wm-icon { width: var(--wm-icon-md); height: var(--wm-icon-md); }

  .wm-notification-item__icon[data-tone="accent"] {
    color: var(--wm-accent);
    background: var(--wm-accent-fill);
  }
  .wm-notification-item__icon[data-tone="success"] {
    color: var(--wm-success);
    background: var(--wm-success-fill);
  }
  .wm-notification-item__icon[data-tone="warning"] {
    color: var(--wm-warning);
    background: var(--wm-warning-fill);
  }
  .wm-notification-item__icon[data-tone="error"] {
    color: var(--wm-error);
    background: var(--wm-error-fill);
  }

  /* Ator com foto/iniciais em vez de ícone de evento — mesma caixa de
     32px, preenchida pelo componente avatar quando fizer sentido. */
  .wm-notification-item__icon.wm-notification-item__icon--avatar {
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .wm-notification-item__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-2);
  }

  .wm-notification-item__text {
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-line-height-relaxed);
    color: var(--wm-label-primary);
    font-weight: var(--wm-font-weight-regular);
  }
  /* Não-lida pesa mais — igual ao Mail: o peso da fonte já diz o
     estado antes mesmo do olho chegar no ponto azul. */
  .wm-notification-item[data-unread="true"] .wm-notification-item__text {
    font-weight: var(--wm-font-weight-semibold);
  }

  .wm-notification-item__actor,
  .wm-notification-item__subject {
    font-weight: var(--wm-font-weight-semibold);
  }
  .wm-notification-item[data-unread="true"] .wm-notification-item__subject {
    font-weight: var(--wm-font-weight-bold);
  }

  /* --wm-label-secondary, não tertiary: 10px precisa de 4.5:1 e
     tertiary mede abaixo disso sobre --wm-surface-primary (mesma
     lição do settings-row.css com o rodapé do grupo). */
  .wm-notification-item__no-action {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
    font-style: normal;
  }

  /* Bandeira de urgência: ícone + texto, NUNCA cor sozinha. */
  .wm-notification-item__urgent-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    align-self: flex-start;
    padding: var(--wm-space-1) var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-error-fill);
    color: var(--wm-error);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
  }
  .wm-notification-item__urgent-flag .wm-icon { width: var(--wm-icon-xs); height: var(--wm-icon-xs); }

  .wm-notification-item__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wm-space-4);
  }

  /* Tempo relativo para ler rápido; o absoluto vive em datetime/title,
     para dar para investigar depois — nunca só "há 3 h" sozinho.
     --wm-label-secondary (não tertiary): 10px exige 4.5:1. */
  .wm-notification-item__time {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
    font-variant-numeric: tabular-nums;
  }

  .wm-notification-item__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
  }

  .wm-notification-item__action {
    height: var(--wm-control-height-sm);
    padding-inline: var(--wm-space-5);
    border: none;
    border-radius: var(--wm-radius-sm);
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-notification-item__action:hover { background: var(--wm-accent-fill-strong, var(--wm-accent-fill)); }
  .wm-notification-item__action:active { transform: scale(var(--wm-scale-pressed-sm)); }
  .wm-notification-item__action:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
  }

  /* Alternar lida/não-lida DESTE item — ação explícita do usuário,
     nunca automática (ver notification-center.js: abrir a central não
     marca nada; só o clique aqui, ou "marcar todas", muda o estado). */
  .wm-notification-item__read-toggle {
    flex: none;
    width: var(--wm-control-height-sm);
    height: var(--wm-control-height-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--wm-label-secondary);
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-notification-item__read-toggle:hover {
    background: var(--wm-fill-secondary);
    color: var(--wm-label-primary);
  }
  .wm-notification-item__read-toggle:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
  }
  .wm-notification-item__read-toggle .wm-icon { width: var(--wm-icon-sm); height: var(--wm-icon-sm); }

  /* Compacta: dentro de um notification-group, sem o respiro do
     painel — a hairline e o padding do grupo já dão a moldura. */
  .wm-notification-item--compact {
    padding: var(--wm-space-5) var(--wm-space-7);
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-notification-item,
    .wm-notification-item__action,
    .wm-notification-item__read-toggle {
      transition: none;
    }
  }
}