/* ---------------------------------------------------------
   Shimmer timing
   Let:
       shimmer duration, d = 0.5s
       pause between btn shimmers, p = 2.0s
       number of btns, n = 4
   Then:
       full animation-duration, F = n*(d+p) = 10s
       keyframes % = d / F = 5%
--------------------------------------------------------- */

/* Common shimmer base for all action buttons */
#proc_btn,
#needs_btn,
#wait_btn,
#trash_btn,
#subscribe_btn,
#unsubscribe_btn {
  position: relative;
  overflow: hidden;
}

/* Common shimmer ::before baseline */
#proc_btn::before,
#needs_btn::before,
#wait_btn::before,
#trash_btn::before,
#subscribe_btn::before,
#unsubscribe_btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--shimmer-color, transparent), transparent);
  animation-name: shimmer;
  animation-duration: 10s;         /* full cycle length */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  z-index: 1;
}

/* Individual shimmer colors and delays */
#proc_btn::before        { --shimmer-color: var(--bs-primary);  animation-delay: 0s;   }
#needs_btn::before       { --shimmer-color: var(--bs-secondary); animation-delay: 2.5s; }
#wait_btn::before        { --shimmer-color: var(--bs-warning);   animation-delay: 5.0s; }
#trash_btn::before       { --shimmer-color: var(--bs-danger);    animation-delay: 7.5s; }
#subscribe_btn::before   { --shimmer-color: var(--bs-primary);   animation-delay: 2.5s; }
#unsubscribe_btn::before { --shimmer-color: var(--bs-danger);    animation-delay: 7.5s; }

/* Ensure icons/text stay above shimmer */
#proc_btn i, #proc_btn span,
#needs_btn i, #needs_btn span,
#wait_btn i, #wait_btn span,
#trash_btn i, #trash_btn span,
#subscribe_btn i, #subscribe_btn span,
#unsubscribe_btn i, #unsubscribe_btn span {
  position: relative;
  z-index: 1;
}

/* Shimmer keyframes */
@keyframes shimmer {
  0% { left: -100%; }
  5%, 100% { left: 100%; }
}