/**
 * Shared Pill Button Base Class
 * Created: 2026-01-23 (UX-20260123-PILL-BASE)
 * Purpose: Single source of truth for all floating icon pill buttons
 * Usage: Apply .pill-btn + color modifier class (e.g., .pill-btn-yellow)
 *
 * Design Spec: .protocol-state/DESIGN_SPEC_SHARED_PILL_BUTTON_CLASS_2026-01-23.md
 * Replaces: Duplicated pill button styles across 9 CSS files
 * Code Reduction: ~180 lines → ~50 lines (72% reduction)
 */

/* ============================================
   BASE CLASS - Structural & Typographic Properties
   ============================================ */

/* CRITICAL: Override .btn-standard when combined with .pill-btn */
button.pill-btn.btn-standard,
a.pill-btn.btn-standard,
button.pill-btn,
a.pill-btn,
.pill-btn {
  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Box Model */
  box-sizing: border-box !important;
  margin: 0 !important; /* UX-20260125-FIX: Eliminate browser default margins for consistent gap */

  /* Sizing - FIXED WIDTH & HEIGHT for perfect consistency */
  /* UX-20260125-FIX: Enforce consistent height across button/a/span elements */
  width: 180px !important;
  max-width: 180px !important;
  min-width: 180px !important;
  height: 42px !important;
  max-height: 42px !important;
  min-height: 42px !important;
  padding: 0 20px !important;

  /* Typography */
  font-family: 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: bold !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  text-transform: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* Shape */
  border-radius: 25px !important;
  border: 2px solid !important;

  /* Interaction */
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

  /* Shadow (default) */
  box-shadow: 0 4px 12px rgba(255, 238, 0, 0.2) !important;
}

/* Hover state (default transform) */
button.pill-btn.btn-standard:hover,
a.pill-btn.btn-standard:hover,
button.pill-btn:hover,
a.pill-btn:hover,
.pill-btn:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(255, 238, 0, 0.5) !important;
}

/* Focus state (accessibility) */
button.pill-btn.btn-standard:focus,
a.pill-btn.btn-standard:focus,
button.pill-btn:focus,
a.pill-btn:focus,
.pill-btn:focus {
  outline: 3px solid #ffee00 !important;
  outline-offset: 3px !important;
}

/* ============================================
   COLOR MODIFIERS
   ============================================ */

/* Yellow Pill (Default - Most Common) */
.pill-btn-yellow {
  background: #000000;
  color: #ffee00 !important;
  border-color: #ffee00;
}

.pill-btn-yellow:hover {
  background: #ffee00;
  color: #000000 !important;
}

/* Green Pill (Review Season OPEN) */
.pill-btn-green {
  background: #000000;
  color: #00d084 !important;
  border-color: #00d084;
  box-shadow: 0 4px 12px rgba(0, 208, 132, 0.6);
}

.pill-btn-green:hover {
  background: #00d084;
  color: #000000 !important;
  box-shadow: 0 6px 20px rgba(0, 208, 132, 0.5);
}

/* Red Pill (Review Season CLOSED) */
.pill-btn-red {
  background: #000000;
  color: #cc0000 !important;
  border-color: #cc0000;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.6);
}

.pill-btn-red:hover {
  background: #cc0000;
  color: #000000 !important;
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.5);
}

/* ============================================
   STATE MODIFIERS
   ============================================ */

/* Loading State */
.pill-btn-loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

/* ============================================
   RESPONSIVE BEHAVIOR
   ============================================ */

@media (max-width: 768px) {
  /* Most pills hide on mobile (icon-only) */
  button.pill-btn,
  a.pill-btn,
  .pill-btn {
    display: none !important;
  }

  /* Exception: Back to Top pill remains visible */
  button.pill-btn-back-to-top,
  a.pill-btn-back-to-top,
  .pill-btn-back-to-top {
    display: inline-flex !important;
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .pill-btn {
    animation: none !important;
    transition: none !important;
  }

  .pill-btn:hover {
    transform: none;
  }
}

/* Focus visible for keyboard navigation */
button.pill-btn.btn-standard:focus-visible,
a.pill-btn.btn-standard:focus-visible,
button.pill-btn:focus-visible,
a.pill-btn:focus-visible,
.pill-btn:focus-visible {
  outline: 3px solid #ffee00 !important;
  outline-offset: 3px !important;
}