/* ============================================================
   Form controls bersama: checkbox, radio, dan switch.
   Dipakai di panel persetujuan (js/consent.js), pages/cek-status.html,
   admin/lomba.html, dan admin/pendaftaran.html.

   Palet: navy #0a1628, amber #fbbf24, slate (Tailwind). Tanpa warna baru.
   Kelas: .fc-check  .fc-row  .fc-pill  .fc-switch
   ============================================================ */

/* ── Checkbox dan radio ───────────────────────────────────── */
.fc-check {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  vertical-align: middle;
}
.fc-check[type="radio"] { border-radius: 9999px; }

.fc-check:hover:not(:disabled) { border-color: #94a3b8; }

.fc-check:checked {
  background-color: #0a1628;
  border-color: #0a1628;
}
.fc-check[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5l2.8 2.8L11 4.5'/%3E%3C/svg%3E");
}
.fc-check[type="radio"]:checked {
  background-image: radial-gradient(circle at center, #fff 0, #fff 3px, transparent 3.5px);
  background-size: 100% 100%;
}

.fc-check:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

.fc-check:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.fc-check[aria-invalid="true"] { border-color: #dc2626; }
.fc-check[aria-invalid="true"]:checked { background-color: #0a1628; border-color: #dc2626; }

/* ── Baris label ──────────────────────────────────────────── */
.fc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
  line-height: 1.625;
  color: #334155;
  cursor: pointer;
}
.fc-row--top { align-items: flex-start; }
.fc-row--top > .fc-check { margin-top: 1px; }
.fc-row:has(.fc-check:disabled) { cursor: not-allowed; color: #64748b; }

/* ── Pilihan berdampingan (usia) ──────────────────────────── */
.fc-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1.625;
  color: #334155;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
}
.fc-pill:has(.fc-check:checked) {
  border-color: #0a1628;
  background-color: #f8fafc;
}
.fc-pill:has(.fc-check:disabled) { cursor: not-allowed; opacity: .6; }
.fc-pill:has(.fc-check[aria-invalid="true"]) { border-color: #dc2626; }

/* ── Switch (on/off langsung tersimpan) ───────────────────── */
/* Tinggi 20px dan warna aktif sama dengan checkbox tercentang.
   Status dibaca dari aria-checked, jadi JS cukup mengatur atribut itu. */
.fc-switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  box-sizing: border-box;
  flex: none;
  width: 36px;
  height: 20px;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 9999px;
  cursor: pointer;
}
/* Area sentuh 44px tanpa mengubah ukuran tampilan. */
.fc-switch::before {
  content: "";
  position: absolute;
  inset: -12px -8px;
}
.fc-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: #94a3b8;
  transform: translate(0, -50%);
}
.fc-switch:hover:not(:disabled) { border-color: #94a3b8; }
.fc-switch[aria-checked="true"] {
  background-color: #0a1628;
  border-color: #0a1628;
}
.fc-switch[aria-checked="true"]::after {
  background-color: #fff;
  transform: translate(16px, -50%);
}
.fc-switch:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}
.fc-switch:disabled { opacity: .5; cursor: not-allowed; }
.fc-switch[aria-invalid="true"] { border-color: #dc2626; }

/* ── Animasi (hanya jika pengguna tidak mengurangi gerak) ─── */
@media (prefers-reduced-motion: no-preference) {
  .fc-check { transition: background-color .12s ease, border-color .12s ease; }
  .fc-check[type="checkbox"]:checked { animation: fc-pop .14s ease-out; }
  .fc-switch { transition: background-color .15s ease, border-color .15s ease; }
  .fc-switch::after { transition: transform .15s ease, background-color .15s ease; }
}
@keyframes fc-pop {
  from { background-size: 6px 6px; }
  to { background-size: 14px 14px; }
}

/* ── Dark mode (halaman admin memuat css/dark-mode.css) ───── */
/* dark-mode.css menimpa background dan border semua <input> dengan
   !important. Selector di bawah lebih spesifik supaya status
   tercentang tidak hilang. Fill aktif memakai amber karena navy
   tidak terlihat di latar gelap. */
html.dark input.fc-check:not(.no-dark) {
  background-color: #0f1729 !important;
  border-color: #475569 !important;
}
html.dark input.fc-check:not(.no-dark):hover:not(:disabled) { border-color: #94a3b8 !important; }
html.dark input.fc-check[type="checkbox"]:checked:not(.no-dark),
html.dark input.fc-check[type="radio"]:checked:not(.no-dark) {
  background-color: #fbbf24 !important;
  border-color: #fbbf24 !important;
}
html.dark input.fc-check[type="checkbox"]:checked:not(.no-dark) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%230a1628' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5l2.8 2.8L11 4.5'/%3E%3C/svg%3E");
}
html.dark input.fc-check[type="radio"]:checked:not(.no-dark) {
  background-image: radial-gradient(circle at center, #0a1628 0, #0a1628 3px, transparent 3.5px);
}
html.dark input.fc-check[aria-invalid="true"]:not(.no-dark) { border-color: #f87171 !important; }

html.dark .fc-row,
html.dark .fc-pill { color: #cbd5e1; }
html.dark .fc-pill {
  background-color: #0f1729;
  border-color: #22304a;
}
html.dark .fc-pill:has(.fc-check:checked) {
  border-color: #fbbf24;
  background-color: #1a2438;
}

html.dark .fc-switch {
  background-color: #0f1729;
  border-color: #475569;
}
html.dark .fc-switch::after { background-color: #94a3b8; }
html.dark .fc-switch[aria-checked="true"] {
  background-color: #fbbf24;
  border-color: #fbbf24;
}
html.dark .fc-switch[aria-checked="true"]::after { background-color: #0a1628; }
html.dark .fc-switch:focus-visible,
html.dark .fc-check:focus-visible { outline-color: #fbbf24; }