/* ============================================================
   LAYOUT CORE & VARIABLES
   ============================================================ */
body { 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    background: #f4f7f6; 
    margin: 0; 
    padding: 15px; 
    color: #333; 
}

.main-container { 
    max-width: 1300px; 
    margin: auto; 
}

.grid-layout { 
    display: grid; 
    grid-template-columns: 500px 1fr; 
    gap: 15px; 
    align-items: start;
}

/* ============================================================
   HEADER & BADGE (JUDUL TURNAMEN)
   ============================================================ */
.tournament-header {
    text-align: center;
    padding: 20px;
    background: #fff;
    border-bottom: 2px solid #3498db;
    margin-bottom: 20px;
}

#displayJudulTurnamen {
    margin: 0;
    color: #2c3e50;
    font-size: 24px;
    text-transform: uppercase;
}

.author-badge {
    position: fixed;
    top: 10px;
    right: 15px;
    background: #34495e;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none; /* Muncul via JS */
}

/* ============================================================
   KOMPONEN CARD & TABLES
   ============================================================ */
.card-box { 
    background: white; 
    padding: 12px; 
    border-radius: 8px; 
    border: 1px solid #ddd; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 15px;
}

.full-height { min-height: 85vh; }

.pairing-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 10px; 
    background: white; 
}

.header-row { background: #34495e; color: white; font-size: 11px; }
.header-row th { padding: 10px; }

.row-pairing-unit td { 
    border-bottom: 1px solid #eee; 
    padding: 5px 8px; 
    font-size: 13px; 
}

/* HIGHLIGHT SKOR */
.pts-cell { background: #f9f9f9; width: 35px; color: #000; text-align: center; }

/* Warna Menang (Hijau sesuai request terakhir) */
.player-cell.winner { 
    background: #00ff5100 !important; 
    color: #009520 !important; 
    /* font-weight: bold; */
}
.player-cell.draw {
    background-color: #eeea7300 !important; /* Kuning lembut */
    color: #e6ac00; /* Teks cokelat tua agar kontras */
}


/* Warna Remis (Kuning) */
.vs-cell.draw { 
    background: #ffff00 !important; 
    /* color: #1e00ff !important; */
    color: #000 !important;
    font-weight: bold; 
}





/* ============================================================
   MOBILE VIEW & AUTO-SHOW LOGIC
   ============================================================ */
.mobile-tabs { 
    display: none; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: white; 
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1); 
    z-index: 100;
}

.tab-btn { flex: 1; padding: 15px; background: #f8f9fa; border-top: 3px solid transparent; font-weight: bold    ; }
.tab-btn.active { border-top: 3px solid #3498db; color: #3498db; background: white; font-weight: bold; }

@media (max-width: 768px) {
    .grid-layout { display: block; }
    
    /* DEFAULT HP: Sembunyikan Ranking, Tampilkan Pairing */
    .right-column { display: none; }
    .left-column { display: block; } 

    /* LOGIKA TOGGLE: Paksa tampil jika class active ada */
    .left-column.active { display: block !important; }
    .right-column.active { display: block !important; }
    
    /* Jika ranking aktif, sembunyikan pairing */
    .right-column.active ~ .left-column,
    .left-column:has(~ .right-column.active) { 
        display: none !important; 
    }

    .mobile-tabs { display: flex; }
    body { padding-bottom: 70px; }
}

/* ============================================================
   POPUP STYLING (CLEANED)
   ============================================================ */
.popup-overlay { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.8); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 10000; 
}

.popup-content { 
    background: white; 
    padding: 30px; 
    border-radius: 8px; 
    text-align: center; 
    max-width: 350px; 
    width: 90%; 
}

.btn-confirm-yes { background: #27ae60; color: white; padding: 10px; flex: 1; }
.btn-confirm-no { background: #e74c3c; color: white; padding: 10px; flex: 1; }


.btn-google-full {
            width: 200px;
            height: 40px;
            float: right;
            
            background: white;
            border: 1px solid #dadce0;
            border-radius: 4px;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            margin-top: 10px;
        }