/* Tampilan kaca WARDI. Semua warna lewat token --wd-*: nilainya diatur di layar
   Tema dan disajikan tema-css.asp. Nilai di bawah hanya cadangan. */
:root {
  --wd-latar: #12294a; --wd-sinar-1: #6b2f52; --wd-sinar-2: #1e7f86; --wd-sinar-3: #2a56a8;
  --wd-kartu: #0b1d3a8c; --wd-gelap: #0a1a349e; --wd-gelap-teks: #f2f6fc;
  --wd-tinta: #f2f6fc; --wd-redup: #c0cede; --wd-garis: #ffffff26;
  --wd-utama: #1a73e0; --wd-utama-tua: #1259b3; --wd-utama-teks: #ffffff;
  --wd-aksen: #5fe0c4; --wd-galat: #ff8a80; --wd-medan: #ffffff1a;
  --wd-keping: #ffffffee; --wd-kabur: 18px;
}
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  color: var(--wd-tinta);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background-color: var(--wd-latar);
  background-image:
    radial-gradient(45% 40% at 78% 28%, var(--wd-sinar-1), transparent 72%),
    radial-gradient(40% 45% at 8% 62%, var(--wd-sinar-1), transparent 72%),
    radial-gradient(55% 45% at 30% 100%, var(--wd-sinar-2), transparent 72%),
    radial-gradient(50% 50% at 100% 0%, var(--wd-sinar-3), transparent 72%);
  background-attachment: fixed;
}

/* Panel kaca */
.kaca, .kaca-bar, aside.bilah {
  -webkit-backdrop-filter: blur(var(--wd-kabur));
  backdrop-filter: blur(var(--wd-kabur));
}
.kaca { background: var(--wd-kartu); border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut); }
.kaca-bar { background: var(--wd-gelap); border-bottom: 1px solid var(--wd-garis); }
aside.bilah { background: var(--wd-gelap); color: var(--wd-gelap-teks); border-right: 1px solid var(--wd-garis); }
.kaca-judul { display: flex; align-items: center; gap: .6rem; margin: -1.25rem -1.25rem 1.25rem; padding: .9rem 1.25rem; border-radius: var(--wd-sudut) var(--wd-sudut) 0 0;
  border-bottom: 1px solid var(--wd-garis); font-size: 1.15rem; font-weight: 300; }
.kaca-tab { gap: .25rem; padding-top: .35rem; padding-bottom: 0; }
.kaca-tab button { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem .9rem .6rem; border-bottom: 2px solid transparent; color: var(--wd-redup); font-size: 1rem; font-weight: 400; }
.kaca-tab button:hover { color: var(--wd-tinta); }
.kaca-tab button.aktif { border-bottom-color: var(--wd-aksen); color: var(--wd-tinta); font-weight: 600; }
.keping { background: var(--wd-keping); border-radius: .35rem; padding: .3rem .4rem; }

/* Menu samping */
.menu-baris { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.25rem; font-size: .875rem; font-weight: 600;
  white-space: nowrap; border-bottom: 1px solid var(--wd-garis); border-right: 3px solid transparent; }
.menu-baris:hover { background: var(--wd-medan); }
.menu-baris.aktif { background: var(--wd-medan); border-right-color: var(--wd-utama); }
.foto-bulat { display: flex; height: 4.5rem; width: 4.5rem; align-items: center; justify-content: center; border-radius: 9999px;
  background: var(--wd-medan); border: 2px solid var(--wd-garis); font-size: 1.6rem; font-weight: 300; }

/* Cincin ringkasan */
.cincin { position: relative; height: 5rem; width: 5rem; flex: none; }
.cincin svg { height: 100%; width: 100%; transform: rotate(-90deg); }
.cincin circle { fill: none; stroke-width: 2.4; }
.cincin .jalur { stroke: var(--wd-garis); }
.cincin .isi { stroke: var(--wd-tinta); stroke-linecap: round; transition: stroke-dasharray .5s; }
.cincin b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 300; }

/* Medan isian */
input, select, textarea { background-color: var(--wd-medan); color: var(--wd-tinta); border: 1px solid var(--wd-garis); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--wd-utama); outline-offset: 0; }
input::placeholder { color: var(--wd-redup); }
select option { background: var(--wd-latar); color: var(--wd-tinta); }
input[type=color] { padding: 0; height: 2.25rem; width: 2.75rem; cursor: pointer; }

/* DataTables */
.dataTables_wrapper, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--wd-redup) !important; font-size: .85rem; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: .25rem; padding: .3rem .5rem; margin-left: .4rem; }
table.dataTable { border-collapse: collapse !important; width: 100% !important; color: var(--wd-tinta); }
table.dataTable thead th { color: var(--wd-redup); font-weight: 400; font-size: .8rem; border-bottom: 1px solid var(--wd-garis) !important; }
table.dataTable tbody td { background: transparent !important; box-shadow: none !important; border-top: 1px solid var(--wd-garis) !important; }
table.dataTable tbody tr { background: transparent !important; }
table.dataTable tbody tr:hover td { background: var(--wd-medan) !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--wd-garis) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--wd-tinta) !important; border: 1px solid transparent !important; background: none !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--wd-medan) !important; border-color: var(--wd-garis) !important; color: var(--wd-tinta) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--wd-redup) !important; opacity: .6; }

/* Dialog */
.swal2-popup { background: var(--wd-latar) !important; color: var(--wd-tinta) !important; border: 1px solid var(--wd-garis); border-radius: .35rem !important; }
.swal2-title, .swal2-html-container { color: var(--wd-tinta) !important; }
.swal2-input { color: var(--wd-tinta) !important; background: var(--wd-medan) !important; border-color: var(--wd-garis) !important; }
.swal2-confirm { background: var(--wd-utama) !important; color: var(--wd-utama-teks) !important; }
.swal2-cancel { background: var(--wd-medan) !important; color: var(--wd-tinta) !important; }

/* Denah. Satuan posisi 1000 x 600, jadi bentuknya sama di semua layar. */
:root { --wd-st-kosong: #ffffff26; --wd-st-terisi: #1a73e0; --wd-st-bayar: #b45309; --wd-st-bersihkan: #6d5a8a; --wd-st-reserved: #0b7f83; --wd-st-teks: #ffffff; }
.papan { position: relative; width: 100%; min-width: 640px; aspect-ratio: 5 / 3; border: 1px solid var(--wd-garis); border-radius: .25rem;
  background-color: var(--wd-kartu); background-image: linear-gradient(var(--wd-garis) 1px, transparent 1px), linear-gradient(90deg, var(--wd-garis) 1px, transparent 1px);
  background-size: 5% 8.333%; }
.meja { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: var(--wd-st-teks);
  border: 1px solid var(--wd-garis); border-radius: .35rem; cursor: pointer; padding: .1rem; line-height: 1.15; }
.meja.bulat { border-radius: 50%; }
.meja b { font-size: 1rem; }
.meja small { font-size: .68rem; opacity: .9; text-align: center; }
.papan.edit .meja { touch-action: none; cursor: move; }
.pegangan { position: absolute; right: 0; bottom: 0; height: 14px; width: 14px; cursor: nwse-resize; background: var(--wd-tinta); border-radius: 3px 0 0 0; }
.titik { display: inline-block; height: .8rem; width: .8rem; border-radius: 50%; border: 1px solid var(--wd-garis); vertical-align: -1px; }
.st-KOSONG { background: var(--wd-st-kosong); }
.st-TERISI { background: var(--wd-st-terisi); }
.st-BAYAR { background: var(--wd-st-bayar); }
.st-BERSIHKAN { background: var(--wd-st-bersihkan); }
.st-RESERVED { background: var(--wd-st-reserved); }

/* Lembar QR: selalu hitam di atas putih supaya bisa dipindai. */
.lembar-qr { display: grid; gap: 1rem; padding: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.kartu-qr { background: #fff; color: #111; border-radius: .35rem; padding: 1rem; text-align: center; break-inside: avoid; }
.kartu-qr h2 { font-size: 1.4rem; font-weight: 600; }
.kartu-qr p { font-size: .8rem; }
.kartu-qr button { margin-top: .5rem; font-size: .75rem; text-decoration: underline; }
/* Label QR aset: kertas putih seperti kartu QR meja, supaya mudah dipindai saat dicetak. */
.lembar-label { display: grid; gap: .5rem; padding: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.label-aset { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; background: #fff; color: #111; border: 1px dashed #999; border-radius: var(--wd-sudut-kecil); break-inside: avoid; }
.label-aset .qr-svg svg { width: 88px; margin: 0; }
.qr-svg svg { margin: .5rem auto; width: 100%; max-width: 190px; height: auto; }
@media print {
  .no-cetak { display: none !important; }
  body { background: #fff !important; }
  .kartu-qr { border: 1px solid #999; }
}
.papan { max-width: max(640px, calc((100vh - 200px) * 5 / 3)); }

/* Dialog baru yang muncul saat animasi tutup berjalan bisa macet dan tidak bisa ditutup. */
.swal2-popup.swal2-hide, .swal2-container.swal2-backdrop-hide { animation: none !important; }

/* Layar dapur */
.tiket-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; padding: .6rem; border: 1px solid var(--wd-garis); border-radius: .25rem; color: var(--wd-st-teks); }
.tiket-item.st-ANTRE { background: var(--wd-medan); }
.tiket-item.st-DIMASAK { background: var(--wd-st-bayar); }
.tiket-item.st-SIAP { background: var(--wd-st-reserved); }
.terlambat { outline: 2px solid var(--wd-galat); }
.qr-putih { background: #fff; }
.qr-putih svg { width: 100%; height: auto; }

/* Grafik dasbor: satu seri, warna lewat token. */
.grafik { position: relative; min-height: 220px; overflow: hidden; }
.grafik-batang { fill: var(--wd-utama); }
.grafik-garis { stroke: var(--wd-garis); stroke-width: 1; }
.grafik-teks { fill: var(--wd-redup); font-size: 11px; }
.grafik-tip { position: absolute; z-index: 5; max-width: 240px; padding: 4px 8px; border: 1px solid var(--wd-garis); border-radius: 4px; background: var(--wd-latar); color: var(--wd-tinta); font-size: 12px; pointer-events: none; }

/* Kolom dialog selalu satu per baris, termasuk select dan tanggal. */
.swal2-html-container .swal2-input { display: block; width: 80%; max-width: 100%; margin-left: auto; margin-right: auto; }

/* Laman muka */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
.pita { background: var(--wd-gelap); border-block: 1px solid var(--wd-garis); }
.nomor-langkah { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--wd-utama); color: var(--wd-utama-teks); font-weight: 600; }
.contoh-batang { display: flex; align-items: flex-end; gap: .5rem; height: 7rem; }
.contoh-batang i { flex: 1; border-radius: 4px 4px 0 0; background: var(--wd-utama); }
.divide-garis > * + * { border-color: var(--wd-garis); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.hero { background:
  linear-gradient(100deg, color-mix(in srgb, var(--wd-latar) 96%, transparent) 25%, color-mix(in srgb, var(--wd-latar) 78%, transparent) 60%, color-mix(in srgb, var(--wd-latar) 55%, transparent)),
  url(/ASSETS/IMG/LANDING/foto-meja.jpg) center / cover no-repeat; }
.hero-gambar { position: relative; }
@media (min-width: 640px) { .hero-gambar { padding-bottom: 2.5rem; } }
.bingkai { overflow: hidden; border: 1px solid var(--wd-garis); border-radius: .75rem; background: var(--wd-latar); box-shadow: 0 24px 60px color-mix(in srgb, var(--wd-gelap) 85%, transparent); }
.bingkai-atas { display: flex; gap: .35rem; padding: .5rem .75rem; border-bottom: 1px solid var(--wd-garis); }
.bingkai-atas i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--wd-garis); }
.bingkai img, .hp img { display: block; width: 100%; height: auto; }
.hp { position: absolute; right: -.5rem; bottom: 0; width: 24%; min-width: 7.5rem; overflow: hidden; border: 5px solid var(--wd-garis); border-radius: 1.25rem; background: var(--wd-latar); box-shadow: 0 16px 40px color-mix(in srgb, var(--wd-gelap) 90%, transparent); }
.judul-bagian { max-width: 42rem; margin-inline: auto; text-align: center; }
.judul-bagian p { font-weight: 600; color: var(--wd-aksen); }
.judul-bagian h2 { margin-top: .5rem; font-size: 1.875rem; font-weight: 300; line-height: 1.25; }
.judul-bagian span { display: block; margin-top: .5rem; color: var(--wd-redup); }
.kartu-foto { overflow: hidden; border: 1px solid var(--wd-garis); border-radius: .75rem; background: var(--wd-kartu); }
.kartu-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.kartu-foto figcaption { padding: 1rem 1.25rem 1.25rem; }
.kartu-foto b { display: block; font-size: 1.125rem; font-weight: 600; }
.kartu-foto span { display: block; margin-top: .25rem; font-size: .875rem; color: var(--wd-redup); }

/* Sidebar: dilipat jadi ikon di layar lebar, laci geser di ponsel. */
aside.bilah { width: 15rem; transition: width .15s ease; }
#sbMenu { scrollbar-width: thin; scrollbar-color: var(--wd-garis) transparent; }
.sb-kelompok { width: 100%; text-align: left; cursor: pointer; }
.sb-panah { margin-left: auto; font-size: .7rem; transition: transform .15s ease; }
.sb-kelompok[aria-expanded="true"] .sb-panah { transform: rotate(90deg); }
.menu-baris.sb-anak { padding-left: 2.25rem; font-weight: 500; }
.sb-logo-kecil { display: none; }
.sb-latar { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--wd-latar) 70%, transparent); }
@media (min-width: 768px) {
  aside.bilah.sb-lipat { width: 4rem; }
  .sb-lipat .sb-teks, .sb-lipat .sb-panah, .sb-lipat .sb-isi, .sb-lipat .sb-logo-besar { display: none; }
  .sb-lipat .sb-logo-kecil { display: block; }
  .sb-lipat .sb-merek { padding-inline: .5rem; text-align: center; }
  .sb-lipat .sb-profil { padding-inline: .5rem; }
  .sb-lipat .foto-bulat { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
  .sb-lipat .menu-baris { justify-content: center; padding-inline: 0; }
}
@media (max-width: 767px) {
  aside.bilah { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 16rem; background: linear-gradient(var(--wd-gelap), var(--wd-gelap)), var(--wd-latar); transform: translateX(-100%); transition: transform .2s ease; }
  aside.bilah.sb-buka { transform: none; }
}
@media (prefers-reduced-motion: reduce) { aside.bilah, .sb-panah { transition: none; } }
@media print { aside.bilah, #sbToggle { display: none; } }

/* Konsol superadmin: tata letak mengikuti konsol X-DOC, warna tetap token WARDI. */
.sb-label { padding: 1rem 1.25rem .35rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; opacity: .7; }
.sb-konsol .menu-baris { margin: .15rem .6rem; padding: .6rem .75rem; border: 0; border-radius: .6rem; width: calc(100% - 1.2rem); font-weight: 500; }
.sb-konsol .menu-baris.sb-anak { padding-left: 2rem; }
.sb-konsol .menu-baris.aktif { background: var(--wd-medan); font-weight: 700; }
.sb-konsol #sbMenu { border-top: 0; }
.jejak { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; padding: .6rem 1rem; border: 1px solid var(--wd-garis); border-radius: .6rem; background: var(--wd-kartu); font-size: .875rem; }
.jejak b { color: var(--wd-aksen); font-weight: 600; }
.mega-item { position: relative; }
.mega-top { display: flex; align-items: center; gap: .45rem; padding: .4rem .65rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; }
.mega-top:hover, .mega-top[aria-expanded="true"] { background: var(--wd-medan); }
.mega-panel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40; display: flex; gap: 1.5rem; padding: 1rem; border: 1px solid var(--wd-garis); border-radius: .75rem; background: var(--wd-latar); box-shadow: 0 16px 40px color-mix(in srgb, var(--wd-gelap) 90%, transparent); }
.mega-panel.hidden { display: none; }
.mega-kol { min-width: 11rem; }
.mega-kepala { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; padding-bottom: .4rem; border-bottom: 1px solid var(--wd-garis); color: var(--wd-aksen); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.mega-daun { display: block; width: 100%; padding: .3rem .5rem; border-radius: .4rem; font-size: .85rem; text-align: left; white-space: nowrap; }
.mega-daun:hover { background: var(--wd-medan); }
.tabel-konsol thead th { background: var(--wd-utama-tua); color: var(--wd-utama-teks); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; }
.pil { display: inline-block; padding: .1rem .6rem; border: 1px solid var(--wd-garis); border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pil-baik { border-color: var(--wd-aksen); color: var(--wd-aksen); }
.tombol-baris { display: inline-flex; align-items: center; gap: .3rem; margin: .1rem; padding: .25rem .6rem; border: 1px solid var(--wd-garis); border-radius: .5rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tombol-utama { border-color: var(--wd-utama); background: var(--wd-utama); color: var(--wd-utama-teks); }
.sakelar { position: relative; flex: none; width: 2.75rem; height: 1.5rem; border-radius: 999px; background: var(--wd-medan); border: 1px solid var(--wd-garis); cursor: pointer; }
.sakelar::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--wd-tinta); }
.sakelar.nyala { background: var(--wd-aksen); }
.sakelar:disabled { cursor: not-allowed; }
.sakelar.nyala::after { left: auto; right: .15rem; }
.foto-kecil { display: inline-flex; flex: none; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: .6rem; background: var(--wd-medan); border: 1px solid var(--wd-garis); font-weight: 600; }
.label-kecil { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--wd-redup); }

/* Menu Setup: jsTree memakai token tema. */
.pohon-kepala { padding: .6rem 1rem; background: var(--wd-utama-tua); color: var(--wd-utama-teks); font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.pohon-menu .jstree-anchor { color: var(--wd-tinta); }
.pohon-menu .jstree-default .jstree-hovered, .pohon-menu .jstree-default .jstree-clicked { background: var(--wd-medan); box-shadow: none; color: var(--wd-tinta); }
.pohon-menu .jstree-default .jstree-search { color: var(--wd-aksen); font-style: normal; }
.pohon-menu .jstree-default, .pohon-menu.jstree-default { background: transparent; }
.menu-mati { opacity: .6; text-decoration: line-through; }
a.mega-kepala:hover { text-decoration: underline; }

/* Sudut dan kaki, mengikuti X-DOC :271. Kartu .875rem, kontrol .5rem. */
:root { --wd-sudut: .875rem; --wd-sudut-kecil: .5rem; }
.kaki { border-top: 1px solid var(--wd-garis); border-bottom: 0; }
input:not([type=checkbox]):not([type=radio]), select, textarea, button { border-radius: var(--wd-sudut-kecil); }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_paginate .paginate_button, .swal2-input, .swal2-popup .swal2-styled { border-radius: var(--wd-sudut-kecil) !important; }
.swal2-popup { border-radius: var(--wd-sudut) !important; }
.swal2-validation-message { background: var(--wd-medan) !important; color: var(--wd-tinta) !important; border-radius: var(--wd-sudut-kecil); margin-inline: 1rem !important; }
.swal2-validation-message::before { background-color: var(--wd-galat) !important; }
.papan, .kartu-qr, .tiket-item, .grafik-tip, .meja:not(.bulat) { border-radius: var(--wd-sudut-kecil); }
.tabel-konsol thead th:first-child { border-top-left-radius: var(--wd-sudut-kecil); border-bottom-left-radius: var(--wd-sudut-kecil); }
.tabel-konsol thead th:last-child { border-top-right-radius: var(--wd-sudut-kecil); border-bottom-right-radius: var(--wd-sudut-kecil); }
.tabel-konsol tbody td:first-child { white-space: nowrap; }
.pohon-menu .jstree-ocl { background: none !important; color: var(--wd-redup); text-align: center; }
.pohon-menu .jstree-open > .jstree-ocl::before { content: "\25BE"; }
.pohon-menu .jstree-closed > .jstree-ocl::before { content: "\25B8"; }
.pohon-menu .jstree-anchor { border-radius: var(--wd-sudut-kecil); }
@media print { .kaki { display: none; } }

/* CSS Backend. Pratinjau memakai token yang sama, dibatasi pada #pv. */
.gen-judul { font-size: .9rem; font-weight: 700; }
.gen-catatan { font-size: .75rem; line-height: 1.4; color: var(--wd-redup); }
.gen-var { font-family: ui-monospace, Consolas, monospace; font-size: .68rem; color: var(--wd-redup); }
.gen-baris { display: grid; grid-template-columns: auto minmax(0, 1fr) 6.6rem; align-items: center; gap: .3rem .75rem; padding: .55rem 0; }
.gen-baris + .gen-baris { border-top: 1px solid var(--wd-garis); }
.gen-baris .al { grid-column: 1 / -1; }
.gen-sw { width: 2.5rem; height: 2.5rem; flex: none; padding: 0; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); background: none; cursor: pointer; }
.gen-sw::-webkit-color-swatch-wrapper { padding: 3px; }
.gen-sw::-webkit-color-swatch { border: 0; border-radius: calc(var(--wd-sudut-kecil) * .7); }
.gen-hex { min-width: 0; padding: .4rem .5rem; font-family: ui-monospace, Consolas, monospace; font-size: .75rem; }
.gen-ramp { display: grid; grid-template-columns: repeat(10, 1fr); overflow: hidden; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); }
.gen-ramp span { height: 2rem; }
.gen-pv-gambar { flex: none; width: 5.5rem; height: 3.4rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); background: var(--wd-medan) center / cover no-repeat; }
.gen-tema { display: flex; align-items: center; gap: .35rem; padding: .4rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); }
.gen-tema.aktif { border-color: var(--wd-aksen); }
.gen-pilih { display: flex; flex: 1; min-width: 0; align-items: center; gap: .6rem; }
.gen-strip { display: flex; flex: none; overflow: hidden; border-radius: .3rem; }
.gen-strip i { display: block; width: .85rem; height: 1.8rem; }
.pil-galat { border-color: var(--wd-galat); color: var(--wd-galat); }
.tombol-baris:disabled { opacity: .45; cursor: not-allowed; }
.pv-kerangka { display: flex; overflow: hidden; min-height: 26rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut); background-color: var(--wd-latar); background-image: radial-gradient(45% 40% at 78% 28%, var(--wd-sinar-1), transparent 72%), radial-gradient(55% 45% at 30% 100%, var(--wd-sinar-2), transparent 72%), radial-gradient(50% 50% at 100% 0%, var(--wd-sinar-3), transparent 72%); color: var(--wd-tinta); font-size: .8rem; }
.pv-sisi { display: flex; flex: none; flex-direction: column; gap: .2rem; width: 10rem; padding: .8rem .6rem; background-color: var(--wd-gelap); color: var(--wd-gelap-teks); }
.pv-logo { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: .6rem; border-radius: var(--wd-sudut-kecil); background: var(--wd-keping); color: var(--wd-utama); font-weight: 800; }
.pv-menu { display: flex; align-items: center; gap: .45rem; padding: .4rem .5rem; border-radius: var(--wd-sudut-kecil); }
.pv-menu.aktif { background: var(--wd-medan); font-weight: 700; }
.pv-utama { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.pv-bilah { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem; background: var(--wd-gelap); color: var(--wd-gelap-teks); border-bottom: 1px solid var(--wd-garis); }
.pv-isi { display: flex; flex-direction: column; gap: .75rem; padding: .9rem; }
.pv-kartu { padding: .7rem .8rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut); background: var(--wd-kartu); -webkit-backdrop-filter: blur(var(--wd-kabur)); backdrop-filter: blur(var(--wd-kabur)); }
.pv-kecil { font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var(--wd-redup); }
.pv-aksen { color: var(--wd-aksen); }
.pv-redup { color: var(--wd-redup); }
.pv-tombol { padding: .3rem .8rem; border-radius: var(--wd-sudut-kecil); background: var(--wd-utama); color: var(--wd-utama-teks); font-weight: 600; }
.pv-tombol2 { padding: .3rem .8rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); }
.pv-medan { flex: 1; min-width: 6rem; padding: .3rem .6rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); background: var(--wd-medan); }
.pv-tabel { width: 100%; border-collapse: separate; border-spacing: 0; }
.pv-tabel th { padding: .4rem .6rem; background: var(--wd-utama-tua); color: var(--wd-utama-teks); font-size: .65rem; text-align: left; text-transform: uppercase; }
.pv-tabel th:first-child { border-radius: var(--wd-sudut-kecil) 0 0 var(--wd-sudut-kecil); }
.pv-tabel th:last-child { border-radius: 0 var(--wd-sudut-kecil) var(--wd-sudut-kecil) 0; }
.pv-tabel td { padding: .4rem .6rem; border-bottom: 1px solid var(--wd-garis); }
.pv-lencana { padding: .05rem .5rem; border: 1px solid var(--wd-aksen); border-radius: 999px; color: var(--wd-aksen); font-size: .65rem; font-weight: 600; }
.pv-lencana.pv-galat { border-color: var(--wd-galat); color: var(--wd-galat); }
.pv-meja { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); font-weight: 700; }
@media (max-width: 640px) { .pv-sisi { display: none; } }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--wd-garis) !important; }
.meja.st-KOSONG { color: var(--wd-tinta); }
.swal2-container.swal2-backdrop-show { background: var(--wd-gelap) !important; }
.swal2-icon.swal2-error { border-color: var(--wd-galat) !important; color: var(--wd-galat) !important; }
.swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--wd-galat) !important; }
.swal2-icon.swal2-success { border-color: var(--wd-aksen) !important; color: var(--wd-aksen) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--wd-aksen) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--wd-aksen) !important; }
.swal2-icon.swal2-warning, .swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: var(--wd-aksen) !important; color: var(--wd-aksen) !important; }
.swal2-deny { background: var(--wd-galat) !important; color: var(--wd-latar) !important; }
.pv-st { color: var(--wd-st-teks); }
/* Bilah gelap punya turunan token sendiri, supaya tema terang tetap terbaca:
   teks kartu dan warna medan tidak berlaku di atas latar --wd-gelap. */
aside.bilah, .kaca-bar, .pv-sisi, .pv-bilah {
  color: var(--wd-gelap-teks);
  --wd-medan: color-mix(in srgb, var(--wd-gelap-teks) 14%, transparent);
  --wd-garis: color-mix(in srgb, var(--wd-gelap-teks) 22%, transparent);
  --wd-redup: color-mix(in srgb, var(--wd-gelap-teks) 80%, transparent);
}
.kaca-bar input, .kaca-bar select, aside.bilah input, aside.bilah select { color: var(--wd-gelap-teks); }
.mega-panel { background: linear-gradient(var(--wd-gelap), var(--wd-gelap)), var(--wd-latar); }
table.dataTable.tabel-konsol thead th { color: var(--wd-utama-teks); }
.tiket-item.st-ANTRE { color: var(--wd-tinta); }
.rujuk-grup { display: flex; width: 100%; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid transparent; border-radius: var(--wd-sudut-kecil); font-size: .85rem; }
.rujuk-grup:hover { background: var(--wd-medan); }
.rujuk-grup.aktif { border-color: var(--wd-aksen); background: var(--wd-medan); font-weight: 600; }
/* Logo neon berlatar hitam aslinya, jadi terbaca di tema apa pun. */
.logo-neon { border-radius: var(--wd-sudut); }

/* BP Matrix dan formulir perusahaan */
.bp-tanda { display: inline-block; width: .65rem; height: .65rem; border-radius: .2rem; }
.bp-int { background: var(--wd-utama); }
.bp-ext { background: var(--wd-aksen); }
.bp-tabel { width: 100%; border-collapse: collapse; font-size: .82rem; }
.bp-tabel th, .bp-tabel td { border: 1px solid var(--wd-garis); }
.bp-tabel thead th { padding: .5rem .6rem; background: var(--wd-utama-tua); color: var(--wd-utama-teks); font-weight: 700; text-align: center; white-space: nowrap; }
.bp-dim { padding: .5rem .75rem; background: var(--wd-medan); color: var(--wd-aksen); font-weight: 700; text-align: center; vertical-align: middle; }
.bp-sel { min-width: 8.6rem; padding: .5rem; vertical-align: top; }
.bp-sel-int { border-left: 3px solid var(--wd-utama) !important; }
.bp-sel-ext { border-left: 3px solid var(--wd-aksen) !important; }
.bp-sifat { font-size: .58rem; font-weight: 800; letter-spacing: .05em; color: var(--wd-redup); }
.bp-node { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding: .2rem .25rem; border-radius: var(--wd-sudut-kecil); }
.bp-node:hover { background: var(--wd-medan); }
.bp-node + .bp-node { border-top: 1px solid var(--wd-garis); }
.bp-nama { flex: 1; min-width: 0; font-weight: 600; text-align: left; }
.bp-nama span { display: block; font-size: .62rem; font-weight: 500; color: var(--wd-redup); }
.bp-nama:hover { color: var(--wd-aksen); }
.bp-mini { padding: .1rem .25rem; color: var(--wd-redup); }
.bp-mini:hover { color: var(--wd-aksen); }
.bp-kosong { padding: .15rem .3rem; font-size: .72rem; font-style: italic; color: var(--wd-redup); }
.bp-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem 1rem; }
.bp-modal.hidden { display: none; }
.bp-modal-latar { position: absolute; inset: 0; background: var(--wd-gelap); }
.bp-modal-isi { position: relative; width: 100%; max-width: 42rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut); background: var(--wd-latar); }
.bp-modal-badan { max-height: 70vh; overflow-y: auto; }
.bp-tv { padding: .35rem 0; border-bottom: 1px solid var(--wd-garis); }
.bp-tv-baris { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .15rem 0; }
.bp-tv-baris code { font-size: .68rem; font-weight: 400; color: var(--wd-redup); }
.bp-tv-cucu { margin-left: 1rem; padding-left: .75rem; border-left: 1px dashed var(--wd-garis); }
.foto-besar { display: grid; place-items: center; width: 8rem; height: 8rem; margin: 0 auto; overflow: hidden; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut); background: var(--wd-medan); font-size: 2.5rem; font-weight: 600; }
.tab-baris { display: flex; gap: .25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--wd-garis); }
.tab-tombol { margin-bottom: -1px; padding: .5rem 1rem; border-bottom: 2px solid transparent; border-radius: 0; font-size: .875rem; font-weight: 600; color: var(--wd-redup); }
.tab-tombol.aktif { border-bottom-color: var(--wd-aksen); color: var(--wd-tinta); }
.lbl-form { display: block; font-size: .85rem; font-weight: 600; }
.isi-form { display: block; width: 100%; margin-top: .3rem; padding: .5rem .7rem; border-radius: var(--wd-sudut-kecil); font-size: .875rem; font-weight: 400; }
.judul-form { margin: 1.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--wd-garis); font-size: .9rem; font-weight: 700; }

/* Kolom Aksi konsol: selebar tombolnya, tidak pernah terlipat. Tombol ikon persegi. */
.tabel-konsol tbody td:last-child, .tabel-konsol thead th:last-child { width: 1%; white-space: nowrap; }
.tabel-konsol td:last-child .tombol-baris { min-width: 2.1rem; height: 2rem; justify-content: center; }
.kolom-aksi { display: flex; flex-wrap: nowrap; align-items: center; gap: .25rem; }
/* Peta pendaftaran */
.peta-daftar { height: 18rem; overflow: hidden; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); background: var(--wd-medan); }
.peta-daftar .leaflet-control-attribution { font-size: .62rem; }
/* Logo usaha di kiri atas sidebar tenant; logo WARDI pindah ke dasar sidebar. */
.sb-logo-usaha { display: flex; align-items: center; justify-content: center; width: 100%; height: 3.25rem; padding: 0; border-radius: var(--wd-sudut-kecil); }
.sb-logo-usaha img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Logo usaha tenant di luar sidebar: tanpa keping, latar transparan apa adanya. */
/* Peta pilih lokasi antar (pesan online). */
.peta-antar { height: min(18rem, 45vh); border-radius: var(--wd-sudut-kecil); border: 1px solid var(--wd-garis); }
.jangkau-antar { stroke: var(--wd-aksen); stroke-width: 2; stroke-dasharray: 6 6; fill: var(--wd-aksen); fill-opacity: .06; }
.titik-outlet { stroke: var(--wd-latar); stroke-width: 2; fill: var(--wd-utama); fill-opacity: 1; }
/* Bingkai tersembunyi untuk mencetak tiket dapur. */
.bingkai-cetak { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
.logo-kepala { height: 2.25rem; width: auto; max-width: 8rem; object-fit: contain; }
.logo-pos { height: 3rem; width: auto; max-width: 7rem; flex: none; object-fit: contain; }
.sb-kaki { flex: none; padding: .9rem 1.25rem; border-top: 1px solid var(--wd-garis); opacity: .85; }
@media (min-width: 768px) {
  .sb-lipat .sb-logo-usaha { height: 2.75rem; padding: .2rem; }
  .sb-lipat .sb-kaki { padding-inline: .5rem; }
}
/* Tabel di kolom setengah layar: sel lebih rapat supaya tidak perlu digeser. */
table.dataTable.tabel-ringkas thead th, table.dataTable.tabel-ringkas tbody td { padding: .55rem .5rem !important; }
table.dataTable.tabel-ringkas thead th.sorting, table.dataTable.tabel-ringkas thead th.sorting_asc, table.dataTable.tabel-ringkas thead th.sorting_desc { padding-right: 1.3rem !important; }
/* Denah meja di atas peta */
.aset-meja { display: flex; flex-direction: column; gap: .4rem; max-height: max(31rem, calc(100vh - 18.5rem)); overflow-y: auto; padding-right: .2rem; }
.aset-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); background: var(--wd-medan); cursor: grab; }
.aset-item.di-peta { opacity: .75; }
.aset-item:active { cursor: grabbing; }
.denah-pisah { width: 1px; align-self: stretch; margin: .25rem .25rem; background: var(--wd-garis); }
.tombol-baris:disabled { opacity: .45; cursor: not-allowed; }
.peta-denah .leaflet-control-layers { border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); background: var(--wd-latar); color: var(--wd-tinta); box-shadow: 0 2px 8px rgb(0 0 0 / .3); }
.peta-denah .leaflet-control-layers-expanded { padding: .5rem .75rem; font-size: .8rem; }
.peta-denah .leaflet-control-layers-toggle { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background-image: none; color: var(--wd-tinta); font-size: 1.1rem; }
.peta-denah .leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none; }
.peta-denah .leaflet-control-layers label { margin: .2rem 0; cursor: pointer; }
.peta-ubah { position: absolute; left: .75rem; right: .75rem; bottom: 1.75rem; z-index: 600; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); background: var(--wd-latar); color: var(--wd-tinta); box-shadow: 0 2px 10px rgb(0 0 0 / .35); }
.peta-ubah.hidden { display: none; }
.pin-outlet { position: relative; }
.pin-outlet i { position: absolute; left: -.85rem; top: -.85rem; display: flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border: 2px solid var(--wd-latar); border-radius: 50%; background: var(--wd-aksen); color: var(--wd-latar); font-size: .8rem; box-shadow: 0 1px 4px rgb(0 0 0 / .4); opacity: .9; }
.pin-outlet span { position: absolute; left: 0; top: 1rem; transform: translateX(-50%); white-space: nowrap; padding: 0 .35rem; border-radius: .3rem; background: var(--wd-latar); color: var(--wd-tinta); font-size: .65rem; font-weight: 600; opacity: .85; }
.peta-pita { position: absolute; left: 3.4rem; right: 4.1rem; top: .75rem; z-index: 650; display: flex; align-items: flex-start; gap: .5rem; padding: .55rem .75rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); background: var(--wd-latar); color: var(--wd-tinta); font-size: .8rem; box-shadow: 0 2px 10px rgb(0 0 0 / .35); }
.peta-pita.hidden { display: none; }
.lokasi-aset { display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; white-space: nowrap; }
.lokasi-aset > span { display: flex; align-items: center; gap: .35rem; }
.lokasi-aset > span:first-child { font-size: .875rem; font-weight: 600; }
.lokasi-aset i { color: var(--wd-redup); font-size: .75rem; }
.tautan-peta { display: inline-flex; align-items: center; gap: .3rem; margin-top: .15rem; font-size: .75rem; font-weight: 600; color: var(--wd-aksen); text-decoration: underline; }
.tautan-peta i { color: var(--wd-aksen); }
/* Lantai di peta: gambar meja diwarnai status, info tamu/menit di bawahnya. */
.peta-lantai { height: max(22rem, calc(100vh - 13rem)); }
.lantai-dua { display: grid; gap: 1rem; }
.pilih-meja-dua { display: grid; gap: .75rem; }
.tautan-meja { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-color: var(--wd-aksen); text-underline-offset: 3px; }
.tautan-meja i { color: var(--wd-aksen); font-size: .85em; }
.tiket-lokasi { display: flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--wd-aksen); }
.pilih-meja-dua .peta-daftar { height: min(28rem, 50vh); }
.pilih-meja-dua .kolom-kotak { max-height: min(28rem, 40vh); overflow-y: auto; }
@media (min-width: 900px) { .pilih-meja-dua { grid-template-columns: minmax(0, 1fr) 17rem; } .pilih-meja-dua .kolom-kotak { max-height: min(28rem, 50vh); } }
@media (min-width: 1024px) { .lantai-dua { grid-template-columns: minmax(0, 1fr) 22rem; } .kolom-kotak { height: max(22rem, calc(100vh - 13rem)); overflow-y: auto; } }
.lantai-dua[hidden] { display: none; }
.panel-kasir[hidden] { display: none; }
@media (max-width: 1023px) { .peta-lantai { height: max(18rem, 55vh); } }
.kolom-kotak { padding: .75rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); background: var(--wd-kartu); }
.kotak-judul { display: flex; justify-content: space-between; margin: .25rem 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--wd-aksen); }
.kotak-judul span { color: var(--wd-redup); font-weight: 600; text-transform: none; letter-spacing: 0; }
.kotak-isi { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.kotak-isi .meja-kecil { min-width: 0; width: 100%; }
.meja-kecil .belum-peta { margin-top: .15rem; font-size: .62rem; opacity: .85; }
.meja-gbr.status-KOSONG { color: var(--wd-st-kosong); }
.meja-gbr.status-TERISI { color: var(--wd-st-terisi); }
.meja-gbr.status-BAYAR { color: var(--wd-st-bayar); }
.meja-gbr.status-BERSIHKAN { color: var(--wd-st-bersihkan); }
.meja-gbr.status-RESERVED { color: var(--wd-st-reserved); }
.meja-gbr[class*='status-'] .badan { stroke: var(--wd-tinta); stroke-width: 1.5; }
.meja-gbr[class*='status-'] .kursi { opacity: .85; }
.meja-gbr[class*='status-'] text { fill: var(--wd-st-teks); }
.meja-gbr.status-KOSONG text { fill: var(--wd-tinta); }
.meja-gbr.redup { opacity: .25; }
.meja-gbr.pilihan { filter: drop-shadow(0 0 4px var(--wd-aksen)) drop-shadow(0 0 8px var(--wd-aksen)); }
.meja-gbr.pilihan .badan { stroke: var(--wd-aksen); stroke-width: 3; }
.meja-lantai { position: relative; display: flex; justify-content: center; cursor: pointer; }
.meja-info { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; padding: 0 .35rem; border-radius: .3rem; background: var(--wd-latar); color: var(--wd-tinta); font-size: .65rem; font-weight: 600; white-space: nowrap; opacity: .9; pointer-events: none; }
.meja-lantai.tanpa-info .meja-info { display: none; }
.meja-kecil { display: inline-flex; flex-direction: column; align-items: center; min-width: 4.5rem; padding: .35rem .6rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); color: var(--wd-st-teks); }
.meja-kecil.st-KOSONG { color: var(--wd-tinta); }
.meja-kecil small, .meja small { font-size: .7rem; }
.meja.redup, .meja-kecil.redup { opacity: .3; }
.meja.pilihan, .meja-kecil.pilihan { outline: 3px solid var(--wd-aksen); outline-offset: 2px; }
.tab-aset button[aria-pressed='true'], .tab-aset button.aktif { background: var(--wd-utama); color: var(--wd-utama-teks); }
.peta-pita-statis { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); background: var(--wd-gelap); font-size: .875rem; }
.peta-pita-statis.hidden { display: none; }
.sedang-ubah .meja-ikon { pointer-events: none; opacity: .55; }
.tab-aset { display: inline-flex; gap: .15rem; padding: .2rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); }
.tab-aset button { padding: .3rem .7rem; border-radius: .35rem; font-size: .8rem; font-weight: 600; color: var(--wd-redup); }
.tab-aset button.aktif { background: var(--wd-utama); color: var(--wd-utama-teks); }
/* Bilah keranjang penjualan langsung di ponsel. */
.bilah-jual { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-radius: var(--wd-sudut-kecil); background: var(--wd-utama); color: var(--wd-utama-teks); box-shadow: 0 8px 24px color-mix(in srgb, var(--wd-gelap) 85%, transparent); font-size: .95rem; }
.bilah-jual[hidden] { display: none; }
.jual-kategori { display: flex; flex-wrap: wrap; gap: .35rem; }
.jual-kategori button { padding: .25rem .7rem; border: 1px solid var(--wd-garis); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--wd-redup); }
.jual-kategori button.aktif { background: var(--wd-utama); border-color: var(--wd-utama); color: var(--wd-utama-teks); }
.jual-menu { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); max-height: calc(100vh - 16rem); overflow-y: auto; }
.jual-menu button { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: .35rem; min-height: 5rem; padding: .6rem; text-align: left; font-size: .875rem; border: 1px solid var(--wd-garis); border-radius: var(--wd-sudut-kecil); }
.jual-menu button:hover:not(:disabled) { border-color: var(--wd-aksen); }
.jual-menu button:disabled { opacity: .5; }
.jual-menu button > span:not(.jual-foto) { color: var(--wd-redup); }
.jual-menu .jual-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--wd-sudut-kecil) - .15rem); background: var(--wd-medan); }
.jual-menu .jual-foto-kosong { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--wd-garis); }
.jual-menu button em { position: absolute; top: .45rem; right: .45rem; box-shadow: 0 0 0 2px var(--wd-kartu); min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--wd-utama); color: var(--wd-utama-teks); font-style: normal; font-size: .75rem; font-weight: 700; text-align: center; }
.aset-ikon { display: flex; align-items: center; justify-content: center; width: 2.3rem; height: 1.8rem; border-radius: .35rem; background: var(--wd-aksen); color: var(--wd-latar); font-size: 1rem; }
.aset-peta { display: flex; flex: none; align-items: center; justify-content: center; border: 1.5px solid var(--wd-latar); border-radius: .25rem; background: var(--wd-aksen); color: var(--wd-latar); box-shadow: 0 1px 3px rgb(0 0 0 / .35); }
.aset-peta.lain { border: 1px dashed var(--wd-redup); background: color-mix(in srgb, var(--wd-redup) 30%, transparent); color: var(--wd-redup); box-shadow: none; opacity: .75; }
.aset-peta.terpilih { outline: 3px solid var(--wd-utama); outline-offset: 1px; }
.leaflet-marker-icon .aset-peta { cursor: move; }
.meja-ikon { display: flex; align-items: center; justify-content: center; }
.batas-area { stroke: var(--wd-aksen); stroke-width: 3; fill: var(--wd-aksen); fill-opacity: .12; }
.meja-gbr { display: block; overflow: visible; color: var(--wd-utama); filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)); }
.meja-gbr .badan { fill: currentColor; stroke: var(--wd-utama-teks); stroke-width: 1.5; }
.meja-gbr .kursi { fill: currentColor; opacity: .8; }
.meja-gbr text { fill: var(--wd-utama-teks); font-weight: 700; font-family: inherit; }
.meja-gbr.lain { color: var(--wd-redup); filter: none; opacity: .75; }
.meja-gbr.lain .badan { fill-opacity: .35; stroke: var(--wd-redup); stroke-dasharray: 3 2; }
.meja-gbr.lain .kursi { opacity: .45; }
.meja-gbr.lain text { fill: var(--wd-redup); }
.leaflet-marker-icon .meja-gbr { cursor: move; }
.meja-gbr.terpilih .badan { stroke: var(--wd-aksen); stroke-width: 3; }
.meja-gbr.terpilih { filter: drop-shadow(0 0 4px var(--wd-aksen)); }
.leaflet-marker-icon.meja-ikon:focus { outline: none; }
.leaflet-marker-icon.meja-ikon:focus-visible .badan { stroke: var(--wd-aksen); stroke-width: 3; }
.batang-progres { height: .55rem; overflow: hidden; border-radius: 999px; background: var(--wd-garis); }
.batang-progres span { display: block; height: 100%; width: 0; background: var(--wd-aksen); transition: width .3s; }
.kamera-pindai { width: 100%; max-width: 26rem; border-radius: var(--wd-sudut-kecil); background: var(--wd-gelap); }
.tabel-laporan th, .tabel-laporan td { padding: .45rem .55rem; border-bottom: 1px solid var(--wd-garis); }
.tabel-laporan thead th { color: var(--wd-redup); font-weight: 600; }
.tabel-laporan .baris-kepala td { padding-top: .9rem; color: var(--wd-aksen); font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.tabel-laporan .baris-jumlah td { font-weight: 700; border-bottom-color: var(--wd-redup); }
.tabel-jadwal th, .tabel-jadwal td { padding: .35rem .5rem; border-bottom: 1px solid var(--wd-garis); }
.tabel-jadwal thead th { position: sticky; top: 0; background: var(--wd-latar); color: var(--wd-redup); font-weight: 600; }
.aset-gbr { display: flex; flex: none; align-items: center; justify-content: center; width: 3.4rem; height: 2.6rem; }
.aset-gbr .meja-gbr { filter: none; }
.batas-area-lain { stroke: var(--wd-redup); stroke-width: 2; stroke-dasharray: 6 6; fill: var(--wd-redup); fill-opacity: .05; }
.peta-catatan { position: absolute; inset: 0; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; border-radius: var(--wd-sudut-kecil); background: color-mix(in srgb, var(--wd-latar) 82%, transparent); pointer-events: none; }
.peta-catatan.hidden { display: none; }