/**
 * Belekaj Gamification — Frontend Styles
 *
 * Utility classes (bgam-*) used in gamification templates.
 * Tailwind utility classes from the theme handle layout.
 * This file covers only plugin-specific visual elements.
 *
 * @package Belekaj\Gamification
 */

/* ============================================================
   Level Badge — shown next to comment author names
   ============================================================ */

.bgam-level-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 4px;
}

/* Level 1 — Odkrywca */
.bgam-level-badge--1 {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* Level 2 — Turysta */
.bgam-level-badge--2 {
    background-color: #dbeafe;
    color: #1d4ed8;
}

/* Level 3 — Badacz */
.bgam-level-badge--3 {
    background-color: #d1fae5;
    color: #065f46;
}

/* Level 4 — Ekspert */
.bgam-level-badge--4 {
    background-color: #fef3c7;
    color: #92400e;
}

/* Level 5 — Ambasador */
.bgam-level-badge--5 {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: #fff;
}

/* ============================================================
   Sidebar Widget — Top-5 contributors
   ============================================================ */

.bgam-sidebar-widget {
    /* base layout handled by Tailwind utility classes in template */
}

.bgam-sidebar-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   Ranking Table — [belekaj_ranking] shortcode
   ============================================================ */

.bgam-ranking-table {
    /* base layout handled by Tailwind utility classes in template */
}

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

/* ============================================================
   Dashboard Tab — user achievements
   ============================================================ */

.bgam-dashboard-tab {
    /* base layout handled by Tailwind utility classes in template */
}

/* Progress bar animation */
.bgam-dashboard-tab .progress-fill {
    transition: width 0.5s ease-in-out;
}

/* ============================================================
   Badges grid — consistent icon size
   ============================================================ */

.bgam-badge-icon {
    font-size: 2rem;
    line-height: 1;
}