/*
 * ============================================================================
 * COMPONENTS - Consolidated UI Component Library
 * ============================================================================
 *
 * This file consolidates all interactive UI components following Powell's
 * minimal CSS philosophy while maintaining Rails conventions.
 *
 * Contents:
 * 1. Buttons - Universal button system with consistent states
 * 2. Badges - Semantic badge system for status and categorization
 * 3. Cards - Reusable card components with glassmorphism
 * 4. Accordion - Collapsible sections with smooth animations
 * 5. Modals - Turbo Frame based modal system
 * 6. Flash Messages & Notifications - User feedback and alerts
 * 7. Progress Bars & Indicators - Progress visualization and stats
 *
 * Architecture:
 * - Mobile-first responsive design
 * - Accessibility built-in (focus states, reduced motion)
 * - Modern CSS (custom properties, oklch colors)
 * - Turbo-ready (progressive enhancement)
 */

/* ============================================================================
   1. BUTTONS
   ============================================================================ */

/* Universal Button State Configuration */
:root {
  --btn-outline-width: 2px;
  --btn-active-transition: 0.05s;
}

/* Base Button Foundation */
.btn {
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: var(--radius-xl);
  font-weight: 600;
  cursor: pointer;
  /* Optimized transition - only animate properties that change */
  transition: transform var(--transition-button),
    opacity var(--transition-button),
    box-shadow var(--transition-button);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--text-sm);
  touch-action: manipulation;
  user-select: none;
  -webkit-touch-callout: none;
  min-block-size: 2.75rem;
  /* 44px touch target */
  gap: var(--space-xs);
  position: relative;
  overflow: hidden;
}

/* Disabled State */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Loading State - Turbo automatically adds aria-busy to forms during submission */
[aria-busy] .btn:disabled {
  position: relative;
}

[aria-busy] .btn:disabled>* {
  visibility: hidden;
}

[aria-busy] .btn:disabled::after {
  --mask: no-repeat radial-gradient(#000 68%, #0000 71%);
  --size: 1.25em;

  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  inline-size: var(--size);
  aspect-ratio: 8/5;
  background: currentColor;
  -webkit-mask: var(--mask), var(--mask), var(--mask);
  -webkit-mask-size: 28% 45%;
  animation: submitting 1s infinite linear;
}

/* Button Variants - Define visual styles only */
.btn-primary {
  --btn-outline-color: var(--accent);
  background: var(--accent);
  border: none;
  color: black;
  font-weight: 600;
  font-size: var(--text-base);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: var(--text-lighter);
}

.btn-danger {
  --btn-outline-color: var(--invalid);
  background: color-mix(in oklch, var(--invalid) 10%, transparent);
  border: 2px solid var(--invalid);
  color: var(--invalid);
}

/* Ensure links with btn-danger also get the red variables */
a.btn-danger {
  --btn-outline-color: var(--invalid);
}

.btn-accent-outline {
  --btn-outline-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  border: 2px solid var(--accent);
  color: var(--accent);
}

.btn-secondary-delete {
  --btn-outline-color: var(--invalid);
  background: var(--invalid);
  border: none;
  color: black;
  padding: var(--space-sm) var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  transition: background var(--transition-standard), outline var(--transition-standard);
  font-weight: 500;
}

.btn-outline {
  --btn-outline-color: var(--border);
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text);
}

.btn-large {
  padding: 16px 32px;
  font-size: 1.1rem;
  min-height: 56px;
}

.btn-small {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  min-height: 44px;
  /* Ensure accessibility compliance */
  min-width: 44px;
}

/* Edit Button - Extends secondary style */
.btn-edit {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: var(--text-lighter);
}

/* Page Actions */
.page-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* Page Back Button & Logout Button */
.player-page,
.user-profile-page,
.billing-page,
.feedback-page,
.statistics-page,
.training-sessions-page,
.players-page,
.organization-edit-page,
.users-page,
.checkout-page,
.login-page,
.signup-page,
.password-reset-page,
.password-edit-page {
  position: relative;
  width: 100%;
}

.page-back-button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.page-back-button .btn {
  padding: var(--space-sm);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-logout-button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.page-logout-button .btn {
  padding: var(--space-sm);
  border-radius: 50%;
}

/* Floating Add Button - Desktop Only */
.floating-add-btn {
  /* Hidden on mobile by default */
  display: none;
}

@media (min-width: 48rem) {
  .floating-add-btn {
    display: inline-flex;
    position: fixed;
    bottom: var(--space-2xl);
    right: var(--space-2xl);
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    max-width: 56px;
    max-height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 50;
    cursor: pointer;
  }

  .floating-add-icon {
    width: 28px;
    height: 28px;
    color: currentColor;
    flex-shrink: 0;
  }

  .floating-add-btn:hover,
  .floating-add-btn:focus-visible {
    background: color-mix(in oklch, var(--accent) 85%, white);
    outline: none;
    border: none;
    color: var(--bg);
  }

  .floating-add-btn:hover .floating-add-icon,
  .floating-add-btn:focus-visible .floating-add-icon {
    color: var(--bg);
  }

  /* Active state - reverts to normal */
  .floating-add-btn:active {
    outline: none;
    transition-duration: 0.05s;
  }
}

/* Universal Hover/Focus-Visible Pattern - All buttons get 2px outline */
@media (any-hover: hover) {

  .btn-danger:hover,
  .btn-danger:focus-visible,
  .btn-outline:hover,
  .btn-outline:focus-visible {
    outline: var(--btn-outline-width) solid var(--btn-outline-color, var(--accent));
  }

  /* Primary button gets lighter background on hover, no outline */
  .btn-primary:hover,
  .btn-primary:focus-visible {
    background: color-mix(in oklch, var(--accent) 85%, white);
    color: black;
    outline: none;
    border: none;
  }

  /* Secondary and edit buttons get lighter background on hover, text stays same color */
  .btn-secondary:hover,
  .btn-secondary:focus-visible,
  .btn-edit:hover,
  .btn-edit:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-lighter);
    outline: none;
    border: none;
  }

  /* Keep danger button contents red on hover, not green */
  .btn-danger:hover,
  .btn-danger:focus-visible,
  a.btn-danger:hover,
  a.btn-danger:focus-visible {
    color: var(--invalid);
    outline-color: var(--invalid) !important;
    --btn-outline-color: var(--invalid);
  }

  /* Keep secondary delete button text black and outline red on hover */
  .btn-secondary-delete:hover,
  .btn-secondary-delete:focus-visible {
    color: black;
    outline-color: var(--invalid) !important;
  }
}

/* Universal Active Pattern - Reverts to normal state */
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-outline:active,
.btn-edit:active {
  outline: none;
  box-shadow: none;
  transition-duration: var(--btn-active-transition);
}


/* ============================================================================
   2. BADGES
   ============================================================================ */

/* Rank Badge */
.rank-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}


.rank-unranked {
  background: var(--text-lighter);
  color: var(--text-light);
}


/* Tier Badge System - Consolidated from users.css and checkout.css duplicates */
.tier-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: var(--space-sm);
  border: 1px solid;
  transition: opacity var(--transition-standard), transform var(--transition-standard);
}

.tier-badge-pro {
  background: oklch(var(--lch-accent) / 0.2);
  color: var(--accent);
  border-color: oklch(var(--lch-accent) / 0.3);
}

.tier-badge-lite {
  background: rgba(119, 119, 119, 0.2);
  color: var(--text-lighter);
  border-color: rgba(119, 119, 119, 0.3);
}

/* ============================================================================
   3. CARDS
   ============================================================================ */

/* Base Card Styles */
.card {
  background: var(--accent-bg);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: var(--radius-2xl);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-lg);
  /* Center with automatic margins while ensuring minimum edge spacing */
  margin-inline: max(var(--space-md), auto);
}


.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 25px 25px 0 0;
}

.card-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-lg);
  padding-top: var(--space-xs);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-top: 5px;
}

.card-header .card-title {
  margin-bottom: 0;
}

/* ============================================================================
   UNIFIED LIST SYSTEM - Shared Base Classes
   ============================================================================ */

/* Base List Container - Used by all lists (players, coaches, sessions) */
.list-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  isolation: isolate;
  background: transparent;
  margin-top: var(--space-sm);
}

/* Base List Item - Clickable row pattern used across all lists */
.list-item {
  background: transparent;
  border: none;
  padding: var(--space-md) var(--space-md);
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition-fast);
  cursor: pointer;
  min-height: 56px;
}

/* Base hover effect for list items */
@media (any-hover: hover) {
  .list-item:hover {
    background: rgba(255, 255, 255, 0.02);
  }
}

/* Base Add Item Button - Pattern for "Add New X" buttons in lists */
.add-list-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--space-md) var(--space-md);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  flex-wrap: nowrap;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition-fast);
  cursor: pointer;
  min-height: 56px;
}

@media (any-hover: hover) {
  .add-list-item:hover {
    background: rgba(255, 255, 255, 0.02);
  }

  .add-list-item:hover .icon {
    color: oklch(var(--lch-accent) / 1.2);
  }

  .add-list-item:hover .add-list-item-text {
    color: oklch(var(--lch-accent) / 1.2);
  }
}

/* Add item icon styling */
.add-list-item .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--accent);
  flex-shrink: 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* Add item text styling */
.add-list-item-text {
  color: var(--accent);
  font-weight: 500;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

/* ============================================================================
   PLAYERS LIST - Google Docs Style Layout
   ============================================================================ */

/* Player Item - Extends base list-item */
.player-item {
  justify-content: space-between;
}

/* Group that keeps name and last trained together */
.player-name-group {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-md);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Player name in list view */
.player-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  margin: 0;
  transition: color var(--transition-fast);
  display: inline;
  text-align: left;
}

/* Hover effect for player name */
@media (any-hover: hover) {
  .player-item:hover .player-name {
    color: var(--accent);
  }
}

/* Last trained info - positioned right after name */
.player-last-trained {
  font-size: 0.85rem;
  color: var(--text-light);
  margin: 0;
  display: inline;
}

.player-last-trained.no-sessions {
  color: var(--text-lighter);
  font-style: italic;
}

/* ============================================================================
   PLAYER PROFILE - Show Page Layout
   ============================================================================ */

/* Player Profile Container - wrapper with background and border radius */
.player-profile-container {
  margin-bottom: var(--space-lg);
}

/* Tab Navigation */
.tab-nav {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--border);
}

.tab-button {
  flex: 1;
  padding: var(--space-md);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-standard), color var(--transition-standard), border-color var(--transition-standard);
  margin-bottom: -2px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tab-button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}

/* Hover/Focus-Visible - Desktop Only */
@media (any-hover: hover) {

  .tab-button:hover,
  .tab-button:focus-visible {
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-lighter);
    outline: none;
  }

  .tab-button.active:hover,
  .tab-button.active:focus-visible {
    color: var(--accent);
  }
}

/* Active State - Reverts to normal */
.tab-button:active {
  outline: none;
  transition-duration: var(--btn-active-transition);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Player Profile Card - vertical layout on all screen sizes */
.player-profile-card {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin-bottom: var(--space-md);
  gap: var(--space-lg);
  position: relative;
}

.player-profile-card .player-photo-section {
  width: 140px;
  height: 140px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: visible;
  margin-top: var(--space-xl);
  align-self: center;
}

.player-photo-section {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: visible;
  transition: background var(--transition-standard), color var(--transition-standard);
}

.player-photo-section:hover,
.player-photo-section:focus {
  text-decoration: none;
  color: inherit;
}

.player-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  transition: opacity var(--transition-standard), transform var(--transition-standard);
}

.player-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed var(--border);
  border-radius: 50%;
  box-sizing: border-box;
}

.player-photo-placeholder .placeholder-icon {
  width: 60%;
  height: 60%;
  color: var(--text-lighter);
  opacity: 0.5;
}

/* Photo Upload Forms */
.photo-upload-form {
  position: absolute;
}

.photo-upload-form-button {
  top: 8px;
  right: 8px;
  z-index: 3;
}

.photo-upload-form-image {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Camera Button - positioned over photo */
.photo-upload-button {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--transition-standard), transform var(--transition-standard);
  padding: 0;
}

.photo-upload-button .icon {
  width: 18px;
  height: 18px;
  color: white;
}

.photo-upload-button:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.05);
}

/* Image Button - makes entire photo clickable */
.photo-upload-image-button {
  background: transparent;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
  display: block;
  position: relative;
}

.photo-upload-image-button:hover .player-photo {
  opacity: 0.8;
}

/* Delete Button - positioned bottom right */
.photo-delete-button {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(220, 38, 38, 0.9);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--transition-standard), transform var(--transition-standard);
  padding: 0;
}

.photo-delete-button .icon {
  width: 18px;
  height: 18px;
  color: white;
}

.photo-delete-button:hover {
  background: rgba(220, 38, 38, 1);
  transform: scale(1.05);
}

.player-profile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-self: flex-start;
  width: 100%;
}

.player-profile-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.player-detail-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
}

.player-detail-item-no-icon {
  gap: 0;
  padding-left: 2px;
}

/* Field container for labeled details (matches form-field pattern) */
.player-detail-field {
  display: flex;
  flex-direction: column;
}

/* Rank field should be inline, not full width */
.player-detail-field .rank-badge {
  align-self: flex-start;
}

/* Label for detail items (e.g., "Phone", "Email") - matches form-label pattern */
.player-detail-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-light);
}

.player-name-rank-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.player-profile-card .player-name-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.player-detail-value {
  font-size: var(--text-base);
  color: var(--text);
  font-weight: 500;
  min-width: 0;
}

.player-bio-text {
  line-height: 1.6;
  color: var(--text);
}

.player-contact-link {
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

.player-contact-link:hover {
  text-decoration: underline;
}

/* Field links - Basecamp-style clickable fields */
.player-field-link {
  color: var(--text);
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.player-field-link:hover,
.player-field-link:active,
.player-field-link:focus {
  color: var(--text);
  text-decoration: none;
}

.rank-badge-link,
.rank-badge.player-field-link {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  color: var(--bg);
}

.player-action-buttons {
  text-align: center;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Player Show Page - Back Button */
.player-back-button {
  position: fixed;
  top: max(var(--space-md), env(safe-area-inset-top, 0px));
  left: var(--space-md);
  z-index: 10;
}

/* Player Show Page - Training Sessions Section */
.player-session-header {
  margin-bottom: var(--space-lg);
}

.player-sessions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.empty-state {
  text-align: center;
  color: var(--text-light);
  padding: var(--space-xl);
  font-style: italic;
}

.empty-state a,
.empty-state a:visited {
  color: var(--accent);
}

/* Legacy class name - keep for backwards compatibility */
.player-empty-state {
  text-align: center;
  color: var(--text-light);
  padding: var(--space-xl);
  font-style: italic;
}

.player-empty-state a,
.player-empty-state a:visited {
  color: var(--accent);
}

/* ============================================================================
   TRAINING SESSION COMPONENTS
   ============================================================================ */

/* Sessions Cards */
.sessions-card,
.sessions-list-card {
  grid-column: 1 / -1;
  margin-top: var(--space-lg);
}

.sessions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.sessions-header .card-title {
  margin-bottom: 0;
}

.sessions-table-container {
  overflow-x: auto;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.02);
}

/* Session Cards (visible on all devices) */
.sessions-cards {
  display: flex;
  flex-direction: column;
}

.session-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 16px;
  border: 1px solid var(--border);
  transition: opacity var(--transition-standard), transform var(--transition-standard);
}

.session-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  /* Space for absolutely positioned action buttons */
  padding-right: 5rem;
  gap: var(--space-sm);
}

.session-card-header.no-actions {
  padding-right: 0;
}

/* Reduce action button spacing on mobile */
@media (max-width: 48rem) {
  .session-card-header {
    padding-right: 4rem;
  }
}

.session-date {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.session-coach {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
}

.session-comments {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: var(--space-md);
  min-height: 20px;
}

.session-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: var(--space-sm);
  z-index: 10;
}

/* Sessions Table */
.sessions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.sessions-table th {
  background: oklch(var(--lch-accent) / 0.1);
  color: var(--accent);
  padding: 15px 12px;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
}

.sessions-table td {
  padding: 15px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.work-rate-cell {
  text-align: center;
}

/* Training Session Integration - Player Context & Links */
.player-context {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.plan-player {
  font-weight: 500;
}

.plan-player-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.plan-player-link:hover {
  text-decoration: underline;
}

.detail-two-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.detail-section {
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.player-cell {
  font-weight: 500;
  color: var(--text);
}

.player-link {
  color: var(--accent);
  text-decoration: none;
}

.player-link:hover {
  text-decoration: underline;
}

/* ============================================================================
   NATIVE DETAILS/SUMMARY (Performance Optimized Accordion Alternative)
   ============================================================================

   This uses native HTML5 <details> and <summary> elements for zero-JS
   accordion functionality with superior performance on low-powered devices.
   ============================================================================ */

/* Details Container */
.stats-details {
  background: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-md);
  transition: border-color var(--transition-standard);
}

.stats-details:last-child {
  margin-bottom: 0;
}

@media (any-hover: hover) {
  .stats-details:hover {
    outline: 2px solid var(--border);
  }
}

/* Summary (Clickable Header) */
.stats-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: opacity var(--transition-standard);
}

/* Remove default marker/arrow */
.stats-summary::-webkit-details-marker {
  display: none;
}

.stats-summary::marker {
  display: none;
}

@media (any-hover: hover) {
  .stats-summary:hover {
    color: var(--accent);
    outline: 2px solid var(--border);
  }

  /* Remove outline from summary when details is open */
  .stats-details[open] .stats-summary:hover {
    outline: none;
  }
}

.stats-summary:active {
  outline: none;
}

.stats-summary:focus-visible {
  color: var(--accent);
  outline: 2px solid var(--border);
}

/* Remove outline from summary when details is open (focus state) */
.stats-details[open] .stats-summary:focus-visible {
  outline: none;
}

/* Summary Header */
.stats-summary-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
}

.stats-summary-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text-lighter);
}

.stats-summary-title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: 600;
  color: inherit;
}

/* Summary Chevron */
.stats-summary-chevron {
  width: 20px;
  height: 20px;
  color: var(--text-lighter);
  transition: transform var(--transition-standard);
  flex-shrink: 0;
  transform: rotate(0deg);
}

/* Rotate chevron when open */
.stats-details[open] .stats-summary-chevron {
  transform: rotate(180deg);
}

/* Details Content */
.stats-details-content {
  padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
}

/* Stats Section (for nested sections within details) */
.stats-section {
  margin-bottom: var(--space-lg);
}

.stats-section:last-child {
  margin-bottom: 0;
}

.stats-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-lighter);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

/* Optional: Smooth animation for browsers that support it */
@media (prefers-reduced-motion: no-preference) {
  .stats-details summary~* {
    animation: fadeIn 0.2s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

/* ============================================================================
   5. MODALS
   ============================================================================ */

/* Modal Styles - Turbo Frame based */
turbo-frame#modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

turbo-frame#modal:not(:empty) {
  pointer-events: auto;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  animation: fadeIn 0.15s ease-out;
  /* Mobile: Solid backdrop for performance (no blur) */
  background: rgba(0, 0, 0, 0.75);
}

/* Desktop: Add blur effect for visual enhancement */
@media (min-width: 48rem) {
  .modal-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
  }
}

.modal-content {
  background: var(--modal-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: min(55rem, 90vw);
  max-height: 90vh;
  overflow: auto;
  /* GPU acceleration */
  will-change: transform, opacity;
  animation: slideUp var(--duration-panel) var(--ease-spring);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--modal-border);
  position: sticky;
  top: 0;
  background: var(--modal-surface);
  z-index: 1;
}

.modal-header h2 {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--text);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-light);
  transition: background var(--transition-standard), color var(--transition-standard);
  text-decoration: none;
  font-size: 24px;
  line-height: 1;
  font-weight: normal;
}

.modal-close:hover {
  background: var(--modal-border);
  color: var(--text);
}

.modal-body {
  padding: var(--space-md);
}

/* Modal animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Prevent body scroll when modal is open */
body:has(turbo-frame#modal:not(:empty)) {
  overflow: hidden;
}

/* ============================================================================
   SLIDE-IN PANEL / BOTTOM SHEET
   ============================================================================ */

.panel-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Mobile: Solid backdrop for performance (no blur) */
  background: rgba(0, 0, 0, 0.75);
  padding-bottom: 0;
  z-index: 1000;
  /* Higher than nav (100) to cover both mobile bottom nav and desktop sidebar */
}

/* Desktop: Add blur effect and change alignment for right panel */
@media (min-width: 48rem) {
  .panel-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    align-items: stretch;
    justify-content: flex-end;
    padding-bottom: 0;
  }
}

/* Mobile: Bottom sheet */
.panel-content {
  background: var(--accent-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3), var(--shadow-xl);
  width: 100%;
  height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* GPU acceleration: will-change hints browser to prepare layer */
  will-change: transform, opacity;
  contain: layout style;
  animation: slideInFromBottom var(--duration-panel) var(--ease-spring);
}

/* Desktop: Right panel */
@media (min-width: 48rem) {
  .panel-content {
    border-radius: 0;
    width: 560px;
    max-height: none;
    height: 100vh;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3), var(--shadow-xl);
    animation: slideInFromRight var(--duration-panel) var(--ease-spring);
  }
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  background: var(--accent-bg);
  flex-shrink: 0;
}

/* Form inside panel-content must participate in flex layout */
.panel-content>form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header h2 {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--text);
}

.panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-light);
  transition: background var(--transition-standard), color var(--transition-standard);
  text-decoration: none;
  font-size: 24px;
  line-height: 1;
  font-weight: normal;
}

.panel-close:hover {
  background: var(--modal-border);
  color: var(--text);
}

.panel-scrollable-content {
  padding: var(--space-md);
  /* Bottom padding accounts for safe area when there's no panel-footer */
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  /* Critical: allows flex item to shrink below content size */
  display: flex;
  flex-direction: column;
  scroll-padding-top: var(--space-lg);
}

.panel-scrollable-content-centered {
  justify-content: center;
}

/* Make turbo-frames transparent to flex layout inside panels */
.panel-content>turbo-frame,
.panel-content>form>turbo-frame {
  display: contents;
}

/* When panel has a footer, remove bottom padding from scrollable content */
.panel-content:has(.panel-footer) .panel-scrollable-content {
  padding-bottom: 0;
}

/* Large form input modifier */
.form-input-large {
  font-size: var(--text-2xl) !important;
}

/* Large form field icon modifier */
.form-field-icon-large {
  width: 2rem !important;
  height: 2rem !important;
}

.panel-footer {
  padding: var(--space-md);
  /* Bottom padding accounts for safe area */
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  background-color: var(--accent-bg);
  border-top: 1px solid var(--modal-border);
  flex-shrink: 0;
}

/* Remove all extra margin from elements inside panel footer */
.panel-footer .form-actions,
.panel-footer .form-actions-flex {
  margin-top: 0;
  margin-bottom: 0;
}

.panel-footer .btn {
  margin: 0;
}

/* Prevent body scroll when panel is open */
body:has(turbo-frame#panel:not(:empty)) {
  overflow: hidden;
}

/* Panel slide-out animations */
.panel-backdrop.sliding-out {
  animation: fadeOut 0.15s ease-out forwards;
}

.panel-content.sliding-out {
  animation: slideOutToBottom 0.2s ease-in forwards;
}

@media (min-width: 48rem) {
  .panel-content.sliding-out {
    animation: slideOutToRight 0.2s ease-in forwards;
  }
}

/* ============================================================================
   6. FLASH MESSAGES & NOTIFICATIONS
   ============================================================================ */

/* Flash Messages Container */
#flash-messages {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  padding-top: calc(var(--space-md) + env(safe-area-inset-top));
  pointer-events: none;
  gap: var(--space-sm);
}

/* Flash Message - Minimal Campfire-inspired style */
.flash {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--accent-bg);
  color: var(--text);
  animation: flash-appear-fade 4s ease both;
}

/* Success messages */
.flash--success .flash__icon {
  color: var(--accent);
}

/* Error messages don't auto-dismiss */
.flash--error {
  animation: none;
}

.flash--error .flash__icon {
  color: var(--invalid);
}

/* Flash animation keyframes */
@keyframes flash-appear-fade {
  0% {
    opacity: 0;
    transform: translateY(-1rem);
  }

  8%,
  75% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

/* Flash Icon */
.flash__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flash__icon .icon {
  width: 20px;
  height: 20px;
}

/* Flash Text */
.flash__text {
  flex: 1;
  font-weight: 500;
  line-height: 1.4;
  word-wrap: break-word;
}

/* Close Button */
.flash__close {
  flex-shrink: 0;
  padding: var(--space-xs);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.5;
  color: var(--text-light);
  transition: opacity var(--transition-fast);
}

.flash__close .icon {
  width: 16px;
  height: 16px;
}

.flash__close:hover {
  opacity: 1;
}

/* Inline Alert system - for forms/pages (distinct from flash messages) */
.inline-alert {
  padding: 15px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  border-left: 4px solid;
  background: var(--accent-bg);
  color: var(--text);
}

.inline-alert-success {
  border-color: var(--valid);
  background: oklch(var(--lch-valid) / 0.1);
}

.inline-alert-danger,
.inline-alert-error {
  background-color: color-mix(in oklch, var(--invalid) 10%, transparent);
  border-color: color-mix(in oklch, var(--invalid) 30%, transparent);
  color: var(--invalid);
}

.inline-alert-warning {
  background-color: oklch(var(--lch-required) / 0.1);
  border-color: var(--required);
  color: var(--text);
}

.inline-alert-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inline-alert-icon {
  font-size: 1.2em;
  color: var(--valid);
  font-weight: bold;
}

.alert-message {
  color: var(--text);
  font-weight: 500;
}

/* Empty state with icon/title (used in other parts of the app) */
.empty-state-icon {
  font-size: 4rem;
  color: var(--accent);
  margin-bottom: 20px;
}

.empty-state-title {
  font-size: 1.5rem;
  color: var(--text);
  margin-bottom: 10px;
}

.empty-state-text {
  color: var(--text-light);
  margin-bottom: 30px;
}

/* Success Card Styles */
.success-card {
  background: oklch(var(--lch-valid) / 0.05);
  border: 1px solid oklch(var(--lch-valid) / 0.2);
}

.success-content {
  text-align: center;
  padding: 20px;
}

.success-icon {
  font-size: 3em;
  margin-bottom: 15px;
  color: var(--valid);
}

.success-title {
  color: var(--text);
  font-size: 1.3em;
  margin-bottom: 10px;
  font-weight: 600;
}

.success-description {
  color: var(--text-light);
  margin-bottom: 25px;
  line-height: 1.6;
}

.next-steps,
.update-summary {
  text-align: left;
  background: var(--accent-bg);
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.next-steps-title,
.summary-title {
  color: var(--text);
  font-size: 1.1em;
  margin-bottom: 15px;
  font-weight: 600;
}

.steps-list,
.update-list {
  color: var(--text-light);
  padding-left: 20px;
}

.steps-list li,
.update-list li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.steps-list li::marker {
  color: var(--accent);
  font-weight: bold;
}

/* Responsive Design */
@media (max-width: 48rem) {
  #flash-messages {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .flash-message {
    max-width: none;
  }

  .flash-content {
    padding: var(--space-sm) var(--space-md);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  /* Desktop only: Enhanced blur in dark mode */
  @media (min-width: 48rem) {
    .flash-message {
      backdrop-filter: blur(20px);
    }
  }

  /* Dark mode uses same solid backgrounds */
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .flash-message {
    border-width: 2px;
  }

  .flash-close {
    border: 1px solid currentColor;
  }
}

/* ============================================================================
   6b. GREEN BORDER FLASH ANIMATION
   ============================================================================ */

/* Container for the SVG border animation */
.flash-border-animation {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 9998;
  /* Below modals (9999) but above content */
  pointer-events: none;
  /* Allow clicks through to content below */
  opacity: 1;
  transition: opacity var(--transition-standard);
  /* 12px inset clears most phone rounded corners while respecting safe areas */
}

/* SVG stroke that draws clockwise around the screen */
.border-stroke {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 20px oklch(var(--lch-accent) / 0.5));
  /* Glow effect - single drop-shadow for performance */
  stroke-dasharray: 10000;
  /* Large enough to cover the entire perimeter */
  stroke-dashoffset: 10000;
  /* Start with stroke hidden */
  animation: draw-border 1.8s ease-out forwards;
  /* Slower drawing animation */
  vector-effect: non-scaling-stroke;
  /* Keep stroke width consistent */
}

/* Clockwise drawing animation using stroke-dashoffset */
@keyframes draw-border {
  from {
    stroke-dashoffset: 10000;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* Reduced motion support - instant display instead of animation */
@media (prefers-reduced-motion: reduce) {
  .border-stroke {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* Dark mode - removed glow effect for cleaner look */
@media (prefers-color-scheme: dark) {
  .border-edge {
    /* Glow removed for more professional appearance */
  }
}

/* ============================================================================
   7. PROGRESS BARS & INDICATORS
   ============================================================================ */

/* Base Progress Bar */
.progress-bar-container {
  width: 100%;
  margin-bottom: var(--space-sm);
}

.progress-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
}

.progress-bar-label {
  color: var(--text);
  font-weight: 500;
}

.progress-bar-value {
  color: var(--text-lighter);
  font-variant-numeric: tabular-nums;
}

.progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--accent-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
}

.progress-bar-fill {
  height: 100%;
  width: var(--progress-width, 0%);
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    background-color var(--transition-smooth);
  position: relative;
  min-width: 2px;
  /* Ensure visibility even at very low percentages */
}

/* Color Variants */

/* Success/Safe - Green (< 70%) */
.progress-bar-fill.success,
.progress-bar-fill[data-level="safe"] {
  background: var(--accent);
}

/* Warning - Orange (70-90%) */
.progress-bar-fill.warning,
.progress-bar-fill[data-level="warning"] {
  background: var(--required);
}

/* Danger - Red (> 90%) */
.progress-bar-fill.danger,
.progress-bar-fill[data-level="danger"] {
  background: var(--invalid);
}

/* Progress Bar with Glow */
.progress-bar-fill.glow {
  position: relative;
  overflow: hidden;
}

.progress-bar-fill.glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
      transparent,
      oklch(var(--lch-bg) / 0.3) 50%,
      transparent);
  animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

/* Size Variants */
.progress-bar-sm .progress-bar-track {
  height: 4px;
}

.progress-bar-md .progress-bar-track {
  height: 8px;
}

.progress-bar-lg .progress-bar-track {
  height: 12px;
}

/* Limit Indicator (with number display) */
.limit-indicator {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-standard);
}

.limit-indicator.warning {
  border-color: var(--required);
}

.limit-indicator.danger {
  border-color: var(--invalid);
}

.limit-indicator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.limit-indicator-title {
  font-size: var(--text-sm);
  color: var(--text-lighter);
  font-weight: 500;
}

.limit-indicator-count {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.limit-indicator-count.warning {
  color: var(--required);
}

.limit-indicator-count.danger {
  color: var(--invalid);
}

.limit-indicator-message {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  margin-top: var(--space-xs);
}

/* Stats Card */
.stat-card {
  background: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: opacity var(--transition-standard), transform var(--transition-standard);
  overflow: hidden;
  min-width: 0;
  /* Allow flex items to shrink below content size */
}

@media (any-hover: hover) {
  .stat-card:hover {
    border-color: var(--accent);
  }
}

.stat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  min-width: 0;
}

.stat-card-title {
  font-size: var(--text-sm);
  color: var(--text-lighter);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-card-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--text-lighter);
  flex-shrink: 0;
}

.stat-card-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Slightly smaller value on very narrow cards */
@media (max-width: 640px) {
  .stat-card-value {
    font-size: var(--text-xl);
  }
}

.stat-card-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: var(--space-xs);
}

.stat-card-trend.up {
  color: var(--accent);
}

.stat-card-trend.down {
  color: var(--invalid);
}

.stat-card-trend.neutral {
  color: var(--text-lighter);
}

.stat-card-subtitle {
  font-size: var(--text-xs);
  color: var(--text-lighter);
  margin-top: var(--space-xs);
}

/* Mini Stat (for player cards) */
.mini-stat {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: oklch(var(--lch-accent-bg) / 0.5);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

.mini-stat-icon {
  width: 14px;
  height: 14px;
  color: var(--text-lighter);
}

.mini-stat-value {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.mini-stat-label {
  color: var(--text-lighter);
}

/* Badge Indicators */
.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid;
}

.stat-badge.success {
  background: oklch(var(--lch-accent) / 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.stat-badge.warning {
  background: oklch(var(--lch-required) / 0.1);
  border-color: var(--required);
  color: var(--required);
}

.stat-badge.danger {
  background: oklch(var(--lch-invalid) / 0.1);
  border-color: var(--invalid);
  color: var(--invalid);
}

.stat-badge.neutral {
  background: oklch(var(--lch-border) / 0.3);
  border-color: var(--border);
  color: var(--text-lighter);
}

/* Responsive Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   8. WORK RATE BADGES - Consolidated System
   ============================================================================ */

/* Base work rate badge styles */
.work-rate-badge {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 2px solid;
  margin-left: var(--space-xs);
}

/* Low effort work rates (0-3) - Red with border */
.work-rate-badge.rate-0,
.work-rate-badge.rate-1,
.work-rate-badge.rate-2,
.work-rate-badge.rate-3 {
  background: color-mix(in oklch, var(--invalid) 20%, transparent);
  border-color: var(--invalid);
  color: var(--invalid);
}

/* Medium effort work rates (4-6) - Orange with border */
.work-rate-badge.rate-4,
.work-rate-badge.rate-5,
.work-rate-badge.rate-6 {
  background: oklch(var(--lch-required) / 0.2);
  border-color: var(--required);
  color: var(--required);
}

/* High effort work rates (7-8) - Green with border */
.work-rate-badge.rate-7,
.work-rate-badge.rate-8 {
  background: oklch(var(--lch-valid) / 0.2);
  border-color: var(--valid);
  color: var(--valid);
}

/* Excellent effort work rates (9-10) - Purple with border */
.work-rate-badge.rate-9,
.work-rate-badge.rate-10 {
  background: oklch(var(--lch-excellent) / 0.2);
  border-color: var(--excellent);
  color: var(--excellent);
}

/* Large variant */
.work-rate-badge.large {
  padding: 8px 16px;
  font-size: 1.1em;
  font-weight: 700;
}

/* ============================================================================
   9. UTILITY CLASSES - Checkout, Forms, Loading States
   ============================================================================ */

/* Form Utilities */
.form-field-flex-container {
  flex: 1;
}

/* Admin Badge Variants */
.badge-comp {
  background: oklch(75% 0.15 160);
  /* Green for complimentary */
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.badge-paid {
  background: oklch(65% 0.15 230);
  /* Blue for paid */
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

/* Loading Indicator */
.loading-indicator {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-light);
}

/* Empty State (Generic) */
/* ============================================================================
   REDUCED MOTION SUPPORT
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {

  .flash-message,
  .flash-animating {
    transition: opacity var(--transition-standard);
  }

  #flash-messages {
    animation: none;
  }

  .accordion-content,
  .accordion-chevron {
    transition: none;
  }

  .progress-bar-fill {
    transition: none;
  }

  .progress-bar-fill.glow::after {
    animation: none;
  }
}