/* ============================================================================
   CENTRALIZED BADGE COMPONENT SYSTEM
   ============================================================================
   
   This file defines all reusable badge/tag styles across the application.
   Uses design tokens from /static/css/tokens/base.css
   
   Badge Variants:
   - .badge (base)
   - .badge-success
   - .badge-error / .badge-danger
   - .badge-warning
   - .badge-info
   - .badge-neutral
   
   Badge Sizes:
   - .badge-xs (small)
   - .badge-sm (small)
   - .badge-md (medium - default)
   - .badge-lg (large)
   
   ============================================================================ */

/* ============================================================================
   BASE BADGE STYLES
   ============================================================================ */

.badge,
.tag,
.label-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all var(--duration-base) var(--easing-smooth);
  cursor: default;
}

/* ============================================================================
   DEFAULT BADGE (Neutral/Info)
   ============================================================================ */

.badge,
.badge.badge-neutral {
  background: #e5e7eb;
  color: #374151;
  border-color: #9ca3af;
}

.badge:hover,
.badge.badge-neutral:hover {
  background: #d1d5db;
  border-color: #6b7280;
}

/* Gray badge (matches stat-card--gray) */
.badge.badge-gray {
  background: #e5e7eb;
  color: #374151;
  border-color: #9ca3af;
}

.badge.badge-gray:hover {
  background: #d1d5db;
  border-color: #6b7280;
}

/* Blue badge (matches stat-card--blue) */
.badge.badge-blue {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

.badge.badge-blue:hover {
  background: #bfdbfe;
  border-color: #2563eb;
}

/* Purple badge (IELTS family) */
.badge.badge-purple {
  background: #F7F3FF;
  color: #7352D5;
  border-color: #B8A2F7;
}

.badge.badge-purple:hover {
  background: #efe7ff;
  border-color: #7352D5;
}

/* Pink badge (PTE family) */
.badge.badge-pink {
  background: #FFF3F6;
  color: #D43E73;
  border-color: #EA8CAC;
}

.badge.badge-pink:hover {
  background: #ffe6ed;
  border-color: #D43E73;
}

/* Sectional badge (pastel indigo family) */
.badge.badge-sectional {
  background: #F3F4FF;
  color: #4E5DD3;
  border-color: #A6B1FF;
}

.badge.badge-sectional:hover {
  background: #e7e9ff;
  border-color: #4E5DD3;
}

/* Full badge (pastel green family) */
.badge.badge-full {
  background: #F3FBF8;
  color: #0D8D69;
  border-color: #77D3B1;
}

.badge.badge-full:hover {
  background: #e2f6ee;
  border-color: #0D8D69;
}

/* ============================================================================
   SUCCESS BADGE
   ============================================================================ */

.badge.badge-success {
  background: #d1fae5;
  color: #047857;
  border-color: #6ee7b7;
}

.badge.badge-success:hover {
  background: #a7f3d0;
  border-color: #10b981;
}

/* ============================================================================
   ERROR / DANGER BADGE
   ============================================================================ */

.badge.badge-error,
.badge.badge-danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.badge.badge-error:hover,
.badge.badge-danger:hover {
  background: #fecaca;
  border-color: #ef4444;
}

/* ============================================================================
   WARNING BADGE
   ============================================================================ */

.badge.badge-warning {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}

.badge.badge-warning:hover {
  background: #fde68a;
  border-color: #f59e0b;
}

/* ============================================================================
   INFO BADGE
   ============================================================================ */

.badge.badge-info {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

.badge.badge-info:hover {
  background: #bfdbfe;
  border-color: #2563eb;
}

/* ============================================================================
   BADGE SIZES
   ============================================================================ */

/* Extra Small Badge */
.badge-xs {
  padding: 2px var(--space-1);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Small Badge */
.badge-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

/* Medium Badge (Default) */
.badge-md {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

/* Large Badge */
.badge-lg {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ============================================================================
   BADGE WITH DOT/ICON
   ============================================================================ */

.badge-dot,
.badge-with-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.badge-dot::before,
.badge-with-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-dot-start::before,
.badge-with-dot::before {
  order: -1;
}

/* ============================================================================
   BADGE WITH ICON
   ============================================================================ */

.badge-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.badge-icon::before,
.badge .material-icons-outlined,
.badge .material-icons-round,
.badge .material-symbols-outlined,
.badge .material-symbols-rounded {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============================================================================
   BADGE PILL (More Rounded)
   ============================================================================ */

.badge-pill,
.badge-rounded {
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
}

/* ============================================================================
   BADGE OUTLINE
   ============================================================================ */

.badge-outline,
.badge-bordered {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.badge-outline-success {
  background: transparent;
  border: 1px solid #10b981;
  color: #047857;
}

.badge-outline-error,
.badge-outline-danger {
  background: transparent;
  border: 1px solid #ef4444;
  color: #991b1b;
}

.badge-outline-warning {
  background: transparent;
  border: 1px solid #f59e0b;
  color: #92400e;
}

.badge-outline-info {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

/* ============================================================================
   BADGE FLAT (No Border)
   ============================================================================ */

.badge-flat {
  border: none;
}

/* ============================================================================
   STATUS BADGE (Filled Solid)
   ============================================================================ */

.badge-filled,
.status-badge {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: none;
  font-weight: 700;
  cursor: pointer;
}

.status-badge:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.badge-filled-success,
.status-success {
  background: #10b981;
  color: white;
}

.badge-filled-error,
.badge-filled-danger,
.status-error {
  background: #ef4444;
  color: white;
}

.badge-filled-warning,
.status-warning {
  background: #f59e0b;
  color: white;
}

.badge-filled-info,
.status-info {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* ============================================================================
   DISMISSIBLE BADGE / CHIP
   ============================================================================ */

.badge-dismissible,
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent-contrast);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.badge-dismiss-btn,
.chip-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--duration-base) var(--easing-smooth);
  font-size: 12px;
  line-height: 1;
}

.badge-dismiss-btn:hover,
.chip-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   COUNTER BADGE (For Notifications)
   ============================================================================ */

.badge-count,
.badge-counter,
.notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  background: #ef4444;
  color: white;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  position: relative;
}

.badge-count-dot,
.badge-dot-only {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
}

/* ============================================================================
   BADGE WITH AVATAR
   ============================================================================ */

.badge-avatar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
}

.badge-avatar-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}

/* ============================================================================
   BADGE GROUPS
   ============================================================================ */

.badge-group,
.badge-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.badge-group-vertical {
  flex-direction: column;
  align-items: flex-start;
}

/* ============================================================================
   ANIMATED BADGE
   ============================================================================ */

.badge-pulse {
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.badge-bounce {
  animation: badgeBounce 0.5s ease;
}

@keyframes badgeBounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* ============================================================================
   RESPONSIVE BADGES
   ============================================================================ */

@media (max-width: 640px) {
  .badge-lg {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
  }

  .badge-group {
    gap: var(--space-1);
  }
}

/* ============================================================================
   DARK MODE ADJUSTMENTS
   ============================================================================ */

html[data-theme="dark"] .badge,
html[data-theme="dark"] .badge-neutral,
html[data-theme="dark"] .badge-gray {
  background: #374151;
  color: #e5e7eb;
  border-color: #4b5563;
}

html[data-theme="dark"] .badge:hover,
html[data-theme="dark"] .badge-neutral:hover,
html[data-theme="dark"] .badge-gray:hover {
  background: #4b5563;
  color: #f3f4f6;
  border-color: #6b7280;
}

html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .badge-blue {
  background: #1e3a8a;
  color: #93c5fd;
  border-color: #1d4ed8;
}

html[data-theme="dark"] .badge-info:hover,
html[data-theme="dark"] .badge-blue:hover {
  background: #1e40af;
  color: #bfdbfe;
  border-color: #2563eb;
}

html[data-theme="dark"] .badge-purple {
  background: #2a1f4d;
  color: #B8A2F7;
  border-color: #7352D5;
}

html[data-theme="dark"] .badge-purple:hover {
  background: #38296b;
  color: #c9b9fb;
  border-color: #8a6ce0;
}

html[data-theme="dark"] .badge-pink {
  background: #4d1f30;
  color: #EA8CAC;
  border-color: #D43E73;
}

html[data-theme="dark"] .badge-pink:hover {
  background: #6b2942;
  color: #f3a8c0;
  border-color: #e05a8c;
}

html[data-theme="dark"] .badge-sectional {
  background: #1f234d;
  color: #A6B1FF;
  border-color: #4E5DD3;
}

html[data-theme="dark"] .badge-sectional:hover {
  background: #2a3070;
  color: #bcc6ff;
  border-color: #6975e0;
}

html[data-theme="dark"] .badge-full {
  background: #0f2e24;
  color: #77D3B1;
  border-color: #0D8D69;
}

html[data-theme="dark"] .badge-full:hover {
  background: #164537;
  color: #8fe0c2;
  border-color: #16a87f;
}

html[data-theme="dark"] .badge-success {
  background: #064e3b;
  color: #6ee7b7;
  border-color: #065f46;
}

html[data-theme="dark"] .badge-success:hover {
  background: #065f46;
  color: #a7f3d0;
  border-color: #10b981;
}

html[data-theme="dark"] .badge-error,
html[data-theme="dark"] .badge-danger {
  background: #7f1d1d;
  color: #fca5a5;
  border-color: #991b1b;
}

html[data-theme="dark"] .badge-error:hover,
html[data-theme="dark"] .badge-danger:hover {
  background: #991b1b;
  color: #fecaca;
  border-color: #ef4444;
}

html[data-theme="dark"] .badge-warning {
  background: #78350f;
  color: #fcd34d;
  border-color: #92400e;
}

html[data-theme="dark"] .badge-warning:hover {
  background: #92400e;
  color: #fde68a;
  border-color: #f59e0b;
}

html[data-theme="dark"] .badge-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

html[data-theme="dark"] .badge-dismissible,
html[data-theme="dark"] .chip {
  background: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
}

html[data-theme="dark"] .badge-avatar-image {
  background: var(--color-bg);
}

/* ============================================================================
   SEMANTIC STATUS BADGES (Using Token System)
   These variants use the centralized color tokens for consistency.
   ============================================================================ */

/* Correct/Incorrect badges for question answers */
.badge-correct {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: transparent;
}

.badge-incorrect {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: transparent;
}

/* Token-based status badges */
.badge-status-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.badge-status-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.badge-status-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.badge-status-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

/* Dark mode for semantic status badges */
html[data-theme="dark"] .badge-correct,
html[data-theme="dark"] .badge-status-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

html[data-theme="dark"] .badge-incorrect,
html[data-theme="dark"] .badge-status-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

html[data-theme="dark"] .badge-status-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

html[data-theme="dark"] .badge-status-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

/* System preference dark mode support */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .badge,
  html:not([data-theme]) .badge-neutral,
  html:not([data-theme]) .badge-gray {
    background: #374151;
    color: #e5e7eb;
  }

  html:not([data-theme]) .badge-info,
  html:not([data-theme]) .badge-blue {
    background: #1e3a8a;
    color: #93c5fd;
  }

  html:not([data-theme]) .badge-success {
    background: #064e3b;
    color: #6ee7b7;
  }

  html:not([data-theme]) .badge-error,
  html:not([data-theme]) .badge-danger {
    background: #7f1d1d;
    color: #fca5a5;
  }

  html:not([data-theme]) .badge-warning {
    background: #78350f;
    color: #fcd34d;
  }

  html:not([data-theme]) .badge-outline {
    background: transparent;
    border-color: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
  }

  html:not([data-theme]) .badge-dismissible,
  html:not([data-theme]) .chip {
    background: rgba(99, 102, 241, 0.1);
    color: #a5b4fc;
  }

  html:not([data-theme]) .badge-avatar-image {
    background: var(--color-bg);
  }

  html:not([data-theme]) .badge-correct,
  html:not([data-theme]) .badge-status-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
  }

  html:not([data-theme]) .badge-incorrect,
  html:not([data-theme]) .badge-status-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
  }

  html:not([data-theme]) .badge-status-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
  }

  html:not([data-theme]) .badge-status-info {
    background: var(--color-info-bg);
    color: var(--color-info-text);
  }
}

/* ============================================================================
   SESSION STATUS BADGES
   Centralized session lifecycle badge styles.
   Use these across student, coach, and admin views for consistency.
   ============================================================================ */

.badge-session {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Session status badge variants — uses underscored names matching Django TextChoices values */
.badge-session-in_progress,
.badge-session-in-progress,
.status-session-in_progress {
  background: #dcfce7;
  color: #166534;
}

.badge-session-ready,
.status-session-ready {
  background: #fef3c7;
  color: #92400e;
}

.badge-session-scheduled,
.status-session-scheduled {
  background: #dbeafe;
  color: #1e40af;
}

.badge-session-completed,
.status-session-completed {
  background: #dcfce7;
  color: #166534;
}

.badge-session-no_show,
.badge-session-no-show,
.status-session-no_show {
  background: #fef3c7;
  color: #92400e;
}

.badge-session-late_cancel,
.badge-session-late-cancel,
.status-session-late_cancel {
  background: #fef3c7;
  color: #92400e;
}

.badge-session-empty {
  background: #f1f5f9;
  color: #475569;
}

/* Booking status badges (non-session) */
.badge-status-confirmed {
  background: #dcfce7;
  color: #166534;
}

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

.badge-status-pending {
  background: #fef3c7;
  color: #92400e;
}

/* Duration hint (for actual_duration_display) */
.booking-duration-hint {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
  margin-top: 2px;
}