/**
 * HISTORY ICONS STYLING
 *
 * Icon badge system:
 * - Fixed circular badge with icon inside
 * - Color-coded by event type
 * - Accessibility: different shapes + colors
 */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   HISTORY VERIFIED BADGE
   ============================================================================

   Trust indicator badge that appears in Activity History header.
   - Always visible, never disappears
   - Non-interactive, purely informational
   - Communicates that history is secure and system-verified
   - No backend dependency (structural guarantee via immutability)
*/

.history-verified-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(57, 255, 20, 0.12);
  border: 1px solid rgba(57, 255, 20, 0.35);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #39FF14;
  white-space: nowrap;
  box-shadow: inset 0 0 8px rgba(57, 255, 20, 0.08);
  user-select: none;
  pointer-events: none;
  transition: none;
  /* Never animate or change state - this is a static guarantee */
}

.history-verified-badge span {
  display: flex;
  align-items: center;
}

.history-verified-badge span:first-child {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon badge container */
.history-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Size and position set inline */
  transition: all 0.2s ease;
}

/* Individual icon SVG styling */
.history-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Color scheme for different event types */

/* CLAIM EVENT - Green checkmark in circle */
.history-item-claim .history-icon-badge {
  background: var(--history-claim-bg, rgba(57, 255, 20, 0.15));
  border: 2px solid var(--history-claim-color, #39FF14);
}

.history-item-claim .history-icon {
  filter: drop-shadow(0 0 2px rgba(57, 255, 20, 0.4));
}

/* TAP REWARD EVENT - Gold coin in circle */
.history-item-tap-reward .history-icon-badge {
  background: var(--history-tap-reward-bg, rgba(255, 215, 0, 0.15));
  border: 2px solid var(--history-tap-reward-color, #FFD700);
}

.history-item-tap-reward .history-icon {
  filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4));
}

/* WARNING EVENT - Red alert in circle */
.history-item-warning .history-icon-badge {
  background: var(--history-warning-bg, rgba(255, 102, 102, 0.15));
  border: 2px solid var(--history-warning-color, #FF6666);
}

.history-item-warning .history-icon {
  filter: drop-shadow(0 0 2px rgba(255, 102, 102, 0.4));
}

/* Hover effects for icon badges */
.history-item-claim:hover .history-icon-badge {
  background: rgba(57, 255, 20, 0.25);
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.3);
}

.history-item-tap-reward:hover .history-icon-badge {
  background: rgba(255, 215, 0, 0.25);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.history-item-warning:hover .history-icon-badge {
  background: rgba(255, 102, 102, 0.25);
  box-shadow: 0 0 8px rgba(255, 102, 102, 0.3);
}

/* Icon badge on tap.css activity items */
.activity-history-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* Accessibility: ensure icons are distinguishable by shape, not just color */
/* Claim: checkmark (angular, centered) */
/* Tap reward: coin/circle (round shape, text-based) */
/* Warning: triangle (pointed, different from others) */

/* Responsive sizing for smaller screens */
@media (max-width: 480px) {
  .history-icon-badge {
    width: 36px !important;
    height: 36px !important;
  }

  .activity-history-icon-badge {
    width: 32px;
    height: 32px;
  }
}