/*
 * RLUM Kasir POS — Modern Redesign v1
 * File: assets/css/rlum-pos-modern.css
 *
 * PRINSIP: Override ADDITIVE murni di atas pos.css.
 * TIDAK mengubah satupun class/ID yang dipakai pos.js / rlum-pos-ui.js.
 * Muat file ini SETELAH pos.css (lihat catatan enqueue di 9-kasir-pos.php).
 *
 * Identitas: "kasir toko fashion" — hijau tua (uang/kasir) + aksen jingga
 * (price-tag), Space Grotesk untuk angka & judul, signature: panel keranjang
 * bergaya struk kasir (tepi berlubang + leader titik-titik di ringkasan).
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ════════════════════════════════════════════
   1. TOKEN OVERRIDE
════════════════════════════════════════════ */
#rlum-pos-wrap {
    --c-primary:      #1265D8;
    --c-primary-h:    #0B4FAE;
    --c-primary-s:    #EAF3FF;
    --c-primary-b:    #BBD7FF;
    --c-accent:       #1265D8;
    --c-accent-h:     #0B4FAE;
    --c-accent-s:     #EAF3FF;
    --c-success:      #16a34a;
    --c-success-s:    #e6f7ec;
    --c-danger:       #e0393e;
    --c-danger-s:     #fdeaea;
    --c-warning:      #d97706;
    --c-warning-s:    #fef3c7;

    --c-bg:           #F4F8FD;
    --c-surface:      #ffffff;
    --c-surface-2:    #F0F5FB;
    --c-border:       #D9E5F3;
    --c-border-2:     #EAF0F7;

    --c-text:         #10233F;
    --c-text-2:       #536987;
    --c-text-3:       #8EA2BC;

    --c-radius:       18px;
    --c-radius-md:    12px;
    --c-radius-sm:    9px;
    --c-shadow-sm:    0 1px 2px rgba(18,36,30,.05);
    --c-shadow:       0 6px 16px -4px rgba(18,36,30,.10);
    --c-shadow-lg:    0 20px 40px -8px rgba(18,36,30,.22);

    --c-font-display: 'Space Grotesk', var(--c-font);
}

#rlum-pos-wrap.dark-mode {
    --c-bg:        #0c1714;
    --c-surface:   #16241f;
    --c-surface-2: #1c2b25;
    --c-border:    #2a3a33;
    --c-border-2:  #223129;
    --c-text:      #eaf3ee;
    --c-text-2:    #9db3a9;
    --c-text-3:    #62766d;
    --c-primary-s: #143229;
    --c-success-s: #123527;
    --c-accent-s:  #3a2013;
}

/* ════════════════════════════════════════════
   2. TIPOGRAFI ANGKA & JUDUL
════════════════════════════════════════════ */
#rlum-pos-wrap .pos-title,
#rlum-pos-wrap .pos-quick-title,
#rlum-pos-wrap .pos-products-section-title,
#rlum-pos-wrap .pos-cart-title,
#rlum-pos-wrap .pos-stat-num,
#rlum-pos-wrap .pos-stat-chip-val,
#rlum-pos-wrap .pos-produk-price,
#rlum-pos-wrap .pos-grand-total,
#rlum-pos-wrap .pos-total-row span,
#rlum-pos-wrap .pos-trx-total,
#rlum-pos-wrap .pos-lpr-card-val {
    font-family: var(--c-font-display);
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -.01em;
}

/* ════════════════════════════════════════════
   3. HEADER — pita gelap instrumen kasir
════════════════════════════════════════════ */
#rlum-pos-wrap .pos-header {
    background: linear-gradient(100deg, #0e1f19 0%, #123a2c 55%, #0d7a5f 130%);
    border-bottom: none;
    box-shadow: 0 2px 12px rgba(13,122,95,.25);
}
#rlum-pos-wrap .pos-title { color: #ffffff; font-weight: 700; }
#rlum-pos-wrap .pos-subtitle { color: rgba(255,255,255,.6); }
#rlum-pos-wrap .pos-icon-btn {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.85); backdrop-filter: blur(6px);
}
#rlum-pos-wrap .pos-icon-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
#rlum-pos-wrap .pos-logout-btn { background: rgba(255,107,53,.16); color: #ffb08d; border-color: rgba(255,107,53,.3); }
#rlum-pos-wrap .pos-logout-btn:hover { background: var(--c-accent); color: #fff; }

/* ── Tabbar tetap surface terang di bawah pita gelap ── */
#rlum-pos-wrap .pos-tabbar { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
#rlum-pos-wrap .pos-tab-btn.active { color: var(--c-primary); border-bottom-color: var(--c-accent); }
#rlum-pos-wrap .pos-stat-chip-icon { background: var(--c-primary-s); color: var(--c-primary); }

/* ════════════════════════════════════════════
   4. TOOLBAR & FILTER
════════════════════════════════════════════ */
#rlum-pos-wrap .pos-search-wrap:focus-within,
#rlum-pos-wrap .pos-cat-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-s); }
#rlum-pos-wrap .pos-scan-btn { border-color: var(--c-primary); color: var(--c-primary); }
#rlum-pos-wrap .pos-scan-btn:hover { background: var(--c-primary-s); }

#rlum-pos-wrap .pos-filter-pill:hover { border-color: var(--c-primary); color: var(--c-primary); }
#rlum-pos-wrap .pos-filter-pill.active {
    background: var(--c-primary); border-color: var(--c-primary); color: #fff;
    box-shadow: 0 4px 10px -2px rgba(13,122,95,.4);
}

/* ════════════════════════════════════════════
   5. KARTU PRODUK — sudut "gantungan harga"
════════════════════════════════════════════ */
#rlum-pos-wrap .pos-produk-card {
    border-radius: var(--c-radius-md);
    box-shadow: var(--c-shadow-sm);
}
#rlum-pos-wrap .pos-produk-card:hover {
    border-color: var(--c-primary-b);
    box-shadow: var(--c-shadow);
    transform: translateY(-3px);
}
/* Notch price-tag di pojok kanan-atas gambar */
#rlum-pos-wrap .pos-produk-img-wrap { background: var(--c-surface-2); }
#rlum-pos-wrap .pos-produk-img-wrap::after {
    content: '';
    position: absolute; top: 8px; right: 8px;
    width: 18px; height: 18px;
    background: var(--c-accent);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    border-radius: 0 4px 0 0;
    opacity: .9;
}
#pos-produk-grid.list-view .pos-produk-img-wrap::after { display: none; }
#rlum-pos-wrap .pos-produk-price { color: var(--c-primary); font-weight: 700; }
#rlum-pos-wrap .pos-stock-badge.low { color: var(--c-accent); }
#rlum-pos-wrap .pos-produk-add-btn {
    border-color: var(--c-primary-b); color: var(--c-primary); border-radius: 8px;
}
#rlum-pos-wrap .pos-produk-add-btn:hover:not(:disabled) { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* Panel "Transaksi Baru" */
#rlum-pos-wrap .pos-quick-panel,
#rlum-pos-wrap .pos-produk-section,
#rlum-pos-wrap .pos-stat-item {
    border-radius: var(--c-radius);
    border-color: var(--c-border-2);
}
#rlum-pos-wrap .pos-scan-box { background: var(--c-surface-2); border-color: #b7e4d6; }
#rlum-pos-wrap .pos-scan-box:hover { border-color: var(--c-primary); }
#rlum-pos-wrap .pos-pilih-btn { background: var(--c-primary); box-shadow: 0 4px 12px rgba(13,122,95,.25); }
#rlum-pos-wrap .pos-pilih-btn:hover { background: var(--c-primary-h); }
#rlum-pos-wrap .pos-btn-add { background: var(--c-primary-s); color: var(--c-primary); border-color: var(--c-primary-b); }
#rlum-pos-wrap .pos-btn-add:hover { background: var(--c-primary); border-color: var(--c-primary); }

#rlum-pos-wrap .pos-stat-icon-wrap.blue   { background: var(--c-primary-s); color: var(--c-primary); }
#rlum-pos-wrap .pos-stat-icon-wrap.orange { background: var(--c-accent-s); color: var(--c-accent-h); }

/* ════════════════════════════════════════════
   6. SIGNATURE — KERANJANG BERGAYA STRUK KASIR
════════════════════════════════════════════ */
#rlum-pos-wrap .pos-cart {
    border-left: 1px solid var(--c-border);
    position: relative;
}
#rlum-pos-wrap .pos-cart-header {
    border-bottom: none;
    background: var(--c-surface);
}
#rlum-pos-wrap .pos-cart-title { font-family: var(--c-font-display); }
#rlum-pos-wrap .pos-cart-count { background: var(--c-accent); }

#rlum-pos-wrap .pos-customer-section { background: var(--c-surface-2); border-bottom: 1px dashed var(--c-border); }
#rlum-pos-wrap .pos-item-row { border-bottom: 1px dashed var(--c-border-2); }
#rlum-pos-wrap .pos-item-row:hover { background: var(--c-surface-2); }
#rlum-pos-wrap .pos-qty-btn:hover { background: var(--c-primary); border-color: var(--c-primary); }
#rlum-pos-wrap .pos-item-del:hover { color: var(--c-danger); background: var(--c-danger-s); }

/* Ringkasan total ala struk: leader titik-titik antara label & angka */
#rlum-pos-wrap .pos-cart-footer { border-top: 2px dashed var(--c-border); }
#rlum-pos-wrap .pos-total-row {
    font-family: var(--c-font-display);
    position: relative;
}
#rlum-pos-wrap .pos-total-label {
    display: flex; align-items: flex-end;
}
#rlum-pos-wrap .pos-total-label::after {
    content: '';
    flex: 1;
    margin: 0 6px 3px;
    border-bottom: 1px dotted var(--c-text-3);
}
#rlum-pos-wrap .pos-grand-total {
    border-top: 2px dashed var(--c-border);
    position: relative;
}
#rlum-pos-wrap .pos-grand-total span:last-child { color: var(--c-accent-h); font-size: 21px; }

/* Diskon input & payment chips */
#rlum-pos-wrap .pos-disc-toggle-btn { color: var(--c-primary); }
#rlum-pos-wrap .pos-disc-input-wrap:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-s); }
#rlum-pos-wrap .pos-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-s); }

#rlum-pos-wrap .pos-pay-method:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-s); }
#rlum-pos-wrap .pos-pay-method.selected {
    border-color: var(--c-primary); background: var(--c-primary-s); color: var(--c-primary);
    box-shadow: 0 0 0 2px var(--c-primary-b);
}
#rlum-pos-wrap .pos-kembali-box { background: var(--c-success-s); border-color: #bfe8cd; color: #0f7a37; }

/* Tombol aksi utama: Simpan Draf (netral) vs Bayar (jingga, aksi utama) */
#rlum-pos-wrap .pos-btn-save { background: var(--c-surface-2); color: var(--c-primary); border: 1px solid var(--c-border); }
#rlum-pos-wrap .pos-btn-save:hover { background: var(--c-primary-s); border-color: var(--c-primary-b); }
#rlum-pos-wrap #pos-btn-bayar {
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-h));
    box-shadow: 0 6px 16px -2px rgba(255,107,53,.45);
}
#rlum-pos-wrap #pos-btn-bayar:not(:disabled):hover {
    background: linear-gradient(135deg, var(--c-accent-h), #c8451a);
    box-shadow: 0 8px 20px -2px rgba(255,107,53,.55);
}
#rlum-pos-wrap #pos-btn-bayar:disabled { background: var(--c-text-3); }

/* ════════════════════════════════════════════
   7. RIWAYAT, LAPORAN, MODAL — sentuhan warna & font
════════════════════════════════════════════ */
#rlum-pos-wrap .pos-riwayat-summary { background: var(--c-primary-s); border-color: var(--c-primary-b); }
#rlum-pos-wrap .pos-riwayat-card:hover { border-color: var(--c-primary-b); }
#rlum-pos-wrap .pos-trx-total { color: var(--c-primary); }
#rlum-pos-wrap .pos-metode { background: var(--c-primary-s); color: var(--c-primary); }
#rlum-pos-wrap .pos-void-btn:hover { background: var(--c-danger); border-color: var(--c-danger); }

#rlum-pos-wrap .pos-lpr-card { background: var(--c-primary-s); border-color: var(--c-primary-b); }
#rlum-pos-wrap .pos-lpr-card-val { color: var(--c-primary); }
#rlum-pos-wrap .pos-chart-bar { background: linear-gradient(180deg, #4fd8ab, var(--c-primary)); }

#rlum-pos-wrap .pos-struk { border-color: var(--c-text-3); background: var(--c-surface-2); font-family: 'Space Mono', 'Courier New', monospace; }
#rlum-pos-wrap .pos-struk-total { color: var(--c-accent-h); }

#rlum-pos-wrap .rlum-pos-toast.info { background: var(--c-primary); }
#rlum-pos-wrap #rlum-pos-toast-container .rlum-pos-toast { font-family: var(--c-font); }

/* ════════════════════════════════════════════
   8. AKSESIBILITAS — focus ring & reduced motion
════════════════════════════════════════════ */
#rlum-pos-wrap button:focus-visible,
#rlum-pos-wrap select:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}
#rlum-pos-wrap input:focus-visible {
    outline: none;
}
@media (prefers-reduced-motion: reduce) {
    #rlum-pos-wrap * { transition: none !important; animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   PHASE POS UI 1 — RLUM BLUE RESPONSIVE MODERNIZATION (v1.0.8)
   ADDITIVE UI-ONLY OVERRIDES.
   No AJAX endpoint, database query, transaction math, stock logic,
   payment flow, element ID, or JS event contract is changed here.
═══════════════════════════════════════════════════════════════ */

#rlum-pos-wrap {
    --c-radius: 20px;
    --c-radius-md: 14px;
    --c-shadow: 0 10px 30px rgba(25,72,125,.08);
    --c-shadow-lg: 0 24px 60px rgba(25,72,125,.16);
    background:
        radial-gradient(circle at 0 0, rgba(18,101,216,.06), transparent 28rem),
        var(--c-bg);
}

#rlum-pos-wrap .pos-header {
    min-height: 72px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 1px 0 rgba(18,101,216,.08);
    backdrop-filter: blur(12px);
}
#rlum-pos-wrap .pos-title { color:#0D2B55; letter-spacing:-.02em; }
#rlum-pos-wrap .pos-tabbar {
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 22px rgba(31,72,120,.04);
}
#rlum-pos-wrap .pos-tab-btn.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}
#rlum-pos-wrap .pos-stat-chip-icon {
    border-radius: 12px;
    background: var(--c-primary-s);
    color: var(--c-primary);
}

/* Main workspace */
#rlum-pos-wrap .pos-products { padding: 20px; gap: 16px; }
#rlum-pos-wrap .pos-products-toolbar,
#rlum-pos-wrap .pos-manual-slim,
#rlum-pos-wrap .pos-produk-section,
#rlum-pos-wrap .pos-cart {
    border:1px solid var(--c-border);
    box-shadow: var(--c-shadow);
}
#rlum-pos-wrap .pos-products-toolbar {
    background:#fff; padding:12px; border-radius:16px;
}
#rlum-pos-wrap .pos-search-wrap {
    height:52px; border-radius:14px; box-shadow:none;
}
#rlum-pos-wrap .pos-search-wrap:focus-within {
    border-color:var(--c-primary);
    box-shadow:0 0 0 4px rgba(18,101,216,.10);
}
#rlum-pos-wrap .pos-manual-slim {
    background:#fff; border-radius:16px; padding:10px;
}
#rlum-pos-wrap .pos-btn-add {
    background:var(--c-primary); color:#fff; border-color:var(--c-primary);
    min-height:42px; border-radius:12px; box-shadow:0 8px 18px rgba(18,101,216,.18);
}
#rlum-pos-wrap .pos-btn-add:hover { background:var(--c-primary-h); }

/* Desktop/laptop: visual product cards like the approved prototype.
   Existing list-view class remains in DOM/JS; CSS only changes presentation. */
@media (min-width: 1025px) {
    #rlum-pos-wrap #pos-produk-grid.list-view {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap:14px;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-card {
        flex-direction:column; align-items:stretch; padding:0; min-width:0;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-img-wrap {
        width:100%; height:auto; aspect-ratio:16/10; border-radius:14px 14px 0 0;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-body {
        padding:12px 12px 6px;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-name {
        font-size:13px;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-card-footer {
        padding:6px 12px 12px; gap:8px;
    }
}
#rlum-pos-wrap .pos-produk-section { padding:18px; }
#rlum-pos-wrap .pos-produk-card {
    border-radius:15px; border-color:#E1EAF5;
    box-shadow:0 4px 16px rgba(24,68,117,.05);
}
#rlum-pos-wrap .pos-produk-card:hover {
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(18,101,216,.12);
}
#rlum-pos-wrap .pos-produk-img { mix-blend-mode:normal; }
#rlum-pos-wrap .pos-produk-price { color:#0B63D8; font-size:15px; }
#rlum-pos-wrap .pos-produk-add-btn {
    width:34px; height:34px; border-radius:10px;
    background:var(--c-primary); color:#fff; border-color:var(--c-primary);
}
#rlum-pos-wrap .pos-produk-add-btn:hover:not(:disabled) {
    background:var(--c-primary-h); color:#fff;
}
#rlum-pos-wrap .pos-show-more { background:var(--c-primary-s); color:var(--c-primary); }

/* Cart becomes a strong modern checkout panel */
#rlum-pos-wrap .pos-cart {
    margin:20px 20px 20px 0;
    border-radius:20px;
    border-left:1px solid var(--c-border);
    background:#fff;
}
#rlum-pos-wrap .pos-cart-header {
    padding:20px; border-bottom:1px solid var(--c-border); background:#fff;
}
#rlum-pos-wrap .pos-cart-title { color:#0D2B55; font-size:18px; }
#rlum-pos-wrap .pos-cart-count { background:var(--c-primary); }
#rlum-pos-wrap .pos-cart-footer { padding:18px; }
#rlum-pos-wrap .pos-grand-total { border-top:1px dashed #C7D7EA; }
#rlum-pos-wrap .pos-grand-total span:last-child { color:var(--c-primary); font-size:23px; }
#rlum-pos-wrap .pos-pay-method.selected {
    background:var(--c-primary-s); border-color:var(--c-primary); color:var(--c-primary);
}
#rlum-pos-wrap #pos-btn-bayar {
    background:linear-gradient(135deg,#1265D8,#084EA9);
    box-shadow:0 10px 22px rgba(18,101,216,.25);
}
#rlum-pos-wrap #pos-btn-bayar:not(:disabled):hover {
    background:linear-gradient(135deg,#0B58C1,#063F8C);
    box-shadow:0 12px 26px rgba(18,101,216,.30);
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1180px) {
    #rlum-pos-wrap .pos-products { padding:14px; }
    #rlum-pos-wrap .pos-layout {
        display:grid; grid-template-columns:minmax(0,1fr) 320px; overflow:hidden;
    }
    #rlum-pos-wrap .pos-cart {
        margin:14px 14px 14px 0; border-top:1px solid var(--c-border);
    }
    #rlum-pos-wrap #pos-produk-grid.list-view {
        grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-card {
        flex-direction:column; align-items:stretch; padding:0;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-img-wrap {
        width:100%; height:auto; aspect-ratio:16/10;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-body { padding:10px 10px 4px; }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-card-footer { padding:5px 10px 10px; gap:6px; }
    #rlum-pos-wrap .pos-manual-slim { flex-wrap:wrap; }
}

/* Mobile / small portrait tablet */
@media (max-width: 768px) {
    #rlum-pos-wrap { min-height:100dvh; }
    #rlum-pos-wrap .pos-header {
        height:auto; min-height:60px; padding:10px 12px;
        position:sticky; top:0;
    }
    #rlum-pos-wrap .pos-title { font-size:18px; }
    #rlum-pos-wrap .pos-subtitle { display:none; }
    #rlum-pos-wrap .pos-header-actions { gap:6px; }
    #rlum-pos-wrap .pos-icon-btn { width:36px; height:36px; border-radius:10px; }
    #rlum-pos-wrap .pos-tabbar {
        top:60px; height:auto; min-height:52px; padding:0 10px; overflow-x:auto;
    }
    #rlum-pos-wrap .pos-tabbar-tabs { gap:12px; min-width:max-content; }
    #rlum-pos-wrap .pos-tab-btn { font-size:12px; min-height:52px; }
    #rlum-pos-wrap .pos-layout { display:flex; flex-direction:column; overflow:visible; }
    #rlum-pos-wrap .pos-products { padding:10px; gap:10px; overflow:visible; }
    #rlum-pos-wrap .pos-products-toolbar { padding:8px; }
    #rlum-pos-wrap .pos-search-wrap { height:46px; }
    #rlum-pos-wrap .pos-manual-slim {
        display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px;
    }
    #rlum-pos-wrap .pos-manual-slim-ico { display:none; }
    #rlum-pos-wrap .pos-manual-slim #pos-manual-name { grid-column:1/-1; }
    #rlum-pos-wrap .pos-manual-slim .pos-btn-add { grid-column:1/-1; width:100%; }
    #rlum-pos-wrap .pos-produk-section { padding:10px; border-radius:16px; }
    #rlum-pos-wrap .pos-products-scroll-area { overflow:visible; }
    #rlum-pos-wrap #pos-produk-grid.list-view {
        grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-card {
        flex-direction:column; align-items:stretch; padding:0;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-img-wrap {
        width:100%; height:auto; aspect-ratio:1/1;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-body { padding:9px 9px 3px; }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-name {
        font-size:12px; white-space:normal; line-height:1.25; min-height:30px;
    }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-price { font-size:13px; }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-card-footer {
        padding:5px 9px 9px; gap:4px;
    }
    #rlum-pos-wrap .pos-stock-badge { font-size:10px; }
    #rlum-pos-wrap .pos-produk-add-btn { width:32px; height:32px; }
    #rlum-pos-wrap .pos-cart {
        margin:10px; border-radius:16px; border:1px solid var(--c-border);
        min-height:360px;
    }
    #rlum-pos-wrap .pos-cart-header { padding:15px; }
    #rlum-pos-wrap .pos-cart-footer { padding:14px; }
    #rlum-pos-wrap .pos-payment-methods { grid-template-columns:repeat(2,1fr); }
    #rlum-pos-wrap .pos-btn-save,
    #rlum-pos-wrap #pos-btn-bayar { min-height:48px; border-radius:13px; }
}

/* Very small phones: keep cards readable, never force horizontal scrolling. */
@media (max-width: 390px) {
    #rlum-pos-wrap #pos-produk-grid.list-view { gap:7px; }
    #rlum-pos-wrap .pos-products { padding:7px; }
    #rlum-pos-wrap .pos-produk-section { padding:8px; }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-body { padding:7px 7px 2px; }
    #rlum-pos-wrap #pos-produk-grid.list-view .pos-produk-card-footer { padding:4px 7px 7px; }
}

/* Focus & touch accessibility */
#rlum-pos-wrap button,
#rlum-pos-wrap input,
#rlum-pos-wrap select { -webkit-tap-highlight-color:transparent; }
#rlum-pos-wrap button:focus-visible,
#rlum-pos-wrap input:focus-visible,
#rlum-pos-wrap select:focus-visible {
    outline:3px solid rgba(18,101,216,.24);
    outline-offset:2px;
}

/* Phase 10A — Barcode scanner foundation */
.pos-toolbar-row-1{gap:8px;flex-wrap:wrap}.pos-barcode-input{min-width:220px;flex:1}.pos-barcode-focus-btn{white-space:nowrap}.pos-produk-card.pos-barcode-hit{outline:3px solid currentColor;outline-offset:2px;transform:translateY(-2px)}
@media(max-width:700px){.pos-barcode-input{min-width:100%;width:100%}.pos-barcode-focus-btn{width:100%}}


/* Phase 10B — Barcode manager, camera scanner & printable labels */
.pos-barcode-manager{padding:24px}.pos-barcode-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}.pos-barcode-head h2{margin:0 0 5px;font-size:20px}.pos-barcode-head p{margin:0;color:#64748b;font-size:13px}.pos-barcode-list{display:flex;flex-direction:column;gap:10px}.pos-barcode-row{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(190px,1fr) auto auto auto;gap:8px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px}.pos-barcode-product{display:flex;flex-direction:column;gap:3px}.pos-barcode-product small{color:#94a3b8}.pos-barcode-print-btn{background:#0f172a!important}.pos-camera-box{max-width:560px!important}.pos-camera-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.pos-camera-title button{border:0;background:transparent;font-size:20px;cursor:pointer}.pos-camera-box video{width:100%;min-height:260px;max-height:65vh;background:#0f172a;border-radius:12px;object-fit:cover}.pos-camera-box #pos-barcode-camera-msg{text-align:center;color:#64748b;font-size:12px;margin-top:10px}
@media(max-width:800px){.pos-barcode-manager{padding:14px}.pos-barcode-row{grid-template-columns:1fr 1fr}.pos-barcode-product,.pos-barcode-code{grid-column:1/-1}.pos-barcode-row .pos-btn-add{width:100%;padding-left:8px;padding-right:8px}.pos-barcode-print-btn{grid-column:1/-1}}

/* Phase 10B Fix v1.0.14 — keep search/barcode controls inside left POS column */
@media (min-width:701px) and (max-width:1180px){
  #rlum-pos-wrap .pos-toolbar-row-1{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
  #rlum-pos-wrap .pos-toolbar-row-1 .pos-search:first-child{grid-column:1/-1;width:100%!important;max-width:none!important}
  #rlum-pos-wrap .pos-barcode-input{min-width:0!important;width:100%!important}
  #rlum-pos-wrap .pos-barcode-focus-btn{max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
#pos-tab-barcode.active{width:100%;min-width:0}


/* Phase 10B-3: navigation and responsive layout only */
#rlum-pos-wrap { min-width: 0 !important; max-width: 100% !important; }
#rlum-pos-wrap .pos-tabbar { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
#rlum-pos-wrap .pos-tabbar-tabs { min-width: max-content !important; flex: 0 0 auto !important; gap: 8px !important; }
#rlum-pos-wrap .pos-tab-btn { flex: 0 0 auto !important; white-space: nowrap !important; min-width: max-content !important; padding: 0 12px !important; cursor: pointer !important; pointer-events: auto !important; touch-action: manipulation !important; }
#rlum-pos-wrap .pos-tab-btn[data-tab="barcode"] { color: #175db4 !important; }
#rlum-pos-wrap .pos-tab-btn.active { color: #1766d3 !important; }
#rlum-pos-wrap .pos-tab-content.active { min-width: 0 !important; }
@media (max-width: 900px) {
 #rlum-pos-wrap .pos-tabbar { padding: 0 8px !important; }
 #rlum-pos-wrap .pos-tabbar-tabs { gap: 2px !important; }
 #rlum-pos-wrap .pos-tab-btn { padding: 0 10px !important; font-size: 13px !important; }
 #rlum-pos-wrap .pos-kasir-grid, #rlum-pos-wrap .pos-kasir-layout { min-width: 0 !important; }
}

/* Phase 10B-4: isolate scanner button from inputs; preserve all existing JS IDs. */
#rlum-pos-wrap .pos-toolbar-phase10b4 { min-width:0; width:100%; box-sizing:border-box; gap:10px; }
#rlum-pos-wrap .pos-search-heading { display:block; font-size:14px; font-weight:700; color:#17365d; }
#rlum-pos-wrap .pos-scan-toolbar { display:flex!important; flex-wrap:nowrap!important; align-items:stretch!important; gap:10px!important; min-width:0; width:100%; }
#rlum-pos-wrap .pos-scan-toolbar .pos-search-primary { flex:1 1 0!important; min-width:0!important; width:auto!important; height:auto!important; min-height:46px!important; box-sizing:border-box; padding:0 12px; }
#rlum-pos-wrap .pos-scan-toolbar #pos-search-produk { width:100%!important; min-width:0!important; max-width:100%!important; box-sizing:border-box; }
#rlum-pos-wrap .pos-scan-toolbar .pos-barcode-focus-btn { position:static!important; flex:0 0 auto!important; display:inline-flex!important; align-items:center; justify-content:center; width:auto!important; min-width:145px; max-width:none!important; height:auto; min-height:46px; padding:10px 16px!important; white-space:nowrap; overflow:visible!important; text-overflow:clip!important; box-sizing:border-box; cursor:pointer; }
#rlum-pos-wrap .pos-barcode-manual-row { display:flex; flex-direction:column; gap:6px; width:100%; min-width:0; }
#rlum-pos-wrap .pos-barcode-manual-row label { font-size:12px; color:#65748b; }
#rlum-pos-wrap .pos-barcode-manual-row #pos-barcode-input { display:block!important; flex:none!important; width:100%!important; min-width:0!important; max-width:100%!important; height:44px!important; padding:9px 12px!important; border:1px solid #dce4ee!important; border-radius:10px!important; background:#fff!important; box-sizing:border-box!important; }
@media(max-width:700px) {
 #rlum-pos-wrap .pos-scan-toolbar { flex-direction:column!important; }
 #rlum-pos-wrap .pos-scan-toolbar .pos-search-primary { width:100%!important; flex:0 0 auto!important; min-height:46px!important; }
 #rlum-pos-wrap .pos-scan-toolbar .pos-barcode-focus-btn { width:100%!important; min-width:0!important; min-height:46px!important; }
}

/* Phase 10B-5: scoped responsive form; overrides legacy five-column rules. */
#rlum-pos-wrap .pos-manual-slim.pos-manual-phase10b5 { display:flex!important; flex-direction:column!important; flex-wrap:nowrap!important; align-items:stretch!important; gap:12px!important; width:100%!important; max-width:100%!important; min-width:0!important; padding:16px!important; box-sizing:border-box!important; grid-template-columns:none!important; }
#rlum-pos-wrap .pos-manual-phase10b5 .pos-manual-heading { display:flex; align-items:center; gap:10px; color:#17365d; min-width:0; }
#rlum-pos-wrap .pos-manual-phase10b5 .pos-manual-heading strong { display:block; font-size:15px; }
#rlum-pos-wrap .pos-manual-phase10b5 .pos-manual-heading small { display:block; font-size:12px; color:#64748b; margin-top:3px; }
#rlum-pos-wrap .pos-manual-phase10b5 .pos-manual-field { display:flex!important; flex-direction:column!important; gap:6px!important; min-width:0!important; width:100%!important; max-width:none!important; margin:0!important; font-size:12px; font-weight:600; color:#334155; }
#rlum-pos-wrap .pos-manual-phase10b5 .pos-manual-prices { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:12px!important; min-width:0!important; width:100%!important; }
#rlum-pos-wrap .pos-manual-phase10b5 input.pos-input, #rlum-pos-wrap .pos-manual-phase10b5 input#pos-manual-name, #rlum-pos-wrap .pos-manual-phase10b5 input.pos-manual-price-input { display:block!important; width:100%!important; min-width:0!important; max-width:none!important; height:44px!important; box-sizing:border-box!important; margin:0!important; padding:8px 12px!important; flex:none!important; grid-column:auto!important; }
#rlum-pos-wrap .pos-manual-phase10b5 .pos-btn-add { display:block!important; width:100%!important; min-width:0!important; max-width:none!important; height:44px!important; grid-column:auto!important; margin:0!important; padding:8px 12px!important; box-sizing:border-box!important; cursor:pointer; }
@media(max-width:600px){#rlum-pos-wrap .pos-manual-phase10b5 .pos-manual-prices { grid-template-columns:minmax(0,1fr)!important; }}