/* ============================================================
   Pembukuan Resort - gaya tampilan
   Tanpa pustaka luar supaya aplikasi tetap jalan tanpa internet
   ============================================================ */

:root {
    --samping-bg: #0c2a31;
    --samping-bg2: #0a2229;
    --primer: #0f766e;
    --primer-gelap: #115e59;
    --primer-muda: #e6f4f1;
    --aksen: #f59e0b;
    --latar: #f1f5f6;
    --kartu: #ffffff;
    --teks: #16333b;
    --teks-lembut: #6b8590;
    --garis: #e3eaec;
    --hijau: #059669;
    --hijau-muda: #e8f7f1;
    --merah: #dc2626;
    --merah-muda: #fdecec;
    --kuning: #b45309;
    --kuning-muda: #fdf3e3;
    --biru: #2563eb;
    --biru-muda: #eaf1fe;
    --abu-muda: #eef2f3;
    --bayang: 0 1px 2px rgba(16, 45, 52, .06), 0 4px 16px rgba(16, 45, 52, .05);
    --bayang-kuat: 0 8px 30px rgba(16, 45, 52, .16);
    --lengkung: 12px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--teks);
    background: var(--latar);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primer); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 4px; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 8px; }
small { font-size: 12px; }
code {
    background: var(--abu-muda); padding: 1px 6px; border-radius: 5px;
    font-family: Consolas, "Courier New", monospace; font-size: 12.5px;
}
.ikon { flex: none; vertical-align: -3px; }

/* ---------------------------------------------------- kerangka */
.cangkang { display: flex; min-height: 100vh; }

.samping {
    width: 254px; flex: none; background: var(--samping-bg);
    color: #cfe3e5; display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; z-index: 40;
}
.samping-kepala {
    display: flex; align-items: center; gap: 11px; padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.merek-logo {
    width: 38px; height: 38px; flex: none; border-radius: 10px;
    background: linear-gradient(135deg, var(--primer), #14b8a6);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; letter-spacing: .5px;
}
.samping-nama { overflow: hidden; }
.samping-nama strong {
    display: block; color: #fff; font-size: 14px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.samping-nama span { font-size: 11.5px; color: #7fa5ab; }

.samping-menu { flex: 1; overflow-y: auto; padding: 12px 10px 20px; }
.samping-menu::-webkit-scrollbar { width: 6px; }
.samping-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; }
.menu-grup {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
    color: #5f858c; margin: 14px 10px 6px; font-weight: 600;
}
.menu-item {
    display: flex; align-items: center; gap: 11px; padding: 9px 11px;
    border-radius: 9px; color: #b9d3d6; font-size: 13.5px; margin-bottom: 2px;
    transition: background .15s, color .15s;
}
.menu-item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.menu-item.aktif { background: var(--primer); color: #fff; box-shadow: 0 4px 12px rgba(15, 118, 110, .35); }
.samping-kaki { padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .07); }
.versi { font-size: 11px; color: #5f858c; }

.kolom-utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.atas {
    display: flex; align-items: center; gap: 14px; padding: 14px 24px;
    background: #fff; border-bottom: 1px solid var(--garis);
    position: sticky; top: 0; z-index: 30;
}
.atas-judul { flex: 1; min-width: 0; }
.atas-judul h1 { font-size: 18px; }
.atas-judul p { margin: 0; font-size: 12.5px; color: var(--teks-lembut); }
.atas-kanan { display: flex; align-items: center; gap: 8px; }
.pil-pengguna {
    display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px;
    border: 1px solid var(--garis); border-radius: 30px; color: var(--teks);
}
.pil-pengguna:hover { background: var(--abu-muda); text-decoration: none; }
.avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--primer-muda);
    color: var(--primer); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.pil-teks strong { display: block; font-size: 12.5px; line-height: 1.2; }
.pil-teks small { color: var(--teks-lembut); font-size: 11px; }

.isi { flex: 1; padding: 22px 24px 40px; max-width: 1500px; width: 100%; }
.kaki { padding: 14px 24px; color: var(--teks-lembut); font-size: 12px; border-top: 1px solid var(--garis); }

/* ---------------------------------------------------- kartu */
.kartu {
    background: var(--kartu); border: 1px solid var(--garis);
    border-radius: var(--lengkung); box-shadow: var(--bayang); margin-bottom: 18px;
    min-width: 0;
}
.kartu-kepala {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; border-bottom: 1px solid var(--garis);
}
.kartu-kepala h2, .kartu-kepala h3 { margin: 0; }
.kartu-kepala .kanan { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kartu-isi { padding: 18px; }
.kartu-isi.rapat { padding: 0; }
.sub { color: var(--teks-lembut); font-size: 12.5px; }

/* ---------------------------------------------------- kisi statistik */
.kisi { display: grid; gap: 16px; margin-bottom: 18px; }
.kisi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kisi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kisi-2-1 { grid-template-columns: 2fr 1fr; }
.kisi-1-2 { grid-template-columns: 1fr 2fr; }

.statistik {
    background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--lengkung);
    padding: 16px 18px; box-shadow: var(--bayang); position: relative; overflow: hidden;
}
.statistik .label { font-size: 12px; color: var(--teks-lembut); font-weight: 600; letter-spacing: .02em; }
.statistik .nilai { font-size: 22px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; }
.statistik .kaki-stat { font-size: 12px; color: var(--teks-lembut); margin-top: 4px; }
.statistik .tanda { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.statistik .naik { color: var(--hijau); }
.statistik .turun { color: var(--merah); }
.statistik .lencana-ikon {
    position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
}
.bg-hijau { background: var(--hijau-muda); color: var(--hijau); }
.bg-merah { background: var(--merah-muda); color: var(--merah); }
.bg-biru { background: var(--biru-muda); color: var(--biru); }
.bg-kuning { background: var(--kuning-muda); color: var(--kuning); }
.bg-primer { background: var(--primer-muda); color: var(--primer); }

/* ---------------------------------------------------- tabel */
.tabel-bungkus { overflow-x: auto; }

/* Judul kolom yang bisa diklik untuk mengurutkan */
th a.urut {
    color: inherit; text-decoration: none; display: inline-flex; align-items: center;
    gap: 4px; white-space: nowrap;
}
th a.urut:hover { color: var(--primer); text-decoration: underline; }
th a.urut.aktif { color: var(--primer); }
th a.urut .panah { font-size: 9px; line-height: 1; }
table.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabel th {
    text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--teks-lembut); padding: 11px 14px;
    border-bottom: 1px solid var(--garis); background: #fafcfc; white-space: nowrap;
}
table.tabel td { padding: 11px 14px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
table.tabel tbody tr:hover { background: #f8fbfb; }
table.tabel tbody tr:last-child td { border-bottom: none; }
table.tabel .kanan, .kanan-teks { text-align: right; }
table.tabel .tengah { text-align: center; }
table.tabel td.angka, table.tabel th.angka {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.tabel tr.total td { font-weight: 700; background: #f6f9f9; border-top: 2px solid var(--garis); }
table.tabel tr.subtotal td { font-weight: 600; background: #fbfdfd; }
.tabel-rapat th, .tabel-rapat td { padding: 8px 12px; }
.kosong { padding: 40px 20px; text-align: center; color: var(--teks-lembut); }
.kosong .ikon { opacity: .35; margin-bottom: 8px; }

/* ---------------------------------------------------- tombol */
.tbl {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 14px; border-radius: 9px; border: 1px solid var(--garis);
    background: #fff; color: var(--teks); font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: .15s; font-family: inherit; white-space: nowrap;
}
.tbl:hover { background: var(--abu-muda); text-decoration: none; }
.tbl.utama { background: var(--primer); border-color: var(--primer); color: #fff; }
.tbl.utama:hover { background: var(--primer-gelap); border-color: var(--primer-gelap); }
.tbl.bahaya { background: var(--merah); border-color: var(--merah); color: #fff; }
.tbl.bahaya:hover { filter: brightness(.93); }
.tbl.hijau { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.tbl.hijau:hover { filter: brightness(.93); }
.tbl.kecil { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.tbl.ikon-saja { padding: 8px; }
.tbl.lebar-penuh { width: 100%; padding: 11px; margin-top: 8px; }
.tbl:disabled { opacity: .5; cursor: not-allowed; }
.aksi-tabel { display: flex; gap: 5px; justify-content: flex-end; }

/* ---------------------------------------------------- formulir */
label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #3d5a63; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date],
input[type=search], select, textarea {
    width: 100%; padding: 9px 11px; border: 1px solid #d5e0e2; border-radius: 9px;
    font-size: 13.5px; font-family: inherit; color: var(--teks); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primer); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}
input[readonly], input:disabled, select:disabled { background: #f5f8f8; color: #6b8590; }
textarea { resize: vertical; min-height: 74px; }
select { appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8590' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 16px; padding-right: 30px; }
.grup { margin-bottom: 14px; }
.grup small { display: block; color: var(--teks-lembut); margin-top: 4px; font-size: 11.5px; }
.baris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.baris-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.baris-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kolom { min-width: 0; }
.centang { display: flex; gap: 9px; align-items: flex-start; font-weight: 500; margin: 14px 0; cursor: pointer; }
.centang input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--primer); }
.centang span { font-size: 13px; color: var(--teks); }
.input-uang { text-align: right; font-variant-numeric: tabular-nums; }
.pemisah-judul {
    margin: 20px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--garis);
    font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--teks-lembut);
}
.aksi-form { display: flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; }

/* penyaring laporan */
.penyaring {
    display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
    padding: 14px 18px; background: #fff; border: 1px solid var(--garis);
    border-radius: var(--lengkung); margin-bottom: 18px; box-shadow: var(--bayang);
}
.penyaring .grup { margin: 0; min-width: 150px; }
.penyaring .tumbuh { flex: 1; min-width: 200px; }

/* ---------------------------------------------------- lencana & notif */
.lencana {
    display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px;
    font-weight: 600; white-space: nowrap;
}
.lencana.hijau { background: var(--hijau-muda); color: var(--hijau); }
.lencana.merah { background: var(--merah-muda); color: var(--merah); }
.lencana.kuning { background: var(--kuning-muda); color: var(--kuning); }
.lencana.biru { background: var(--biru-muda); color: var(--biru); }
.lencana.abu { background: var(--abu-muda); color: #607b85; }

.notif {
    padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 13.5px;
    border: 1px solid transparent;
}
.notif p { margin: 4px 0 0; }
.notif.sukses { background: var(--hijau-muda); border-color: #b9e7d5; color: #05614a; }
.notif.galat { background: var(--merah-muda); border-color: #f5c2c2; color: #a01919; }
.notif.info { background: var(--biru-muda); border-color: #c5d9fb; color: #1d4ed8; }
.notif.peringatan { background: var(--kuning-muda); border-color: #f5dcb0; color: #92400e; }

/* ---------------------------------------------------- grafik */
.grafik { width: 100%; height: auto; display: block; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--teks-lembut); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.bar-mini { height: 7px; border-radius: 4px; background: var(--abu-muda); overflow: hidden; min-width: 60px; }
.bar-mini i { display: block; height: 100%; background: var(--primer); border-radius: 4px; }

/* ---------------------------------------------------- lain-lain */
.tab { display: flex; gap: 4px; border-bottom: 1px solid var(--garis); margin-bottom: 18px; flex-wrap: wrap; }
.tab a {
    padding: 9px 15px; font-size: 13.5px; font-weight: 600; color: var(--teks-lembut);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab a:hover { color: var(--teks); text-decoration: none; }
.tab a.aktif { color: var(--primer); border-bottom-color: var(--primer); }

.halaman-nomor { display: flex; gap: 5px; justify-content: center; padding: 14px; flex-wrap: wrap; }
.halaman-nomor a, .halaman-nomor span {
    min-width: 34px; text-align: center; padding: 6px 10px; border-radius: 8px;
    border: 1px solid var(--garis); font-size: 13px; color: var(--teks);
}
.halaman-nomor a:hover { background: var(--abu-muda); text-decoration: none; }
.halaman-nomor .aktif { background: var(--primer); border-color: var(--primer); color: #fff; }

.rincian { display: grid; grid-template-columns: 150px 1fr; gap: 7px 14px; font-size: 13.5px; }
.rincian dt { color: var(--teks-lembut); }
.rincian dd { margin: 0; font-weight: 500; }

.senarai-kecil { list-style: none; margin: 0; padding: 0; }
.senarai-kecil li {
    display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
    border-bottom: 1px dashed var(--garis); font-size: 13.5px;
}
.senarai-kecil li:last-child { border-bottom: none; }

.uang-positif { color: var(--hijau); font-weight: 600; }
.uang-negatif { color: var(--merah); font-weight: 600; }
.tebal { font-weight: 700; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }

/* ---------------------------------------------------- halaman masuk */
.halaman-masuk {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background: linear-gradient(140deg, #0c2a31 0%, #124b4b 55%, #0f766e 100%);
    padding: 24px;
}
.kotak-masuk {
    background: #fff; border-radius: 16px; padding: 30px; width: 100%; max-width: 400px;
    box-shadow: var(--bayang-kuat);
}
.kotak-masuk.lebar { max-width: 720px; }
.merek { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.merek h1 { font-size: 18px; margin: 0; }
.merek p { font-size: 12.5px; color: var(--teks-lembut); margin: 0; }
.merek .merek-logo { width: 44px; height: 44px; font-size: 16px; }
.petunjuk { font-size: 12.5px; color: var(--teks-lembut); }
.form-pasang .baris:last-of-type { margin-bottom: 0; }

/* ---------------------------------------------------- pilihan menu per pengguna */
.pilihan-menu {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px 20px;
    border: 1px solid var(--garis); border-radius: 10px; padding: 14px 16px;
    background: #fbfdfd; margin: 6px 0 4px;
}
.pilihan-menu[hidden] { display: none; }
.pilihan-menu .centang { margin: 6px 0; }
.menu-pilih-judul {
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--teks-lembut); margin-bottom: 2px;
}
.pilihan-menu > p.sub { grid-column: 1 / -1; margin: 10px 0 0; }
/* ---------------------------------------------------- cetak: invoice dan kwitansi */
body.halaman-cetak { background: #e9eef0; }

.bar-cetak { max-width: 820px; margin: 18px auto 0; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.bar-nota {
    max-width: 820px; margin: 8px auto 0; font-size: 12px; line-height: 1.6;
    color: var(--teks-lembut);
}
.bar-nota code { font-size: 11.5px; }

.bar-dokumen {
    max-width: 820px; margin: 12px auto 0; display: flex; gap: 10px; align-items: flex-end;
    flex-wrap: wrap; padding: 14px 18px; background: #fff; border: 1px solid var(--garis);
    border-radius: var(--lengkung); box-shadow: var(--bayang);
}
.bar-dokumen .grup { margin: 0; min-width: 150px; }
.bar-dokumen .tumbuh { flex: 1; min-width: 200px; }
/* Kolom tombol selebar tombolnya saja, supaya tidak menyisakan celah kosong */
.bar-dokumen .grup-tbl { min-width: 0; }
.bar-dokumen-nota { flex: 1 0 100%; margin: 2px 0 0; font-size: 12px; color: var(--teks-lembut); }

.lembar-cetak {
    background: #fff; max-width: 820px; margin: 14px auto 36px; padding: 0;
    box-shadow: var(--bayang); border-radius: 10px; overflow: hidden; color: var(--teks);
}
.inv-pita-atas { height: 6px; background: linear-gradient(90deg, var(--primer) 0%, #14b8a6 58%, var(--aksen) 100%); }
.inv-badan { padding: 34px 38px 30px; }

.inv-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 26px; }
.inv-kop-kiri { display: flex; gap: 14px; align-items: flex-start; }
.inv-logo { width: 62px; height: 62px; object-fit: contain; flex: none; }
.inv-usaha { font-size: 19px; font-weight: 700; margin-bottom: 3px; letter-spacing: -.01em; }
.inv-usaha-sub { font-size: 12px; color: var(--teks-lembut); line-height: 1.6; }

.inv-judul { text-align: right; flex: none; }
.inv-judul h1 {
    margin: 0; font-size: 30px; line-height: 1; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--primer);
}
.inv-judul .inv-nomor { font-size: 13px; font-weight: 700; margin-top: 7px; }

.inv-pihak { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0 20px; }
.inv-kotak { border: 1px solid var(--garis); border-radius: 10px; padding: 14px 16px; background: #fbfdfd; }
.inv-kotak .inv-nama { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.inv-kotak p { margin: 0; font-size: 12.5px; line-height: 1.6; }
.inv-kotak h4, .inv-catatan h4, .inv-riwayat h4, .inv-jumlah-besar h4 {
    margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--teks-lembut);
}
.inv-catatan h4.inv-spasi { margin-top: 14px; }
.inv-pasangan { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: 12.5px; margin: 0; }
.inv-pasangan dt { color: var(--teks-lembut); }
.inv-pasangan dd { margin: 0; font-weight: 600; }
.inv-lembut { color: var(--teks-lembut); font-weight: 400; }

table.inv-item { width: 100%; border-collapse: collapse; font-size: 13px; }
table.inv-item thead th {
    background: var(--samping-bg); color: #fff; font-weight: 600; font-size: 10.5px;
    letter-spacing: .09em; text-transform: uppercase; padding: 10px 12px; text-align: left;
}
table.inv-item thead th.angka { text-align: right; }
table.inv-item tbody td { padding: 10px 12px; border-bottom: 1px solid var(--garis); vertical-align: top; }
table.inv-item tbody tr:nth-child(even) td { background: #f8fbfb; }
table.inv-item td.angka { text-align: right; white-space: nowrap; }
table.inv-item .nomor-urut { width: 34px; color: var(--teks-lembut); }
table.inv-item .inv-item-sub { display: block; font-size: 11.5px; color: var(--teks-lembut); }
table.inv-item .inv-kosong { text-align: center; color: var(--teks-lembut); padding: 18px; }

.inv-bawah { display: grid; grid-template-columns: 1fr 310px; gap: 26px; margin-top: 20px; align-items: start; }
.inv-terbilang {
    border-left: 3px solid var(--primer); background: var(--primer-muda);
    padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 12.5px;
}
.inv-terbilang span {
    display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--primer-gelap); margin-bottom: 2px;
}
.inv-riwayat { margin-top: 18px; }
.inv-riwayat table { border-collapse: collapse; font-size: 12.5px; width: 100%; max-width: 330px; }
.inv-riwayat td { padding: 3px 10px 3px 0; border-bottom: 1px dotted var(--garis); }
.inv-riwayat td.angka { text-align: right; padding-right: 0; font-weight: 600; white-space: nowrap; }

table.inv-total { width: 100%; border-collapse: collapse; font-size: 13px; }
table.inv-total td { padding: 5px 0; }
table.inv-total td.angka { text-align: right; white-space: nowrap; font-weight: 600; }
table.inv-total tr.inv-garis-atas td { border-top: 1px solid var(--garis); padding-top: 8px; }
table.inv-total tr.inv-total-besar td {
    font-size: 15px; font-weight: 700; padding: 9px 0; border-top: 2px solid var(--teks);
}
.inv-sisa {
    margin-top: 10px; border-radius: 10px; padding: 11px 14px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.inv-sisa .inv-sisa-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.inv-sisa .inv-sisa-nilai { font-size: 18px; font-weight: 700; white-space: nowrap; }
.inv-sisa.tagih { background: var(--merah-muda); color: #b42318; box-shadow: inset 0 0 0 1px #f3cdcd; }
.inv-sisa.lunas { background: var(--hijau-muda); color: #065f46; box-shadow: inset 0 0 0 1px #b6e4d2; }

.inv-jumlah-besar {
    margin: 22px 0 16px; padding: 16px 20px; background: #fbfdfd;
    border: 1px solid var(--garis); border-left: 5px solid var(--primer); border-radius: 10px;
}
.inv-nilai-besar { font-size: 28px; font-weight: 700; color: var(--primer-gelap); letter-spacing: -.01em; }
.inv-jumlah-besar em { font-size: 12.5px; color: var(--teks-lembut); }
.inv-untuk { font-size: 13px; margin: 0 0 18px; }

.inv-catatan { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
.inv-catatan p { margin: 0; font-size: 12.5px; line-height: 1.65; }

.inv-ttd { display: flex; justify-content: space-between; gap: 20px; text-align: center; font-size: 12.5px; margin-top: 34px; }
.inv-ttd > div { width: 210px; }
.inv-ttd .garis-ttd { margin-top: 56px; border-top: 1px solid var(--teks); padding-top: 5px; font-weight: 600; }
.inv-ttd .garis-ttd small { display: block; font-weight: 400; color: var(--teks-lembut); }
.inv-kaki {
    margin-top: 26px; border-top: 1px solid var(--garis); padding-top: 12px;
    text-align: center; font-size: 11.5px; color: var(--teks-lembut);
}

@page { margin: 12mm; }

@media print {
    .samping, .atas, .kaki, .bar-cetak, .tanpa-cetak { display: none !important; }
    /* Baris penyaring berisi kotak tanggal dan tombol, yang tidak ada gunanya
       di atas kertas maupun di dalam PDF */
    .penyaring { display: none !important; }
    /* Tabel lebar digulir menyamping di layar. Di atas kertas tidak ada yang
       bisa digulir, jadi bagian kanannya justru terpotong */
    .tabel-bungkus { overflow: visible !important; }
    /* Tombol tidak pernah ada gunanya di atas kertas, termasuk tombol CSV di
       sudut kartu dan tombol aksi pada tiap baris tabel */
    .tbl, .aksi-tabel, .aksi-form { display: none !important; }
    body, body.halaman-cetak { background: #fff; font-size: 12px; }
    /* Laporan mengecil supaya tabelnya muat, tetapi invoice dan kwitansi tetap
       seukuran layar supaya cetakannya sama persis dengan yang dilihat. */
    body.halaman-cetak { font-size: 14px; }
    .isi { padding: 0; }
    /* Kartu dibiarkan terpotong antar halaman. Dulu ia dijaga utuh, tetapi
       kartu berisi tabel panjang tidak pernah muat pada sisa halaman berjalan,
       sehingga seluruhnya dilempar ke halaman berikutnya dan menyisakan
       halaman pertama yang nyaris kosong. Yang dijaga utuh cukup bagian
       kecilnya: kartu ringkasan dan tiap baris tabel. */
    .kartu { box-shadow: none; border: 1px solid #ccc; page-break-inside: auto; }
    .statistik { page-break-inside: avoid; }
    table.tabel tr { page-break-inside: avoid; }
    /* Judul kolom diulang pada tiap halaman lanjutan, supaya angka di halaman
       kedua dan seterusnya tetap jelas kolom apa */
    table.tabel thead { display: table-header-group; }
    /* Sebaliknya baris jumlah tidak boleh ikut diulang. Bawaan peramban
       mengulang tfoot di kaki tiap halaman, sehingga total keseluruhan
       tercetak di halaman yang isinya baru sebagian dan terbaca seolah itu
       jumlah halaman tersebut. */
    table.tabel tfoot { display: table-row-group; }
    .lembar-cetak { box-shadow: none; margin: 0; max-width: none; border-radius: 0; }
    .inv-badan { padding: 0; }
    a { color: #000; }
    table.tabel th { background: #eee !important; }
    table.inv-item tbody tr, .inv-bawah, .inv-ttd, .inv-catatan { page-break-inside: avoid; }
    table.inv-item thead { display: table-header-group; }
    .inv-pita-atas, .inv-kotak, .inv-terbilang, .inv-sisa,
    .inv-jumlah-besar, table.inv-item thead th, table.inv-item tbody tr:nth-child(even) td {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

/* ---------------------------------------------------- layar kecil */
.hanya-hp { display: none; }
.tirai { display: none; }

@media (max-width: 1100px) {
    .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kisi-2-1, .kisi-1-2, .kisi-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Sengaja "screen and", bukan sekadar max-width. Area cetak A4 dengan tepi 12mm
   hanya selebar ~703px, jadi tanpa penegasan ini seluruh tata letak telepon ikut
   berlaku di atas kertas: kop invoice pecah dua baris, kotak rinciannya menumpuk,
   dan blok totalnya melebar. Hasil cetak jadi tidak sama dengan yang di layar. */
@media screen and (max-width: 780px) {
    .samping {
        position: fixed; left: 0; top: 0; transform: translateX(-100%);
        transition: transform .25s ease; box-shadow: var(--bayang-kuat);
    }
    .samping.buka { transform: translateX(0); }
    .tirai.tampil {
        display: block; position: fixed; inset: 0; background: rgba(8, 30, 35, .45); z-index: 35;
    }
    .hanya-hp { display: inline-flex; }
    .isi { padding: 16px 14px 32px; }
    .atas { padding: 12px 14px; }
    .kisi-2, .kisi-4 { grid-template-columns: minmax(0, 1fr); }
    .baris, .baris-3, .baris-4 { grid-template-columns: minmax(0, 1fr); }
    .pil-teks { display: none; }
    .pil-pengguna { padding: 4px; border: none; }
    .rincian { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .rincian dd { margin-bottom: 8px; }
    .lembar-cetak { margin: 12px; }
    .inv-badan { padding: 18px; }
    .inv-kop { flex-direction: column; gap: 14px; }
    .inv-judul { text-align: left; }
    .inv-pihak, .inv-bawah, .inv-catatan { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .inv-judul h1 { font-size: 25px; }
    .inv-ttd { flex-direction: column; align-items: flex-start; text-align: left; gap: 26px; }
}

/* ---------------------------------------------------- kop laporan saat dicetak */
.hanya-cetak { display: none; }
@media print {
    .hanya-cetak { display: block; margin-bottom: 14px; }
    .kartu-kepala { border-bottom: 1px solid #999; }
}

/* ---------------------------------------------------- kalender hunian */
table.kalender { border-collapse: collapse; width: 100%; font-size: 12px; }
table.kalender th, table.kalender td {
    border: 1px solid var(--garis); padding: 0; height: 36px; text-align: center;
}
table.kalender th {
    background: #fafcfc; color: var(--teks-lembut); font-weight: 600;
    padding: 5px 2px; line-height: 1.2; min-width: 32px;
}
table.kalender th small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; }
table.kalender .sel-kamar {
    position: sticky; left: 0; z-index: 2; background: #fff; text-align: left;
    padding: 6px 12px; white-space: nowrap; min-width: 130px;
    box-shadow: 1px 0 0 var(--garis);
}
table.kalender thead .sel-kamar { background: #fafcfc; }
table.kalender .sel-kamar strong { display: block; font-size: 13px; }
table.kalender .sel-kamar small { font-size: 11px; }
table.kalender .akhir-pekan { background: #f4f8f8; }
table.kalender .hari-ini { background: #fdf3e3; box-shadow: inset 0 0 0 1px #f0c47a; }

.pita {
    display: block; margin: 4px 3px; padding: 4px 8px; border-radius: 6px;
    font-size: 11.5px; font-weight: 600; color: #fff; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pita:hover { text-decoration: none; filter: brightness(1.08); }
.pita.biru { background: var(--biru); }
.pita.hijau { background: var(--hijau); }
.pita.abu { background: #8aa3ab; }
.titik-utang {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #fde68a; margin-right: 5px; vertical-align: 1px;
}
.sel-perbaikan {
    background: repeating-linear-gradient(45deg, #fdecec, #fdecec 5px, #fbdcdc 5px, #fbdcdc 10px);
}
.sel-kosong a {
    display: flex; align-items: center; justify-content: center; height: 100%;
    color: transparent; font-size: 15px; font-weight: 600; text-decoration: none;
}
.sel-kosong a:hover { background: var(--primer-muda); color: var(--primer); text-decoration: none; }

@media print {
    table.kalender .sel-kosong a { display: none; }
    table.kalender .sel-kamar { position: static; box-shadow: none; }
    .pita { color: #000 !important; background: none !important; border: 1px solid #666; }
}

/* ---------------------------------------------------- logo usaha */
.baris-logo { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start; }
.pratinjau-logo {
    width: 132px; height: 92px; border: 1px dashed #cbd8db; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; padding: 8px;
    background: repeating-conic-gradient(#f4f7f7 0% 25%, #fff 0% 50%) 50% / 14px 14px;
}
.pratinjau-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tanpa-logo { font-size: 11.5px; color: var(--teks-lembut); text-align: center; }

.samping-kepala .logo-samping {
    width: 38px; height: 38px; flex: none; border-radius: 9px; object-fit: contain;
    background: rgba(255, 255, 255, .93); padding: 3px;
}

.papan-nama {
    display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 18px;
    background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--lengkung);
    box-shadow: var(--bayang);
}
.papan-nama .logo-usaha {
    width: 62px; height: 62px; flex: none; object-fit: contain;
}
.papan-nama .nama-usaha { flex: 1; min-width: 0; }
.papan-nama h2 { font-size: 19px; margin: 0 0 2px; }
.papan-nama p { margin: 0; font-size: 12.5px; color: var(--teks-lembut); }
.papan-nama .tanggal-hari {
    text-align: right; font-size: 12.5px; color: var(--teks-lembut); white-space: nowrap;
}
.papan-nama .tanggal-hari strong { display: block; font-size: 15px; color: var(--teks); }

.kotak-masuk .logo-masuk { max-width: 150px; max-height: 76px; object-fit: contain; margin-bottom: 4px; }

.logo-cetak { max-height: 60px; max-width: 190px; object-fit: contain; margin-bottom: 6px; }

@media (max-width: 780px) {
    .baris-logo { grid-template-columns: minmax(0, 1fr); }
    .papan-nama { flex-wrap: wrap; }
    .papan-nama .tanggal-hari { text-align: left; width: 100%; }
}

/* ---------------------------------------------------- pemilih akun yang bisa diketik */
[hidden] { display: none !important; }

.pilih-bungkus { position: relative; }
.pilih-bungkus .pilih-asli { display: none; }
.pilih-ketik {
    width: 100%; padding: 9px 30px 9px 11px; border: 1px solid #d5e0e2; border-radius: 9px;
    font-size: 13.5px; font-family: inherit; color: var(--teks); background: #fff;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8590' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 15px;
    cursor: text;
}
.pilih-ketik:focus {
    outline: none; border-color: var(--primer); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}
.pilih-ketik.belum-dipilih::placeholder { color: #93aeb6; }
.pilih-bungkus.terbuka .pilih-ketik { border-color: var(--primer); }

.pilih-daftar {
    position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
    max-height: 268px; overflow-y: auto; background: #fff;
    border: 1px solid var(--garis); border-radius: 10px; box-shadow: var(--bayang-kuat);
    padding: 5px;
}
.pilih-grup {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    color: var(--teks-lembut); padding: 8px 9px 4px;
}
.pilih-opsi {
    padding: 7px 9px; border-radius: 7px; font-size: 13.5px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pilih-opsi:hover, .pilih-opsi.sorot { background: var(--primer-muda); color: var(--primer); }
.pilih-opsi.terpilih { font-weight: 700; }
.pilih-opsi.terpilih::after { content: " ✓"; color: var(--primer); }
.pilih-kosong { padding: 14px 10px; font-size: 13px; color: var(--teks-lembut); text-align: center; }

/* di dalam tabel jurnal, daftar tidak boleh terpotong oleh kotak bergulir */
.tabel-bungkus.tanpa-potong { overflow: visible; }