/* ============================================
   Edit Mode Button Styles
   Badge-style pulse effect with ::after pseudo-element
   Matches gym marker badge pulse behavior
   ============================================ */

/* Ping animation - like gym badge counters but with 1.2 scale */
@keyframes ping {
  75%, 100% {
    transform: scale(1.2);  /* Expand to 1.2x size - more subtle effect */
    opacity: 0;
  }
}

/* Edit mode Save button - purple gradient with badge-style pulse */
.panel-header-action.panel-action-save,
.panel-action-save.MuiIconButton-root,
button.panel-action-save {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
  border: 1px solid #a855f7 !important;  /* Fixed bright border */
  color: #ffffff !important;
  position: relative !important;
  overflow: visible !important;  /* Allow pulse to expand beyond button */
  transition: all 0.3s ease !important;
  z-index: 1;  /* Ensure button stays above pulse */
}

/* Pulse effect using ::after pseudo-element */
.panel-header-action.panel-action-save::after,
.panel-action-save.MuiIconButton-root::after,
button.panel-action-save::after {
  content: "";
  position: absolute;
  inset: 0;  /* Cover entire button area */
  border-radius: inherit;  /* Match button's border radius */
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
  z-index: -1;  /* Behind the button */
  pointer-events: none;  /* Don't interfere with clicks */
}

/* Hover state - brighter purple, stop pulse */
.panel-header-action.panel-action-save:hover,
.panel-action-save.MuiIconButton-root:hover,
button.panel-action-save:hover {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
  transform: translateY(-1px) !important;
}

/* Stop pulse animation on hover */
.panel-header-action.panel-action-save:hover::after,
.panel-action-save.MuiIconButton-root:hover::after,
button.panel-action-save:hover::after {
  animation: none;
}

/* Ensure icons inside save buttons are white */
.panel-header-action.panel-action-save svg,
.panel-action-save.MuiIconButton-root svg,
button.panel-action-save svg,
.panel-header-action.panel-action-save path,
.panel-action-save.MuiIconButton-root path,
button.panel-action-save path {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Mobile button styles for save */
.mobile-leaderboard-buttons .panel-action-save,
.btn.panel-action-save {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
  border: 1px solid #a855f7 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;  /* Allow pulse expansion */
  z-index: 1;
}

/* Mobile pulse effect */
.mobile-leaderboard-buttons .panel-action-save::after,
.btn.panel-action-save::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
  z-index: -1;
  pointer-events: none;
}

/* Mobile hover state */
.mobile-leaderboard-buttons .panel-action-save:hover,
.btn.panel-action-save:hover {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
}

.mobile-leaderboard-buttons .panel-action-save:hover::after,
.btn.panel-action-save:hover::after {
  animation: none;
}

/* Ensure proper spacing */
.panel-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.panel-accordion-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-right: 12px;
}