/* KasirBuku — gaya tampilan
   Bersih dan polos: latar putih/abu muda, satu warna biru, tanpa garis pemisah atau corak. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
:root {
  --tinta: #1F2A44; --biru: #2F4BD8; --biru-tua: #2238AE; --biru-muda: #EDF1FE;
  --kertas: #F5F6F8; --putih: #fff; --garis: #EEF0F4; --garis-tua: #D8DCE5; --isi-lembut: #F4F5F8;
  --teks: #1F2937; --abu: #6B7280;
  --merah: #D12F36; --merah-muda: #FDEEEE; --hijau: #0F7A56; --hijau-muda: #E6F6EF;
  --jingga: #AD5600; --jingga-muda: #FFF3E0;
  --r: 10px; --r-besar: 16px;
  --bayang-kartu: 0 1px 2px rgba(16,24,40,.05);
  --bayang: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.07);
  --bayang-besar: 0 12px 48px rgba(16,24,40,.18);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5;
  color: var(--teks); background: var(--kertas); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; color: var(--tinta); }
h1 { font-size: 22px; font-weight: 750; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
p { margin: 0; }
a { color: var(--biru); }
.angka, td.r, th.r { font-variant-numeric: tabular-nums; }
.sub { display: block; font-size: 12px; color: var(--abu); font-weight: 500; }
.abu { color: var(--abu); } .kecil { font-size: 12.5px; } .tebal { font-weight: 700; }
.merah { color: var(--merah); } .hijau { color: var(--hijau); } .jingga { color: var(--jingga); }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; border-radius: 6px; }
.sembunyi { display: none !important; }

/* ---------- tombol ---------- */
.btn { color: var(--teks); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r);
  border: 1px solid var(--garis-tua); background: var(--putih); font-weight: 650; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: #F7F8FC; border-color: #B4BDD1; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.utama { background: var(--biru); border-color: var(--biru); color: #fff; }
.btn.utama:hover { background: var(--biru-tua); border-color: var(--biru-tua); }
.btn.bahaya { background: var(--merah); border-color: var(--merah); color: #fff; }
.btn.hantu { border-color: transparent; background: transparent; }
.btn.hantu:hover { background: rgba(47,75,216,.08); }
.btn.kecil { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn.besar { height: 50px; padding: 0 20px; font-size: 16px; border-radius: 12px; }
.btn.ikon { width: 38px; padding: 0; } .btn.ikon.kecil { width: 30px; }
.btn.penuh { width: 100%; }

/* ---------- formulir ---------- */
.kolom { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kolom > label { font-size: 12.5px; font-weight: 650; color: #3A4563; }
.kolom .petunjuk { font-size: 12px; color: var(--abu); }
.inp, select.inp, textarea.inp { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--garis-tua); border-radius: var(--r); background: #fff; }
textarea.inp { height: auto; min-height: 76px; padding: 9px 12px; resize: vertical; }
.inp:focus { outline: none; border-color: var(--biru); box-shadow: 0 0 0 3px rgba(47,75,216,.16); }
.inp[readonly] { background: #F5F6FA; }
.inp.salah, .inp.salah:focus { border-color: var(--merah); box-shadow: 0 0 0 3px rgba(209,47,54,.14); }
.inp.r { text-align: right; }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-form .penuh { grid-column: 1 / -1; }
.cek { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.cek input { width: 18px; height: 18px; accent-color: var(--biru); }
.saklar { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.saklar input { position: absolute; opacity: 0; }
.saklar i { width: 40px; height: 22px; border-radius: 12px; background: #C6CCDB; position: relative; transition: background .15s; flex: none; }
.saklar i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.saklar input:checked + i { background: var(--biru); }
.saklar input:checked + i::after { transform: translateX(18px); }
.saklar input:focus-visible + i { outline: 2px solid var(--biru); outline-offset: 2px; }
.segmen { display: inline-flex; background: #E8EBF3; border-radius: var(--r); padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmen button { border: 0; background: transparent; height: 32px; padding: 0 14px; border-radius: 8px; font-weight: 650; color: #4A5571; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.langkah { margin: 12px 0 0; padding-left: 20px; color: #3A4563; display: grid; gap: 6px; } .langkah b { color: var(--tinta); }
.segmen button:disabled { opacity: .4; cursor: not-allowed; }
.segmen button.aktif { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(27,37,89,.15); }

/* ---------- halaman masuk ---------- */
/* ---------- halaman masuk: rak buku di kiri (pita atas di HP), formulir di kanan ---------- */
.masuk { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(430px, 1fr); background: #fff; }
.masuk-rak { position: relative; overflow: hidden; min-height: 100vh; min-height: 100dvh; background: radial-gradient(120% 90% at 18% 8%, #24357F 0%, #131C4A 46%, #0B1026 100%); }
.masuk-rak::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11,16,38,0) 42%, rgba(11,16,38,.9) 96%); }
.rak-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rak-svg .b { animation: rak-naik .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 9ms + 40ms); }
@keyframes rak-naik { from { opacity: 0; transform: translateY(18px); } }
.rak-teks { position: absolute; z-index: 1; left: 48px; right: 48px; bottom: 44px; color: #fff; }
.rak-teks b { display: block; max-width: 15em; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.18; letter-spacing: -.025em; font-weight: 800; }
.rak-teks span { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); }
.masuk-sisi { display: grid; place-items: center; padding: 40px 36px; min-width: 0; }
.masuk-kotak { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.masuk-kotak h1 { font-size: 34px; letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 2px; }
.masuk-kotak .kolom label { font-size: 13.5px; font-weight: 650; margin-bottom: 7px; }
.masuk-kotak .isian { position: relative; }
.masuk-kotak .isian > .ic { position: absolute; left: 15px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; color: #8089A3; pointer-events: none; transition: color .15s; }
.masuk-kotak .isian .inp { height: 52px; padding-left: 46px; font-size: 16px; border-radius: 14px; border: 1.5px solid transparent; background: #F1F3F9; transition: background .15s, border-color .15s, box-shadow .15s; }
.masuk-kotak .isian .inp:hover { background: #ECEFF7; }
.masuk-kotak .isian .inp:focus { background: #fff; border-color: var(--biru); box-shadow: 0 0 0 4px rgba(47,75,216,.14); }
.masuk-kotak .isian:focus-within > .ic { color: var(--biru); }
.masuk-kotak .isian .inp.salah, .masuk-kotak .isian .inp.salah:focus { background: #fff; border-color: var(--merah); box-shadow: 0 0 0 4px rgba(209,47,54,.12); }
.masuk-kotak .sandi-wrap .inp { padding-right: 50px; }
.masuk-kotak .sandi-wrap .mata { right: 8px; top: 8px; width: 36px; height: 36px; border-radius: 10px; }
.masuk-kotak .btn.besar { height: 54px; border-radius: 14px; font-size: 16.5px; font-weight: 700; margin-top: 4px; box-shadow: 0 10px 22px rgba(47,75,216,.26); }
.masuk-kotak .btn.besar:disabled { box-shadow: none; }
/* kotak verifikasi Cloudflare Turnstile */
.masuk-cf { min-height: 65px; display: grid; }
.masuk-cf > div:not([class]) { width: 100%; }
.cf-tunggu, .cf-gagal { display: flex; align-items: center; gap: 10px; min-height: 65px; padding: 10px 14px; border-radius: 14px; background: #F1F3F9; color: var(--abu); font-size: 13.5px; }
.cf-tunggu .ic, .cf-gagal .ic { width: 18px; height: 18px; flex: none; }
.cf-gagal { background: #FFF4E5; color: #8A4B00; } .cf-gagal span { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .masuk { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .masuk-rak { min-height: 0; height: clamp(190px, 31vh, 300px); }
  .masuk-rak::after { background: linear-gradient(180deg, rgba(11,16,38,.05) 20%, rgba(11,16,38,.86) 92%); }
  .rak-teks { left: 22px; right: 22px; bottom: 44px; } .rak-teks b { font-size: 21px; max-width: 14em; } .rak-teks span { margin-top: 5px; font-size: 13.5px; }
  .masuk-sisi { position: relative; margin-top: -26px; padding: 26px 20px 30px; background: #fff; border-radius: 26px 26px 0 0; place-items: start center; }
  .masuk-kotak { max-width: 420px; gap: 16px; } .masuk-kotak h1 { font-size: 29px; }
}
@media (max-height: 560px) and (max-width: 900px) { .masuk-rak { height: 120px; } .rak-teks span { display: none; } .rak-teks { bottom: 38px; } }
@media (prefers-reduced-motion: reduce) { .rak-svg .b { animation: none; } }
.masuk-kotak .pita { padding: 12px 14px; align-items: flex-start; gap: 10px; font-size: 13.5px; } .masuk-kotak .pita .teks { min-width: 0; }
.masuk-kotak #masuk-pesan:empty { display: none; }
.masuk-kotak .caps { display: flex; align-items: center; gap: 6px; color: var(--jingga); font-weight: 600; } .masuk-kotak .caps .ic { width: 14px; height: 14px; }
.masuk-kotak .caps.sembunyi { display: none; }
.masuk-kotak.goyang { animation: goyang .38s ease; }
@keyframes goyang { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.merek { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--tinta); }
.merek .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--biru); color: #fff; display: grid; place-items: center; }
.merek .logo-emblem { height: 32px; width: auto; flex: none; display: block; }

/* ---------- kerangka aplikasi ---------- */
.app { display: grid; grid-template-columns: 244px minmax(0, 1fr); height: 100vh; height: 100dvh; }
/* Di dalam aplikasi, halaman itu sendiri tidak tergulir: yang bergulir hanya isi di tengah. Tinggi mengikuti layar yang benar-benar
   terlihat (100dvh) dan tarikan melewati batas (efek karet dan tarik-untuk-muat-ulang di HP) dimatikan, supaya bilah atas tidak ikut
   bergeser dan tidak ada sisa gambar halaman yang tertinggal di bagian atas layar. */
@media screen {
  html.di-aplikasi, html.di-aplikasi body { overflow: hidden; overscroll-behavior: none; }
}
.sisi { background: #fff; color: #4B5565; display: flex; flex-direction: column; min-height: 0; }
.sisi .merek { padding: 18px 18px 14px; }
.sisi nav { flex: 1; overflow-y: auto; padding: 4px 10px 16px; scrollbar-width: thin; scrollbar-color: #D8DCE5 transparent; }
.sisi .grup { font-size: 11.5px; font-weight: 700; color: #9AA1AE; padding: 16px 10px 6px; }
.sisi a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: inherit; text-decoration: none; font-weight: 600; position: relative; }
.sisi a:hover { background: var(--isi-lembut); color: var(--tinta); }
.sisi a.aktif { background: var(--biru-muda); color: var(--biru); font-weight: 700; }
.sisi a .lencana { margin-left: auto; }
.sisi .kaki { padding: 12px 18px 16px; font-size: 12px; color: #9AA1AE; }
.lencana { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--merah); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
.kanan { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.atas { height: 60px; flex: none; background: #fff; display: flex; align-items: center; gap: 10px; padding: 0 20px; }
.atas .judul { font-size: 17px; font-weight: 750; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atas .dorong { flex: 1; }
.atas .tombol-menu { display: none; }
.pilih-lokasi { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--r); background: var(--isi-lembut); font-weight: 650; max-width: 280px; }
.pilih-lokasi select { border: 0; background: transparent; font-weight: 650; max-width: 200px; outline: none; cursor: pointer; text-overflow: ellipsis; }
.pilih-lokasi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lonceng { position: relative; }
.btn.lonceng { border-color: transparent; background: var(--isi-lembut); }
.lonceng .lencana { position: absolute; top: -5px; right: -5px; border: 2px solid #fff; height: 22px; }
.profil { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: var(--r); }
.profil:hover { background: var(--isi-lembut); }
.profil .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--biru-muda); color: var(--biru); display: grid; place-items: center; font-weight: 800; }
.profil .nama { text-align: left; line-height: 1.2; }
.profil .nama b { display: block; font-size: 13px; }
.profil .nama span { font-size: 11.5px; color: var(--abu); }
.isi { flex: 1; overflow: auto; padding: 22px 24px 40px; min-height: 0; overscroll-behavior: none; }
.atas { position: relative; z-index: 3; }
.sisi nav, .modal-latar, .modal .badan, .bungkus-tabel, .melayang { overscroll-behavior: contain; }
.isi.rapat { padding: 16px; overflow: hidden; }
.tabir { display: none; }

/* ---------- panel melayang (notifikasi, profil) ---------- */
.melayang { position: fixed; z-index: 60; background: #fff; border-radius: var(--r-besar); box-shadow: var(--bayang-besar); width: 360px; max-width: calc(100vw - 24px); overflow: hidden; animation: muncul .14s ease-out; }
@keyframes muncul { from { opacity: 0; transform: translateY(-6px); } }
.melayang header { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; }
.melayang .daftar { max-height: min(60vh, 440px); overflow: auto; padding: 0 8px 8px; }
.notif { display: flex; gap: 12px; padding: 11px 10px; border-radius: 12px; cursor: pointer; text-decoration: none; color: inherit; align-items: flex-start; }
.notif:hover { background: var(--isi-lembut); }
.notif .bulat { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.notif.bahaya .bulat { background: var(--merah-muda); color: var(--merah); }
.notif.awas .bulat { background: var(--jingga-muda); color: var(--jingga); }
.notif.info .bulat { background: var(--biru-muda); color: var(--biru); }
.notif b { display: block; font-size: 13.5px; }
.notif span { font-size: 12.5px; color: var(--abu); }
.notif .ic.panah { margin-left: auto; align-self: center; color: #A9B1C6; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; background: transparent; cursor: pointer; font-weight: 600; text-align: left; }
.menu-item:hover { background: var(--isi-lembut); }

/* ---------- toast (notifikasi singkat) ---------- */
/* muncul di kanan bawah (yang lebih baru menumpuk di atasnya) dan hilang sendiri setelah 2 detik, supaya bagian atas layar tidak tertutup */
#toasts { position: fixed; top: auto; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column-reverse; gap: 10px; width: 340px; max-width: calc(100vw - 24px); pointer-events: none; }
.toast { pointer-events: auto; background: #fff; border-radius: 14px; box-shadow: var(--bayang-besar); padding: 12px; display: flex; gap: 12px; align-items: flex-start;
  position: relative; overflow: hidden; animation: toast-masuk .28s cubic-bezier(.2,.9,.3,1.15); }
.toast.keluar { animation: toast-keluar .2s ease-in forwards; }
@keyframes toast-masuk { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes toast-keluar { to { opacity: 0; transform: translateY(10px); } }
.toast .bulat { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.toast.ok .bulat { background: var(--hijau-muda); color: var(--hijau); }
.toast.galat .bulat { background: var(--merah-muda); color: var(--merah); }
.toast.awas .bulat { background: var(--jingga-muda); color: var(--jingga); }
.toast.info .bulat { background: var(--biru-muda); color: var(--biru); }
.toast .teks { flex: 1; min-width: 0; padding-top: 1px; }
.toast .teks b { display: block; font-size: 13.5px; color: var(--tinta); }
.toast .teks span { font-size: 13px; color: #4A5571; display: block; overflow-wrap: anywhere; }
.toast .teks .btn { margin-top: 8px; }
.toast .tutup { border: 0; background: transparent; color: #9AA3BA; cursor: pointer; padding: 2px; border-radius: 6px; }
.toast .tutup:hover { color: var(--teks); background: #F2F4FA; }

/* ---------- modal ---------- */
.modal-latar { position: fixed; inset: 0; z-index: 80; background: rgba(20,27,64,.5); display: grid; place-items: center; padding: 16px; animation: pudar .15s; overflow: auto; }
@keyframes pudar { from { opacity: 0; } }
.modal { background: #fff; border-radius: 18px; box-shadow: var(--bayang-besar); width: 100%; max-width: 520px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; animation: naik .2s cubic-bezier(.2,.9,.3,1.1); }
@keyframes naik { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal.sm { max-width: 400px; } .modal.lg { max-width: 760px; } .modal.xl { max-width: 1040px; }
.modal > header { padding: 18px 20px 6px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal > header h2 { font-size: 18px; }
.modal > .badan { padding: 12px 20px 18px; overflow: auto; }
.modal > footer { padding: 6px 20px 18px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.tanya { text-align: center; padding: 8px 4px 0; }
.tanya .bulat { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 14px; background: var(--biru-muda); color: var(--biru); }
.tanya .bulat .ic { width: 26px; height: 26px; }
.tanya.bahaya .bulat { background: var(--merah-muda); color: var(--merah); }
.tanya.sukses .bulat { background: var(--hijau-muda); color: var(--hijau); }
.tanya h2 { font-size: 18px; margin-bottom: 6px; }
.tanya p { color: #4A5571; }

/* ---------- kartu, tabel, lencana ---------- */
.kepala { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kepala .dorong, .baris > .dorong, .modal footer > .dorong { flex: 1; }
.kepala .cari { position: relative; width: 260px; max-width: 100%; }
.kepala .cari .ic { position: absolute; left: 12px; top: 11px; color: var(--abu); }
.kepala .cari .inp { padding-left: 38px; }
.kartu { background: #fff; border-radius: var(--r-besar); box-shadow: var(--bayang-kartu); }
.kartu.isi-kartu { padding: 18px; }
.kartu > header { padding: 16px 18px 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kisi { display: grid; gap: 14px; }
.kisi.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kisi.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kisi.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kisi.oto { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat { background: #fff; box-shadow: var(--bayang-kartu); border-radius: var(--r-besar); padding: 16px 18px; min-width: 0; }
.stat .label { font-size: 12.5px; color: var(--abu); font-weight: 600; }
.stat .nilai { font-size: 23px; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.2; }
.stat .ket { font-size: 12px; color: var(--abu); margin-top: 3px; }
.stat.sorot { background: var(--biru); }
.stat.sorot .label { color: #DCE3FB; } .stat.sorot .nilai { color: #fff; }
/* tabel data menggulir di dalam bingkainya, judul kolom tetap terlihat */
.bungkus-tabel { overflow: auto; max-height: calc(100vh - 170px); border-radius: var(--r-besar); box-shadow: var(--bayang-kartu); background: #fff; scrollbar-width: thin; scrollbar-color: #D8DCE5 transparent; }
.modal .bungkus-tabel { max-height: 52vh; }
table.tabel { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabel th { text-align: left; font-size: 12px; font-weight: 700; color: var(--abu); padding: 14px 14px 10px; background: #fff; white-space: nowrap; position: sticky; top: 0; z-index: 2; box-shadow: 0 -4px 0 #fff; }
.tabel .nw { white-space: nowrap; }
.tabel td { padding: 11px 14px; vertical-align: middle; }
.tabel tbody tr:hover td { background: var(--isi-lembut); }
.tabel tr.klik { cursor: pointer; }
.tabel .r { text-align: right; white-space: nowrap; }
.tabel td.t-waktu, .tabel td.t-tgl { white-space: nowrap; }
.tabel td > b:only-child { white-space: nowrap; } .tabel .t { text-align: center; }
.tabel td.aksi { text-align: right; white-space: nowrap; width: 1%; }
.tabel tr.tebal td { font-weight: 750; color: var(--tinta); }
.tabel .lebar { min-width: 230px; }
.tabel th.lipat { white-space: normal; min-width: 96px; max-width: 150px; line-height: 1.3; }
.kosong { text-align: center; padding: 44px 20px; color: var(--abu); }
.kosong .ic { width: 34px; height: 34px; color: #B7BFD3; margin-bottom: 8px; }
.kosong b { display: block; color: var(--tinta); font-size: 15px; margin-bottom: 2px; }
.pil { display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--isi-lembut); color: #4B5565; }
.pil.hijau { background: var(--hijau-muda); color: var(--hijau); } .pil.merah { background: var(--merah-muda); color: var(--merah); }
.pil.jingga { background: var(--jingga-muda); color: var(--jingga); } .pil.biru { background: var(--biru-muda); color: var(--biru); }
.tab { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab button { border: 0; background: transparent; height: 36px; padding: 0 14px; font-weight: 650; color: var(--abu); cursor: pointer; border-radius: 10px; white-space: nowrap; }
.tab button:hover { background: #ECEEF2; }
.tab button.aktif { color: var(--biru); background: var(--biru-muda); }
.pita { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-besar); margin-bottom: 16px; flex-wrap: wrap; }
.pita .teks { flex: 1; min-width: 200px; } .pita b { display: block; color: var(--tinta); }
.pita.awas { background: var(--jingga-muda); } .pita.awas > .ic { color: var(--jingga); }
.pita.bahaya { background: var(--merah-muda); } .pita.bahaya > .ic { color: var(--merah); }
.pita.info { background: var(--biru-muda); } .pita.info > .ic { color: var(--biru); }
.pita.ok { background: var(--hijau-muda); } .pita.ok > .ic { color: var(--hijau); }
.pita > .ic { width: 22px; height: 22px; }
.baris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.antara { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rincian { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.rincian dt { color: var(--abu); } .rincian dd { margin: 0; font-weight: 600; text-align: right; }
.grafik { display: flex; align-items: flex-end; gap: 8px; height: 170px; padding-top: 8px; }
.grafik .batang { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; min-width: 0; }
.grafik .batang i { width: 100%; max-width: 46px; background: #C9D3F8; border-radius: 6px; min-height: 3px; }
.grafik .batang.kini i { background: var(--biru); }
.baris-daftar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; }
.grafik .batang span { font-size: 11px; color: var(--abu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.grafik .batang em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--tinta); white-space: nowrap; }

/* ---------- kasir ---------- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 14px; height: 100%; }
.pos-kiri { display: flex; flex-direction: column; min-height: 0; gap: 12px; }
.pos-cari { position: relative; }
.pos-cari .ic { position: absolute; left: 14px; top: 14px; color: var(--abu); }
.pos-cari .inp { height: 46px; padding-left: 42px; font-size: 15px; border-radius: 12px; }
.kat-baris { display: flex; gap: 8px; align-items: flex-start; flex: none; }
.chip-baris { display: flex; gap: 8px; flex-wrap: wrap; overflow: hidden; max-height: 38px; padding: 2px; flex: 1; min-width: 0; }
.chip-baris.buka { max-height: none; }
.chip-baris .chip.semua { order: -2; } .chip-baris .chip.aktif { order: -1; }
.chip.lebih { margin-top: 2px; padding: 0 10px; } .chip.lebih[aria-expanded=true] .ic { transform: rotate(180deg); }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; border: 0; background: #fff; box-shadow: var(--bayang-kartu); font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--w, var(--biru)); }
.chip.aktif { background: var(--biru); color: #fff; }
.chip.aktif i { background: #fff; }
.produk-kisi { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; align-content: start; padding: 2px 2px 12px; }
.produk { text-align: left; background: #fff; border: 0; border-radius: 13px; padding: 12px 12px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
  box-shadow: var(--bayang-kartu); min-height: 104px; transition: transform .08s, box-shadow .12s; position: relative; }
.produk:hover { box-shadow: var(--bayang); } .produk:active { transform: scale(.97); }
.produk .nm { font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.produk .hg { margin-top: auto; }
.produk .hg { font-weight: 800; color: var(--tinta); font-size: 15px; font-variant-numeric: tabular-nums; }
.produk .st { font-size: 11.5px; color: var(--abu); }
.produk .st.tipis { color: var(--jingga); font-weight: 700; } .produk .st.habis { color: var(--merah); font-weight: 700; }
.produk.habis { opacity: .55; }
.produk .jml { position: absolute; top: -8px; right: -6px; background: var(--biru); color: #fff; border: 2px solid #fff; font-weight: 800; min-width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; font-size: 12.5px; padding: 0 5px; }
.pos-kanan { background: #fff; box-shadow: var(--bayang-kartu); border-radius: var(--r-besar); display: flex; flex-direction: column; min-height: 0; }
.pos-kanan .atas-kr { padding: 14px 14px 6px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.pos-kanan .atas-kr .dua { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.keranjang { flex: 1; overflow: auto; padding: 4px 14px; }
.item { padding: 11px 12px; background: var(--isi-lembut); border-radius: 12px; margin: 8px 0; }
.item .ats { display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; }
.item .nm { font-weight: 650; line-height: 1.3; }
.item .bwh { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.item .ad { font-size: 12px; color: var(--biru); font-weight: 600; }
.item .dk { font-size: 12px; color: var(--merah); font-weight: 600; }
.qty { display: inline-flex; align-items: center; border-radius: 9px; overflow: hidden; background: #fff; }
.qty button { width: 30px; height: 30px; border: 0; background: #fff; cursor: pointer; display: grid; place-items: center; }
.qty button:hover { background: var(--biru-muda); }
.qty input { width: 44px; height: 30px; border: 0; text-align: center; font-weight: 700; outline: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.total-kr { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.total-kr .jumlah { display: flex; justify-content: space-between; align-items: baseline; }
.total-kr .jumlah b { font-size: 24px; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pos-bar { display: none; }
.kunci-pos { height: 100%; display: grid; place-items: center; }
.kunci-pos .kartu { max-width: 440px; padding: 28px; text-align: center; }
.kunci-pos .bulat { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 14px; background: var(--jingga-muda); color: var(--jingga); }
.kunci-pos .bulat .ic { width: 28px; height: 28px; }

/* pembayaran */
.bayar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
.bayar .tagihan { background: var(--biru); color: #fff; border-radius: 14px; padding: 14px 16px; }
.bayar .tagihan span { color: #DCE3FB; font-size: 12.5px; font-weight: 600; }
.bayar .tagihan b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.layar-bayar { background: var(--isi-lembut); border-radius: 12px; padding: 10px 14px; text-align: right; }
.layar-bayar span { font-size: 12px; color: var(--abu); font-weight: 600; display: block; }
.layar-bayar input { border: 0; width: 100%; text-align: right; font-size: 26px; font-weight: 800; outline: none; color: var(--tinta); font-variant-numeric: tabular-nums; background: transparent; }
.cepat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.angka-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.angka-pad button { height: 48px; border-radius: 11px; border: 0; background: var(--isi-lembut); font-size: 18px; font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.angka-pad button:hover { background: #ECEFF8; } .angka-pad button:active { background: var(--biru-muda); }
.kembalian { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: var(--hijau-muda); color: var(--hijau); font-weight: 700; }
.kembalian.kurang { background: var(--merah-muda); color: var(--merah); }
.kembalian b { font-size: 20px; font-variant-numeric: tabular-nums; }
.qris-kotak { display: grid; place-items: center; gap: 8px; padding: 16px; background: var(--isi-lembut); border-radius: 14px; text-align: center; }
.qris-kotak svg, .qris-kotak img { width: 210px; height: 210px; }

/* struk */
.struk { font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace; font-size: 12.5px; line-height: 1.45; background: #fff; color: #000; width: 300px; max-width: 100%; margin: 0 auto; padding: 16px; border-radius: 12px; background: var(--isi-lembut); }
.struk .t { text-align: center; } .struk .g { height: 10px; }
.struk .b { display: flex; justify-content: space-between; gap: 8px; } .struk .b span:last-child { white-space: nowrap; }
.struk .nm { font-weight: 700; } .struk .besar { font-size: 15px; font-weight: 700; }
#cetak { display: none; }

/* opname */
.progres { height: 12px; border-radius: 6px; background: var(--isi-lembut); overflow: hidden; margin-top: 10px; }
.progres i { display: block; height: 100%; width: 0; background: var(--biru); border-radius: 6px; transition: width .25s ease; }
.progres.penuh i { background: var(--hijau); }
.inp-opname { width: 92px; height: 36px; text-align: right; font-weight: 700; }
.tabel td.sel-plus { color: var(--hijau); font-weight: 800; } .tabel td.sel-min { color: var(--merah); font-weight: 800; }
.tabel tr.selisih td, .tabel tbody tr.selisih:hover td { background: #FFF7EC; }
.tautan { border: 0; background: transparent; color: var(--biru); font-weight: 750; cursor: pointer; padding: 2px 6px; border-radius: 6px; text-decoration: underline; text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.tautan:hover { background: var(--biru-muda); }
.garis-waktu { list-style: none; margin: 0; padding: 0 0 0 8px; }
.garis-waktu li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--isi-lembut); }
.garis-waktu li:last-child { border-left-color: transparent; padding-bottom: 0; }
.garis-waktu li::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--biru); }
.garis-waktu li.selesai::before { border-color: var(--hijau); }
.garis-waktu li.awal::before { border-color: #E08A1E; }
.laporan-tata { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.laporan-menu { background: #fff; box-shadow: var(--bayang-kartu); border-radius: var(--r-besar); padding: 8px; position: sticky; top: 0; }
.laporan-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-weight: 600; color: #3A4563; }
.laporan-menu button:hover { background: var(--isi-lembut); }
.laporan-menu button.aktif { background: var(--biru-muda); color: var(--biru); font-weight: 700; }
.bintang { display: inline-flex; gap: 2px; color: #D8A200; } .bintang .ic { width: 15px; height: 15px; } .bintang .mati { color: #D5DAE6; }
.bintang-pilih button { border: 0; background: transparent; cursor: pointer; color: #D5DAE6; padding: 2px; } .bintang-pilih button.aktif { color: #D8A200; }
.bintang-pilih .ic { width: 26px; height: 26px; }

/* scan barcode & label */
.tombol-scan { height: 46px; border-radius: 12px; flex: none; }
.kepala .tombol-scan { height: 38px; border-radius: var(--r); }
.pindai { border-radius: 14px; overflow: hidden; background: #111827; min-height: 230px; display: grid; align-items: center; }
.pindai video { width: 100% !important; display: block; }
.label-lembar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.label-lembar.satu { display: block; }
.label-bc { text-align: center; padding: 2mm 1mm; break-inside: avoid; page-break-inside: avoid; color: #000; font-family: Arial, Helvetica, sans-serif; }
.label-lembar.satu .label-bc { break-after: page; page-break-after: always; padding: 0; }
.label-bc .nm { font-size: 9pt; font-weight: 700; line-height: 1.15; max-height: 2.3em; overflow: hidden; }
.label-bc svg { max-width: 100%; height: auto; display: block; margin: 1mm auto 0; }
.label-bc .hg { font-size: 10pt; font-weight: 700; }

/* ---------- layar kecil ---------- */
@media (max-width: 1100px) { .kisi.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pos { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sisi { position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 70; transform: translateX(-100%); transition: transform .2s; }
  .app.menu-buka .sisi { transform: none; }
  .app.menu-buka .tabir { display: block; position: fixed; inset: 0; background: rgba(20,27,64,.45); z-index: 65; }
  .atas { padding: 0 12px; } .atas .tombol-menu { display: inline-flex; }
  .profil .nama { display: none; } .pilih-lokasi { max-width: 150px; padding: 0 8px; } .pilih-lokasi > .ic { display: none; }
  .isi { padding: 16px 14px 32px; } .isi.rapat { padding: 10px; }
  .kisi.k2, .kisi.k3 { grid-template-columns: minmax(0, 1fr); }
  .pos { grid-template-columns: minmax(0, 1fr); }
  .pos-kanan { position: fixed; inset: 0; z-index: 75; border-radius: 0; border: 0; transform: translateY(100%); transition: transform .22s; }
  .pos.keranjang-buka .pos-kanan { transform: none; }
  .pos-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--biru); color: #fff; border-radius: 14px; padding: 10px 12px 10px 16px; flex: none; }
  .pos-bar b { font-size: 17px; }
  .atas .judul { min-width: 64px; }
  .produk-kisi { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .tombol-scan span { display: none; } .tombol-scan { width: 46px; padding: 0; } .kepala .tombol-scan { width: 38px; }
  .bayar { grid-template-columns: minmax(0, 1fr); }
  .laporan-tata { grid-template-columns: minmax(0, 1fr); } .laporan-menu { position: static; display: flex; gap: 4px; flex-wrap: wrap; } .laporan-menu button { width: auto; white-space: nowrap; }
  .grid-form { grid-template-columns: minmax(0, 1fr); }
  #toasts { bottom: 12px; right: 12px; width: 320px; }
  /* jangan menutupi tombol di bagian bawah: bilah keranjang di Kasir, tombol formulir, dan tombol penampil foto */
  body:has(.pos-bar) #toasts, body:has(.modal-latar) #toasts, body:has(.foto-besar) #toasts { bottom: 84px; }
  .modal-latar { padding: 0; place-items: end center; } .modal { border-radius: 18px 18px 0 0; max-height: 94vh; max-height: 94dvh; }
  .modal.sm, .modal.lg, .modal.xl { max-width: none; }
}
@media (min-width: 901px) { .hanya-hp { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- cetak struk ---------- */
@media print {
  body { background: #fff; }
  body > *:not(#cetak) { display: none !important; }
  #cetak { display: block; }
  #cetak .struk { background: #fff; width: 72mm; padding: 0; margin: 0; font-size: 11.5px; border-radius: 0; }
  #cetak .struk .g { height: 0; border-top: 1px dashed #000; margin: 6px 0; }
  @page { margin: 4mm; }
}

/* ---------- indikator jaringan & antrean offline ---------- */
.chip-jaringan { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 0; border-radius: var(--r); font-weight: 700; cursor: pointer; white-space: nowrap; }
.chip-jaringan b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: rgba(0,0,0,.12); }
.chip-jaringan.offline { background: var(--jingga-muda); color: var(--jingga); }
.chip-jaringan.antre { background: var(--biru-muda); color: var(--biru); }
.chip-jaringan.gagal { background: var(--merah-muda); color: var(--merah); }
@media (max-width: 720px) { .chip-jaringan span { display: none; } .chip-jaringan { padding: 0 10px; } }
.jingga .ic { vertical-align: -4px; }

/* ---------- monitoring absensi (manager/owner) ---------- */
.tabel-absen td { vertical-align: top; }
.sel-absen { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 44px; padding: 6px 8px; margin: -4px -8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; }
.sel-absen:hover { background: var(--isi-lembut); }
.sel-absen .jam { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--abu); font-variant-numeric: tabular-nums; }
.sel-absen .jam .ic { width: 14px; height: 14px; }
.absen-detail { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; align-items: start; }
.absen-detail .foto { background: var(--isi-lembut); border-radius: var(--r-besar); overflow: hidden; min-height: 200px; display: grid; place-items: center; }
.absen-detail .foto img { display: block; width: 100%; height: auto; }
.absen-detail .rincian dd { text-align: left; }
@media (max-width: 720px) { .absen-detail { grid-template-columns: minmax(0, 1fr); } }

/* ---------- halaman absensi karyawan (publik): ringkas, muat satu layar tanpa menggulir ---------- */
.hal-absen { background: var(--kertas); }
.ab { max-width: 560px; height: 100vh; height: 100dvh; margin: 0 auto; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.ab-kepala { flex: none; background: var(--biru); color: #fff; border-radius: 0 0 14px 14px; padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -10px; }
.ab-kepala h1 { color: #fff; font-size: 17px; letter-spacing: .03em; display: flex; align-items: center; gap: 7px; }
.ab-kepala h1 .ic { width: 18px; height: 18px; }
.ab-kepala .tgl { font-size: 12px; opacity: .92; }
.ab-kepala .jam { text-align: right; flex: none; }
.ab-kepala .jam b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ab-kepala .jam span { font-size: 11px; opacity: .88; font-variant-numeric: tabular-nums; }
.ab .kartu { padding: 10px; }
.ab-utama { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ab-pilih { display: flex; gap: 6px; flex: none; }
.ab-pilih select.inp.besar { flex: 1; min-width: 0; height: 44px; font-size: 15px; border-radius: 12px; font-weight: 650; }
.ab-pilih .btn { height: 44px; padding: 0 10px; border-radius: 12px; position: relative; flex: none; }
.ab-pilih .btn i { font-style: normal; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--biru); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.ab-pilih .btn i:empty { display: none; } .ab-pilih .btn i.habis { background: var(--merah); }
.ab-petunjuk { flex: none; display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; background: var(--isi-lembut); border-radius: 10px; padding: 7px 10px; color: #4B5565; font-weight: 600; font-size: 13px; line-height: 1.35; }
.ab-petunjuk .ic { width: 16px; height: 16px; }
.ab-petunjuk.ok { background: var(--hijau-muda); color: var(--hijau); } .ab-petunjuk.awas { background: var(--jingga-muda); color: var(--jingga); } .ab-petunjuk.biru { background: var(--biru-muda); color: var(--biru); }
.ab-sesi { flex: none; display: flex; gap: 6px; flex-wrap: wrap; } .ab-sesi:empty { display: none; }
.ab-sesi .pil { height: 22px; padding: 0 8px; font-size: 11.5px; } .ab-sesi .pil .ic { width: 12px; height: 12px; }
.ab-kamera { flex: 1; min-height: 110px; position: relative; background: #0F172A; border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: #CBD5E1; }
.ab-kamera video, .ab-kamera img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-kamera video { transform: scaleX(-1); }
.ab-kamera .kosong { color: #CBD5E1; padding: 10px; font-size: 13px; } .ab-kamera .kosong b { color: #fff; } .ab-kamera .kosong .ic { color: #94A3B8; width: 26px; height: 26px; margin-bottom: 4px; }
.btn-absen { flex: none; width: 100%; height: 52px; border: 0; border-radius: 12px; background: var(--biru); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .03em; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; }
.btn-absen .ic { width: 20px; height: 20px; }
.btn-absen:disabled { opacity: .45; cursor: not-allowed; }
.btn-absen:not(:disabled):active { background: var(--biru-tua); }
.ab-bawah { flex: none; display: flex; align-items: center; gap: 8px; }
.ab-info { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 5px 12px; margin: 0; }
.ab-info dt { color: var(--abu); font-size: 11px; font-weight: 600; } .ab-info dd { margin: 0; font-weight: 700; font-size: 12.5px; color: var(--tinta); overflow-wrap: anywhere; line-height: 1.3; }
.ab-info dd.merah { color: var(--merah); } .ab-info dd.hijau { color: var(--hijau); } .ab-info dd.jingga { color: var(--jingga); } .ab-info dd.abu { color: var(--abu); font-weight: 600; }
.ab-terlewat { display: grid; gap: 8px; }
.ab-terlewat .brs { background: var(--isi-lembut); border-radius: 12px; padding: 10px; display: grid; gap: 6px; }
.ab-hasil-foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; display: block; }
.lencana-cuti { display: flex; align-items: center; gap: 14px; background: var(--biru-muda); border-radius: var(--r-besar); padding: 12px 16px; margin-bottom: 12px; }
.lencana-cuti .angka { font-size: 32px; font-weight: 800; color: var(--biru); line-height: 1; }
.lencana-cuti.habis { background: var(--merah-muda); } .lencana-cuti.habis .angka { color: var(--merah); }
@media (max-width: 420px) { .ab-pilih .btn span { display: none; } .ab-pilih .btn { padding: 0 11px; } }
@media (max-height: 560px) { .ab-kepala .tgl, .ab-sesi { display: none; } .ab-kamera { min-height: 90px; } }
/* layar lebar (tablet mendatar / komputer): kamera di kiri, kendali di kanan */
@media (min-width: 900px) and (min-height: 480px) {
  .ab { max-width: 1040px; }
  .ab-utama { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); grid-template-rows: auto auto auto 1fr auto; gap: 10px 14px; padding: 14px; }
  .ab-kamera { grid-column: 1; grid-row: 1 / -1; min-height: 0; }
  .ab-pilih, .ab-petunjuk, .ab-sesi, .btn-absen { grid-column: 2; }
  .btn-absen { grid-row: 5; height: 60px; font-size: 18px; }
  .ab-pilih { flex-wrap: wrap; } .ab-pilih select.inp.besar { flex: 1 1 100%; }
  .ab-info { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hal-absen #toasts { top: 10px; bottom: auto; right: 12px; left: 12px; width: auto; max-width: 536px; margin: 0 auto; flex-direction: column; }
.ab-kepala .jam span.beda { background: rgba(255,255,255,.2); padding: 1px 6px; border-radius: 6px; opacity: 1; }
/* jendela tidak boleh melebar melebihi layar karena isi (tabel lebar digulir di dalamnya) */
.modal-latar { grid-template-columns: minmax(0, 1fr); } .modal { min-width: 0; justify-self: center; } .modal > .badan { min-width: 0; }

/* ---------- kata sandi: tombol mata ---------- */
.sandi-wrap { position: relative; } .sandi-wrap .inp { padding-right: 44px; }
.sandi-wrap .mata { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px; color: var(--abu); cursor: pointer; display: grid; place-items: center; }
.sandi-wrap .mata:hover { background: var(--isi-lembut); color: var(--tinta); }

/* ---------- tabel yang tidak muat ditumpuk jadi kartu (tidak ada gulir ke kanan) ---------- */
.tabel td > .v { display: contents; }
.bungkus-tabel.tumpuk { overflow: visible; max-height: none; background: transparent; box-shadow: none; border-radius: 0; }
.modal .bungkus-tabel.tumpuk { max-height: none; }
.tumpuk > table, .tumpuk > table > tbody, .tumpuk > table > tbody > tr { display: block; width: 100%; }
.tumpuk > table > thead { display: none; }
.tumpuk > table > tbody > tr { background: #fff; border-radius: 14px; box-shadow: var(--bayang-kartu); padding: 8px 14px; margin-bottom: 10px; }
.modal .tumpuk > table > tbody > tr { background: var(--isi-lembut); box-shadow: none; }
.tumpuk > table > tbody > tr > td { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; width: auto; padding: 5px 0; text-align: right; white-space: normal; background: transparent !important; }
.tumpuk > table > tbody > tr > td::before { content: attr(data-l); flex: none; max-width: 42%; text-align: left; color: var(--abu); font-size: 12.5px; font-weight: 600; padding-top: 1px; }
.tumpuk > table > tbody > tr > td[data-l=""]::before { content: none; }
.tumpuk > table > tbody > tr > td > .v { display: block; min-width: 0; overflow-wrap: anywhere; }
.tumpuk > table > tbody > tr > td:first-child { padding-bottom: 7px; } .tumpuk > table > tbody > tr > td:first-child > .v { font-weight: 700; color: var(--tinta); }
.tumpuk > table > tbody > tr > td.aksi { justify-content: flex-end; padding-top: 8px; width: auto; white-space: normal; } .tumpuk > table > tbody > tr > td.aksi > .v { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tumpuk > table > tbody > tr > td.aksi:empty, .tumpuk > table > tbody > tr > td:empty { display: none; }
.tumpuk .sub { text-align: right; } .tumpuk .sel-absen { align-items: flex-end; margin: 0; padding: 0; min-height: 0; }
.tumpuk .inp { max-width: 220px; }

/* ---------- beranda: kartu yang bisa diklik + grafik ---------- */
.stat .ket, .stat .label { overflow-wrap: anywhere; }
.stat.sorot .ket { color: #E4E9FD; }                                  /* terbaca di atas latar biru */
.stat.sorot .ket a, .stat.sorot a { color: #fff; }
a.stat.kait { display: block; position: relative; text-decoration: none; color: inherit; padding-right: 34px; transition: box-shadow .12s, transform .12s; }
a.stat.kait:hover, a.stat.kait:focus-visible { box-shadow: var(--bayang); transform: translateY(-1px); }
a.stat.kait .panah { position: absolute; right: 12px; top: 16px; color: #B7BFD3; }
a.stat.kait:hover .panah { color: var(--biru); } a.stat.sorot.kait .panah { color: #C9D3F8; } a.stat.sorot.kait:hover .panah { color: #fff; }
.stat .label .ic { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }
.stat.awas .nilai { color: var(--jingga); } .stat.jingga .nilai { color: var(--jingga); }
.kartu-beranda { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
a.baris-daftar.kait { text-decoration: none; color: inherit; padding: 9px 8px; border-radius: 10px; }
a.baris-daftar.kait:hover { background: var(--isi-lembut); }
.kartu > header { flex-wrap: wrap; }
.segmen.kecil { padding: 2px; } .segmen.kecil button { height: 28px; padding: 0 10px; font-size: 12.5px; }
.viz { display: block; max-width: 100%; }
.viz text { font-family: inherit; fill: var(--abu); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.viz .sumbu.tebal { fill: var(--tinta); font-weight: 700; }
.viz .nilai-k { fill: var(--tinta); font-weight: 700; font-size: 12px; }
.viz .tengah-n { fill: var(--tinta); font-weight: 800; font-size: 24px; }
.viz .kisi-g { stroke: var(--garis); stroke-width: 1; }
.viz .kolom { fill: #C3CDF5; } .viz .kolom.aktif { fill: var(--biru); }
.viz .kena { fill: transparent; cursor: pointer; outline: none; }
.viz .kena:hover, .viz .kena:focus-visible { fill: rgba(47,75,216,.07); }
.viz .seg { stroke: #fff; stroke-width: 2; cursor: default; outline: none; transition: opacity .12s; }
.viz circle.seg { stroke: none; }
.viz .seg.redup, .legenda li.redup { opacity: .35; }
.donat { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donat svg { flex: none; margin: 0 auto; }
.legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 210px; display: grid; gap: 2px; }
.legenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 9px; padding: 5px 6px; border-radius: 8px; transition: opacity .12s; }
.legenda li:hover { background: var(--isi-lembut); }
.legenda i { width: 10px; height: 10px; border-radius: 3px; }
.legenda .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--teks); }
.legenda b { font-variant-numeric: tabular-nums; color: var(--tinta); }
.legenda .rp { grid-column: 2 / -1; font-size: 12px; color: var(--abu); font-variant-numeric: tabular-nums; }
.tip-grafik { position: fixed; z-index: 120; pointer-events: none; background: var(--tinta); color: #fff; border-radius: 10px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; box-shadow: var(--bayang); max-width: 260px; }
.tip-grafik .kuat { font-weight: 800; font-size: 14px; } .tip-grafik .redup { opacity: .7; }
.tip-grafik[hidden] { display: none; }
.sel-absen .tempat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--abu); text-align: left; line-height: 1.25; }
.sel-absen .tempat .ic { width: 12px; height: 12px; flex: none; } .sel-absen .tempat.lain { color: var(--jingga); font-weight: 600; }

/* ---------- tabel lebih rapat supaya muat di layar laptop tanpa digulir ke kanan ---------- */
.tabel th { white-space: normal; padding: 12px 10px 9px; line-height: 1.25; vertical-align: bottom; }
.tabel td { padding: 9px 10px; }
.tabel th:first-child, .tabel td:first-child { padding-left: 14px; } .tabel th:last-child, .tabel td:last-child { padding-right: 14px; }
.tabel td.t-waktu { white-space: normal; } .tabel td.t-waktu .wkt { white-space: nowrap; }
.tabel td.t-waktu .wkt + .sub { white-space: nowrap; }
.tabel td > b:only-child { white-space: normal; }
.tabel td.aksi .btn + .btn { margin-left: 2px; }
@media (min-width: 1181px) and (max-width: 1440px) {
  .app { grid-template-columns: 216px minmax(0, 1fr); }
  .sisi a { gap: 9px; padding: 8px 9px; } .sisi nav { padding: 4px 8px 16px; }
  .isi { padding: 18px 16px 32px; } .atas { padding: 0 16px; }
}
/* laporan: pilihan jenis laporan di atas, tabel memakai seluruh lebar */
.laporan-tata { display: block; }
select.inp.laporan-jenis { width: 290px; max-width: 100%; font-weight: 700; }
.tabel.rapat { font-size: 13px; } .tabel.rapat th { padding: 11px 7px 8px; font-size: 11.5px; } .tabel.rapat td { padding: 8px 7px; }
.tabel.rapat th:first-child, .tabel.rapat td:first-child { padding-left: 12px; } .tabel.rapat th:last-child, .tabel.rapat td:last-child { padding-right: 12px; }

/* ---------- layar sedang (tablet mendatar, laptop kecil): menu jadi lajur ikon supaya tabel dapat ruang ---------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .app { grid-template-columns: 86px minmax(0, 1fr); }
  .sisi .merek { padding: 14px 0 8px; justify-content: center; font-size: 0; gap: 0; }
  .sisi nav { padding: 2px 6px 12px; }
  .sisi .grup { font-size: 0; padding: 0; height: 1px; background: var(--garis); margin: 6px 12px; }
  .sisi a { flex-direction: column; gap: 3px; padding: 7px 2px; text-align: center; font-size: 10.5px; line-height: 1.15; }
  .sisi a .lencana { position: absolute; top: 2px; right: 14px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; margin: 0; }
  .sisi .kaki { display: none; }
  .tabel { font-size: 13px; } .tabel th { padding: 11px 7px 8px; font-size: 11.5px; } .tabel td { padding: 8px 7px; }
  .tabel th:first-child, .tabel td:first-child { padding-left: 12px; } .tabel th:last-child, .tabel td:last-child { padding-right: 12px; }
  .isi { padding: 16px 14px 28px; }
}

/* ---------- HP: bilah atas tidak bertumpuk, kartu angka dua kolom ---------- */
.pilih-lokasi { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.pilih-lokasi select { min-width: 0; width: 100%; }
@media (max-width: 900px) {
  .atas { gap: 6px; padding: 0 10px; }
  .atas .judul { flex: 1 1 auto; min-width: 0; font-size: 16px; }
  .atas .dorong { display: none; }
  .pilih-lokasi { max-width: 42vw; padding: 0 8px; gap: 5px; } .pilih-lokasi .ic { display: none; }
  .profil .nama { display: none; } .profil { padding: 2px; }
  .isi { padding: 14px 12px 28px; }
  .kepala { gap: 8px; margin-bottom: 12px; } .kepala .cari { width: 100%; } .kepala h1 { font-size: 19px; }
  .kepala .inp[type=date] { width: 138px !important; } .kepala select.inp { max-width: 100%; }
}
@media (max-width: 640px) {
  .kisi.oto, .kartu-beranda, .kisi.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px 12px; border-radius: 14px; } .stat .nilai { font-size: 18px; } .stat .label { font-size: 12px; }
  a.stat.kait { padding-right: 24px; } a.stat.kait .panah { right: 6px; top: 12px; width: 15px; height: 15px; }
  .donat { justify-content: center; } .legenda { min-width: 0; flex: 1 1 100%; }
}
.tumpuk > table > tbody > tr > td { padding-left: 0 !important; padding-right: 0 !important; }
.btn-absen.approval { background: var(--jingga); } .btn-absen.approval:not(:disabled):active { background: #8F4700; }
@media (max-width: 420px) { .btn-absen.approval { font-size: 13.5px; letter-spacing: 0; } }

/* ---------- garis bantu: tiap baris data dipisah garis halus supaya mudah diikuti mata ---------- */
.tabel th { border-bottom: 1.5px solid var(--garis-tua); }
.tabel td { border-bottom: 1px solid #E7EAF0; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:nth-child(even) td { background: #FAFBFD; }
.tabel tbody tr:hover td { background: var(--isi-lembut); }
.tabel tr.selisih td, .tabel tbody tr.selisih:hover td { background: #FFF7EC; }
/* laporan: garis tegak antarkolom juga */
.tabel.rapat th + th, .tabel.rapat td + td { border-left: 1px solid #EEF0F5; }
.tabel.rapat tr.tebal td { border-top: 1.5px solid var(--garis-tua); background: #F4F6FB; }
.tumpuk > table > tbody > tr > td { border-bottom: 1px dashed transparent; border-left: 0 !important; }
.tumpuk > table > tbody > tr > td + td { border-top: 1px solid #EEF0F5; }
.tumpuk > table > tbody > tr > td { border-bottom: 0; }
.baris-daftar + .baris-daftar { border-top: 1px solid #EEF0F5; }
.rincian dt, .rincian dd { padding: 4px 0; border-bottom: 1px solid #EEF0F5; } .rincian dt:last-of-type, .rincian dd:last-of-type { border-bottom: 0; }
.legenda li + li { border-top: 1px solid #F0F2F6; }
.tabel-absen tr.libur td { background: #F7F8FA !important; } .tabel-absen tr.libur td:first-child b { color: var(--abu); }
.produk-kisi { overflow-x: hidden; overflow-y: auto; }
.btn[aria-pressed=true] { background: var(--biru-muda); border-color: transparent; color: var(--biru); }

/* ---------- payroll & pinjaman karyawan ---------- */
.pilah { display: inline-flex; background: var(--isi-lembut); border-radius: var(--r); padding: 3px; gap: 2px; }
.pilah .btn { height: 34px; border-color: transparent; background: transparent; box-shadow: none; }
.pilah .btn[aria-pressed=true] { background: #fff; color: var(--biru); box-shadow: var(--bayang-kartu); }
.catatan { display: flex; gap: 9px; align-items: flex-start; background: var(--biru-muda); color: var(--tinta); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px; line-height: 1.45; }
.catatan .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--biru); }
.catatan.awas { background: var(--jingga-muda); } .catatan.awas .ic { color: var(--jingga); }
.catatan a { font-weight: 700; }
b.hitam { color: var(--tinta); }
.btn.hantu.merah { color: var(--merah); } .btn.hantu.merah:hover { background: var(--merah-muda); }
.judul-bagian { border-top: 1px solid var(--garis-tua); padding-top: 14px; margin-top: 4px; }
.judul-bagian b { font-size: 15px; color: var(--tinta); }
.slip-atas { margin-bottom: 12px; flex-wrap: nowrap; align-items: flex-start; }
.slip-atas .besar { font-size: 17px; color: var(--tinta); }
.slip-atas .sub, .slip-tbl .sub { display: block; font-size: 12.5px; color: var(--abu); font-weight: 400; }
.slip-atas .r { text-align: right; }
.slip-hadir { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.slip-hadir div { background: var(--isi-lembut); border-radius: 8px; padding: 7px 8px; text-align: center; min-width: 0; }
.slip-hadir span { display: block; font-size: 11.5px; color: var(--abu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip-hadir b { font-size: 15px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.slip-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.slip-kol { display: flex; flex-direction: column; min-width: 0; }
.slip-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.slip-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--garis); vertical-align: top; }
.slip-tbl td.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.slip-tbl tr.jd td { background: var(--isi-lembut); font-weight: 700; font-size: 12.5px; color: var(--abu); text-transform: uppercase; letter-spacing: .04em; border-bottom: 0; }
.slip-jml { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding: 8px 10px; font-weight: 700; color: var(--tinta); font-size: 14px; font-variant-numeric: tabular-nums; }
.slip-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; padding: 10px 10px 0; border-top: 2px solid var(--tinta); font-weight: 800; font-size: 17px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.slip-ubah { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--garis-tua); }
.slip-gaji { background: #fff; color: #000; font-size: 12px; padding: 7mm 8mm; }
.slip-kop, .slip-kaki { display: flex; justify-content: space-between; gap: 12px; }
.slip-kop { border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 8px; }
.slip-kop b { display: block; font-size: 15px; } .slip-kop .r { text-align: right; }
.slip-siapa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 12px; margin-bottom: 8px; }
.slip-siapa span { display: block; font-size: 10.5px; color: #555; }
.slip-kaki { margin-top: 10px; font-size: 11px; align-items: flex-end; }
.slip-kaki .ttd { display: flex; gap: 22px; text-align: center; }
.slip-kaki .ttd i { display: block; width: 38mm; height: 16mm; border-bottom: 1px solid #000; margin-bottom: 3px; }
@media (max-width: 640px) {
  .slip-hadir { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .slip-atas { flex-wrap: wrap; } .slip-atas .r { text-align: left; }
  .slip-dua { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  #cetak .slip-gaji { break-inside: avoid; page-break-inside: avoid; border-bottom: 1px dashed #999; }
  #cetak .slip-gaji .slip-hadir div, #cetak .slip-gaji .slip-tbl tr.jd td { background: #f0f0f0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #cetak .slip-gaji .slip-tbl, #cetak .slip-gaji .slip-jml { font-size: 11.5px; } #cetak .slip-gaji .slip-jml { padding: 4px 8px; } #cetak .slip-gaji .slip-tbl td { padding: 4px 8px; border-color: #ccc; }
  #cetak .slip-gaji .slip-tbl .sub, #cetak .slip-gaji .slip-hadir span { color: #444; }
  #cetak .slip-gaji .slip-tbl .sub { font-size: 10px; } #cetak .slip-gaji .slip-total { font-size: 14px; border-color: #000; }
  #cetak .slip-gaji .slip-hadir { gap: 4px; margin-bottom: 8px; } #cetak .slip-gaji .slip-hadir div { padding: 4px 6px; } #cetak .slip-gaji .slip-hadir b { font-size: 12.5px; }
}
.kisi.empat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kisi.empat .stat { padding: 11px 13px; box-shadow: none; background: var(--isi-lembut); border-radius: 12px; }
.kisi.empat .stat .nilai { font-size: 18px; }
@media (max-width: 640px) { .kisi.empat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- foto mini absen di tabel monitoring ---------- */
.foto-mini { display: block; flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--isi-lembut); box-shadow: inset 0 0 0 1px var(--garis-tua); }
.foto-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-mini.kosong { background: var(--isi-lembut) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA1B0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center / 20px no-repeat; }
.tabel td.k-foto { width: 1%; padding-top: 6px; padding-bottom: 6px; }
.tumpuk > table > tbody > tr > td.k-foto { width: auto; align-items: center; padding-top: 5px; padding-bottom: 5px; }
.sel-absen.berfoto { flex-direction: row; align-items: flex-start; gap: 10px; }
.sel-absen .sel-isi { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.tumpuk .sel-absen .sel-isi { align-items: flex-end; } .tumpuk .sel-absen.berfoto { flex-direction: row-reverse; }
.tautan-peta { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--hijau-muda); color: var(--hijau); vertical-align: middle; }
.tautan-peta .ic { width: 15px; height: 15px; } .tautan-peta:hover { background: var(--hijau); color: #fff; }

/* foto absen bisa diperbesar: penunjuk di foto mini dan di detail absen */
.foto-mini[data-foto]:not(.kosong), .foto-mini[data-fotok]:not(.kosong) { cursor: zoom-in; transition: box-shadow .12s; }
.foto-mini[data-foto]:not(.kosong):hover, .foto-mini[data-fotok]:not(.kosong):hover { box-shadow: 0 0 0 2px var(--biru); }
.absen-detail .foto-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.absen-detail .foto-zoom:focus-visible { outline: 3px solid var(--biru); outline-offset: -3px; }
.absen-detail .foto-zoom .chip { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(13,17,32,.74); color: #fff; font-size: 12.5px; font-weight: 600; }
.absen-detail .foto-zoom .chip .ic { width: 15px; height: 15px; }
/* penampil foto: foto sebesar layar, diperbesar dengan tombol, roda mouse, cubit, atau ketuk dua kali; digeser dengan menyeret */
.foto-besar { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgba(13,17,32,.96); color: #fff; animation: pudar .12s; }
.foto-besar > header { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; }
.foto-besar .ket { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.foto-besar .ket b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-besar .ket span { font-size: 12.5px; color: rgba(255,255,255,.74); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-besar .panggung { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.foto-besar.diperbesar .panggung { cursor: grab; } .foto-besar.diperbesar .panggung:active { cursor: grabbing; }
.foto-besar .panggung img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; border-radius: 3px; opacity: 0; pointer-events: none; -webkit-user-drag: none; }
.foto-besar.siap .panggung img { opacity: 1; }
.foto-besar.halus .panggung img { transition: transform .16s ease-out; }
.foto-besar > footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.foto-besar output { min-width: 50px; text-align: center; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fb-btn:hover { background: rgba(255,255,255,.2); }
.fb-btn:disabled { opacity: .36; cursor: default; background: rgba(255,255,255,.04); }
.fb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fb-btn .ic { width: 20px; height: 20px; }
@media (max-width: 420px) { .fb-btn[data-z="0"] span { display: none; } }

/* foto karyawan: foto bulat di samping nama, dan bagian foto di formulir karyawan */
.foto-mini.bulat { width: 40px; height: 40px; border-radius: 50%; }
.foto-mini.tanpa { display: grid; place-items: center; color: #9AA1B0; } .foto-mini.tanpa .ic { width: 20px; height: 20px; }
.nama-foto { display: flex; align-items: center; gap: 10px; min-width: 0; } .nama-foto > span:last-child { min-width: 0; }
.tumpuk .nama-foto { flex-direction: row-reverse; text-align: right; }
.foto-karyawan .fk-baris { display: flex; align-items: flex-start; gap: 14px; }
.fk-pratinjau { flex: none; display: grid; place-items: center; width: 96px; height: 128px; padding: 0; overflow: hidden; border: 1px dashed var(--garis-tua); border-radius: 12px; background: var(--isi-lembut); color: #9AA1B0; cursor: default; }
.fk-pratinjau .ic { width: 34px; height: 34px; }
.fk-pratinjau.ada { border-style: solid; cursor: zoom-in; }
.fk-pratinjau.memuat { animation: kedip 1s ease-in-out infinite alternate; }
.fk-pratinjau img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fk-pratinjau:focus-visible { outline: 3px solid var(--biru); outline-offset: 2px; }
.fk-aksi { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fk-aksi .baris { flex-wrap: wrap; gap: 8px; }
@keyframes kedip { to { opacity: .45; } }

.btn[hidden] { display: none; }

/* ---------- kartu ringkasan dibuat lebih ringkas (Beranda, Riwayat penjualan, Absensi, dan halaman lain yang memakai kartu yang sama) ---------- */
.kisi.oto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kisi.oto.kartu-beranda { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 11px 14px; border-radius: 14px; }
.stat .label { font-size: 11.5px; line-height: 1.35; }
.stat .nilai { font-size: 19px; margin-top: 2px; }
.stat .ket { font-size: 11px; margin-top: 2px; line-height: 1.35; }
a.stat.kait { padding-right: 28px; } a.stat.kait .panah { top: 11px; right: 9px; width: 15px; height: 15px; }
.kartu > header { padding: 13px 16px 2px; } .kartu > header h3 { font-size: 13.5px; }
.baris-daftar { padding: 7px 0; font-size: 13px; } a.baris-daftar.kait { padding: 7px 8px; }
@media (max-width: 1100px) { .kisi.oto.kartu-beranda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .kisi.oto, .kartu-beranda, .kisi.k4 { gap: 8px; }
  .stat { padding: 9px 11px; border-radius: 12px; } .stat .label { font-size: 11px; } .stat .nilai { font-size: 16px; } .stat .ket { font-size: 10.5px; }
  a.stat.kait { padding-right: 22px; } a.stat.kait .panah { right: 5px; top: 9px; width: 14px; height: 14px; }
  .kisi.oto.ringkas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }       /* kartu yang isinya hanya hitungan (absensi): tiga per baris */
}

/* kolom pencarian dengan daftar pilihan (Pembelian: nama supplier) */
.cari-saran .inp { padding-right: 34px; }
.cari-saran .hapus-cari { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--abu); cursor: pointer; }
.cari-saran .hapus-cari:hover { background: var(--isi-lembut); color: var(--tinta); }
.cari-saran .hapus-cari .ic { position: static; width: 15px; height: 15px; color: inherit; }
.saran-daftar { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 100%; width: max-content; max-width: min(420px, calc(100vw - 28px)); max-height: 300px; overflow: auto; overscroll-behavior: contain; padding: 6px 0; box-shadow: var(--bayang-besar); }
.saran-daftar .menu-item { justify-content: space-between; gap: 18px; padding: 9px 14px; }
.saran-daftar .menu-item .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saran-daftar .menu-item .kecil { flex: none; font-weight: 500; }
.saran-daftar .menu-item.aktif, .saran-daftar .menu-item[aria-selected="true"] { background: var(--biru-muda); color: var(--biru); }

/* nama aplikasi di samping logo bisa diganti di Pengaturan: nama panjang turun ke baris berikutnya dan tidak keluar dari menu */
.merek [data-nama-app] { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }

/* ================= animasi singkat saat pindah halaman dan fitur =================
   Tujuannya tanggapan seketika: klik langsung terlihat hasilnya walau server belum menjawab. */
#bilah-muat { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300; pointer-events: none; opacity: 0; overflow: hidden; background: rgba(46,74,214,.12); }
#bilah-muat.jalan { opacity: 1; }
#bilah-muat.selesai { opacity: 0; transition: opacity .25s ease; }
#bilah-muat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: 3px; background: var(--biru); }
#bilah-muat.jalan::before { animation: bilah-jalan 1.05s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes bilah-jalan { from { transform: translateX(-105%); } to { transform: translateX(270%); } }
html.memuat, html.memuat .btn, html.memuat a { cursor: progress; }

.hal-masuk { animation: hal-masuk .22s cubic-bezier(.2,.8,.2,1); }
.hal-pudar { animation: pudar .18s ease-out; }
@keyframes hal-masuk { from { opacity: 0; transform: translateY(8px); } }

/* kerangka halaman: tampil seketika, baru terlihat kalau server butuh lebih dari sekejap */
.rangka { display: grid; gap: 14px; animation: pudar .18s .07s both; }
.rk { display: block; border-radius: 12px; background: linear-gradient(100deg, #E9ECF4 30%, #F5F6FA 50%, #E9ECF4 70%) 0 0 / 220% 100%; animation: rk-kilau 1.15s linear infinite; }
@keyframes rk-kilau { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.rk-kepala { display: flex; gap: 10px; align-items: center; }
.rk-kepala .rk { height: 40px; flex: 0 1 260px; } .rk-kepala .rk:nth-child(2) { flex-basis: 150px; } .rk-kepala .rk:nth-child(3) { flex-basis: 120px; margin-left: auto; }
.rk-kisi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .rk-kisi .rk { height: 74px; border-radius: 14px; }
.rk-tabel { display: grid; gap: 1px; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--bayang); }
.rk-tabel .rk { height: 16px; margin: 11px 0; border-radius: 8px; } .rk-tabel .rk:nth-child(odd) { width: 86%; } .rk-tabel .rk:nth-child(3n) { width: 64%; }
.rangka.ringkas { gap: 12px; }
.rk-tunggu { animation: pudar .2s .15s both; }
@media (max-width: 640px) { .rk-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rk-kepala .rk:nth-child(2) { display: none; } }

/* tombol dan menu: terasa ditekan; tombol yang sedang bekerja diberi garis berjalan */
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.sisi nav a:active { transform: scale(.985); }
.btn.sibuk { position: relative; overflow: hidden; }
.btn.sibuk::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2.5px; width: 40%; background: currentColor; opacity: .85; animation: bilah-jalan 1s cubic-bezier(.45,.05,.55,.95) infinite; }

/* pemilih lokasi yang dikunci (halaman Pembelian: hanya kantor pusat) */
.pilih-lokasi.terkunci { box-shadow: inset 0 0 0 1.5px var(--garis-tua); }
.pilih-lokasi.terkunci > .ic { color: var(--abu); }
.pilih-lokasi select option:disabled { color: #A9B0C3; }

@media (prefers-reduced-motion: reduce) {
  #bilah-muat.jalan::before, .btn.sibuk::after { animation: none; width: 100%; opacity: .55; }
  .rk { animation: none; }
}
@media print { #bilah-muat, .rangka { display: none !important; } }

/* wadah tabel yang masih kosong (datanya sedang diminta ke server) menampilkan kerangka, bukan ruang kosong */
[data-tbl]:empty::before { content: ''; display: block; height: 196px; border-radius: 16px; background: linear-gradient(100deg, #E9ECF4 30%, #F5F6FA 50%, #E9ECF4 70%) 0 0 / 220% 100%; animation: pudar .18s .1s both, rk-kilau 1.15s linear infinite; }
@media (prefers-reduced-motion: reduce) { [data-tbl]:empty::before { animation: none; } }
@media print { [data-tbl]:empty::before { display: none; } }