/* ==========================================================================
   BKW — tata letak halaman staf (di atas theme.css).
   ≥992px: sidebar tetap; <992px: sidebar geser (off-canvas).
   ========================================================================== */

:root { --sidebar-width: 248px; }

body { min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background-color: var(--bkw-surface-2);
    overflow-y: auto;
    z-index: 1045;
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
}
.sidebar-brand { display: flex; align-items: center; gap: .7rem; padding: 1.25rem 1.25rem 1rem; }
.brand-logo {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: var(--bkw-primary); color: var(--bkw-on-primary); font-weight: 800; font-size: .78rem; letter-spacing: .02em;
}
.brand-name { font-weight: 800; font-size: 1.1rem; line-height: 1.1; }
.brand-sub { font-size: .75rem; color: var(--bkw-text-secondary); }

.sidebar-heading {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--bkw-text-muted); padding: 1rem .9rem .35rem;
}
.sidebar .nav-link {
    display: flex; align-items: center; gap: .65rem; padding: .55rem .9rem; border-radius: 10px;
    color: var(--bkw-text-secondary); font-weight: 600; font-size: .9rem;
}
.sidebar .nav-link .bi { font-size: 1.05rem; }
.sidebar .nav-link:hover { background-color: var(--bkw-surface); color: var(--bkw-text); }
.sidebar .nav-link.active { background-color: var(--bkw-surface); color: var(--bkw-text); box-shadow: var(--bkw-shadow); }
.sidebar .nav-link.active .bi { color: var(--bkw-primary); }
/* Grup sidebar yang bisa dibuka-tutup (components/sidebar, assets/js/sidebar.js) */
/* Batas antar menu utama = garis tipis; grup yang terbuka tampil sebagai kotak berlatar beda, judulnya berwarna. */
.sidebar nav > .nav > li + li { border-top: 1px solid var(--bkw-border); padding-top: .25rem; }
.sidebar-grup { list-style: none; border-radius: 12px; border: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.sidebar-grup-judul { display: flex; width: 100%; align-items: center; justify-content: space-between; background: none; border: 0; text-align: left; border-radius: 10px; cursor: pointer; padding: .7rem .9rem; }
.sidebar-grup-judul:hover { color: var(--bkw-text); background-color: var(--bkw-surface); }
.sidebar-grup-judul .bi { transition: transform .2s; }
.sidebar-grup-judul[aria-expanded="false"] .bi { transform: rotate(-90deg); }
.sidebar nav > .nav > li.sidebar-grup:has(> [aria-expanded="true"]) { background-color: var(--bkw-bg); border-color: var(--bkw-border); margin: .3rem 0; padding: 0 .35rem .35rem; }
.sidebar nav > .nav > li.sidebar-grup:has(> [aria-expanded="true"]) + li { border-top-color: transparent; }
.sidebar-grup:has(> [aria-expanded="true"]) > .sidebar-grup-judul { color: var(--bkw-primary-ink); }
.sidebar-grup:has(> [aria-expanded="true"]) > .sidebar-grup-judul .bi { color: var(--bkw-primary); }
.sidebar-grup > .nav { padding-bottom: .1rem; }
.sidebar-backdrop { display: none; }

/* ── Area utama ──────────────────────────────────────────────────────── */
.main { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 1030;
    background-color: color-mix(in srgb, var(--bkw-bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bkw-border);
    flex-wrap: wrap; /* layar sempit: tombol turun ke baris kedua, tidak terpotong */
    row-gap: .4rem;
}
.avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--bkw-accent-soft); color: var(--bkw-accent-ink); font-weight: 800; font-size: .8rem;
}

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); box-shadow: var(--bkw-shadow-lg); }
    .sidebar.show + .sidebar-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1040;
        background: color-mix(in srgb, var(--bkw-text) 40%, transparent);
    }
    .main { margin-left: 0; }
}

/* ── Komponen halaman ────────────────────────────────────────────────── */
.page-header h1 { font-size: 1.45rem; font-weight: 800; margin-bottom: .15rem; }

.kartu-pintasan { display: flex; gap: .9rem; align-items: flex-start; color: var(--bkw-text); }
.kartu-pintasan:hover { color: var(--bkw-text); border-color: var(--bkw-primary); }
.kartu-pintasan .ikon {
    width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
    background: var(--bkw-primary-soft); color: var(--bkw-primary-ink); font-size: 1.2rem;
}

.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--bkw-surface-2); }
.table thead th {
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--bkw-text-secondary); border-bottom-color: var(--bkw-border); white-space: nowrap;
}
.table td { border-color: var(--bkw-border); vertical-align: middle; }
.perm-table td, .perm-table th { white-space: nowrap; }

.dl-akun dt { font-weight: 500; color: var(--bkw-text-secondary); }

/* ── Usaha & unit ────────────────────────────────────────────────────── */
.min-w-0 { min-width: 0; }
.flex-none { flex: none; }
.kode-usaha {
    flex: none; min-width: 48px; height: 48px; padding: 0 .5rem; border-radius: 12px; display: grid; place-items: center;
    background: var(--bkw-accent-soft); color: var(--bkw-accent-ink); font-family: var(--bs-font-monospace); font-weight: 600; font-size: .85rem;
}
.kode-usaha-lg { min-width: 60px; height: 60px; font-size: 1rem; }
.ikon-unit {
    flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--bkw-primary-soft); color: var(--bkw-primary-ink); font-size: 1.25rem;
}
.pilih-jenis { cursor: pointer; border: 2px solid var(--bkw-border); position: relative; transition: border-color .15s, background-color .15s; }
.pilih-jenis:hover { border-color: var(--bkw-primary); }
.tanda-pilih {
    display: none; position: absolute; top: -.7rem; right: .75rem; z-index: 1; padding: .1rem .55rem; border-radius: 99px;
    background: var(--bkw-primary); color: var(--bkw-on-primary); font-size: .72rem; font-weight: 700;
}
.btn-check:checked + .pilih-jenis { border-color: var(--bkw-primary); background: var(--bkw-primary-soft); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2); }
.btn-check:checked + .pilih-jenis .tanda-pilih { display: inline-flex; gap: .25rem; align-items: center; }
.btn-check:checked + .pilih-jenis .ikon-unit { background: var(--bkw-primary); color: var(--bkw-on-primary); }
.btn-check:checked + .pilih-jenis .text-secondary-bkw { color: var(--bkw-primary-ink) !important; }
.btn-check:focus-visible + .pilih-jenis { outline: 2px solid var(--bkw-primary); outline-offset: 2px; }
.isian-pengaturan:last-child { border-bottom: 0 !important; }

.usaha-aktif .dropdown-toggle { max-width: 220px; }
.usaha-aktif .nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.peta-lokasi { height: 340px; border-radius: 12px; border: 1px solid var(--bkw-border); z-index: 0; }
.logo-pratinjau {
    flex: none; width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; overflow: hidden;
    background: var(--bkw-surface-2); color: var(--bkw-text-muted); font-size: 1.6rem; border: 1px solid var(--bkw-border);
}
.logo-pratinjau img, .kode-usaha img { width: 100%; height: 100%; object-fit: contain; }
.kode-usaha.ada-logo { background: var(--bkw-surface); border: 1px solid var(--bkw-border); padding: 4px; }

/* ── Layar meja ──────────────────────────────────────────────────────── */
.layar-meja { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .85rem; }
.kartu-meja {
    display: flex; flex-direction: column; gap: .4rem; min-height: 190px; padding: .9rem; border-radius: var(--bkw-radius);
    background: var(--bkw-surface); border: 1.5px solid var(--bkw-border); box-shadow: var(--bkw-shadow);
}
.kartu-meja .timer { font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.kartu-meja .btn-outline-danger { --bs-btn-color: #A32A40; --bs-btn-border-color: #A32A40; }
[data-bs-theme=dark] .kartu-meja .btn-outline-danger { --bs-btn-color: var(--bkw-bad); --bs-btn-border-color: var(--bkw-bad); }
.kartu-regular { background: var(--bkw-primary-soft); border-color: transparent; }
.kartu-open { background: var(--bkw-accent-soft); border-color: transparent; }
.kartu-hampir { background: var(--bkw-warn-soft); border-color: var(--bkw-warn); }
.bar-sisa { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--bkw-text) 10%, transparent); overflow: hidden; }
.bar-sisa i { display: block; height: 100%; background: var(--bkw-primary); border-radius: inherit; }
.kartu-hampir .bar-sisa i { background: var(--bkw-warn); }
.pill-tagihan { background: var(--bkw-surface); color: var(--bkw-text); border: 1px solid var(--bkw-border); }

/* ── Halaman masuk ───────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.login-card { width: 100%; max-width: 420px; }
.login-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; }
.login-brand .brand-logo { width: 48px; height: 48px; border-radius: 14px; font-size: .9rem; }

/* ── Isi panduan ─────────────────────────────────────────────────────── */
.isi-panduan { line-height: 1.65; max-width: 68ch; }
.isi-panduan h3 { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.isi-panduan h3:first-child { margin-top: 0; }
.isi-panduan ol.langkah { counter-reset: langkah; list-style: none; padding-left: 0; }
.isi-panduan ol.langkah > li { counter-increment: langkah; position: relative; padding: 0 0 .65rem 2.4rem; }
.isi-panduan ol.langkah > li::before {
    content: counter(langkah); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--bkw-primary-soft); color: var(--bkw-primary-ink); font-weight: 700; font-size: .85rem; display: grid; place-items: center;
}
.isi-panduan .tips, .isi-panduan .awas { border-radius: 10px; padding: .65rem .85rem; margin: .75rem 0; font-size: .925rem; }
.isi-panduan .tips { background: var(--bkw-primary-subtle); }
.isi-panduan .awas { background: var(--bkw-bad-soft); }
.isi-panduan .tips::before { content: "Tips: "; font-weight: 700; color: var(--bkw-primary); }
.isi-panduan .awas::before { content: "Perhatian: "; font-weight: 700; color: var(--bkw-bad); }
.isi-panduan .tbl {
    display: inline-block; padding: 0 .4rem; border: 1px solid var(--bkw-border); border-radius: 6px;
    font-size: .85em; font-weight: 600; white-space: nowrap;
}

/* ── Tagihan & nota ──────────────────────────────────────────────────── */
.gambar-qris { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--bkw-radius); padding: .5rem; }
.nota-kertas { max-width: 420px; }
.nota-info { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; }
.nota-info dt { font-weight: 500; color: var(--bkw-text-secondary); }
.nota-info dd { margin: 0; text-align: right; }
.nota-tombol { max-width: 420px; }

@media print {
    .sidebar, .sidebar-backdrop, .topbar, footer, .alert-dismissible, .d-print-none { display: none !important; }
    .main { margin: 0 !important; padding: 0 !important; }
    main { padding: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
    .nota-kertas { max-width: 80mm; border: 0 !important; box-shadow: none !important; background: #fff !important; color: #000 !important; }
}

/* Struk printer thermal 80 mm (nota & bukti RFID, uji cetak pemilik 18 Okt 2026): huruf kecil rata seperti struk umum
   (±42–48 huruf/baris), semua hitam pekat (abu-abu tercetak sebagai titik jarang), baris rapat, pemisah putus-putus.
   Hanya saat dicetak; tampilan layar & link WA pelanggan tidak berubah. Margin halaman 0 → tidak perlu diatur di dialog cetak. */
@page struk { margin: 0; }
@media print {
    main:has(.struk), .main:has(.struk) { page: struk; }
    /* Area cetak driver Xprinter XP-80 = 71,9 mm mulai x=0 → isi 68 mm + 2 mm kiri agar ujung kanan tidak terpotong.
       Huruf semi-tebal: garis tipis tercetak putus-putus/abu-abu di thermal. */
    .struk { width: 68mm; max-width: 68mm !important; margin: 0 0 0 2mm !important; padding: 0 0 3mm; font-family: Consolas, "Courier New", monospace; font-size: 10px; font-weight: 600; line-height: 1.25; }
    .struk, .struk * { color: #000 !important; }
    .struk .card-body { padding: 0 !important; }
    .struk .small, .struk .table { font-size: inherit !important; }
    .struk .fs-5 { font-size: 12px !important; line-height: 1.2; font-weight: 700; }
    .struk .nota-logo { height: 26px; max-width: 32mm; }
    .struk .mb-3 { margin-bottom: 2mm !important; }
    .struk .mb-2 { margin-bottom: 1mm !important; }
    .struk .mt-3 { margin-top: 2mm !important; }
    .struk .nota-info { gap: 0 2mm; }
    .struk .nota-info dt { font-weight: 600; }
    .struk .table { margin-bottom: 1mm !important; --bs-table-bg: transparent; }
    .struk .table > :not(caption) > * > * { padding: .2mm 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
    .struk .table:not(.table-borderless) tbody { border-top: 1px dashed #000; }
    .struk .table tfoot tr:last-child td { border-top: 1px dashed #000 !important; border-bottom: 1px dashed #000 !important; padding: .8mm 0 !important; font-size: 11.5px; font-weight: 700; }
    .struk .ps-3, .struk .table > :not(caption) > * > .ps-3 { padding-left: 3mm !important; }
    .struk .border-top { border-top: 1px dashed #000 !important; }
    .struk .alert { border: 1px dashed #000 !important; background: transparent !important; padding: 1mm !important; }
}

/* ── Isian pelanggan (cari realtime) ─────────────────────────────────── */
.hasil-pelanggan { max-height: 280px; overflow-y: auto; }
.hasil-pelanggan .list-group-item { cursor: pointer; }
.pelanggan-terpilih { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--bkw-border); border-radius: var(--bkw-radius); background: var(--bkw-surface-2); }
.pelanggan-terpilih.d-none { display: none !important; }
.info-pelanggan { font-size: .8rem; color: var(--bkw-text-secondary); }
.info-pelanggan .hutang { color: var(--bkw-bad); font-weight: 700; }
.nota-publik { max-width: 452px; margin: 0 auto; padding: 3.5rem 16px 2rem; }
.nota-publik .nota-kertas { max-width: none; }

/* ── Halaman member (/member) ────────────────────────────────────────── */
.member-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem 16px; border-bottom: 1px solid var(--bkw-border); background: var(--bkw-surface); }
.member-isi { max-width: 560px; margin: 0 auto; padding: 1.25rem 16px 2.5rem; }
.member-angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.member-angka > div { padding: .6rem .7rem; border-radius: var(--bkw-radius); background: var(--bkw-surface-2); display: flex; flex-direction: column; min-width: 0; }
.member-angka span { font-size: .75rem; color: var(--bkw-text-secondary); }
.member-angka b { font-size: 1rem; overflow-wrap: anywhere; }

/* ── Cetak F4 tegak (215 × 330 mm): rekap tutup harian & laporan ─────── */
.kertas-f4 { max-width: 900px; }
.kertas-lebar { max-width: none; }
.tanda-tangan > div { padding-top: .5rem; }
.tabel-laporan { font-size: .82rem; }
.tabel-laporan td, .tabel-laporan th { white-space: nowrap; }

/* Ukuran F4 dipasang pada seluruh isi halaman (bukan hanya kotak laporan), agar kop & tabel tidak terpisah halaman. */
@page f4 { size: 215mm 330mm; margin: 10mm 9mm; }
@media print {
    .main:has(.kertas-f4) { page: f4; }
    .kop-laporan { display: block !important; color: #000; }
    .kertas-f4 { max-width: none; border: 0 !important; box-shadow: none !important; background: #fff !important; color: #000 !important; }
    .kertas-f4 .card-body { padding: 0 !important; }
    .kertas-f4 .table { font-size: 9pt; color: #000; --bs-table-color: #000; --bs-table-bg: #fff; }
    .kertas-f4 .text-secondary-bkw, .kertas-f4 .small { color: #333 !important; }
    .kertas-f4 .angka { font-family: inherit; font-variant-numeric: tabular-nums; }
    /* Tabel lebar: tidak digulir, huruf kecil, judul kolom boleh terlipat, semua kolom muat di kertas tegak */
    .kertas-f4 .table-responsive { overflow: visible !important; }
    .tabel-laporan { font-size: 7.5pt !important; width: 100%; table-layout: auto; }
    .tabel-laporan th { white-space: normal !important; vertical-align: bottom; line-height: 1.15; }
    .tabel-laporan td, .tabel-laporan th { padding: 1.5pt 3pt !important; }
    .tabel-laporan tr { break-inside: avoid; }
    .tabel-laporan thead { display: table-header-group; }
}

/* Lampiran foto bukti uang keluar (pengaturan usaha "cetak_lampiran_bukti", 5 Nov 2026): di layar berderet; dicetak mulai
   halaman baru, 2 foto per halaman F4 (kotak 140 mm + judul muat dalam 310 mm), foto utuh tanpa terpotong. */
.lampiran-no { font-variant-numeric: tabular-nums; }
.lampiran-bukti .lampiran { margin: 0 0 1rem; padding: .5rem; border: 1px solid var(--bkw-border); border-radius: var(--bkw-radius); }
.lampiran-bukti figcaption { font-size: .85rem; margin-bottom: .4rem; }
.lampiran-bukti img { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; object-fit: contain; }
@media print {
    .lampiran-bukti { break-before: page; margin-top: 0 !important; }
    .lampiran-bukti .lampiran { height: 140mm; margin: 0 0 3mm; padding: 2mm; border: .3mm solid #999; border-radius: 0; break-inside: avoid; overflow: hidden; }
    .lampiran-bukti figcaption { font-size: 9pt; color: #000; }
    .lampiran-bukti img { max-height: 124mm; }
}

/* ── Laporan: grafik batang (layar saja) ─────────────────────────────── */
.grafik-batang { display: flex; align-items: flex-end; gap: 3px; height: 170px; padding-top: 1rem; overflow-x: auto; }
.grafik-batang .batang { flex: 1 0 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 14px; }
.grafik-batang .isi { width: 100%; background: var(--bkw-primary); border-radius: 4px 4px 0 0; min-height: 1px; }
.grafik-batang .label { font-size: .65rem; color: var(--bkw-text-secondary); margin-top: 2px; white-space: nowrap; }
/* Porsi beban di laba/rugi: batang mendatar (ikut tercetak) */
.porsi { display: inline-block; width: 80px; height: 8px; background: var(--bkw-border, #e5e7eb); border-radius: 4px; vertical-align: middle; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.porsi .isi { display: block; height: 100%; background: var(--bkw-primary); }
/* Foto menu Cafe (admin/menu) */
.menu-foto { width: 48px; height: 48px; object-fit: cover; flex: none; }
.menu-foto-kosong { display: inline-flex; align-items: center; justify-content: center; background: var(--bkw-primary-soft); color: var(--bkw-primary-ink); font-size: 1.25rem; }
.menu-foto-besar { width: 96px; height: 96px; }
/* Layar pesanan Cafe (admin/pesanan, assets/js/pesanan.js) */
.menu-pilih { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.menu-ubin { position: relative; }
.menu-ubin-tombol { display: flex; flex-direction: column; gap: .15rem; width: 100%; min-height: 72px; padding: .6rem 1.9rem .6rem .7rem; text-align: left;
    border: 1px solid var(--bkw-border); border-radius: 10px; background: var(--bkw-surface); color: var(--bkw-text); }
.menu-ubin-tombol:hover:not(:disabled) { border-color: var(--bkw-primary); background: var(--bkw-primary-subtle); }
.menu-ubin-tombol:active:not(:disabled) { transform: scale(.98); }
.menu-ubin.habis .menu-ubin-tombol { opacity: .55; text-decoration: line-through; cursor: not-allowed; }
.menu-ubin-habis { position: absolute; top: .3rem; right: .3rem; border: 0; background: none; color: var(--bkw-text-muted); padding: .15rem .3rem; line-height: 1; }
.menu-ubin-habis:hover { color: var(--bkw-bad); }
.harga-sepakat { max-width: 9rem; }
@media (min-width: 992px) { .keranjang { position: sticky; top: 1rem; } .keranjang-ringkas { display: none !important; } }
.keranjang-ringkas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .7rem 1rem; background: var(--bkw-surface); border-top: 1px solid var(--bkw-border); box-shadow: var(--bkw-shadow-lg); }
.pesanan-ada-ringkas { padding-bottom: 4.5rem; }
.batal-ringkas > summary { list-style: none; cursor: pointer; display: inline; font-size: .8rem; color: var(--bkw-bad); }
.batal-ringkas > summary::-webkit-details-marker { display: none; }
/* Layar dapur & papan pesanan (admin/dapur) */
.kolom-dapur { background: var(--bkw-surface-2); border-radius: var(--bkw-radius); padding: .75rem; min-height: 8rem; }
.kolom-dapur.kolom-olahan { min-height: 0; padding: .5rem .75rem; }
.tiket-dapur { border-left: 4px solid var(--bkw-primary); }
.tiket-dapur .btn { min-height: 44px; font-weight: 700; }
.catatan-pesanan { color: var(--bkw-warn); font-weight: 600; }
/* Pengingat bersuara (components/pengingat, assets/js/pengingat.js) */
.pengingat { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; width: min(340px, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .5rem; }
.pengingat-kartu { background: var(--bkw-surface); border: 1px solid var(--bkw-border); border-left: 5px solid var(--bkw-primary); border-radius: 12px;
    box-shadow: var(--bkw-shadow-lg); padding: .75rem .9rem; font-size: .9rem; }
.pengingat-peringatan { border-left-color: var(--bkw-bad); }
.pengingat-siap { border-left-color: var(--bkw-ok); }
.tiket-dapur.tiket-baru { border-left-color: var(--bkw-warn); }
.tiket-dapur.tiket-siap { border-left-color: var(--bkw-ok); }
.pesanan-ada-ringkas .pengingat { bottom: 4.5rem; }
/* Dialog pilih petugas (admin/dapur/_petugas) */
.pilih-petugas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.tombol-petugas { min-height: 56px; font-weight: 700; }
.tombol-petugas.active { background: var(--bkw-primary); color: var(--bkw-on-primary); }
.menu-centang { cursor: pointer; }
.menu-centang .form-check-input { width: 1.35rem; height: 1.35rem; flex: none; }

/* Absen: pratinjau kamera & hitung mundur (components/absen_tap, assets/js/absen.js) */
.absen-kamera { position: relative; max-width: 360px; margin: 0 auto; border-radius: var(--bkw-radius); overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.absen-kamera video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.absen-hitung { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4rem; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }

/* Kunci layar BKW (components/kunci_layar, assets/js/kunci.js) — di bawah modal (1055) agar dialog absen tetap tampil */
.kunci-layar { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 1rem; background: rgba(15, 23, 42, .72); backdrop-filter: blur(8px); }
.kunci-layar.d-none { display: none !important; }
.kunci-layar-kartu { width: 100%; max-width: 380px; }

/* Lencana perangkat absen di bilah atas (components/lencana_perangkat) */
.lencana-perangkat { white-space: nowrap; text-decoration: none; }

/* Kebersihan: halaman HP (kebersihan/hp), foto pemeriksaan & stiker QR (admin/kebersihan) */
.kebersihan-hp { max-width: 440px; margin: 0 auto; padding: 1.5rem 1rem 2rem; }
.kebersihan-foto { width: 100%; max-width: 320px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bkw-radius); background: #000; }
.qr-stiker { break-inside: avoid; border: 2px dashed #999; border-radius: 12px; padding: 1rem; text-align: center; color: #000; background: #fff; }
.qr-stiker svg { width: 100%; height: auto; display: block; margin: .5rem auto; }
.qr-besar { width: 10cm; }
.qr-besar svg { max-width: 8cm; }
@media screen { .qr-besar { max-width: 100%; } }
.qr-stiker .text-secondary-bkw { color: #555 !important; }
.qr-kecil { width: 6cm; font-size: .8rem; }
.qr-kecil svg { max-width: 4.5cm; }
.qr-lembar { display: flex; flex-wrap: wrap; gap: .5cm; justify-content: center; background: #fff; }
@media print { .qr-tidak-cetak { display: none !important; } body { background: #fff !important; } }
.kb-mini { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.kb-butir { border-bottom: 1px solid var(--bkw-border); padding-bottom: .5rem; }

/* Logo usaha: varian terang / gelap / cetak (helper logo_usaha_img), bentuk melebar diizinkan */
.logo-v-gelap, .logo-v-cetak { display: none; }
[data-bs-theme=dark] .logo-v-terang.ada-gelap { display: none; }
[data-bs-theme=dark] .logo-v-gelap { display: inline-block; }
@media print {
    .logo-v-gelap, .logo-v-terang.ada-cetak { display: none !important; }
    .logo-v-cetak, .logo-v-terang:not(.ada-cetak) { display: inline-block !important; }
}
.kode-usaha.ada-logo { width: auto; max-width: 170px; }
.kode-usaha.ada-logo img { width: auto; max-width: 150px; height: 38px; object-fit: contain; }
.kode-usaha-lg.ada-logo img { height: 50px; max-width: 170px; }
.nota-logo { width: auto; height: 56px; max-width: 220px; object-fit: contain; }
.logo-kecil { width: auto; height: 32px; max-width: 120px; object-fit: contain; }
.logo-pratinjau { width: auto; min-width: 72px; max-width: 200px; padding: 6px; }
.logo-pratinjau img { width: auto; height: 58px; max-width: 186px; }
.logo-pratinjau-gelap { background: #111 !important; }
.qr-logo { display: block; max-width: 75%; max-height: 2.4cm; margin: 0 auto .4rem; }
.logo-pratinjau-terang { background: #fff !important; }

/* Pesan cafe dari layar Meja: jendela tersemat (layar_meja/_dialog, layouts/sematan) */
.pesan-sematan { display: block; width: 100%; height: 75vh; border: 0; }
body.sematan { background: var(--bkw-bg, transparent); }
body.sematan .keranjang-ringkas { bottom: 0; }