/* ------------------------------------------  
       MODERN DARK THEME & RESPONSIVE CSS  
       ------------------------------------------ */  
    :root {  
        --bg-dark: #0f172a;       /* Main Background */  
        --bg-card: #1e293b;       /* Card Background */  
        --bg-header: #334155;     /* Table Header */  
        --text-primary: #f8fafc;  
        --text-secondary: #94a3b8;  
        --accent: #3b82f6;        /* Primary Blue */  
        --win: #10b981;  
        --draw: #fbbf24;  
        --loss: #ef4444;  
        --border: #334155;  
        --radius: 12px;  
    }  

    body {  
        background-color: var(--bg-dark);  
        color: var(--text-primary);  
        font-family: 'Inter', system-ui, -apple-system, sans-serif;  
        margin: 0; padding: 0;  
        line-height: 1.5;  
    }  

    a { text-decoration: none; color: inherit; transition: 0.2s; }  
    .sh-container { max-width: 1100px; margin: 0 auto; padding: 0 15px 40px; }  

    /* HEADER SECTION */  
    .league-hero {  
        display: flex; align-items: center; gap: 20px;  
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);  
        padding: 30px; border-radius: var(--radius);  
        margin: 20px 0; border: 1px solid var(--border);  
        box-shadow: 0 10px 25px rgba(0,0,0,0.3);  
    }  
    .hero-logo {   
        width: 80px; height: 80px; object-fit: contain;   
        filter: drop-shadow(0 0 8px rgba(255,255,255,0.1));   
    }  
    .hero-meta h1 { margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px; }  
    .hero-meta p { margin: 5px 0 0; color: var(--text-secondary); font-size: 0.95rem; font-weight: 500; }  
    .hero-badge {  
        background: rgba(59, 130, 246, 0.15); color: var(--accent);  
        padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 700;  
        text-transform: uppercase; margin-left: 10px; vertical-align: middle;  
    }  

    /* STICKY TAB NAVIGATION */  
    .sticky-nav-wrapper {  
        position: sticky; top: 60px; /* Adjust based on your Main Header height */  
        z-index: 90; background: var(--bg-dark);  
        padding: 10px 0; margin-bottom: 20px;  
    }  
    .tab-nav {  
        display: flex; gap: 10px; overflow-x: auto;   
        scrollbar-width: none; -webkit-overflow-scrolling: touch;  
        padding-bottom: 5px;  
    }  
    .tab-nav::-webkit-scrollbar { display: none; }  
      
    .tab-btn {  
        background: var(--bg-card); border: 1px solid var(--border);  
        color: var(--text-secondary); padding: 12px 24px;  
        border-radius: 30px; font-weight: 600; cursor: pointer;  
        white-space: nowrap; font-size: 0.9rem; flex-shrink: 0;  
        transition: all 0.3s ease;  
    }  
    .tab-btn:hover { color: #fff; border-color: var(--accent); }  
    .tab-btn.active {  
        background: var(--accent); color: #fff; border-color: var(--accent);  
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);  
    }  

    /* TABLES - RESPONSIVE MAGIC */  
    .card-box {  
        background: var(--bg-card); border-radius: var(--radius);  
        border: 1px solid var(--border); overflow: hidden; margin-bottom: 25px;  
    }  
    .table-responsive {  
        overflow-x: auto; -webkit-overflow-scrolling: touch;  
    }  
    .data-table {  
        width: 100%; border-collapse: separate; border-spacing: 0;  
        min-width: 650px; /* Force scroll on mobile */  
    }  
    .data-table th {  
        background: rgba(0,0,0,0.3); color: var(--text-secondary);  
        font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;  
        padding: 15px; text-align: center; font-weight: 700;  
        border-bottom: 1px solid var(--border);  
    }  
    .data-table td {  
        padding: 12px 15px; border-bottom: 1px solid rgba(255,255,255,0.05);  
        color: var(--text-primary); font-size: 0.9rem; text-align: center;  
    }  
    .data-table tr:last-child td { border-bottom: none; }  
    .data-table tr:hover td { background: rgba(255,255,255,0.03); }  

    /* STICKY COLUMN FOR MOBILE (Team Name) */  
    .data-table th:nth-child(2),  
    .data-table td:nth-child(2) {  
        position: sticky; left: 0; z-index: 2;  
        background: var(--bg-card); /* Match card bg */  
        border-right: 1px solid rgba(255,255,255,0.05);  
        text-align: left;  
    }  
    .data-table td:nth-child(2) { box-shadow: 2px 0 5px rgba(0,0,0,0.2); }  
      
    /* TEAM CELL */  
    .team-cell { display: flex; align-items: center; gap: 12px; }  
    .team-logo { width: 28px; height: 28px; object-fit: contain; }  
    .team-name { font-weight: 600; white-space: nowrap; }  

    /* MATCH GRID (Desktop vs Mobile) */  
    .date-header {  
        display: flex; align-items: center; gap: 10px;  
        color: var(--accent); font-weight: 700; font-size: 0.9rem;  
        margin: 25px 0 15px; text-transform: uppercase;  
    }  
    .date-header::after { content:''; height:1px; background: var(--border); flex:1; }  

    .match-grid {  
        display: grid; gap: 15px;  
        /* Auto-fit: 1 col mobile, 2 cols tablet, 3 cols desktop */  
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));  
    }  

    .match-card {  
        background: var(--bg-card); border: 1px solid var(--border);  
        border-radius: 10px; padding: 15px;  
        display: flex; justify-content: space-between; align-items: center;  
        position: relative; overflow: hidden;  
    }  
    .match-card:hover { transform: translateY(-2px); border-color: var(--accent); }  
      
    .teams-col { flex: 1; display: flex; flex-direction: column; gap: 10px; }  
    .team-row { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 0.95rem; }  
    .team-row img { width: 24px; height: 24px; }  
      
    .meta-col {  
        text-align: center; padding-left: 15px; min-width: 80px;  
        border-left: 1px solid rgba(255,255,255,0.05);  
    }  
    .score-badge {  
        font-size: 1.1rem; font-weight: 800; color: #fff;  
        background: rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 6px;  
    }  
    .time-badge { font-size: 0.85rem; color: var(--accent); font-weight: 700; }  
    .match-status { font-size: 0.7rem; color: var(--text-secondary); margin-top: 5px; }  

    /* FORM GUIDE */  
    .form-dots { display: flex; gap: 3px; justify-content: center; }  
    .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }  
    .dot.W { background: var(--win); }  
    .dot.D { background: var(--draw); }  
    .dot.L { background: var(--loss); }  

    /* UTILITY */  
    .tab-content { display: none; animation: fadeUp 0.3s ease-out; }  
    .tab-content.active { display: block; }  
    @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }  

    /* MOBILE TWEAKS */  
    @media (max-width: 600px) {  
        .sh-container { padding: 0 10px 40px; }  
        .league-hero { flex-direction: column; text-align: center; padding: 20px; }  
        .hero-meta h1 { font-size: 1.5rem; }  
        .data-table th, .data-table td { padding: 10px 8px; font-size: 0.8rem; }  
        .team-logo { width: 22px; height: 22px; }  
          
        /* On mobile, make match cards simpler */  
        .match-grid { grid-template-columns: 1fr; }   
    }
    
    /* ===============================
   MOBILE TABLE FIX (STANDINGS)
   =============================== */
@media (max-width: 600px) {

  /* whole table smaller */
  .data-table {
    min-width: unset; /* stop forced scroll */
    width: 100%;
  }

  /* compact numeric columns */
  .data-table th:not(:nth-child(2)),
  .data-table td:not(:nth-child(2)) {
    padding: 6px 4px;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  /* TEAM NAME column – more space */
  .data-table th:nth-child(2),
  .data-table td:nth-child(2) {
    min-width: 140px;
    max-width: 160px;
    white-space: normal;      /* allow wrap */
    word-break: break-word;
  }

  .team-cell {
    gap: 6px;
  }

  .team-name {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .team-logo {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
}
/* TEAM NAME HARD CUT */
.team-name {
    display: inline-block;
    max-width: 110px;   /* mobile-friendly */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* FORCE REMOVE GD COLUMN (7th) */
.standings-page table.data-table th:nth-child(7),
.standings-page table.data-table td:nth-child(7) {
    display: none !important;
}