/* ==========================================================================
   COMPLEXITY/SKILL LEVEL LEGEND
   ========================================================================== */

/* Selectable complexity filter buttons */
button.complexity-filter-item {
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border: none;
  background-color: transparent;
}

button.complexity-filter-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Make badges consistent size */
.complexity-filter-item .badge,
.complexity-legend .badge {
  min-width: 2.5rem;
}

/* ==========================================================================
   ATTENDANCE TOGGLE BUTTON
   Fixed-size button for consistent appearance across states
   ========================================================================== */

.attendance-cycle-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 0.375rem;
}

.attendance-cycle-btn .attendance-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
}

/* Pulse animation - color matches button state */
.attendance-pulse {
  animation: attendance-pulse-animation 1s ease-in-out 4;
}

.attendance-pulse.btn-secondary {
  --pulse-color: var(--bs-secondary-rgb);
}

.attendance-pulse.btn-success {
  --pulse-color: var(--bs-success-rgb);
}

.attendance-pulse.btn-danger {
  --pulse-color: var(--bs-danger-rgb);
}

@keyframes attendance-pulse-animation {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--pulse-color, var(--bs-secondary-rgb)), 0.6);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 15px rgba(var(--pulse-color, var(--bs-secondary-rgb)), 0);
    filter: brightness(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .attendance-pulse {
    animation: none;
  }
}

/* ==========================================================================
   UTILITIES
   Helper classes not provided by Bootstrap
   ========================================================================== */

/* Required for text-truncate to work inside flexbox containers */
.min-w-0 {
  min-width: 0;
}

/* ==========================================================================
   MOBILE HEADER
   Transparent sticky header with content fade effect
   ========================================================================== */

.mobile-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  /* Ensure the header itself doesn't have a solid background 
     if you want the gradient to be the primary 'fader' */
  background: transparent; 
}

.mobile-header::after {
  content: '';
  position: absolute;
  /* Position it at the bottom of the header, extending UPWARD */
  bottom: 0; 
  left: 0;
  right: 0;
  height: 100%; /* Cover the whole header height */
  
  /* Gradient: Solid at the top, transparent at the bottom */
  background: linear-gradient(
    to top,
    transparent 0%,
    color-mix(in srgb, var(--bs-body-bg) 80%, transparent) 50%,
    var(--bs-body-bg) 100%
  );
  
  pointer-events: none;
  z-index: -1; /* Place it BEHIND the header text/icons but ABOVE the scrolling page content */
}

/* ==========================================================================
   BACK BUTTON
   iOS-style back button with glassy effect and expanding border on tap
   ========================================================================== */

.back-btn {
  /* Glassmorphism blur */
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);

  /* Smooth transitions */
  transition: transform 0.15s ease-out, filter 0.12s ease-out;

  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;

  /* Required for ::after positioning */
  position: relative;
  overflow: visible;
}

/* Expanding border/ripple effect - use primary color for visibility */
.back-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--nav-ripple-color);
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  pointer-events: none;
}

/* Hover state */
.back-btn:hover {
  filter: brightness(1.1);
}

/* Active/touching state - enlarge with brighter background */
.back-btn:active,
.back-btn.touching {
  transform: scale(1.08);
  filter: brightness(1.5);
  transition: transform 0s, filter 0s;
  overflow: hidden;
}

.back-btn:active::after,
.back-btn.touching::after {
  opacity: 0.6;
  transform: scale(1.5);
  transition: transform 0s, opacity 0s;
}

/* Focus state for accessibility */
.back-btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Fallback for browsers without color-mix */
@supports not (background-color: color-mix(in srgb, white 50%, transparent)) {
  .back-btn {
    background-color: rgba(255, 255, 255, 0.7) !important;
  }
  [data-bs-theme="dark"] .back-btn {
    background-color: rgba(33, 37, 41, 0.7) !important;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .back-btn {
    transition: none;
  }
  .back-btn:active,
  .back-btn.touching {
    transform: none;
  }
  .back-btn::after {
    transition: none;
  }
  .back-btn:active::after,
  .back-btn.touching::after {
    opacity: 0;
  }
}

/* ==========================================================================
   BREADCRUMB STYLING
   Modern, minimal breadcrumbs with chevron dividers
   ========================================================================== */

.breadcrumb {
  --bs-breadcrumb-divider: '›';
  font-size: 0.875rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-secondary);
}

.breadcrumb-item a {
  color: var(--bs-secondary);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--bs-body-color);
}

/* ==========================================================================
   ACTION PILL BUTTON
   iOS-style pill button with glassy effect and expanding border on tap
   Used in mobile header for Edit button
   ========================================================================== */

.action-pill {
  /* Match back button height */
  height: 40px;
  display: inline-flex;
  align-items: center;

  /* Glassmorphism blur */
  backdrop-filter: blur(25px) saturate(150%);
  -webkit-backdrop-filter: blur(25px) saturate(150%);

  /* Smooth transitions */
  transition: transform 0.15s ease-out, filter 0.12s ease-out;

  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;

  /* Required for ::after positioning */
  position: relative;
  overflow: visible;
}

/* Expanding border/ripple effect - use primary color for visibility */
.action-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  border: 2px solid var(--nav-ripple-color);
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  pointer-events: none;
}

/* Hover state */
.action-pill:hover {
  filter: brightness(1.1);
}

/* Active/touching state - enlarge with brighter background */
.action-pill:active,
.action-pill.touching {
  transform: scale(1.08);
  filter: brightness(1.5);
  transition: transform 0s, filter 0s;
  overflow: hidden;
}

.action-pill:active::after,
.action-pill.touching::after {
  opacity: 1;
  transform: scale(1.4);
  transition: transform 0s, opacity 0s;
}

/* Focus state for accessibility */
.action-pill:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Fallback for browsers without color-mix */
@supports not (background-color: color-mix(in srgb, white 50%, transparent)) {
  .action-pill {
    background-color: rgba(255, 255, 255, 0.7) !important;
  }
  [data-bs-theme="dark"] .action-pill {
    background-color: rgba(33, 37, 41, 0.7) !important;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .action-pill {
    transition: none;
  }
  .action-pill:active,
  .action-pill.touching {
    transform: none;
  }
  .action-pill::after {
    transition: none;
  }
  .action-pill:active::after,
  .action-pill.touching::after {
    opacity: 0;
  }
}


/* ==========================================================================
   HEADER MENU BUTTON
   Three-dots dropdown button in mobile header
   ========================================================================== */

.header-menu-btn {
  transition: transform 0.15s ease-out, filter 0.12s ease-out;
}

/* Hover state */
.header-menu-btn:hover {
  filter: brightness(1.1);
}

/* Active/touching state - enlarge with brighter background */
.header-menu-btn:active,
.header-menu-btn.touching {
  transform: scale(1.08);
  filter: brightness(1.5);
  transition: transform 0s, filter 0s;
}

/* Focus state for accessibility */
.header-menu-btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .header-menu-btn {
    transition: none;
  }
  .header-menu-btn:active,
  .header-menu-btn.touching {
    transform: none;
  }
}


/* ==========================================================================
   SKILL HEAT MAP
   Compact visualization for group skill distribution
   ========================================================================== */

.skill-heatmap .heatmap-label {
  min-width: 45px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--bs-secondary);
}

.skill-heatmap .heatmap-cells {
  display: flex;
  gap: 2px;
}

.skill-heatmap .heatmap-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 600;
}

/* ==========================================================================
   SKILL DISTRIBUTION ACCORDION
   Expandable player skill distribution by category
   ========================================================================== */

.skill-distribution-accordion .accordion-button {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  margin-left: 0;
}

.skill-distribution-accordion .accordion-button:focus {
  box-shadow: none;
}

.skill-distribution-accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
}

.skill-distribution-accordion .accordion-body {
  padding: 0.5rem 0.5rem;
}

/* Fixed-width badges for vertical alignment */
.skill-distribution-accordion .skill-badges .badge {
  min-width: 24px;
  text-align: center;
}

/* Progress bar text styling */
.skill-distribution-accordion .progress-bar {
  font-size: 0.65rem;
  font-weight: 600;
}

/* ==========================================================================
   SKILL BADGES
   Skill badges indicate number of people per category, need to be same size,
   so that they align vertically regardless of number of digits.
   ========================================================================== */

/* Fix the badge container */
.skill-badges {
    width: 150px;           /* Adjust this to fit your badges + gaps */
    justify-content: flex-end;
    flex-shrink: 0;         /* Vital: keeps the container from collapsing */
    margin-right: 0.5rem;   /* Space between badges and the chevron */
}

/* Fix the individual badges */
.skill-badges .badge {
    width: 30px;
    text-align: center;
    padding: 0.35em 0;      /* Vertical padding only */
}