/* ──────────────────────────────────────────────────────────────────────────
   sidebar_timers.css  –  badges de timer sur les onglets de navigation
   ────────────────────────────────────────────────────────────────────────── */

.sidebar-timer-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 20px;
    font-size: 0.70rem;
    font-family: 'Courier New', monospace; /* chiffres à largeur fixe */
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    line-height: 1.5;

    /* Couleur de fond : légèrement transparent pour s'adapter aux thèmes */
    background: rgba(0, 0, 0, 0.40);
    color: #f0c060;                    /* doré chaud, lisible sur fonds sombres */
    border: 1px solid rgba(240, 192, 96, 0.35);

    /* Ombre subtile pour lisibilité */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

    /* Animation d'apparition */
    animation: timer-badge-pop 0.25s ease-out both;

    /* Empêche le badge de casser la ligne du lien */
    white-space: nowrap;
    pointer-events: none; /* non-cliquable, c'est juste de l'info */
}

@keyframes timer-badge-pop {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1);   }
}

/* Quand il reste peu de temps (< 5 min) : clignotement discret */
.sidebar-timer-badge.urgent {
    color: #ff7070;
    border-color: rgba(255, 112, 112, 0.45);
    animation: timer-badge-pop 0.25s ease-out both,
               timer-pulse 1.8s ease-in-out 0.3s infinite;
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}