/* Base */
*{box-sizing:border-box}
:root{
  --primary:#0d47a1;
  --muted:#f1f3f5;
  --border:#e5e7eb;
  --text:#1f2937;
  --accent:#e53935;
}
html,body{height:100%}
body{
  font-family: Arial, sans-serif;
  background:#fff;
  margin:0;
  color:var(--text);
  line-height:1.5;
}

/* Header */
header{
  background:var(--primary);
  color:#fff;
  padding:16px;
}
header h1{margin:0;font-size:28px}
.liga-populer{background:#0f55c7;padding:12px 16px}
.liga-populer h2{margin:0 0 10px;font-size:16px;color:#fff;opacity:.9}
.liga-populer ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.liga-populer li{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.liga-populer a{text-decoration:none;color:var(--primary);font-weight:600}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:16px}

/* Tabs */
.sub-menu-liga.tabs{display:flex;gap:10px;border-bottom:2px solid var(--border);margin:8px 0 16px}
.sub-menu-liga .tab{
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--border);
  border-bottom:none;
  background:#fff;
  border-top-left-radius:10px;border-top-right-radius:10px;
  text-decoration:none;color:var(--primary);font-weight:700;
}
.sub-menu-liga .tab.active{background:var(--muted)}

/* Special box */
.kotak-merah{border:2px solid var(--accent);background:#fff8f8;border-radius:12px;padding:16px;margin:18px 0}
.kotak-merah h2{color:#b71c1c;margin-top:0}

/* Cards */
.list-artikel{margin:10px 0 20px}
.section-title{font-size:20px;margin:0 0 10px;color:var(--primary)}
.card{
  display:flex;gap:12px;align-items:center;
  padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  margin-bottom:10px;
}
.card img{width:96px;height:64px;object-fit:cover;border-radius:8px}
.card-title{font-size:16px;margin:0 0 6px}
.card-meta{font-size:12px;color:#6b7280;margin:0}

/* Tables */
.table-block{margin:14px 0 26px}
.table-scroll{overflow:auto;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;background:#fff}
thead th{background:var(--muted)}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
tbody tr:hover{background:#fafafa}

/* Responsive */
@media (max-width:640px){
  .liga-populer li{padding:6px 10px}
  .sub-menu-liga .tab{padding:8px 10px}
  .card{padding:8px}
  .card img{width:80px;height:54px}
}
#jadwal.is-hidden, #hasil.is-hidden { display:none !important; }
.sub-menu-liga .tab{padding:8px 12px;border-radius:10px}
.table-block{margin-top:12px}
.table-scroll table{border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden}
.table-scroll thead th{font-weight:700}

<!-- ==== Arrow toggle: CSS kecil ==== -->
<style>
  th.col-aksi{width:72px; text-align:center}
  td.cell-aksi{text-align:center}
  .arrow-btn{
    border:none; background:transparent; cursor:pointer;
    font-size:18px; line-height:1; padding:6px 10px; border-radius:8px;
    transition:transform .15s ease, opacity .15s ease;
  }
  .arrow-btn:hover{ transform:translateY(-1px); opacity:.9 }
  .arrow-btn.down{ color:#10b981 } /* hijau ▼ */
  .arrow-btn.up{ color:#ef4444 }   /* merah ▲ */
</style>

<script>
/* ====== Arrow toggle untuk tabel jadwal ======
   - Menambah kolom "Aksi" otomatis
   - Sinkron dengan mekanisme buka/tutup detail yang sudah ada
   - Klik tombol atau baris akan mengubah ikon ▼/▲ dan warna
*/
(function(){
  const tbody = document.querySelector('#tb-jadwal');
  if(!tbody) return;

  // 1) Tambahkan kolom header "Aksi" bila belum ada
  const theadRow = tbody.closest('table')?.querySelector('thead tr');
  if (theadRow && !theadRow.querySelector('.col-aksi')) {
    const th = document.createElement('th');
    th.textContent = 'Aksi';
    th.className = 'col-aksi';
    theadRow.appendChild(th);
  }

  // 2) Tambahkan cell tombol ke tiap baris match bila belum ada
  tbody.querySelectorAll('tr.match').forEach(tr=>{
    if(!tr.querySelector('.cell-aksi')){
      const td = document.createElement('td');
      td.className = 'cell-aksi';
      td.innerHTML = '<button class="arrow-btn down" aria-label="Buka detail" title="Buka detail">▼</button>';
      tr.appendChild(td);
    }
  });

  // 3) Fungsi sinkron ikon panah dengan status .opened pada baris
  function syncArrows(){
    tbody.querySelectorAll('tr.match').forEach(tr=>{
      const btn = tr.querySelector('.arrow-btn'); if(!btn) return;
      const open = tr.classList.contains('opened');
      btn.classList.toggle('up', open);
      btn.classList.toggle('down', !open);
      btn.textContent = open ? '▲' : '▼';
      btn.setAttribute('aria-pressed', open ? 'true' : 'false');
      btn.title = open ? 'Tutup detail' : 'Buka detail';
    });
  }

  // 4) Tangkap klik di tbody -> setelah handler asli jalan, sinkronkan ikon
  //    (handler asli sudah mengurus buka/tutup detail-row)
  tbody.addEventListener('click', function(e){
    const tr = e.target.closest('tr.match'); if(!tr) return;
    // Jalankan sinkron setelah event handler asli selesai
    setTimeout(syncArrows, 0);
  });

  // 5) Khusus klik langsung tombol: biarkan event bubble supaya baris ikut toggle
  tbody.addEventListener('click', function(e){
    const btn = e.target.closest('.arrow-btn'); if(!btn) return;
    // Tidak stopPropagation -> handler buka/tutup baris tetap berjalan
    setTimeout(syncArrows, 0);
  });

  // 6) Sinkron awal (semisal ada baris default terbuka)
  syncArrows();
})();
</script>