/* Swipe gesture progressive reveal animations for bills/tasks action buttons */
tr.swipe-active .action-buttons .btn-edit,
tr.swipe-left .action-buttons .btn-edit {
  opacity: var(--swipe-edit, 0);
  transform: translateX(calc(-8px * (1 - var(--swipe-edit, 0)))) scale(calc(0.95 + 0.05 * var(--swipe-edit, 0)));
  transition: opacity 140ms ease, transform 140ms ease;
}

tr.swipe-active .action-buttons .btn-delete,
tr.swipe-right .action-buttons .btn-delete {
  opacity: var(--swipe-delete, 0);
  transform: translateX(calc(8px * (1 - var(--swipe-delete, 0)))) scale(calc(0.95 + 0.05 * var(--swipe-delete, 0)));
  transition: opacity 140ms ease, transform 140ms ease;
}

/* Ensure rows allow smooth transform without layout jumps */
tbody tr {
  position: relative;
  will-change: transform;
}

/* Inline text indicators while swiping
   Attach labels to the first cell (Actions) for reliable rendering. */
tbody td {
  position: relative;
}

/* Edit label (blue) when swiping left */
tr.swipe-left td:first-child::after {
    content: "EDIT";
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-weight: 600;
  font-size: 0.9rem;
  color: #2563eb; /* blue-600 */
  pointer-events: none;
  opacity: var(--swipe-edit, 0);
  z-index: 3;
  white-space: nowrap;
}

/* Delete label (red) when swiping right */
tr.swipe-right td:first-child::before {
    content: "DELETE";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-weight: 600;
  font-size: 0.9rem;
  color: #dc2626; /* red-600 */
  pointer-events: none;
  opacity: var(--swipe-delete, 0);
  z-index: 3;
  white-space: nowrap;
}