/*
 * 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:      #0d7a5f;
    --c-primary-h:    #095c47;
    --c-primary-s:    #e4f5f0;
    --c-primary-b:    #b7e4d6;
    --c-accent:       #ff6b35;
    --c-accent-h:     #e8551f;
    --c-accent-s:     #ffe9de;
    --c-success:      #16a34a;
    --c-success-s:    #e6f7ec;
    --c-danger:       #e0393e;
    --c-danger-s:     #fdeaea;
    --c-warning:      #d97706;
    --c-warning-s:    #fef3c7;

    --c-bg:           #f1f6f3;
    --c-surface:      #ffffff;
    --c-surface-2:    #eaf1ed;
    --c-border:       #dbe5df;
    --c-border-2:     #ecf2ef;

    --c-text:         #12241e;
    --c-text-2:       #52655d;
    --c-text-3:       #8fa199;

    --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; }
}