/* CTWA Tracker — dipakai dari HP sehabis telepon, jadi mobile dulu. */

:root {
  --bg: #f6f7f9;
  --kartu: #ffffff;
  --garis: #e3e6ea;
  --teks: #16191d;
  --redup: #6b7280;
  --utama: #1a5cff;
  --utama-teks: #ffffff;
  --hijau: #0f8f4e;
  --hijau-bg: #e6f6ee;
  --merah: #c0392b;
  --merah-bg: #fdecea;
  --kuning: #8a6100;
  --kuning-bg: #fdf4e0;
  --abu-bg: #eef0f3;
  --radius: 10px;
  --bayang: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --kartu: #1c1f25;
    --garis: #2c3037;
    --teks: #e8eaed;
    --redup: #9aa1ab;
    --utama: #4d82ff;
    --hijau: #4ad08b;
    --hijau-bg: #10301f;
    --merah: #ff7b6b;
    --merah-bg: #3a1a15;
    --kuning: #e3b341;
    --kuning-bg: #362a10;
    --abu-bg: #262a31;
    --bayang: none;
  }
}

* { box-sizing: border-box; }

/* Wajib ada, dan letaknya harus di atas semua aturan display.
   Aturan bawaan browser untuk atribut `hidden` cuma `[hidden]{display:none}`,
   yang kalah spesifik dari class mana pun yang menyetel display — misalnya
   `.gerbang{display:grid}` atau `.tombol{display:inline-block}`. Akibatnya
   elemen ber-`hidden` tetap memesan tempat: kartu login yang sudah lewat
   masih memakan satu layar penuh dan mendorong dashboard ke luar layar. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--teks);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }

main { max-width: 920px; margin: 0 auto; padding: 16px 16px 32px; }

.redup { color: var(--redup); }
.kecil-teks { font-size: .82rem; }
.tengah { text-align: center; }
.wajib { color: var(--merah); }
.galat { color: var(--merah); font-size: .88rem; }

/* ── Header ─────────────────────────────────────────────── */
.atas {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--kartu);
  border-bottom: 1px solid var(--garis);
}
.atas-kiri { display: flex; align-items: center; gap: 8px; }
.atas-kanan { display: flex; gap: 6px; flex-wrap: wrap; }

.lencana {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 99px; text-transform: uppercase;
}
.lencana.live { background: var(--hijau-bg); color: var(--hijau); }
.lencana.tes { background: var(--kuning-bg); color: var(--kuning); }

/* ── Kartu & form ───────────────────────────────────────── */
.kartu {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--bayang);
}

.kisi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lebar-2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .kisi { grid-template-columns: 1fr; } }

label { display: block; font-size: .85rem; font-weight: 600; }
label small { font-weight: 400; }

input, textarea, select {
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  font: inherit;
  color: var(--teks);
  background: var(--bg);
  border: 1px solid var(--garis);
  border-radius: 8px;
}
input:focus, textarea:focus { outline: 2px solid var(--utama); outline-offset: -1px; }
textarea { resize: vertical; }

.baris-centang { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.baris-centang input { width: auto; margin: 0; }

.aksi-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aksi-form em { font-style: normal; }

/* ── Tombol ─────────────────────────────────────────────── */
.tombol {
  display: inline-block;
  padding: 9px 14px;
  font: inherit; font-weight: 600;
  color: var(--teks); text-decoration: none;
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 8px;
  cursor: pointer;
}
.tombol:hover { border-color: var(--redup); }
.tombol:disabled { opacity: .55; cursor: progress; }
.tombol.utama { background: var(--utama); border-color: var(--utama); color: var(--utama-teks); }
.tombol.utama:hover { filter: brightness(1.08); }
.tombol.kecil { padding: 5px 10px; font-size: .82rem; font-weight: 500; }
.tombol.bahaya { color: var(--merah); }

/* ── Gerbang login ──────────────────────────────────────── */
.gerbang { display: grid; place-items: center; min-height: 100dvh; padding: 16px; }
.kartu-login { width: 100%; max-width: 340px; margin: 0; }
.kartu-login label { margin: 14px 0; }
.kartu-login .tombol { width: 100%; }

/* ── Angka ringkasan ────────────────────────────────────── */
.angka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
@media (max-width: 560px) { .angka { grid-template-columns: repeat(2, 1fr); } }
.angka div {
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 10px 12px;
}
.angka b { display: block; font-size: 1.4rem; line-height: 1.2; }
.angka span { font-size: .78rem; color: var(--redup); }

/* ── Saringan ───────────────────────────────────────────── */
.saring { margin-bottom: 12px; }
.cip { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cip-btn {
  padding: 5px 11px; font: inherit; font-size: .82rem;
  background: var(--kartu); color: var(--redup);
  border: 1px solid var(--garis); border-radius: 99px; cursor: pointer;
}
.cip-btn.aktif { background: var(--teks); color: var(--bg); border-color: var(--teks); }

/* ── Daftar lead ────────────────────────────────────────── */
.daftar { display: flex; flex-direction: column; gap: 10px; }

.lead {
  background: var(--kartu); border: 1px solid var(--garis);
  border-left: 3px solid var(--garis);
  border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--bayang);
}
.lead.s-qualified { border-left-color: var(--hijau); }
.lead.s-closing { border-left-color: var(--utama); }
.lead.s-not_qualified { border-left-color: var(--redup); opacity: .72; }
.lead.ada-gagal { border-left-color: var(--merah); }

.lead-atas { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.lead-nama { font-weight: 700; }
.lead-meta { font-size: .82rem; color: var(--redup); margin-top: 2px; }
.lead-catatan { font-size: .86rem; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--garis); }

.pil {
  font-size: .72rem; font-weight: 700; padding: 3px 9px;
  border-radius: 99px; white-space: nowrap;
}
.pil.baru { background: var(--abu-bg); color: var(--redup); }
.pil.qualified { background: var(--hijau-bg); color: var(--hijau); }
.pil.closing { background: var(--hijau-bg); color: var(--hijau); }
.pil.not_qualified { background: var(--abu-bg); color: var(--redup); }

.jejak { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.jejak span {
  font-size: .72rem; padding: 3px 8px; border-radius: 6px;
  background: var(--abu-bg); color: var(--redup);
}
.jejak span.ok { background: var(--hijau-bg); color: var(--hijau); }
.jejak span.gagal { background: var(--merah-bg); color: var(--merah); cursor: help; }

.lead-aksi { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

/* ── Dialog ─────────────────────────────────────────────── */
dialog {
  border: 1px solid var(--garis); border-radius: var(--radius);
  background: var(--kartu); color: var(--teks);
  padding: 18px; width: min(92vw, 400px);
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog label { margin-bottom: 12px; }
.aksi-dialog { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ── Toast ──────────────────────────────────────────────── */
.toast-wadah {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  max-width: 520px; width: 100%;
  padding: 11px 14px; border-radius: 8px;
  font-size: .88rem; line-height: 1.4;
  background: var(--teks); color: var(--bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  pointer-events: auto;
}
.toast.ok { background: var(--hijau); color: #fff; }
.toast.gagal { background: var(--merah); color: #fff; }

.bawah { max-width: 920px; margin: 0 auto; padding: 0 16px 32px; font-size: .82rem; }

/* ── Kelola pixel ───────────────────────────────────────── */
.dialog-lebar { width: min(94vw, 640px); max-height: 88vh; overflow-y: auto; }
.dialog-atas { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog-atas h2 { margin: 0; }

.daftar-pixel { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.baris-pixel {
  border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 10px 12px; background: var(--bg);
}
.baris-pixel-nama { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.baris-pixel .lead-aksi { margin-top: 8px; }

.form-pixel { margin-bottom: 0; background: var(--bg); }
.form-pixel h3 { font-size: .95rem; margin-bottom: 10px; }
.form-pixel label { margin-bottom: 12px; }

.judul-kecil { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.pilihan-pixel {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 9px 10px; margin-bottom: 4px;
  background: var(--bg); border: 1px solid var(--garis); border-radius: 8px;
}
.pilihan-pixel label { font-weight: 500; }

/* Nama pixel di depan jejak event, supaya tiap baris jelas milik dataset mana. */
.jejak-pixel {
  font-weight: 700; background: transparent !important;
  color: var(--redup) !important; padding-left: 0 !important;
}

/* ── Kotak password ─────────────────────────────────────── */
.kotak-sandi { position: relative; display: block; }
.kotak-sandi input { padding-right: 92px; }
.lihat-sandi {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 4px 9px; font: inherit; font-size: .78rem; font-weight: 600;
  color: var(--redup); background: var(--kartu);
  border: 1px solid var(--garis); border-radius: 6px; cursor: pointer;
}
.lihat-sandi:hover { color: var(--teks); }

/* ── Toolbar dashboard ──────────────────────────────────── */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.toolbar input[type="search"] { margin-top: 0; flex: 1; min-width: 0; }
.toolbar .tombol { white-space: nowrap; }
.cip { margin-bottom: 14px; }

.kosong {
  text-align: center; padding: 32px 16px;
  border: 1px dashed var(--garis); border-radius: var(--radius);
}
.kosong p { margin: 0 0 14px; }

/* Aksi di dialog lead: keterangan kiri, tombol kanan. */
#form-lead .aksi-dialog { justify-content: space-between; align-items: center; }
#form-lead .aksi-dialog em { font-style: normal; }

/* Placeholder harus jelas-jelas BUKAN isi. Tanpa aturan ini warnanya
   ikut bawaan browser, dan di mode gelap kontrasnya cukup tinggi sampai
   terbaca seperti data yang sudah terisi. */
::placeholder { color: var(--redup); opacity: .6; font-style: italic; }

/* Kotak yang sedang diketik dibedakan jelas dari yang masih kosong. */
input:focus, textarea:focus { background: var(--kartu); }

/* Tujuan pengiriman saat cuma ada satu pixel: kalimat, bukan pilihan. */
.tujuan { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .88rem; }
#pilih-pixel-nota { display: block; margin-top: 6px; }

/* ── Nama event per pixel ───────────────────────────────── */
.nama-event {
  border: 1px solid var(--garis); border-radius: 8px;
  padding: 10px 12px 2px; margin: 0 0 12px;
}
.nama-event legend { font-size: .85rem; font-weight: 600; padding: 0 6px; }
.nama-event p { margin: 0 0 10px; }

/* ── Tabel spreadsheet ──────────────────────────────────── */
.tabel-bungkus {
  overflow-x: auto;                 /* tabel lebar: hanya dia yang geser, bukan halaman */
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: var(--kartu);
}
.tabel { border-collapse: collapse; width: 100%; min-width: 1100px; font-size: .88rem; }

.tabel th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--redup); background: var(--kartu);
  padding: 8px 10px; border-bottom: 1px solid var(--garis);
  white-space: nowrap;
}
.tabel td { padding: 0; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.tabel tbody tr:hover td { background: var(--bg); }

/* Sel yang bisa diketik dibuat rata dengan selnya — kotak input yang
   terlihat seperti kotak bikin tabelnya ramai dan tidak terasa spreadsheet. */
.tabel td input, .tabel td select {
  width: 100%; margin: 0; border: 0; border-radius: 0;
  background: transparent; padding: 9px 10px; font-size: .88rem;
}
.tabel td input:focus, .tabel td select:focus {
  outline: 2px solid var(--utama); outline-offset: -2px;
  background: var(--kartu); border-radius: 4px;
}
.tabel td input.tersimpan { background: var(--hijau-bg); transition: background .4s; }

.k-nama input { font-weight: 600; }
.k-nama { min-width: 140px; }
.k-hp { min-width: 130px; }
.k-catatan { min-width: 160px; }
.k-pixel { padding: 9px 10px !important; font-size: .8rem; max-width: 150px; }
.k-status { min-width: 190px; }
.k-nilai { padding: 9px 10px !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-kirim { padding: 7px 10px !important; min-width: 210px; }
.k-aksi { padding: 7px 8px !important; width: 1%; text-align: right; }

/* Garis warna status di tepi kiri baris, seperti di kartu sebelumnya. */
.tabel tbody tr { border-left: 3px solid transparent; }
.tabel tbody tr.b-qualified { border-left-color: var(--hijau); }
.tabel tbody tr.b-closing { border-left-color: var(--utama); }
.tabel tbody tr.b-not_qualified { border-left-color: var(--redup); }
.tabel tbody tr.b-not_qualified input { color: var(--redup); }
.tabel tbody tr.ada-gagal { border-left-color: var(--merah); }

.baris-tambah td { background: var(--bg); border-bottom: 0; }
.baris-tambah input::placeholder { font-style: italic; }
.baris-kosong td { padding: 24px 12px !important; text-align: center; }

/* Lencana event di kolom Terkirim; yang gagal bisa diklik untuk kirim ulang. */
.tabel .jejak { margin: 0; gap: 4px; }
.tabel .jejak span, .tabel .jejak button {
  font-size: .7rem; padding: 2px 7px; border-radius: 5px;
  background: var(--abu-bg); color: var(--redup);
  border: 0; font-family: inherit; white-space: nowrap;
}
.tabel .jejak button.gagal { cursor: pointer; }
.tabel .jejak button.gagal:hover { filter: brightness(1.15); }

.bantuan { margin: 12px 2px 0; }

@media (max-width: 700px) {
  main { padding-left: 10px; padding-right: 10px; }
  .bantuan { font-size: .78rem; }
}

/* ── Full screen ────────────────────────────────────────────
   Tabel ini kolomnya banyak; membatasinya di 920px berarti scroll
   mendatar di layar yang sebenarnya muat. Lebar penuh, lalu tinggi
   tabelnya dikunci ke tinggi layar supaya kepala tabel dan baris
   "lead baru" tetap terlihat sambil daftar leadnya digulir. */
main { max-width: none; padding: 14px 20px 24px; }
.bawah { max-width: none; padding-left: 20px; padding-right: 20px; }

.tabel-bungkus {
  overflow: auto;
  max-height: calc(100dvh - 250px);
  min-height: 220px;
}
.tabel { min-width: 1100px; }

/* Kepala tabel menempel di atas wadahnya, bukan di viewport — kalau
   menempel ke viewport dia bertabrakan dengan header aplikasi. */
.tabel thead th { top: 0; z-index: 3; }

/* Baris lead baru menempel di dasar: dengan ratusan lead, baris input
   tidak boleh ikut hilang ke bawah. */
.tabel tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--garis);
}

@media (max-width: 700px) {
  main { padding: 12px 10px 20px; }
  .bawah { padding-left: 10px; padding-right: 10px; }
  .tabel-bungkus { max-height: calc(100dvh - 300px); }
}

/* Kotak "nama sendiri" muncul di bawah dropdown-nya saat dipilih. */
.nama-event select { margin-top: 4px; }
.nama-event input { margin-top: 6px; }