/* =========================================
   1. ZMIENNE I KONFIGURACJA KOLORÓW
   ========================================= */
:root {
    /* Dark Mode (Domyślny) */
    --er-bg: #1e1e1e;
    --er-bg-alt: #252525;
    --er-bg-hover: #2d2d2d;
    --er-border: #333;
    --er-text: #e0e0e0;
    --er-text-dim: #999;
    --er-accent: #fca311;
    --er-green: #28a745;
    --er-red: #dc3545;
    --er-rating-bg: #333;
    --er-rating-border: #444;
    
    /* Podium Colors */
    --er-gold-bg: rgba(255, 215, 0, 0.07);
    --er-silver-bg: rgba(192, 192, 192, 0.05);
    --er-bronze-bg: rgba(205, 127, 50, 0.05);
}

/* Light Mode Override */
.er-light-mode {
    --er-bg: #ffffff;
    --er-bg-alt: #f4f6f8;
    --er-bg-hover: #e9ecef;
    --er-border: #dfe3e8;
    --er-text: #212b36;
    --er-text-dim: #637381;
    --er-accent: #fca311;
    --er-rating-bg: #e9ecef;
    --er-rating-border: #c4cdd5;
}

/* =========================================
   2. GŁÓWNY KONTENER I NAGŁÓWKI TABELI
   ========================================= */
.er-ranking-wrapper {
    background-color: var(--er-bg) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: 4px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    overflow: hidden;
    color: var(--er-text) !important;
    font-family: 'Roboto', sans-serif;
    position: relative;
    transition: opacity 0.3s ease;
}

.er-header-row {
    background: var(--er-bg-alt) !important;
    padding: 15px 20px;
    border-bottom: 2px solid var(--er-accent) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.er-title {
    margin: 0 !important;
    color: var(--er-text) !important;
    font-size: 16px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
}

.er-controls { display: flex; gap: 10px; }

.er-search-input, .er-period-select, .er-region-select {
    background: var(--er-bg) !important;
    border: 1px solid var(--er-border) !important;
    color: var(--er-text) !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    height: 30px !important;
}
.er-search-input:focus, .er-period-select:focus, .er-region-select:focus {
    outline: none;
    border-color: var(--er-accent) !important;
}

/* =========================================
   3. TABELA I WIERSZE
   ========================================= */
.er-table-responsive { overflow-x: auto; }

.er-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px;
    color: var(--er-text) !important;
    table-layout: fixed;
}

.er-table th {
    background-color: var(--er-bg-alt) !important;
    color: var(--er-text-dim) !important;
    font-size: 11px;
    text-transform: uppercase;
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--er-border) !important;
    white-space: nowrap;
}

.er-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--er-border) !important;
    vertical-align: middle;
    color: var(--er-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.er-table tr:nth-child(odd) { background-color: var(--er-bg) !important; }
.er-table tr:nth-child(even) { background-color: var(--er-bg-alt) !important; }
.er-table tr:hover { background-color: var(--er-bg-hover) !important; }

.er-sortable { cursor: pointer; user-select: none; }
.er-sortable:hover { color: var(--er-text) !important; }
.er-sort-icon { font-size: 10px; margin-left: 3px; opacity: 0.5; }

/* =========================================
   4. DETALE KOMÓREK (Logo, Linki, Flagi)
   ========================================= */
.er-cell-content { display: flex; align-items: center; width: 100%; }

.er-mini-logo { width: 20px; height: 20px; object-fit: contain; margin-right: 6px; }
.er-team-logo, .er-player-avatar {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
    margin-right: 12px; border: 1px solid var(--er-border); background: var(--er-bg-alt);
}

.er-name-link {
    color: var(--er-text) !important; text-decoration: none !important;
    font-weight: 700; transition: color 0.2s;
}
.er-name-link:hover { color: var(--er-accent) !important; }
.er-team-name-txt { font-weight: 500; font-size: 12px; color: var(--er-text-dim); }

.er-flag { font-size: 16px; margin-right: 8px; line-height: 1; }
.er-flag-txt { font-size: 10px; margin-right: 5px; font-weight: bold; color: var(--er-text-dim); }

/* =========================================
   5. MEDALE I RANKINGI
   ========================================= */
.er-gold { background: linear-gradient(90deg, var(--er-gold-bg) 0%, transparent 100%) !important; border-left: 4px solid #FFD700 !important; }
.er-silver { background: linear-gradient(90deg, var(--er-silver-bg) 0%, transparent 100%) !important; border-left: 4px solid #C0C0C0 !important; }
.er-bronze { background: linear-gradient(90deg, var(--er-bronze-bg) 0%, transparent 100%) !important; border-left: 4px solid #CD7F32 !important; }

.er-medal { font-size: 18px; margin-left: 0; }
.er-num { font-weight: 800; font-size: 14px; color: var(--er-text); }

.er-rank-cell { text-align: center !important; }
.er-rank-box { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }

.er-trend-box { margin-top: 3px; height: 12px; }
.er-trend { font-size: 9px; font-weight: bold; padding: 1px 4px; border-radius: 2px; display: inline-block; }
.er-up { color: var(--er-green) !important; }
.er-down { color: var(--er-red) !important; }
.er-flat { color: var(--er-text-dim) !important; opacity: 0.5; }
.er-new { background: var(--er-accent); color: #000 !important; font-size: 8px; }

/* =========================================
   6. STATYSTYKI I WYKRESY
   ========================================= */
.er-center { text-align: center !important; }
.er-pos-text, .er-w { color: var(--er-green) !important; font-weight: bold; }
.er-neg-text, .er-l { color: var(--er-red) !important; }
.er-dim, .er-d { color: var(--er-text-dim) !important; }

.er-imp-high { color: var(--er-accent) !important; font-weight: bold; }
.er-imp-mid { color: var(--er-green) !important; }
.er-imp-low { color: var(--er-text-dim) !important; }

.er-rating-badge {
    background: var(--er-rating-bg) !important; color: var(--er-text) !important;
    padding: 3px 8px; border-radius: 4px; font-weight: 900; font-size: 12px;
    border: 1px solid var(--er-rating-border) !important;
}
.er-points-badge {
    background: rgba(252, 163, 17, 0.1) !important; color: var(--er-accent) !important;
    padding: 3px 8px; border-radius: 4px; font-weight: 800;
    border: 1px solid rgba(252, 163, 17, 0.3) !important;
}

.er-form-cell { width: 80px; min-width: 70px; text-align: center !important; }
.er-sparkline { display: block; width: 60px; height: 22px; margin: 0 auto; overflow: visible; }
.er-sparkline polyline { fill: none; stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.er-spark-up polyline { stroke: var(--er-green) !important; }
.er-spark-down polyline { stroke: var(--er-red) !important; }

/* =========================================
   7. ROZWIJANE WIERSZE (DESKTOP)
   ========================================= */
.er-expand-trigger { cursor: pointer; }
.er-details-row { background-color: var(--er-bg-alt) !important; border-top: none !important; }

.er-details-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 15px; 
    font-size: 12px; 
    color: var(--er-text-dim); 
}

/* Flex na Desktopie */
.er-det-grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 30px; 
    width: 100%; 
    margin-bottom: 15px;
}

.er-det-item { display: flex; align-items: center; gap: 5px; }

.er-profile-btn {
    display: inline-block; background: var(--er-accent); color: #000 !important;
    padding: 6px 20px; border-radius: 4px; text-decoration: none !important;
    font-weight: bold; margin-top: 5px;
}

/* =========================================
   8. WIDGETY (PRZYWRÓCONE)
   ========================================= */
.er-widget-box { 
    background: #ffffff !important; 
    border: 1px solid #e5e5e5 !important; 
    border-radius: 8px !important; 
    overflow: hidden !important; 
    font-family: 'Roboto', sans-serif !important; 
    margin-bottom: 25px !important; 
    margin-top: 0 !important; 
}
.cg-header { 
    padding: 12px 15px !important; 
    border-bottom: 1px solid #e5e5e5 !important; 
    background: #ffffff !important;
    display: flex !important; justify-content: space-between !important; align-items: center !important;
}
.cg-header h3 { margin: 0 !important; font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; color: #000000 !important; }
.cg-mini-logo { width: 24px !important; height: auto !important; }
.cg-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.cg-item { border-bottom: 1px solid #e5e5e5 !important; background: #ffffff !important; transition: background 0.2s !important; }
.cg-item:last-child { border-bottom: none !important; }
.cg-item:hover { background: #f9f9f9 !important; }
.cg-link { display: flex !important; align-items: center !important; padding: 10px 15px !important; text-decoration: none !important; color: inherit !important; }
.cg-left-group { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; }
.er-cg-rank { font-weight: 800; font-size: 14px; color: #888888; width: 20px; text-align: center; }
.er-cg-logo { width: 24px !important; height: 24px !important; object-fit: contain !important; border-radius: 50% !important; border: 1px solid #eeeeee !important; background: #fff; }
.cg-meta { display: flex !important; flex-direction: column !important; }
.cg-title { font-size: 13px !important; font-weight: 700 !important; color: #000000 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.cg-info-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.cg-date { font-size: 10px !important; font-weight: 700 !important; color: #888888 !important; text-transform: uppercase !important; }
.cg-more-btn { display: block !important; width: 100% !important; padding: 10px !important; background: #f0f0f0 !important; color: #555555 !important; text-align: center !important; font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; text-decoration: none !important; border-top: 1px solid #e5e5e5 !important; transition: background 0.2s !important; }
.cg-more-btn:hover { background: #e5e5e5 !important; color: #000000 !important; }

/* HLTV CARD */
.er-hltv-card {
    background-color: #363b41; width: 100%; height: 140px; 
    position: relative; overflow: hidden; 
    margin: 0 !important; font-family: 'Roboto', sans-serif;
}
.er-hltv-img-container { position: absolute; bottom: 0; left: 0; width: 50%; height: 100%; }
.er-hltv-img-container img { height: 100%; width: auto; object-fit: cover; object-position: bottom left; mask-image: linear-gradient(to right, black 70%, transparent 100%); -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%); }
.er-hltv-info { position: absolute; top: 0; right: 0; width: 55%; height: 100%; padding: 15px 15px 15px 0; display: flex; flex-direction: column; justify-content: space-between; text-align: right; z-index: 2; }
.er-hltv-nick a { color: #fff !important; font-size: 24px; font-weight: 900; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,0.5); text-decoration: none !important; }
.er-hltv-subtitle { color: #fca311 !important; font-size: 11px; margin-top: 3px; }
.er-hltv-stat-val { color: #fff; font-size: 28px; font-weight: 900; line-height: 1; }
.er-hltv-stat-sub { font-size: 11px; color: #e6e6e6 !important; text-transform: uppercase; }
.er-hltv-stat-lbl { color: #fca311 !important; font-size: 11px; }

/* =========================================
   9. METODOLOGIA (ZACHOWANA)
   ========================================= */
.er-methodology-wrapper {
    border-top: 1px solid var(--er-border);
    border-bottom: 1px solid var(--er-border);
    background: var(--er-bg-alt);
    margin-top: -1px; /* Connect to table */
    font-size: 11px;
    color: var(--er-text);
}
.er-meth-header {
    padding: 8px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: var(--er-text);
    transition: color 0.2s;
}
.er-meth-header:hover { color: var(--er-accent); }
.er-meth-content {
    display: none;
    padding: 0 15px 15px 15px;
    line-height: 1.5;
}
.er-meth-content.er-show { display: block; }
.er-meth-content code {
    background: rgba(0,0,0,0.1);
    padding: 2px 5px;
    border-radius: 3px;
    font-family: monospace;
    color: var(--er-text);
    font-weight: bold;
    border: 1px solid var(--er-border);
}
.er-ranking-wrapper:not(.er-light-mode) .er-meth-content code {
    background: rgba(255,255,255,0.1);
}
.er-meth-content p { margin: 5px 0 0 0; }

/* =========================================
   10. STOPKA I PAGINACJA
   ========================================= */
.er-branding-footer {
    background-color: var(--er-bg) !important;
    padding: 8px; text-align: center;
    border-top: 1px solid var(--er-border) !important;
}
.er-branding-footer a {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none !important; color: var(--er-text-dim) !important;
    font-size: 10px; opacity: 0.7; transition: 0.2s;
}
.er-branding-footer a:hover { opacity: 1; color: var(--er-text) !important; }
.er-branding-footer img { height: 16px; width: auto; vertical-align: middle; }

.er-pagination {
    background-color: var(--er-bg-alt) !important;
    padding: 10px 20px;
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--er-border) !important;
}
.er-pag-info { font-size: 11px; color: var(--er-text-dim) !important; font-weight: bold; }
.er-pag-btn {
    background: var(--er-bg) !important; color: var(--er-text) !important;
    border: 1px solid var(--er-border) !important; padding: 6px 15px;
    border-radius: 3px; font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all 0.2s; outline: none;
}
.er-pag-btn:hover:not(.er-disabled) { background: var(--er-bg-hover) !important; border-color: var(--er-accent) !important; }
.er-pag-btn.er-disabled { opacity: 0.3; cursor: default; }

.er-ajax-wrapper.er-loading .er-table { opacity: 0.5; pointer-events: none; }
.er-ajax-wrapper.er-loading::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 40px; height: 40px; border: 4px solid var(--er-accent);
    border-top-color: transparent; border-radius: 50%;
    animation: er-spin 0.8s linear infinite; margin-top: -20px; margin-left: -20px; z-index: 99;
}
@keyframes er-spin { to { transform: rotate(360deg); } }

/* =========================================
   11. MEDIA QUERIES (MOBILE FIX)
   ========================================= */
@media (max-width: 600px) {
    /* 1. Nagłówek */
    .er-header-row {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
    }
    .er-controls {
        flex-direction: column;
        gap: 8px;
    }
    .er-search-input, .er-period-select, .er-region-select {
        width: 100% !important;
        height: 38px !important;
    }

    /* 2. Ukrywanie zbędnych kolumn */
    .er-mob-hide { 
        display: none !important; 
    }

    /* 3. Tabela - Układ */
    .er-table td, .er-table th {
        padding: 10px 6px !important; 
    }
    .er-rank-cell { width: 35px !important; }

    .er-cell-content {
        max-width: 130px; 
    }
    .er-name-link {
        font-size: 13px; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .er-table th:last-child, 
    .er-table td:last-child {
        width: auto !important;
        min-width: 60px;
        text-align: right !important; 
        padding-right: 12px !important;
    }

    /* === ATOMOWE ROZWIĄZANIE DLA ROZWIJANYCH WIERSZY === */
    .er-details-row {
        display: none; 
        width: 100vw !important; 
        margin-left: -10px; 
        margin-right: -10px;
        border-top: none !important;
        position: relative;
    }
    
    .er-details-row.er-mobile-show {
        display: block !important;
    }
    
    .er-details-cell {
        display: block !important;
        width: 100% !important; 
        box-sizing: border-box !important;
        padding: 0 !important;
        border: none !important;
        white-space: normal !important;
        overflow: visible !important;
        height: auto !important;
    }

    .er-details-content {
        width: 100% !important;
        box-sizing: border-box !important;
        background: rgba(0,0,0,0.03);
        padding: 15px;
    }
    
    .er-det-grid {
        display: grid !important; 
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        justify-content: normal;
        width: 100% !important;
    }
    
    .er-det-item {
        font-size: 12px;
        text-align: left;
    }
    .er-profile-btn {
        width: auto !important;
        display: inline-block;
        text-align: center;
        padding: 12px 24px;
        box-sizing: border-box !important; 
    }

    /* 5. Ikony i logo */
    .er-player-avatar, .er-team-logo {
        width: 22px;
        height: 22px;
        margin-right: 6px;
    }
    .er-flag {
        font-size: 14px;
        margin-right: 4px;
    }
}