/* ─── app.css ───────────────────────────────────────────────────────────────────
   Gaya antarmuka MANTAP Teluk Betung.

   Rancangan mengutamakan ponsel: hampir seluruh pegawai mengisi laporan dari
   telepon genggam, jadi tombol dibuat besar, tabel bisa digeser mendatar, dan
   navigasi utama berada di bilah bawah yang mudah dijangkau jempol.

   Warna mengikuti identitas Bank Mandiri: biru tua sebagai warna utama dan
   kuning sebagai aksen.                                                       */

:root {
  --navy: #0b3a6f;
  --navy-terang: #1f4e79;
  --navy-lembut: #e8eef7;
  --kuning: #ffc000;
  --kuning-lembut: #fff6d9;
  --latar: #f2f5f9;
  --kartu: #ffffff;
  --teks: #10233a;
  --teks-lembut: #64748b;
  --garis: #dbe3ee;
  --hijau: #157f4a;
  --hijau-lembut: #e4f5eb;
  --merah: #c0392b;
  --merah-lembut: #fdecea;
  --jingga: #b26a00;
  --jingga-lembut: #fff4e5;
  --radius: 12px;
  --radius-kecil: 8px;
  --bayang: 0 1px 3px rgba(16, 35, 58, .08), 0 1px 2px rgba(16, 35, 58, .04);
  --bayang-tinggi: 0 10px 24px rgba(16, 35, 58, .12);
  --lebar: 1240px;
  --tinggi-nav-bawah: 60px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--teks);
  background: var(--latar);
  padding-bottom: calc(var(--tinggi-nav-bawah) + env(safe-area-inset-bottom, 0px));
}

a { color: var(--navy-terang); }

/* ─── Kepala & navigasi ──────────────────────────────────────────────────── */

.kepala {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-terang) 100%);
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: var(--bayang);
}

.kepala__merek { display: flex; align-items: center; gap: 10px; min-width: 0; }

.kepala__logo {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .5px;
  color: #fff;
  white-space: nowrap;
}
.kepala__logo span { color: var(--kuning); }

.kepala__cabang {
  font-size: 11px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kepala__kanan { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.kepala__pengguna {
  font-size: 12px;
  text-align: right;
  line-height: 1.25;
  max-width: 150px;
  overflow: hidden;
}
.kepala__pengguna strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nama jabatan kini panjang ("Branch Funding & Transaction Manager"). Dipotong
   satu baris dengan elipsis supaya tinggi bilah atas tetap 52 px — nilai itu
   diacu oleh `top` pada .nav-atas di bawah. */
.kepala__pengguna small {
  opacity: .8;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-atas {
  background: var(--navy-terang);
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 0 8px;
  position: sticky;
  top: 52px;
  z-index: 39;
  scrollbar-width: none;
}
.nav-atas::-webkit-scrollbar { display: none; }

.nav-atas a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 14px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav-atas a.aktif { color: #fff; border-bottom-color: var(--kuning); }
.nav-atas a:hover { color: #fff; }

.nav-bawah {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--tinggi-nav-bawah) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid var(--garis);
  display: flex;
  z-index: 45;
  box-shadow: 0 -2px 10px rgba(16, 35, 58, .06);
}

.nav-bawah a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--teks-lembut);
  text-decoration: none;
  font-weight: 500;
}
.nav-bawah a.aktif { color: var(--navy-terang); }
.nav-bawah a .ikon { font-size: 19px; line-height: 1; }

/* ─── Tata letak ─────────────────────────────────────────────────────────── */

.wadah { max-width: var(--lebar); margin: 0 auto; padding: 16px; }
.wadah--sempit { max-width: 520px; }
.wadah--lebar { max-width: 100%; }

.judul-halaman {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.judul-halaman h1 { font-size: 20px; margin: 0; }
.judul-halaman .keterangan { font-size: 13px; color: var(--teks-lembut); margin: 2px 0 0; }

.baris-tombol { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

/* ─── Kartu ──────────────────────────────────────────────────────────────── */

.kartu {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
  margin-bottom: 14px;
  overflow: hidden;
}

.kartu__kepala {
  padding: 12px 16px;
  border-bottom: 1px solid var(--garis);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: #fbfcfe;
}
.kartu__kepala h2 { font-size: 15px; margin: 0; }
.kartu__kepala .keterangan { font-size: 12px; color: var(--teks-lembut); margin: 2px 0 0; }
.kartu__isi { padding: 16px; }
.kartu__isi--rapat { padding: 0; }
.kartu__kaki { padding: 12px 16px; border-top: 1px solid var(--garis); background: #fbfcfe; }

/* ─── Statistik ──────────────────────────────────────────────────────────── */

.stat {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--bayang);
}
.stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--teks-lembut);
  font-weight: 600;
  margin-bottom: 4px;
}
.stat__nilai { font-size: 24px; font-weight: 700; line-height: 1.15; }
.stat__nilai--kecil { font-size: 18px; }
.stat__bawah { font-size: 12px; color: var(--teks-lembut); margin-top: 4px; }
.stat--utama { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-terang) 100%); color: #fff; border: 0; }
.stat--utama .stat__label, .stat--utama .stat__bawah { color: rgba(255, 255, 255, .8); }

/* ─── Tombol ─────────────────────────────────────────────────────────────── */

.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: var(--radius-kecil);
  border: 1px solid var(--garis);
  background: #fff;
  color: var(--teks);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease;
}
.tombol:hover { background: #f7f9fc; }
.tombol:active { transform: translateY(1px); }

.tombol--utama { background: var(--navy-terang); border-color: var(--navy-terang); color: #fff; }
.tombol--utama:hover { background: var(--navy); }

.tombol--kuning { background: var(--kuning); border-color: #e0a800; color: #3d2c00; }
.tombol--kuning:hover { background: #ffcf33; }

.tombol--hijau { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.tombol--hijau:hover { background: #12693d; }

.tombol--bahaya { background: #fff; border-color: #e8b4ae; color: var(--merah); }
.tombol--bahaya:hover { background: var(--merah-lembut); }

.tombol--kecil { padding: 7px 12px; min-height: 34px; font-size: 12.5px; }
.tombol--blok { width: 100%; }
.tombol--besar { padding: 15px 22px; min-height: 54px; font-size: 16px; }
.tombol:disabled { opacity: .55; cursor: not-allowed; }

/* ─── Lencana ────────────────────────────────────────────────────────────── */

.lencana {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
/* Varian untuk lencana yang memuat nama jabatan lengkap. Tanpa ini lencana
   memaksa satu baris dan menembus lebar layar ponsel. */
.lencana--panjang {
  white-space: normal;
  text-align: left;
  border-radius: 10px;
}
.lencana--abu { background: #eef1f6; color: var(--teks-lembut); }
.lencana--hijau { background: var(--hijau-lembut); color: var(--hijau); }
.lencana--kuning { background: var(--kuning-lembut); color: var(--jingga); }
.lencana--merah { background: var(--merah-lembut); color: var(--merah); }
.lencana--biru { background: var(--navy-lembut); color: var(--navy-terang); }

/* ─── Notifikasi ─────────────────────────────────────────────────────────── */

.pesan {
  padding: 12px 15px;
  border-radius: var(--radius-kecil);
  margin-bottom: 14px;
  font-size: 14px;
  border: 1px solid transparent;
}
.pesan--ok { background: var(--hijau-lembut); border-color: #b7e0c8; color: #0f5c36; }
.pesan--err { background: var(--merah-lembut); border-color: #f2c4be; color: #8f2b1f; }
.pesan--info { background: var(--navy-lembut); border-color: #c3d5ea; color: var(--navy); }
.pesan--kuning { background: var(--kuning-lembut); border-color: #f0dca0; color: #7a5200; }

/* ─── Tabel ──────────────────────────────────────────────────────────────── */

.bungkus-tabel { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th, .tabel td {
  padding: 9px 11px;
  text-align: left;
  border-bottom: 1px solid var(--garis);
  vertical-align: middle;
}
.tabel thead th {
  background: #f7f9fc;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--teks-lembut);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
.tabel tbody tr:hover { background: #fafbfd; }
.tabel .angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel .tengah { text-align: center; }
.tabel--rapat th, .tabel--rapat td { padding: 6px 8px; font-size: 12px; }
.tabel--matriks th, .tabel--matriks td { padding: 5px 6px; font-size: 11.5px; }
.tabel tfoot td { font-weight: 700; background: var(--kuning-lembut); }
.tabel .kolom-nama { font-weight: 600; white-space: nowrap; }
.tabel .nol { color: #c3ccd8; }

/* ─── Formulir ───────────────────────────────────────────────────────────── */

.bidang { margin-bottom: 14px; }
.bidang label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.bidang .bantuan { font-size: 12px; color: var(--teks-lembut); margin-top: 4px; }

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="time"], input[type="email"], select, textarea {
  width: 100%;
  padding: 11px 13px;
  min-height: 44px;
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
  font-size: 15px;
  font-family: inherit;
  color: var(--teks);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--navy-terang);
  outline-offset: -1px;
  border-color: var(--navy-terang);
}
textarea { min-height: 80px; resize: vertical; }
input[inputmode="numeric"] { font-variant-numeric: tabular-nums; }

/* Isian password dengan tombol "Lihat" di sisi kanan. Berguna di ponsel,
   tempat salah ketik jauh lebih sering terjadi daripada di komputer. */
.isian-password { position: relative; display: flex; align-items: stretch; }
.isian-password input { padding-right: 66px; }
.isian-password__lihat {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: #eef2f7;
  color: var(--navy-terang);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  padding: 7px 11px;
  border-radius: 6px;
  cursor: pointer;
}
.isian-password__lihat:active { background: var(--navy-lembut); }

.isian-angka { display: flex; align-items: stretch; gap: 0; }
.isian-angka input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  text-align: right;
  font-weight: 700;
  font-size: 17px;
}
.isian-angka__tombol {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--garis);
  border-left: 0;
  border-radius: 0 var(--radius-kecil) var(--radius-kecil) 0;
  overflow: hidden;
}
.isian-angka__tombol button {
  flex: 1;
  width: 42px;
  border: 0;
  background: #f2f5f9;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-terang);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.isian-angka__tombol button + button { border-top: 1px solid var(--garis); }
.isian-angka__tombol button:active { background: var(--navy-lembut); }

.baris-formulir { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ─── Form laporan harian ────────────────────────────────────────────────── */

.kelompok-produk {
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}
.kelompok-produk__judul {
  background: var(--navy-terang);
  color: #fff;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kelompok-produk__judul .subtotal { font-weight: 600; opacity: .9; font-size: 12px; }

.baris-produk {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #eef2f7;
}
.baris-produk:last-child { border-bottom: 0; }
.baris-produk.terisi { background: var(--hijau-lembut); }

.baris-produk__nama { font-size: 14px; font-weight: 600; }
.baris-produk__meta { font-size: 11.5px; color: var(--teks-lembut); margin-top: 2px; }
.baris-produk__meta strong { color: var(--navy-terang); }

/* Dua isian berdampingan untuk produk yang perolehannya dipecah menurut
   status nasabah. Di layar sempit tetap dua kolom agar pegawai bisa
   membandingkan New CIF dan Add On dalam satu pandangan. */
.isian-cif {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: end;
}
.isian-cif__kolom { min-width: 0; }
.isian-cif__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--navy-terang);
  margin-bottom: 3px;
}
.isian-cif__kolom:first-child .isian-cif__label { color: var(--hijau); }
.isian-cif__kolom:nth-child(2) .isian-cif__label { color: var(--jingga); }
.isian-angka--kecil input { font-size: 15px; padding: 8px 9px; min-height: 38px; }
.isian-angka--kecil .isian-angka__tombol button { width: 32px; font-size: 14px; }
.isian-cif__catatan {
  grid-column: 1 / -1;
  font-size: 10.5px;
  color: var(--jingga);
  margin-top: 2px;
}

.bilah-aksi {
  position: sticky;
  bottom: calc(var(--tinggi-nav-bawah) + 8px);
  z-index: 30;
  background: #fff;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--bayang-tinggi);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.bilah-aksi__total { flex: 1; min-width: 130px; font-size: 12px; color: var(--teks-lembut); }
.bilah-aksi__total strong { display: block; font-size: 17px; color: var(--teks); }

.detail-nasabah { border: 1px dashed var(--garis); border-radius: var(--radius-kecil); padding: 12px; background: #fbfcfe; }
.baris-nasabah { display: grid; grid-template-columns: 1.4fr 1fr 1fr 100px 40px; gap: 8px; margin-bottom: 8px; align-items: center; }
.baris-nasabah input, .baris-nasabah select { min-height: 38px; padding: 7px 9px; font-size: 13px; }

/* ─── Bilah kemajuan ─────────────────────────────────────────────────────── */

.bilah {
  height: 8px;
  background: #e8edf5;
  border-radius: 999px;
  overflow: hidden;
}
.bilah__isi { height: 100%; border-radius: 999px; background: var(--navy-terang); transition: width .4s ease; }
.bilah__isi--hijau { background: var(--hijau); }
.bilah__isi--kuning { background: var(--kuning); }
.bilah__isi--merah { background: var(--merah); }

.baris-kemajuan { margin-bottom: 12px; }
.baris-kemajuan__atas { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; gap: 10px; }
.baris-kemajuan__atas strong { font-weight: 600; }

/* ─── Grafik batang sederhana ────────────────────────────────────────────── */

.grafik {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 130px;
  padding: 8px 0;
  overflow-x: auto;
}
.grafik__batang {
  flex: 1 0 16px;
  min-width: 16px;
  background: linear-gradient(180deg, var(--navy-terang), #3b6ea5);
  border-radius: 3px 3px 0 0;
  position: relative;
  min-height: 2px;
}
.grafik__batang--kosong { background: #e2e8f0; }
.grafik__label { font-size: 9px; color: var(--teks-lembut); text-align: center; margin-top: 3px; }
.grafik__kolom { display: flex; flex-direction: column; flex: 1 0 16px; min-width: 16px; }

/* ─── Tab ────────────────────────────────────────────────────────────────── */

.tab { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--garis); margin-bottom: 14px; }
.tab a {
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teks-lembut);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
}
.tab a.aktif { color: var(--navy-terang); border-bottom-color: var(--navy-terang); }

/* ─── Halaman masuk ──────────────────────────────────────────────────────── */

.masuk {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(150deg, var(--navy) 0%, #16528f 55%, #1f4e79 100%);
}
.masuk__kartu {
  background: #fff;
  border-radius: 18px;
  padding: 30px 26px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.masuk__merek { text-align: center; margin-bottom: 22px; }
.masuk__merek .logo { font-size: 30px; font-weight: 800; letter-spacing: 1px; color: var(--navy); }
.masuk__merek .logo span { color: var(--kuning); }
.masuk__merek .sub { font-size: 11px; letter-spacing: 1.6px; color: var(--teks-lembut); text-transform: uppercase; margin-top: 2px; }
.masuk__merek .cabang { font-size: 12.5px; color: var(--teks-lembut); margin-top: 10px; }

/* ─── Lain-lain ──────────────────────────────────────────────────────────── */

.teks-lembut { color: var(--teks-lembut); }
.teks-kecil { font-size: 12px; }
.teks-tengah { text-align: center; }
.teks-kanan { text-align: right; }
.teks-merah { color: var(--merah); }
.teks-hijau { color: var(--hijau); }
.teks-jingga { color: var(--jingga); }
.tebal { font-weight: 700; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mt-2 { margin-top: 16px; }

.kosong { text-align: center; padding: 34px 18px; color: var(--teks-lembut); }
.kosong .ikon { font-size: 38px; margin-bottom: 8px; opacity: .5; }

.senarai-bersih { list-style: none; padding: 0; margin: 0; }
.senarai-bersih li { padding: 8px 0; border-bottom: 1px solid var(--garis); display: flex; justify-content: space-between; gap: 10px; }
.senarai-bersih li:last-child { border-bottom: 0; }

details.rincian { border: 1px solid var(--garis); border-radius: var(--radius-kecil); padding: 10px 12px; margin-bottom: 10px; background: #fff; }
details.rincian summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
details.rincian[open] summary { margin-bottom: 10px; }

/* Kartu checklist besar untuk pilihan yang perlu penjelasan, mis. status
   nasabah New CIF / Add On pada halaman Rincian Produk. */
.kartu-checklist {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border: 2px solid var(--garis);
  border-radius: var(--radius);
  cursor: pointer;
  background: #fff;
  align-items: flex-start;
  transition: border-color .15s ease, background .15s ease;
}
.kartu-checklist:hover { background: #fbfcfe; }
.kartu-checklist--aktif { border-color: var(--navy-terang); background: var(--navy-lembut); }
.kartu-checklist__teks { display: flex; flex-direction: column; gap: 2px; }
.kartu-checklist__teks strong { font-size: 15px; }

.pilihan-produk { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.pilihan-produk label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
  font-size: 13px;
  cursor: pointer;
  background: #fff;
}
.pilihan-produk label:hover { background: var(--navy-lembut); }
.pilihan-produk input { width: auto; min-height: 0; margin: 0; }

.tombol-wa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 10px;
}
.tombol-wa__ikon { font-size: 26px; }
.tombol-wa__teks { flex: 1; min-width: 0; }
.tombol-wa__teks strong { display: block; font-size: 14.5px; }
.tombol-wa__teks span { font-size: 12.5px; color: var(--teks-lembut); }

.status-titik { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.status-titik--hijau { background: var(--hijau); }
.status-titik--merah { background: var(--merah); }
.status-titik--abu { background: #b6c0cd; }

/* ─── Halaman input laporan tanpa login (/report) ────────────────────────── */

/* Tanpa menu aplikasi, jadi halaman ini punya bingkai sendiri. */
.report-publik {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 14px 40px;
}
.report-publik__merek {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--navy-lembut);
}
body:has(.report-publik) { padding-bottom: 24px; }

/* Baris kunjungan: nama, lokasi, keterangan, lalu tombol hapus. */
.baris-visit {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 1fr auto;
  gap: 7px;
  margin-bottom: 7px;
  align-items: center;
}
.baris-visit input { min-height: 40px; padding: 8px 10px; font-size: 13.5px; }
.baris-visit .tombol { min-height: 40px; padding: 0 12px; }

@media (max-width: 640px) {
  /* Di ponsel, nama dan lokasi berdampingan supaya hemat tempat, keterangan
     turun ke baris kedua. Ini isian yang paling sering dipakai di lapangan. */
  .baris-visit {
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "nama lokasi hapus"
      "ket  ket    ket";
  }
  .baris-visit input[name="visit_nama"] { grid-area: nama; }
  .baris-visit input[name="visit_lokasi"] { grid-area: lokasi; }
  .baris-visit input[name="visit_keterangan"] { grid-area: ket; }
  .baris-visit .hapus-visit { grid-area: hapus; }
}

/* ─── Halaman Piket ──────────────────────────────────────────────────────── */

.baris-piket-hari {
  padding: 13px 16px;
  border-bottom: 1px solid var(--garis);
}
.baris-piket-hari:last-child { border-bottom: 0; }
.baris-piket-hari__nama {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 7px;
}
.daftar-piket {
  list-style: none;
  counter-reset: piket;
  padding: 0;
  margin: 0 0 4px;
}
.daftar-piket li {
  counter-increment: piket;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-kecil);
  background: #f7f9fc;
  margin-bottom: 5px;
  font-size: 13px;
}
.daftar-piket li::before {
  content: counter(piket) ".";
  font-weight: 700;
  color: var(--teks-lembut);
  min-width: 18px;
}
.daftar-piket li > span:first-of-type { flex: 1; }

/* Kotak pratinjau bergaya gelembung WhatsApp. */
.pratinjau-wa {
  background: #dcf8c6;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 460px;
  box-shadow: var(--bayang);
  border: 1px solid #c5e8a8;
}

/* ─── Tabel akuisisi (gaya laporan MTD) ──────────────────────────────────── */

.tabel-akuisisi thead th { background: #eef2f7; }
.tabel-akuisisi .baris-grand-total td {
  background: var(--kuning);
  color: #4a3600;
  font-weight: 800;
  font-size: 12px;
  border-bottom: 3px solid #d9a400;
}
.tabel-akuisisi .baris-grand-total .matriks-nama-kolom { background: var(--kuning); }
.tabel-akuisisi .baris-tim td {
  background: var(--navy-lembut);
  color: var(--navy);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .3px;
  padding: 7px 11px;
  border-top: 2px solid #c3d5ea;
}
.tabel-akuisisi .baris-subtotal td {
  background: #f7f9fc;
  font-weight: 700;
  font-size: 11px;
  color: var(--teks-lembut);
  border-top: 1px solid var(--garis);
}
.tabel-akuisisi .ada-isi { background: var(--hijau-lembut); color: #0f5c36; font-weight: 700; }
.tabel-akuisisi .kolom-total { border-left: 2px solid var(--garis); background: #f7f9fc; font-weight: 700; }
.tabel-akuisisi .baris-nihil td { color: #9aa7b8; }
.pecahan-cif { font-size: 9.5px; font-weight: 600; line-height: 1.1; opacity: .85; }
.tabel-akuisisi .nol { color: #cdd6e1; }

.matriks-nama-kolom { position: sticky; left: 0; background: #fff; z-index: 3; }
.tabel--matriks thead th.matriks-nama-kolom { background: #f7f9fc; z-index: 4; }
.tabel--matriks tbody tr:hover .matriks-nama-kolom { background: #fafbfd; }

/* ─── Cetak ──────────────────────────────────────────────────────────────── */

@media print {
  .kepala, .nav-atas, .nav-bawah, .bilah-aksi, .baris-tombol, .tab,
  .judul-halaman .baris-tombol, form { display: none !important; }
  body { background: #fff; padding: 0; }
  .kartu { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .tabel { font-size: 9px; }
  /* Tabel akuisisi dicetak mendatar agar seluruh kolom produk muat. */
  .tabel-akuisisi { font-size: 8px; }
  .tabel-akuisisi th, .tabel-akuisisi td { padding: 3px 5px; }
  .bungkus-tabel { overflow: visible !important; }
  @page { size: A4 landscape; margin: 8mm; }
}

/* ─── Layar lebar ────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .kepala__pengguna { max-width: 260px; }
  .wadah { padding: 22px; }
}