/* ============================================================================
   Participant V2 — Komponen & override Bootstrap 5 (memakai tokens.css)
   Semua styling terpusat di sini; TIDAK ada <style> inline di Blade.
   ============================================================================ */

/* ---- Dasar ---------------------------------------------------------------- */
body.v2-body {
  font-family: var(--v2-font);
  background: var(--v2-background);
  color: var(--v2-foreground);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--v2-topbar-h);
}
body.v2-body.has-bottom-nav {
  padding-bottom: calc(var(--v2-bottomnav-h) + env(safe-area-inset-bottom, 0px));
}

.v2-container {
  max-width: var(--v2-container-max);
  margin-inline: auto;
  padding-inline: 16px;
  width: 100%;
}

/* ---- Topbar --------------------------------------------------------------- */
.v2-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--v2-topbar-h);
  background: color-mix(in srgb, var(--v2-card) 88%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--v2-border);
  z-index: 1030;
}
.v2-topbar__inner {
  max-width: var(--v2-container-max);
  margin-inline: auto;
  height: 100%;
  padding-inline: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.v2-topbar__brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--v2-foreground);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v2-topbar__brand-dot {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--v2-primary);
  display: inline-block;
}

/* ---- Bottom navigation ---------------------------------------------------- */
.v2-bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--v2-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--v2-card) 92%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid var(--v2-border);
  z-index: 1030;
}
.v2-bottomnav__inner {
  max-width: var(--v2-container-max);
  margin-inline: auto;
  height: var(--v2-bottomnav-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.v2-bottomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--v2-muted-foreground);
  text-decoration: none;
  transition: color 0.15s ease;
}
.v2-bottomnav__item .v2-bottomnav__icon { font-size: 20px; line-height: 1; }
.v2-bottomnav__item.is-active { color: var(--v2-primary); }
.v2-bottomnav__item:active { opacity: 0.7; }

/* ---- Card ala Shadcn ------------------------------------------------------ */
.v2-card {
  background: var(--v2-card);
  color: var(--v2-card-foreground);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  box-shadow: var(--v2-shadow-sm);
}
.v2-card__body { padding: 16px; }
.v2-card__title { font-weight: 650; font-size: 0.95rem; margin: 0; }
.v2-card__desc { color: var(--v2-muted-foreground); font-size: 0.85rem; margin: 0; }

/* Media/banner gambar di atas kartu (sudut atas mengikuti radius kartu) */
.v2-card__media {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-top-left-radius: var(--v2-radius);
  border-top-right-radius: var(--v2-radius);
  background: var(--v2-muted);
}
.v2-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: var(--v2-primary);
  background: linear-gradient(135deg, var(--v2-primary-soft), var(--v2-muted));
}

/* ============================================================================
   BUTTON LIBRARY (ala Shadcn, di atas Bootstrap 5)
   ----------------------------------------------------------------------------
   Dasar:   <button class="btn v2-btn v2-btn--{warna}">
   Varian:  solid  → v2-btn--{warna}
            soft   → v2-btn--soft-{warna}
            outline→ v2-btn--outline-{warna}
            ghost  → v2-btn--ghost-{warna}
   Warna:   primary secondary success warning danger info dark light
   Ukuran:  v2-btn--sm | v2-btn--lg | v2-btn--icon
   Bentuk:  v2-btn--pill | v2-btn--block (full width)
   Contoh:  <button class="btn v2-btn v2-btn--soft-success v2-btn--sm">Simpan</button>
   ============================================================================ */

/* Dasar.
   Nilai default variabel dibuat 0-spesifisitas via :where() supaya modifier warna
   (mis. .v2-btn--primary, 1 class) SELALU menang. Properti layout tetap di
   .btn.v2-btn (2 class) agar mengalahkan .btn bawaan Bootstrap. */
:where(.v2-btn) {
  --v2-btn-bg: transparent;
  --v2-btn-fg: var(--v2-foreground);
  --v2-btn-border: transparent;
}
.btn.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: var(--v2-radius-sm);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.6rem 1rem;
  background: var(--v2-btn-bg);
  color: var(--v2-btn-fg);
  border: 1px solid var(--v2-btn-border);
  transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn.v2-btn:hover { color: var(--v2-btn-fg); }
.btn.v2-btn:active { transform: translateY(1px); }
.btn.v2-btn:disabled,
.btn.v2-btn.disabled { opacity: 0.55; pointer-events: none; }

/* ---- SOLID -------------------------------------------------------------- */
/* Setiap warna men-set variabel; hover digelapkan seragam via filter. */
.v2-btn--primary   { --v2-btn-bg: var(--v2-primary);     --v2-btn-fg: var(--v2-primary-foreground); }
.v2-btn--secondary { --v2-btn-bg: var(--v2-secondary);   --v2-btn-fg: #fff; }
.v2-btn--success   { --v2-btn-bg: var(--v2-success);     --v2-btn-fg: #fff; }
.v2-btn--warning   { --v2-btn-bg: var(--v2-warning);     --v2-btn-fg: #fff; }
.v2-btn--danger    { --v2-btn-bg: var(--v2-destructive); --v2-btn-fg: #fff; }
.v2-btn--info      { --v2-btn-bg: var(--v2-info);        --v2-btn-fg: #fff; }
.v2-btn--dark      { --v2-btn-bg: var(--v2-dark);        --v2-btn-fg: var(--v2-background); }
.v2-btn--light     { --v2-btn-bg: var(--v2-muted);       --v2-btn-fg: var(--v2-foreground); --v2-btn-border: var(--v2-border); }

.v2-btn--primary:hover, .v2-btn--secondary:hover, .v2-btn--success:hover,
.v2-btn--warning:hover, .v2-btn--danger:hover, .v2-btn--info:hover,
.v2-btn--dark:hover { filter: brightness(0.92); }
.v2-btn--light:hover { background: color-mix(in srgb, var(--v2-muted) 82%, #000); }

/* ---- SOFT (tinted) ------------------------------------------------------ */
.v2-btn--soft-primary   { --v2-btn-bg: var(--v2-primary-soft);     --v2-btn-fg: var(--v2-primary); }
.v2-btn--soft-secondary { --v2-btn-bg: var(--v2-secondary-soft);   --v2-btn-fg: var(--v2-secondary); }
.v2-btn--soft-success   { --v2-btn-bg: var(--v2-success-soft);     --v2-btn-fg: var(--v2-success); }
.v2-btn--soft-warning   { --v2-btn-bg: var(--v2-warning-soft);     --v2-btn-fg: var(--v2-warning); }
.v2-btn--soft-danger    { --v2-btn-bg: var(--v2-destructive-soft); --v2-btn-fg: var(--v2-destructive); }
.v2-btn--soft-info      { --v2-btn-bg: var(--v2-info-soft);        --v2-btn-fg: var(--v2-info); }
.v2-btn--soft-dark      { --v2-btn-bg: var(--v2-dark-soft);        --v2-btn-fg: var(--v2-foreground); }

.v2-btn--soft-primary:hover   { --v2-btn-bg: color-mix(in srgb, var(--v2-primary) 16%, var(--v2-primary-soft)); }
.v2-btn--soft-secondary:hover { --v2-btn-bg: color-mix(in srgb, var(--v2-secondary) 16%, var(--v2-secondary-soft)); }
.v2-btn--soft-success:hover   { --v2-btn-bg: color-mix(in srgb, var(--v2-success) 16%, var(--v2-success-soft)); }
.v2-btn--soft-warning:hover   { --v2-btn-bg: color-mix(in srgb, var(--v2-warning) 16%, var(--v2-warning-soft)); }
.v2-btn--soft-danger:hover    { --v2-btn-bg: color-mix(in srgb, var(--v2-destructive) 16%, var(--v2-destructive-soft)); }
.v2-btn--soft-info:hover      { --v2-btn-bg: color-mix(in srgb, var(--v2-info) 16%, var(--v2-info-soft)); }
.v2-btn--soft-dark:hover      { --v2-btn-bg: color-mix(in srgb, var(--v2-foreground) 12%, var(--v2-dark-soft)); }

/* ---- OUTLINE ------------------------------------------------------------ */
.v2-btn--outline-primary   { --v2-btn-fg: var(--v2-primary);     --v2-btn-border: color-mix(in srgb, var(--v2-primary) 45%, var(--v2-border)); }
.v2-btn--outline-secondary { --v2-btn-fg: var(--v2-secondary);   --v2-btn-border: color-mix(in srgb, var(--v2-secondary) 45%, var(--v2-border)); }
.v2-btn--outline-success   { --v2-btn-fg: var(--v2-success);     --v2-btn-border: color-mix(in srgb, var(--v2-success) 45%, var(--v2-border)); }
.v2-btn--outline-warning   { --v2-btn-fg: var(--v2-warning);     --v2-btn-border: color-mix(in srgb, var(--v2-warning) 45%, var(--v2-border)); }
.v2-btn--outline-danger    { --v2-btn-fg: var(--v2-destructive); --v2-btn-border: color-mix(in srgb, var(--v2-destructive) 45%, var(--v2-border)); }
.v2-btn--outline-info      { --v2-btn-fg: var(--v2-info);        --v2-btn-border: color-mix(in srgb, var(--v2-info) 45%, var(--v2-border)); }
.v2-btn--outline-dark      { --v2-btn-fg: var(--v2-foreground);  --v2-btn-border: var(--v2-foreground); }

.v2-btn--outline-primary:hover   { --v2-btn-bg: var(--v2-primary-soft); }
.v2-btn--outline-secondary:hover { --v2-btn-bg: var(--v2-secondary-soft); }
.v2-btn--outline-success:hover   { --v2-btn-bg: var(--v2-success-soft); }
.v2-btn--outline-warning:hover   { --v2-btn-bg: var(--v2-warning-soft); }
.v2-btn--outline-danger:hover    { --v2-btn-bg: var(--v2-destructive-soft); }
.v2-btn--outline-info:hover      { --v2-btn-bg: var(--v2-info-soft); }
.v2-btn--outline-dark:hover      { --v2-btn-bg: var(--v2-muted); }

/* ---- GHOST (tanpa border/bg, isi saat hover) ---------------------------- */
.v2-btn--ghost-primary   { --v2-btn-fg: var(--v2-primary); }
.v2-btn--ghost-secondary { --v2-btn-fg: var(--v2-secondary); }
.v2-btn--ghost-success   { --v2-btn-fg: var(--v2-success); }
.v2-btn--ghost-warning   { --v2-btn-fg: var(--v2-warning); }
.v2-btn--ghost-danger    { --v2-btn-fg: var(--v2-destructive); }
.v2-btn--ghost-info      { --v2-btn-fg: var(--v2-info); }
.v2-btn--ghost-dark      { --v2-btn-fg: var(--v2-foreground); }

.v2-btn--ghost-primary:hover   { --v2-btn-bg: var(--v2-primary-soft); }
.v2-btn--ghost-secondary:hover { --v2-btn-bg: var(--v2-secondary-soft); }
.v2-btn--ghost-success:hover   { --v2-btn-bg: var(--v2-success-soft); }
.v2-btn--ghost-warning:hover   { --v2-btn-bg: var(--v2-warning-soft); }
.v2-btn--ghost-danger:hover    { --v2-btn-bg: var(--v2-destructive-soft); }
.v2-btn--ghost-info:hover      { --v2-btn-bg: var(--v2-info-soft); }
.v2-btn--ghost-dark:hover      { --v2-btn-bg: var(--v2-muted); }

/* ---- Alias lama (kompatibilitas) ---------------------------------------- */
.v2-btn--outline { --v2-btn-fg: var(--v2-foreground); --v2-btn-border: var(--v2-border); }
.v2-btn--outline:hover { --v2-btn-bg: var(--v2-muted); }
.v2-btn--ghost { --v2-btn-fg: var(--v2-foreground); }
.v2-btn--ghost:hover { --v2-btn-bg: var(--v2-muted); }

/* ---- Ukuran & bentuk ---------------------------------------------------- */
.v2-btn--sm  { padding: 0.4rem 0.7rem;  font-size: 0.82rem; border-radius: var(--v2-radius-sm); }
.v2-btn--lg  { padding: 0.8rem 1.25rem; font-size: 1.02rem; border-radius: var(--v2-radius); }
.v2-btn--icon { padding: 0.55rem; aspect-ratio: 1 / 1; }
.v2-btn--icon.v2-btn--sm { padding: 0.4rem; }
.v2-btn--pill  { border-radius: var(--v2-radius-pill); }
.v2-btn--block { width: 100%; }

/* Fokus aksesibel */
.v2-btn:focus-visible,
.v2-input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--v2-ring);
  outline-offset: 2px;
}

/* ---- Inputs --------------------------------------------------------------- */
.v2-input {
  width: 100%;
  background: var(--v2-card);
  border: 1px solid var(--v2-input);
  border-radius: var(--v2-radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  color: var(--v2-foreground);
}
.v2-input::placeholder { color: var(--v2-muted-foreground); }
.v2-input:focus { border-color: var(--v2-ring); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-ring) 12%, transparent); }
.v2-label { font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; display: block; }
.v2-input-group { position: relative; }
.v2-input-group .v2-input-prefix {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--v2-muted-foreground); font-size: 0.95rem; pointer-events: none;
}
.v2-input-group .v2-input { padding-left: 44px; }

/* ---- Chip / badge --------------------------------------------------------- */
.v2-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--v2-radius-pill);
  font-size: 0.75rem; font-weight: 600;
  background: var(--v2-muted); color: var(--v2-muted-foreground);
}
.v2-chip--primary { background: var(--v2-primary-soft); color: var(--v2-primary); }
.v2-chip--success { background: var(--v2-success-soft); color: var(--v2-success); }
.v2-chip--warning { background: var(--v2-warning-soft); color: var(--v2-warning); }
.v2-chip--danger  { background: var(--v2-destructive-soft); color: var(--v2-destructive); }

/* ---- Quick actions (Beranda) --------------------------------------------- */
.v2-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.v2-quick-action {
  background: var(--v2-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  padding: 14px 6px;
  text-align: center;
  text-decoration: none;
  color: var(--v2-foreground);
  box-shadow: var(--v2-shadow-sm);
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.v2-quick-action:active { transform: translateY(1px); }
.v2-quick-action__icon {
  width: 40px; height: 40px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--v2-radius-sm);
  background: var(--v2-primary-soft); color: var(--v2-primary);
  font-size: 20px;
}
.v2-quick-action__label { font-size: 0.72rem; font-weight: 600; }

/* ---- Section heading ------------------------------------------------------ */
.v2-section-title {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--v2-muted-foreground);
  margin: 4px 2px 10px;
}

/* Section header dengan subtitle (judul + deskripsi). */
.v2-section-head { margin: 24px 2px 12px; }
.v2-section-head .v2-section-title { margin: 0; }
.v2-section-head__title {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--v2-foreground); margin: 0;
}
.v2-section-subtitle {
  color: var(--v2-muted-foreground); font-size: 0.85rem;
  line-height: 1.45; margin: 3px 0 0;
}

/* ---- Skeleton loading (seksi Beranda via AJAX) ---------------------------- */
.v2-skel {
  position: relative;
  overflow: hidden;
  background: var(--v2-muted);
  border-radius: var(--v2-radius-sm);
}
.v2-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 55%, transparent), transparent);
  animation: v2-shimmer 1.3s infinite;
}
:root[data-theme="dark"] .v2-skel::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 12%, transparent), transparent);
}
.v2-skel--title { height: 22px; width: 190px; margin: 24px 2px 12px; }
.v2-skel--card { height: 240px; border-radius: var(--v2-radius); }
@keyframes v2-shimmer { 100% { transform: translateX(100%); } }

/* ---- Utilities ------------------------------------------------------------ */
.v2-stack > * + * { margin-top: 12px; }
/* Kartu berdaftar yang BOLEH jadi grid di layar lebar (mis. daftar event).
   Mobile: sama seperti .v2-stack (satu kolom). Lihat breakpoint 768px untuk versi grid. */
.v2-card-grid > * + * { margin-top: 12px; }
.v2-mt-lg { margin-top: 24px; }
.v2-text-muted { color: var(--v2-muted-foreground); }
.v2-empty {
  text-align: center; color: var(--v2-muted-foreground);
  padding: 28px 12px; font-size: 0.9rem;
}

/* ---- Validasi soal wajib dijawab (halaman kerjakan tes) ------------------- */
.v2-question {
  /* Ruang agar scrollIntoView() tidak menaruh soal di belakang topbar +
     kartu progress sticky saat auto-scroll ke soal yang belum dijawab. */
  scroll-margin-top: calc(var(--v2-topbar-h) + 110px);
  padding: 10px;
  margin-inline: -10px;
  border-radius: var(--v2-radius-sm);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.v2-question--missing {
  box-shadow: 0 0 0 2px var(--v2-destructive);
  background: var(--v2-destructive-soft);
}

/* ============================================================================
   RESPONSIVE — desktop/laptop lebih lebar
   ----------------------------------------------------------------------------
   Container melebar via variabel --v2-container-max; karena topbar, konten &
   bottom-nav/timer semuanya memakai variabel ini, semua melebar konsisten.
   Di-scope ke .v2-body.v2-wide — dipakai layout app (Beranda/hasil, dkk.) DAN
   layout test (pengerjaan tes: passage/soal butuh ruang baca lebih lega di
   desktop). Halaman auth (login/daftar) TIDAK pakai class ini → tetap sempit
   & terpusat (cocok untuk form).
   ============================================================================ */
@media (min-width: 768px) {
  .v2-body.v2-wide { --v2-container-max: 720px; }

  /* Grid kartu OPT-IN (mis. daftar event) — pakai .v2-card-grid, BUKAN
     .v2-stack. .v2-stack tetap SELALU satu kolom di mana pun (termasuk
     daftar pilihan jawaban di halaman soal) — jangan gabungkan lagi. */
  .v2-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    align-items: start;
  }
  .v2-card-grid > * + * { margin-top: 0; }
}

@media (min-width: 992px) {
  .v2-body.v2-wide { --v2-container-max: 900px; }
}

@media (min-width: 1200px) {
  .v2-body.v2-wide { --v2-container-max: 1040px; }
}

#phone::-webkit-outer-spin-button,
#phone::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}