/**
 * TeamZone App v1.0 - CSS Components (BEM Notation)
 * 
 * VERSION: 1.0.0
 * DATE: 2026-03-31
 * AUTHOR: Refactor Team
 * 
 * BEM PATTERN:
 * - Block: .component-name (e.g., .button, .card, .form-input)
 * - Element: .component-name__element (e.g., .button__icon, .card__header)
 * - Modifier: .component-name--modifier (e.g., .button--primary, .card--active)
 * 
 * USAGE: All inline Tailwind replaced with these BEM classes.
 * NO inline styles or hardcoded colors - use CSS classes instead.
 * 
 * ========================================================================
 * 1. TYPOGRAPHY (HEADINGS)
 * ========================================================================
 */

h1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.75rem;
}

h5 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

h6 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

/**
 * ========================================================================
 * 2. BUTTONS
 * ========================================================================
 */

.button {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition:
    color 0.2s ease-out,
    background-color 0.2s ease-out;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border: 1px solid transparent;
}

.button:disabled,
.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button--primary {
  background-color: var(--color-primary, #039faf);
  color: white;
}

.button--primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark, #027a8f);
}

.button--full-width {
  width: 100%;
}

.button--spaced-top {
  margin-top: 1.5rem;
}

.button--danger {
  background-color: #dc2626;
  color: white;
}

.button--danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

.button--success {
  background-color: #22c55e;
  color: white;
}

.button--success:hover:not(:disabled) {
  background-color: #16a34a;
}

.button--secondary {
  background-color: #e5e7eb;
  color: #111827;
}

.button--secondary:hover:not(:disabled) {
  background-color: #d1d5db;
}

.button--sm {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.button--lg {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.125rem;
}

.button--loading {
  opacity: 0.75;
  cursor: wait;
  pointer-events: none;
}

.button__icon {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  margin-right: 0.5rem;
}

.button__icon--right {
  margin-right: 0;
  margin-left: 0.5rem;
}

.button__label {
  display: inline;
}

/* On mobile: hide button labels, show only icons */
@media (max-width: 768px) {
  .button__label {
    display: none;
  }
  
  .button {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

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

.card {
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
}

.card__header {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.card__header-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: #111827;
}

.card__body {
  /* Empty body for spacing */
}

.card__footer {
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
  margin-top: 1rem;
}

.card--primary {
  border-color: #c0f0f6;
  background-color: #f0fdfe;
}

.card--primary .card__header {
  border-color: #c0f0f6;
}

.card--elevated {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}

.card--active {
  border-color: var(--color-primary, #039faf);
  border-width: 2px;
}

/**
 * STAT CARDS - Compact statistics display
 * Used for displaying key metrics (hours, progress, status)
 */

.stat-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  transition: all 0.2s ease-out;
}

.stat-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.stat-card__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-card__value {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.stat-card__unit {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 400;
  margin-top: -0.25rem;
}

.stat-card__icon {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Stat Card Color Variants */
.stat-card--success {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  border-color: #bbf7d0;
}

.stat-card--success .stat-card__value {
  color: #15803d;
}

.stat-card--warning {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
  border-color: #fcd34d;
}

.stat-card--warning .stat-card__value {
  color: #b45309;
}

.stat-card--danger {
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  border-color: #fecaca;
}

.stat-card--danger .stat-card__value {
  color: #b91c1c;
}

.stat-card--info {
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
  border-color: #bae6fd;
}

.stat-card--info .stat-card__value {
  color: #0369a1;
}

.stat-card--gray {
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  border-color: #d1d5db;
}

.stat-card--gray .stat-card__value {
  color: #374151;
}

/**
 * ========================================================================
 * 4. ALERTS / NOTIFICATIONS
 * ========================================================================
 */

.alert {
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid;
}

.alert__icon {
  flex-shrink: 0;
  font-size: 1.125rem;
}

.alert__message {
  font-size: 0.875rem;
  line-height: 1.25rem;
  flex-grow: 1;
}

.alert__close {
  font-size: 1.125rem;
  cursor: pointer;
  color: #9ca3af;
  flex-shrink: 0;
}

.alert__close:hover {
  color: #4b5563;
}

.alert--success {
  background-color: #f0fdf4;
  color: #166534;
  border-color: #dcfce7;
}

.alert--success .alert__icon {
  color: #16a34a;
}

.alert--error {
  background-color: #fef2f2;
  color: #991b1b;
  border-color: #fee2e2;
}

.alert--error .alert__icon {
  color: #dc2626;
}

.alert--danger {
  background-color: #fef2f2;
  color: #991b1b;
  border-color: #fee2e2;
}

.alert--danger .alert__icon {
  color: #dc2626;
}

.alert--warning {
  background-color: #fefce8;
  color: #704214;
  border-color: #fef3c7;
}

.alert--warning .alert__icon {
  color: #ca8a04;
}

.alert--info {
  background-color: #eff6ff;
  color: #1e40af;
  border-color: #dbeafe;
}

.alert--info .alert__icon {
  color: #2563eb;
}

.alert--spaced-top {
  margin-top: 1rem;
}

/**
 * ========================================================================
 * 5. FORM INPUTS
 * ========================================================================
 */

.form-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-input__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input__field {
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  transition:
    border-color 0.15s ease-out,
    box-shadow 0.15s ease-out;
}

.form-input__field:focus {
  outline: none;
  border-color: var(--color-primary, #039faf);
  box-shadow: 0 0 0 1px var(--color-primary, #039faf);
}

.form-input__field::placeholder {
  color: #9ca3af;
}

.form-input__error {
  color: #dc2626;
  font-size: 0.75rem;
  line-height: 1rem;
}

.form-input__hint {
  color: #4b5563;
  font-size: 0.75rem;
  line-height: 1rem;
}

.form-input--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.form-input--disabled .form-input__field {
  background-color: #f3f4f6;
  cursor: not-allowed;
}

.form-input--invalid .form-input__field {
  border-color: #ef4444;
  background-color: #fef2f2;
}

.form-input__field--auto {
  width: auto !important;
}

.form-input__field--search {
  width: auto !important;
  min-width: 250px !important;
}

.user-search__form {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 500px) {
  .user-search__form {
    flex-direction: column;
  }
  .form-input__field {
    width: 100% !important;
  }
}

.user-search__button {
  padding: 0.5rem 1rem;
}

/**
 * ========================================================================
 * 6. USER BADGES
 * ========================================================================
 */

.user-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-badge__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--color-primary, #039faf);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.875rem;
  line-height: 1.25rem;
  flex-shrink: 0;
}

.user-badge__content {
  flex-grow: 1;
}

.user-badge__name {
  font-weight: 600;
  color: #111827;
}

.user-badge__status {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: #4b5563;
}

.user-badge--online .user-badge__status {
  color: #16a34a;
}

.user-badge--offline .user-badge__status {
  color: #d1d5db;
}

.user-badge--verified .user-badge__status {
  color: #2563eb;
}

.user-badge--pending .user-badge__status {
  color: #ca8a04;
}

.user-badge--inactive .user-badge__status {
  color: #dc2626;
}

/**
 * ========================================================================
 * 7. BADGES / TAGS
 * ========================================================================
 */

.badge {
  display: inline-block;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.badge--primary {
  background-color: #c0f0f6;
  color: var(--color-primary, #039faf);
}

.badge--success {
  background-color: #dcfce7;
  color: #166534;
}

.badge--danger {
  background-color: #fee2e2;
  color: #991b1b;
}

.badge--warning {
  background-color: #fef3c7;
  color: #704214;
}

.badge--info {
  background-color: #dbeafe;
  color: #1e40af;
}

.badge--gray {
  background-color: #f3f4f6;
  color: #1f2937;
}

/**
 * ========================================================================
 * 8. STATUS BADGE
 * ========================================================================
 */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: bold;
}

.status-badge__icon {
  font-size: 1rem;
}

.status-badge--verified {
  color: #16a34a;
}

.status-badge--pending {
  color: #ca8a04;
}

.status-badge--inactive {
  color: #dc2626;
}

.status-badge--available {
  color: #16a34a;
}

.status-badge--unavailable {
  color: #d1d5db;
}

/**
 * ========================================================================
 * 9. TABLES
 * ========================================================================
 */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table__head {
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.data-table__head-cell {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
}

.data-table__row {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease-out;
}

.data-table__row:hover {
  background-color: #f9fafb;
}

.data-table__row--striped:nth-child(even) {
  background-color: #f9fafb;
}

.data-table__cell {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
}

.data-table__cell--numeric {
  text-align: right;
}

/**
 * ========================================================================
 * 10. MODALS
 * ========================================================================
 */

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  opacity: 0.5;
  transition: opacity 0.2s ease-out;
}

.modal__content {
  position: relative;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 28rem;
  width: 100%;
  margin-left: 1rem;
  margin-right: 1rem;
  z-index: 10;
}

.modal__header {
  border-bottom: 1px solid #e5e7eb;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.modal__title {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: #111827;
}

.modal__body {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.modal__footer {
  border-top: 1px solid #e5e7eb;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.modal__close {
  color: #9ca3af;
  font-size: 1.125rem;
  cursor: pointer;
}

.modal__close:hover {
  color: #4b5563;
}

/**
 * ========================================================================
 * 11. GRID LAYOUT
 * ========================================================================
 */

.grid-layout {
  display: grid;
  gap: 1rem;
}

.grid-layout--cols-auto {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-layout--cols-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-layout--cols-auto {
    grid-template-columns: auto;
  }
}

.grid-layout--cols-2 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-layout--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grid-layout--cols-3 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-layout--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-layout--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.grid-layout--cols-4 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-layout--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-layout--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/**
 * ========================================================================
 * 12. SESSIONS / REGISTRATION
 * ========================================================================
 */

.session-card {
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  transition: box-shadow 0.2s ease-out;
}

.session-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.session-card__title {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: #111827;
}

.session-card__time {
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: 0.5rem;
}

.session-card__participants {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #4b5563;
  margin-top: 1rem;
}

.session-card__count {
  font-weight: bold;
}

.session-card--available .session-card__count {
  color: var(--color-success, #16a34a);
}

.session-card--limited .session-card__count {
  color: var(--color-warning, #ca8a04);
}

.session-card--full .session-card__count {
  color: var(--color-danger, #dc2626);
}

.session-registration-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

/**
 * ========================================================================
 * 13. PAGINATION
 * ========================================================================
 */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.pagination__item {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition: background-color 0.2s ease-out;
  cursor: pointer;
}

.pagination__item:hover {
  background-color: #f9fafb;
}

.pagination__item--active {
  background-color: var(--color-primary, #039faf);
  color: white;
  border-color: var(--color-primary, #039faf);
}

.pagination__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination__dots {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/**
 * ========================================================================
 * 14. NOTIFICATIONS / TOASTS
 * ========================================================================
 */

.notification-toast {
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.notification-toast__icon {
  flex-shrink: 0;
  font-size: 1.125rem;
}

.notification-toast__content {
  flex-grow: 1;
}

.notification-toast__title {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.notification-toast__message {
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 0.25rem;
}

.notification-toast__close {
  font-size: 1.125rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s ease-out;
}

.notification-toast__close:hover {
  opacity: 0.7;
}

.notification-toast--success {
  background-color: #f0fdf4;
  border-color: #dcfce7;
}

.notification-toast--success .notification-toast__icon {
  color: #16a34a;
}

.notification-toast--success .notification-toast__title,
.notification-toast--success .notification-toast__message {
  color: #166534;
}

.notification-toast--error {
  background-color: #fef2f2;
  border-color: #fee2e2;
}

.notification-toast--error .notification-toast__icon {
  color: #dc2626;
}

.notification-toast--error .notification-toast__title,
.notification-toast--error .notification-toast__message {
  color: #991b1b;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/**
 * ========================================================================
 * 15. LINK STYLES
 * ========================================================================
 */

.link-primary {
  color: var(--color-primary, #039faf);
  font-weight: 600;
  transition: text-decoration 0.2s ease-out;
}

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

.link-secondary {
  color: #4b5563;
  transition:
    color 0.2s ease-out,
    text-decoration 0.2s ease-out;
}

.link-secondary:hover {
  color: #111827;
  text-decoration: underline;
}

/**
 * ========================================================================
 * 16. UTILITY CLASSES
 * ========================================================================
 */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opacity-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.transition-all {
  transition: all 0.2s ease-in-out;
}

/**
 * ========================================================================
 * 17. ADMIN TABLE SPECIFIC
 * ========================================================================
 */

.admin-table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease-out;
}

.admin-table-row__content {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-grow: 1;
}

.admin-table-row__status-badge {
  text-align: right;
}

.admin-table-row--active {
  border-color: #a0f0f8;
  background-color: #f0fdfe;
}

/**
 * ========================================================================
 * 18. LOGIN PAGE SPECIFIC
 * ========================================================================
 */

.login__title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: bold;
}

.login__subtitle {
  color: #4b5563;
}

.required-indicator {
  color: #ef4444;
}

.divider {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.divider__line {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
}

.divider__line-inner {
  width: 100%;
  border-top: 1px solid #d1d5db;
}

.divider__text {
  position: relative;
  display: flex;
  justify-content: center;
}

.divider__text-inner {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: white;
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.checkbox {
  border-radius: 0.25rem;
  border-color: #d1d5db;
  color: var(--color-primary, #039faf);
  cursor: pointer;
}

.checkbox:focus {
  box-shadow: 0 0 0 3px rgba(3, 159, 175, 0.1);
}

.checkbox__label {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #374151;
  cursor: pointer;
}

.login-links {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-links__item {
  /* Item container */
}

.login-links__item--divider {
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
}

.login-links__item--support {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #9ca3af;
  padding-top: 0.75rem;
}

.login-links__text {
  color: #4b5563;
}

.login-info {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-left: 1rem;
  padding-right: 1rem;
}

.login-container {
  width: 100%;
  max-width: 28rem;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

/**
 * ========================================================================
 * STRIPE COMPONENT (Registration Status Display Bars)
 * ========================================================================
 * 
 * Used to display registration counts with colored bars:
 * - stripe--success: Confirmed/Attending (Green)
 * - stripe--danger: Cancelled/Declined (Red)
 * - stripe--empty: Available slots (Light Gray with border)
 * - stripe--warning: Pending/In-progress (Amber)
 */

.stripe {
  display: inline-block;
  width: 0.5rem;
  height: 1.5rem;
  border-radius: 0.125rem;
  margin-right: 0.25rem;
}

.stripe:last-child {
  margin-right: 0;
}

.stripe--success {
  background-color: #22c55e;
}

.stripe--danger {
  background-color: #f87171;
}

.stripe--empty {
  background-color: #f9fafb;
  border: 1px solid #d1d5db;
  box-sizing: border-box;
}

.stripe--warning {
  background-color: #fbbf24;
}

/**
 * ========================================================================
 * 20. SESSION CARDS
 * ========================================================================
 *
 * Card with animated bottom border on hover
 * Used for sessions and helper shifts display
 */

.session-card {
  position: relative;
  overflow: hidden;
}

.session-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #039faf;
  transition: none;
}

.session-card:hover::after {
  animation: fillLine 0.5s ease-out forwards;
}

@keyframes fillLine {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/**
 * ========================================================================
 * 21. ICONS 
 * ========================================================================
 *
 * Font Awesome icons
 */

h2 i.fas {
  margin-right: 0.5em;
}
h3 i.fas {
  margin-right: 0.5em;
}

p i {
  margin-right: 0.5em;
}

p.session-datetime i,
p.meta-info i {
  margin-right: 0.2em;
  color: #666;
}

p.session-datetime i:nth-child(n + 2) {
  margin-left: 0.5em;
}

p.meta-info span.separator {
  display: none;
}
p.meta-info span:nth-child(n-1):not(:last-child):after {
  content: "|";
  padding: 0 0.5em;
}

div.section {
  margin-bottom: 4rem !important;
}

/**
 * ========================================================================
 * UNSORTED
 * ========================================================================
 */

.card__body .field-label {
  font-weight: bold;
}

/**
 * ========================================================================
 * PLAYER STATUS BADGES (New Badge System)
 * ========================================================================
 */

.badge-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Base badge styling */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Status Badges (0-10: Schnupperer/Neu, 11-50: Einsteiger/Junior, >200: Senior/Legende) */
.badge-gray {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.badge-blue {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.badge-green {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.badge-orange {
  background-color: #fed7aa;
  color: #92400e;
  border: 1px solid #fdba74;
}

.badge-purple {
  background-color: #e9d5ff;
  color: #6b21a8;
  border: 1px solid #d8b4fe;
}

.badge-gold {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde047;
}

/* Member badge (Member status) */
.badge-red {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Role badges */
.badge-info {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.badge-warning {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde047;
}

.badge-danger {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Helper status */
.badge-success {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.badge-secondary {
  background-color: #e5e7eb;
  color: #374151;
  border: 1px solid #d1d5db;
}

/* Badge icon styling */
.badge i {
  font-size: 0.875rem;
}

/* Badge hover effect */
.badge {
  transition: all 0.2s ease-in-out;
}

.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Player status section (on registration display) */
.player-status {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

.player-status__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.player-status__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/**
 * ========================================================================
 * NAVIGATION
 * ========================================================================
 */

.navigation {
    flex: 1; 
    justify-content: center; 
    display: flex;
}

.navigation--mobile {
  flex-direction: column;
}

@media (max-width: 768px) {
  .navigation--desktop {
    display: none !important;
  }
}

/**
 * ========================================================================
 * END COMPONENTS
 * ========================================================================
 */