/* ═══════════════════════════════════════════════════════════
   TFT Tracker – Stylesheet (v2 – anti-theme override)
   Tous les sélecteurs sont préfixés .tft- pour éviter les
   conflits avec les thèmes WordPress.
════════════════════════════════════════════════════════════ */

/* ── Variables ── */
.tft-wrap, .tft-podium-wrap, .tft-classement-wrap,
.tft-historique-wrap, .tft-param-wrap {
    --tft-bg:       #0d1117;
    --tft-card:     #161b22;
    --tft-border:   #30363d;
    --tft-accent:   #a78bfa;
    --tft-gold:     #fbbf24;
    --tft-green:    #34d399;
    --tft-red:      #f87171;
    --tft-text:     #e6edf3;
    --tft-muted:    #8b949e;
    --tft-radius:   12px;
    color: var(--tft-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
}

/* ── Reset boîtes ── */
.tft-classement-wrap *, .tft-historique-wrap *,
.tft-param-wrap *, .tft-podium-wrap * {
    box-sizing: border-box;
}

/* ── Helpers ── */
.tft-tag        { color: var(--tft-muted) !important; font-size: .82em !important; margin-left: 2px; }
.tft-wins       { color: var(--tft-green) !important; font-weight: 700 !important; }
.tft-losses     { color: var(--tft-red)   !important; font-weight: 700 !important; }
.tft-lp-pos     { color: var(--tft-green) !important; font-weight: 700 !important; }
.tft-lp-neg     { color: var(--tft-red)   !important; font-weight: 700 !important; }
.tft-lp-cell    { font-weight: 700 !important; color: var(--tft-text) !important; }
.tft-lp-unit    { color: var(--tft-muted) !important; font-size: .8em; font-weight: 400 !important; }
.tft-msg        { margin-top: .5rem; font-size: .9rem; min-height: 1.2em; display: block; }
.tft-msg.ok     { color: var(--tft-green); }
.tft-msg.err    { color: var(--tft-red); }
.tft-player     { font-weight: 700 !important; color: var(--tft-text) !important; }

/* ── Boutons ── */
.tft-btn {
    display: inline-flex !important; align-items: center; gap: .4rem;
    padding: .5rem 1.1rem !important; border-radius: 8px !important;
    border: none !important; cursor: pointer !important;
    font-weight: 600 !important; font-size: .9rem !important;
    transition: opacity .2s; text-decoration: none !important;
    background: var(--tft-accent) !important; color: #fff !important;
    line-height: 1.4 !important; box-shadow: none !important;
}
.tft-btn:hover { opacity: .85; }
.tft-btn-secondary { background: #374151 !important; }
.tft-btn-danger    { background: #7f1d1d !important; }
.tft-btn-sm        { padding: .3rem .65rem !important; font-size: .8rem !important; }

/* ── Carte ── */
.tft-card {
    background: var(--tft-card) !important;
    border: 1px solid var(--tft-border) !important;
    border-radius: var(--tft-radius) !important;
    padding: 1.5rem !important; margin-bottom: 1.5rem !important;
}
.tft-card h2 {
    margin: 0 0 1rem !important; padding: 0 !important;
    font-size: 1.15rem !important; color: var(--tft-text) !important;
    border: none !important; background: none !important;
}

/* ── Champs formulaire ── */
.tft-form-row { display: flex !important; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tft-form-row input {
    flex: 1; min-width: 180px;
    padding: .5rem .9rem !important; border-radius: 8px !important;
    border: 1px solid var(--tft-border) !important;
    background: var(--tft-bg) !important; color: var(--tft-text) !important;
    font-size: .9rem !important; outline: none !important;
    box-shadow: none !important;
}
.tft-form-row input:focus {
    outline: 2px solid var(--tft-accent) !important;
    border-color: transparent !important;
}

/* ══════════════════════════════════
   TABLE – styles très spécifiques
   pour écraser les thèmes WordPress
══════════════════════════════════ */
table.tft-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    color: var(--tft-text) !important;
    font-size: .92rem !important;
    background: transparent !important;
    margin: 0 !important;
}
table.tft-table thead tr { background: rgba(255,255,255,.04) !important; }
table.tft-table th {
    text-align: left !important;
    padding: .75rem 1rem !important;
    border: none !important;
    border-bottom: 1px solid var(--tft-border) !important;
    color: var(--tft-muted) !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    vertical-align: middle !important;
}
table.tft-table td {
    padding: .8rem 1rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(48,54,61,.6) !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--tft-text) !important;
    font-size: .92rem !important;
}
table.tft-table tbody tr:last-child td { border-bottom: none !important; }
table.tft-table tbody tr:hover td {
    background: rgba(167,139,250,.06) !important;
}
table.tft-table td.tft-pos {
    font-weight: 700 !important;
    color: var(--tft-accent) !important;
    width: 48px !important;
    font-size: 1rem !important;
}

/* ── Tier Badges ── */
.tft-tier-badge {
    display: inline-block !important;
    padding: .28rem .7rem !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: .84rem !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
}
.tft-tier-iron        { background: #2a2a2a !important; color: #a0a0a0 !important; border: 1px solid #555 !important; }
.tft-tier-bronze      { background: #2d1a0a !important; color: #cd7c43 !important; border: 1px solid #cd7c43 !important; }
.tft-tier-silver      { background: #1a1e25 !important; color: #b0b8c8 !important; border: 1px solid #6b7280 !important; }
.tft-tier-gold        { background: #2d2200 !important; color: #fbbf24 !important; border: 1px solid #fbbf24 !important; }
.tft-tier-platinum    { background: #001a1a !important; color: #2dd4bf !important; border: 1px solid #2dd4bf !important; }
.tft-tier-emerald     { background: #001a0d !important; color: #10b981 !important; border: 1px solid #10b981 !important; }
.tft-tier-diamond     { background: #0d1b3e !important; color: #60a5fa !important; border: 1px solid #3b82f6 !important; }
.tft-tier-master      { background: #2d0a3d !important; color: #c084fc !important; border: 1px solid #a855f7 !important; }
.tft-tier-grandmaster { background: #3d0a0a !important; color: #f87171 !important; border: 1px solid #ef4444 !important; }
.tft-tier-challenger  { background: #1a1500 !important; color: #fde68a !important; border: 1px solid #fbbf24 !important; box-shadow: 0 0 8px rgba(251,191,36,.3) !important; }
.tft-tier-unranked    { background: #1a1a1a !important; color: #6b7280 !important; border: 1px solid #374151 !important; }

/* ── Winrate bar ── */
.tft-winrate-bar-wrap {
    position: relative !important; background: #1f2937 !important;
    border-radius: 6px !important; height: 22px !important;
    min-width: 90px !important; overflow: hidden !important;
    display: flex !important; align-items: center !important;
}
.tft-winrate-bar {
    position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important;
    background: linear-gradient(90deg, #059669, #34d399) !important;
    border-radius: 6px !important; transition: width .4s !important;
}
.tft-winrate-label {
    position: relative !important; z-index: 1 !important;
    padding: 0 .5rem !important; font-size: .8rem !important;
    font-weight: 700 !important; color: #fff !important;
}

/* ══════════════════
   PODIUM
══════════════════ */
.tft-podium-wrap    { padding: 2rem 0; }
.tft-podium {
    display: flex !important; justify-content: center !important;
    align-items: flex-end !important; gap: 1.5rem; flex-wrap: wrap;
}
.tft-podium-item {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: .4rem;
    color: var(--tft-text) !important;
}
.tft-podium-medal   { font-size: 2.4rem; line-height: 1; }
.tft-podium-emblem  {
    width: 80px !important; height: 80px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 14px rgba(167,139,250,.5));
}
.tft-podium-name {
    font-size: 1rem !important; font-weight: 700 !important;
    text-align: center !important; color: var(--tft-text) !important;
}
.tft-podium-rank {
    font-size: .85rem !important; text-align: center !important;
    color: var(--tft-muted) !important;
}
.tft-podium-block   { width: 140px; border-radius: 8px 8px 0 0; }
.tft-podium-first  .tft-podium-block { height: 100px; background: linear-gradient(180deg,#fbbf24,#b45309); }
.tft-podium-second .tft-podium-block { height: 70px;  background: linear-gradient(180deg,#9ca3af,#4b5563); }
.tft-podium-third  .tft-podium-block { height: 50px;  background: linear-gradient(180deg,#cd7c43,#7c3d1a); }

/* ══════════════════
   HISTORIQUE
══════════════════ */
.tft-historique-wrap { color: var(--tft-text); }

.tft-selector-wrap {
    display: flex !important; align-items: center !important;
    gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.tft-selector-wrap label {
    font-weight: 600 !important; color: var(--tft-muted) !important;
    font-size: .95rem !important;
}
#tft-account-select {
    padding: .5rem 1rem !important; border-radius: 8px !important;
    border: 1px solid var(--tft-border) !important;
    background: var(--tft-card) !important; color: var(--tft-text) !important;
    font-size: .95rem !important; cursor: pointer !important;
    outline: none !important;
}
#tft-account-select:focus { outline: 2px solid var(--tft-accent) !important; }

/* Placement badges */
.tft-placement {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important;
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important; font-weight: 700 !important;
    font-size: 1rem !important; flex-shrink: 0;
}
.tft-placement-1 { background: #92400e !important; color: #fde68a !important; }
.tft-placement-2 { background: #1e3a5f !important; color: #93c5fd !important; }
.tft-placement-3 { background: #134e2e !important; color: #6ee7b7 !important; }
.tft-placement-4 { background: #374151 !important; color: #d1d5db !important; }
.tft-placement-5 { background: #2d1b3d !important; color: #c084fc !important; }
.tft-placement-7 { background: #3b0a0a !important; color: #fca5a5 !important; }

.tft-history-note {
    margin-top: .75rem !important; font-size: .8rem !important;
    color: var(--tft-muted) !important; font-style: italic !important;
    padding: 0 .25rem !important;
}

/* ══════════════════
   LOADER
══════════════════ */
.tft-loader {
    display: inline-block !important; width: 20px !important; height: 20px !important;
    border: 3px solid var(--tft-border) !important;
    border-top-color: var(--tft-accent) !important;
    border-radius: 50% !important;
    animation: tft-spin .7s linear infinite !important;
    vertical-align: middle !important;
}
@keyframes tft-spin { to { transform: rotate(360deg); } }

/* ══════════════════
   RESPONSIVE
══════════════════ */
@media (max-width: 640px) {
    .tft-podium         { gap: .7rem; }
    .tft-podium-emblem  { width: 55px !important; height: 55px !important; }
    .tft-podium-block   { width: 95px; }
    table.tft-table th,
    table.tft-table td  { padding: .5rem .6rem !important; font-size: .82rem !important; }
    .tft-winrate-bar-wrap { min-width: 60px !important; }
}