:root {
  --hijau: #1f8a4c;
  --hijau-tua: #146236;
  --hijau-muda: #e7f5ec;
  --teks: #1d2a22;
  --abu: #6b7a71;
  --garis: #d6e2da;
  --latar: #f5f8f6;
  --kartu: #ffffff;
  --merah: #c0392b;
  --kuning: #f4c542;
  --biru: #2463a8;
  --radius: 8px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
input[type=checkbox] { width: auto; padding: 0; accent-color: var(--hijau); }
label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: .4rem; }
html { font-size: 15px; }
body {
  margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--teks); background: var(--latar);
}
a { color: var(--hijau-tua); }
h1 { font-size: 1.45rem; margin: 0 0 .8rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; color: var(--hijau-tua); }
h3 { font-size: 1rem; margin: 0 0 .5rem; }

/* ---------- Kerangka ---------- */
.topbar {
  display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem;
  background: var(--hijau-tua); color: #fff; position: sticky; top: 0; z-index: 20;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar .brand { font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.topbar nav { display: flex; gap: .2rem; flex-wrap: wrap; flex: 1; }
.topbar nav a { padding: .35rem .6rem; border-radius: 6px; font-size: .92rem; white-space: nowrap; }
.topbar nav a.aktif, .topbar nav a:hover { background: rgba(255, 255, 255, .16); }
.topbar .akun { display: flex; align-items: center; gap: .5rem; font-size: .9rem; white-space: nowrap; }
.topbar .akun button { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 6px; padding: .2rem .6rem; cursor: pointer; }
main { padding: 1rem; max-width: 1500px; margin: 0 auto; }

/* ---------- Komponen ---------- */
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); padding: 1rem; }
.grid { display: grid; gap: 1rem; }
.baris { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spasi { flex: 1; }
.kecil { font-size: .85rem; color: var(--abu); }
.kanan { text-align: right; }
.tengah { text-align: center; }
.angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tebal { font-weight: 700; }
.merah { color: var(--merah); }
.hijau { color: var(--hijau); }

.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .45rem .9rem; border: 1px solid var(--hijau); border-radius: 6px;
  background: var(--hijau); color: #fff; font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--hijau-tua); }
.btn.sekunder { background: #fff; color: var(--hijau-tua); }
.btn.sekunder:hover { background: var(--hijau-muda); }
.btn.bahaya { background: var(--merah); border-color: var(--merah); }
.btn.kecil { padding: .2rem .5rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  font: inherit; padding: .4rem .5rem; border: 1px solid #b9c9bf; border-radius: 6px; background: #fff; color: var(--teks);
  min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--hijau); outline-offset: 0; border-color: var(--hijau); }
input[type=number] { text-align: right; }
label { display: block; font-size: .85rem; color: var(--abu); margin-bottom: .2rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem 1rem; }
.form-grid input, .form-grid select { width: 100%; }
.form-grid input[type=checkbox] { width: auto; }

table { border-collapse: collapse; width: 100%; }
th, td { padding: .4rem .5rem; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: middle; }
th { background: var(--hijau-muda); font-weight: 600; font-size: .88rem; color: var(--hijau-tua); position: sticky; top: 0; }
tbody tr:hover { background: #fafcfb; }
tfoot td { font-weight: 700; background: #f2f6f3; }
.tabel-wrap { overflow-x: auto; }

.flash { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center; }
.flash.ok { background: #e3f4e8; border: 1px solid #9fd4ae; }
.flash.error { background: #fbe9e7; border: 1px solid #e8a39b; color: #7a1d12; }

.lencana { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .78rem; background: #eef1ef; color: var(--abu); }
.lencana.jalan { background: #fff4d6; color: #8a6200; }
.lencana.selesai { background: #e3f4e8; color: var(--hijau-tua); }
.lencana.batal { background: #fbe9e7; color: var(--merah); }
/* jam booking: tebal & berkedip (tanpa kedip bila pengguna memilih kurangi animasi) */
.booking-kedip { font-weight: 700; animation: kedip 1s steps(2, start) infinite; }
/* nama & nomor karyawan yang sudah dibooking */
.nama-sering { font-weight: 800; color: #111; }
.antrean .no-induk { font-size: .85rem; color: var(--abu); min-width: 3.2rem; }
.antrean .nama-sering { font-weight: 800; color: #111; }
.antrean .nama-booking.nama-sering { color: #1565c0; font-weight: 800; }
.nama-booking, .nama-booking .no-karyawan, .nama-booking .nm-karyawan { color: #1565c0; font-weight: 700; }
@keyframes kedip { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .booking-kedip { animation: none; } }
@media print { .booking-kedip { animation: none; } }

/* ---------- Menu utama ---------- */
.menu-utama { text-align: center; }
.menu-utama img.logo { max-width: 280px; width: 60%; height: auto; object-fit: contain; }
.ikon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem auto; max-width: 900px; }
.ikon {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.1rem .6rem;
  background: #fff; border: 1px solid var(--garis); border-radius: 12px; text-decoration: none; color: var(--teks);
  transition: transform .08s, box-shadow .08s;
}
.ikon:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(20, 98, 54, .12); border-color: var(--hijau); }
.ikon .simbol { font-size: 2rem; line-height: 1; }
.ikon .judul { font-weight: 600; }
.ikon .ket { font-size: .8rem; color: var(--abu); }

/* ---------- Transaksi harian ---------- */
.harian { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.harian .kartu { padding: .8rem; }
.antrean li { display: flex; align-items: center; gap: .4rem; padding: .35rem .2rem; border-bottom: 1px solid var(--garis); }
.antrean { list-style: none; margin: 0; padding: 0; counter-reset: no; }
.antrean li::before { counter-increment: no; content: counter(no) "."; width: 1.6rem; color: var(--abu); font-size: .85rem; }
.antrean .nm { flex: 1; }
.antrean .kali-kerja { font-size: .72rem; color: var(--abu); min-width: .9rem; text-align: right; line-height: 1; }
.sesi-tabel td { padding: .35rem .4rem; }
.sesi-tabel tr.sesi-lewat td { background: #f8d0dc; }

.sisa { font-variant-numeric: tabular-nums; font-weight: 600; }
.sisa.habis { color: var(--merah); }
.sisa.hampir { color: #b07800; }
.kamar-info { display: flex; gap: .4rem; flex-wrap: wrap; }
.kamar-info span { background: var(--hijau-muda); padding: .2rem .55rem; border-radius: 6px; font-size: .85rem; }

dialog { border: none; border-radius: 12px; padding: 1.2rem; max-width: 520px; width: calc(100% - 2rem); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(0, 0, 0, .35); }

/* ---------- Form selesai ---------- */
.selesai-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.ringkas-bayar td { border: none; padding: .25rem 0; }
.ringkas-bayar .total td { font-size: 1.35rem; font-weight: 700; border-top: 2px solid var(--teks); padding-top: .5rem; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-box { width: 100%; max-width: 360px; text-align: center; }
.login-box img { max-width: 220px; width: 70%; height: auto; object-fit: contain; }
.login-box form { text-align: left; display: grid; gap: .8rem; margin-top: 1rem; }
.login-box input { width: 100%; }

@media (max-width: 1100px) {
  .harian { grid-template-columns: 1fr 1fr; }
  .harian .tengah-kolom { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 760px) {
  main { padding: .6rem; }
  .harian, .selesai-grid { grid-template-columns: minmax(0, 1fr); }
  #tbl-item input[name=item_qty] { width: 56px !important; }
  #tbl-item input[name=item_harga] { width: 90px !important; }
  .topbar { flex-wrap: wrap; }
  .topbar nav { order: 3; flex: 0 0 100%; overflow-x: auto; flex-wrap: nowrap; }
  .topbar .akun { margin-left: auto; }
}

.print-only { display: none; }
/* Kertas default laporan: A4 landscape, margin Narrow, supaya kolom paling kanan (Revisi) tidak terpotong */
@page {
  size: A4 landscape;
  margin: 12.7mm;
}
@media print {
  .topbar, .no-print, .flash { display: none !important; }
  .print-only { display: inline; }
  body { background: #fff; font-size: 10px; }
  main { padding: 0; max-width: none; }
  .kartu { border: none; padding: 0; }
  th { position: static; }
  .tabel-wrap { overflow: visible; }
  table { font-size: 8px; width: 100%; }
  th, td { padding: 2px 3px; }
}

/* Edit sebelum cetak (laporan gaji, absensi, bulanan) */
.sedang-edit [contenteditable="true"] { background: #fff8e6; outline: 1px dashed #c4a35a; border-radius: 2px; min-width: 1.2em; }
.edit-ket { margin: .4rem 0 .8rem; display: grid; gap: .3rem; }
.edit-ket textarea { width: 100%; max-width: 640px; }
.jam24 { width: 6.2rem; font-variant-numeric: tabular-nums; }
.lap-absen-kop { display: none; }
.lap-absen-tbl { font-variant-numeric: tabular-nums; }
.lap-absen-tbl th, .lap-absen-tbl td { text-align: center; white-space: nowrap; }
.lap-absen-tbl td:nth-child(3) { text-align: left; }
@media print {
  .lap-absen-kop { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 11px; }
  .lap-absen-kop .kop-judul { font-weight: 700; }
  .lap-absen-kop .kanan { text-align: right; }
  .lap-absen-tbl { font-size: 8px; }
  .lap-absen-tbl th, .lap-absen-tbl td { padding: 1px 3px; border: 1px solid #222; }
}

/* ---- Tampilan Tabel (mirip Excel) ---- */
.xl-toggle { display: inline-flex; gap: 2px; margin-right: .4rem; }
.xl-toggle .aktif { background: var(--hijau-tua); color: #fff; }
.xl-host { overflow: auto; max-height: 70vh; border: 1px solid var(--garis); background: #fff; }
table.xl { border-collapse: separate; border-spacing: 0; font-size: .85rem; width: max-content; min-width: 100%; }
table.xl th, table.xl td { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: .2rem .45rem; white-space: nowrap; background: #fff; }
table.xl thead th { position: sticky; top: 0; z-index: 3; background: #eef3ef; }
table.xl .rn { position: sticky; left: 0; z-index: 2; background: #f4f4f4; color: #777; text-align: right; }
table.xl thead .rn { z-index: 4; }
table.xl .stk { position: sticky; z-index: 2; background: #fbfdfb; }
table.xl thead .stk { z-index: 4; background: #eef3ef; }
table.xl td.n { text-align: right; }
table.xl .rocol { color: #888; background: #f7f7f7; }
table.xl td:focus { outline: 2px solid var(--hijau-tua); outline-offset: -2px; }
table.xl td.sel { background: #dcebff; }
table.xl td.saved { background: #c9f0d2; transition: background .3s; }
table.xl tr.xl-baru td { background: #fffdf0; }
.xl-in { width: 100%; min-width: 6rem; border: 0; padding: 0; font: inherit; background: #fffbe0; }
.xl-in.n { text-align: right; }
.xl-toast { position: fixed; right: 1rem; bottom: 1rem; background: #2e6b3f; color: #fff; padding: .5rem .9rem; border-radius: 6px; z-index: 100; }
.xl-toast.err { background: #a8322a; }
.xl-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 90; }
.xl-modal { max-width: 720px; max-height: 85vh; overflow: auto; }
.xl-modal .warn { color: #a8322a; }

/* Logo kecil di atas Monitoring (Transaksi Harian) */
.harian-logo { text-align: center; margin: -.2rem 0 .4rem; }
.harian-logo img { height: 76px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 700px) { .harian-logo img { height: 56px; } }
@media print { .harian-logo { display: none; } }