/*
 * QuickMonster Badge & Tag Components
 */

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

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--qm-space-xs);
  padding: var(--qm-space-xs) var(--qm-space-sm);
  font-family: var(--qm-font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--qm-radius-sm);
  white-space: nowrap;
}

/* ========================================
   BADGE VARIANTS
   ======================================== */

.badge-primary {
  background: var(--qm-crimson);
  color: var(--qm-text-light);
}

.badge-secondary {
  background: var(--qm-gold);
  color: var(--qm-obsidian);
}

.badge-success {
  background: var(--qm-success);
  color: var(--qm-text-light);
}

.badge-danger {
  background: var(--qm-danger);
  color: var(--qm-text-light);
}

.badge-warning {
  background: var(--qm-warning);
  color: var(--qm-obsidian);
}

.badge-info {
  background: var(--qm-info);
  color: var(--qm-text-light);
}

.badge-dark {
  background: var(--qm-charcoal);
  color: var(--qm-text-light);
  border: 1px solid var(--qm-granite);
}

.badge-light {
  background: var(--qm-parchment);
  color: var(--qm-text-parchment);
}

/* ========================================
   OUTLINE BADGES
   ======================================== */

.badge-outline {
  background: transparent;
  border: 1px solid var(--qm-granite);
  color: var(--qm-text-muted);
}

.badge-outline-primary {
  border-color: var(--qm-crimson);
  color: var(--qm-crimson);
}

.badge-outline-gold {
  border-color: var(--qm-gold);
  color: var(--qm-gold);
}

.badge-outline-success {
  border-color: var(--qm-success);
  color: var(--qm-success-light);
}

.badge-outline-danger {
  border-color: var(--qm-danger);
  color: var(--qm-coral);
}

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

.badge-sm {
  padding: 2px var(--qm-space-xs);
  font-size: 0.65rem;
}

.badge-lg {
  padding: var(--qm-space-sm) var(--qm-space-md);
  font-size: 0.85rem;
}

/* ========================================
   PILL BADGE
   ======================================== */

.badge-pill {
  border-radius: var(--qm-radius-full);
  padding-left: var(--qm-space-sm);
  padding-right: var(--qm-space-sm);
}

/* ========================================
   DOT BADGE (Indicator)
   ======================================== */

.badge-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
}

.badge-dot-lg {
  width: 14px;
  height: 14px;
}

.badge-dot-pulse {
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* ========================================
   BADGE WITH COUNT
   ======================================== */

.badge-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--qm-radius-full);
  font-size: 0.7rem;
}

/* ========================================
   TAG (Removable badge)
   ======================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--qm-space-xs);
  padding: var(--qm-space-xs) var(--qm-space-sm);
  background: var(--qm-stone);
  border: 1px solid var(--qm-granite);
  border-radius: var(--qm-radius-sm);
  font-family: var(--qm-font-ui);
  font-size: var(--qm-text-sm);
  color: var(--qm-text-light);
}

.tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--qm-granite);
  border: none;
  border-radius: 50%;
  color: var(--qm-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--qm-transition-fast);
}

.tag-remove:hover {
  background: var(--qm-crimson);
  color: white;
}

/* Tag colors */
.tag-crimson {
  background: rgba(196, 30, 58, 0.2);
  border-color: var(--qm-crimson);
  color: var(--qm-coral-light);
}

.tag-gold {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--qm-gold);
  color: var(--qm-gold);
}

/* ========================================
   CREATURE TYPE BADGES (D&D)
   ======================================== */

.badge-creature {
  background: linear-gradient(135deg, var(--qm-stone) 0%, var(--qm-slate) 100%);
  border: 1px solid var(--qm-granite);
  padding: var(--qm-space-xs) var(--qm-space-md);
}

.badge-aberration { border-color: #9C27B0; color: #CE93D8; }
.badge-beast { border-color: #795548; color: #BCAAA4; }
.badge-celestial { border-color: #FFC107; color: #FFE082; }
.badge-construct { border-color: #607D8B; color: #B0BEC5; }
.badge-dragon { border-color: #F44336; color: #EF9A9A; }
.badge-elemental { border-color: #00BCD4; color: #80DEEA; }
.badge-fey { border-color: #E91E63; color: #F48FB1; }
.badge-fiend { border-color: #B71C1C; color: #EF5350; }
.badge-giant { border-color: #8D6E63; color: #D7CCC8; }
.badge-humanoid { border-color: #4CAF50; color: #A5D6A7; }
.badge-monstrosity { border-color: #FF5722; color: #FFAB91; }
.badge-ooze { border-color: #8BC34A; color: #C5E1A5; }
.badge-plant { border-color: #4CAF50; color: #81C784; }
.badge-undead { border-color: #37474F; color: #90A4AE; }

/* ========================================
   RARITY BADGES
   ======================================== */

.badge-common {
  background: linear-gradient(135deg, #607D8B 0%, #455A64 100%);
  color: white;
}

.badge-uncommon {
  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  color: white;
}

.badge-rare {
  background: linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
  color: white;
}

.badge-very-rare {
  background: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%);
  color: white;
}

.badge-legendary {
  background: linear-gradient(135deg, var(--qm-gold-light) 0%, var(--qm-gold) 50%, var(--qm-bronze) 100%);
  color: var(--qm-obsidian);
  box-shadow: var(--qm-shadow-glow-gold);
}

.badge-artifact {
  background: linear-gradient(135deg, #FFD700 0%, #FF8C00 50%, #FF4500 100%);
  color: var(--qm-obsidian);
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
}

/* ========================================
   STATUS BADGES
   ======================================== */

.badge-online {
  background: var(--qm-success);
}

.badge-offline {
  background: var(--qm-granite);
}

.badge-busy {
  background: var(--qm-danger);
}

.badge-away {
  background: var(--qm-warning);
}

/* ========================================
   MONSTER TYPE BADGE (with icon)
   ======================================== */

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--qm-space-xs);
  padding: 0.35em 0.7em;
  background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
  border: 1px solid var(--type-color, var(--qm-granite));
  border-radius: var(--qm-radius-full);
  font-size: var(--qm-text-sm);
  box-shadow: 0 0 8px color-mix(in srgb, var(--type-color, var(--qm-granite)) 30%, transparent);
}

.type-badge .type-icon {
  font-size: 1rem;
}

.type-badge .type-name {
  color: var(--type-color, var(--qm-text-light));
  font-weight: 500;
  text-transform: capitalize;
}

/* ========================================
   CHALLENGE RATING BADGE
   ======================================== */

.cr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3em 0.6em;
  font-family: var(--qm-font-heading);
  font-weight: 700;
  font-size: var(--qm-text-sm);
  border-radius: var(--qm-radius-sm);
  border: 1px solid;
  white-space: nowrap;
}

.cr-badge.cr-low {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.25) 0%, rgba(39, 174, 96, 0.15) 100%);
  border-color: #27ae60;
  color: #2ecc71;
}

.cr-badge.cr-mid {
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.25) 0%, rgba(241, 196, 15, 0.15) 100%);
  border-color: #f1c40f;
  color: #f1c40f;
}

.cr-badge.cr-high {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.25) 0%, rgba(231, 76, 60, 0.15) 100%);
  border-color: #e74c3c;
  color: #e74c3c;
}

.cr-badge.cr-epic {
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.3) 0%, rgba(196, 30, 58, 0.2) 100%);
  border-color: var(--qm-gold);
  color: var(--qm-gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

/* ========================================
   SIZE BADGE
   ======================================== */

.size-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--qm-font-heading);
  font-weight: 700;
  font-size: var(--qm-text-sm);
  color: var(--size-color, var(--qm-text-light));
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--size-color, var(--qm-granite));
  border-radius: 50%;
}

/* ========================================
   STAT PILL
   ======================================== */

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.5em;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--qm-radius-sm);
  font-size: var(--qm-text-sm);
}

.stat-pill .stat-icon {
  font-size: 0.9em;
}

.stat-pill .stat-val {
  font-family: var(--qm-font-heading);
  font-weight: 600;
  color: var(--qm-text-light);
}

.stat-pill.ac {
  border: 1px solid rgba(52, 152, 219, 0.4);
}

.stat-pill.hp {
  border: 1px solid rgba(231, 76, 60, 0.4);
}

/* ========================================
   DIFFICULTY BADGE
   ======================================== */

.difficulty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3em 0.6em;
  font-family: var(--qm-font-heading);
  font-weight: 700;
  font-size: var(--qm-text-sm);
  border-radius: var(--qm-radius-sm);
  border: 1px solid;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.difficulty-badge.difficulty-trivial {
  background: linear-gradient(135deg, rgba(100, 100, 100, 0.3) 0%, rgba(80, 80, 80, 0.2) 100%);
  border-color: #6b6b6b;
  color: #b0b0b0;
}

.difficulty-badge.difficulty-easy {
  background: linear-gradient(135deg, rgba(39, 174, 96, 0.3) 0%, rgba(39, 174, 96, 0.15) 100%);
  border-color: #27ae60;
  color: #2ecc71;
}

.difficulty-badge.difficulty-medium {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.3) 0%, rgba(243, 156, 18, 0.15) 100%);
  border-color: #f39c12;
  color: #f1c40f;
}

.difficulty-badge.difficulty-hard {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.3) 0%, rgba(231, 76, 60, 0.15) 100%);
  border-color: #e74c3c;
  color: #e74c3c;
}

.difficulty-badge.difficulty-deadly {
  background: linear-gradient(135deg, rgba(139, 0, 0, 0.4) 0%, rgba(196, 30, 58, 0.3) 100%);
  border-color: #ff0000;
  color: #ff4444;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.4);
}