/*
 * GYM One Analytics — Theme Layer
 * ─────────────────────────────────
 * Ez a fájl adja az egész oldal vizuális stílusát.
 * Ha más témát szeretnél, csak ezt a fájlt cseréld le.
 *
 * Jelenleg elérhető témák:
 *   theme.css         → sötét, kék akcentus (default)
 *   theme-light.css   → világos, letisztult
 *   theme-purple.css  → sötét, lila akcentus
 */

/* ─── TOKEN LAYER ─── */
:root {
    /* Háttér */
    --bg:           #0d1117;
    --surface:      #161b27;
    --surface-2:    #1c2235;
    --surface-3:    #212840;

    /* Szegélyek */
    --border:       rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.14);

    /* Szöveg */
    --text:         #e6edf3;
    --text-2:       #8b949e;
    --text-3:       #424d60;

    /* Akcentus */
    --accent:       #3b82f6;
    --accent-2:     #60a5fa;
    --accent-glow:  rgba(59, 130, 246, 0.15);

    /* Státusz színek */
    --green:        #22c55e;
    --green-soft:   rgba(34, 197, 94, 0.1);
    --yellow:       #f59e0b;
    --yellow-soft:  rgba(245, 158, 11, 0.1);
    --purple:       #8b5cf6;
    --purple-soft:  rgba(139, 92, 246, 0.1);
    --red:          #ef4444;
    --red-soft:     rgba(239, 68, 68, 0.1);

    /* Sponsor tier színek */
    --tier-gold:    #f59e0b;
    --tier-silver:  #94a3b8;
    --tier-bronze:  #a16207;

    /* Layout */
    --radius:       14px;
    --radius-sm:    9px;
    --radius-xs:    6px;

    /* Betűtípusok */
    --font:         'Plus Jakarta Sans', sans-serif;
    --mono:         'Fira Code', monospace;

    /* Átmenetek */
    --transition:   0.2s ease;
}

/* ─── HÁTTÉR EFFEKT ─── */
.bg-glow {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 35% at 15% 0%, rgba(59, 130, 246, 0.07), transparent),
        radial-gradient(ellipse 40% 25% at 85% 0%, rgba(139, 92, 246, 0.05), transparent);
    pointer-events: none;
    z-index: 0;
}

/* ─── ALAP ─── */
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

/* ─── CARD ─── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

/* ─── CHIP / BADGE ─── */
.chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.chip-green  { background: var(--green-soft);  color: var(--green);  border: 1px solid rgba(34,197,94,.2); }
.chip-blue   { background: var(--accent-glow); color: var(--accent-2); border: 1px solid rgba(59,130,246,.2); }
.chip-gray   { background: rgba(139,148,158,.08); color: var(--text-2); border: 1px solid rgba(139,148,158,.12); }
.chip-yellow { background: var(--yellow-soft); color: var(--yellow); border: 1px solid rgba(245,158,11,.2); }
.chip-purple { background: var(--purple-soft); color: var(--purple); border: 1px solid rgba(139,92,246,.2); }

/* ─── HEADER ─── */
.brand-icon {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}
.live-badge {
    color: var(--green);
    background: var(--green-soft);
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.live-dot {
    background: var(--green);
    animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
    0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(34,197,94,.4); }
    50%      { opacity:.6; box-shadow:0 0 0 4px rgba(34,197,94,0); }
}
.hclock {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
}

/* ─── STAT ÉRTÉKEK ─── */
.stat-val { color: var(--text); }
.stat-label { color: var(--text-2); }

/* ─── SPARKLINE ─── */
.spark-color-start { stop-color: #1d4ed8; }
.spark-color-end   { stop-color: #60a5fa; }
.spark-fill-start  { stop-color: rgba(59,130,246,0.18); }
.spark-fill-end    { stop-color: rgba(59,130,246,0); }

/* ─── BARS (trend chart) ─── */
.bar {
    background: var(--surface-2);
    transition: background var(--transition);
}
.bar:hover { background: rgba(59, 130, 246, 0.45); }
.bar::after {
    color: var(--accent-2);
    background: var(--surface);
    border: 1px solid var(--border);
}

/* ─── COMMIT SHA ─── */
.c-sha {
    color: var(--purple);
    background: var(--purple-soft);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* ─── TRANSLATION BARS ─── */
.prog-bg   { background: var(--surface-2); }
.prog-fill.g { background: linear-gradient(90deg, #15803d, #22c55e); }
.prog-fill.o { background: linear-gradient(90deg, #b45309, #f59e0b); }
.prog-fill.r { background: linear-gradient(90deg, #b91c1c, #ef4444); }

/* ─── PAGE TITLE GRADIENT ─── */
.title-gradient {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ─── SECTION CARD HEADER ─── */
.card-hd { border-bottom: 1px solid var(--border); }
.card-tag {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
}

/* ─── SPONSOR TIERS ─── */
.tier-gold   { color: var(--tier-gold);   background: rgba(245,158,11,.08);  border-color: rgba(245,158,11,.2); }
.tier-silver { color: var(--tier-silver); background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.2); }
.tier-bronze { color: var(--tier-bronze); background: rgba(161,98,7,.08);    border-color: rgba(161,98,7,.2); }

.sponsor-avatar {
    border: 2px solid var(--border);
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.sponsor-avatar:hover {
    border-color: var(--accent);
    transform: scale(1.08);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.sponsor-avatar.gold:hover   { border-color: var(--tier-gold);   box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.sponsor-avatar.silver:hover { border-color: var(--tier-silver); box-shadow: 0 0 0 3px rgba(148,163,184,.2); }

/* ─── EMPTY STATE ─── */
.empty-state {
    color: var(--text-3);
    text-align: center;
    padding: 32px 0;
}
.empty-state i { font-size: 28px; margin-bottom: 10px; opacity: .4; display: block; }

/* ─── FOOTER ─── */
footer { border-top: 1px solid var(--border); color: var(--text-3); }