/* ================================================================
   LifeStyleMod – Stats Page (v5.9)
   ----------------------------------------------------------------
   شامل:
   ▸ Weekly Stats – stats.php

   ⚠️ این فایل فقط با $extraCss = ['pages-stats'] لود می‌شه
   ⚠️ بدون backdrop-filter — بدون رنگ hardcode
   ⚠️ همه‌ی کلاس‌ها با پیشوند stats- (بدون تداخل)
   ================================================================ */

/* ═══════════════════════════════════════════════════════════
   1. CONTAINER
   ═══════════════════════════════════════════════════════════ */
.stats-page-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--s-5) var(--s-4) var(--s-8);
    position: relative;
    z-index: var(--z-base);
}

/* ═══════════════════════════════════════════════════════════
   2. HERO
   ═══════════════════════════════════════════════════════════ */
.stats-hero {
    text-align: center;
    margin-bottom: var(--s-7);
    padding: var(--s-6) var(--s-3);
}

.stats-hero-icon {
    font-size: 56px;
    line-height: 1;
    display: inline-block;
    margin-bottom: var(--s-3);
}

.stats-hero h1 {
    font-size: clamp(26px, 5vw, 38px);
    font-weight: var(--fw-black);
    color: var(--c-text);
    margin-bottom: var(--s-3);
    letter-spacing: var(--ls-tight);
    line-height: 1.25;
}

.stats-hero p {
    color: var(--c-text-muted);
    font-size: var(--fs-base);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════
   3. STAT CARDS GRID (اعداد خلاصه)
   ═══════════════════════════════════════════════════════════ */
.stats-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--s-7);
}

.stats-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--s-5) var(--s-4);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-primary);
    opacity: 0.4;
    pointer-events: none;
}

.stats-card:hover {
    border-color: var(--c-border-hover);
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--shadow-md);
}

/* ─── رنگ accent برای هر کارت ─── */
.stats-card.is-users::before   { background: var(--c-primary); }
.stats-card.is-growth::before  { background: var(--c-success); }
.stats-card.is-packs::before   { background: var(--c-info); }
.stats-card.is-mods::before    { background: var(--c-warning); }

/* ═══════════════════════════════════════════════════════════
   4. STAT CARD – NUMBER & LABEL
   ═══════════════════════════════════════════════════════════ */
.stats-card-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(26px, 3.5vw, 34px);
    font-weight: var(--fw-black);
    line-height: 1.1;
    color: var(--c-primary-light);
    margin-bottom: var(--s-2);
    letter-spacing: -0.02em;
}

/* ─── رنگ رشد ─── */
.stats-card-num.is-positive { color: var(--c-success); }
.stats-card-num.is-negative { color: var(--c-danger); }

.stats-card-label {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   5. SECTION TITLE
   ═══════════════════════════════════════════════════════════ */
.stats-section-title {
    font-size: clamp(18px, 3vw, 22px);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin: var(--s-6) 0 var(--s-3);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    line-height: 1.3;
    letter-spacing: var(--ls-tight);
}

/* ═══════════════════════════════════════════════════════════
   6. ITEM CARD (سازنده / پک / ماد برتر)
   ═══════════════════════════════════════════════════════════ */
.stats-item-card {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast),
                border-color var(--t-fast),
                transform var(--t-fast),
                box-shadow var(--t-fast);
    margin-bottom: var(--s-3);
}

.stats-item-card:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-hover);
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--shadow-sm);
    color: inherit;
}

/* ─── Avatar / Emoji ─── */
.stats-item-avatar,
.stats-item-emoji {
    width: 56px;
    height: 56px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    overflow: hidden;
    flex-shrink: 0;
}

.stats-item-avatar { border-radius: var(--r-full); }
.stats-item-emoji  { border-radius: var(--r-md); }

.stats-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Body ─── */
.stats-item-body {
    flex: 1;
    min-width: 0;
}

.stats-item-title {
    font-weight: var(--fw-semi);
    font-size: var(--fs-base);
    color: var(--c-text);
    margin-bottom: 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-item-meta {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

/* ─── Badge (برترین) ─── */
.stats-item-badge {
    margin-inline-start: auto;
    padding: 4px 12px;
    background: var(--c-warning-bg);
    border: 1px solid var(--c-warning-border);
    border-radius: var(--r-full);
    color: var(--c-warning);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   7. EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
.stats-empty {
    text-align: center;
    padding: var(--s-7) var(--s-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════
   8. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ─── تبلت ─── */
@media (max-width: 768px) {
    .stats-page-container {
        padding: var(--s-3) var(--s-3) var(--s-6);
    }

    .stats-hero {
        padding: var(--s-5) var(--s-3);
        margin-bottom: var(--s-5);
    }
    .stats-hero-icon { font-size: 48px; }
    .stats-hero h1   { font-size: var(--fs-xl); }

    .stats-grid-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-3);
    }

    .stats-card {
        padding: var(--s-4) var(--s-3);
    }
    .stats-card-num { font-size: 26px; }
    .stats-card-label { font-size: var(--fs-xs); }

    .stats-section-title {
        margin-top: var(--s-5);
        font-size: var(--fs-base);
    }

    .stats-item-card {
        padding: var(--s-3);
        gap: var(--s-3);
    }
    .stats-item-avatar,
    .stats-item-emoji {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }
    .stats-item-title { font-size: var(--fs-sm); }
}

/* ─── موبایل کوچک ─── */
@media (max-width: 480px) {
    .stats-grid-cards {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-2);
    }

    .stats-card {
        padding: var(--s-3) var(--s-2);
    }
    .stats-card-num { font-size: 22px; }
    .stats-card-label { font-size: 11px; }

    .stats-item-badge {
        padding: 3px 9px;
        font-size: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
   9. REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .stats-card:hover,
    .stats-item-card:hover {
        transform: none;
    }
}