/* ── Primitif bersama semua halaman badminton ──

   TANGGA HURUF — satu peran satu token, jangan campur:
     judul baris / nama       --text-body-3b   (700 13)
     keterangan di bawahnya   --text-body-5r   (400 11)
     label bagian & status    --text-body-5b   (700 11, KAPITAL)
     aksi & penanda aksen     --text-body-4b   (700 12)
     angka di tabel           --text-body-4r   (400 12)
     angka menonjol           --text-body-2b   (700 14)
   Sebelumnya nama baris kadang 14 kadang 13, dan keterangan kadang 12 kadang
   11 — dua teks bersebelahan dengan tebal berbeda langsung terlihat acak.

   Tujuannya satu: setiap komponen yang muncul di lebih dari satu halaman hanya
   ditulis DI SINI. Sebelum file ini ada, .btn-primary punya tiga salinan di tiga
   halaman dan ketiganya sudah mulai berbeda paddingnya.

   Jarak memakai tangga token DS, bukan angka bebas:
     --gap-item-tight 2 · --gap-item-base 4 · --gap-item-loose 8
     --gap-section-tight 8 · --gap-section-base 12 · --gap-section-loose 16
     --gap-layout-tight 16 · --gap-layout-base 20
   Angka di luar tangga itu (7, 10, 11, 14) dipakai sebelumnya dan sudah
   dibereskan — jangan diperkenalkan lagi. */

/* ── Kerangka isi ── */

.step {
  padding: var(--gap-layout-tight);
  display: flex;
  flex-direction: column;
  gap: var(--gap-section-base);
}

/* Footer aksi. Aman dari home indicator iPhone lewat safe-area. */
.foot {
  flex: 0 0 auto;
  padding: var(--gap-section-base) var(--gap-layout-tight);
  padding-bottom: calc(var(--gap-section-base) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--surface-border);
  background: var(--surface);
}

/* ── Kartu ── */

.card {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  /* Sudut iframe dan gambar ikut terpotong radius kartunya; keduanya tidak bisa
     diberi radius dari luar. */
  overflow: hidden;
}

.card-pad { padding: var(--gap-section-base) var(--gap-section-loose); }

/* Kartu yang isinya padat (kartu match) pakai padding lebih rapat: isinya
   sudah punya jarak sendiri di dalam. */
.card-pad-tight { padding: var(--gap-item-loose) var(--gap-section-base); }

/* ── Label bagian ──
   Huruf kecil, kapital, redup. Dipakai sebagai judul kolom tabel maupun judul
   bagian di dalam kartu. */
.label,
.field-label,
.sched-label {
  font: var(--text-body-5b);
  color: var(--tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.field-label { margin-bottom: var(--gap-item-loose); }
/* 8, bukan 2. Dengan 2 labelnya nempel ke isinya, sementara jarak ke blok
   berikutnya di dalam kartu yang sama 12 — bacanya jadi timpang: label seperti
   bagian dari baris di bawahnya, bukan judul yang menaungi kartunya. */
.sched-label { margin-bottom: var(--gap-item-loose); }

/* ── Baris daftar ──
   Avatar di kiri, dua baris teks di tengah, angka opsional di kanan. Dipakai
   daftar pemain, daftar peserta, dan daftar jadwal. */
.row {
  display: flex;
  align-items: center;
  gap: var(--gap-section-base);
  padding: var(--gap-section-base) 0;
  border-bottom: 1px solid var(--divider);
}

.row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-item-tight);
}

.row-title { font: var(--text-body-3b); color: var(--primary); }
.row-meta { font: var(--text-body-5r); color: var(--secondary); }

/* ── Avatar ──
   Selalu kotak dengan radius kartu, tidak pernah lingkaran. --emphasis jadi
   alas selama gambarnya belum turun, jadi barisnya tidak berkedip kosong. */
.avatar {
  flex: 0 0 auto;
  background: var(--emphasis);
  border-radius: var(--radius-card);
  object-fit: cover;
}

/* ── Tombol ──
   Isian penuh atau tanpa isian sama sekali. Tidak ada versi tint separuh
   (latar brand-low + teks brand): hierarkinya dari ada atau tidaknya isian. */

.btn-primary,
.btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-item-loose);
  width: 100%;
  padding: var(--gap-section-base) var(--gap-layout-tight);
  font: var(--text-body-3b);
  border-radius: var(--radius-field);
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  /* --on-brand, bukan --white: di mode gelap ungunya terang dan teks putih di
     atasnya tidak terbaca. Lihat theme.css. */
  color: var(--on-brand);
  background: var(--brand);
  border: 0;
}

.btn-primary:disabled {
  background: var(--surface-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.btn-ghost {
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--surface-border);
}
.btn-ghost:hover { background: var(--surface-hover); }

/* Aksi yang tidak bisa dibatalkan. Tetap TANPA ISIAN: yang membedakan warnanya,
   bukan bobotnya. Tombol merah berisi penuh akan jadi benda paling menonjol di
   halaman, padahal ini justru yang paling jarang ditekan. */
.btn-danger { color: var(--negative); }
/* Latar hover-nya netral, bukan merah muda: DS tidak punya token merah lembut,
   dan bikin token tandingan di sini cuma menambah warna yang tidak dikenal
   siapa pun. */
.btn-danger:hover { background: var(--surface-hover); }

/* Tombol selebar isinya, dipakai waktu dia berdiri di tengah empty state:
   tombol selebar layar di tengah ruang kosong terlihat seperti panel, bukan
   ajakan menekan. */
.btn-inline { width: auto; margin-top: var(--gap-item-loose); }

/* ── Tab ── */

.tabs {
  flex: 0 0 auto;
  display: flex;
  border-bottom: 1px solid var(--surface-border);
}

.tab {
  flex: 1 1 0;
  padding: var(--gap-section-base) var(--gap-item-base);
  font: var(--text-body-4b);
  color: var(--secondary);
  background: transparent;
  border: 0;
  /* Garis bawah transparan dipasang di SEMUA tab, bukan cuma yang aktif. Kalau
     cuma yang aktif punya border, tinggi tab berubah 2px tiap pindah dan
     barisnya goyang. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { background: var(--surface-hover); }
.tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--brand); }

/* ── Pilihan tunggal: chip dan tile ──
   Yang terpilih ditandai GARIS brand, latarnya tetap sama dengan yang tidak
   terpilih. Bukan latar brand-low. */

.chip,
.seg-item {
  font: var(--text-body-4b);
  color: var(--secondary);
  background: transparent;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-field);
  cursor: pointer;
  white-space: nowrap;
}

.chip { flex: 1 1 0; padding: var(--gap-item-loose) var(--gap-section-base); }
/* "Soon" duduk SEBARIS dengan labelnya, bukan di bawahnya: ditumpuk, tiap tile
   makan satu baris teks ekstra padahal isinya cuma satu kata. */
.seg-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-item-loose);
  padding: var(--gap-section-base);
  font: var(--text-body-3b);
}

.chip:hover,
.seg-item:hover:not(:disabled) { background: var(--surface-hover); }

/* Pilihan yang belum jalan dimatikan pakai atribut disabled bawaan, bukan
   sekadar diwarnai abu: yang disabled tidak bisa diklik, tidak kena tab
   keyboard, dan dibacakan sebagai nonaktif. Tetap ditampilkan supaya arah
   fiturnya kelihatan. */
.chip:disabled,
.seg-item:disabled {
  color: var(--text-disabled);
  background: var(--surface-disabled);
  cursor: not-allowed;
}

.soon { font: var(--text-body-5r); color: var(--text-disabled); }

.chip[aria-pressed="true"],
.seg-item[aria-pressed="true"] {
  border-color: var(--brand);
  color: var(--primary);
}

/* ── Judul dua baris di header ──
   Baris pertama menerangkan JENIS halamannya, baris kedua menerangkan YANG
   MANA — nama klub atau tanggalnya. Tanpa baris kedua, dua kompetisi di klub
   yang sama terlihat identik. */
.hd-stack { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.hd-stack .hd-title { margin-right: 0; }

.hd-sub {
  font: var(--text-body-5r);
  color: var(--secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Checkbox ──
   Kotak bawaan browser SELALU berlatar putih, jadi di mode gelap dia jadi
   bidang putih menyala di tengah baris gelap. accent-color tidak menolong:
   itu cuma mewarnai keadaan TERCENTANG.

   Jadi tampilannya diambil alih: kotak kosong bergaris saja, dan baru terisi
   brand waktu dicentang. Centangnya digambar dari dua sisi border sebuah kotak
   yang diputar 45°, bukan dari font atau gambar, supaya ikut warna teksnya dan
   tidak perlu file tambahan. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  display: grid;
  place-content: center;
  background: transparent;
  border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-field);
  cursor: pointer;
}

/* Di dalam modal atau sheet, garisnya ikut token wadahnya: --surface-border
   nyaris tak terlihat di atas latar modal. */
.modal-box input[type="checkbox"],
.sheet input[type="checkbox"] { border-color: var(--modal-border); }

input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}

input[type="checkbox"]:checked::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid var(--on-brand);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Tile pilihan (grid) ──
   Dipakai pemilih mode kompetisi dan pemilih jenis hasil pertandingan. Sama
   seperti chip: yang terpilih ditandai GARIS brand, bukan latar brand-low. */
.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-item-loose);
}

.mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-item-loose);
  padding: var(--gap-section-base);
  text-align: left;
  font: var(--text-body-3b);
  color: var(--secondary);
  background: transparent;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-field);
  cursor: pointer;
}
.mode:hover:not(:disabled) { background: var(--surface-hover); }

.mode[aria-pressed="true"] { border-color: var(--brand); color: var(--primary); }

.mode:disabled {
  color: var(--text-disabled);
  background: var(--surface-disabled);
  cursor: not-allowed;
}

/* Di dalam sheet, garis tile ikut token wadahnya. */
.sheet .mode { border-color: var(--modal-border); }
.sheet .mode[aria-pressed="true"] { border-color: var(--brand); }

/* ── Kepala halaman ──
   Blok identitas yang sama dipakai halaman klub dan halaman kompetisi: avatar
   kotak, nama, lalu satu atau dua baris keterangan. Bentuknya sengaja sama
   dengan baris di daftar klub halaman depan, supaya yang diklik di daftar dan
   yang muncul sesudahnya terbaca sebagai benda yang sama. */
.page-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-section-base);
  padding: var(--gap-item-loose) var(--gap-layout-tight) var(--gap-section-base);
}

/* Inisial klub duduk di atas warna brand yang datar. Sempat dicoba gradien
   dua warna yang diturunkan dari id klub; hasilnya ramai dan tiap klub jadi
   punya warnanya sendiri-sendiri, padahal yang perlu dikenali nama klubnya,
   bukan warnanya. --on-brand, bukan --white: di mode gelap brand-nya terang. */
.page-head-avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--brand);
  border-radius: var(--radius-card);
  font: var(--text-body-3b);
  color: var(--on-brand);
  object-fit: cover;
}

.page-head-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.page-head-name { font: var(--text-title-3); color: var(--primary); }
.page-head-meta {
  font: var(--text-body-5r);
  color: var(--secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Angka kemajuan di ujung kanan kepala halaman. Sebagai kolom tersendiri, bukan
   baris ketiga di bawah nama: kepala halaman tetap dua baris. */
.page-head-stat {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.page-head-stat-num { font: var(--text-body-2b); color: var(--primary); }
.page-head-stat-label {
  font: var(--text-body-5r);
  color: var(--tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Empty state ──
   Satu bentuk untuk semua: ikon redup, satu kalimat, dan satu baris penjelas
   kalau perlu. Ditengahkan di ruang yang tersisa — bukan menempel di atas —
   supaya panel kosong tidak terbaca seperti halaman yang gagal memuat. */
.empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-item-loose);
  padding: var(--gap-layout-base) var(--gap-layout-tight);
  text-align: center;
}

/* Ikonnya ditaruh di dalam kotak --emphasis, bukan mengambang sendirian:
   ikon garis tipis di tengah ruang kosong besar terlihat seperti sisa render. */
.empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-card);
  background: var(--emphasis);
  color: var(--tertiary);
}

.empty-title { font: var(--text-body-3b); color: var(--secondary); }
.empty-sub { font: var(--text-body-5r); color: var(--tertiary); }

/* Panel yang isinya cuma empty state ikut memanjang, supaya "di tengah" berarti
   di tengah layar, bukan di tengah tumpukan teks setinggi 40px. */
.app-main { display: flex; flex-direction: column; }
.app-main > * { flex: 0 0 auto; }
.app-main > .is-fill { flex: 1 1 auto; display: flex; flex-direction: column; }

/* ── Rincian poin, dibuka sebagai bottom sheet ── */

/* Sheet menempel ke ARTBOARD, bukan ke viewport: di desktop halaman ini cuma
   393px di tengah layar, kalau fixed ke viewport sheet-nya melebar keluar
   bingkai. .app sudah overflow:hidden, jadi sheet ikut terpotong rapi. */
.app { position: relative; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  z-index: 10;
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  background: var(--modal);
  border-top-left-radius: var(--radius-modal);
  border-top-right-radius: var(--radius-modal);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sheet-grab {
  flex: 0 0 auto;
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: var(--radius-pill);
  background: var(--modal-border);
}

.sheet-hd {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-item-loose);
  padding: var(--gap-section-base) var(--gap-item-loose) var(--gap-section-base) var(--gap-layout-tight);
}

.sheet-title { flex: 1 1 auto; min-width: 0; font: var(--text-heading-2); color: var(--primary); }
.sheet-sub { font: var(--text-body-5r); color: var(--secondary); }

/* Tanpa garis pemisah antara kepala sheet dan isinya: judul dan isi sudah
   terpisah oleh jarak, dan garis di situ cuma memotong panel jadi dua kotak. */
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--gap-item-base) var(--gap-layout-tight) var(--gap-layout-base);
  /* Ruang bawah dilebihkan: sheet berhenti tepat di tepi layar, dan di ponsel
     jempol menutupi baris terakhir kalau isinya mepet. */
  padding-bottom: calc(var(--gap-layout-base) + env(safe-area-inset-bottom, 0px));
}

/* ── Baris kesimpulan di dalam sheet ──
   Diberi latar --emphasis supaya berhenti terbaca sebagai baris data biasa.
   Ini angka yang dicari orang waktu membuka sheet-nya; kalau tampil sama
   dengan baris di atasnya, dia tenggelam di antara daftar. */
.sheet-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-section-base);
  margin-top: var(--gap-section-loose);
  padding: var(--gap-section-base) var(--gap-section-loose);
  background: var(--emphasis);
  border-radius: var(--radius-card);
}

.sheet-total-label { font: var(--text-body-4b); color: var(--secondary); }
.sheet-total-val { font: var(--text-title-3); color: var(--primary); }