/* ==========================================================
   Upah Petik Melati - gaya khusus
   Mobile-first, untuk pengguna lanjut usia:
   font besar, kontras tinggi, tombol >= 56px, tema melati.
   ========================================================== */
:root {
	--hijau: #2f6f3e;
	--hijau-tua: #1f4d2b;
	--hijau-muda: #e3f0e4;
	--krem: #fbf6e8;
	--krem-tua: #efe3c2;
	--emas: #b8923a;
	--teks: #1c2a1f;
	--teks-redup: #55635a;
	--merah: #b3261e;
	--merah-muda: #fbe9e7;
	--wa: #1f8f4d;
	--garis: #d9d2bb;
	--tinggi-nav: 74px;
}

html { font-size: 18px; }
body.app-melati, body.halaman-slip {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--teks);
	background: var(--krem);
	-webkit-text-size-adjust: 100%;
}
body.app-melati { padding-bottom: calc(var(--tinggi-nav) + 24px + env(safe-area-inset-bottom)); }

/* ---------- Bilah atas ---------- */
.app-bar { background: var(--hijau); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.app-bar-isi { max-width: 760px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; }
.app-bar .bi { font-size: 1.6rem; }

.app-isi { max-width: 760px; margin: 0 auto; padding: 16px; }

/* ---------- Judul ---------- */
.judul-halaman { font-size: 1.5rem; font-weight: 800; color: var(--hijau-tua); margin: 8px 0 16px; }
.sub-judul { font-size: 1.25rem; font-weight: 800; color: var(--hijau-tua); margin: 28px 0 12px; }
.label-besar { display: block; font-size: 1.1rem; font-weight: 700; color: var(--hijau-tua); margin-bottom: 8px; }
.kecil-redup { color: var(--teks-redup); font-size: .9rem; }
.tanggal-hari { font-size: 1.1rem; font-weight: 600; color: var(--teks-redup); margin-top: 4px; }
.teks-tanggal { margin-top: 8px; font-weight: 700; color: var(--hijau); }
.tautan-kembali { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; color: var(--hijau); text-decoration: none; }

/* ---------- Kartu ---------- */
.kartu { background: #fff; border: 1px solid var(--garis); border-radius: 18px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(60,50,20,.06); }
.kartu.kosong { text-align: center; color: var(--teks-redup); padding: 28px 16px; }
.kartu.kosong .bi { font-size: 2.4rem; display: block; margin-bottom: 6px; color: var(--hijau); }
.kartu.nonaktif { opacity: .7; background: #f4f1e7; }
.kartu-total { background: var(--hijau-muda); border-color: #b7d6bb; }
.kartu-total.ringkas { padding: 8px 16px; }
.kartu-uang { background: var(--hijau); color: #fff; border: 0; text-align: center; }
.kartu-uang .kecil-redup { color: #dcefdd; }
.angka-besar { font-size: 2.2rem; font-weight: 800; line-height: 1.2; color: var(--hijau-tua); }
.kartu-uang .angka-besar { color: #fff; font-size: 2.4rem; }
.periode-teks { font-size: 1.35rem; font-weight: 800; color: var(--hijau-tua); }
.baris-dua { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.grid-dua { display: grid; grid-template-columns: 1fr; gap: 12px; }
.info-kecil { background: #fff8dc; border: 1px solid #ead9a0; border-radius: 14px; padding: 12px 14px; font-size: .95rem; }
.zona-lain { background: #fffdf5; }

/* ---------- Tombol (min tinggi 56px) ---------- */
.btn { min-height: 56px; border-radius: 14px; font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 18px; border-width: 2px; }
.btn .bi { font-size: 1.25rem; }
.btn-utama { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.btn-utama:hover, .btn-utama:focus, .btn-utama:active { background: var(--hijau-tua) !important; border-color: var(--hijau-tua) !important; color: #fff !important; }
.btn-terang { background: #fff; border-color: #fff; color: var(--hijau-tua); }
.btn-krem { background: var(--krem-tua); border-color: var(--krem-tua); color: var(--teks); }
.btn-krem:hover { background: #e6d6a8; color: var(--teks); }
.btn-ubah { background: #fff; border-color: var(--hijau); color: var(--hijau); }
.btn-ubah:hover { background: var(--hijau-muda); color: var(--hijau-tua); border-color: var(--hijau); }
.btn-hapus { background: #fff; border-color: var(--merah); color: var(--merah); }
.btn-hapus:hover { background: var(--merah-muda); color: var(--merah); border-color: var(--merah); }
.btn-bahaya { background: var(--merah); border-color: var(--merah); color: #fff; }
.btn-bahaya:hover { background: #8f1d17; color: #fff; }
.btn-batal { background: #fff; border-color: var(--garis); color: var(--teks); }
.btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn-wa:hover { background: #17713d; color: #fff; }
.btn.disabled { opacity: .55; }
.tombol-raksasa { min-height: 68px; font-size: 1.3rem; border-radius: 18px; margin-bottom: 8px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 4px solid #f2c94c; outline-offset: 2px; }

.form-control-lg, .form-select-lg { min-height: 58px; font-size: 1.15rem; border: 2px solid var(--garis); border-radius: 14px; }
.form-control:focus, .form-select:focus { border-color: var(--hijau); box-shadow: 0 0 0 .25rem rgba(47,111,62,.25); }
.input-group-text { font-size: 1.15rem; font-weight: 700; background: var(--krem-tua); border: 2px solid var(--garis); }
.input-berat { font-size: 1.6rem; font-weight: 800; text-align: right; }

/* ---------- Pesan ---------- */
.pesan { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; margin-bottom: 16px; font-size: 1.1rem; font-weight: 600; }
.pesan .bi { font-size: 1.8rem; line-height: 1; }
.pesan-sukses { background: #d8f0da; border: 2px solid var(--hijau); color: var(--hijau-tua); }
.pesan-gagal { background: var(--merah-muda); border: 2px solid var(--merah); color: #7a1510; }

/* ---------- Pilihan karyawan & bunga ---------- */
.grid-pilih { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 360px; overflow-y: auto; padding: 4px; }
.grid-bunga { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pilih-kartu, .pilih-bunga { position: relative; display: block; margin: 0; cursor: pointer; }
.pilih-kartu input, .pilih-bunga input, .palet-warna input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.pilih-isi { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; min-height: 84px; padding: 10px 8px; border: 3px solid var(--garis); border-radius: 16px; background: #fff; font-weight: 700; word-break: break-word; }
.pilih-isi .bi { font-size: 1.8rem; color: var(--hijau); }
.pilih-isi small { font-weight: 500; color: var(--teks-redup); font-size: .85rem; }
.pilih-kartu input:checked + .pilih-isi { border-color: var(--hijau); background: var(--hijau-muda); box-shadow: 0 0 0 3px rgba(47,111,62,.25); }
.pilih-kartu input:checked + .pilih-isi .pilih-nama::after { content: " ✓"; color: var(--hijau); }
.pilih-bunga .pilih-isi { border-color: var(--warna); border-left-width: 10px; align-items: flex-start; text-align: left; }
.pilih-bunga .pilih-isi strong { font-size: 1.1rem; }
.pilih-bunga input:checked + .pilih-isi { background: var(--warna); color: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,.15); }
.pilih-bunga input:checked + .pilih-isi small { color: #fff; }
.pilih-kartu input:focus-visible + .pilih-isi, .pilih-bunga input:focus-visible + .pilih-isi, .palet-warna input:focus-visible + span { outline: 4px solid #f2c94c; outline-offset: 2px; }

.pratinjau { margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--hijau-muda); border: 2px dashed var(--hijau); text-align: center; }
.pratinjau-angka { font-size: 2.2rem; font-weight: 800; color: var(--hijau-tua); }
.pratinjau.salah { background: var(--merah-muda); border-color: var(--merah); }
.pratinjau.salah .pratinjau-angka { color: var(--merah); }

/* ---------- Item petikan ---------- */
.item-petikan { background: #fff; border: 1px solid var(--garis); border-left: 10px solid var(--warna, var(--hijau)); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.item-petikan-atas { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.item-nama { font-size: 1.2rem; font-weight: 800; }
.item-upah { font-size: 1.3rem; font-weight: 800; color: var(--hijau-tua); white-space: nowrap; }
.item-aksi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.item-aksi.tiga { grid-template-columns: 1fr 1fr; }
.item-aksi form { margin: 0; display: contents; }
.item-aksi .btn { width: 100%; }
.titik-warna { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--warna, var(--hijau)); vertical-align: -1px; }
.bulatan-warna { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--warna); }
.harga-besar { font-size: 1.3rem; font-weight: 800; color: var(--hijau-tua); }
.harga-besar small { font-size: .9rem; font-weight: 500; color: var(--teks-redup); }

.baris-ringkas { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee7d0; }
.baris-ringkas:last-child { border-bottom: 0; }
.baris-ringkas .nilai { font-weight: 800; font-size: 1.1rem; white-space: nowrap; }
.baris-ringkas .nilai.kecil { font-size: .95rem; text-align: right; }
.baris-tautan { color: inherit; text-decoration: none; min-height: 56px; }
.baris-tautan:hover { background: var(--krem); }

/* ---------- Karyawan ---------- */
.karyawan-kepala { display: flex; gap: 12px; align-items: center; }
.ikon-orang { font-size: 2.6rem; color: var(--hijau); line-height: 1; }
.lencana { display: inline-block; padding: 2px 12px; border-radius: 99px; font-size: .85rem; font-weight: 700; margin: 2px 4px 2px 0; }
.lencana-hijau { background: var(--hijau-muda); color: var(--hijau-tua); }
.lencana-krem { background: var(--krem-tua); color: #6b5314; }
.lencana-abu { background: #e2e2e2; color: #444; }

/* ---------- Gajian ---------- */
.tab-besar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--krem-tua); padding: 6px; border-radius: 18px; margin-bottom: 16px; }
.tab-besar a, .tab-besar button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border: 0; border-radius: 14px; background: transparent; font-size: 1.05rem; font-weight: 800; color: var(--teks); text-decoration: none; padding: 6px; }
.tab-besar .aktif { background: var(--hijau); color: #fff; }
.navigasi-periode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.kartu-gaji .gaji-nama { font-size: 1.35rem; font-weight: 800; margin-bottom: 6px; }
.gaji-total { margin-top: 10px; padding: 12px; background: var(--hijau-muda); border-radius: 14px; text-align: center; }
.gaji-total span { display: block; font-size: .95rem; font-weight: 800; letter-spacing: .08em; color: var(--hijau-tua); }
.gaji-total strong { display: block; font-size: 2.3rem; line-height: 1.2; color: var(--hijau-tua); }
.gaji-total small { color: var(--teks-redup); }
.rincian { margin-top: 12px; }
.rincian summary { cursor: pointer; font-weight: 700; color: var(--hijau); min-height: 48px; display: flex; align-items: center; gap: 8px; }
.rincian-hari { margin-top: 10px; font-weight: 800; color: var(--emas); border-bottom: 2px solid var(--krem-tua); }
.kosong-gaji { background: #f7f4ea; }

/* ---------- Beranda ---------- */
.banner-gajian { background: linear-gradient(135deg, var(--emas), #d3ab50); color: #2b1f00; border-radius: 18px; padding: 16px; margin: 12px 0 16px; }
.banner-judul { font-size: 1.5rem; font-weight: 800; }
.banner-gajian p { margin: 4px 0 12px; font-weight: 600; }
.menu-besar { display: flex; flex-direction: column; gap: 12px; }
.menu-besar-item { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; background: #fff; border: 1px solid var(--garis); border-radius: 18px; color: var(--teks); text-decoration: none; }
.menu-besar-item > .bi:first-child { font-size: 2rem; color: var(--hijau); }
.menu-besar-item span { flex: 1; display: flex; flex-direction: column; }
.menu-besar-item small { color: var(--teks-redup); font-size: .9rem; }
.menu-besar-item .panah { font-size: 1.3rem; color: var(--teks-redup); }

/* ---------- Palet warna, centang, peringatan ---------- */
.palet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.palet-warna { position: relative; margin: 0; }
.palet-warna span { display: flex; align-items: center; justify-content: center; height: 60px; border-radius: 16px; background: var(--warna); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--garis); color: transparent; font-size: 1.8rem; }
.palet-warna input:checked + span { color: #fff; box-shadow: 0 0 0 4px var(--teks); }
.zona-bahaya { border: 3px solid var(--merah); background: var(--merah-muda); }
.peringatan-besar { font-size: 1.5rem; font-weight: 800; color: var(--merah); margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.centang-besar { display: flex; gap: 14px; align-items: center; padding: 16px; background: #fff; border: 3px solid var(--merah); border-radius: 16px; font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.centang-besar input { width: 32px; height: 32px; flex: none; accent-color: var(--merah); }

/* ---------- Kotak konfirmasi ---------- */
.konfirmasi { border-radius: 22px; border: 0; padding: 8px; }
.ikon-awas { font-size: 3.4rem; color: var(--merah); }
.konfirmasi-judul { font-size: 1.6rem; font-weight: 800; }
.konfirmasi-isi { font-size: 1.15rem; margin: 8px 0 20px; }

/* ---------- Navigasi bawah ---------- */
.nav-bawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 3px solid var(--hijau); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -3px 10px rgba(0,0,0,.1); }
.nav-bawah a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tinggi-nav); color: var(--teks-redup); text-decoration: none; font-size: .8rem; font-weight: 700; padding: 6px 2px; }
.nav-bawah a .bi { font-size: 1.7rem; line-height: 1; }
.nav-bawah a.aktif { color: #fff; background: var(--hijau); }
.nav-bawah a:focus-visible { outline: 4px solid #f2c94c; outline-offset: -4px; }

/* ---------- Layar lebar ---------- */
@media (min-width: 640px) {
	.grid-pilih { grid-template-columns: repeat(3, 1fr); }
	.grid-dua { grid-template-columns: 1fr 1fr; }
	.grid-laporan { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
	.nav-bawah { max-width: 760px; margin: 0 auto; border-radius: 18px 18px 0 0; }
	.nav-bawah a { font-size: .95rem; }
}

/* ==========================================================
   Slip upah
   ========================================================== */
body.halaman-slip { padding: 12px; background: #e8e4d4; }
.kontrol-slip { max-width: 520px; margin: 0 auto 16px; }
.aksi-slip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.slip { background: #fff; color: #000; margin: 0 auto 20px; padding: 18px; border: 1px solid var(--garis); border-radius: 8px; }
.slip-kop { text-align: center; }
.slip-usaha { font-weight: 800; font-size: 1.2em; }
.slip-kecil { font-size: .8em; color: #444; }
.slip-tengah { text-align: center; margin: 6px 0; }
.slip-judul { text-align: center; font-weight: 800; letter-spacing: .08em; margin: 6px 0; }
.slip-garis { border-top: 1px dashed #000; margin: 8px 0; }
.slip-garis.tebal { border-top: 2px solid #000; }
.slip-info { display: flex; justify-content: space-between; gap: 8px; }
.slip-info strong { text-align: right; }
.slip-baris { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; align-items: flex-start; }
.slip-kanan { white-space: nowrap; font-weight: 700; }
.slip-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 1.2em; padding: 2px 0; }

.ukuran-a4 .slip { max-width: 190mm; font-size: 16px; }
.ukuran-thermal .slip { width: 58mm; max-width: 100%; font-size: 11px; padding: 3mm; border-radius: 0; }
.ukuran-thermal .slip-usaha { font-size: 13px; }

@media print {
	html { font-size: 16px; }
	body, body.halaman-slip { background: #fff !important; padding: 0 !important; }
	.no-print { display: none !important; }
	.slip { border: 0; border-radius: 0; margin: 0 auto; box-shadow: none; }
	.slip + .slip { page-break-before: always; break-before: page; }
	.ukuran-thermal .slip { padding: 0; width: 54mm; }
}