/* ==========================================================================
   CUSTOM LEAGUE CSS
   ========================================================================== */

:root {
    /* --- STATUS COLORS (Hierarchy: Best to Worst) --- */
    --status-promo: #8a2be2; 
    --status-ucl:   #0d6efd; 
    --status-uel:   #0dcaf0; 
    --status-uecl:  #198754; 
    --status-playoff: #fd7e14; 
    --status-rel:   #dc3545; 
    --status-default: #e9ecef; 
}

/* --- MODERN TABLE (Responsive) --- */
.table-modern { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 0; }
.table-modern th {
    background: #fff; border-bottom: 2px solid #f0f0f0; color: #8898aa;
    font-weight: 700; font-size: 0.75rem; text-transform: uppercase; padding: 16px 12px; text-align: center;
    white-space: nowrap;
}
.table-modern th:nth-child(2), .table-modern th:nth-child(3) { text-align: left; }

.table-modern td {
    padding: 14px 12px; vertical-align: middle; border-bottom: 1px solid #f6f6f6;
    color: #32325d; font-size: 0.9rem; text-align: center; font-weight: 500;
    white-space: nowrap;
}
.table-modern tr:hover { background-color: #faf9fe; }

.table-minw-650 { min-width: 650px; width: 100%; }
.sticky-top-z1 { z-index: 1; }
.progress-fixed-60 { height: 6px; width: 60px; max-width: 60px; }

/* Sticky Columns */
.table-modern .sticky-col { position: sticky; background-color: #fff; z-index: 5; }
.table-modern tr:hover .sticky-col { background-color: #faf9fe; }

/* Rank Column */
.table-modern .rank-cell { 
    left: 0; width: 50px; z-index: 11; 
    border-right: none; 
    padding-left: 16px;
    position: sticky;
    overflow: visible; 
}

/* Club Logo Column */
.table-modern .club-logo { 
    left: 50px; width: 40px; z-index: 11; 
    border-right: none; 
    padding-right: 0;
}

/* Status Indicators */
.status-bar {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 6px; border-radius: 0; background-color: transparent; 
    z-index: 15;
}

/* Status Classes */
.status-promo .status-bar, .dot-promo   { background-color: var(--status-promo) !important; }
.status-ucl .status-bar, .dot-ucl       { background-color: var(--status-ucl) !important; }
.status-uel .status-bar, .dot-uel       { background-color: var(--status-uel) !important; }
.status-uecl .status-bar, .dot-uecl     { background-color: var(--status-uecl) !important; }
.status-playoff .status-bar, .dot-playoff { background-color: var(--status-playoff) !important; }
.status-rel .status-bar, .dot-rel       { background-color: var(--status-rel) !important; }

/* Points Column */
.table-modern td.points-cell {
    font-weight: 800; color: var(--main-purple); background-color: rgba(138, 43, 226, 0.04);
}

/* Rank Arrows */
.rank-change { font-size: 0.65rem; margin-left: 4px; vertical-align: middle; }
.change-up { color: #198754; }
.change-down { color: #dc3545; }
.change-same { color: #adb5bd; }

/* Form Badges */
.form-badges { display: flex; gap: 3px; justify-content: center; }
.form-badge {
    width: 20px; height: 20px; line-height: 20px; font-size: 10px; font-weight: 800;
    text-align: center; border-radius: 4px; color: white; text-transform: uppercase;
}
.form-badge.W { background-color: #2ecc71 !important; }
.form-badge.D { background-color: #f1c40f !important; color: #34495e !important; }
.form-badge.L { background-color: #e74c3c !important; }

/* Legend */
.standings-legend {
    display: flex; flex-wrap: wrap; gap: 12px; padding: 1rem;
    background: #fff; border-top: 1px solid #f0f0f0; font-size: 0.75rem; color: #525f7f;
}
.legend-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.legend-item { display: flex; align-items: center; }

/* --- CHARTS & STATS --- */
/* Stats Description Text */
.stats-desc {
    /* Default: No fixed height, allows collapsing */
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6c757d;
    overflow-y: auto; /* Scrollbar if text is very long */
    padding-right: 10px;
}

/* This class is added conditionally via HTML to align side-by-side charts */
.stats-min-height {
    height: 160px;
    margin-bottom: 1rem;
}

/* Scrollbar styling */
.stats-desc::-webkit-scrollbar { width: 4px; }
.stats-desc::-webkit-scrollbar-track { background: #f8f9fa; }
.stats-desc::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 4px; }

/* --- IMAGES & SIZING HELPERS --- */
.logo-watermark { width: 300px; filter: grayscale(100%); opacity: 0.1; }

/* --- MOBILE OPTIMIZATIONS --- */
@media (max-width: 768px) {
    .table-modern td, .table-modern th { padding: 10px 6px; font-size: 0.8rem; }
    .table-modern .rank-cell { left: 0; width: 45px; padding-left: 12px; }
    .table-modern .club-logo { left: 45px; width: 35px; }
}
