/* ==========================================================================
   Catatan Gas 3 Kg — tampilan
   Prinsip: bersih, tenang, jelas.
   - Hierarki tegas: judul tebal, isi biasa, keterangan kecil dan redup.
     Tidak semua teks ditebalkan; hanya yang penting.
   - Aksen warna hanya untuk menandai keadaan, bukan menghias.
   - Sasaran sentuh besar, jarak lega, tanpa geser mendatar.
   - Satu basis kode untuk HP 360px sampai desktop.
   ========================================================================== */

:root {
  /* Ukuran huruf dasar. Bisa diperbesar dari halaman Pengaturan. */
  --dasar: 18px;
  --skala: 1;

  /* Warna */
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f9fafb;

  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  --line: #e3e7ee;
  --line-kuat: #cbd3e0;

  --brand: #1d4ed8;
  --brand-tua: #1a3fa8;
  --brand-tint: #eef4ff;

  --sukses: #047857;
  --sukses-tint: #ecfdf5;
  --ingat: #b45309;
  --ingat-tint: #fffbeb;
  --bahaya: #b91c1c;
  --bahaya-tint: #fef2f2;
  --netral: #4b5563;
  --netral-tint: #f3f4f6;

  /* Bentuk */
  --r-kecil: 10px;
  --r: 14px;
  --r-besar: 18px;
  --bayang: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --bayang-naik: 0 10px 30px rgba(16, 24, 40, 0.18);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Atribut hidden harus selalu menang atas aturan display apa pun. */
[hidden] { display: none !important; }

html {
  font-size: calc(var(--dasar) * var(--skala));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 0.4em; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 0.7em; }
p:last-child { margin-bottom: 0; }
a { color: var(--brand); }

/* Angka selalu rata kolom dan tidak terpotong. */
.angka, .tabular, .ringkas-angka, .total-rekap-angka, .jumlah-isian,
.kartu-kuota-angka, .baris-transaksi-jumlah, .kartu-jual-tabung {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.ikon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
.tersembunyi { display: none !important; }
.teks-besar { font-size: 1.1rem; font-weight: 600; }
.teks-sedang { font-size: 0.95rem; color: var(--ink-3); }

/* ============================================================== Kepala ==== */
.kepala {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.kepala-isi {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kepala-baris-atas { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.kepala-kiri { flex: 1; min-width: 0; }
.kepala-judul {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kepala-periode {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 1px;
}

/* ================================================================ Isi ==== */
.isi {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 18px calc(110px + env(safe-area-inset-bottom));
  outline: none;
}

/* =============================================================== Pesan ==== */
.pesan-area {
  position: fixed;
  top: var(--tinggi-kepala, 0px);
  left: 0;
  right: 0;
  z-index: 60;
  padding: 0 18px;
  pointer-events: none;
}
.pesan {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px auto 0;
  max-width: 1100px;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  border-left-width: 5px;
  background: var(--surface);
  box-shadow: var(--bayang-naik);
  font-size: 0.98rem;
  font-weight: 500;
  pointer-events: auto;
}
.pesan-sukses { border-left-color: var(--sukses); background: var(--sukses-tint); color: #064e3b; }
.pesan-gagal  { border-left-color: var(--bahaya); background: var(--bahaya-tint); color: #7f1d1d; }
.pesan-info   { border-left-color: var(--brand);  background: var(--brand-tint); color: #1e3a8a; }
.pesan-ikon { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.pesan-teks { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pesan-tutup {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  min-width: 46px;
  min-height: 46px;
  margin: -10px -12px -10px 0;
  border-radius: 10px;
}
.pesan-tutup:active { opacity: 1; }

/* Saat ada pesan, isi digeser supaya tidak ada yang tertutup. */
body.ada-pesan .isi { padding-top: var(--tinggi-pesan, 96px); }

/* =============================================================== Masuk ==== */
.layar-masuk {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  background: linear-gradient(165deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
}
.kartu-masuk {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--r-besar);
  padding: 30px 24px 26px;
  box-shadow: 0 20px 50px rgba(9, 20, 60, 0.32);
}
.merek { text-align: center; margin-bottom: 26px; }
.merek-ikon { width: 46px; height: 46px; color: var(--brand); }
.merek h1 { font-size: 1.3rem; margin: 12px 0 2px; letter-spacing: -0.02em; }
.merek-anak { color: var(--ink-3); font-size: 0.92rem; margin: 0; }
.kartu-masuk .tombol-penuh { margin-top: 22px; }
.catatan-kecil {
  font-size: 0.85rem;
  color: var(--ink-3);
  text-align: center;
  margin: 18px 0 0;
}

/* ============================================================== Tombol ==== */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: 50px;
  padding: 0 18px;
  border-radius: var(--r-kecil);
  border: 1px solid var(--line-kuat);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
  -webkit-tap-highlight-color: transparent;
}
.tombol:active { transform: scale(0.985); }
.tombol:focus-visible { outline: 3px solid #93b4ff; outline-offset: 2px; }
.tombol[disabled] { opacity: 0.5; cursor: not-allowed; }

.tombol-utama, .tombol-aksi, .tombol-hijau {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.tombol-hijau { background: var(--sukses); border-color: var(--sukses); }
.tombol-utama:active, .tombol-aksi:active { background: var(--brand-tua); border-color: var(--brand-tua); }
.tombol-hijau:active { background: #036247; border-color: #036247; }

.tombol-bahaya { background: var(--surface); border-color: #e6b0b0; color: var(--bahaya); }
.tombol-bahaya:active { background: var(--bahaya-tint); }

.tombol-penuh { width: 100%; }
.tombol-baris { display: flex; flex-wrap: wrap; gap: 10px; }
.tombol-baris .tombol { flex: 1 1 200px; }

/* Tombol utama di beranda: paling menonjol, karena paling sering dipakai. */
.tombol-jual {
  width: 100%;
  min-height: 66px;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: var(--r);
  background: var(--sukses);
  border-color: var(--sukses);
  color: #fff;
  box-shadow: 0 6px 18px rgba(4, 120, 87, 0.24);
  margin-bottom: 26px;
}
.tombol-jual:active { background: #036247; }

.tombol-bulat {
  width: 60px;
  min-width: 60px;
  min-height: 60px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--line-kuat);
  color: var(--brand);
}
.tombol-bulat-kecil {
  width: 52px;
  min-width: 52px;
  min-height: 52px;
  padding: 0;
  border-radius: var(--r-kecil);
  font-size: 1.4rem;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--line-kuat);
  color: var(--brand);
}

/* =============================================================== Kartu ==== */
.kartu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--bayang);
  padding: 18px;
  margin-bottom: 14px;
}
.kartu-judul {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.kartu-baris { display: flex; gap: 14px; flex-wrap: wrap; }
.kartu-baris > * { flex: 1 1 220px; }

.judul-bagian {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink-2);
  margin: 28px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.judul-bagian:first-child { margin-top: 0; }

/* ============================================================== Angka ==== */
/* Daftar angka: nama di kiri, angka besar di kanan. Angka tidak pernah
   menggantung sendirian seperti pada kotak-kotak terpisah. */
.daftar-angka-kotak {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--bayang);
  overflow: hidden;
}
.angka-baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.angka-baris:last-child { border-bottom: 0; }
.angka-nama { font-size: 0.98rem; font-weight: 500; color: var(--ink-2); }
.angka-nilai {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.angka-baris.nada-merah { background: var(--bahaya-tint); }
.angka-baris.nada-merah .angka-nilai { color: var(--bahaya); }
.angka-baris.nada-kuning { background: var(--ingat-tint); }
.angka-baris.nada-kuning .angka-nilai { color: var(--ingat); }
.angka-baris.nada-abu { background: var(--surface-2); }
.angka-baris.nada-abu .angka-nilai { color: var(--ink-2); }

/* Sisa bentuk lama, dipakai kalau masih ada yang memanggilnya. */
.ringkas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.ringkas {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--bayang);
  padding: 14px 16px;
}
.ringkas-angka {
  display: block;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}
.ringkas-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 4px;
}
.ringkas.hijau { background: var(--sukses-tint); border-color: #b7e4d2; }
.ringkas.hijau .ringkas-angka { color: var(--sukses); }
.ringkas.kuning { background: var(--ingat-tint); border-color: #f2dcae; }
.ringkas.kuning .ringkas-angka { color: var(--ingat); }
.ringkas.merah { background: var(--bahaya-tint); border-color: #f2c4c4; }
.ringkas.merah .ringkas-angka { color: var(--bahaya); }
.ringkas.abu { background: var(--netral-tint); border-color: var(--line-kuat); }
.ringkas.abu .ringkas-angka { color: var(--ink-2); }

/* ============================================================== Isian ==== */
.label-besar {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 16px 0 6px;
}
.label-besar:first-child { margin-top: 0; }

.isian {
  width: 100%;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-kuat);
  border-radius: var(--r-kecil);
  background: var(--surface);
  color: var(--ink);
}
.isian::placeholder { color: #9aa3b2; font-weight: 400; }
.isian:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14);
}
.isian-besar { min-height: 54px; font-size: 1.08rem; }
.isian-angka { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
textarea.isian { min-height: 84px; resize: vertical; }

.petunjuk { font-size: 0.86rem; font-weight: 400; color: var(--ink-3); margin: 7px 0 0; }
.petunjuk-tengah { text-align: center; }
.petunjuk-salah { color: var(--bahaya); font-weight: 600; }

.pilih {
  width: 100%;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid var(--line-kuat);
  border-radius: var(--r-kecil);
  background: var(--surface);
  color: var(--ink);
}

/* Pilihan kartu (jenis pelanggan, ukuran huruf) */
.pilihan { display: flex; gap: 10px; flex-wrap: wrap; }
.pilihan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilihan label {
  position: relative;
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 62px;
  padding: 12px 14px 12px 44px;
  border: 1.5px solid var(--line-kuat);
  border-radius: var(--r-kecil);
  background: var(--surface);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.pilihan label small { font-size: 0.82rem; font-weight: 400; color: var(--ink-3); line-height: 1.35; }
/* Tanda pilihan: bulatan di kiri, jadi tidak bergantung warna saja. */
.pilihan label::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line-kuat);
  background: var(--surface);
}
.pilihan input:checked + label { border-color: var(--brand); background: var(--brand-tint); }
.pilihan input:checked + label::before {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 3.5px var(--surface);
}
.pilihan input:focus-visible + label { outline: 3px solid #93b4ff; outline-offset: 2px; }

/* Pencarian dan penyaring */
.bilah-cari { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.bilah-cari .isian { flex: 1 1 240px; }
.bilah-cari .pilih { flex: 1 1 170px; }
@media (max-width: 900px) {
  .bilah-cari .isian { flex: 1 1 100%; }
  .bilah-cari .pilih { flex: 1 1 45%; }
}
@media (max-width: 560px) {
  .bilah-cari .isian, .bilah-cari .pilih { flex: 1 1 100%; }
}

/* ============================================================= Lencana ==== */
.lencana {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.lencana-max { background: var(--bahaya-tint); color: var(--bahaya); }
.lencana-belum { background: var(--ingat-tint); color: var(--ingat); }
.lencana-kosong { background: var(--netral-tint); color: var(--netral); }
.lencana-nonaktif { background: var(--netral-tint); color: var(--ink-3); }

/* Arti singkatan status, ditampilkan sekali di atas daftar supaya tidak
   perlu dihafal. Huruf kecil supaya tidak bersaing dengan judul. */
.keterangan-status {
  font-size: 0.88rem;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-kecil);
  padding: 11px 14px;
  margin: 0 0 12px;
  line-height: 1.5;
}
.keterangan-status b { color: var(--ink); font-weight: 700; }

/* ==================================================== Daftar pelanggan ==== */
.kartu-orang {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--bayang);
  padding: 16px;
  margin-bottom: 12px;
}
.kartu-orang.nonaktif { background: var(--surface-2); }
.kartu-orang-atas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; }
.kartu-orang-nama { font-size: 1.1rem; font-weight: 700; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Baris NIK beserta tombol salin. NIK boleh terpotong kalau ruangnya sempit,
   tapi tombol salin selalu utuh dan selalu terlihat. */
.nik-baris {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.nik-angka {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tombol-salin-nik {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-kuat);
  background: var(--surface);
  color: var(--brand);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tombol-salin-nik .ikon { width: 1.1em; height: 1.1em; }
.tombol-salin-nik:active { background: var(--brand-tint); }
.tombol-salin-nik.tersalin {
  background: var(--sukses-tint);
  border-color: #b7e4d2;
  color: var(--sukses);
}
.kartu-orang-data { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.kartu-orang-data div { font-size: 0.94rem; color: var(--ink-2); }
.kartu-orang-data b { font-weight: 700; color: var(--ink); }
.kartu-orang-aksi { display: flex; gap: 10px; flex-wrap: wrap; }
.kartu-orang-aksi .tombol { flex: 1 1 130px; }

/* =============================================================== Tabel ==== */
.tabel-bungkus {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--bayang);
  overflow-x: auto;
  margin-bottom: 14px;
}
.tabel {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}
.tabel caption {
  text-align: left;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 16px 0;
  color: var(--ink);
}
.tabel th, .tabel td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}
.tabel thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-kuat);
}
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr.baris-max { background: var(--bahaya-tint); }
.tabel tbody tr.baris-belum { background: var(--ingat-tint); }
.tabel tbody tr.baris-kosong { background: var(--surface-2); }
.tabel tbody tr.baris-total td {
  background: var(--brand-tint);
  font-weight: 700;
  color: var(--brand-tua);
  border-top: 1px solid var(--line-kuat);
}
.tabel td.kanan { text-align: right; white-space: nowrap; }
.tabel th.kanan { text-align: right; }
.tabel td.tengah, .tabel th.tengah { text-align: center; }
.tabel td.bisa-ditekan { cursor: pointer; color: var(--brand); font-weight: 700; }
.tabel td.bisa-ditekan:active { background: var(--brand-tint); }
.tabel .sel-aksi { display: flex; flex-direction: column; gap: 6px; }
.tabel .sel-aksi .tombol { min-height: 42px; padding: 0 10px; font-size: 0.88rem; }
.tabel td.kode, .tabel td.status-sel, .tabel td.angka { white-space: nowrap; }

.tabel-pelanggan .k-nama { width: 20%; }
.tabel-pelanggan .k-nik { width: 22%; }
.tabel-pelanggan .k-tipe { width: 16%; }
.tabel-pelanggan .k-angka { width: 8%; }
.tabel-pelanggan .k-kuota { width: 7%; }
.tabel-pelanggan .k-status { width: 14%; }
.tabel-pelanggan .k-aksi { width: 13%; }

.tabel-rekap .k-no { width: 5%; }
.tabel-rekap .k-tipe { width: 12%; }
.tabel-rekap .k-nama { width: 19%; }
.tabel-rekap .k-nik { width: 19%; }
.tabel-rekap .k-penjualan { width: 13%; }
.tabel-rekap .k-kuota { width: 9%; }
.tabel-rekap .k-sisa { width: 8%; }
.tabel-rekap .k-status { width: 15%; }

.tabel-riwayat .k-tanggal { width: 15%; }
.tabel-riwayat .k-nama { width: 20%; }
.tabel-riwayat .k-tipe { width: 13%; }
.tabel-riwayat .k-tabung { width: 10%; }
.tabel-riwayat .k-catatan { width: 19%; }
.tabel-riwayat .k-aksi { width: 23%; }

@media (max-width: 1023px) {
  .tabel th, .tabel td { padding: 10px 6px; }
  .tabel thead th { font-size: 0.7rem; }
  .tabel .sel-aksi .tombol { font-size: 0.82rem; padding: 0 6px; }
}

/* Satu bentuk untuk semua lebar: kartu di HP, tabel di tablet dan desktop. */
.hanya-lebar { display: none; }
.hanya-sempit { display: block; }
@media (min-width: 768px) {
  .hanya-lebar { display: block; }
  .hanya-sempit { display: none; }
  .isi { padding-left: 22px; padding-right: 22px; }
}

/* ============================================================ Penjualan ==== */
.tombol-pilih-orang {
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  font-size: 1.02rem;
  background: var(--surface);
  border: 1.5px dashed var(--line-kuat);
  color: var(--ink-2);
  padding: 0 16px;
}
.tombol-pilih-orang .ikon { width: 1.35em; height: 1.35em; color: var(--brand); }
.tombol-pilih-orang.terisi { border-style: solid; border-color: var(--brand); color: var(--ink); font-weight: 700; }

.jumlah-baris { display: flex; align-items: stretch; gap: 12px; }
.jumlah-isian {
  flex: 1;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  min-height: 60px;
  padding: 0 8px;
  letter-spacing: 0;
}
.tombol-simpan-jual {
  width: 100%;
  min-height: 60px;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

/* Kartu keadaan kuota pelanggan */
.kartu-kuota {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: var(--r);
  background: var(--surface-2);
}
.kartu-kuota-belum { border-left-color: var(--ingat); background: var(--ingat-tint); }
.kartu-kuota-max { border-left-color: var(--bahaya); background: var(--bahaya-tint); }
.kartu-kuota-kosong { border-left-color: var(--brand); background: var(--brand-tint); }
.kartu-kuota-atas { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.kartu-kuota-nama { font-size: 1.15rem; font-weight: 700; margin: 0; width: 100%; overflow-wrap: anywhere; }
.kartu-kuota-jenis { font-size: 0.95rem; color: var(--ink-2); margin: 0 0 6px; }
.kartu-kuota-angka { font-size: 1.05rem; margin: 0 0 6px; color: var(--ink-2); }
.kartu-kuota-angka b { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.kartu-kuota-pesan { font-size: 0.92rem; color: var(--ink-2); margin: 0 0 4px; }
.kartu-kuota-periode { font-size: 0.82rem; font-weight: 600; color: var(--ink-3); margin: 0; }

/* Baris pilihan pelanggan di dialog. Bentuknya div, bukan tombol, karena di
   dalamnya ada tombol salin NIK yang tidak boleh ikut terketuk. */
.daftar-pilih { margin-top: 14px; max-height: 52vh; overflow-y: auto; }
.pilih-baris {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-kecil);
  padding: 13px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.pilih-baris:active { background: var(--brand-tint); }
.pilih-baris:focus-visible { outline: 3px solid #93b4ff; outline-offset: 2px; }
.pilih-baris-penuh { background: var(--bahaya-tint); border-color: #f2c4c4; }
.pilih-baris-atas { display: block; margin-bottom: 4px; }
.pilih-baris-nama { display: block; font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; overflow-wrap: anywhere; }
.pilih-baris-status { display: inline-block; margin-bottom: 5px; }
.pilih-baris-nik { display: inline-block; font-size: 0.86rem; font-weight: 500; color: var(--ink-3); margin: 0 0 4px; letter-spacing: 0.02em; }
.pilih-baris .tombol-salin-nik { margin: 0 0 6px 8px; }
.pilih-baris-kuota { display: block; font-size: 0.92rem; color: var(--ink-2); }

/* Riwayat penjualan */
.kartu-jual {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--bayang);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.kartu-jual-atas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.kartu-jual-tanggal { font-size: 0.86rem; font-weight: 600; color: var(--ink-3); flex: 1; }
.kartu-jual-tabung {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--sukses);
  background: var(--sukses-tint);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}
.kartu-jual-nama { font-size: 1.08rem; font-weight: 700; margin: 0 0 2px; overflow-wrap: anywhere; }
.kartu-jual-catatan { font-size: 0.92rem; color: var(--ink-2); margin: 0 0 10px; }
.kartu-jual-aksi { display: flex; gap: 10px; flex-wrap: wrap; }
.kartu-jual-aksi .tombol { flex: 1 1 130px; }

/* ================================================================ Rekap ==== */
.periode-baris { display: flex; gap: 10px; align-items: stretch; }
/* Pilihan bulan harus memakai seluruh lebar yang tersisa dan tidak memotong
   nama bulan. Tombol panah dibuat ringkas supaya ruangnya cukup di 360px. */
.periode-baris .pilih {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 10px 6px;
}
.periode-baris .tombol-bulat-kecil { width: 52px; min-width: 52px; }

.kartu-rekap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: var(--r);
  box-shadow: var(--bayang);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.kartu-rekap-max { border-left-color: var(--bahaya); }
.kartu-rekap-belum { border-left-color: var(--ingat); }
.kartu-rekap-kosong { border-left-color: var(--line-kuat); }
.kartu-rekap-atas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.kartu-rekap-no { font-size: 0.86rem; font-weight: 600; color: var(--ink-2); flex: 1; }
.kartu-rekap-nama { font-size: 1.12rem; font-weight: 700; margin: 0 0 3px; overflow-wrap: anywhere; }
.kartu-rekap-data { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; font-size: 0.98rem; color: var(--ink-2); }
.kartu-rekap-data b { font-weight: 700; color: var(--ink); }

.total-rekap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--brand-tint);
  border: 1px solid #c7d9ff;
  border-radius: var(--r);
  padding: 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-tua);
  margin-bottom: 14px;
}
.total-rekap-angka { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }

/* Editor penjualan dari rekap */
.editor-kepala { margin-bottom: 16px; }
.editor-kuota { font-size: 0.94rem; color: var(--ink-2); margin: 6px 0 0; }
.daftar-transaksi { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.baris-transaksi {
  border: 1px solid var(--line);
  border-radius: var(--r-kecil);
  padding: 12px 14px;
  background: var(--surface-2);
}
.baris-transaksi-info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; align-items: baseline; }
.baris-transaksi-tanggal { font-size: 0.86rem; font-weight: 600; color: var(--ink-3); }
.baris-transaksi-jumlah { font-size: 0.92rem; font-weight: 700; color: var(--sukses); }
.baris-transaksi-catatan { font-size: 0.86rem; color: var(--ink-3); flex-basis: 100%; }
.baris-transaksi-aksi { display: flex; gap: 10px; flex-wrap: wrap; }
.baris-transaksi-aksi .tombol { flex: 1 1 120px; min-height: 44px; font-size: 0.9rem; }
.editor-tambah { border-top: 1px solid var(--line); padding-top: 8px; }

.gambar-rekap {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-kecil);
  margin: 8px 0 12px;
  background: #fff;
}

/* ========================================================== Pengaturan ==== */
.baris-kegiatan {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.baris-kegiatan:last-child { border-bottom: 0; }
.baris-kegiatan-waktu { font-size: 0.82rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.baris-kegiatan-aksi { font-weight: 600; flex: 1; min-width: 0; }
.baris-kegiatan-user { font-size: 0.82rem; color: var(--ink-3); }

/* Satu baris pengaturan: nama di kiri, isian di kanan. Satuan jelas. */
.set-baris { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.set-baris-teks { flex: 1; min-width: 160px; }
.set-baris-nama { display: block; font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.set-baris-satuan { display: block; font-size: 0.82rem; color: var(--ink-3); }
.set-baris-isian { flex: none; width: 104px; }
.set-baris-isian .isian { text-align: center; font-weight: 700; }
.set-pemisah { height: 1px; background: var(--line); margin: 16px 0; }

/* =============================================================== Dialog ==== */
.dialog-latar {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(17, 24, 39, 0.55);
  padding: 0;
}
@media (min-width: 640px) {
  .dialog-latar { align-items: center; padding: 24px; }
}
.dialog {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--bayang-naik);
}
@media (min-width: 640px) { .dialog { border-radius: var(--r-besar); } }
.dialog-judul { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.01em; }
.dialog-isi { font-size: 0.98rem; color: var(--ink-2); }
.dialog-isi p { margin-bottom: 10px; }
.dialog-tombol {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  /* Tombol simpan selalu menempel di bawah dialog, supaya tidak perlu
     menggulir untuk menemukannya. */
  position: sticky;
  bottom: calc(-20px - env(safe-area-inset-bottom));
  background: var(--surface);
  padding: 14px 0 20px;
  border-top: 1px solid var(--line);
}
.dialog-tombol .tombol { flex: 1 1 150px; }

/* ============================================================== Kosong ==== */
.kosong { text-align: center; padding: 44px 20px; color: var(--ink-3); }
.kosong-ikon { display: block; width: 40px; height: 40px; margin: 0 auto 12px; color: var(--line-kuat); }
.kosong p { font-size: 0.98rem; margin-bottom: 6px; }
.sedang-disiapkan {
  background: var(--ingat-tint);
  border: 1px solid #f2dcae;
  border-radius: var(--r);
  padding: 18px;
  color: #78350f;
}
.daftar-angka { margin: 0; padding-left: 1.2em; }
.daftar-angka li { margin-bottom: 5px; }
.pemisah { height: 1px; background: var(--line); margin: 18px 0; border: 0; }

/* ============================================================= Navigasi ==== */
.navigasi {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 2px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.nav-tombol {
  flex: 1 1 auto;
  min-width: max-content;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 8px;
  border-radius: var(--r-kecil);
  text-decoration: none;
  color: var(--ink-3);
  font-size: 0.92rem;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.nav-tombol[aria-current="page"] { color: var(--brand); background: var(--brand-tint); }
.nav-ikon { width: 24px; height: 24px; }
.nav-teks { white-space: nowrap; }

/* ================================================================ Cetak ==== */
@media print {
  .kepala, .navigasi, .pesan-area, .bilah-cari, .tombol-baris, .tombol, .dialog-latar { display: none !important; }
  .isi { padding: 0 !important; }
  .tabel-bungkus { border: 0; box-shadow: none; }
  .tabel { font-size: 10.5pt; }
  .tabel thead th { background: #eee !important; color: #000 !important; }
  body { background: #fff; }
}