/**
 * File: C:\xampp\htdocs\charapp\assets\css\app-components.css
 * 
 * Purpose:
 * - KPI Boxes (reusable stat displays with magical effects)
 * - Small Avatars (member avatars with glow)
 * - Pills (EXP, Level badges with shimmer)
 * - Tab Animations (smooth transitions with fade)
 * - Class Badges (reusable with gradient effects)
 * 
 * Dependencies:
 * - app.css (CSS variables)
 * 
 * Load Order: 2
 * 
 * OPTIMIZATIONS:
 * - Enhanced hover states with glow effects
 * - Shimmer animations for pills
 * - Depth through layered shadows
 * - Smooth micro-interactions
 * - Magical particle effects (CSS-based)
 */

/* =========================
   KPI Boxes (ENHANCED)
   ========================= */
.kpi {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.kpi .box {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1rem;
  padding: .875rem;
  background: 
    linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    radial-gradient(circle at top left, rgba(93,214,201,0.05), transparent 70%);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 2px 6px rgba(0,0,0,0.1),
    inset 0 1px 1px rgba(255,255,255,0.03);
}

.kpi .box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(93,214,201,0.08),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kpi .box:hover {
  background: 
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(circle at top left, rgba(93,214,201,0.08), transparent 70%);
  border-color: rgba(93,214,201,0.3);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.15),
    0 0 20px rgba(93,214,201,0.1);
}

.kpi .box:hover::before {
  opacity: 1;
}

.kpi .box .v {
  font-size: 1.25rem;
  font-weight: 900;
  background: linear-gradient(135deg, #5dd6c9, #4da3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =========================
   KPI Box (Alternative Style) (ENHANCED)
   ========================= */
.kpi-box {
  background: 
    linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    radial-gradient(circle at top left, rgba(93,214,201,0.05), transparent 70%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.875rem;
  padding: 0.875rem;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 2px 6px rgba(0,0,0,0.1),
    inset 0 1px 1px rgba(255,255,255,0.03);
}

.kpi-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(93,214,201,0.05) 0%,
    transparent 50%,
    rgba(77,163,255,0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kpi-box:hover {
  background: 
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    radial-gradient(circle at top left, rgba(93,214,201,0.08), transparent 70%);
  border-color: rgba(93,214,201,0.3);
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.15),
    0 0 20px rgba(93,214,201,0.1);
}

.kpi-box:hover::before {
  opacity: 1;
}

.kpi-box .k {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.7;
  letter-spacing: 0.5px;
  margin-bottom: 0.35rem;
}

.kpi-box .v {
  font-size: 1.1rem;
  font-weight: 800;
  background: linear-gradient(135deg, #5dd6c9, #4da3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =========================
   Small Avatars (Members) (ENHANCED)
   ========================= */
.avatar-sm {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(93,214,201,0.3);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 2px 6px rgba(0,0,0,0.2),
    0 0 12px rgba(93,214,201,0.15);
  position: relative;
}

.avatar-sm:hover {
  border-color: rgba(93,214,201,0.6);
  transform: scale(1.1) translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(0,0,0,0.3),
    0 0 20px rgba(93,214,201,0.3);
}

/* =========================
   Pills (EXP, Level) (ENHANCED with Shimmer)
   ========================= */
.exp-pill,
.lvl-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  font-weight: 900;
  line-height: 1.3;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 2px 6px rgba(0,0,0,0.15),
    inset 0 1px 1px rgba(255,255,255,0.15);
}

.exp-pill::before,
.lvl-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.3) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.exp-pill:hover::before,
.lvl-pill:hover::before {
  transform: translateX(100%);
}

.exp-pill {
  color: #fff;
  border-color: rgba(77,163,255,.4);
  background: linear-gradient(135deg, rgba(77,163,255,.2), rgba(77,163,255,.15));
  box-shadow: 
    0 2px 8px rgba(77,163,255,0.3),
    0 0 15px rgba(77,163,255,0.15),
    inset 0 1px 1px rgba(255,255,255,0.2);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.exp-pill:hover {
  background: linear-gradient(135deg, rgba(77,163,255,.25), rgba(77,163,255,.18));
  border-color: rgba(77,163,255,.5);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 4px 12px rgba(77,163,255,0.4),
    0 0 25px rgba(77,163,255,0.25),
    inset 0 1px 1px rgba(255,255,255,0.25);
}

.lvl-pill {
  color: #000;
  border-color: rgba(255,211,107,.35);
  background: linear-gradient(135deg, rgba(255,211,107,.3), rgba(255,211,107,.2));
  box-shadow: 
    0 2px 8px rgba(255,211,107,0.3),
    0 0 15px rgba(255,211,107,0.15),
    inset 0 1px 1px rgba(255,255,255,0.3);
  text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

.lvl-pill:hover {
  background: linear-gradient(135deg, rgba(255,211,107,.35), rgba(255,211,107,.25));
  border-color: rgba(255,211,107,.45);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 4px 12px rgba(255,211,107,0.4),
    0 0 25px rgba(255,211,107,0.25),
    inset 0 1px 1px rgba(255,255,255,0.35);
}

/* =========================
   Tab Animations (Smooth Transitions) (ENHANCED)
   ========================= */
.tab-pane {
  will-change: opacity, transform;
}

.tab-pane-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
  animation: fadeSlideIn .3s ease-out;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-pane-hide {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

/* =========================
   Class Badges (Reusable) (ENHANCED)
   ========================= */
.class-badge {
  --class-color: #6c757d;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .875rem;
  color: #fff;
  line-height: 1.2;
  background: linear-gradient(
    135deg,
    var(--class-color),
    color-mix(in srgb, var(--class-color) 80%, black)
  );
  border: 1px solid color-mix(in srgb, var(--class-color) 60%, white);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  box-shadow: 
    0 2px 8px color-mix(in srgb, var(--class-color) 40%, transparent),
    0 0 20px color-mix(in srgb, var(--class-color) 20%, transparent),
    inset 0 1px 1px rgba(255,255,255,0.15);
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.class-badge::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,0.15) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.class-badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 4px 16px color-mix(in srgb, var(--class-color) 60%, transparent),
    0 0 30px color-mix(in srgb, var(--class-color) 35%, transparent),
    inset 0 1px 1px rgba(255,255,255,0.2);
}

.class-badge:hover::before {
  transform: translateX(100%);
}

.class-badge i {
  font-size: 1rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}

.class-badge-img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  border: 1px solid rgba(255,255,255,0.2);
}