/* ═══════════════════════════════════════════════════════════════════
   SS-F7 — Tema admin gaya situs publik (Framework7 + Rubik + f7-icons)
   Ekstraksi CSS layout sambilanscore.test (layouts/public.blade.php)
   + penyesuaian dashboard admin. Dimuat SETELAH style.css.
   ═══════════════════════════════════════════════════════════════════ */

:root { --f7-theme-color: #0a84ff !important; }

.navbar-logo { height: 40px; display: block; }
body:not(.dark) .logo-light { display: none; }
body.dark .logo-dark { display: none; }
body.dark .logo-light { display: block; }

/* ═══════════ SIDEBAR (panel kiri) — daftar rata, tanpa kartu ═══════════
   Disamakan dengan situs publik (layouts/public.blade.php) 2026-08-31 atas
   permintaan user: kartu putih bertumpuk + kotak ikon warna-warni diganti
   DAFTAR RATA di atas satu bidang putih, ikon garis satu warna netral, tanpa
   bayangan/chevron. Warna per menu ($color di $ssGroups, layouts/f7.blade.php)
   SENGAJA tidak dipakai lagi di markup — datanya dibiarkan utuh supaya gampang
   dihidupkan kembali kalau diminta. */
/* Lebar 320px → 256px (−20%, permintaan user 2026-08-31). --f7-panel-left-width
   WAJIB ikut diubah: efek "push" (layar < 1024px) menggeser konten sejauh
   variabel itu (bawaan F7 260px), bukan sejauh lebar panel — kalau geserannya
   lebih besar dari panel, terlihat celah latar di sisi kanan panel. Di desktop
   (visible-breakpoint) F7 memakai lebar panel yang sebenarnya, jadi aman. */
/* 84vw → 50vw (permintaan user 2026-09-03: di layar kecil panelnya makan lebih
   dari separuh layar). Batas 256px DIPERTAHANKAN supaya desktop tak berubah:
   di layar ≥ 512px, min() memilih 256px, jadi 50vw hanya berlaku di ponsel. */
:root { --f7-panel-left-width: min(50vw, 256px); }
.panel-left { width: min(50vw, 256px); }
/* Di desktop sidebar TIDAK melayang di atas konten — ia ikut terlihat permanen
   (data-visible-breakpoint="1024" di layouts/f7.blade.php). Latarnya putih sama
   seperti kartu-kartu halaman, jadi tanpa garis ini keduanya terlihat menyatu
   (permintaan user 2026-08-31). Situs publik tak butuh ini: panelnya selalu
   menutup di atas konten. */
@media (min-width: 1024px) {
  .panel-left { border-right: 1px solid rgba(120,120,128,.22); }
  body.dark .panel-left { border-right-color: rgba(255,255,255,.1); }
}
.ss-panel { display: flex; flex-direction: column; height: 100%; background: #fff; }
body.dark .ss-panel { background: #000; }
/* Hairline pemisah memisahkan blok logo dari daftar menu (di publik hairline
   ini warisan baris cari yang sudah dihapus). */
.ss-brand { padding: calc(env(safe-area-inset-top) + 22px) 16px 16px; flex-shrink: 0;
  border-bottom: 1px solid rgba(120,120,128,.18); }
.ss-brand a { display: inline-block; text-decoration: none; }
.ss-brand a:active { opacity: .6; }
.ss-brand img { height: 32px; max-width: 100%; display: block; }
/* Nama panel ("Panel Event Organizer", dst) — tidak ada di situs publik, tapi
   DIPERTAHANKAN di admin karena itulah penanda panel mana yang sedang dibuka.
   Gayanya dibuat netral supaya tak menonjol dari daftar. */
.ss-brand .sub { font-size: 11px; color: var(--f7-list-item-footer-text-color); margin-top: 8px; font-weight: 500; }
.ss-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 calc(env(safe-area-inset-bottom) + 24px); scrollbar-width: none; }
.ss-scroll::-webkit-scrollbar { display: none; }
.ss-scroll > * { flex-shrink: 0; }
.ss-gtitle { font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--f7-list-item-footer-text-color); opacity: .75; padding: 14px 16px 4px; }
/* .ss-card tinggal PEMBUNGKUS tanpa gaya — kartu, bayangan & garis antar-baris
   dihapus. Kelasnya sengaja dipertahankan di markup supaya pengelompokan
   menunya tetap terbaca di HTML dan gampang dikembalikan. */
.ss-card { background: none; box-shadow: none; border-radius: 0; border: 0; }
body.dark .ss-card { background: none; border: 0; }
.ss-link { display: flex; align-items: center; gap: 10px; padding: 8px 16px; text-decoration: none; color: var(--f7-text-color); }
.ss-link:active { background: rgba(120,120,128,.1); }
/* Ikon polos tanpa kotak tint. Ikon garis mengandalkan atribut fill="none"
   bawaannya: JANGAN set `fill`.
   Warnanya MENGIKUTI TEKS menu (var(--f7-text-color)) sejak 2026-09-03:
   sempat dicoba biru tema di hari yang sama, tapi user menilainya tidak enak
   dilihat. Riwayat sebelumnya: abu netral (--f7-list-item-footer-text-color).
   Dua pengecualian di bawah TETAP berlaku karena spesifisitasnya lebih tinggi:
   menu aktif jadi biru (.ss-link.on) dan menu Keluar merah (.ss-danger) —
   keduanya sudah sewarna dengan teksnya masing-masing. */
.ss-ic { width: 19px; height: 19px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: var(--f7-text-color); }
.ss-ic .icon { font-size: 15px; color: inherit; }
.ss-ic svg { width: 17px; height: 17px; color: inherit; }
.ss-lbl { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Menu aktif ditandai WARNA + tebal saja — tanpa blok latar biru */
.ss-link.on .ss-lbl { color: var(--f7-theme-color); font-weight: 700; }
.ss-link.on .ss-ic { color: var(--f7-theme-color); }
.ss-link.ss-danger .ss-lbl { color: #ff3b30; }
.ss-link.ss-danger .ss-ic { color: #ff3b30; }

/* ═══════════ BOTTOM TAB BAR — floating pill (modern iOS) ═══════════ */
.page-content { padding-bottom: calc(env(safe-area-inset-bottom) + 98px) !important; }
.ss-tabbar {
  left: calc(16px + 1.5%) !important; right: calc(16px + 1.5%) !important;
  bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
  width: auto !important; height: 58px !important;   /* ramping: tab tanpa teks, ikon saja */
  border-radius: 26px !important; overflow: visible !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  transition: transform .42s cubic-bezier(.32,.72,0,1), opacity .3s ease;
  will-change: transform;
}
@media (min-width: 768px) { .ss-tabbar { max-width: 520px; margin-inline: auto; } }
.ss-tabbar::before, .ss-tabbar::after { display: none !important; }
.ss-tabbar.ss-hidden {
  transform: translateY(calc(100% + env(safe-area-inset-bottom) + 24px));
  opacity: 0; pointer-events: none;
}
/* Kaca cair putih (sama dengan situs publik) */
.ss-tabbar .toolbar-inner {
  position: relative; height: 58px; padding: 0 6px;
  border-radius: 26px;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 16px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08),
              inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.04);
}
.ss-tabbar .toolbar-inner::after {
  content: ''; position: absolute; inset: 1px 1px auto; height: 46%;
  border-radius: 26px 26px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events: none;
}
body.dark .ss-tabbar .toolbar-inner {
  background: rgba(28,28,30,.88);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 5px 14px rgba(0,0,0,.4),
              inset 0 1px 0 rgba(255,255,255,.1);
}
body.dark .ss-tabbar .toolbar-inner::after {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.ss-tabbar .tab-link {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0;
  color: #000 !important;
  display: flex; align-items: center; justify-content: center;
  margin: 6px 4px; border-radius: 18px;
  transition: transform .32s cubic-bezier(.32,.72,0,1), background-color .28s ease, color .25s ease;
}
.ss-tabbar .tab-link i { font-size: 25px; line-height: 1; transition: transform .38s cubic-bezier(.2,.8,.3,1.5); }
.ss-tabbar .tab-link svg { width: 25px; height: 25px; transition: transform .38s cubic-bezier(.2,.8,.3,1.5); }
.ss-tabbar .tab-link:active { transform: scale(.86); }
/* Pil aktif — kapsul abu netral, teks/ikon hitam pekat */
.ss-tabbar .tab-link-active {
  color: #000 !important;
  background: rgba(120,120,128,.18);
  box-shadow: inset 0 0 0 1px rgba(120,120,128,.16);
}
body.dark .ss-tabbar .tab-link { color: rgba(235,235,245,.62) !important; }
body.dark .ss-tabbar .tab-link-active {
  color: #fff !important;
  background: rgba(120,120,128,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
/* Tab aktif: tanpa teks, pembedanya pil abu + ikon sedikit ditebalkan */
.ss-tabbar .tab-link-active i,
.ss-tabbar .tab-link-active svg { transform: scale(1.06); }
.ss-tabbar .tab-link-active svg { stroke-width: 2.1; }
@media (prefers-reduced-motion: reduce) {
  .ss-tabbar { transition: opacity .2s ease; }
  .ss-tabbar.ss-hidden { transform: none; }
}

/* ═══════════ NAVBAR — modern iOS (kaca beku, ikon polos) ═══════════ */
/* Disamakan dengan situs publik 2026-08-31: nada mode gelap dinaikkan ke
   rgba(28,28,30,.9) (senada bottom bar) dan lingkaran abu di balik ikon
   DIHILANGKAN. Mode terang tetap putih .72 — di publik user sempat mencoba
   abu-abu lalu menolaknya, jadi jangan diabu-abukan lagi tanpa permintaan. */
.view-main .navbar .navbar-bg {
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  transition: background .3s ease, box-shadow .3s ease;
}
body.dark .view-main .navbar .navbar-bg { background: rgba(28,28,30,.9) !important; }
.view-main .navbar .navbar-bg::after { opacity: 0; transition: opacity .3s ease; }
.view-main .navbar.ss-scrolled .navbar-bg::after { opacity: 1; }
.view-main .navbar.ss-scrolled .navbar-bg { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
body.dark .view-main .navbar.ss-scrolled .navbar-bg { box-shadow: 0 4px 16px rgba(0,0,0,.4); }

/* Ikon navbar POLOS + umpan-balik tekan pegas. Ukuran 37px & border-radius
   dipertahankan demi bidang sentuh, bukan demi tampilan — JANGAN kembalikan
   `background` di sini, di :active, maupun di :hover. Warnanya disamakan
   dengan bottom bar (bukan biru tema); x-icon memakai stroke="currentColor",
   jadi `color` saja sudah cukup. */
.view-main .navbar .left a.icon-only,
.view-main .navbar .right a.icon-only {
  width: 37px; height: 37px; min-width: 37px; margin: 0 3px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none;
  color: #000;
  transition: transform .22s cubic-bezier(.2,.8,.3,1.4), opacity .22s ease;
}
body.dark .view-main .navbar .left a.icon-only,
body.dark .view-main .navbar .right a.icon-only { color: rgba(235,235,245,.62); }
.view-main .navbar .left a.icon-only:active,
.view-main .navbar .right a.icon-only:active { transform: scale(.86); opacity: .55; }
.view-main .navbar .left a.icon-only i,
.view-main .navbar .right a.icon-only i { font-size: 21px; }
@media (hover: hover) {
  .view-main .navbar .left a.icon-only:hover,
  .view-main .navbar .right a.icon-only:hover { opacity: .65; transform: translateY(-1px); }
}
/* Sakelar tema: bulan saat terang, matahari saat gelap (dipilih CSS, bukan JS —
   ikonnya kini <svg>, textContent tak bisa lagi ditukar). */
.switch-theme .ss-theme-sun { display: none; }
body.dark .switch-theme .ss-theme-moon { display: none; }
body.dark .switch-theme .ss-theme-sun { display: block; }
@media (prefers-reduced-motion: reduce) {
  .view-main .navbar .left a.icon-only,
  .view-main .navbar .right a.icon-only { transition: opacity .2s ease; }
}

/* Lonceng notifikasi + badge merah jumlah pesan belum dibaca */
/* navbar-inner F7 default overflow:hidden — dibuat visible agar badge yang
   sedikit keluar dari tombol lonceng tidak terpotong (title punya clip sendiri). */
.view-main .navbar .navbar-inner { overflow: visible; }
.view-main .navbar .right a.icon-only.nav-bell { position: relative; overflow: visible; }
.nav-bell .nav-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: #ff3b30; color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: -.2px;
  box-shadow: 0 0 0 2px var(--f7-navbar-bg-color, #fff), 0 1px 3px rgba(255,59,48,.5);
}
body.dark .nav-bell .nav-badge { box-shadow: 0 0 0 2px #121214, 0 1px 3px rgba(255,59,48,.5); }
@media (hover: hover) {
  .view-main .navbar .right a.icon-only.nav-bell:hover { transform: translateY(-1px); }
}

/* Logo navbar center di ruang ANTARA tombol menu (kiri) & ikon notifikasi (kanan),
   bukan terhadap lebar penuh navbar. Pasangan wajib dari `navbar: { iosCenterTitle:
   false }` di ss-f7.js — tanpa itu F7 menimpa posisi lewat inline style `left`.
   F7 memasang kelas .navbar-inner-left-title saat iosCenterTitle mati (judul jadi
   rata kiri), jadi aturan di bawah menimpanya balik jadi center. */
.view-main .navbar .navbar-inner,
.view-main .navbar .navbar-inner-left-title { justify-content: space-between; }
.view-main .navbar .navbar-inner > .left,
.view-main .navbar .navbar-inner > .right { flex: 0 0 auto; }
.view-main .navbar .navbar-inner > .title,
.view-main .navbar .navbar-inner-left-title > .title {
  flex: 1 1 auto; min-width: 0; margin: 0 10px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
/* Layar sempit: logo mengecil proporsional, jangan sampai terpotong/menabrak ikon. */
.view-main .navbar .navbar-inner > .title > a { max-width: 100%; }
.navbar-logo { max-width: 100%; object-fit: contain; }

/* Judul halaman di bawah navbar */
.page-header { display: flex; align-items: center; gap: 4px; padding: 14px 16px 2px; }
.page-header-back {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: -7px; flex-shrink: 0;
  color: var(--f7-theme-color); border-radius: 50%; text-decoration: none;
}
.page-header-back i { font-size: 27px; }
.page-header-back:active { background: rgba(120, 120, 128, .16); }
.page-header-title {
  margin: 0; min-width: 0; font-size: 22px; font-weight: 800;
  letter-spacing: -.4px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-header-sub { font-size: 13px; color: var(--f7-list-item-footer-text-color); padding: 2px 16px 0; }
.page-header-action { margin-left: auto; flex-shrink: 0; }
/* Tombol kembali (.page-back) menempel kiri, bukan kanan */
.page-header-action:has(.page-back) { margin-left: 0; margin-right: auto; }

.section-title a.pull-right { float: right; font-size: 13px; font-weight: 500; }

/* ═══════════ SECTION HEAD — judul seksi + petak ikon berwarna (gaya beranda publik) ═══════════ */
.sec-head { display: flex; align-items: center; gap: 8px; padding: 20px 16px 10px; }
.sec-head .sh-ic { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.sec-head .sh-ic .icon { font-size: 13px; }
.sec-head h2 { font-size: 15px; font-weight: 650; letter-spacing: -.2px; margin: 0; line-height: 1.1; flex: 1; min-width: 0; color: var(--title-color); }
.sec-head .sh-more { font-size: 12.5px; font-weight: 600; color: var(--f7-theme-color); text-decoration: none; flex-shrink: 0; }
.sec-head .sh-count { flex-shrink: 0; margin-left: 2px; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(52,199,89,.16); color: #248a3d; }
body.dark .sec-head .sh-count { color: #30d158; }
.sh-blue   { background: rgba(0,122,255,.14);  color: #007aff; }
.sh-green  { background: rgba(52,199,89,.16);  color: #34c759; }
.sh-orange { background: rgba(255,149,0,.16);  color: #ff9500; }
.sh-red    { background: rgba(255,59,48,.14);  color: #ff3b30; }
.sh-purple { background: rgba(175,82,222,.15); color: #af52de; }
.sh-teal   { background: rgba(48,176,199,.15); color: #30b0c7; }

/* ═══════════ KARTU SAPAAN — dashboard EO ═══════════
   Gradasi TIPIS, pola sama persis dengan kartu pintasan beranda publik
   (.ha-card-* di home.blade.php): tint 14% turun ke 2%, teks tetap gelap.
   Warnanya berganti menurut waktu lewat kelas .ss-hello--pagi|siang|sore|malam
   dari Blade — bukan style inline. --hc = warna dasar jam itu. */
.ss-hello {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 16px 0; padding: 16px 18px; border-radius: 22px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--hc) 14%, transparent),
    color-mix(in srgb, var(--hc) 2%, transparent));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
}
body.dark .ss-hello {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--hc) 22%, transparent), rgba(28, 28, 30, .4));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.ss-hello--pagi  { --hc: #ff9500; }
.ss-hello--siang { --hc: #007aff; }
.ss-hello--sore  { --hc: #ff375f; }
.ss-hello--malam { --hc: #5e5ce6; }

/* Kotak ikon: tint tipis dari warna yang sama, ikon berwarna — seperti .ha-ic. */
.ss-hello__ic {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: color-mix(in srgb, var(--hc) 16%, transparent); color: var(--hc);
}
.ss-hello__txt { min-width: 0; display: flex; flex-direction: column; flex: 1; }

/* Ajakan melengkapi profil — hanya muncul untuk akun yang belum lengkap
   (manajemen & klub). Ditaruh di kartu sapaan karena kartu identitas
   .ss-member dilepas saat keempat dashboard diseragamkan (2026-09-01), dan
   dashboard adalah halaman yang masih boleh dibuka akun yang terkunci. */
.ss-hello__cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 20px;
  background: rgba(255, 149, 0, .16); color: #b25e00;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px; line-height: 1.2;
}
.ss-hello__cta i { font-size: 13px; }
.ss-hello__cta:active { opacity: .7; }
body.dark .ss-hello__cta { background: rgba(255, 159, 10, .22); color: #ffb340; }
.ss-hello__greet { font-size: 12.5px; font-weight: 600; color: var(--f7-list-item-footer-text-color); }
/* 15px, bukan 18px (permintaan user 2026-09-03: nama klub/manajemen terlihat
   terlalu besar di kartu sapaan). Tetap di atas .ss-hello__greet (12.5px)
   supaya susunannya masih terbaca sebagai judul. Kelas ini dipakai KEEMPAT
   dashboard (EO, Manajemen, Operator, Klub) — sengaja, keempatnya memang
   diseragamkan bentuknya sejak 2026-09-01. */
.ss-hello__name {
  font-size: 15px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25;
  color: var(--f7-text-color); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════ KARTU ANGGOTA MANAJEMEN — gaya kartu dompet digital ═══════════ */
.ss-member {
  position: relative; overflow: hidden;
  margin: 14px 16px 0; border-radius: 22px; padding: 15px 17px 13px;
  background: linear-gradient(140deg, #0a84ff 0%, #0055d4 55%, #003a9b 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 26px rgba(0, 85, 212, .35), inset 0 1px 0 rgba(255,255,255,.25);
}
body.dark .ss-member { box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255,255,255,.18); }
/* Kilau kaca dekoratif khas kartu fisik */
.ss-member::before {
  content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%;
  top: -130px; right: -70px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 68%);
}
.ss-member::after {
  content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%;
  bottom: -120px; left: -60px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.1), rgba(255,255,255,0) 66%);
}
.ss-member > * { position: relative; z-index: 1; }
.ss-member-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.ss-member-type { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.72); }
.ss-member-badge {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 9px; font-weight: 800; letter-spacing: .6px;
  background: rgba(255,255,255,.2); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.ss-member-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #5fff9d; box-shadow: 0 0 6px rgba(95,255,157,.9); }
.ss-member-badge.off { background: rgba(0,0,0,.22); color: rgba(255,255,255,.75); }
.ss-member-badge.off::before { background: #ffb1aa; box-shadow: none; }
.ss-member-main { display: flex; align-items: center; gap: 13px; }
.ss-member-logo {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.ss-member-logo img { width: 100%; height: 100%; object-fit: contain; }
.ss-member-logo i { font-size: 23px; color: #fff; }
/* Versi tombol (foto bisa diklik → photo browser). Selector element+class supaya
   menang atas gaya `button` bawaan style.css, yang memberi padding & font sendiri. */
button.ss-member-logo {
  padding: 0; margin: 0; font: inherit; cursor: zoom-in;
  -webkit-appearance: none; appearance: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
button.ss-member-logo:hover { box-shadow: 0 6px 16px rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.45); }
button.ss-member-logo:active { transform: scale(.94); }
.ss-member-id { flex: 1; min-width: 0; }
.ss-member-name { font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-member-loc { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: rgba(255,255,255,.8); margin-top: 3px; min-width: 0; }
.ss-member-loc i { font-size: 12px; flex-shrink: 0; }
.ss-member-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Grup Tarik Klub + Jadwal Otomatis di card Aksi Turnamen:
   desktop terdorong ke kanan, mobile jadi baris penuh paling bawah */
.ss-aksi-kanan { margin-inline-start: auto; }
@media (max-width: 991.98px) {
  .ss-aksi-kanan { margin-inline-start: 0; width: 100%; }
}

/* Tombol onboarding "Lengkapi Profil/Data Klub" di bawah nama manajemen */
.ss-member-lengkapi {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 5px 12px; border-radius: 20px;
  background: rgba(255,255,255,.22); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ss-member-lengkapi i { font-size: 13px; color: #ffd60a; }
.ss-member-lengkapi:active { opacity: .7; }
.ss-member-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 13px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.16);
}
.ss-member-user { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,.92); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-member-since { flex-shrink: 0; font-size: 10px; font-weight: 600; letter-spacing: .3px; color: rgba(255,255,255,.65); text-transform: uppercase; }

/* ═══════════ KARTU STATISTIK gaya iOS (stat-tile publik, mini — 4 kolom) ═══════════ */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 0 16px; margin-top: 14px; }
/* Varian: di desktop semua kartu jadi satu baris ke samping (dipakai dashboard manajemen) */
@media (min-width: 768px) {
  .stat-tiles--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
}
/* Varian: 6 kartu sebaris di desktop (dipakai dashboard EO). Di bawah 1024px
   dibagi rata 3 ke samping x 2 baris, bukan 4+2 seperti bawaan .stat-tiles. */
@media (min-width: 1024px) {
  .stat-tiles--6 { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1023.98px) {
  .stat-tiles--6 { grid-template-columns: repeat(3, 1fr); }
}
.stat-tile {
  display: block; text-align: center; padding: 11px 5px 10px; border-radius: 15px;
  background: var(--f7-list-bg-color, #fff); color: inherit; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .15s ease;
}
.stat-tile:active { transform: scale(.96); }
body.dark .stat-tile { background: #1c1c1e; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.stat-tile .tile-icon {
  width: 32px; height: 32px; border-radius: 10px; margin: 0 auto 7px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px var(--tile-glow, rgba(0, 122, 255, .35)),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}
.stat-tile .tile-icon .icon { color: #fff; font-size: 17px; }
/* Ikon garis (komponen x-icon) di dalam petak gradien — ikut putih. */
.stat-tile .tile-icon > svg { color: #fff; stroke-width: 1.9; }
.tile-blue   { background: linear-gradient(180deg, #4facff, #007aff); --tile-glow: rgba(0, 122, 255, .35); }
.tile-green  { background: linear-gradient(180deg, #5fdd77, #2fb84f); --tile-glow: rgba(52, 199, 89, .35); }
.tile-orange { background: linear-gradient(180deg, #ffc14d, #ff9500); --tile-glow: rgba(255, 149, 0, .35); }
.tile-red    { background: linear-gradient(180deg, #ff7a72, #ff3b30); --tile-glow: rgba(255, 59, 48, .35); }
.tile-purple { background: linear-gradient(180deg, #c08aff, #af52de); --tile-glow: rgba(175, 82, 222, .35); }
.tile-teal   { background: linear-gradient(180deg, #55d0e0, #30b0c7); --tile-glow: rgba(48, 176, 199, .35); }
.tile-pink   { background: linear-gradient(180deg, #ff7ab8, #ff2d92); --tile-glow: rgba(255, 45, 146, .35); }
.stat-tile .num {
  font-size: 17px; font-weight: 800; letter-spacing: -.4px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-tile .lbl { font-size: 9.5px; line-height: 1.2; margin-top: 2px; color: var(--f7-list-item-footer-text-color); }
/* Dashboard EO: label 6 kartu ringkasan disamakan dengan teks catatan kaki
   (.footer-note = 12px) — 9,5px bawaan terlalu kecil di susunan mendatar. */
.stat-tiles--6 .stat-tile .lbl { font-size: 12px; line-height: 1.25; }

/* Dashboard EO di layar lebar: ikon DI SAMPING angka & labelnya (permintaan user
   2026-08-30, dipulihkan 2026-08-31). Markupnya tetap tiga elemen bersaudara —
   ditata pakai grid dua kolom, ikon menempati kolom kiri selebar dua baris. Di
   bawah 1024px susunannya menumpuk & rata tengah seperti kartu role lain.
   Petak ikonnya TETAP bergradien warna seperti dashboard lain — yang dipulihkan
   hanya tata letaknya, bukan tint pucat versi lama. */
@media (min-width: 1024px) {
  .stat-tiles--6 .stat-tile {
    display: grid; grid-template-columns: auto 1fr;
    grid-template-areas: "ic num" "ic lbl";
    align-items: center; column-gap: 10px;
    padding: 12px 10px 12px 12px; text-align: left;
  }
  /* Ikon berdiri sendiri di kolom kiri, jadi diperbesar dari 32px bawaan. */
  .stat-tiles--6 .stat-tile .tile-icon {
    grid-area: ic; margin: 0;
    width: 57px; height: 57px; border-radius: 18px;
  }
  .stat-tiles--6 .stat-tile .tile-icon > svg { width: 30px; height: 30px; }
  .stat-tiles--6 .stat-tile .tile-icon .icon { font-size: 30px; }
  .stat-tiles--6 .stat-tile .num { grid-area: num; align-self: end; }
  .stat-tiles--6 .stat-tile .lbl { grid-area: lbl; align-self: start; margin-top: 1px; }
}
@keyframes tile-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.stat-tiles .stat-tile { animation: tile-float 3.8s ease-in-out infinite; }
.stat-tiles .stat-tile:nth-child(2) { animation-delay: -1.1s; animation-duration: 4.2s; }
.stat-tiles .stat-tile:nth-child(3) { animation-delay: -2.3s; animation-duration: 3.5s; }
.stat-tiles .stat-tile:nth-child(4) { animation-delay: -3.1s; animation-duration: 4.6s; }
.stat-tiles .stat-tile:nth-child(5) { animation-delay: -.7s;  animation-duration: 4s; }
.stat-tiles .stat-tile:nth-child(6) { animation-delay: -1.9s; animation-duration: 4.4s; }
.stat-tiles .stat-tile:nth-child(7) { animation-delay: -2.7s; animation-duration: 3.7s; }
@media (prefers-reduced-motion: reduce) {
  .stat-tiles .stat-tile { animation: none; }
}

/* ═══════════ KARTU TURNAMEN TERBUKA ═══════════ */
.ss-cards { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 16px; }
@media (min-width: 640px)  { .ss-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ss-cards { grid-template-columns: repeat(3, 1fr); } }
.ss-tcard {
  display: flex; flex-direction: column; gap: 8px; border-radius: 17px; padding: 14px 16px;
  background: var(--f7-list-bg-color, #fff); color: inherit; text-decoration: none;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .15s ease;
}
.ss-tcard:active { transform: scale(.97); }
body.dark .ss-tcard { background: #1c1c1e; box-shadow: 0 7px 20px rgba(0, 0, 0, .35); }
/* Varian berwarna: kartu memakai gradien brand turnamen (--g1/--g2 diisi dari
   Tournament::brandGradientCss() — warna yang disetel EO, atau otomatis dari
   nama) supaya seragam dengan kartu turnamen di situs publik. Isi kartu dibalik
   jadi putih agar tetap terbaca di atas warna apa pun. */
.ss-tcard.ss-tcard-brand {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(145deg, var(--g1), var(--g2));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}
body.dark .ss-tcard.ss-tcard-brand {
  background: linear-gradient(145deg, var(--g1), var(--g2));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
/* Bulatan tipis di pojok — ciri kartu turnamen di situs publik */
.ss-tcard.ss-tcard-brand::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.ss-tcard.ss-tcard-brand > * { position: relative; z-index: 1; }
.ss-tcard.ss-tcard-brand .ss-tcard-name { color: var(--tc, #fff); }
.ss-tcard.ss-tcard-brand .ss-tcard-meta { color: rgba(255, 255, 255, .92); }
/* Pil di dalam kartu berwarna: putih tembus pandang, kecuali pil ajakan
   (hijau "Lihat ›") yang jadi putih pekat supaya tetap menonjol */
.ss-tcard.ss-tcard-brand .ss-pill { background: rgba(255, 255, 255, .24); color: #fff; }
.ss-tcard.ss-tcard-brand .ss-pill.green { background: rgba(255, 255, 255, .92); color: #1c1c1e; }
/* Warna turnamennya muda (krem/kuning/hijau neon) → teks putih tak terbaca,
   jadi isi kartu dibalik jadi gelap. Kelas dipasang Blade dari
   Tournament::brandNeedsDarkText(). */
.ss-tcard.ss-tcard-brand.ss-brand-terang,
.ss-tcard.ss-tcard-brand.ss-brand-terang .ss-tcard-name { color: var(--tc, #1c1c1e); }
.ss-tcard.ss-tcard-brand.ss-brand-terang .ss-tcard-meta { color: rgba(28, 28, 30, .78); }
.ss-tcard.ss-tcard-brand.ss-brand-terang::before { background: rgba(0, 0, 0, .05); }
.ss-tcard.ss-tcard-brand.ss-brand-terang .ss-pill { background: rgba(28, 28, 30, .13); color: #1c1c1e; }
.ss-tcard.ss-tcard-brand.ss-brand-terang .ss-pill.green { background: #1c1c1e; color: #fff; }
/* Turnamen membuka pendaftaran: baris geser horizontal (maks 5 kartu). */
.ss-cards-scroll {
  display: flex !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  gap: 12px;
  padding: 4px 16px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ss-cards-scroll::-webkit-scrollbar { display: none; }
.ss-cards-scroll .ss-tcard {
  flex: 0 0 76%;
  max-width: 280px;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .ss-cards-scroll .ss-tcard { flex-basis: 300px; } }
/* Turnamen yang cabang olahraganya cocok dengan klub manajemen → tanda hijau menonjol. */
.ss-tcard.is-match {
  background: rgba(52, 199, 89, .10);
  box-shadow: 0 8px 22px rgba(52, 199, 89, .2), inset 0 0 0 2px rgba(52, 199, 89, .6);
}
body.dark .ss-tcard.is-match {
  background: rgba(48, 209, 88, .14);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(48, 209, 88, .6);
}
/* Badge "Cocok" — hijau pekat berisi, langsung terlihat */
.ss-pill.match {
  background: linear-gradient(180deg, #34c759, #2fb84f); color: #fff;
  letter-spacing: .3px;
  box-shadow: 0 3px 8px rgba(52, 199, 89, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.ss-pill.match i { font-size: 12px; margin-left: -1px; }
.ss-tcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ss-tcard-name { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; color: var(--f7-text-color); }
.ss-tcard-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--f7-list-item-footer-text-color); }
.ss-tcard-meta span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ss-tcard-meta i { font-size: 14px; flex-shrink: 0; }
.ss-tcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 4px; }
.ss-pill {
  flex-shrink: 0; padding: 3px 10px; border-radius: 20px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.ss-pill.blue   { background: rgba(0, 122, 255, .12);  color: var(--f7-theme-color); }
.ss-pill.green  { background: rgba(52, 199, 89, .14);  color: #248a3d; }
.ss-pill.orange { background: rgba(255, 149, 0, .14);  color: #c76b00; }
.ss-pill.gray   { background: rgba(120, 120, 128, .13); color: var(--f7-list-item-footer-text-color); }
body.dark .ss-pill.green  { color: #30d158; }
body.dark .ss-pill.orange { color: #ff9f0a; }
body.dark .ss-pill.gray   { background: rgba(120, 120, 128, .28); }
.ss-tcard .button { text-transform: none; }

/* ═══════════ DAFTAR DALAM KARTU (jadwal, pendaftaran, notifikasi) ═══════════ */
.ss-list-card { margin: 0 16px; border-radius: 17px; overflow: hidden;
  background: var(--f7-list-bg-color, #fff);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04); }
body.dark .ss-list-card { background: #1c1c1e; box-shadow: 0 7px 20px rgba(0, 0, 0, .35); }
.ss-row { display: flex; align-items: center; gap: 12px; padding: 12px 15px; color: inherit; text-decoration: none; }
.ss-row + .ss-row { border-top: 1px solid rgba(120,120,128,.12); }
a.ss-row:active { background: rgba(120,120,128,.1); }
.ss-row-ic {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px;
}
.ss-row-body { flex: 1; min-width: 0; }
.ss-row-t { font-size: 13.5px; font-weight: 650; letter-spacing: -.1px; line-height: 1.3;
  color: var(--f7-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-row-s { font-size: 12px; color: var(--f7-list-item-footer-text-color); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-row-end { flex-shrink: 0; text-align: right; }
.ss-row-time { font-size: 12px; font-weight: 700; color: var(--f7-theme-color); font-variant-numeric: tabular-nums; }
.ss-row-date { font-size: 10.5px; color: var(--f7-list-item-footer-text-color); font-variant-numeric: tabular-nums; }
/* ═══════════ KARTU PERTANDINGAN — scoreboard bergradien (dashboard) ═══════════ */
.ss-mcards { margin: 0 16px; display: grid; gap: 12px; }
@media (min-width: 640px) { .ss-mcards { grid-template-columns: 1fr 1fr; } }
/* Varian: 4 kartu laga sebaris di desktop, sisanya turun (dipakai dashboard EO) */
@media (min-width: 1200px) { .ss-mcards--4 { grid-template-columns: repeat(4, 1fr); } }
.ss-mcard {
  position: relative; overflow: hidden; border-radius: 18px; padding: 13px 15px 15px; color: #fff;
  background: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 55%, #7d2ae8 100%);
  box-shadow: 0 10px 24px rgba(94, 92, 230, .3);
  display: block; text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
a.ss-mcard:active { transform: scale(.97); }
@media (hover: hover) {
  a.ss-mcard:hover { transform: translateY(-2px); filter: brightness(1.06); }
}
.ss-mcard.live {
  background: linear-gradient(135deg, #ff9500, #ff3b30 60%, #d70015);
  box-shadow: 0 10px 24px rgba(255, 59, 48, .3);
}
.ss-mcard.done {
  background: linear-gradient(135deg, #34c759, #30b0c7 60%, #007aff);
  box-shadow: 0 10px 24px rgba(48, 176, 199, .3);
}
/* Varian warna turnamen: kartu memakai gradien "Warna Tampilan" yang disetel EO
   saat membuat/mengubah turnamen (--g1/--g2 dari Tournament::customBrandColors(),
   --tc dari brandTextColor()). Sengaja MENIMPA gradien status .live/.done —
   penanda status tetap ada lewat pil LIVE/SELESAI di pojok kartu. Kartu turnamen
   tanpa warna pilihan tidak memakai kelas ini, jadi warnanya tetap seperti dulu.
   Kelas dipasang Blade; pola --g1/--g2/--tc & .ss-brand-terang sama dengan
   .ss-tcard-brand. (.th-hero sudah dihapus 2026-09-03 — lihat .tn-card.) */
.ss-mcard.ss-mcard-brand,
.ss-mcard.ss-mcard-brand.live,
.ss-mcard.ss-mcard-brand.done {
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  color: var(--tc, #fff);
}
body.dark .ss-mcard.ss-mcard-brand { box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.ss-mcard-brand .ss-mcard-tn { color: var(--tc, rgba(255, 255, 255, .85)); }
.ss-mcard-brand .ss-mcard-badge { color: var(--tc, #fff); }
.ss-mcard-brand .ss-mcard-badge .dot { background: var(--tc, #fff); }
/* Warna turnamennya muda → teks putih tak terbaca, isi kartu dibalik jadi gelap
   (kelas dari Tournament::brandNeedsDarkText(), sama seperti kartu turnamen). */
.ss-mcard.ss-mcard-brand.ss-brand-terang { color: var(--tc, #1c1c1e); }
.ss-mcard-brand.ss-brand-terang .ss-mcard-tn { color: var(--tc, rgba(28, 28, 30, .72)); }
.ss-mcard-brand.ss-brand-terang .ss-mcard-badge { background: rgba(28, 28, 30, .13); color: var(--tc, #1c1c1e); }
.ss-mcard-brand.ss-brand-terang .ss-mcard-badge .dot { background: var(--tc, #1c1c1e); }
.ss-mcard-brand.ss-brand-terang .ss-mcard-logo { background: rgba(255, 255, 255, .55); border-color: rgba(28, 28, 30, .18); }
.ss-mcard-brand.ss-brand-terang::before { background: rgba(0, 0, 0, .05); }
.ss-mcard-brand.ss-brand-terang::after { background: rgba(0, 0, 0, .04); }
/* Ornamen lingkaran cahaya di pojok kartu */
.ss-mcard::before, .ss-mcard::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.13); pointer-events: none;
}
.ss-mcard::before { width: 150px; height: 150px; top: -70px; right: -40px; }
.ss-mcard::after  { width: 110px; height: 110px; bottom: -60px; left: -30px; background: rgba(255,255,255,.08); }
.ss-mcard-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ss-mcard-tn { display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px; color: rgba(255,255,255,.85); }
.ss-mcard-tn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-mcard-tn i { font-size: 12px; flex-shrink: 0; }
.ss-mcard-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,.22);
  font-size: 10px; font-weight: 800; letter-spacing: .6px; font-variant-numeric: tabular-nums; }
.ss-mcard-badge i { font-size: 11px; }
.ss-mcard-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: ss-live-pulse 1.1s ease-in-out infinite; }
@keyframes ss-live-pulse { 50% { opacity: .25; } }
.ss-mcard-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ss-mcard-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.ss-mcard-logo { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.4); font-size: 20px; }
.ss-mcard-logo img { width: 100%; height: 100%; object-fit: cover; }
.ss-mcard-name { font-size: 11.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-mcard-mid { flex-shrink: 0; min-width: 62px; text-align: center; }
.ss-mcard-score { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.ss-mcard-score i { font-style: normal; font-weight: 600; opacity: .6; margin: 0 4px; }
.ss-mcard-vs { font-size: 15px; font-weight: 800; letter-spacing: 2px; opacity: .75; }

.ss-empty { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 16px; text-align: center; color: var(--f7-list-item-footer-text-color); font-size: 13px; }
.ss-empty i { font-size: 34px; opacity: .45; }
.ss-empty svg { opacity: .4; }
.ss-empty a { color: var(--f7-theme-color); font-weight: 600; }

/* Log aktivitas — daftar minimalis (rata, tanpa kartu, titik warna + baris hairline) */
.ss-log { margin: 0 16px; }
.ss-log-row { display: flex; align-items: center; gap: 11px; padding: 11px 2px; }
.ss-log-row + .ss-log-row { border-top: 1px solid rgba(120,120,128,.14); }
.ss-log-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ss-log-body { flex: 1; min-width: 0; }
.ss-log-t { display: block; font-size: 13px; font-weight: 500; letter-spacing: -.1px; line-height: 1.35;
  color: var(--f7-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-log-m { display: block; font-size: 11px; color: var(--f7-list-item-footer-text-color); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-log-date { flex-shrink: 0; font-size: 11px; color: var(--f7-list-item-footer-text-color);
  font-variant-numeric: tabular-nums; }
.ss-log-empty { text-align: center; color: var(--f7-list-item-footer-text-color); font-size: 12.5px; padding: 22px 0 6px; }

.notif-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--f7-theme-color); }
.notif-dot.read { background: rgba(120,120,128,.35); }

.footer-note {
  text-align: center; font-size: 12px; padding: 28px 16px 12px;
  color: var(--f7-list-item-footer-text-color);
}

/* ── Mode gelap: garis tepi kartu agar terpisah dari latar ── */
body.dark .stat-tile,
body.dark .ss-tcard,
body.dark .ss-list-card,
body.dark .ss-hero,
body.dark .card,
body.dark .data-table.card {
  border: 1px solid rgba(255, 255, 255, .13);
}

/* ── Interaksi hover (hanya perangkat ber-kursor; HP tetap efek tekan) ── */
@media (hover: hover) {
  .stat-tile, .ss-tcard, a.card {
    transition: transform .22s cubic-bezier(.2, .8, .3, 1.1), box-shadow .22s ease;
    will-change: transform;
  }
  .stat-tile:hover, .ss-tcard:hover, a.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .13), 0 3px 8px rgba(0, 0, 0, .06);
  }
  .stat-tiles .stat-tile:hover { animation: none; }
  body.dark .stat-tile:hover, body.dark .ss-tcard:hover, body.dark a.card:hover {
    box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
    border-color: rgba(255, 255, 255, .22);
  }
  .stat-tile .tile-icon { transition: transform .25s cubic-bezier(.2, .8, .3, 1.4); }
  .stat-tile:hover .tile-icon { transform: scale(1.12) rotate(-4deg); }
  .list .item-link { transition: background-color .18s ease, transform .18s ease; }
  .list .item-link:hover { background-color: rgba(0, 122, 255, .06); transform: translateX(4px); }
  body.dark .list .item-link:hover { background-color: rgba(10, 132, 255, .12); }
  a.ss-row:hover { background-color: rgba(0, 122, 255, .06); }
  body.dark a.ss-row:hover { background-color: rgba(10, 132, 255, .12); }
  .section-title a.pull-right { transition: transform .15s ease, opacity .15s ease; }
  .section-title a.pull-right:hover { transform: translateX(3px); }
}

/* ═══════════════════════════════════════════════════════════════════
   HALAMAN DETAIL TURNAMEN (manajemen) — kartu identitas + informasi
   ═══════════════════════════════════════════════════════════════════
   Satu kartu tenang (.tn-card) menggantikan empat blok lama: hero gradien,
   dua stat-tile, bilah kuota, dan seksi "Informasi Turnamen" berisi kartu
   fakta berwarna-warni. Digabung 2026-09-03 atas permintaan user — halaman
   terasa jauh lebih sepi. Warnanya netral mengikuti permukaan kartu; aksen
   hanya garis tipis di puncak kartu dan pil status pendaftaran. */
.tn-card {
  position: relative;
  margin: 12px 16px 0; padding: 14px 16px; border-radius: 20px;
  background: var(--f7-list-bg-color, #fff);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
}
body.dark .tn-card { background: #1c1c1e; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 7px 20px rgba(0, 0, 0, .35); }

/* Baris atas kartu (tombol kembali · pil kategori · pil status pendaftaran)
   DIBUANG 2026-09-03 atas permintaan user: kategorinya turun jadi salah satu
   baris fakta, status pendaftaran dilepas. Kelas .tn-bar/.tn-cat/.tn-status
   tak dipakai markup mana pun lagi — dan .tn-back kini MILIK ss-turnamen.css
   sendirian (tombol Kembali bergaya .btn), jadi bentroknya hilang. */

/* Identitas turnamen */
.tn-head { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
/* Sakelar buka/tutup kartu hero. Ikonnya panah atas/bawah sejak 2026-09-03
   (dulu mata); nama kelas .tn-mata dipertahankan supaya CSS & JS tak perlu
   diubah berbarengan. Sejak 2026-09-04 bukan ikon telanjang lagi: pil abu-abu
   netral berlabel "Detail" + panah (permintaan user). */
.tn-mata {
  /* `width: auto` WAJIB: bundel F7 menyetel `button { width: 100% }` global,
     jadi tanpa ini pilnya melar selebar kartu dan menggencet nama turnamen
     (persis yang terjadi 2026-09-04). Pola sama dipakai `button.mn-btn`. */
  flex-shrink: 0; align-self: flex-start; width: auto;
  height: 26px; margin: -1px -4px 0 0; padding: 0 7px 0 10px;
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(120, 120, 128, .13); color: var(--f7-text-color);
  font-family: inherit; font-size: 11.5px; font-weight: 650; line-height: 1;
  transition: background-color .2s ease, transform .2s ease;
}
.tn-mata svg { flex-shrink: 0; }
.tn-mata:active { background: rgba(120, 120, 128, .24); transform: scale(.94); }
body.dark .tn-mata { background: rgba(120, 120, 128, .26); }
body.dark .tn-mata:active { background: rgba(120, 120, 128, .38); }
@media (hover: hover) { .tn-mata:hover { background: rgba(120, 120, 128, .2); } }
/* Terlipat: tersisa logo, nama turnamen, dan nama penyelenggara. */
.tn-card.is-lipat .tn-facts { display: none; }
.tn-card.is-lipat { padding-bottom: 12px; }
.tn-logo {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(120, 120, 128, .1); border: 1px solid rgba(120, 120, 128, .16);
}
.tn-logo img { width: 100%; height: 100%; object-fit: contain; }
.tn-logo svg { color: var(--f7-text-color); }
.tn-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Seukuran nama klub di baris "Daftarkan Klub Anda" (.th-page .ss-row-t
   = 12.5px) — permintaan user 2026-09-03. */
.tn-name { font-size: 12.5px; font-weight: 750; letter-spacing: -.2px; line-height: 1.3; color: var(--f7-text-color); }
.tn-org {
  font-size: 11.5px; color: var(--f7-list-item-footer-text-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Fakta turnamen — satu baris per fakta dengan titik ber-ikon, pola sama
   dengan linimasa Technical Meeting. SENGAJA tanpa garis pemisah: garis
   memanjang membuat kartunya terbaca seperti tabel (catatan user 2026-09-03).
   Di HP satu kolom (enam baris ke bawah); tiga kolom di layar lebar. */
.tn-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 12px; }
.tn-f { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 5px 0; }
/* Ikon garis polos satu warna, sama seperti sidebar — piringan tint
   berwarna dilepas 2026-09-03 atas permintaan user (terbaca ramai).
   Lebar slot tetap 32px supaya kolom teksnya tetap lurus. */
.tn-f-ic {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--f7-text-color);
}
.tn-f-ic svg { width: 19px; height: 19px; }
.tn-f-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Judul = warna teks penuh, huruf biasa (bukan kapital); isinya abu-abu
   dan satu tingkat lebih kecil. Dibalik 2026-09-03 atas permintaan user. */
/* Sejak 2026-09-04 keduanya HURUF BIASA (permintaan user): judul & isi tak lagi
   ditebalkan — pembedanya tinggal warna (judul teks penuh, isi abu-abu) dan
   ukuran. Kartunya jadi jauh lebih tenang. */
.tn-f-l {
  font-size: 12.5px; font-weight: 400; letter-spacing: -.15px; line-height: 1.25;
  color: var(--f7-text-color);
}
.tn-f-v { font-size: 11.5px; font-weight: 400; letter-spacing: -.05px; line-height: 1.3;
  color: var(--f7-list-item-footer-text-color); overflow-wrap: anywhere; }

/* Kuota peserta ikut jadi baris fakta (bilah progres terpisah dilepas
   2026-09-03) — keenam keterangan kini satu bentuk.
   Di HP keenamnya menurun satu kolom; sejak 640px tiga kolom, jadi 3 x 2. */
@media (min-width: 640px) {
  .tn-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
}


/* Daftar info (label di atas, nilai tebal di bawah — boleh multibaris) */
.th-list .ss-row { align-items: flex-start; }
.th-list .ss-row-body { display: flex; flex-direction: column; gap: 1px; }
.th-list .ss-row-t { white-space: normal; }

/* ── Skema minimalis khusus halaman turnamen manajemen (.th-page) ──
   Perkecil judul seksi & baris info agar lebih ringkas.
   Terskop di .th-page supaya TIDAK memengaruhi halaman lain. */
.th-page .sec-head { padding: 15px 16px 7px; gap: 7px; }
/* Ikon judul seksi = ikon garis polos satu warna, sama seperti sidebar
   (permintaan user 2026-09-03) — tanpa kotak tint berwarna.
   !important WAJIB: ss-f7-bridge.css memasang
   `.sec-head .sh-ic { background: …14) !important; color: … !important }`
   untuk seluruh app, dan tanpa penanda yang sama aturan itu menang meski
   selektor ini lebih spesifik — itulah sebabnya kotak abunya masih terlihat. */
.th-page .sec-head .sh-ic {
  width: 20px; height: 20px; border-radius: 0;
  background: none !important;
  color: var(--f7-text-color) !important;
}
.th-page .sec-head .sh-ic svg { width: 18px; height: 18px; }
.th-page .sec-head h2 { font-size: 12.5px; font-weight: 700; }
/* Keadaan kosong ikut warna yang sama; hanya ikon inilah yang tetap diredam
   sedikit, karena ukurannya 30px dan akan mendominasi kartunya. */
.th-page .ss-empty svg { color: var(--f7-text-color); opacity: .45; }
/* Kotak ikon dokumen: dulu petak biru pekat berikon putih. Sejak
   2026-09-03 seluruh ikon halaman ini sewarna ikon sidebar, jadi petaknya
   tinggal alas abu tipis. Sengaja TIDAK menyentuh .th-ava (avatar inisial
   klub) yang warnanya memang penanda tiap klub. */
.th-page .ss-row-ic:not(.th-ava) {
  background: rgba(120, 120, 128, .12);
  color: var(--f7-text-color);
}
.th-page .ss-row { padding: 9px 13px; gap: 10px; }
.th-page .ss-row-t { font-size: 12.5px; }
.th-page .ss-row-s { font-size: 11px; }
.th-page .stat-tile .num { font-size: 15px; }
.th-page .stat-tile .lbl { font-size: 9px; }
/* Tenangkan tampilan: matikan animasi mengambang tile di halaman ini */
.th-page .stat-tiles .stat-tile { animation: none; }

/* Baris klub pada seksi pendaftaran */
.th-team.ok { background: rgba(52, 199, 89, .07); }
body.dark .th-team.ok { background: rgba(48, 209, 88, .1); }
/* Pil status klub — bentuk & takaran disamakan dengan .th-tm-chip ("13 hari
   lagi") di kartu Technical Meeting: tint 14% dari warnanya sendiri, tanpa
   ikon. Permintaan user 2026-09-03. */
.th-team-note {
  position: relative; isolation: isolate; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; padding: 4px 10px; border-radius: 20px;
  font-size: 10.5px; font-weight: 800; letter-spacing: -.1px; line-height: 1.35;
}
.th-team-note svg { flex-shrink: 0; }
.th-team-note::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: .14; z-index: -1;
}
.th-team-note.wait { color: #c76b00; }
.th-team-note.err { color: #d70015; }
.th-team-note.good { color: #248a3d; }
body.dark .th-team-note.wait { color: #ff9f0a; }
body.dark .th-team-note.err { color: #ff6961; }
body.dark .th-team-note.good { color: #30d158; }
.th-btn { height: 28px; padding: 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0; }

/* Di HP tombol aksi (mis. "Lengkapi Persyaratan") pindah ke baris sendiri di
   bawah pil status dan MELEBAR PENUH dari tepi ke tepi kartu — di ujung kanan
   ia menghimpit nama klub (permintaan user 2026-09-03). Hanya baris
   ber-.has-cta; baris yang aksinya cuma pil tetap di kanan. */
@media (max-width: 639px) {
  .th-page .th-team.has-cta { flex-wrap: wrap; }
  .th-page .th-team.has-cta > .ss-row-end {
    flex: 1 1 100%; display: flex; margin: 10px 0 1px; text-align: left;
  }
  /* form pembungkus tombol Daftar ikut melebar supaya tombolnya penuh */
  .th-page .th-team.has-cta > .ss-row-end > * { flex: 1 1 auto; min-width: 0; }
  .th-page .th-team.has-cta > .ss-row-end .th-btn,
  .th-page .th-team.has-cta > .ss-row-end .th-cta { width: 100%; }
}

/* Deskripsi turnamen */
.th-desc {
  margin: 0 16px; padding: 14px 16px; border-radius: 17px; white-space: pre-line;
  font-size: 13.5px; line-height: 1.5; color: var(--f7-text-color);
  background: var(--f7-list-bg-color, #fff);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
}
body.dark .th-desc { background: #1c1c1e; box-shadow: 0 7px 20px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .13); }

/* Catatan informatif */
.th-info {
  display: flex; gap: 9px; align-items: flex-start; margin: 14px 16px 0;
  padding: 12px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.45;
  background: rgba(0, 122, 255, .08); color: var(--f7-text-color);
}
body.dark .th-info { background: rgba(10, 132, 255, .14); }
.th-info i { font-size: 17px; color: var(--f7-theme-color); flex-shrink: 0; margin-top: 1px; }
.th-info svg { color: var(--f7-text-color); flex-shrink: 0; margin-top: 1px; }
.th-info a { color: var(--f7-theme-color); font-weight: 600; }

/* Avatar klub di baris pendaftaran: logo klub kalau ada, kalau tidak
   inisial berwarna. Sebelum 2026-09-03 baris ini SELALU inisial — logonya
   memang tak pernah dipasang, itu sebabnya tak muncul. */
.th-ava { font-size: 14px; font-weight: 800; letter-spacing: -.3px; }
.th-ava.has-img { background: rgba(120, 120, 128, .12); overflow: hidden; }
.th-ava img { width: 100%; height: 100%; object-fit: contain; }
.th-rank { width: 26px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--f7-list-item-footer-text-color); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Grid kartu peserta. (Kartu fakta "Informasi Turnamen" .th-fcard dihapus
   2026-09-03 — faktanya kini menyatu di .tn-card.) */
.th-clubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 16px; }
.th-tm-chip::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: .14; z-index: -1;
}
/* Sama seperti baris fakta di kartu hero (.tn-f-l / .tn-f-v): judul warna
   teks penuh & huruf biasa, isinya abu-abu satu tingkat lebih kecil.
   Disamakan 2026-09-03 atas permintaan user; ikut TIDAK ditebalkan
   2026-09-04 bersama .tn-f-l/.tn-f-v. */
.th-tm-l {
  font-size: 12.5px; font-weight: 400; letter-spacing: -.15px;
  color: var(--f7-text-color); line-height: 1.25;
}

/* ── Technical Meeting sebagai linimasa: titik ber-ikon dihubungkan garis ── */
.th-tm {
  margin: 0 16px; padding: 4px 14px 6px; border-radius: 18px;
  background: var(--f7-list-bg-color, #fff);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
}
body.dark .th-tm { background: #1c1c1e; box-shadow: 0 7px 20px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); }
.th-tm-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; }
/* Garis penghubung antar titik — dari bawah dot sampai dot berikutnya. */
.th-tm-item::after {
  content: ''; position: absolute; left: 15px; top: 45px; bottom: -12px; width: 2px;
  background: rgba(120, 120, 128, .2);
}
.th-tm-item:last-child::after { display: none; }
/* Ikon polos satu warna seperti sidebar (piringan tint dilepas 2026-09-03).
   Lebarnya tetap 32px supaya garis penghubung linimasa tetap di tengahnya. */
.th-tm-dot {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--f7-text-color);
}
.th-tm-dot .icon { font-size: 18px; }
.th-tm-dot svg { width: 19px; height: 19px; }
.th-tm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.th-tm-v { font-size: 11.5px; font-weight: 400; letter-spacing: -.05px; line-height: 1.3;
  color: var(--f7-list-item-footer-text-color); }
.th-tm-sub { font-size: 11px; color: var(--f7-list-item-footer-text-color); opacity: .8; font-variant-numeric: tabular-nums; }
.th-tm-chip {
  position: relative; isolation: isolate; flex-shrink: 0; align-self: center;
  padding: 4px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 800;
  letter-spacing: -.1px; color: var(--c);
}
.th-tm-chip.urgent { color: #d70015; }
.th-tm-chip.off { color: #8e8e93; }
.th-tm-item.done .th-tm-l { color: var(--f7-list-item-footer-text-color); }
body.dark .th-tm-chip.urgent { color: #ff6961; }

/* ── Peserta terdaftar: kartu klub, bukan daftar baris ── */
.th-club {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 12px; border-radius: 16px; text-align: center;
  background: var(--f7-list-bg-color, #fff);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
}
body.dark .th-club { background: #1c1c1e; box-shadow: 0 7px 20px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); }
.th-club-no {
  position: absolute; top: 7px; left: 10px; font-size: 9.5px; font-weight: 800;
  color: var(--f7-list-item-footer-text-color); opacity: .7; font-variant-numeric: tabular-nums;
}
.th-club-ava {
  width: 42px; height: 42px; border-radius: 14px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -.3px;
}
/* Logo klub kerap transparan/kotak — beri alas netral & jangan dipotong. */
.th-club-ava.has-img { background: rgba(120, 120, 128, .12); }
.th-club-ava img { width: 100%; height: 100%; object-fit: contain; }
.th-club-n { font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; color: var(--f7-text-color); }
.th-club-c {
  display: flex; align-items: center; gap: 3px; font-size: 10.5px;
  color: var(--f7-list-item-footer-text-color); line-height: 1.2;
}
.th-club-c .icon { font-size: 11px; }
.th-club-c svg { flex-shrink: 0; color: var(--f7-text-color); }
/* Klub milik manajemen yang sedang login ditandai hijau. */
.th-club.mine { background: rgba(52, 199, 89, .08); box-shadow: inset 0 0 0 1.5px rgba(52, 199, 89, .45); }
body.dark .th-club.mine { background: rgba(48, 209, 88, .12); border-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(48, 209, 88, .5); }

@media (min-width: 700px) {
  .th-clubs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .th-clubs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (hover: hover) and (pointer: fine) {
  .th-club { transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease; }
  .th-club:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .1); }
}

/* ═══════════ REVEAL SAAT SCROLL — section memudar-masuk + naik halus ═══════════ */
.ss-anim-on .ss-reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .3, 1);
  will-change: opacity, transform;
}
.ss-anim-on .ss-reveal.in { opacity: 1; transform: none; }
.ss-cv { content-visibility: auto; contain-intrinsic-size: auto 340px; }
@media (prefers-reduced-motion: reduce) {
  .ss-anim-on .ss-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Badge angka di item sidebar (mis. pesan chat belum dibaca) */
.ss-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ff3b30; color: #fff; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-left: auto; }
.ss-link .ss-badge + .ss-chev { margin-left: 6px; }
/* Chevron ">" — sudah TIDAK dipakai sidebar (disamakan dengan situs publik
   2026-08-31), tapi masih dipakai baris notifikasi di dashboard manajemen &
   klub, jadi aturannya tetap hidup di sini. */
.ss-chev { font-size: 15px; color: rgba(120,120,128,.4); flex-shrink: 0; }
svg.ss-chev { width: 15px; height: 15px; }

/* Kartu turnamen bergradasi versi LAMA (.tour-grid/.tour-card + .tc-*)
   DIHAPUS 2026-09-03. Markupnya sudah lama beralih ke partials/pub-tour-card
   yang digayakan ss-pubcard.css, tapi selektor di sini (.tour-card .tc-*,
   dua kelas) tetap menimpa aturan satu-kelas di berkas itu — ukuran judul,
   lebar pil tanggal, dan latar pil sisa slot jadi tak bisa diubah dari sana.
   Tak ada view yang memakai .tour-grid maupun .tc-catpill lagi. */

/* Tombol simpan susunan pemain saat aturan belum terpenuhi: tampil terkunci
   tapi tetap bisa diklik supaya popup alasan muncul (jadwal-susunan-form). */
.ss-btn-terkunci { cursor: not-allowed; filter: grayscale(.7); }

/* Tabel susunan pemain: radio Tidak Dibawa/Utama/Cadangan/Kapten diperbesar —
   ukuran bawaan 1,15em terlalu kecil untuk jempol di layar HP. Padding sel
   ikut dilebarkan supaya area sentuhnya mendekati anjuran 44px. */
.ss-lineup-table td .form-check-input { width: 26px; height: 26px; margin-top: 0; }
.ss-lineup-table td.text-center { padding: 12px 6px; }
.ss-lineup-table th.text-center { padding-left: 6px; padding-right: 6px; }
.ss-lineup-table .ss-lineup-hit {
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 4px; min-height: 34px; cursor: pointer;
}
.ss-lineup-table .ss-lineup-hit:has(input:disabled) { cursor: default; }

/* Tabel "Pemain Klub — Riwayat & Hasil Tarik" (tahap 1 pemain turnamen):
   centang pemilih pemain diperbesar dengan alasan yang sama seperti tabel
   susunan pemain di atas — ukuran bawaan terlalu kecil untuk jempol. Selnya
   ikut dilebarkan supaya area sentuhnya mendekati anjuran 44px.
   Sel dipilih lewat :has, BUKAN :first-child — table-enhancer.js menyisipkan
   kolom "No" di depan (kolom centang tak terdeteksi karena <th>-nya kosong),
   jadi sel centang bukan lagi sel pertama. */
.ss-squad-table td .form-check-input { width: 26px; height: 26px; margin-top: 0; }
.ss-squad-table td:has(> .squad-check) { padding: 12px 10px; }

/* Kartu "Pertandingan Mendatang" (Jadwal & Hasil): satu baris = satu laga,
   kedua klub ditumpuk dengan logonya, turnamen & status jadi baris keterangan
   di bawahnya. Nama panjang dipotong elipsis, bukan melebarkan tabel —
   kartunya hanya setengah lebar layar. */
.ss-fx-table td { vertical-align: middle; }
.ss-fx-table .ss-fx-when { white-space: nowrap; line-height: 1.25; }
.ss-fx-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ss-fx-side + .ss-fx-side { margin-top: 4px; }
.ss-fx-logo {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  object-fit: cover; background: rgba(120, 120, 128, .12);
}
.ss-fx-logo-kosong {
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(120, 120, 128, .9); font-size: .75rem;
}
.ss-fx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-fx-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; }
.ss-fx-lineup { white-space: nowrap; }
.ss-fx-lineup + .ss-fx-lineup { margin-top: 4px; }

/* Tabel Official Tim (kartu susunan pemain): judul kolom hitam pekat — abu
   bawaan tema terlalu pudar untuk dibaca sambil mengisi. Di mode gelap dibalik
   jadi putih. Layar HP: kendali isian dilebarkan (tabel sudah bisa digeser
   mendatar lewat .table-responsive, jadi melebar tidak merusak tata letak). */
table.ss-official-table thead th { color: #000; opacity: 1; }
body.dark table.ss-official-table thead th { color: #fff; }
@media (max-width: 767.98px) {
  .ss-official-table td input[name*="[name]"]  { min-width: 220px; }
  .ss-official-table td select                 { min-width: 200px; }
  .ss-official-table td input[name*="[phone]"] { min-width: 180px; }
}

/* Tombol yang sengaja TETAP TAMPIL walau sedang tak bisa dipakai (mis. Tambah
   Official saat kuota klub penuh). Bukan [disabled]: tombolnya harus tetap bisa
   diklik supaya popup menjelaskan alasannya — hilang tanpa kabar justru bikin
   pengguna mengira halamannya rusak. Gradasi sengaja TIPIS supaya terbaca
   sebagai kendali yang teredam, bukan tombol utama. */
.btn.ss-btn-teredam {
  background: linear-gradient(135deg, rgba(105, 108, 255, .14), rgba(105, 108, 255, .05));
  border: 1px solid rgba(105, 108, 255, .22);
  color: rgba(105, 108, 255, .85);
  box-shadow: none;
  cursor: pointer;
}
.btn.ss-btn-teredam:hover,
.btn.ss-btn-teredam:focus {
  background: linear-gradient(135deg, rgba(105, 108, 255, .2), rgba(105, 108, 255, .08));
  border-color: rgba(105, 108, 255, .3);
  color: rgba(105, 108, 255, 1);
}
body.dark .btn.ss-btn-teredam {
  background: linear-gradient(135deg, rgba(125, 128, 255, .2), rgba(125, 128, 255, .06));
  border-color: rgba(125, 128, 255, .28);
  color: rgba(185, 187, 255, .92);
}

/* Tabel Kejadian Pertandingan (halaman laga panel EO/Operator). Tabelnya
   nowrap dan table-enhancer.js masih menyisipkan kolom No + memindahkan Aksi,
   jadi di layar HP isinya jauh lebih lebar dari kartunya. Wadah
   .table-responsive menahan lebarnya, dan di bawah 576px kolom teks panjang
   (Pemain & Klub) boleh membungkus supaya sebagian besar laga muat tanpa
   digeser sama sekali. Menit & Aksi tetap nowrap: keduanya pendek dan jadi
   patokan mata saat menyusuri baris. */
@media (max-width: 575.98px) {
  .ss-ev-table th,
  .ss-ev-table td { white-space: normal; }
  .ss-ev-table .ss-ev-min,
  .ss-ev-table .ss-ev-act { white-space: nowrap; }
  .ss-ev-table .ss-ev-player { min-width: 7rem; }
  .ss-ev-table .ss-ev-club { min-width: 5.5rem; }
  .ss-ev-table .ss-ev-type { min-width: 6rem; }
  /* Nomor urut sisipan table-enhancer.js: ~46px yang lebih berguna dipakai
     kolom Klub. Nomornya toh tak dirujuk apa pun di halaman ini. */
  .ss-ev-table .tbl-no { display: none; }
}

/* Anak menu sidebar — dipakai "Semua Edisi" di bawah Trofeo. Menjorok ke kanan
   sejauh ikon + gap induknya (22 + 13 = 35px) supaya labelnya lurus dengan
   label induk, ditambah garis penghubung tipis di kiri. Ikonnya dikecilkan
   sedikit agar hierarkinya terbaca tanpa perlu warna atau latar. */
.ss-link--anak { padding-left: 44px; position: relative; }
.ss-link--anak::before {
  content: ''; position: absolute; left: 32px; top: 0; bottom: 0;
  width: 1px; background: var(--f7-list-item-border-color, rgba(120,120,128,.24));
}
.ss-link--anak .ss-ic { width: 18px; height: 18px; }
.ss-link--anak .ss-ic svg { width: 17px; height: 17px; }
.ss-link--anak .ss-lbl { font-size: 12.5px; }