/* ============================================
   POS Receipt System - Crystal Light Theme
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Lao+Looped:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #f0f2f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9ff;
    --bg-input: #f5f6fa;
    --accent: #5b5fc7;
    --accent-light: #7b7fd7;
    --accent-glow: rgba(91,95,199,0.12);
    --accent-gradient: linear-gradient(135deg, #5b5fc7, #8b5cf6);
    --success: #10b981;
    --success-bg: rgba(16,185,129,0.1);
    --warning: #f59e0b;
    --danger: #ef4444;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-accent: rgba(91,95,199,0.25);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
    --shadow-accent: 0 4px 14px rgba(91,95,199,0.18);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --nav-height: 60px;
    --bottom-nav-height: 66px;
    --font-lao: 'Noto Sans Lao Looped', sans-serif;
    --font-en: 'Inter', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:15px; scroll-behavior:smooth; }

body {
    font-family: var(--font-lao), var(--font-en);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: calc(var(--bottom-nav-height) + 20px);
}

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--accent-light); border-radius:4px; }

/* ---- Top Header ---- */
.top-header {
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:var(--nav-height);
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; padding:0 16px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.top-header .logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.top-header .logo-icon {
    width:36px; height:36px; border-radius:var(--radius-sm);
    background:var(--accent-gradient);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; color:#fff;
    box-shadow: var(--shadow-accent);
}
.top-header .logo-text { font-size:1.05rem; font-weight:700; color:var(--text-primary); }
.top-header .header-actions { margin-left:auto; display:flex; gap:8px; }
.top-header .header-actions a {
    width:36px; height:36px; border-radius:var(--radius-sm);
    background:var(--bg-input); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-secondary); text-decoration:none; font-size:.95rem;
    transition:all .2s;
}
.top-header .header-actions a:hover,
.top-header .header-actions a.active {
    background:var(--accent-gradient); color:#fff; border-color:transparent;
    box-shadow:var(--shadow-accent);
}

/* ---- Bottom Navigation ---- */
.bottom-nav {
    position:fixed; bottom:0; left:0; right:0; z-index:100;
    height:var(--bottom-nav-height);
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-around;
    padding:0 8px; padding-bottom:env(safe-area-inset-bottom,0);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}
.bottom-nav a {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-decoration:none; color:var(--text-muted); font-size:.62rem;
    padding:6px 12px; border-radius:var(--radius-sm); transition:all .2s;
    min-width:54px; gap:3px; font-weight:500;
}
.bottom-nav a i { font-size:1.15rem; }
.bottom-nav a.active { color:var(--accent); }
.bottom-nav a.active { background:var(--accent-glow); }
.bottom-nav .fab-create {
    width:50px; height:50px; border-radius:50%;
    background:var(--accent-gradient);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.3rem; margin-top:-18px;
    box-shadow:var(--shadow-accent);
    transition:transform .2s;
}
.bottom-nav .fab-create:hover { transform:scale(1.1); }

/* ---- Main Content ---- */
.main-content {
    padding-top:calc(var(--nav-height) + 12px);
    padding-left:16px; padding-right:16px;
    max-width:600px; margin:0 auto;
}

/* ---- Page Title ---- */
.page-title {
    font-size:1.35rem; font-weight:700; margin-bottom:16px;
    display:flex; align-items:center; gap:10px;
    color:var(--text-primary);
}
.page-title i { color:var(--accent); }

/* ---- Cards ---- */
.card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px; margin-bottom:12px;
    box-shadow:var(--shadow-sm);
    transition:all .25s;
}
.card:hover { box-shadow:var(--shadow); border-color:var(--border-accent); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.card-header h3 { font-size:1rem; font-weight:600; display:flex; align-items:center; gap:8px; color:var(--text-primary); }
.card-header h3 i { color:var(--accent); font-size:.9rem; }

/* ---- Buttons ---- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 20px; border-radius:var(--radius-sm); border:none;
    font-family:var(--font-lao); font-size:.88rem; font-weight:600;
    cursor:pointer; transition:all .2s; text-decoration:none;
    min-height:44px;
}
.btn-primary {
    background:var(--accent-gradient); color:#fff;
    box-shadow:var(--shadow-accent);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(91,95,199,0.25); }
.btn-primary:active { transform:scale(0.97); }
.btn-success { background:linear-gradient(135deg,var(--success),#059669); color:#fff; }
.btn-success:hover { box-shadow:0 4px 14px rgba(16,185,129,0.25); }
.btn-danger { background:linear-gradient(135deg,var(--danger),#dc2626); color:#fff; }
.btn-ghost {
    background:var(--bg-input); color:var(--text-primary);
    border:1px solid var(--border);
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); background:#f0f0ff; }
.btn-sm { padding:7px 14px; font-size:.8rem; min-height:34px; border-radius:var(--radius-xs); }
.btn-block { width:100%; }
.btn-group { display:flex; gap:8px; flex-wrap:wrap; }

/* ---- Inputs ---- */
.form-group { margin-bottom:14px; }
.form-group label {
    display:block; font-size:.8rem; color:var(--text-secondary);
    margin-bottom:6px; font-weight:500;
}
.form-control {
    width:100%; padding:11px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--border); background:var(--bg-input);
    color:var(--text-primary); font-family:var(--font-lao);
    font-size:.88rem; transition:all .2s; outline:none;
}
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); background:#fff; }
.form-control::placeholder { color:var(--text-muted); }
select.form-control { appearance:none; cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }

/* ---- Search Box ---- */
.search-box { position:relative; margin-bottom:14px; }
.search-box input {
    width:100%; padding:11px 14px 11px 40px;
    border-radius:50px; border:1px solid var(--border);
    background:var(--bg-card); color:var(--text-primary);
    font-family:var(--font-lao); font-size:.88rem;
    transition:all .2s; outline:none;
    box-shadow:var(--shadow-sm);
}
.search-box input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.search-box i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:.88rem; }

/* ---- Category Tabs ---- */
.cat-tabs {
    display:flex; gap:8px; overflow-x:auto; padding-bottom:8px;
    margin-bottom:14px; scrollbar-width:none;
}
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
    flex-shrink:0; padding:8px 16px; border-radius:50px;
    background:var(--bg-card); border:1px solid var(--border);
    color:var(--text-secondary); font-size:.78rem; font-weight:500;
    cursor:pointer; transition:all .2s; white-space:nowrap;
    font-family:var(--font-lao); display:flex; align-items:center; gap:6px;
    box-shadow:var(--shadow-sm);
}
.cat-tab:hover { border-color:var(--accent); color:var(--accent); }
.cat-tab.active {
    background:var(--accent-gradient); color:#fff; border-color:transparent;
    box-shadow:var(--shadow-accent);
}

/* ---- Product Grid ---- */
.product-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
    margin-bottom:16px;
}
.product-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:14px 8px;
    text-align:center; cursor:pointer; transition:all .2s;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    box-shadow:var(--shadow-sm);
}
.product-card:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px); }
.product-card:active { transform:scale(0.96); }
.product-card .p-icon {
    width:42px; height:42px; border-radius:var(--radius-xs);
    background:linear-gradient(135deg, #ede9fe, #e0e7ff);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; color:var(--accent); margin-bottom:2px;
}
.product-card .p-name { font-size:.95rem; font-weight:600; line-height:1.25; color:var(--text-primary); margin-bottom: 2px; }
.product-card .p-price { font-size:.85rem; color:var(--success); font-weight:700; }

/* ---- Cart ---- */
.cart-section { margin-bottom:14px; }
.cart-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 0; border-bottom:1px solid var(--border);
}
.cart-item:last-child { border-bottom:none; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-size:.85rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-price { font-size:.73rem; color:var(--text-muted); }
.cart-item-total { font-size:.85rem; font-weight:700; color:var(--success); white-space:nowrap; }
.cart-qty {
    display:flex; align-items:center;
    border:1px solid var(--border); border-radius:var(--radius-xs); overflow:hidden;
}
.cart-qty button {
    width:30px; height:30px; border:none; background:var(--bg-input);
    color:var(--text-primary); cursor:pointer; font-size:.85rem;
    display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.cart-qty button:hover { background:var(--accent); color:#fff; }
.cart-qty span { width:30px; text-align:center; font-size:.83rem; font-weight:600; background:#fff; line-height:30px; }
.cart-empty { text-align:center; padding:28px; color:var(--text-muted); font-size:.85rem; }
.cart-empty i { font-size:2rem; display:block; margin-bottom:10px; opacity:.4; }

/* ---- Summary ---- */
.summary-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0; font-size:.85rem;
}
.summary-row.total {
    font-size:1.1rem; font-weight:700; color:var(--accent);
    border-top:2px solid var(--border); padding-top:10px; margin-top:6px;
}

/* ---- Payment ---- */
.payment-methods { display:flex; gap:8px; margin-bottom:14px; }
.pay-method {
    flex:1; padding:12px 8px; border-radius:var(--radius-sm);
    background:var(--bg-input); border:2px solid var(--border);
    text-align:center; cursor:pointer; transition:all .2s;
    font-family:var(--font-lao); font-size:.8rem; color:var(--text-secondary);
}
.pay-method i { display:block; font-size:1.2rem; margin-bottom:4px; }
.pay-method.active, .pay-method:hover {
    border-color:var(--accent); color:var(--accent); background:var(--accent-glow);
}

/* ---- Receipt ---- */
.receipt-wrapper { display:flex; justify-content:center; padding:16px 0; }
.receipt {
    background:#fff; color:#1a1a1a; width:100%; max-width:320px;
    padding:20px 16px; font-size:13px; line-height:1.5;
    font-family:'Noto Sans Lao Looped','Courier New',monospace;
    box-shadow:var(--shadow-lg); border-radius:4px;
}
.receipt.w58 { max-width:220px; font-size:11px; padding:14px 10px; }
.receipt-logo { text-align:center; margin-bottom:8px; }
.receipt-logo img { max-height:50px; max-width:120px; }
.receipt-store { text-align:center; margin-bottom:10px; }
.receipt-store .store-name { font-size:1.3em; font-weight:700; margin-bottom:4px; }
.receipt-store p { font-size:.9em; color:#333; margin:2px 0; }
.receipt-title { font-weight:700; font-size:1.6em; margin-top:6px !important; }

.receipt-divider-dashed { border:none; border-top:2px dashed #000; margin:10px 0; }
.receipt-divider-solid { border:none; border-top:1px solid #000; margin:10px 0; }

.receipt-info { margin-bottom:10px; }
.receipt-info p { display:flex; justify-content:flex-start; font-size:.9em; margin:4px 0; font-weight:500; }
.receipt-info p span:first-child { font-weight:700; margin-right:5px; }

.receipt-table.modern { width:100%; border-collapse:collapse; margin:10px 0; }
.receipt-table.modern th { text-align:left; font-size:.85em; border-bottom:1px solid #000; border-top:1px solid #000; padding:6px 0; color:#000; font-weight:700; }
.receipt-table.modern th:last-child, .receipt-table.modern td:last-child { text-align:right; }
.receipt-table.modern td { padding:6px 0; font-size:.9em; vertical-align:top; border-bottom:1px dotted #ccc; }

.receipt-summary.modern-summary { margin-top:10px; }
.receipt-summary.modern-summary p { display:flex; justify-content:space-between; font-size:.95em; margin:4px 0; }

.receipt-grand-total { display:flex; justify-content:space-between; align-items:center; font-size:1.2em; font-weight:700; margin:10px 0; }

.receipt-note-box {
    background:#f4f4f4; border:1px solid #ddd; border-radius:6px;
    padding:10px; text-align:center; font-size:1.05em; font-weight:500; margin:15px 0;
}

.receipt-qr-large { text-align:center; margin:15px 0; }
.receipt-qr-large img { max-width:180px; width:100%; border-radius:8px; display:inline-block; }

.receipt-footer-text { text-align:center; font-size:1.05em; color:#444; margin-top:15px; }
.receipt-footer-text p { margin:2px 0; font-weight: 500; }

/* ---- Invoice List ---- */
.invoice-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); padding:14px; margin-bottom:10px;
    cursor:pointer; transition:all .2s; text-decoration:none; display:block; color:inherit;
    box-shadow:var(--shadow-sm);
}
.invoice-card:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.invoice-card .inv-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.invoice-card .inv-number { font-weight:600; font-size:.88rem; color:var(--accent); }
.invoice-card .inv-date { font-size:.73rem; color:var(--text-muted); }
.invoice-card .inv-bottom { display:flex; justify-content:space-between; align-items:center; }
.invoice-card .inv-customer { font-size:.8rem; color:var(--text-secondary); }
.invoice-card .inv-total { font-size:1rem; font-weight:700; color:var(--success); }
.invoice-card .inv-voided { color:var(--danger); text-decoration:line-through; }
.inv-status { padding:3px 8px; border-radius:50px; font-size:.63rem; font-weight:600; }
.inv-status.completed { background:var(--success-bg); color:var(--success); }
.inv-status.voided { background:rgba(239,68,68,0.1); color:var(--danger); }

/* ---- Filter Tabs ---- */
.filter-tabs { display:flex; gap:6px; margin-bottom:14px; overflow-x:auto; scrollbar-width:none; }
.filter-tabs::-webkit-scrollbar { display:none; }
.filter-tab {
    flex-shrink:0; padding:7px 14px; border-radius:50px;
    background:var(--bg-card); border:1px solid var(--border);
    color:var(--text-secondary); font-size:.78rem; cursor:pointer;
    transition:all .2s; font-family:var(--font-lao); white-space:nowrap;
    text-decoration:none; box-shadow:var(--shadow-sm);
}
.filter-tab.active, .filter-tab:hover {
    background:var(--accent-gradient); color:#fff; border-color:transparent;
    box-shadow:var(--shadow-accent);
}

/* ---- Stats ---- */
.stats-row { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.stat-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:14px; text-align:center;
    box-shadow:var(--shadow-sm);
}
.stat-card .stat-value { font-size:1.25rem; font-weight:700; color:var(--accent); }
.stat-card .stat-label { font-size:.72rem; color:var(--text-muted); margin-top:2px; }

/* ---- Modal ---- */
.modal-overlay {
    position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.35);
    backdrop-filter:blur(4px); display:none; align-items:flex-end; justify-content:center;
}
.modal-overlay.active { display:flex; }
.modal {
    background:#fff; border-radius:var(--radius) var(--radius) 0 0;
    width:100%; max-width:500px; max-height:85vh; overflow-y:auto;
    padding:20px 16px; animation:slideUp .3s ease;
    box-shadow:0 -8px 30px rgba(0,0,0,0.12);
}
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-header h3 { font-size:1.1rem; font-weight:600; }
.modal-close {
    width:34px; height:34px; border-radius:50%; background:var(--bg-input);
    border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--text-secondary); font-size:1rem; transition:all .2s;
}
.modal-close:hover { background:var(--danger); color:#fff; border-color:var(--danger); }

@keyframes slideUp {
    from { transform:translateY(100%); opacity:0; }
    to { transform:translateY(0); opacity:1; }
}

/* ---- Upload ---- */
.upload-area {
    border:2px dashed var(--border); border-radius:var(--radius);
    padding:24px; text-align:center; cursor:pointer; transition:all .2s;
    color:var(--text-muted); position:relative; overflow:hidden;
    background:var(--bg-input);
}
.upload-area:hover { border-color:var(--accent); color:var(--accent); background:#f5f3ff; }
.upload-area i { font-size:2rem; display:block; margin-bottom:8px; }
.upload-area input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-preview { margin-top:10px; }
.upload-preview img { max-height:80px; border-radius:var(--radius-xs); }

/* ---- Receipt Actions ---- */
.receipt-actions {
    display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
    padding:16px 0; max-width:320px; margin:0 auto;
}
.receipt-actions .btn { flex:1; min-width:100px; }

/* ---- Toast ---- */
.toast-container { position:fixed; top:76px; right:16px; z-index:999; }
.toast {
    padding:12px 18px; border-radius:var(--radius-sm);
    background:#fff; border:1px solid var(--border);
    color:var(--text-primary); font-size:.85rem; margin-bottom:8px;
    box-shadow:var(--shadow-lg); animation:slideIn .3s ease;
    display:flex; align-items:center; gap:8px;
}
.toast.success { border-left:4px solid var(--success); }
.toast.success i { color:var(--success); }
.toast.error { border-left:4px solid var(--danger); }
.toast.error i { color:var(--danger); }

@keyframes slideIn {
    from { transform:translateX(100%); opacity:0; }
    to { transform:translateX(0); opacity:1; }
}

/* ---- Empty State ---- */
.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }
.empty-state i { font-size:3rem; margin-bottom:12px; display:block; opacity:.35; }
.empty-state p { font-size:.9rem; }

/* ---- Responsive ---- */
@media (min-width:768px) {
    .main-content { max-width:700px; }
    .product-grid { grid-template-columns:repeat(4,1fr); }
    .stats-row { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1024px) {
    .bottom-nav { display:none; }
    body { padding-bottom:0; }
    .main-content { max-width:1100px; padding-top:calc(var(--nav-height) + 20px); }
}

/* ---- Print ---- */
@media print {
    body { background:#fff !important; padding:0 !important; }
    .top-header,.bottom-nav,.receipt-actions,.no-print { display:none !important; }
    .main-content { padding:0 !important; max-width:none !important; }
    .receipt-wrapper { padding:0 !important; }
    .receipt { box-shadow:none !important; }
}

/* ---- Spinner ---- */
.spinner {
    width:36px; height:36px; border:3px solid var(--border);
    border-top-color:var(--accent); border-radius:50%;
    animation:spin .6s linear infinite; margin:20px auto;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- Utilities ---- */
.text-center { text-align:center; }
.text-success { color:var(--success); }
.text-danger { color:var(--danger); }
.text-muted { color:var(--text-muted); }
.mt-1 { margin-top:8px; }
.mt-2 { margin-top:16px; }
.mb-1 { margin-bottom:8px; }
.mb-2 { margin-bottom:16px; }
.gap-1 { gap:8px; }
.d-flex { display:flex; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.hidden { display:none !important; }