/* Onglet « À faire » (actions à réaliser : à payer / à expédier / à confirmer).
   Réutilise le patron de ligne .p-row (app.formulaires.css) ; on n'ajoute ici
   que la pastille d'icône par type, les couleurs de chip manquantes, l'urgence
   et le pulse du badge d'alerte. Mobile-first ; le desktop hérite du rail +
   largeur lecture comme tout écran .page-pad (aucune ligne app.desktop.css). */

/* En-tête flottant SUR UNE LIGNE (logo + titre, ≈ 54px, comme le profil mais
   avec titre) → on dégage une bande haute comme l'accueil. */
#screen-actions {
  padding-top: calc(64px + var(--sat));
  padding-bottom: calc(110px + var(--sab));
}
#actions-rows { margin-top: 4px; }
/* Invite de connexion (déconnecté) : bouton centré, comme « Mes enchères ». */
#actions-login .cta { margin-top: 18px; }

/* Pastille d'icône à gauche de la ligne (remplace la vignette .p-thumb) : un
   carré arrondi teinté qui porte l'emoji du type d'action. */
.act-ic {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
}
.act-ic-pay { background: #FFE6D2; }
.act-ic-ship { background: #E2ECFB; }
.act-ic-confirm { background: var(--green-bg); }

/* Couleurs de chip d'état manquantes (la base ne définit que topay/won/…). */
.status-chip.ship { background: #E2ECFB; color: #1D4ED8; }
.status-chip.confirm { background: var(--green-bg); color: var(--green-ink); }

/* Échéance proche (< 2 h) : rouge appuyé, pour signaler l'urgence. */
.p-row-time.act-urgent { color: var(--red); font-weight: 800; }

/* Badge ROUGE de l'onglet « À faire » : un léger pulse attire l'œil sur l'action
   à réaliser (CSP-safe, pure CSS). Neutralisé si l'utilisateur réduit les
   animations. */
.tab-badge-alert { animation: actBadgePulse 2.2s ease-in-out infinite; }
@keyframes actBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-badge-alert { animation: none; }
}