/* ============================================================
   CashBill POS — Blue/Amber Palette (no green)
   Section colours:
   Header     → Sky blue  #e0f2fe / #0284c7
   Customer   → Indigo    #e0e7ff / #4f46e5
   Scan       → Cyan      #cffafe / #06b6d4
   Browse     → Violet    #ede9fe / #7c3aed
   Items      → Slate     #f1f5f9 / #334155
   Totals     → Blue      #dbeafe / #1d4ed8
   Payment    → Amber     #fef3c7 / #d97706
   Currency   → Sky       #e0f2fe / #0284c7
   Sidebar    → Navy-blue
   ============================================================ */

:root {
    /* Sky blue */
    --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-200:#bae6fd;
    --sky-600:#0284c7; --sky-700:#0369a1; --sky-800:#075985;
    /* Blue */
    --bl-50:#eff6ff;  --bl-100:#dbeafe; --bl-200:#bfdbfe;
    --bl-600:#2563eb; --bl-700:#1d4ed8; --bl-800:#1e40af;
    /* Indigo */
    --in-50:#eef2ff;  --in-100:#e0e7ff; --in-200:#c7d2fe;
    --in-600:#4f46e5; --in-700:#4338ca; --in-800:#3730a3;
    /* Cyan */
    --cy-50:#ecfeff;  --cy-100:#cffafe; --cy-200:#a5f3fc;
    --cy-600:#0891b2; --cy-700:#0e7490; --cy-800:#155e75;
    /* Violet */
    --vi-50:#f5f3ff;  --vi-100:#ede9fe; --vi-200:#ddd6fe;
    --vi-500:#8b5cf6; --vi-600:#7c3aed; --vi-700:#6d28d9;
    /* Amber */
    --am-50:#fffbeb;  --am-100:#fef3c7; --am-200:#fde68a;
    --am-500:#f59e0b; --am-600:#d97706; --am-700:#b45309;
    /* Orange */
    --or-50:#fff7ed;  --or-100:#ffedd5; --or-200:#fed7aa;
    --or-600:#ea580c; --or-700:#c2410c;
    /* Rose */
    --ro-50:#fff1f2;  --ro-100:#ffe4e6;
    --ro-600:#e11d48; --ro-700:#be123c;
    /* Slate neutral */
    --sl-50:#f8fafc;  --sl-100:#f1f5f9; --sl-200:#e2e8f0; --sl-300:#cbd5e1;
    --sl-500:#64748b; --sl-600:#475569; --sl-700:#334155; --sl-800:#1e293b; --sl-900:#0f172a;

    --nav-h:52px; --sidebar-w:220px; --radius:10px;
    --sh-xs:0 1px 3px rgba(0,0,0,.07);
    --sh-sm:0 2px 8px rgba(0,0,0,.09);
    --sh:0 4px 16px rgba(0,0,0,.11);
}

@keyframes dash-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes kpi-pop {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.06)
    }
}


*,*::before,*::after{box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#eef2f7;color:var(--sl-800);font-size:13.5px;margin:0;padding:0}

/* ── Top Nav ───────────────── */
.pos-navbar{background:linear-gradient(135deg,#1e3a8a 0%,var(--bl-700) 55%,var(--sky-600) 100%);height:var(--nav-h);position:fixed;top:0;left:0;right:0;z-index:1040;box-shadow:0 2px 12px rgba(30,58,138,.3)}
.pos-navbar .navbar-brand{font-weight:800;font-size:1.15rem;color:#fff!important;letter-spacing:-.3px}
.pos-navbar .nav-link{color:rgba(255,255,255,.9)!important;font-weight:600}
.pos-navbar .nav-link:hover{color:#fff!important}

/* ── Layout ─────────────────── */
.pos-layout{display:flex;margin-top:var(--nav-h);min-height:calc(100vh - var(--nav-h))}

/* ── Sidebar — navy ─────────── */
.pos-sidebar{width:var(--sidebar-w);background:linear-gradient(175deg,#0f2044 0%,#1e3a8a 60%,var(--bl-800) 100%);position:fixed;top:var(--nav-h);left:0;bottom:0;overflow-y:auto;z-index:1030;display:flex;flex-direction:column;box-shadow:3px 0 16px rgba(15,32,68,.3);transition:transform .25s}
@media(max-width:991px){.pos-sidebar{transform:translateX(-100%)}.pos-sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.22)}}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:1029}
.sidebar-overlay.active{display:block}
.sidebar-nav{padding:1rem .75rem;flex:1}
.sidebar-section-label {font-size: .64rem;font-weight: 800;text-transform: uppercase; letter-spacing: .1em; color: #FFFFFF; padding: .6rem .5rem .2rem; margin-top: .4rem
}
.sidebar-link{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border-radius:8px;margin-bottom:2px;color:rgba(255,255,255,.82);font-weight:600;font-size:.86rem;text-decoration:none;transition:all .15s}
.sidebar-link i{font-size:1.05rem;width:20px;text-align:center}
.sidebar-link:hover{background:rgba(255,255,255,.13);color:#fff}
.sidebar-link.active{background:linear-gradient(135deg,#f97316,#fb923c);color:#fff;box-shadow:0 3px 10px rgba(249,115,22,.38)}
.sidebar-footer{padding:.7rem;border-top:1px solid rgba(255,255,255,.1);font-size:.73rem;color:rgba(255,255,255,.4)}

/* ── Main content ───────────── */
.pos-content{flex:1;margin-left:var(--sidebar-w);padding:.9rem 1.1rem 2rem;min-height:calc(100vh - var(--nav-h))}
@media(max-width:991px){.pos-content{margin-left:0}}
.pos-page-header{display:flex;align-items:center;gap:1rem;margin-bottom:.7rem}
.pos-page-title{font-size:1.15rem;font-weight:800;color:var(--bl-800);margin:0;display:flex;align-items:center;gap:.5rem}

/* ── Base card ──────────────── */
.pos-card{background:#fff;border-radius:var(--radius);border:1px solid var(--sl-200);box-shadow:var(--sh-xs);overflow:hidden}
.pos-card-header{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;font-weight:700;font-size:.81rem;border-bottom:1px solid var(--sl-200)}
.pos-card-body{padding:.65rem .8rem}
.btn-pos-primary{background:linear-gradient(135deg,var(--bl-800),var(--bl-600));color:#fff!important;border:none;font-weight:700;border-radius:8px;box-shadow:0 2px 8px rgba(37,99,235,.22);transition:all .15s}
.btn-pos-primary:hover{background:linear-gradient(135deg,var(--bl-700),var(--bl-800));transform:translateY(-1px)}
.form-control,.form-select{border-radius:6px!important;border-color:var(--sl-300)!important;font-size:.84rem!important;color:var(--sl-800)!important}
.form-control:focus,.form-select:focus{border-color:var(--bl-600)!important;box-shadow:0 0 0 3px rgba(37,99,235,.12)!important}
.form-label{font-weight:600;font-size:.76rem;color:var(--sl-600);margin-bottom:.18rem}
.form-control[readonly]{background:var(--sl-50)!important;color:var(--sl-500)!important}

/* ════════════════════════════════════════
   CASH BILL — COLOURED SECTIONS
   ════════════════════════════════════════ */

/* ── Top bar — blue gradient ── */
.cb-topbar{background:linear-gradient(135deg,#1e3a8a 0%,var(--bl-700) 55%,var(--sky-600) 100%);border-radius:12px;padding:.55rem .95rem;box-shadow:0 4px 14px rgba(37,99,235,.22);border:none}
#lblDisplayAmount{background:rgba(255,255,255,.2)!important;border:1.5px solid rgba(255,255,255,.5)!important;color:#fff!important;font-size:1rem!important;padding:.28rem .85rem!important;border-radius:8px!important;font-weight:800!important}
#lblStkBalance{color:#bae6fd;font-weight:700;font-size:.8rem}
#btnSave{background:linear-gradient(135deg,var(--or-600),#f97316)!important;border:none!important;color:#fff!important;font-weight:700!important;padding:.36rem 1rem!important;border-radius:8px!important;box-shadow:0 3px 10px rgba(234,88,12,.3)!important;transition:all .15s!important}
#btnSave:hover:not(:disabled){background:linear-gradient(135deg,var(--or-700),var(--or-600))!important;transform:translateY(-1px)}
#btnSave:disabled{opacity:.65;transform:none}
#lblDisplayItem{background:linear-gradient(135deg,var(--sky-50),var(--bl-50))!important;color:var(--sky-800)!important;border:1.5px solid var(--sky-200)!important;border-radius:8px!important;font-size:.87rem!important;font-weight:700!important}

/* ── Header — sky blue ──────── */
.cb-header-card{border-color:var(--sky-200);box-shadow:0 2px 8px rgba(2,132,199,.09)}
.cb-header-card .pos-card-header{background:var(--sky-100);color:var(--sky-800);border-bottom-color:var(--sky-200)}
.cb-header-card .pos-card-header i{color:var(--sky-600)}
.cb-header-card .form-control,.cb-header-card .form-select{border-color:var(--sky-200)!important}
.cb-header-card .form-control:focus,.cb-header-card .form-select:focus{border-color:var(--sky-600)!important;box-shadow:0 0 0 3px rgba(2,132,199,.12)!important}

/* ── Customer — indigo ──────── */
.cb-customer-card{border-color:var(--in-200);box-shadow:0 2px 8px rgba(79,70,229,.09)}
.cb-customer-card .pos-card-header{background:var(--in-100);color:var(--in-700);border-bottom-color:var(--in-200)}
.cb-customer-card .pos-card-header i{color:var(--in-600)}
.cb-customer-card .btn-outline-primary{border-color:var(--in-600)!important;color:var(--in-700)!important;font-weight:700;font-size:.78rem;background:#fff!important}
.cb-customer-card .btn-outline-primary:hover{background:var(--in-600)!important;color:#fff!important;border-color:var(--in-600)!important}
.cb-customer-card .btn-outline-secondary{border-color:var(--in-200)!important;color:var(--in-700)!important;font-weight:600;font-size:.78rem;background:#fff!important}
.cb-customer-card .btn-outline-secondary:hover{background:var(--in-100)!important}
#lblCustSelected{color:var(--in-700);font-weight:700;font-size:.77rem}

/* ── Barcode scan — cyan ────── */
.cb-scan-card{border-color:var(--cy-200);box-shadow:0 2px 8px rgba(8,145,178,.09)}
.cb-scan-card .pos-card-body{background:linear-gradient(135deg,var(--cy-50),var(--sl-50))}
#txtBarcode{border:2px solid var(--cy-600)!important;border-radius:8px!important;background:#fff!important;font-size:.96rem!important;font-weight:600!important;color:var(--cy-800)!important}
#txtBarcode:focus{border-color:var(--cy-700)!important;box-shadow:0 0 0 3px rgba(8,145,178,.15)!important}
#txtBarcode::placeholder{color:var(--cy-200);font-weight:400}
#btnItemPanel{background:linear-gradient(135deg,var(--in-600),var(--in-700))!important;color:#fff!important;border:none!important;font-weight:700!important;border-radius:8px!important;font-size:.8rem!important}

/* ── Browse panel — violet ───── */
.cb-browse-card{border-color:var(--vi-200);box-shadow:0 2px 8px rgba(124,58,237,.09)}
.cb-browse-card .pos-card-header{background:var(--vi-100);color:var(--vi-700);border-bottom-color:var(--vi-200)}
.cat-tab-btn{font-size:.73rem!important;font-weight:700!important;border-radius:20px!important;padding:.16rem .65rem!important;transition:all .15s;border-color:var(--vi-200)!important;color:var(--vi-600)!important;background:#fff!important}
.cat-tab-btn:hover{background:var(--vi-100)!important}
.cat-tab-btn.active{background:linear-gradient(135deg,var(--vi-600),var(--vi-500))!important;border-color:var(--vi-600)!important;color:#fff!important;box-shadow:0 2px 8px rgba(124,58,237,.25)!important}
.item-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:295px;overflow-y:auto;padding:3px}
.item-tile{border:1.5px solid var(--sl-200);border-radius:10px;padding:7px 5px;text-align:center;cursor:pointer;transition:all .14s;background:#fafafa;font-size:.7rem;box-shadow:var(--sh-xs)}
.item-tile:hover{border-color:var(--vi-500);background:var(--vi-50);transform:translateY(-2px) scale(1.02);box-shadow:0 4px 12px rgba(124,58,237,.15)}
.item-tile img{width:60px;height:60px;object-fit:contain;display:block;margin:0 auto 4px;border-radius:6px;background:var(--sl-50)}
.item-tile .tile-no-img{width:60px;height:60px;display:flex;align-items:center;justify-content:center;margin:0 auto 4px;background:linear-gradient(135deg,var(--sl-100),var(--sl-200));border-radius:6px;font-size:1.4rem;color:var(--sl-500)}
.item-tile .tile-name{font-weight:700;line-height:1.2;word-break:break-word;color:var(--sl-700);font-size:.7rem}
.item-tile .tile-price{color:var(--or-600);font-weight:800;font-size:.74rem;margin-top:2px}

/* ── Items grid — slate ─────── */
.cb-items-card{border-color:var(--sl-300);box-shadow:0 2px 8px rgba(71,85,105,.08)}
.cb-items-card .pos-card-header{background:var(--sl-100);color:var(--sl-700);border-bottom-color:var(--sl-200)}
.cb-items-card .pos-card-header .badge{background:var(--or-600)!important}
.items-table-wrap{overflow-x:auto}
.items-table thead th{background:linear-gradient(135deg,#0f2044,var(--bl-800));color:#fff;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border:none;padding:.4rem .48rem}
.items-table tbody tr{transition:background .1s}
.items-table tbody tr:nth-child(even){background:#fafcff}
.items-table tbody tr:hover{background:var(--sky-50)!important}
.items-table tbody tr.table-active{background:#fef9c3!important}
.items-table tfoot td{background:linear-gradient(135deg,var(--sky-100),var(--bl-50));font-weight:800;font-size:.83rem;color:var(--bl-800);border-top:2px solid var(--bl-200)}
.items-table tfoot #footTotAmt{color:var(--or-600)!important;font-size:.9rem}
.iinput{border:1px solid transparent!important;background:transparent!important;border-radius:4px!important;padding:1px 4px!important;font-size:.8rem!important;color:var(--sl-800);min-width:0}
.iinput:focus{border-color:var(--bl-600)!important;background:var(--bl-50)!important;outline:none!important;box-shadow:none!important}

/* ── Totals — blue ──────────── */
.cb-totals-card{border-color:var(--bl-200);box-shadow:0 2px 8px rgba(37,99,235,.09)}
.cb-totals-card .pos-card-header{background:var(--bl-50);color:var(--bl-800);border-bottom-color:var(--bl-100)}
.totals-row{display:flex;justify-content:space-between;align-items:center;padding:.27rem 0;border-bottom:1px dashed var(--sl-200);font-size:.85rem}
.totals-row:last-child{border-bottom:none}
.totals-row.grand{font-weight:800;font-size:1.05rem;background:linear-gradient(135deg,var(--bl-800),var(--bl-600));color:#fff;border-radius:7px;padding:.36rem .75rem;margin:.3rem -.8rem 0;border-bottom:none}

/* ── Payment — amber ────────── */
.cb-payment-card{border-color:var(--am-200);box-shadow:0 2px 8px rgba(217,119,6,.1)}
.cb-payment-card .pos-card-header{background:var(--am-100);color:#92400e;border-bottom-color:var(--am-200)}
#payModeTabs{border-bottom:2px solid #fbbf24!important}
#payModeTabs .nav-link{padding:.3rem .16rem;font-size:.69rem;font-weight:700;color:#92400e!important;border:none!important;border-radius:7px 7px 0 0!important;background:transparent!important;transition:all .13s}
#payModeTabs .nav-link i{display:block;font-size:1rem;margin-bottom:1px}
#payModeTabs .nav-link:hover{background:var(--am-100)!important}
#payModeTabs .nav-link.active{background:linear-gradient(135deg,var(--am-600),var(--am-500))!important;color:#fff!important;box-shadow:0 -2px 6px rgba(217,119,6,.22)}
#payModeTabs .nav-link[data-pay-mode="credit"]{color:#9f1239!important}
#payModeTabs .nav-link[data-pay-mode="credit"].active{background:linear-gradient(135deg,var(--ro-700),var(--ro-600))!important}
#txtCashAmount,#txtAtmAmount,#txtQrAmount,#txtOnlineAmount{font-size:1.45rem!important;font-weight:800!important;border:2px solid var(--am-200)!important;border-radius:8px!important;text-align:right!important;color:#92400e!important;background:var(--am-50)!important;height:2.85rem}
#txtCashAmount:focus,#txtAtmAmount:focus,#txtQrAmount:focus,#txtOnlineAmount:focus{border-color:var(--am-600)!important;box-shadow:0 0 0 3px rgba(217,119,6,.14)!important}
#lblChange{font-size:1.55rem!important;font-weight:900!important;color:var(--sky-700)!important}
#txtMultiCash,#txtMultiAtm,#txtMultiQr,#txtMultiOnline{border:2px solid var(--am-200)!important;background:var(--am-50)!important;font-weight:700!important;text-align:right!important}
#quickCashBtns .btn{font-weight:700!important;font-size:.76rem!important;border-color:#fbbf24!important;color:var(--am-700)!important;border-radius:6px!important;background:#fff!important}
#quickCashBtns .btn:hover{background:var(--am-600)!important;color:#fff!important;border-color:var(--am-600)!important}
#quickCashBtns .btn-outline-primary{background:linear-gradient(135deg,var(--bl-800),var(--bl-600))!important;color:#fff!important;border-color:var(--bl-800)!important}
#panel-credit .alert-warning{background:var(--or-50)!important;border:1.5px solid var(--or-200)!important;color:#9a3412!important;font-weight:600!important}
#txtTermsId{border:2px solid var(--ro-100)!important;background:var(--ro-50)!important;color:var(--ro-700)!important;font-weight:700!important}
#lblTermsDesc{color:#9a3412;font-size:.77rem;margin-top:.2rem}
#payTotalsRow{font-size:.87rem;color:var(--bl-800);font-weight:600}

/* ── Currency+SalesBook — sky ── */
.cb-currency-card{border-color:var(--sky-200);box-shadow:0 2px 8px rgba(2,132,199,.08)}
.cb-currency-card .pos-card-header{background:var(--sky-100);color:var(--sky-800);border-bottom-color:var(--sky-200)}
#selCurrency{border-color:var(--sky-200)!important;background:var(--sky-50)!important;color:var(--sky-800)!important;font-weight:700!important}
#txtRate{background:var(--sky-50)!important;border-color:var(--sky-200)!important;color:var(--sky-800)!important;font-weight:800!important}
#txtSalesBook{border-color:var(--in-200)!important;background:var(--in-50)!important;color:var(--in-800)!important;font-weight:700!important}

/* ── Last bill — sky ─────────── */
.cb-lastbill-card{border-color:var(--sky-200)}
.cb-lastbill-card .pos-card-header{background:var(--sky-100);color:var(--sky-800);border-bottom-color:var(--sky-200)}

/* ── Badges ─────────────────── */
.badge-cb{background:var(--bl-100);color:var(--bl-800);font-weight:700}
.badge-inv{background:var(--vi-100);color:var(--vi-700);font-weight:700}
.badge-active{background:var(--sky-100);color:var(--sky-700)}
.badge-inactive{background:var(--ro-100);color:var(--ro-700)}

/* ── Autocomplete ────────────── */
.pos-autocomplete{position:absolute;z-index:9999;background:#fff;border:1.5px solid var(--bl-200);border-radius:10px;box-shadow:0 6px 20px rgba(37,99,235,.13);max-height:275px;overflow-y:auto;min-width:275px}
.pos-autocomplete-item{padding:.42rem .75rem;cursor:pointer;font-size:.82rem;border-bottom:1px solid var(--sl-100);transition:background .1s}
.pos-autocomplete-item:last-child{border-bottom:none}
.pos-autocomplete-item:hover,.pos-autocomplete-item.selected{background:var(--bl-50)}
.pos-autocomplete-item .item-code{font-weight:800;color:var(--bl-700);font-size:.76rem}
.pos-autocomplete-item .item-price{float:right;font-weight:700;color:var(--or-600)}

/* ── Customer modal ──────────── */
#custTable thead th{background:linear-gradient(135deg,var(--in-700),var(--in-600));color:#fff;font-weight:700;font-size:.76rem}
#custTable tbody tr{cursor:pointer}
#custTable tbody tr:hover{background:var(--in-50)!important}
.input-group-text.bg-primary{background:linear-gradient(135deg,var(--in-700),var(--in-600))!important;border:none}

/* ── Toast ───────────────────── */
.pos-toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem}

/* ── Offline ─────────────────── */
.offline-strip{display:none;background:var(--am-100);color:#92400e;text-align:center;padding:.4rem;font-size:.82rem;font-weight:700;position:fixed;top:var(--nav-h);left:0;right:0;z-index:1035}
body.is-offline .offline-strip{display:block}
body.is-offline .pos-content{margin-top:32px}

@media(max-width:767px){.pos-content{padding:.7rem .7rem 2rem}#lblChange{font-size:1.2rem!important}#txtCashAmount{font-size:1.15rem!important;height:2.5rem}}

/* ════════════════════════════════════
   80mm RECEIPT PRINT
   ════════════════════════════════════ */
@media print{
    .pos-navbar,.pos-sidebar,.sidebar-overlay,.pos-page-header .btn,.no-print{display:none!important}
    .pos-content{margin:0!important;padding:0!important}
    @page{size:80mm auto;margin:2mm 1mm}
    body{background:#fff!important;font-size:10px!important;font-family:'Courier New',monospace!important;width:76mm}
    .receipt-80mm{width:76mm;max-width:76mm;font-size:10px;font-family:'Courier New',monospace;color:#000}
    .receipt-header{text-align:center;margin-bottom:4px}
    .receipt-header .company-name{font-size:13px;font-weight:bold}
    .receipt-header .doc-type{font-size:11px;font-weight:bold;border:1px solid #000;display:inline-block;padding:1px 8px;margin:4px 0}
    .receipt-divider{border-top:1px dashed #000;margin:4px 0}
    .receipt-divider-solid{border-top:1px solid #000;margin:4px 0}
    .receipt-items-header{font-weight:bold;font-size:9px;border-bottom:1px solid #000;padding-bottom:2px;margin-bottom:2px}
    .receipt-item-row{font-size:10px;line-height:1.5}
    .receipt-item-desc{width:100%;word-break:break-word}
    .receipt-item-calc{display:flex;justify-content:space-between;padding-left:4px;color:#333}
    .receipt-totals{margin-top:4px}
    .receipt-totals .total-row{display:flex;justify-content:space-between;font-size:10px;line-height:1.6}
    .receipt-totals .total-grand{font-weight:bold;font-size:12px;border-top:1px solid #000;padding-top:2px;margin-top:2px}
    .receipt-footer{text-align:center;margin-top:8px;font-size:9px}
    .receipt-footer .thank-you{font-size:11px;font-weight:bold}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}