/* =====================================================
   TEMA WARNA BRAND — diambil dari gradasi jersey & logo "IICF RUN"
   (biru tua -> ungu -> magenta/pink -> oranye/sunset)
   ===================================================== */
:root {
  --brand-blue:    #16215c;
  --brand-indigo:  #4b1a91;
  --brand-magenta: #c81e78;
  --brand-orange:  #f5760a;
  --brand-gradient: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-indigo) 42%, var(--brand-magenta) 72%, var(--brand-orange) 100%);
}

body { background-color: #f4f6f9; }
.card { border-radius: 12px; }

/* Navbar */
.navbar.bg-dark { background: var(--brand-gradient) !important; }
.navbar-brand { letter-spacing: .02em; }

/* Tombol & elemen aksen warna primary mengikuti tema brand */
.btn-primary {
  background-color: var(--brand-indigo);
  border-color: var(--brand-indigo);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--brand-magenta) !important;
  border-color: var(--brand-magenta) !important;
}
.btn-outline-primary {
  color: var(--brand-indigo);
  border-color: var(--brand-indigo);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--brand-indigo);
  border-color: var(--brand-indigo);
}
.bg-primary { background-color: var(--brand-indigo) !important; }
.text-primary { color: var(--brand-indigo) !important; }
.badge.bg-primary { background-color: var(--brand-indigo) !important; }
.link-primary { color: var(--brand-indigo) !important; }
a { color: var(--brand-indigo); }
a:hover { color: var(--brand-magenta); }

.page-link { color: var(--brand-indigo); }
.page-item.active .page-link { background-color: var(--brand-indigo); border-color: var(--brand-indigo); }

.form-control:focus, .form-select:focus {
  border-color: var(--brand-magenta);
  box-shadow: 0 0 0 .25rem rgba(200, 30, 120, .15);
}
.form-check-input:checked { background-color: var(--brand-indigo); border-color: var(--brand-indigo); }

.nav-pills .nav-link.active { background-color: var(--brand-indigo); }
.spinner-border.text-primary { color: var(--brand-indigo) !important; }

/* Logo aplikasi — tinggi tetap, lebar menyesuaikan otomatis (object-fit: contain)
   sehingga mengganti file logo (config APP_LOGO) tidak perlu ubah CSS ini.
   display:block + max-width:100% mencegah logo "meledak" jadi terlalu besar di
   sebagian browser mobile (termasuk Safari iOS) saat gambar asli beresolusi
   tinggi/rasio potret seperti logo IICF RUN (1080x1350px). */
.app-logo { object-fit: contain; display: block; max-width: 100%; }

/* Logo di navbar — diberi latar PUTIH (bukan mengubah warna navbar itu sendiri)
   supaya logo tetap kontras & jelas di atas gradasi navbar yang gelap/berwarna.
   Ukuran dibuat BERTINGKAT (semakin besar semakin kecil layarnya) karena di
   layar sempit logo jadi satu-satunya elemen visual yang terlihat sebelum
   menu hamburger dibuka, jadi perlu terlihat jelas & tidak mungil. */
.app-logo--nav {
  height: 32px;
  width: auto;
  max-height: 32px;
  background: #fff;
  padding: 3px 8px;
  border-radius: 7px;
}
@media (max-width: 991.98px) {
  /* Mode hamburger aktif (tablet & HP, <992px) */
  .app-logo--nav { height: 46px; max-height: 46px; padding: 5px 10px; border-radius: 9px; }
}
@media (max-width: 575.98px) {
  /* HP layar sempit — dibuat lebih besar lagi supaya benar-benar jelas */
  .app-logo--nav { height: 52px; max-height: 52px; padding: 6px 11px; }
}
.navbar-brand { padding-top: 0; padding-bottom: 0; }

/* Logo di halaman login — dibatasi dengan max-width (persentase lebar kartu
   login) SEBAGAI TAMBAHAN dari height, bukan cuma height sendirian. Ini
   pengaman utama terhadap bug logo tampak kebesaran di Safari iPhone: kalau
   CSS height sempat belum "kena" saat render pertama (mis. kartu login masih
   dalam proses reflow saat orientasi/viewport bar Safari berubah), max-width
   tetap mengunci logo supaya tidak pernah melebihi porsi wajar dari kartu. */
.app-logo--login {
  height: 64px;
  max-height: 64px;
  width: auto;
  max-width: 55%;
  margin: 0 auto .5rem;
}
@media (min-width: 400px) {
  .app-logo--login { height: 80px; max-height: 80px; }
}

/* Latar halaman login mengikuti gradasi brand yang sama dengan navbar.
   100dvh (dynamic viewport height) dipakai sebagai pelengkap 100vh — Safari
   iOS mengubah-ubah tinggi viewport saat address bar muncul/hilang, dan pada
   versi lama 100vh dihitung dari tinggi viewport TERBESAR (browser bar
   tersembunyi), sehingga konten termasuk logo bisa terlihat "meluap"/salah
   posisi sesaat sebelum discroll. 100dvh mengikuti tinggi viewport yang
   SEDANG terlihat, jadi tata letak (termasuk ukuran relatif logo di dalamnya)
   selalu stabil. Baris 100vh tetap dipertahankan sebagai fallback untuk
   browser yang belum mendukung satuan dvh. */
.login-bg { background: var(--brand-gradient); min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: 1.5rem 0; }
.login-card { max-width: 400px; margin: auto; border: none; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }

/* ============ Tabel responsif (versi 'table') ============ */
.table thead th {
  font-weight: 600;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.dash-stat-card { transition: transform .15s ease, box-shadow .15s ease; cursor: pointer; }
.dash-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08) !important; }
#searchInput { font-size: 1.1rem; }

/* Kartu detail peserta di pencarian panitia */
.detail-item { padding: 6px 0; }
.detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: #8a8f98; display: block; }
.detail-value { font-size: 14px; font-weight: 500; }
.peserta-card { border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.peserta-card__head { background: #f8f9fa; padding: 14px 18px; border-bottom: 1px solid #e5e7eb; }
.peserta-card__body { padding: 6px 18px 14px; }

/* Kartu hasil pencarian (panitia/cari_peserta.php) — layout dasar (desktop/tablet):
   info di kiri, status/aksi di kanan, sejajar berdampingan. */
.peserta-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.peserta-card__info { min-width: 0; flex: 1 1 240px; }
.peserta-card__status { text-align: right; flex-shrink: 0; }

@media (max-width: 575.98px) {
  /* Di layar HP: status/aksi ditumpuk penuh DI BAWAH info (bukan di kanan
     yang sempit), rata kiri, dengan tombol selebar penuh supaya mudah
     disentuh — sebelumnya tombol kecil rata-kanan sering terlihat "kepencet"
     dan terpisah dari konteksnya di layar sempit. */
  .peserta-card__head { padding: 12px 14px; }
  .peserta-card__body { padding: 4px 14px 12px; }
  .peserta-card__top { flex-direction: column; align-items: stretch; gap: 6px; }
  /* PENTING: reset flex-basis di sini. ".peserta-card__info { flex: 1 1 240px }"
     di atas dimaksudkan sebagai LEBAR minimum 240px untuk layout berdampingan
     (desktop/tablet, flex-direction: row). Begitu flex-direction berubah jadi
     "column" di mobile (baris di atas), sumbu utama flex berubah jadi VERTIKAL —
     sehingga "240px" yang sama tanpa sadar diartikan sebagai TINGGI minimum,
     memaksa kartu info setinggi 240px walau isi aslinya jauh lebih pendek, dan
     menciptakan ruang kosong besar sebelum blok status. "flex: 1 1 auto" di sini
     mengembalikan tinggi ke ukuran alami berdasar konten (bukan angka tetap). */
  .peserta-card__info { flex: 1 1 auto; }
  .peserta-card__status {
    text-align: left;
    width: 100%;
    padding-top: 6px;
    border-top: 1px dashed #dfe3e8;
  }
  .peserta-card__status .btn { width: 100%; }
  .peserta-card__status .mt-1 { margin-top: 6px !important; }
  .peserta-card__info strong.fs-5 { font-size: 1.05rem !important; }
}

/* Foto peserta saat pengambilan — thumbnail kecil yang bisa diklik untuk
   memperbesar, terlihat oleh panitia siapapun & superadmin (tidak dibatasi
   seperti bukti pembayaran). */
.foto-pengambilan-wrap { cursor: pointer; display: inline-block; }
.foto-pengambilan-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; }
@media (max-width: 575.98px) {
  .foto-pengambilan-wrap { width: 100%; }
  .foto-pengambilan-thumb { width: 100%; height: 140px; }
}

/* Preview bukti pembayaran (superadmin) */
.bukti-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; cursor: pointer; flex-shrink: 0; }
.bukti-preview-large { max-width: 100%; max-height: 75vh; border-radius: 10px; }

/* =====================================================
   Data Peserta — Tampilan KARTU (grid responsif)
   auto-fill/minmax menyesuaikan jumlah kolom otomatis sesuai lebar layar;
   media query di bawah jadi pengaman ekstra untuk layar HP yang sangat sempit.
   ===================================================== */
.peserta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
@media (max-width: 420px) {
  .peserta-grid { grid-template-columns: 1fr; gap: 12px; }
}

.peserta-grid-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0; /* cegah overflow konten panjang (nama/no telepon) di grid item */
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.peserta-grid-card:hover, .peserta-grid-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(75, 26, 145, .14);
  border-color: var(--brand-indigo);
}
.peserta-grid-card__head { display: flex; justify-content: space-between; align-items: center; }
.peserta-grid-card__nama { font-weight: 700; font-size: 1.02rem; word-break: break-word; }
.peserta-grid-card__meta { font-size: .78rem; color: #6c757d; }
.peserta-grid-card__rows { font-size: .85rem; display: flex; flex-direction: column; gap: 5px; color: #343a40; }
.peserta-grid-card__rows > div { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.peserta-grid-card__rows i { width: 16px; text-align: center; flex-shrink: 0; }
.peserta-grid-card__bukti { display: flex; align-items: center; gap: 8px; cursor: pointer; padding-top: 4px; border-top: 1px dashed #eee; margin-top: 2px; }
.peserta-grid-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #f0f1f3;
}
.peserta-grid-card__actions .btn { flex: 1 1 auto; min-width: 44px; min-height: 38px; } /* target sentuh nyaman di HP */
.view-switch .btn { min-width: 44px; }

/* =====================================================
   Data Peserta — Tampilan TABEL (responsif)
   Desktop (>=1200px): tabel penuh apa adanya.
   Tablet (768–1199px): scroll horizontal + kolom pertama sticky agar konteks
     No. BIB tetap terlihat saat geser ke kanan.
   Mobile (<768px): tiap baris "ditumpuk" jadi mirip kartu, tiap kolom diberi
     label otomatis dari atribut data-label (tanpa perlu scroll horizontal).
   ===================================================== */
.table-stack-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-stack tbody tr { cursor: pointer; transition: background-color .1s ease; }
.table-stack tbody tr:hover { background-color: #f4f0fb; } /* nuansa ungu brand, lembut */
.table-stack tbody tr:hover td { background-color: #f4f0fb; } /* termasuk kolom sticky, biar konsisten saat discroll */

@media (min-width: 768px) {
  .table-stack thead th:first-child,
  .table-stack tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
  }
  .table-stack thead th:first-child { background: #f8f9fa; }
}

@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr {
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 12px;
    background: #fff;
    transition: border-color .1s ease, background-color .1s ease;
  }
  .table-stack tr:hover, .table-stack tr:active {
    border-color: var(--brand-indigo);
    background-color: #f4f0fb;
  }
  .table-stack tr:last-child { margin-bottom: 0; }
  .table-stack td {
    text-align: right;
    padding: 7px 4px 7px 46%;
    position: relative;
    border: none !important;
    min-height: 30px;
  }
  .table-stack td::before {
    content: attr(data-label);
    position: absolute;
    left: 4px;
    width: 42%;
    text-align: left;
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #8a8f98;
  }
  /* Kolom Aksi: full width, tombol sejajar kiri, tanpa label (sudah jelas dari ikon) */
  .table-stack td[data-label="Aksi"] { text-align: left; padding-left: 4px; padding-top: 10px; }
  .table-stack td[data-label="Aksi"]::before { display: none; }
  .table-stack td[data-label="Aksi"] .btn { min-width: 42px; min-height: 38px; margin: 2px 4px 2px 0; }
  .table-stack td[data-label="Bukti Bayar"] .bukti-thumb-wrap { justify-content: flex-end; }
}