/* Undangan Open House SIFA: halaman admin dan wizard */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/jakarta.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Marcellus";
  src: url("fonts/marcellus.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --hutan: #0E3B2E;
  --hutan-tua: #082A20;
  --zamrud: #1B855B;
  --zamrud-muda: #DCEBDF;
  --gading: #F5F0E3;
  --putih: #FFFFFF;
  --kuningan: #AE8A46;
  --tinta: #18241F;
  --redup: #56655D;
  --garis: #DAD5C6;
  --bahaya: #9E3324;
  --bahaya-muda: #F6E3DD;
  --isi: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --judul: "Marcellus", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F3F0E7; color: var(--tinta); font: 400 0.9688rem/1.55 var(--isi); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--zamrud); }
h1 { font: 400 1.9rem/1.2 var(--judul); color: var(--hutan); margin: 0 0 0.4rem; }
h2 { font: 700 1.0625rem/1.3 var(--isi); margin: 0 0 0.35rem; }
p { margin: 0 0 0.9rem; }
.redup { color: var(--redup); }
.kecil { font-size: 0.8438rem; }
:focus-visible { outline: 3px solid var(--kuningan); outline-offset: 2px; border-radius: 4px; }

/* ---------- Bilah atas ---------- */

.atas { background: var(--hutan); color: var(--gading); position: sticky; top: 0; z-index: 10; }
.atas-isi { max-width: 76rem; margin: 0 auto; padding: 0.6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.atas-merek { font: 400 1.2rem/1 var(--judul); color: var(--gading); text-decoration: none; }
.atas-merek span { font: 600 0.75rem/1 var(--isi); background: rgba(245, 240, 227, 0.16); padding: 0.25rem 0.5rem; border-radius: 999px; margin-left: 0.35rem; vertical-align: middle; }
.atas-menu { display: flex; gap: 0.25rem; overflow-x: auto; order: 3; width: 100%; scrollbar-width: none; }
.atas-menu::-webkit-scrollbar { display: none; }
.atas-menu a { color: rgba(245, 240, 227, 0.82); text-decoration: none; padding: 0.5rem 0.8rem; border-radius: 8px; white-space: nowrap; font-weight: 500; }
.atas-menu a:hover { background: rgba(245, 240, 227, 0.1); color: #fff; }
.atas-menu a[aria-current] { background: var(--gading); color: var(--hutan); font-weight: 700; }
.atas-kanan { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; }
.atas-kanan a, .atas-kanan .tautan { color: rgba(245, 240, 227, 0.9); }
.atas-kanan form { margin: 0; }

.isi { max-width: 76rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

/* ---------- Wizard dan halaman masuk ---------- */

body.polos { background: var(--hutan); min-height: 100vh; padding: 1.5rem 1rem; }
.kotak-pasang { max-width: 30rem; margin: 2vh auto; background: var(--putih); border-radius: 16px; padding: 1.75rem 1.5rem; }
.kotak-pasang h2 { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--garis); }
.cek { list-style: none; margin: 0 0 1rem; padding: 0; }
.cek li { display: flex; flex-direction: column; padding: 0.5rem 0 0.5rem 1.75rem; position: relative; border-bottom: 1px solid #EEE9DC; }
.cek li span { font-size: 0.8125rem; color: var(--redup); overflow-wrap: anywhere; }
.cek li::before { position: absolute; left: 0; top: 0.5rem; font-weight: 800; }
.cek li.ok::before { content: "\2713"; color: var(--zamrud); }
.cek li.gagal::before { content: "\2715"; color: var(--bahaya); }
.pilihan { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.pilihan label { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem; border: 1.5px solid var(--garis); border-radius: 10px; cursor: pointer; }
.pilihan label strong { display: block; }
.pilihan input { margin-top: 0.3rem; }

/* ---------- Isian dan tombol ---------- */

.isian { display: block; font-weight: 600; font-size: 0.9063rem; margin-bottom: 0.95rem; }
.isian input[type=text], .isian input[type=tel], .isian input[type=url], .isian input[type=password], .isian input[type=number], .isian input[type=date], .isian input[type=time], .isian input[type=search], .isian select, .isian textarea,
.alat-saring select, .alat-saring input, .salin-baris input {
  display: block; width: 100%; margin-top: 0.3rem;
  font: 400 1rem/1.4 var(--isi); color: var(--tinta);
  background: var(--putih); border: 1.5px solid #C9C4B4; border-radius: 9px; padding: 0.6rem 0.7rem;
}
.isian input[type=file] { display: block; margin-top: 0.4rem; font: inherit; max-width: 100%; }
.isian textarea { resize: vertical; }
.isian input:focus, .isian select:focus, .isian textarea:focus, .alat-saring select:focus, .alat-saring input:focus { outline: none; border-color: var(--zamrud); box-shadow: 0 0 0 3px rgba(27, 133, 91, 0.2); }
.isian small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--redup); margin-top: 0.3rem; }
.dua { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.9rem; }
.kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 0.9rem; }

.tombol {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.5rem 1.1rem;
  font: 600 0.9375rem/1.2 var(--isi); text-decoration: none; cursor: pointer;
  color: var(--hutan); background: var(--putih); border: 1.5px solid var(--hutan); border-radius: 999px;
}
.tombol:hover { background: var(--zamrud-muda); }
.tombol.utama { background: var(--hutan); color: #fff; }
.tombol.utama:hover { background: var(--hutan-tua); }
.tautan { background: none; border: 0; padding: 0; font: inherit; color: var(--zamrud); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.tautan.bahaya { color: var(--bahaya); }
.centang { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; margin-bottom: 0.9rem; cursor: pointer; }
.centang input { width: 1.2rem; height: 1.2rem; accent-color: var(--zamrud); flex: none; }

.pesan { border-radius: 10px; padding: 0.75rem 1rem; margin: 0 0 1rem; border: 1px solid transparent; }
.pesan.ok { background: var(--zamrud-muda); border-color: #BBD5C3; color: var(--hutan-tua); }
.pesan.info { background: #EEF1E6; border-color: #D5DCC6; }
.pesan.galat { background: var(--bahaya-muda); border-color: #E3B8AE; color: #6E2015; }

.kartu { background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; padding: 1.25rem; margin-bottom: 1rem; max-width: 52rem; }
.kartu-aksi { margin-top: 0.25rem; }
.kartu-hapus { margin-top: 0.9rem; }
.lekat { position: sticky; bottom: 0; background: linear-gradient(rgba(243, 240, 231, 0), #F3F0E7 35%); padding: 1.25rem 0 1rem; max-width: 52rem; }

/* ---------- Ringkasan kuota ---------- */

.ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 0.9rem; margin-bottom: 1.25rem; }
.ringkas-kartu { background: var(--putih); border: 1px solid var(--garis); border-top: 5px solid var(--hutan); border-radius: 14px; padding: 1rem 1.1rem; }
.ringkas-kartu.k-lewat { border-top-color: #A9B0A8; }
.ringkas-kartu.k-penuh, .ringkas-kartu.k-tutup { border-top-color: var(--bahaya); }
.ringkas-kartu header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.ringkas-kartu h2 { font: 700 1.15rem/1.25 var(--isi); letter-spacing: -0.01em; color: var(--hutan); margin: 0; }
.ringkas-angka { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 0.75rem 0; }
.angka-nama { display: block; font-weight: 700; font-size: 0.8438rem; }
.angka-besar { display: block; font: 700 2rem/1.15 var(--isi); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.angka-besar small { font: 500 0.8438rem/1 var(--isi); letter-spacing: 0; color: var(--redup); }
.meter { display: block; height: 0.45rem; border-radius: 999px; background: #E6E9E0; overflow: hidden; margin: 0.4rem 0 0.3rem; }
.meter span { display: block; height: 100%; background: var(--zamrud); border-radius: 999px; }
.angka-sisa { display: block; font-size: 0.8438rem; color: var(--redup); }
.angka.habis .meter span { background: var(--bahaya); }
.angka.habis .angka-sisa { color: var(--bahaya); font-weight: 700; }
.ringkas-kaki { margin: 0; color: var(--redup); border-top: 1px dashed var(--garis); padding-top: 0.6rem; }

.lencana { display: inline-block; font-size: 0.75rem; font-weight: 700; line-height: 1; padding: 0.35rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.l-buka { background: var(--zamrud-muda); color: var(--hutan-tua); }
.l-penuh, .l-tutup { background: var(--bahaya-muda); color: #6E2015; }
.l-lewat, .l-netral { background: #E9EBE4; color: #4B564F; }

/* ---------- Alat dan tabel ---------- */

.alat { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 0.9rem; }
.alat-saring { display: flex; flex-wrap: wrap; gap: 0.6rem; flex: 1 1 24rem; }
.alat-saring label { font-size: 0.8125rem; font-weight: 600; flex: 1 1 9rem; }
.alat-saring .alat-cari { flex: 2 1 13rem; }
.alat-aksi { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.tabel-bungkus { background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th { text-align: left; font-size: 0.8125rem; color: var(--redup); font-weight: 600; padding: 0.7rem 0.8rem; border-bottom: 1.5px solid var(--garis); white-space: nowrap; }
.tabel td { padding: 0.7rem 0.8rem; border-bottom: 1px solid #EEEADF; vertical-align: top; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel td strong { display: block; }
.tabel td[data-l="Tanggal"] { white-space: nowrap; }
.tabel td .kecil { display: block; }
.tabel td .lencana { margin-top: 0.3rem; }
.angka-kol { text-align: right; font-variant-numeric: tabular-nums; }
.tabel th.angka-kol { text-align: right; }
.baris-batal td { color: #8A928B; background: #FAF8F2; }
.aksi-kol { white-space: nowrap; }
.aksi-kol > * { display: inline-block; margin: 0 0.75rem 0.3rem 0; vertical-align: top; }
.aksi-kol form { margin-bottom: 0; }
.tabel .centang { margin: 0; }
.kosong { background: var(--putih); border: 1px dashed #C9C4B4; border-radius: 14px; padding: 1.5rem; color: var(--redup); }

.tarik { position: relative; }
.tarik summary { cursor: pointer; color: var(--zamrud); text-decoration: underline; text-underline-offset: 0.15em; list-style: none; }
.tarik summary::-webkit-details-marker { display: none; }
.tarik-isi { position: absolute; z-index: 5; left: 0; top: 1.7rem; min-width: 12rem; background: var(--putih); border: 1px solid var(--garis); border-radius: 10px; box-shadow: 0 10px 24px rgba(8, 42, 32, 0.16); padding: 0.35rem; }
.tarik-isi a { display: block; padding: 0.55rem 0.7rem; border-radius: 7px; text-decoration: none; color: var(--tinta); }
.tarik-isi a:hover { background: var(--zamrud-muda); }

/* ---------- Dialog ---------- */

.dialog { border: 0; border-radius: 16px; padding: 1.5rem 1.25rem; width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; }
.dialog::backdrop { background: rgba(8, 42, 32, 0.55); }
.dialog h2 { font: 400 1.5rem/1.2 var(--judul); color: var(--hutan); }
.dialog-aksi { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- Kirim undangan ---------- */

.salin-baris { display: flex; gap: 0.5rem; align-items: stretch; }
.salin-baris input { margin: 0; }
.hasil { margin-top: 1.1rem; border-top: 1px solid var(--garis); }
.hasil-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid #EEEADF; }
.hasil-nama { flex: 1 1 12rem; font-weight: 600; overflow-wrap: anywhere; }
.hasil-nama small { display: block; font-weight: 400; color: var(--redup); }
.hasil-aksi { display: flex; gap: 1rem; flex-wrap: wrap; }

.daftar-akun { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.daftar-akun li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #EEEADF; }
.daftar-akun form { margin: 0; }
.logo-kini { display: flex; align-items: center; gap: 1rem; margin: 0.4rem 0; }
.logo-kini img { max-height: 56px; max-width: 160px; border: 1px solid var(--garis); border-radius: 8px; padding: 4px; background: #fff; }
.logo-kini .centang { margin: 0; }

/* ---------- Layar kecil: tabel menjadi kartu ---------- */

@media (min-width: 62rem) {
  .atas-menu { order: 0; width: auto; }
}
@media (max-width: 47.99rem) {
  .tabel-bungkus { background: none; border: 0; overflow: visible; }
  .tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel tr { background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; padding: 0.75rem 0.9rem; margin-bottom: 0.7rem; }
  .tabel td { border: 0; padding: 0.25rem 0; text-align: left; }
  .tabel td[data-l="No"], .tabel td:empty { display: none !important; }
  .tabel td[data-l="Ikhwan"], .tabel td[data-l="Akhawat"], .tabel td[data-l="Tanggal"], .tabel td[data-l="Asal dan pesan"] { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; }
  .tabel td[data-l="Ikhwan"]::before, .tabel td[data-l="Akhawat"]::before, .tabel td[data-l="Tanggal"]::before, .tabel td[data-l="Asal dan pesan"]::before { content: attr(data-l); color: var(--redup); font-size: 0.8438rem; }
  .tabel td[data-l="Tanggal"] .kecil, .tabel td[data-l="Asal dan pesan"] .kecil { grid-column: 2; }
  .baris-batal td { background: none; }
  .aksi-kol { white-space: normal; padding-top: 0.6rem !important; border-top: 1px dashed var(--garis) !important; margin-top: 0.4rem; }
  .dua { grid-template-columns: 1fr; }
  .alat-aksi { width: 100%; }
  .alat-aksi .tombol { flex: 1; }
}