/* =========================================================
   POS Minimarket
   Palet: kertas #F6F7F4, tinta #1C2321, hijau kasir #0E6B4F,
   hijau layar #0B3B2E, kuning rak #E0A526, garis #DDE2DC
   ========================================================= */
:root {
    --paper: #F6F7F4;
    --ink: #1C2321;
    --muted: #5D6B66;
    --line: #DDE2DC;
    --green: #0E6B4F;
    --green-dark: #0A5540;
    --screen: #0B3B2E;
    --screen-text: #D8F3E6;
    --amber: #E0A526;
    --white: #FFFFFF;

    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --bs-primary: var(--green);
    --bs-primary-rgb: 14, 107, 79;
    --bs-link-color: var(--green);
    --bs-link-color-rgb: 14, 107, 79;
    --bs-link-hover-color: var(--green-dark);
    --bs-border-color: var(--line);
}

body { font-size: .925rem; }
.money, .display-total, .stat strong, .pay-total strong, .change-row strong, .success-change strong { font-variant-numeric: tabular-nums; }
.barcode-text { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.btn-primary { --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green); --bs-btn-hover-bg: var(--green-dark); --bs-btn-hover-border-color: var(--green-dark); --bs-btn-active-bg: var(--green-dark); --bs-btn-disabled-bg: var(--green); --bs-btn-disabled-border-color: var(--green); }
.btn-outline-primary { --bs-btn-color: var(--green); --bs-btn-border-color: var(--green); --bs-btn-hover-bg: var(--green); --bs-btn-hover-border-color: var(--green); --bs-btn-active-bg: var(--green); --bs-btn-active-border-color: var(--green); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--green); box-shadow: 0 0 0 .2rem rgba(14, 107, 79, .18); }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.page-item.active .page-link { background: var(--green); border-color: var(--green); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.badge-amber { background: #FBEFD0; color: #7A5200; }
kbd { background: rgba(0, 0, 0, .12); color: inherit; font-size: .72em; padding: .1em .4em; border-radius: 3px; font-family: inherit; }

/* ---------- Kerangka ---------- */
.app { display: flex; min-height: 100vh; }
/* Sidebar. Catatan: Bootstrap 5.3 memberi .offcanvas-lg "background-color: transparent !important"
   di layar lebar, jadi warna latar harus ditegaskan dengan selector yang lebih spesifik. */
.app .sidebar,
.app .sidebar.offcanvas-lg { background-color: var(--screen) !important; color: #FFFFFF; }
.sidebar { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; }
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; } }
.offcanvas-lg.sidebar { --bs-offcanvas-width: 270px; --bs-offcanvas-bg: var(--screen); --bs-offcanvas-color: #FFFFFF; }

.sidebar-brand, .auth-brand { display: flex; align-items: center; gap: .7rem; padding: 1.25rem 1.1rem; }
.sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .12); margin-bottom: .75rem; }
.sidebar-brand strong, .auth-brand strong { display: block; font-weight: 700; line-height: 1.2; font-size: 1rem; }
.sidebar-brand small, .auth-brand small { color: #B9DCCB; font-size: .8rem; }
.brand-mark { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--amber); color: var(--screen); font-size: 1.2rem; flex-shrink: 0; }

.sidebar-nav { flex: 1; padding: 0 .75rem; overflow-y: auto; }
.sidebar-nav a {
    position: relative; display: flex; align-items: center; gap: .8rem;
    padding: .7rem .85rem; margin-bottom: 2px; border-radius: 6px;
    color: #E6F4EC; text-decoration: none; font-size: .95rem; font-weight: 500;
}
.sidebar-nav a .bi { font-size: 1.15rem; width: 1.3rem; text-align: center; color: #9FD3BA; }
.sidebar-nav a:hover { background: rgba(255, 255, 255, .10); color: #FFFFFF; }
.sidebar-nav a:hover .bi { color: #FFFFFF; }
.sidebar-nav a.active { background: #FFFFFF; color: var(--screen); font-weight: 700; }
.sidebar-nav a.active .bi { color: var(--green); }
.sidebar-nav a:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

.sidebar-nav a.nav-pos { background: var(--amber); color: var(--screen); font-weight: 700; font-size: 1rem; margin-bottom: .5rem; }
.sidebar-nav a.nav-pos .bi { color: var(--screen); }
.sidebar-nav a.nav-pos:hover { background: #EDB53A; }
.sidebar-nav a.nav-pos.active { box-shadow: inset 0 0 0 2px #FFFFFF; }

.nav-group {
    font-size: .8rem; font-weight: 600; color: #B9DCCB;
    padding: 1.1rem .85rem .4rem; margin-top: .4rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-user { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.1rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.sidebar-user strong { display: block; font-size: .9rem; }
.sidebar-user small { color: #B9DCCB; font-size: .78rem; }

.main { flex: 1; min-width: 0; padding: 1.25rem 1.75rem 2.5rem; }
.main-full { padding: 1rem 1.25rem; }
.topbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.topbar h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.topbar-clock { margin-left: auto; color: var(--muted); font-size: .85rem; }
.main-full .topbar { margin-bottom: .75rem; }

/* ---------- Komponen umum ---------- */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 1.1rem 1.25rem; }
.panel.p-0 { overflow: hidden; }
.panel h2 { font-size: 1rem; font-weight: 700; margin-bottom: .9rem; }
.panel .table > :not(caption) > * > * { padding-left: 1rem; padding-right: 1rem; }
.table thead th { font-size: .78rem; font-weight: 600; color: var(--muted); background: #FAFBF9; border-bottom-color: var(--line); }
.empty { color: var(--muted); text-align: center; padding: 1.5rem 1rem !important; margin: 0; }
.form-narrow { max-width: 760px; }

.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.toolbar-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.toolbar-filters .input-group { width: 320px; max-width: 100%; }
.toolbar-filters .form-select, .toolbar-filters input[type="date"] { width: auto; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.stat span { color: var(--muted); font-size: .82rem; }
.stat strong { font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.stat small { color: var(--muted); font-size: .78rem; }
.stat-primary { background: var(--screen); border-color: var(--screen); color: var(--screen-text); }
.stat-primary span, .stat-primary small { color: var(--screen-text); opacity: .75; }
.stat-grid-sm .stat strong { font-size: 1.15rem; }

.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.list-rank { padding-left: 1.2rem; margin: 0; }
.list-rank li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.list-rank li span { display: inline-block; width: calc(100% - 110px); }
.list-rank li strong { float: right; font-weight: 600; font-size: .85rem; }

.totals { margin: 0; }
.totals > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.totals dt { font-weight: 500; color: var(--muted); }
.totals dd { margin: 0; font-weight: 600; text-align: right; }
.totals-strong dt, .totals-strong dd { color: var(--ink); font-size: 1.1rem; font-weight: 700; }

/* ---------- Halaman login ---------- */
.auth-body { min-height: 100vh; display: grid; place-items: center; background: var(--screen); padding: 1rem; }
.auth-card { width: 100%; max-width: 400px; background: var(--white); border-radius: 10px; padding: 0 1.75rem 1.75rem; }
.auth-brand { padding: 1.5rem 0 1rem; }
.auth-brand small { color: var(--muted); opacity: 1; }
.auth-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }

/* ---------- Kolom scan ---------- */
.scan-bar { position: relative; display: flex; align-items: center; gap: .75rem; background: var(--white); border: 2px solid var(--green); border-radius: 8px; padding: .35rem 1rem; }
.scan-bar > .bi { font-size: 1.5rem; color: var(--green); }
.scan-input { flex: 1; border: 0; outline: 0; font-size: 1.25rem; font-weight: 600; padding: .5rem 0; min-width: 0; background: transparent; }
.scan-input::placeholder { font-weight: 400; color: #9AA59F; }
.scan-bar:focus-within { box-shadow: 0 0 0 .25rem rgba(14, 107, 79, .15); }
.scan-tip { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.scan-bar-sm .scan-input { font-size: 1.05rem; }

.search-results { position: absolute; left: -2px; right: -2px; top: calc(100% + 4px); z-index: 20; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 28px rgba(28, 35, 33, .14); max-height: 380px; overflow-y: auto; }
.search-item { display: flex; justify-content: space-between; gap: 1rem; width: 100%; padding: .6rem 1rem; border: 0; background: none; text-align: left; border-bottom: 1px solid var(--line); }
.search-item small { display: block; color: var(--muted); font-size: .76rem; }
.search-item.active, .search-item:hover { background: #E8F3EE; }
.search-item:disabled { opacity: .45; }

/* ---------- Halaman kasir ---------- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; height: calc(100vh - 5.5rem); }
.pos-left { display: flex; flex-direction: column; gap: .75rem; min-height: 0; }
.cart { flex: 1; background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow-y: auto; min-height: 0; }
.cart thead th { position: sticky; top: 0; z-index: 1; }
.cart td, .cart th { padding: .6rem .9rem; }
.cart-empty { text-align: center; color: var(--muted); padding: 4rem 1rem; }
.cart-empty .bi { font-size: 3rem; opacity: .35; }
.qty-control { display: flex; align-items: center; justify-content: center; gap: .25rem; }
.qty-control .form-control { width: 58px; text-align: center; padding: .3rem; -moz-appearance: textfield; }
.qty-control .form-control::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-control .btn { width: 32px; padding: .3rem 0; font-weight: 700; }
@keyframes rowFlash { from { background: #FBEFD0; } to { background: transparent; } }
.row-flash > td { animation: rowFlash 1.2s ease-out; }

.pos-right { display: flex; flex-direction: column; gap: .75rem; }
.display { background: var(--screen); color: var(--screen-text); border-radius: 8px; padding: 1.1rem 1.25rem 1rem; }
.display-label { font-size: .85rem; opacity: .75; }
.display-total { display: block; font-size: clamp(2rem, 3.3vw, 2.9rem); font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: -.01em; margin: .15rem 0 .5rem; overflow-wrap: anywhere; }
.display-last { font-size: .85rem; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: .5rem; min-height: 1.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.display-last.is-error { color: #FFD27A; font-weight: 600; }

.pos-right .totals { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: .25rem 1rem; }
.pos-right .totals > div:last-child { border-bottom: 0; }
.discount-group { width: 150px; }
.btn-pay { font-size: 1.25rem; font-weight: 700; padding: .9rem; }
.btn-pay kbd { background: rgba(255, 255, 255, .2); }
.shortcut-help { display: flex; flex-wrap: wrap; gap: .4rem .9rem; color: var(--muted); font-size: .78rem; margin-top: auto; }

@media (max-width: 991.98px) {
    .pos { grid-template-columns: 1fr; height: auto; }
    .cart { min-height: 280px; }
    .scan-tip, .shortcut-help { display: none; }
}

/* ---------- Modal pembayaran ---------- */
.pay-total { display: flex; justify-content: space-between; align-items: baseline; background: var(--screen); color: var(--screen-text); border-radius: 8px; padding: .8rem 1rem; margin-bottom: 1rem; }
.pay-total strong { font-size: 1.9rem; font-weight: 800; color: #fff; }
.method-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.method-tabs .btn { font-weight: 600; }
.quick-cash { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.quick-cash .btn { font-size: .85rem; }
.change-row, .success-change { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); padding-top: .75rem; }
.change-row strong { font-size: 1.6rem; font-weight: 800; }
.pay-success { text-align: center; padding: 2rem 1.5rem 1.75rem; }
.pay-success > .bi { font-size: 3rem; color: var(--green); }
.success-change { max-width: 300px; margin: 1rem auto 0; }
.success-change strong { font-size: 2rem; font-weight: 800; color: var(--green); }
.print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }

@media (prefers-reduced-motion: reduce) {
    .row-flash > td { animation: none; }
    .modal.fade .modal-dialog { transition: none; }
}

/* ---------- Scanner HP (layar komputer) ---------- */
.remote-status { display: inline-flex; align-items: center; gap: .35rem; }
.remote-dot { width: 8px; height: 8px; border-radius: 50%; background: #9AA59F; display: inline-block; }
.remote-dot.on { background: #22A06B; box-shadow: 0 0 0 3px rgba(34, 160, 107, .2); }
.remote-qr { display: grid; place-items: center; padding: .75rem; background: #fff; border: 1px solid var(--line); border-radius: 8px; width: fit-content; margin: 0 auto; }
.remote-code { font-size: 2rem; font-weight: 800; letter-spacing: .25em; text-align: center; color: var(--screen); margin: .75rem 0 .25rem; font-variant-numeric: tabular-nums; }
.remote-url { font-size: .8rem; color: var(--muted); text-align: center; word-break: break-all; }


/* ---------- Pelanggan di halaman kasir ---------- */
.customer-bar { display: flex; align-items: center; gap: .6rem; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .75rem; }
.customer-bar > .bi { font-size: 1.3rem; color: var(--muted); }
.customer-bar.has-customer { border-color: var(--green); background: #F1F8F4; }
.customer-bar.has-customer > .bi { color: var(--green); }
.customer-info { flex: 1; min-width: 0; }
.customer-info strong { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-info small { display: block; font-size: .76rem; color: var(--muted); }
.customer-results { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.customer-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: .65rem .9rem; border: 0; border-bottom: 1px solid var(--line); background: var(--white); text-align: left; }
.customer-item:last-child { border-bottom: 0; }
.customer-item:hover, .customer-item:focus { background: #E8F3EE; }
.customer-item small { display: block; color: var(--muted); font-size: .78rem; }
.customer-item span.text-end { font-size: .85rem; font-weight: 600; }
.credit-customer { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; background: #F1F8F4; border: 1px solid #CFE6DA; border-radius: 6px; padding: .55rem .75rem; font-size: .88rem; }
.method-tabs { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 420px) { .method-tabs { grid-template-columns: repeat(2, 1fr); } }

/* Transaksi tertunda */
.held-list { list-style: none; margin: 0; padding: 0; }
.held-list li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.held-list li:last-child { border-bottom: 0; }
.held-list li small { display: block; color: var(--muted); font-size: .8rem; }

/* Hutang / piutang */
.debt-box { background: #F1F8F4; border: 1px solid #CFE6DA; border-radius: 8px; padding: .85rem 1rem; }
.debt-box span, .debt-box small { display: block; color: var(--muted); font-size: .82rem; }
.debt-box strong { display: block; font-size: 1.6rem; font-weight: 800; color: var(--green); }
.debt-box.has-debt { background: #FDF3F2; border-color: #F5C9C4; }
.debt-box.has-debt strong { color: #B42318; }
.stat-link { text-decoration: none; color: inherit; }
.stat-link:hover { border-color: var(--green); color: inherit; }

@media print {
    .sidebar, .topbar .btn, .toolbar, .d-print-none { display: none !important; }
    .main { padding: 0; }
    .panel { border: 0; }
}

/* ---------- Logo toko ---------- */
.brand-mark.brand-logo { background: #fff; padding: 3px; overflow: hidden; }
.brand-mark.brand-logo img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.brand-mark-lg { width: 72px; height: 72px; font-size: 2rem; border-radius: 12px; }
.logo-field { display: flex; align-items: flex-start; gap: 1rem; }
.receipt-preview { width: 58mm; max-width: 100%; margin: 0 auto; background: #fff; border: 1px dashed #BFC8C2; padding: 4mm 3mm;
                   font: 11px/1.4 "Courier New", monospace; color: #000; text-align: center; }
.receipt-preview img { display: block; max-width: 20mm; max-height: 10mm; width: auto; height: auto; margin: 0 auto 2mm; filter: grayscale(1) contrast(1.4); }
.receipt-preview img[data-size="medium"] { max-width: 28mm; max-height: 14mm; }
.receipt-preview img[data-size="large"] { max-width: 36mm; max-height: 18mm; }
.receipt-preview strong { display: block; font-size: 13px; }
.receipt-preview hr { border: 0; border-top: 1px dashed #000; margin: 4px 0; opacity: 1; }
.receipt-preview .rp-row { display: flex; justify-content: space-between; text-align: left; }

/* Pembayaran: uang kurang & hutang */
.short-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
             background: #FBEFD0; border: 1px solid #EFD48B; border-radius: 6px; padding: .55rem .75rem; margin-top: .75rem; color: #6B4800; }
.credit-results { max-height: 220px; overflow-y: auto; }
.credit-customer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.credit-customer > div { display: flex; flex-direction: column; }
.credit-customer > div span { font-size: .82rem; color: var(--muted); }

/* ---------- HP & tablet (juga saat dibuka dari aplikasi terpasang/PWA) ---------- */
@media (max-width: 991.98px) {
    /* Di iPhone (mode aplikasi) konten berada di bawah status bar/notch: beri jarak aman */
    .main { padding: calc(.85rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
    .sidebar .sidebar-brand { padding-top: calc(1rem + env(safe-area-inset-top)); }
    .sidebar .sidebar-user { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
    .topbar h1 { font-size: 1.15rem; }
    .topbar .btn { flex-shrink: 0; }
}
@media (max-width: 575.98px) {
    .topbar-clock { display: none; }
}
/* iPhone memperbesar layar otomatis jika huruf kolom isian < 16px. Cegah di perangkat sentuh. */
@media (pointer: coarse) {
    input.form-control, select.form-select, textarea.form-control,
    .input-group-sm > .form-control, .form-control-sm, .form-select-sm { font-size: 16px; }
}

/* ---------- Pulsa & token ---------- */
.pulsa-balance { background: var(--screen); color: #fff; border-radius: 10px; padding: .9rem 1rem; }
.pulsa-balance span, .pulsa-balance small { display: block; color: #B9DCCB; font-size: .8rem; }
.pulsa-balance strong { display: block; font-size: 1.7rem; font-weight: 800; margin: .1rem 0; }
.pulsa-balance.is-low { background: #7A2E0E; }
.pulsa-balance.is-low span, .pulsa-balance.is-low small { color: #FBD9C5; }
.pp-target { font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; text-align: center; }
.pp-ops { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.pp-ops .btn { border-radius: 999px; font-size: .85rem; padding: .3rem .8rem; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.pp-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: .65rem .75rem;
                  border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pp-grid button:hover, .pp-grid button:focus-visible { border-color: var(--green); background: #F1F8F4; }
.pp-grid button span { font-weight: 600; font-size: .9rem; }
.pp-grid button strong { color: var(--green); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pp-detect { font-size: .82rem; color: var(--muted); text-align: center; min-height: 1.2em; margin-top: .35rem; }
.pp-detect.is-error { color: #B42318; }
.item-target { display: block; font-family: "Courier New", monospace; font-weight: 700; font-size: .82rem; color: var(--green); }
.pp-group { grid-column: 1 / -1; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: .5rem 0 0; }
.pp-grid button:disabled { opacity: .5; }
.pp-auto { font-size: .7rem; color: var(--muted); }
.pulsa-result { list-style: none; padding: 0; margin: .75rem 0 0; text-align: left; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pulsa-result li { padding: .55rem .8rem; border-bottom: 1px solid var(--line); font-size: .88rem; }
.pulsa-result li:last-child { border-bottom: 0; }
.pulsa-result li strong { display: block; }
.pulsa-result li .sn { font-family: "Courier New", monospace; font-weight: 700; word-break: break-all; user-select: all; }
.pulsa-result li[data-status="sukses"] { background: #F1F8F4; }
.pulsa-result li[data-status="pending"] { background: #FFF8E6; }
.pulsa-result li[data-status="gagal"] { background: #FDF3F2; }
.pulsa-result .st { font-weight: 700; font-size: .8rem; }
.pulsa-result li[data-status="sukses"] .st { color: var(--green); }
.pulsa-result li[data-status="pending"] .st { color: #8A5D00; }
.pulsa-result li[data-status="gagal"] .st { color: #B42318; }

/* ---------- Mode layar penuh kasir (kiosk) ---------- */
.kiosk-exit { position: fixed; top: calc(.4rem + env(safe-area-inset-top)); right: .4rem; z-index: 1060; width: 34px; height: 34px;
              border-radius: 50%; border: 0; background: rgba(0, 0, 0, .35); color: #fff; display: grid; place-items: center;
              font-size: .95rem; opacity: .55; }
.kiosk-exit:hover, .kiosk-exit:focus-visible { opacity: 1; }
.kiosk-exit[hidden] { display: none; }
.reg-body .kiosk-exit { display: none; } /* layar kasir komputer sudah punya tombol di header */

/* Layar sentuh (tablet/HP): ketukan cepat tidak memperbesar layar, tidak ada jeda 300 ms */
button, a, label, .btn, input, select, .reg-table tr, .mk-cart li { touch-action: manipulation; }

/* Dialog di dalam halaman (pengganti confirm/alert agar layar penuh tidak tertutup) */
.dlg-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 22, 19, .55); display: grid; place-items: center; padding: 1rem; }
.dlg { background: #fff; border-radius: 12px; padding: 1.1rem 1.1rem .9rem; width: min(420px, 100%); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.dlg-title { display: block; font-size: 1.05rem; margin-bottom: .35rem; }
.dlg-msg { margin: 0 0 1rem; font-size: 1rem; white-space: pre-line; }
.dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.dlg-actions .btn { min-width: 96px; min-height: 42px; }
/* Ajakan kembali ke layar penuh setelah browser keluar sendiri (mis. dialog cetak) */
.kiosk-resume { position: fixed; inset: 0; z-index: 1990; background: rgba(11, 59, 46, .92); color: #fff; display: grid; place-items: center;
                text-align: center; padding: 1.5rem; border: 0; width: 100%; font-size: 1.15rem; font-weight: 700; }
.kiosk-resume .bi { display: block; font-size: 2.6rem; margin-bottom: .5rem; }
.kiosk-resume small { display: block; font-weight: 500; font-size: .85rem; opacity: .8; margin-top: .35rem; }
.kiosk-resume[hidden] { display: none; }
.js-error { position: fixed; left: .5rem; right: .5rem; top: calc(.5rem + env(safe-area-inset-top)); z-index: 2100; background: #B42318; color: #fff;
            border-radius: 8px; padding: .6rem .8rem; font-size: .85rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }

/* ---------- Ikon kategori barang (dashboard) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.cat-grid-compact { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
.cat-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: .8rem .5rem .7rem;
            background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; min-width: 0; }
a.cat-tile:hover, a.cat-tile:focus-visible { border-color: var(--green); box-shadow: 0 4px 14px rgba(14, 107, 79, .12); color: var(--ink); }
.cat-icon { position: relative; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: .3rem;
            background: var(--cat-bg); color: var(--cat-fg); }
.cat-tile strong { font-size: .9rem; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-tile small { font-size: .75rem; color: var(--muted); }
.cat-tile .cat-sold { color: var(--green); font-weight: 600; }
.cat-badge { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #D92D20;
             color: #fff; font-size: .7rem; font-style: normal; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.cat-grid-compact .cat-tile { padding: .6rem .3rem .5rem; border-radius: 10px; }
.cat-grid-compact .cat-icon { width: 42px; height: 42px; font-size: 1.3rem; border-radius: 12px; }
.cat-grid-compact .cat-tile strong { font-size: .78rem; }
.cat-grid-compact .cat-tile small { font-size: .68rem; }
.cat-c0 { --cat-bg: #E1EFE7; --cat-fg: #0E6B4F; }
.cat-c1 { --cat-bg: #FDEFD3; --cat-fg: #A15C07; }
.cat-c2 { --cat-bg: #E3EEFB; --cat-fg: #1D5FAD; }
.cat-c3 { --cat-bg: #FCE7EC; --cat-fg: #B42350; }
.cat-c4 { --cat-bg: #EEE8FB; --cat-fg: #5B3CC4; }
.cat-c5 { --cat-bg: #DFF4F4; --cat-fg: #0F7272; }
.cat-c6 { --cat-bg: #FBEBE2; --cat-fg: #B5471B; }
.cat-c7 { --cat-bg: #ECEFE3; --cat-fg: #56661E; }
/* Pilihan ikon di form kategori */
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .35rem; }
.icon-pick label { display: grid; place-items: center; height: 46px; border: 1px solid var(--line); border-radius: 10px; font-size: 1.25rem; cursor: pointer; color: var(--ink); }
.icon-pick input:checked + label { border-color: var(--green); background: #E1EFE7; color: var(--green); box-shadow: 0 0 0 2px rgba(14, 107, 79, .25); }
.icon-pick input:focus-visible + label { outline: 2px solid var(--green); outline-offset: 2px; }
.cat-icon.cat-inline { display: inline-grid; width: 30px; height: 30px; font-size: 1rem; border-radius: 8px; margin: 0 .4rem 0 0; vertical-align: middle; }