:root { /* Tema gelap + emas: latar dasarnya nyaris hitam (--bm-bg) dengan panel kartu/navbar/dsb satu tingkat lebih terang (--bm-surface). Emas dipakai sebagai warna aksen (harga, tombol utama, status aktif) di atas latar gelap tadi. --bm-gold: emas utama, dipakai untuk fill solid (tombol, border aktif). --bm-gold-dark: varian emas lebih terang, khusus teks/ikon aksen di atas panel gelap (kebalikan dari versi tema terang sebelumnya, yang perlu emas GELAP di atas latar putih - sekarang latarnya sendiri sudah gelap). --bm-gold-light: sekarang jadi latar panel "aktif/terpilih" - tint emas tipis di atas gelap, dipasangkan dengan teks --bm-gold-dark. */ --bm-bg: #0c0c14; --bm-surface: #16161f; --bm-surface-2: #1e1e2b; --bm-gold: #d4af37; --bm-gold-dark: #e8c467; --bm-gold-light: rgba(212, 175, 55, 0.16); --bm-text: #f2ede1; --bm-muted: #9a97ab; --bm-border: #2a2a3a; /* Teks di atas fill emas SOLID (bukan tint) - emas terlalu terang untuk teks putih tetap kebaca (kontras kurang), jadi tetap pakai teks gelap di sini walau sisa tema sudah gelap semua. */ --bm-on-gold: #171420; } /* Selaraskan komponen Bootstrap bawaan (modal, form, table, offcanvas, dropdown, alert) yang tidak dipegang oleh class .bm-* di atas - cukup timpa variabel warna Bootstrap-nya, strukturnya tetap sama. */ [data-bs-theme="dark"] { --bs-body-bg: var(--bm-bg); --bs-body-bg-rgb: 12, 12, 20; --bs-body-color: var(--bm-text); --bs-body-color-rgb: 242, 237, 225; --bs-secondary-bg: var(--bm-surface); --bs-tertiary-bg: var(--bm-surface-2); --bs-border-color: var(--bm-border); --bs-border-color-translucent: var(--bm-border); --bs-secondary-color: var(--bm-muted); --bs-tertiary-color: var(--bm-muted); --bs-emphasis-color: var(--bm-text); --bs-emphasis-color-rgb: 242, 237, 225; --bs-heading-color: var(--bm-text); --bs-link-color: var(--bm-gold-dark); --bs-link-color-rgb: 232, 196, 103; --bs-link-hover-color: var(--bm-gold); --bs-link-hover-color-rgb: 212, 175, 55; } /* Base type is intentionally larger than usual: everyday users of this system include an elderly person, so legibility beats density. Since Bootstrap sizes almost everything in rem, bumping the root size scales buttons/inputs/spacing too. */ html { font-size: 18px; } /* Note: overflow-x is intentionally NOT set on body here. The success/ data-pelanggan modals on the POS page are direct children of (see views/media/footer.ejs "extraPartial" slot) specifically so mobile browsers render their position:fixed dialogs correctly - giving body its own overflow/scroll box would trap those fixed-position modals again, the same bug that was fixed by moving them out of .bm-content. The guard below on .bm-content (the actual page content area, not shared with the modals) is enough to stop content from pushing the page sideways. */ html { max-width: 100%; overflow-x: hidden; } body { background-color: var(--bm-bg); color: var(--bm-text); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; line-height: 1.55; } /* ---------- Layout ---------- */ .bm-navbar { background: var(--bm-surface); border-bottom: 1px solid var(--bm-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .bm-brand { color: var(--bm-gold-dark) !important; font-weight: 700; letter-spacing: 0.2px; } .bm-navbar-logo { width: 44px; height: 44px; object-fit: contain; } .bm-sidebar { background: var(--bm-surface); border-right: 1px solid var(--bm-border); min-height: calc(100vh - 56px); } .bm-sidebar .nav-link { color: var(--bm-text); border-radius: 8px; padding: 0.75rem 0.9rem; margin-bottom: 4px; font-size: 1rem; font-weight: 500; } .bm-sidebar .nav-link.active, .bm-sidebar .nav-link:hover { background-color: var(--bm-gold-light); color: var(--bm-gold-dark); } .bm-sidebar .nav-link i { width: 20px; display: inline-block; } .bm-content { padding: 1.75rem; max-width: 100%; overflow-x: hidden; } /* ---------- Components ---------- */ .bm-card { background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .bm-stat-card { border-radius: 14px; border: 1px solid var(--bm-border); background: var(--bm-surface); padding: 1.25rem 1.5rem; } .bm-stat-card .bm-stat-label { color: var(--bm-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.4px; } .bm-stat-card .bm-stat-value { font-size: 1.9rem; font-weight: 700; color: var(--bm-text); } .bm-stat-icon { width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 12px; background: var(--bm-gold-light); color: var(--bm-gold-dark); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .btn-bm-primary { /* Gold (di kedua state, normal & hover) selalu terlalu terang untuk teks putih tetap kebaca, jadi tombol ini selalu pakai teks gelap. */ background-color: var(--bm-gold); border-color: var(--bm-gold); color: var(--bm-on-gold); } .btn-bm-primary:hover { background-color: var(--bm-gold-dark); border-color: var(--bm-gold-dark); color: var(--bm-on-gold); } .badge-aktif { background-color: var(--bm-gold-light); color: var(--bm-gold-dark); font-weight: 600; } .badge-nonaktif { background-color: var(--bm-surface-2); color: var(--bm-muted); font-weight: 600; } .table thead th { color: var(--bm-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; border-bottom-width: 1px; } /* Riwayat: kartu transaksi untuk tampilan mobile (pengganti tabel) */ .bm-riwayat-card { display: block; background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: 14px; padding: 1rem; margin-bottom: 0.6rem; color: var(--bm-text); text-decoration: none; } .bm-riwayat-card:hover, .bm-riwayat-card:active { background: var(--bm-gold-light); color: var(--bm-text); } /* Bootstrap's .row is a flex container; its column children default to min-width: auto, so content that resists shrinking (nowrap scrollers, long unbroken text) can force a column - and the whole page - wider instead of staying inside its own row. Force every column in the filter form to actually respect the row's width. */ #filterForm > [class*="col-"] { min-width: 0; } /* ---------- Login ---------- */ .bm-login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #0c0c14 0%, #1c1608 100%); } .bm-login-card { width: 100%; max-width: 420px; border-radius: 16px; background: var(--bm-surface); border: 1px solid var(--bm-border); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.12); } .bm-login-logo { display: block; width: 120px; height: 120px; object-fit: contain; margin: 0 auto 0.75rem; } /* ---------- POS: Transaksi Baru ---------- */ /* Leave room at the bottom for the sticky summary bar on small screens */ .bm-pos-page { padding-bottom: 90px; } @media (min-width: 768px) { .bm-pos-page { padding-bottom: 0; } } .bm-cat-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .bm-cat-scroll::-webkit-scrollbar { display: none; } .bm-cat-chip { flex: 0 0 auto; border: 1px solid var(--bm-border); background: var(--bm-surface); color: var(--bm-text); border-radius: 999px; padding: 0.6rem 1.15rem; font-size: 0.95rem; font-weight: 600; white-space: nowrap; } .bm-cat-chip.active { background: var(--bm-gold); border-color: var(--bm-gold); color: var(--bm-on-gold); } .bm-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 576px) { .bm-service-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 992px) { .bm-service-grid { grid-template-columns: repeat(4, 1fr); } } .bm-service-card { position: relative; border: 2px solid var(--bm-border); border-radius: 14px; background: var(--bm-surface); padding: 1rem; text-align: left; cursor: pointer; min-height: 108px; display: flex; flex-direction: column; justify-content: space-between; -webkit-tap-highlight-color: transparent; } .bm-service-check { position: absolute; top: 8px; right: 8px; color: var(--bm-gold-dark); font-size: 1.3rem; line-height: 1; } .bm-service-card .bm-service-name { font-weight: 700; font-size: 1.02rem; line-height: 1.3; } .bm-service-card .bm-service-meta { color: var(--bm-muted); font-size: 0.85rem; margin-top: 4px; } .bm-service-card .bm-service-price { color: var(--bm-gold-dark); font-weight: 700; font-size: 1.02rem; margin-top: 8px; } .bm-service-card.selected, .bm-service-card.in-cart { border-color: var(--bm-gold); background: var(--bm-gold-light); box-shadow: 0 0 0 2px var(--bm-gold); } .bm-service-card.hidden { display: none; } .bm-service-qty-badge { position: absolute; top: 8px; right: 8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--bm-gold); color: var(--bm-on-gold); font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } /* Keranjang (step 2) - satu baris per produk beda, dengan tombol tambah/ kurang jumlah yang besar supaya gampang dipencet (banyak kasir lansia). */ .bm-cart-line { border: 1px solid var(--bm-border); border-radius: 12px; padding: 0.85rem; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .bm-cart-line + .bm-cart-line { margin-top: 10px; } .bm-cart-line-info { min-width: 0; } .bm-cart-line-name { font-weight: 700; font-size: 1rem; line-height: 1.3; } .bm-cart-line-meta { color: var(--bm-muted); font-size: 0.85rem; margin-top: 2px; } .bm-cart-line-price { color: var(--bm-gold-dark); font-weight: 700; margin-top: 4px; } .bm-qty-stepper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .bm-qty-btn { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--bm-border); background: var(--bm-surface-2); color: var(--bm-text); font-weight: 700; font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .bm-qty-btn:active { background: var(--bm-gold-light); border-color: var(--bm-gold); } .bm-qty-value { min-width: 26px; text-align: center; font-weight: 700; font-size: 1.1rem; } /* Ikon SVG inline (bukan emoji/font icon) - ukuran ngikut font-size tombol supaya seragam di tombol kecil maupun btn-lg, stroke tebal biar jelas kebaca di layar kecil. */ .bm-icon { width: 1.2em; height: 1.2em; vertical-align: -0.2em; flex-shrink: 0; } .bm-pay-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .bm-pay-btn { border: 2px solid var(--bm-border); background: var(--bm-surface); border-radius: 12px; padding: 0.9rem 0.5rem; font-weight: 700; font-size: 1rem; color: var(--bm-text); text-align: center; } .bm-pay-btn.active { border-color: var(--bm-gold); background: var(--bm-gold-light); color: var(--bm-gold-dark); } .bm-sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bm-surface); border-top: 1px solid var(--bm-border); padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3); z-index: 1030; } @media (min-width: 768px) { .bm-sticky-bar { position: static; box-shadow: none; border-top: none; padding: 0; margin-top: 1.25rem; } } /* On phones, lock the POS screen to exactly one viewport: navbar stays put, only the content area (service grid etc.) scrolls, the summary/save bar stays glued to the bottom. Nothing gets pushed off-screen or clipped by the browser's address bar. Desktop keeps the normal page layout. */ @media (max-width: 767.98px) { body.bm-pos-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } body.bm-pos-body .bm-navbar { flex: 0 0 auto; } body.bm-pos-body > .d-flex { flex: 1 1 auto; min-height: 0; } body.bm-pos-body .bm-content { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ---------- Flatpickr (date range picker di Riwayat) - restyle ke tema gelap + emas, bawaannya putih terang jadi tidak nyambung kalau dibiarkan. ---------- */ .flatpickr-calendar { background: var(--bm-surface); border: 1px solid var(--bm-border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--bm-surface); } .flatpickr-months .flatpickr-month { background: var(--bm-surface); color: var(--bm-text); fill: var(--bm-text); } .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--bm-surface); color: var(--bm-text); } .flatpickr-current-month input.cur-year { color: var(--bm-text); } .flatpickr-weekdays { background: var(--bm-surface); } span.flatpickr-weekday { background: var(--bm-surface); color: var(--bm-muted); } .flatpickr-prev-month, .flatpickr-next-month { fill: var(--bm-muted); color: var(--bm-muted); } .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--bm-gold); } .flatpickr-day { color: var(--bm-text); } .flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--bm-muted); opacity: 0.5; } .flatpickr-day:hover { background: var(--bm-surface-2); border-color: var(--bm-surface-2); } .flatpickr-day.today { border-color: var(--bm-gold); } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--bm-gold); border-color: var(--bm-gold); color: var(--bm-on-gold); } .flatpickr-day.inRange { background: var(--bm-gold-light); border-color: var(--bm-gold-light); box-shadow: -5px 0 0 var(--bm-gold-light), 5px 0 0 var(--bm-gold-light); } /* Plugin monthSelect (dipakai di "Bulan Tertentu" ekspor Laporan) - grid bulannya bukan bagian dari .flatpickr-day, jadi butuh override sendiri. */ .flatpickr-monthSelect-months { background: var(--bm-surface); } .flatpickr-monthSelect-month { color: var(--bm-text); } .flatpickr-monthSelect-month.flatpickr-disabled { color: var(--bm-muted); } .flatpickr-monthSelect-month:hover { background: var(--bm-gold-light); color: var(--bm-gold-dark); } .flatpickr-monthSelect-month.selected { background: var(--bm-gold); color: var(--bm-on-gold); } /* ---------- Panel Filter Riwayat: offcanvas kanan, sama di mobile & desktop ---------- */ .bm-filter-offcanvas { width: 360px; max-width: 92vw; } /* Chip "Pilihan Cepat" di panel filter ini sengaja TURUN BARIS (wrap), bukan scroll horizontal seperti .bm-cat-scroll biasanya (dipakai di halaman POS yang ruangnya sempit) - di panel ini ruang vertikalnya luas, dan scroll horizontal tanpa petunjuk visual bikin chip yang tidak muat kelihatan seperti kepotong/hilang padahal cuma perlu di-scroll. */ #filterPanel .bm-cat-scroll { flex-wrap: wrap; overflow-x: visible; } /* ---------- Pagination Riwayat - warna aktif ikut aksen emas, bukan biru bawaan Bootstrap ---------- */ .pagination .page-link { background: var(--bm-surface); border-color: var(--bm-border); color: var(--bm-text); } .pagination .page-link:hover { background: var(--bm-surface-2); border-color: var(--bm-border); color: var(--bm-text); } .pagination .page-item.active .page-link { background: var(--bm-gold); border-color: var(--bm-gold); color: var(--bm-on-gold); } .pagination .page-item.disabled .page-link { background: var(--bm-surface); border-color: var(--bm-border); color: var(--bm-muted); }