/* ============================================================
   Module notifications — liste fine dans une carte flush,
   non-lu = fond indigo très pâle + point indigo.
   ============================================================ */

.notif-row { align-items: flex-start; }

/* Point d'état (indigo si non-lu, transparent sinon) */
.notif-row__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: transparent;
  margin-top: 7px;
}
.notif-row--unread { background: #F4F5FF; }
.notif-row--unread .ds-row__title { font-weight: var(--weight-semibold); }
.notif-row--unread .notif-row__dot { background: var(--accent); }

.notif-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.notif-row__time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex: none;
  white-space: nowrap;
}
.notif-row__body {
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin: 3px 0 7px;
}
.notif-row__tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Bouton « marquer lu » discret */
.notif-row__mark { flex: none; margin: 0; }
.notif-row__mark .btn {
  padding: 5px 9px;
  border: none;
  background: transparent;
  color: var(--status-success-fg);
}
.notif-row__mark .btn:hover { background: var(--status-success-bg); }
.notif-row__mark .btn .lucide { width: 15px; height: 15px; }

@media (max-width: 575.98px) {
  .notif-row__head {
    flex-direction: column;
    gap: 2px;
  }
}