/* =====================================================
   BASE
===================================================== */
.pb-tools,
.pb-table-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue",
                 Arial, sans-serif;
}

/* =====================================================
   TOOLS
===================================================== */
.pb-tools {
    display: flex;
    gap: 12px;
    padding: 14px;
    margin-bottom: 16px;
    background: #020617;
    border-radius: 14px;
}

#pb-search {
    flex: 1;
    padding: 12px 14px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
}

#pb-filter-populer {
    padding: 10px 18px;
    border-radius: 999px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, #f59e0b, #fb923c);
}

#pb-filter-populer.active {
    background: #1e293b;
    color: #fff;
}

/* =====================================================
   TABLE WRAPPER (FIX MOBILE)
===================================================== */
.pb-table-wrapper {
    width: 100%;
    overflow-x: auto;               /* ✅ FIX UTAMA */
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(2,6,23,.1);
}

/* =====================================================
   TABLE
===================================================== */
.pb-table {
    width: 100%;
    min-width: 680px;               /* ✅ BIAR MOBILE BISA SCROLL */
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
}

.pb-table th {
    background: #020617;
    color: #fff;
    padding: 14px;
    font-size: 12px;
    text-transform: uppercase;
}

.pb-table td {
    padding: 14px;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;            /* ✅ TIDAK PECAH */
}

/* =====================================================
   LIGA HEADER
===================================================== */
.pb-table .liga td {
    background: #020617;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
}

/* =====================================================
   ROW
===================================================== */
.pb-row:hover {
    background: #f8fafc;
}

.pb-match {
    font-weight: 700;
}

.hasil {
    font-weight: 900;
    text-align: center;
}

/* =====================================================
   MOBILE IMPROVEMENT
===================================================== */
@media (max-width: 768px) {

    .pb-tools {
        flex-direction: column;
    }

    #pb-filter-populer {
        width: 100%;
    }

    /* 👇 PETUNJUK SCROLL */
    .pb-table-wrapper::after {
        content: "⇠ Geser untuk melihat tabel ⇢";
        display: block;
        text-align: center;
        font-size: 12px;
        padding: 8px;
        color: #64748b;
    }
}

/* Style untuk judul liga di tabel */
.tabel-liga {
    background: linear-gradient(90deg, #1E3A8A, #3B82F6); /* biru sporty dengan gradient */
    color: white; /* teks putih agar kontras */
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-radius: 6px 6px 0 0; /* sedikit rounded di atas */
    font-size: 16px;
    letter-spacing: 1px;
}