/* ============================================
   IT Admin Badges — .badges-* namespace
   Accent: Soft Gold #FFD54F
   ============================================ */

:root {
  --badges-accent: #FFD54F;
}

/* Layout */
.badges-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

/* Glass Pill Tabs */
.badges-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.35rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.badges-tabs::-webkit-scrollbar { display: none; }

.badges-tab {
  background: none;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
  white-space: nowrap;
}
.badges-tab:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.badges-tab.active {
  color: #000;
  background: var(--badges-accent);
  border-color: var(--badges-accent);
  box-shadow: 0 2px 8px rgba(255,213,79,0.3);
}

.badges-panel { display: none; }
.badges-panel.active { display: block; }

/* Glass Card */
.badges-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.badges-card:hover {
  transform: scale(1.02);
}
.badges-card .badges-emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}
.badges-card .badges-name {
  font-weight: 700;
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}
.badges-card .badges-desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

/* States */
.badges-card.earned {
  border-color: var(--badges-accent);
  box-shadow: 0 0 12px rgba(255,213,79,0.15);
}
.badges-card.locked {
  opacity: 0.5;
  filter: grayscale(0.5);
}
.badges-card.locked:hover {
  opacity: 0.7;
  filter: grayscale(0.2);
}

/* Grid */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem;
}

/* Wall (compact) */
.badges-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.8rem;
}

/* Counter */
.badges-counter {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.badges-counter .badges-big-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--badges-accent);
  line-height: 1.1;
}
.badges-counter .badges-counter-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.3rem;
}

/* Filter Bar */
.badges-filter-bar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.badges-filter {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.badges-filter:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.badges-filter.active {
  background: var(--badges-accent);
  color: #000;
  border-color: var(--badges-accent);
}

/* Rarity Badge */
.badges-rarity-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badges-rarity-badge.common { background: rgba(160,160,160,0.15); color: #a0a0a0; }
.badges-rarity-badge.uncommon { background: rgba(76,175,80,0.15); color: #4CAF50; }
.badges-rarity-badge.rare { background: rgba(33,150,243,0.15); color: #2196F3; }
.badges-rarity-badge.epic { background: rgba(156,39,176,0.15); color: #9C27B0; }
.badges-rarity-badge.legendary { background: rgba(255,213,79,0.15); color: var(--badges-accent); }

/* Download Button */
.badges-download-btn {
  background: var(--badges-accent);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.badges-download-btn:hover { opacity: 0.85; }

/* Secondary Button */
.badges-btn-secondary {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.badges-btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* FAQ */
.badges-panel details {
  margin-bottom: 1rem; padding: 1rem; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
}
.badges-panel details summary { cursor: pointer; color: rgba(255,255,255,0.9); }
.badges-panel details div { color: rgba(255,255,255,0.7); margin-top: 0.5rem; }

/* Mobile */
@media (max-width: 640px) {
  .badges-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .badges-wall {
    grid-template-columns: repeat(2, 1fr);
  }
  .badges-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .badges-filter-bar::-webkit-scrollbar { display: none; }
  .badges-counter .badges-big-number {
    font-size: 2rem;
  }
  .badges-total-progress { flex-wrap: wrap; }
  .badges-total-bar { min-width: 100%; }
}

/* Daily Challenge */
.badges-daily { margin-bottom: 1.5rem; }
.badges-daily-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4); margin-bottom: 0.5rem;
}
.badges-daily-card {
  background: rgba(255,213,79,0.06); border: 1px solid rgba(255,213,79,0.2);
  border-radius: 12px; padding: 1rem; display: flex; align-items: center; gap: 1rem;
}
.badges-daily-card.badges-daily--done { opacity: 0.5; }
.badges-daily-emoji { font-size: 2rem; }
.badges-daily-info { flex: 1; }
.badges-daily-info strong { display: block; color: #fff; }
.badges-daily-info p { color: rgba(255,255,255,0.5); font-size: 0.85rem; margin: 0.2rem 0 0; }

/* Badge Wall Items */
.badges-wall-item { text-align: center; }
.badges-wall-emoji { font-size: 1.6rem; }
.badges-wall-name { font-size: 0.72rem; color: rgba(255,255,255,0.6); margin-top: 0.2rem; }
.badges-empty, .badges-empty-wall {
  text-align: center; padding: 2rem; color: rgba(255,255,255,0.4);
}

/* Share button */
.badges-share-btn {
  position: absolute; top: 0.4rem; right: 0.4rem; background: none;
  border: none; cursor: pointer; font-size: 0.8rem; opacity: 0.4;
  transition: opacity 0.2s; padding: 0.2rem;
}
.badges-share-btn:hover { opacity: 1; }

/* Stories */
.badges-story {
  font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-top: 0.3rem;
  min-height: 1em; outline: none; border-bottom: 1px dashed transparent;
  transition: border-color 0.2s;
}
.badges-story:focus {
  color: rgba(255,255,255,0.7); border-bottom-color: var(--badges-accent);
}
.badges-story[placeholder]:empty:before {
  content: attr(placeholder); color: rgba(255,255,255,0.2); font-style: italic;
}

/* Suggested next */
.badges-suggested {
  margin-bottom: 1rem; padding: 0.8rem 1rem;
  background: rgba(255,213,79,0.06); border: 1px solid rgba(255,213,79,0.15);
  border-radius: 10px; font-size: 0.88rem;
}
.badges-suggested strong { color: var(--badges-accent); }

/* Category group headers */
.badges-category-group { margin-bottom: 1.5rem; }
.badges-cat-header {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem;
  padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.badges-cat-header-name {
  font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.85);
}
.badges-cat-header-count {
  font-size: 0.75rem; color: var(--badges-accent); font-weight: 600;
}
.badges-cat-progress {
  flex: 1; height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden; max-width: 120px;
}
.badges-cat-progress-fill {
  height: 100%; background: var(--badges-accent); border-radius: 2px;
  transition: width 0.4s ease;
}

/* Total progress bar */
.badges-total-progress {
  display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem;
  padding: 0.7rem 1rem; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
}
.badges-total-count {
  font-size: 0.85rem; font-weight: 700; color: var(--badges-accent); white-space: nowrap;
}
.badges-total-bar {
  flex: 1; height: 6px; background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden;
}
.badges-total-bar-fill {
  height: 100%; background: var(--badges-accent); border-radius: 3px;
  transition: width 0.4s ease;
}
.badges-total-label {
  font-size: 0.72rem; color: rgba(255,255,255,0.4); white-space: nowrap;
}

/* Card extras */
.badges-card { position: relative; }
.badges-card-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.badges-cat-label, .badges-cat-pill {
  font-size: 0.7rem; color: rgba(255,255,255,0.4);
}
.badges-earn-btn {
  display: inline-block; margin-top: 0.6rem; padding: 0.3rem 0.8rem;
  background: var(--badges-accent); color: #000; border: none; border-radius: 6px;
  font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.badges-earn-btn:hover { opacity: 0.85; }

/* Career Level Bar */
.badges-career-bar {
  display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem;
  padding: 0.6rem 1rem; background: rgba(255,213,79,0.06);
  border: 1px solid rgba(255,213,79,0.15); border-radius: 10px;
}
.badges-career-level { font-size: 0.95rem; font-weight: 700; color: var(--badges-accent); white-space: nowrap; }
.badges-career-pts { font-size: 0.78rem; color: rgba(255,255,255,0.5); white-space: nowrap; }
.badges-career-next { font-size: 0.72rem; color: rgba(255,255,255,0.35); margin-left: auto; white-space: nowrap; }
.badges-career-display { text-align: center; }

/* Earn Modal */
.badges-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.badges-modal {
  background: #0a0a14; border: 1px solid rgba(255,213,79,0.2);
  border-radius: 16px; max-width: 480px; width: 100%; padding: 2rem;
  text-align: center; position: relative;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  animation: badges-modal-in 0.3s ease;
}
@keyframes badges-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: none; }
}
.badges-modal-close {
  position: absolute; top: 0.8rem; right: 0.8rem; background: none;
  border: none; color: rgba(255,255,255,0.4); font-size: 1.5rem;
  cursor: pointer; line-height: 1; padding: 0.2rem;
}
.badges-modal-close:hover { color: #fff; }
.badges-modal-emoji { font-size: 3.5rem; margin-bottom: 0.5rem; }
.badges-modal-name { font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: 0.2rem; }
.badges-modal-rarity { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.badges-modal-story {
  color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.65;
  margin: 1.2rem 0; text-align: left; font-style: italic;
  padding: 0 0.5rem;
}
.badges-modal-confirm {
  background: rgba(255,213,79,0.08); border: 1px solid rgba(255,213,79,0.2);
  border-radius: 10px; padding: 0.8rem 1rem; font-size: 0.85rem;
  color: rgba(255,255,255,0.85); margin: 1rem 0; font-weight: 500;
}
.badges-modal-actions { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1rem; }
.badges-modal-earn {
  background: var(--badges-accent); color: #000; border: none; border-radius: 10px;
  padding: 0.7rem 1.5rem; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  transition: all 0.2s;
}
.badges-modal-earn:hover { box-shadow: 0 4px 16px rgba(255,213,79,0.3); }
.badges-modal-skip {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7); border-radius: 10px; padding: 0.7rem 1.5rem;
  font-size: 0.9rem; cursor: pointer; transition: all 0.2s;
}
.badges-modal-skip:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Daily challenge preview */
.badges-daily-preview {
  color: rgba(255,255,255,0.5); font-size: 0.8rem; font-style: italic;
  margin: 0.3rem 0 0.5rem; line-height: 1.4;
}

/* Legendary glow */
.badges-card.earned[data-rarity="legendary"] {
  animation: badges-legendary-glow 3s ease-in-out infinite;
}
@keyframes badges-legendary-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(255,213,79,0.15); }
  50% { box-shadow: 0 0 20px rgba(255,213,79,0.3), 0 0 40px rgba(255,213,79,0.1); }
}

/* Master badge cards */
.badges-master-card {
  background: rgba(255,213,79,0.06) !important;
  border-color: var(--badges-accent) !important;
  animation: badges-legendary-glow 3s ease-in-out infinite;
}

/* Skills radar */
.badges-radar-svg { max-width: 260px; margin: 1rem auto; display: block; }

/* Share section */
.badges-share-section { text-align: center; margin-top: 1.5rem; }
.badges-share-profile-btn {
  background: var(--badges-accent); color: #000; border: none; border-radius: 8px;
  padding: 0.6rem 1.5rem; font-weight: 600; font-size: 0.85rem; cursor: pointer;
  transition: all 0.2s;
}
.badges-share-profile-btn:hover { box-shadow: 0 4px 16px rgba(255,213,79,0.3); }

/* Shared profile banner */
.badges-shared-banner {
  margin-top: 0.8rem; padding: 0.5rem 1rem; border-radius: 8px;
  background: rgba(255,213,79,0.08); border: 1px solid rgba(255,213,79,0.15);
  font-size: 0.8rem; color: rgba(255,255,255,0.6);
}

/* Tool link in modal */
.badges-modal-tool {
  display: inline-block; margin: 0.5rem 0; padding: 0.4rem 0.8rem;
  font-size: 0.78rem; color: var(--badges-accent); text-decoration: none;
  border: 1px solid rgba(255,213,79,0.2); border-radius: 8px;
  transition: all 0.2s;
}
.badges-modal-tool:hover {
  background: rgba(255,213,79,0.08); border-color: rgba(255,213,79,0.4);
}