:root {
  --gold-400: #CBAF87;
  --gold-500: #BC9E68;
  --gold-050: #F7EFDD;
  --bg:       #F8F3F6;
  --surface:  #FFFFFF;
  --ink:      #111111;
  --muted:    #8E8E93;
  --r-card:   22px;
  --r-header: 32px;
}

body {
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  padding-bottom: 6.5rem;
}

/* Jarak di atas hanya untuk memberi ruang tab bar dan FAB Scan. Bila keduanya
   tidak digambar, ruang itu justru menyisakan celah kosong di dasar halaman. */
body.tanpa-menu { padding-bottom: 0; }

input, select, textarea { font-size: 16px; }

/* ---------- Header ---------- */
.app-header {
  background: linear-gradient(160deg, var(--gold-400) 0%, var(--gold-500) 100%);
  border-bottom-left-radius:  var(--r-header);
  border-bottom-right-radius: var(--r-header);
  padding: calc(1.75rem + env(safe-area-inset-top)) 1.5rem 4.5rem;
  color: #fff;
}

.app-header h1 { font-size: 2rem;   font-weight: 800; line-height: 1.05; margin: 0; }
.app-header p  { font-size: 1.5rem; font-weight: 800; margin: 0; opacity: .95; }

.header-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  color: #fff; font-size: 1.25rem;
  text-decoration: none;
}

/* Varian untuk halaman kerja seperti tabel Forecast: header setinggi dashboard
   memakan ruang yang justru dibutuhkan daftar produknya. */
.app-header.ringkas {
  padding: calc(.9rem + env(safe-area-inset-top)) 1rem 3.25rem;
}

.app-header.ringkas h1 { font-size: 1.35rem; font-weight: 700; }
.app-header.ringkas .header-btn { width: 40px; height: 40px; font-size: 1.1rem; }

/* ---------- Grid menu ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 0 1rem;
  margin-top: -3rem;
}

.menu-card {
  background: var(--surface);
  border-radius: var(--r-card);
  aspect-ratio: 1 / .92;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .85rem;
  color: var(--ink); text-decoration: none;
  box-shadow: 0 6px 18px rgba(17, 17, 17, .07);
  transition: transform .12s ease;
}

.menu-card i    { font-size: 3rem; line-height: 1; }
.menu-card span { font-weight: 700; font-size: 1.05rem; }
.menu-card:active { transform: scale(.97); }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--surface);
  border-top-left-radius: 24px; border-top-right-radius: 24px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .06);
  padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
}

.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  font-size: .8rem; color: var(--muted); text-decoration: none;
}

.tabbar a i { font-size: 1.25rem; padding: .3rem 1.1rem; border-radius: 999px; }
.tabbar a.active      { color: var(--gold-500); font-weight: 700; }
.tabbar a.active i    { background: var(--gold-050); }
.tabbar .slot-tengah  { visibility: hidden; }

.fab-scan {
  position: fixed; left: 50%; z-index: 21;
  bottom: calc(2.9rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: 66px; height: 66px; border-radius: 999px;
  background: var(--gold-500); border: 4px solid var(--surface);
  color: #fff; font-size: 1.5rem;
  display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 6px 16px rgba(188, 158, 104, .45);
}

.fab-label {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 21;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  font-size: .8rem; color: var(--muted);
}

/* Tombol aksi utama halaman daftar, melayang di sudut kanan bawah.
   Sebelumnya tombol ini digambar sebagai tombol lebar di atas daftar, dan di
   ponsel ia ikut tergulir hilang begitu daftarnya panjang -- petugas yang
   membuka halaman lalu menggulir tidak pernah melihatnya lagi.
   Bentuknya pil, bukan bulat berisi ikon saja: satu tombol tambah yang cuma
   bergambar "+" menuntut orang menebak apa yang ditambahkan. */
.fab-aksi {
  position: fixed; z-index: 21;
  right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.35rem;
  border-radius: 999px;
  background: var(--gold-500);
  color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 16px rgba(188, 158, 104, .45);
}

.fab-aksi i { font-size: 1.15rem; }

.fab-aksi:hover, .fab-aksi:focus { background: var(--gold-400); color: #fff; }

/* Ruang di dasar daftar supaya baris terakhir tidak tertutup FAB. */
.fab-ruang { height: 5.5rem; }

/* ---------- Scan produk ---------- */
.scan-layar {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: #111;
}

/* object-fit: cover supaya gambar kamera tidak gepeng saat rasio layar dan
   rasio sensor berbeda -- yang gepeng gagal dibaca ZXing. */
.scan-video {
  display: block;
  width: 100%; height: 52vh;
  object-fit: cover;
}

/* Bingkai bidik. box-shadow selebar layar meredupkan bagian luar bingkai,
   jadi tidak perlu elemen tambahan hanya untuk menggelapkan sekitarnya. */
.scan-bingkai {
  position: absolute; inset: 16% 8%;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 1rem;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .28);
  pointer-events: none;
}

.scan-galat {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  padding: 1.5rem;
  background: rgba(17, 17, 17, .92);
  color: #fff;
}

.scan-stok { font-size: 1.6rem; font-weight: 800; }

/* Warnanya disamakan dengan stock_positive/stock_negative di Android. */
.scan-stok.plus  { color: #2E7D32; }
.scan-stok.minus { color: #D32F2F; }

/* Deskripsi datang dari server sebagai beberapa baris yang dipisah "\n". */
.scan-deskripsi { white-space: pre-line; }

@media (prefers-reduced-motion: reduce) {
  .menu-card { transition: none; }
}

/* ---------- Tombol utama ---------- */
.btn-emas {
  background: var(--gold-500);
  border: 1px solid var(--gold-500);
  color: #fff;
}

.btn-emas:hover, .btn-emas:focus { background: var(--gold-400); border-color: var(--gold-400); color: #fff; }
.btn-emas:disabled { background: var(--gold-400); border-color: var(--gold-400); color: #fff; opacity: .65; }

.btn-outline-emas {
  background: var(--surface);
  border: 1px solid var(--gold-400);
  color: var(--gold-500);
  font-weight: 600;
}

.btn-outline-emas:hover, .btn-outline-emas:focus { background: var(--gold-050); color: var(--gold-500); }
.btn-outline-emas:disabled { opacity: .55; }

/* Bootstrap tidak menyediakan utilitas ini, padahal text-truncate hanya bekerja
   bila item flex-nya boleh menyusut di bawah lebar kontennya. */
.min-width-0 { min-width: 0; }

/* ---------- Tabel Forecast ---------- */
/* Lima kolom mengikuti tabel di aplikasi Android. Kolom Produk memakai
   minmax(0, 1fr) supaya boleh menyusut -- tanpa batas 0 itu, nama produk yang
   panjang memaksa grid melebar dan kolom angka terdorong keluar layar. */
.fc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.4rem 2.4rem 2.8rem 3.6rem;
  gap: .35rem;
  align-items: center;
  padding: .55rem .6rem;
}

.fc-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--gold-050);
  border-bottom: 1px solid #EADFC8;
  font-size: .68rem; font-weight: 700;
  color: #6b5a3e;
}

.fc-head span + span { text-align: center; }

.fc-row { font-size: .82rem; }
.fc-row + .fc-row { border-top: 1px solid #F1EDE6; }
.fc-row .fc-angka { text-align: center; font-variant-numeric: tabular-nums; }

.fc-kode { font-weight: 700; font-size: .84rem; line-height: 1.2; }

.fc-nama {
  font-size: .72rem; line-height: 1.25; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Angka rekomendasi diberi warna aksen supaya mudah dibandingkan dengan kolom
   Forecast di sebelahnya, sama seperti di Android. */
.fc-rekom { font-weight: 700; color: var(--gold-500); }
.fc-rekom.nol { color: var(--muted); font-weight: 400; }

.fc-qty {
  padding: .3rem .25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
}

/* Panah penambah bawaan input number memakan lebar kolom yang sudah sempit. */
.fc-qty::-webkit-outer-spin-button,
.fc-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fc-qty { -moz-appearance: textfield; }

/* Menempel di dasar layar. Halaman ini memakai @section('tanpa-menu'), jadi tab
   bar dan FAB Scan tidak digambar dan tidak ada yang ditimpa. */
.fc-aksi {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex; gap: .5rem;
  background: var(--bg);
  padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
}

.fc-aksi .btn { padding-top: .6rem; padding-bottom: .6rem; }

/* Ruang supaya baris terakhir tetap bisa digulir melewati bilah aksi. */
.fc-ruang { height: 1rem; }

/* Tombol berikon saja (mis. Bagikan). Tidak ikut flex-fill: tiga tombol
   berteks di layar 360px tidak muat tanpa memotong labelnya. */
.btn-ikon { flex: 0 0 auto; width: 3rem; padding-left: 0; padding-right: 0; }

/* Kabar singkat di dasar layar, dipakai partials/bagikan-berkas. Diletakkan di
   atas bilah aksi yang menempel (.fc-aksi) supaya tidak tertutup. */
.kabar {
  position: fixed;
  left: 1rem; right: 1rem;
  bottom: calc(5rem + env(safe-area-inset-bottom));
  z-index: 1060;
  max-width: 26rem;
  margin: 0 auto;
  padding: .65rem .9rem;
  border-radius: 12px;
  background: rgba(17, 17, 17, .88);
  color: #fff;
  font-size: .85rem;
  text-align: center;
  opacity: 0;
  transform: translateY(.5rem);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.kabar.tampil { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .kabar { transition: none; }
}

/* ---------- Lembar dialog ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(17, 17, 17, .45);
}

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
  background: var(--surface);
  border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card);
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  max-height: 85vh; display: flex; flex-direction: column;
}

.sheet-hasil { overflow-y: auto; flex: 1 1 auto; }

.sheet-item {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid #F1EDE6;
  padding: .65rem .25rem;
}

.sheet-item:active { background: var(--gold-050); }

/* ---------- Tindakan ---------- */
/* Badge status dipakai daftar, detail, dan pratinjau. Warnanya ditentukan
   App\Support\StatusTindakan, salinan dari StatusColor.kt di Android, supaya
   label yang sama tidak pernah berbeda warna antara web dan aplikasi. */
.tk-status {
  display: inline-block;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .68rem; font-weight: 700; line-height: 1.3;
  color: #fff;
  max-width: 9.5rem;
}

.tk-status.abu    { background: #9E9E9E; }
.tk-status.hijau  { background: #27AE60; }
.tk-status.oranye { background: #F39C12; }
.tk-status.biru   { background: #3498DB; }
.tk-status.toska  { background: #16A085; }
.tk-status.merah  { background: #E74C3C; }
.tk-status.ungu   { background: #8E44AD; }
.tk-status.brand  { background: #2E68B2; }
.tk-status.netral { background: #757575; }

/* Baris pasien/dokter di kartu daftar. minmax(0,1fr) supaya nama panjang
   dipotong, bukan memaksa kartunya melebar. */
.tk-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .25rem .5rem;
  font-size: .75rem;
  color: var(--muted);
}

.tk-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Daftar keterangan dua kolom, dipakai kartu info dan langkah pratinjau form. */
.tk-info {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: .3rem .6rem;
  font-size: .82rem;
  margin: 0;
}

.tk-info dt { font-weight: 600; color: var(--muted); }
.tk-info dd { margin: 0; word-break: break-word; }

/* Accordion memakai <details> bawaan browser: tidak perlu JavaScript Bootstrap
   yang bertabrakan dengan penggambaran ulang Livewire. */
.tk-seksi { overflow: hidden; }

.tk-seksi-judul {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem;
  font-weight: 700; font-size: .9rem;
  cursor: pointer;
  list-style: none;
}

.tk-seksi-judul::-webkit-details-marker { display: none; }
.tk-seksi-judul i { transition: transform .15s ease; color: var(--gold-500); }
.tk-seksi[open] > .tk-seksi-judul i { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .tk-seksi-judul i { transition: none; }
}

/* Judul kit (satu paket tray / set implant) di atas rincian barangnya. */
.tk-kit {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .5rem .6rem;
  background: #FBF7EF;
  border-top: 1px solid #F1EDE6;
  font-size: .78rem; font-weight: 700;
}

.tk-kit > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tk-note {
  padding: .35rem .6rem;
  margin: 0;
  font-size: .72rem;
  color: var(--muted);
}

/* Empat kolom: nama barang lalu Kirim / Pakai / Kembali. Kolom Pakai dibuat
   paling lebar karena di sanalah kotak isian qty berada. */
.tk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.6rem 3.4rem 3rem;
  gap: .35rem;
  align-items: center;
  padding: .5rem .6rem;
}

.tk-head {
  background: var(--gold-050);
  border-bottom: 1px solid #EADFC8;
  font-size: .68rem; font-weight: 700;
  color: #6b5a3e;
}

.tk-head span + span { text-align: center; }

.tk-row { font-size: .82rem; }
.tk-row + .tk-row { border-top: 1px solid #F1EDE6; }
.tk-angka { text-align: center; font-variant-numeric: tabular-nums; }

/* Pemilih rumah sakit / dokter. Tampil seperti input, tapi sebenarnya tombol
   pembuka dialog pencarian -- id-nya hanya boleh datang dari hasil pencarian. */
.tk-pilih {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%;
  padding: .5rem .75rem;
  background: var(--surface);
  border: 1px solid #dee2e6; border-radius: .375rem;
  text-align: left; font-size: 16px;
}

.tk-pilih > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-pilih i { color: var(--muted); flex-shrink: 0; }
.tk-pilih.is-invalid { border-color: #dc3545; }

/* Baris dengan qty pakai melebihi qty kirim. Ditandai merah, bukan diperbaiki
   sendiri: yang salah bisa jadi qty kirimnya, dan itu hanya bisa dibetulkan
   di ERP. Tombol validasi laporan ikut dikunci selama masih ada baris ini. */
.tk-row.tk-salah { background: #FDECEA; }
.tk-row.tk-salah .tk-angka { color: #C0392B; font-weight: 700; }
.tk-row.tk-salah .fc-qty { border-color: #E74C3C; }

/* ---------- Pratinjau laporan ---------- */
/* Dibatasi lebarnya dengan alasan yang sama seperti .st-halaman: di layar lebar
   angka Kirim/Pakai/Kembali terlempar ke tepi kanan, jauh dari nama barangnya. */
.pv-halaman {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.pv-ringkas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.pv-kotak {
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem .25rem;
  border-radius: 12px;
  background: #FBF7EF;
}

.pv-kotak span   { font-size: .68rem; font-weight: 700; color: #6b5a3e; }
.pv-kotak strong { font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pv-kotak-pakai  { background: var(--gold-050); }
.pv-kotak-pakai strong { color: #8A6A2F; }

.pv-catatan {
  padding-top: .75rem;
  border-top: 1px solid #F1EDE6;
  font-size: .8rem;
  color: var(--muted);
}

/* Yang perlu diperiksa sebelum validasi adalah barang yang terpakai, jadi
   barisnya diberi warna dan angka nol di kolom Pakai diredupkan. */
.pv-pakai { color: var(--muted); }
.tk-row.pv-terpakai { background: #FFFAF0; }
.tk-row.pv-terpakai .pv-pakai { color: #8A6A2F; font-weight: 700; }

@media (min-width: 768px) {
  .pv-halaman .tk-grid { grid-template-columns: minmax(0, 1fr) 5rem 5rem 5rem; }
}

/* Pratinjau foto bukti tarik barang. Dibatasi tingginya supaya foto potret
   dari kamera ponsel tidak mendorong tombol aksi keluar layar. */
.tk-bukti {
  display: block;
  width: 100%;
  max-height: 14rem;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #F1EDE6;
}

/* ---------- Stocktake ---------- */

/* Halaman stocktake dibatasi lebarnya. Di layar lebar, kolom nama barang
   memakan seluruh sisa ruang sehingga kotak isian terlempar jauh ke tepi kanan
   dan mata harus menyeberangi layar kosong untuk setiap baris. */
.st-halaman {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Kolom angka dibuat selebar mungkin tanpa mendorong nama barang keluar layar:
   tiga kotak isian plus satu kolom total harus muat di layar ponsel 360px.
   Kolom Container sengaja lebih lebar dari dua tetangganya supaya judulnya
   tertulis utuh, bukan disingkat "Kont." yang bisa terbaca macam-macam. */
.st-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem 3rem 3.7rem 2.7rem;
  gap: .3rem;
  align-items: center;
  padding: .55rem .6rem;
}

.st-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--gold-050);
  border-bottom: 1px solid #EADFC8;
  font-size: .6rem; font-weight: 700;
  letter-spacing: -.01em;
  color: #6b5a3e;
}

.st-head span + span { text-align: center; }

/* Mulai lebar tablet ruangnya cukup untuk kotak isian yang lebih besar --
   angka diketik sambil memegang barang, jadi sasaran ketuk yang lebar
   membantu. Nama barang tetap kebagian sisa lebarnya. */
@media (min-width: 576px) {
  .st-grid {
    grid-template-columns: minmax(0, 1fr) 4rem 4rem 4.6rem 3.4rem;
    gap: .5rem;
    padding: .6rem .9rem;
  }

  .st-head { font-size: .72rem; letter-spacing: normal; }
}

.st-baris + .st-baris { border-top: 1px solid #F1EDE6; }
.st-row { font-size: .82rem; }

.st-kode { font-weight: 700; font-size: .84rem; line-height: 1.2; }

.st-nama {
  font-size: .72rem; line-height: 1.25; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Baris keterangan: principal, angka sistem, dan tombol catatan. Angka sistem
   ditaruh di sini, bukan sebagai kolom tersendiri, supaya lima kolom di atas
   tidak menyempit lagi. */
.st-sub {
  display: flex; align-items: center; gap: .4rem;
  font-size: .66rem; color: var(--muted); margin-top: .15rem;
}

.st-sub .plus  { color: #2E7D32; }
.st-sub .minus { color: #D32F2F; }

.st-catatan-tombol {
  margin-left: auto;
  border: 0; background: none; padding: 0 .15rem;
  color: var(--gold-500); font-size: .85rem; line-height: 1;
}

.st-catatan { padding: 0 .6rem .55rem; }

.st-qty {
  padding: .3rem .2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
}

.st-total {
  text-align: center; font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
}

/* Penyaring principal, digulir mendatar. */
.st-chips {
  display: flex; gap: .4rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: none;
}

.st-chips::-webkit-scrollbar { display: none; }

.st-chip {
  flex: 0 0 auto;
  border: 1px solid #E3D9C6;
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .74rem;
  white-space: nowrap;
}

.st-chip.aktif {
  background: var(--gold-050);
  border-color: var(--gold-500);
  color: var(--gold-500);
  font-weight: 700;
}

.st-progres {
  height: 6px;
  border-radius: 999px;
  background: #EFE7DA;
  overflow: hidden;
}

.st-progres-isi {
  height: 100%;
  background: var(--gold-500);
  border-radius: 999px;
}

/* Bilah Simpan menempel di dasar layar. Aturannya sama dengan .fc-aksi di
   Forecast; ditulis terpisah supaya perubahan di salah satu modul tidak
   diam-diam mengubah tampilan modul lainnya. */
.st-aksi {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex; gap: .5rem;
  background: var(--bg);
  padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
}

.st-aksi .btn { padding-top: .6rem; padding-bottom: .6rem; }

/* ---------- Penanda memuat bersama ---------- */

/* Dipakai oleh #pemuat di layouts/app.blade.php untuk seluruh halaman.
   pointer-events: none disengaja -- kalau JavaScript tersendat dan penanda ini
   tertinggal menyala, aplikasi tetap bisa diketuk, bukan terkunci di balik
   lapisan yang tidak mau hilang. */
.pemuat {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(248, 243, 246, .45);
  pointer-events: none;
}

.pemuat.tampil { display: flex; }

.pemuat-kotak {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}

.pemuat-kotak .spinner-border { color: var(--gold-500); }

/* ---------- Chat ---------- */

/* Satu baris di daftar percakapan / daftar kontak. */
.ch-item {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.ch-avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gold-050);
  color: var(--gold-500);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem;
}

.ch-avatar.grup { background: #E8EEF7; color: #2E68B2; }
.ch-avatar.kecil { width: 34px; height: 34px; font-size: .9rem; }

.ch-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--gold-500);
  color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 1;
}

/* Menempel di pojok tombol Pesan pada header beranda. */
.ch-badge-pojok {
  position: absolute;
  top: -4px; right: -4px;
  border: 2px solid var(--gold-500);
  background: #E74C3C;
}

/* Baris pilihan anggota grup. Dibuat setinggi jempol, bukan setinggi teks. */
.ch-pilih {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem;
  cursor: pointer;
}

.ch-pilih + .ch-pilih { border-top: 1px solid #F1EDE6; }
.ch-pilih:active { background: var(--gold-050); }

/* FAB dengan dua pilihan, memakai <details> supaya tidak butuh JavaScript. */
.ch-fab { position: fixed; right: 1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom)); z-index: 5; }

.ch-fab > summary {
  list-style: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  cursor: pointer;
}

.ch-fab > summary::-webkit-details-marker { display: none; }
.ch-fab[open] > summary { transform: rotate(45deg); }

.ch-fab-menu {
  position: absolute;
  right: 0; bottom: 68px;
  display: flex; flex-direction: column; gap: .5rem;
  align-items: flex-end;
}

.ch-fab-menu a {
  white-space: nowrap;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600; font-size: .88rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

.ch-fab-menu a i { color: var(--gold-500); margin-right: .3rem; }

/* Ruang percakapan: satu layar penuh yang TIDAK ikut bergulir.
   Header dan kotak tulis berukuran tetap, daftar pesan mengambil sisanya dan
   menggulir sendiri. Ini yang membuat kotak tulis selalu berada di dasar layar,
   termasuk saat percakapannya baru berisi satu pesan — position: sticky tidak
   bisa melakukannya, karena sticky baru menempel setelah isinya lebih tinggi
   daripada layar. */
.ch-layar {
  display: flex;
  flex-direction: column;
  height: 100vh;   /* cadangan untuk browser lama */
  height: 100dvh;  /* dvh ikut menyusut saat bilah alamat/keyboard muncul */
}

/* Ruang bawah header dipangkas. Angka 3.25rem di .app-header.ringkas ada
   supaya kartu di halaman lain bisa "menaiki" header dengan margin-top negatif;
   di sini tidak ada yang menaikinya, jadi ruang itu cuma jadi pita emas kosong
   setinggi 52 px persis di bawah nama lawan bicara. */
.ch-layar > .app-header {
  flex: 0 0 auto;
  padding-bottom: .9rem;
}

.ch-isi {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .75rem 1rem .5rem;
  /* Tarikan di ujung daftar berhenti di sini, tidak diteruskan ke halaman —
     supaya menggulir pesan tidak memicu pull-to-refresh browser. */
  overscroll-behavior: contain;
}

.ch-pemisah {
  display: flex; justify-content: center;
  margin: .8rem 0 .6rem;
}

.ch-pemisah span {
  background: #EFE7DA;
  color: var(--muted);
  font-size: .7rem; font-weight: 600;
  padding: .2rem .7rem;
  border-radius: 999px;
}

.ch-baris { display: flex; margin-bottom: .4rem; }
.ch-baris.saya { justify-content: flex-end; }

.ch-gelembung {
  max-width: 82%;
  background: var(--surface);
  border-radius: 16px 16px 16px 4px;
  padding: .5rem .7rem .3rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.ch-gelembung.saya {
  background: var(--gold-050);
  border-radius: 16px 16px 4px 16px;
}

.ch-nama { font-size: .74rem; font-weight: 700; color: var(--gold-500); margin-bottom: .15rem; }

/* white-space: pre-line supaya baris baru yang diketik pengirim tetap terlihat;
   word-break menjaga tautan panjang tanpa spasi tidak melebarkan gelembung
   sampai keluar layar. */
.ch-teks { white-space: pre-line; word-break: break-word; font-size: .92rem; }

.ch-jam { font-size: .65rem; color: var(--muted); text-align: right; margin-top: .1rem; }

.ch-gambar {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border-radius: 10px;
  margin-bottom: .3rem;
}

.ch-berkas {
  display: flex; align-items: center; gap: .4rem;
  background: rgba(0, 0, 0, .04);
  border-radius: 10px;
  padding: .45rem .6rem;
  margin-bottom: .3rem;
  color: var(--ink);
  text-decoration: none;
  font-size: .82rem;
  max-width: 100%;
}

.ch-berkas i { color: var(--gold-500); flex-shrink: 0; }

/* Kotak tulis pesan: anggota terakhir .ch-layar, jadi selalu di dasar layar
   tanpa position apa pun. */
.ch-komposer {
  flex: 0 0 auto;
  background: var(--bg);
  border-top: 1px solid #EFE7DA;
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
}

.ch-komposer-baris { display: flex; align-items: center; gap: .4rem; }

.ch-isian {
  border-radius: 999px;
  padding: .55rem .9rem;
}

.ch-tombol {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--gold-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  cursor: pointer;
}

.ch-tombol.kirim { background: var(--gold-500); color: #fff; }
.ch-tombol.kirim:disabled { opacity: .6; }

/* Antrean lampiran yang belum terkirim. */
.ch-antre { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }

.ch-antre-item {
  display: inline-flex; align-items: center; gap: .3rem;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid #E3D9C6;
  border-radius: 999px;
  padding: .25rem .5rem;
  font-size: .76rem;
}

.ch-antre-item i { color: var(--gold-500); }

.ch-antre-item .btn-buang {
  border: 0; background: none; padding: 0 .1rem;
  color: var(--muted); font-size: .7rem; line-height: 1;
}

/* ---------- Halaman masuk ---------- */

/* Latar emas satu layar penuh, kartu putih melayang di tengahnya. Bentuk yang
   sama dengan header aplikasi (linear-gradient 160deg gold-400 -> gold-500),
   supaya halaman pertama yang dilihat petugas sudah memakai bahasa visual yang
   sama dengan isi aplikasinya. */
.login-layar {
  min-height: 100vh;   /* cadangan untuk browser lama */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  background: linear-gradient(160deg, var(--gold-400) 0%, var(--gold-500) 100%);
}

/* Kartu dipusatkan dengan margin auto atas-bawah, SENGAJA bukan
   justify-content: center pada induknya. Dengan justify-content, isi yang lebih
   tinggi daripada layar (kasus keyboard terbuka di layar pendek) meluber ke
   atas DAN ke bawah, dan bagian atasnya tidak bisa digulir untuk dimunculkan —
   logo beserta kotak Username hilang permanen. Margin auto runtuh menjadi 0
   begitu ruangnya habis, jadi isinya tetap utuh dan bisa digulir. */
.login-kartu {
  width: 100%;
  max-width: 26rem;
  margin-top: auto;
  margin-bottom: auto;
  background: var(--surface);
  border-radius: 26px;
  padding: 2rem 1.5rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
}

/* Logo wordmark, berkas yang sama persis dengan drawable/logo.png di Android.
   Tulisannya hitam, jadi tempatnya di kartu putih — bukan di latar emas. */
.login-logo {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
  margin: 0 auto .35rem;
}

.login-sambutan {
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

/* Kotak isian bergaya outlined seperti TextInputLayout.OutlinedBox di Android:
   sudut membulat, garis tipis, dan label yang naik saat diisi. */
.login-isian { position: relative; margin-bottom: 1rem; }

.login-isian .form-control {
  height: 3.75rem;
  border-radius: 16px;
  border: 1.5px solid #E3D9C6;
  padding: 1.4rem .95rem .45rem;
  background: var(--surface);
}

.login-isian .form-control:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 .18rem rgba(188, 158, 104, .18);
}

/* background-image: none membuang ikon seru bawaan Bootstrap. Ikon itu digambar
   di sudut kanan, tempat yang di sini sudah dipakai tombol lihat kata sandi. */
.login-isian .form-control.is-invalid {
  border-color: #E74C3C;
  background-image: none;
}

/* Ruang untuk tombol mata. Tidak bisa memakai [type="password"]: type-nya
   berubah menjadi "text" begitu tombolnya ditekan, dan padding-nya akan ikut
   hilang tepat saat isiannya sedang dibaca. */
.login-isian.punya-mata .form-control { padding-right: 3.2rem; }

.login-isian label {
  position: absolute;
  top: 1.15rem; left: 1rem;
  color: var(--muted);
  font-size: 1rem;
  pointer-events: none;
  transition: transform .12s ease, font-size .12s ease, color .12s ease;
  transform-origin: left top;
}

/* :placeholder-shown menandai kotak yang masih kosong. Input-nya diberi
   placeholder=" " (satu spasi) supaya penanda ini bekerja — tanpa itu label
   tidak pernah turun kembali saat isian dikosongkan. */
.login-isian .form-control:focus + label,
.login-isian .form-control:not(:placeholder-shown) + label {
  transform: translateY(-.72rem) scale(.78);
  color: var(--gold-500);
}

/* Tombol lihat/sembunyikan kata sandi, padanan endIconMode="password_toggle". */
.login-mata {
  position: absolute;
  top: 50%; right: .35rem;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border: 0; background: none;
  color: var(--muted);
  font-size: 1.05rem;
  border-radius: 50%;
}

.login-mata:active { background: var(--gold-050); }

/* Tinggi 60dp dan sudut 30dp, angka yang sama dengan MaterialButton di
   activity_login.xml. */
.login-tombol {
  width: 100%;
  height: 3.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--gold-500);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}

.login-tombol:disabled { opacity: .75; }