:root {
  --biru: #1E88E5; --kuning: #FDD835; --orange: #FB8C00; --cyan: #00BCD4; --ungu: #8E24AA;
  --merah: #E53935; --hijau: #43A047; --pink: #EC407A; --maroon: #880E4F;
  --bg: #f3f5f8; --kartu: #fff; --teks: #1f2933; --redup: #6b7785; --garis: #e1e5ea; --utama: #1565c0;
  --atas: #0d47a1; --atas-teks: #fff; --nav-bg: #fff; --hover: #f0f4fa; --aktif-bg: #e3f0ff; --dipilih: #d8e6fb;
  --input-bg: #fff; --input-garis: #c9d1da; --fokus: #90caf9; --kepala: #f7f9fb; --readonly-bg: #eef1f5; --readonly-teks: #555;
  --pilihan-bg: #e8f5e9; --pilihan-garis: #a5d6a7; --info-bg: #fff8e1; --info-garis: #ffe082; --nota-bg: #fafafa;
  color-scheme: light;
}
/* ---------- TEMA (dipilih di bar atas, disimpan per komputer) ---------- */
[data-tema="gelap"] {
  --bg: #12161c; --kartu: #1c232c; --teks: #e3e8ef; --redup: #9aa7b5; --garis: #2c3642; --utama: #3d8bfd;
  --atas: #0b1a33; --atas-teks: #e3e8ef; --nav-bg: #161c24; --hover: #222b36; --aktif-bg: #1d3150; --dipilih: #24467a;
  --input-bg: #11161d; --input-garis: #3a4654; --fokus: #3d8bfd; --kepala: #232c37; --readonly-bg: #1a2029; --readonly-teks: #8b98a7;
  --pilihan-bg: #1b3324; --pilihan-garis: #2e6b40; --info-bg: #3a3115; --info-garis: #6d5a1c; --nota-bg: #1a2029;
  color-scheme: dark;
}
[data-tema="pink"] {
  --bg: #fdf2f7; --kartu: #fff; --teks: #3b1f2b; --redup: #8a6474; --garis: #f3d4e2; --utama: #c2185b;
  --atas: #ad1457; --atas-teks: #fff; --nav-bg: #fff; --hover: #fde4ef; --aktif-bg: #fce4ec; --dipilih: #f8bbd0;
  --input-bg: #fff; --input-garis: #e9b9cd; --fokus: #f48fb1; --kepala: #fdf0f5; --readonly-bg: #f8eef3; --readonly-teks: #6d4c5a;
  --nota-bg: #fffafc;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; background: var(--bg); color: var(--teks); }
button, input, select, textarea { font: inherit; }
a { color: var(--utama); }

/* ---------- layout ---------- */
#trial { background: var(--merah); color: #fff; text-align: center; font-weight: 700; padding: 6px; letter-spacing: .5px; }
#pitaSewa { background: #FB8C00; color: #fff; text-align: center; font-weight: 700; padding: 6px; }
@media print { #pitaSewa { display: none !important; } }
.atas { display: flex; align-items: center; gap: 12px; background: var(--atas); color: var(--atas-teks); padding: 8px 16px; }
.atas .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.atas .logo img { width: 28px; height: 28px; }
.atas .kanan { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.atas button { background: rgba(255,255,255,.15); color: var(--atas-teks); border: 0; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.badan { display: flex; min-height: calc(100vh - 48px); }
nav { width: 210px; background: var(--nav-bg); border-right: 1px solid var(--garis); padding: 8px 0; flex-shrink: 0; }
nav .grup { font-size: 11px; text-transform: uppercase; color: var(--redup); padding: 12px 16px 4px; letter-spacing: .5px; }
nav a { display: block; padding: 7px 16px; color: var(--teks); text-decoration: none; border-left: 3px solid transparent; }
nav a:hover { background: var(--hover); }
nav a.aktif { background: var(--aktif-bg); border-left-color: var(--utama); color: var(--utama); font-weight: 600; }
main { flex: 1; padding: 16px; min-width: 0; }
h1 { font-size: 20px; margin: 0 0 12px; }
h3 { margin: 0 0 10px; font-size: 15px; }

.kartu { background: var(--kartu); border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.07); margin-bottom: 14px; }
.baris { display: flex; gap: 14px; flex-wrap: wrap; }
.baris > * { flex: 1; min-width: 260px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px 14px; }
@media (max-width: 900px) { .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); } nav { width: 170px; } }

/* ---------- form ---------- */
label { display: block; font-size: 12px; color: var(--redup); margin-bottom: 3px; font-weight: 600; }
label.wajib::after { content: " *"; color: var(--merah); }
input, select, textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--input-garis); border-radius: 6px; background: var(--input-bg); color: var(--teks); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fokus); border-color: var(--biru); }
input.uang, td.uang, th.uang, .kanan-teks { text-align: right; }
input[type=checkbox], input[type=radio] { width: auto; }
.cek { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--teks); font-weight: 400; margin: 0; cursor: pointer; }
.btn { padding: 8px 14px; border: 1px solid var(--input-garis); background: var(--input-bg); color: var(--teks); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.btn:hover { filter: brightness(.96); }
.btn.utama { background: var(--utama); color: #fff; border-color: var(--utama); }
.btn.hijau { background: var(--hijau); color: #fff; border-color: var(--hijau); }
.btn.merah { background: var(--merah); color: #fff; border-color: var(--merah); }
.btn.orange { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn.wa { background: #25D366; color: #fff; border-color: #25D366; }
.btn.kecil { padding: 3px 8px; font-size: 12px; }
.btn.besar { padding: 12px 20px; font-size: 16px; font-weight: 700; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.preset { display: flex; flex-wrap: wrap; gap: 6px; }
.preset button { border: 1px solid var(--input-garis); background: var(--input-bg); color: var(--teks); border-radius: 16px; padding: 5px 12px; cursor: pointer; }
.preset button.on { background: var(--utama); color: #fff; border-color: var(--utama); }
.cekgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }

/* ---------- tabel ---------- */
.tabel-wadah { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: top; }
th { background: var(--kepala); font-size: 12px; color: var(--redup); position: sticky; top: 0; }
tr.klik { cursor: pointer; }
tr.klik:hover td { background: var(--hover); }
tfoot td { font-weight: 700; background: var(--kepala); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; }
.redup { color: var(--redup); font-size: 12px; }

/* ---------- dashboard ---------- */
.kartu-status { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kartu-status a { color: #fff; text-decoration: none; border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.kartu-status .angka { font-size: 28px; font-weight: 700; }
.kartu-status .ket { font-size: 13px; opacity: .95; }
.grafik { position: relative; height: 340px; }

/* ---------- tab ---------- */
.tab { display: flex; gap: 4px; border-bottom: 2px solid var(--garis); margin-bottom: 12px; flex-wrap: wrap; }
.tab a { padding: 8px 14px; text-decoration: none; color: var(--redup); border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; }
.tab a.aktif { color: var(--utama); border-bottom-color: var(--utama); font-weight: 600; }

/* ---------- modal & toast ---------- */
.latar { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; z-index: 50; padding: 40px 16px; overflow-y: auto; }
.latar.tengah > .modal { margin: auto 0; }
.modal { background: var(--kartu); border-radius: 12px; width: 100%; max-width: 560px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal.lebar { max-width: 880px; }
.modal .kepala { padding: 12px 16px; border-bottom: 1px solid var(--garis); font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; }
.modal .kepala button { border: 0; background: none; color: var(--teks); font-size: 20px; cursor: pointer; line-height: 1; }
.modal .isi { padding: 16px; }
.modal .kaki { padding: 12px 16px; border-top: 1px solid var(--garis); display: flex; justify-content: flex-end; gap: 8px; }
.qris-layar { position: fixed; inset: 0; background: #fff; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.qris-layar img, .qris-layar .ganti { width: min(60vh, 80vw); height: min(60vh, 80vw); object-fit: contain; border: 1px solid var(--garis); }
.qris-layar .ganti { display: flex; align-items: center; justify-content: center; color: var(--redup); text-align: center; padding: 20px; }
.qris-layar .nominal { font-size: 56px; font-weight: 800; }
#toast { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 70; }
#toast div { background: #263238; color: #fff; padding: 10px 14px; border-radius: 8px; max-width: 380px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
#toast div.error { background: var(--merah); }
.total-besar { font-size: 30px; font-weight: 800; text-align: right; }
.metode { display: flex; gap: 8px; margin-bottom: 12px; }
.metode button { flex: 1; padding: 12px; border: 2px solid var(--garis); background: var(--input-bg); color: var(--teks); border-radius: 8px; cursor: pointer; font-weight: 700; }
.metode button.on { border-color: var(--utama); background: var(--aktif-bg); color: var(--utama); }
.bank { border: 2px solid var(--garis); border-radius: 8px; padding: 10px; cursor: pointer; display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.bank.on { border-color: var(--utama); background: var(--aktif-bg); }
.bank .logo-bank { width: 64px; height: 36px; border-radius: 6px; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cari-wadah { position: relative; }
.saran { position: absolute; left: 0; right: 0; top: 100%; background: var(--kartu); border: 1px solid var(--input-garis); border-radius: 6px; z-index: 20; max-height: 280px; overflow-y: auto; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.saran div { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--garis); }
.saran div:hover, .saran div.on { background: var(--aktif-bg); }
.pilihan { background: var(--pilihan-bg); border: 1px solid var(--pilihan-garis); padding: 8px 10px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.info { background: var(--info-bg); border: 1px solid var(--info-garis); padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.timeline div { padding: 4px 0 4px 12px; border-left: 3px solid var(--garis); font-size: 13px; }
pre.nota { background: var(--nota-bg); border: 1px dashed #bbb; padding: 10px; font-size: 12px; overflow-x: auto; }

/* ---------- login ---------- */
.login { max-width: 380px; margin: 8vh auto; }
.login .logo { text-align: center; margin-bottom: 12px; }
.login .logo img { width: 96px; height: 96px; }

/* ---------- cetak laporan A4 ---------- */
#cetak-area { display: none; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body { background: #fff; }
  body > *:not(#cetak-area) { display: none !important; }
  #cetak-area { display: block; font-size: 11px; font-family: 'Arial Narrow', Arial, sans-serif; }
  #cetak-area table { font-size: 10px; }
  #cetak-area th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; position: static; }
  #cetak-area h2 { margin: 0; font-size: 15px; }
}

/* Kolom yang tidak bisa diubah tampil abu-abu agar jelas bagi pengguna */
input[readonly], textarea[readonly], select:disabled { background: var(--readonly-bg); color: var(--readonly-teks); cursor: not-allowed; }

.preview-nota { font-family: Consolas, 'Courier New', monospace; font-size: 12px; background: #fff; color: #111; border: 1px solid #ccd; padding: 10px; white-space: pre; overflow-x: auto; max-height: 55vh; }

/* ---- Daftar item model grid ---- */
.filter-item { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; align-items: center; max-width: 760px; }
.filter-item > label { text-align: right; margin: 0; }
.filter-item .pilihan { display: flex; gap: 14px; flex-wrap: wrap; }
.baris-cari { display: flex; gap: 6px; }
.baris-cari input, .baris-cari select { flex: 1; }
.grid-wadah { max-height: calc(100vh - 380px); min-height: 220px; overflow: auto; border: 1px solid var(--input-garis); }
.grid-wadah thead th { position: sticky; top: 0; z-index: 1; }
.grid-wadah tr.dipilih td { background: var(--dipilih) !important; }
.grid-kaki { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.grid-kaki .pemisah { flex: 0 0 14px; }
.grid-kaki #iHal { min-width: 60px; text-align: center; }
@media (max-width: 640px) { .filter-item { grid-template-columns: 1fr; } .filter-item > label { text-align: left; } }
.filter-item .pilihan { background: none; border: 0; padding: 0; justify-content: flex-start; }
.filter-item .pilihan .cek { flex: 0 0 auto; }

/* ---- Penerimaan servis: kolom bertumpuk ---- */
.tumpuk { display: flex; flex-direction: column; }
/* ---- Filter daftar item ringkas ---- */
.filter-atas { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.filter-item { grid-template-columns: 95px 230px auto 200px; max-width: none; }
.filter-item .span3 { grid-column: span 3; }
.total-info { font-size: 13px; color: var(--redup); padding-top: 8px; }
/* ---- Garis grid + geser lebar kolom ---- */
.tabel-wadah th, .tabel-wadah td { border-right: 1px solid var(--garis); }
.tabel-wadah th:last-child, .tabel-wadah td:last-child { border-right: 0; }
.tabel-wadah th { border-right-color: var(--input-garis); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabel-wadah table[style*="fixed"] td { overflow: hidden; text-overflow: ellipsis; }
body.sedang-geser, body.sedang-geser * { cursor: col-resize !important; user-select: none; }
/* ---- Grafik laporan ---- */
.grafik-lap { height: 280px; margin-bottom: 6px; }
.judul-grafik { margin: 12px 0 4px; font-size: 14px; }
@media (max-width: 640px) { .filter-item { grid-template-columns: 1fr; } .filter-item .span3 { grid-column: auto; } }

/* ---- Hasil laporan di layar ---- */
.lap-kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--utama); padding-bottom: 8px; margin-bottom: 12px; }
.lap-kepala h2 { margin: 0 0 2px; font-size: 20px; color: var(--utama); }
.lap-kepala .redup { font-size: 13px; }
.lap-ringkas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.lap-ringkas > div { border: 1px solid var(--garis); border-left: 4px solid var(--input-garis); border-radius: 8px; padding: 8px 12px; background: var(--kepala); }
.lap-ringkas > div.utama { border-left-color: var(--utama); background: var(--aktif-bg); }
.lap-ringkas span { display: block; font-size: 12px; color: var(--redup); }
.lap-ringkas b { display: block; font-size: 20px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lap-ringkas b.minus, .tabel-lap td.minus { color: var(--merah); }
.lap-grafik { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; margin-bottom: 14px; }
.lap-grafik-kotak { border: 1px solid var(--garis); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.lap-grafik-kotak h4 { margin: 0 0 6px; font-size: 13px; }
.lap-grafik-kotak .grafik-lap { margin-bottom: 0; }
.lap-grafik-kosong { text-align: center; padding: 40px 0; }
.lap-grafik-kotak .grafik-lap.pie { max-width: none; }
.tabel-lap-wadah { max-height: calc(100vh - 230px); min-height: 160px; overflow: auto; border: 1px solid var(--garis); border-radius: 8px; }
.tabel-lap th { background: var(--utama); color: #fff; font-size: 12px; font-weight: 600; top: 0; z-index: 1; border-right-color: rgba(255,255,255,.25); }
.tabel-lap tbody tr:nth-child(even) td { background: var(--kepala); }
.tabel-lap tbody tr:hover td { background: var(--hover); }
.tabel-lap td.no { color: var(--redup); width: 1%; }
.tabel-lap td.uang { white-space: nowrap; }
.tabel-lap tr.sorot td { font-weight: 700; background: var(--aktif-bg) !important; }
.tabel-lap tfoot td { position: sticky; bottom: 0; background: var(--aktif-bg); border-top: 2px solid var(--utama); }
@media (max-width: 640px) { .lap-grafik { grid-template-columns: 1fr; } }
.watermark-trial { background: #fdecea; color: #b71c1c; border: 1px solid #f5c2c0; font-weight: 700; text-align: center; padding: 6px; border-radius: 6px; margin-bottom: 8px; }
.grid-kaki .no-hal { min-width: 60px; text-align: center; }
.pilih-cetak { align-items: center; flex-wrap: wrap; }
.pilih-cetak > label { margin: 0; }
.pilih-cetak .pemisah { flex: 0 0 10px; }
/* Penerimaan Servis: mode cetak di kiri, tombol di kanan; pita "tersimpan" di atasnya */
.bar-servis { justify-content: space-between; gap: 12px; }
.bar-servis .mode-cetak { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bar-servis .mode-cetak > label { margin: 0; }
.tombol-servis { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.servis-tersimpan { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px;
  padding: 10px 14px; border: 1px solid var(--hijau); border-left-width: 5px; border-radius: 8px; background: var(--kartu); }
.servis-tersimpan b { font-size: 18px; color: var(--hijau); }
.servis-tersimpan .redup { font-size: 12px; margin-top: 2px; }
#sStatus { flex-wrap: wrap; gap: 6px 12px; max-width: 520px; }
#tb td:nth-child(1), #tb td:nth-child(2), #tb td:nth-child(9), #tb td:nth-child(10) { white-space: nowrap; }
#tb td { white-space: nowrap; }
#tb td:nth-child(8) { white-space: normal; min-width: 220px; }
a.btn { text-decoration: none; }
.total-info { max-width: 280px; text-align: right; }
/* preview cetak: kertas putih berisi teks + QR (bisa discan) + logo */
.pv-kertas { background: #fff; color: #111; font-family: Consolas, 'Courier New', monospace; font-size: 12px; padding: 14px; margin: 0 auto 14px; box-shadow: 0 1px 6px rgba(0,0,0,.15); overflow: hidden; }
.pv-kertas.a4 { max-width: 1200px; }
.pv-kertas.thermal { width: fit-content; font-size: 13px; }
.pv-teks { position: relative; white-space: pre; line-height: 1.25; max-width: 100%; }
.pv-apung { position: absolute; background: #fff; }
/* preview printer standar (A4): Arial Narrow, potongan teks diletakkan per kolom, blok teks di tengah kertas */
.pv-kertas.narrow { font-family: 'Arial Narrow', Arial, sans-serif; font-stretch: condensed; }
.pv-teks.pv-a4 { white-space: nowrap; margin: 0 auto; line-height: 1.2; }
.pv-brs { position: relative; }
.pv-brs.tebal { font-weight: 700; }
.pv-seg { position: absolute; top: 0; white-space: pre; }
.pv-seg.C > span { display: inline-block; }
.pv-garis { position: absolute; top: 50%; border-top: 1px dashed #111; }
.pv-garis.g2 { border-top: 3px double #111; margin-top: -1px; }
.pv-garis.g3 { border-top: 2px dotted #111; }
.pv-pita { position: absolute; top: 0; bottom: 0; background: #d9d9d9; }
.pv-pita.Z { background: #f0f0f0; }
.pv-brs.kaki { border-top: 1px solid #111; color: #333; }
.pv-apung.pv-qr { padding: 2px; }
.pv-blok { display: block; margin: 6px auto; }
.pv-blok.pv-qr { width: 9.5em; }
.pv-blok.pv-qr.kecil { width: 6.5em; }
.pv-blok.pv-logo { max-width: 60%; max-height: 7em; filter: grayscale(1) contrast(1.4); }
.pv-blok.pv-grafik { width: 100%; max-width: 1200px; }
.logo-lihat { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; }
.logo-lihat > div { display: flex; flex-direction: column; gap: 4px; }
.logo-lihat img { max-width: 300px; max-height: 120px; background: #fff; border: 1px solid var(--garis); padding: 6px; border-radius: 6px; }
.logo-lihat img.thermal { image-rendering: pixelated; }
.login .logo img.logo-toko { max-width: 220px; max-height: 110px; width: auto; height: auto; }
.preview-grafik { display: block; width: 100%; max-width: 760px; margin: 6px 0; border: 1px solid #ddd; }

/* ---------- Sidebar bisa dikecilkan & sub menu bisa dilipat ---------- */
.atas .tombol-nav { font-size: 18px; padding: 4px 10px; }
.atas select.pilih-tema { width: auto; padding: 4px 8px; background: rgba(255,255,255,.15); color: var(--atas-teks); border: 0; }
.atas select.pilih-tema option { color: #222; background: #fff; }
nav { transition: width .15s; overflow-x: hidden; }
nav .grup { cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
nav .grup:hover { color: var(--teks); }
nav .grup .panah { font-size: 10px; transition: transform .15s; }
nav .sub.tutup { display: none; }
nav .grup.tutup .panah { transform: rotate(-90deg); }
nav a { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
nav a .ik { width: 20px; text-align: center; flex-shrink: 0; }
body.nav-kecil nav { width: 58px; }
body.nav-kecil nav .grup { display: none; }
body.nav-kecil nav .sub.tutup { display: block; }
body.nav-kecil nav a { padding: 9px 0; justify-content: center; }
body.nav-kecil nav a .tx { display: none; }
@media print { nav, .atas { display: none !important; } }
[data-tema="gelap"] img[src="icon.svg"] { filter: brightness(1.1); }
.grafik-lap.pie { height: 320px; max-width: 760px; }
/* Preview cetak A4 / laporan: layar penuh */
.latar.latar-penuh { padding: 10px; }
.modal.layar-penuh { max-width: none; width: 100%; height: calc(100vh - 20px); display: flex; flex-direction: column; }
.modal.layar-penuh .isi { flex: 1; overflow: auto; background: #e9edf2; }
.modal.layar-penuh pre.preview-nota { max-height: none; overflow-x: hidden; max-width: 1200px; margin: 0 auto; padding: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.15); }
.modal.layar-penuh .preview-grafik { max-width: 1200px; margin: 0 auto; border: 0; }
.modal.layar-penuh h3 { max-width: 1200px; margin: 0 auto 8px; color: #333; }
/* Sidebar menempel & bisa digulir sendiri, halaman utama selalu mulai dari atas */
nav { position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; }
/* Tombol Batal / Kembali di detail servis: netral, di ujung kanan */
/* semua tombol aksi 1 baris, lebar & tinggi sama rata; teks panjang turun ke baris kedua di DALAM tombol */
#aksiStatus { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); grid-auto-rows: 1fr; align-items: stretch; }
#aksiStatus .btn { min-width: 0; white-space: normal; padding: 8px 6px; line-height: 1.25; text-align: center; }