*{box-sizing:border-box}
:root{--terracotta:#E66B45;--terracotta-dark:#C95534;--sage:#3D7B65;--sage-dark:#2E604E;--cream:#FFF4E8;--paper:#FFFCF8;--ink:#293B33;--muted:#7D887F;--line:#EEE7DE;--shadow:0 8px 28px rgba(55,67,57,.07)}
body{margin:0;background:var(--cream);color:var(--ink);font:14px/1.55 "Plus Jakarta Sans", "Nunito Sans", system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--sage);text-decoration:none;font-weight:600}
.layout{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--paper);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;flex-shrink:0}
.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:850;letter-spacing:-1.2px;color:var(--ink)}
.brand img{width:42px;height:42px;object-fit:contain}.brand b{color:var(--terracotta)}
.store{font-size:12px;color:var(--muted);margin:8px 0 27px;padding-left:52px}
.sidebar nav{display:grid;gap:6px}.sidebar nav a{color:#66746B;padding:12px 14px;border-radius:11px;font-weight:650;transition:.18s}
.sidebar nav a.active,.sidebar nav a:hover{background:#F9E7DD;color:var(--terracotta-dark)}
.userbox{margin-top:auto;border-top:1px solid var(--line);padding:17px 8px 0;font-weight:750}.userbox small{display:block;color:var(--muted);font-weight:500}.userbox a{display:inline-block;margin-top:12px;color:var(--terracotta)}
.main{padding:30px;flex:1;min-width:0;max-width:1600px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}
header small{color:var(--sage);text-transform:uppercase;letter-spacing:1.1px;font-weight:750;font-size:10px}
h1{font-size:27px;letter-spacing:-.8px;margin:4px 0 0;font-weight:800}
.topuser{color:var(--muted);background:#fff;border:1px solid var(--line);padding:9px 13px;border-radius:30px;font-size:12px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}
.stat,.panel{background:#fff;border:1px solid var(--line);border-radius:17px;padding:20px;box-shadow:var(--shadow)}
.stat small,.stat span{display:block;color:var(--muted)}.stat strong{display:block;font-size:27px;letter-spacing:-.8px;margin:8px 0;color:var(--sage)}
.panel{margin-bottom:18px}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px}
.panelhead h3{margin:0}h3{font-size:16px;letter-spacing:-.3px}
.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}
th,td{text-align:left;padding:13px 10px;border-bottom:1px solid #F1ECE6}th{font-size:10px;color:#879188;text-transform:uppercase;letter-spacing:.7px}td{font-size:13px}
.btn{border:0;border-radius:10px;background:#F3EEE8;color:var(--ink);padding:12px 17px;display:inline-block;font-weight:750;cursor:pointer;transition:.18s}
.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--terracotta);color:#fff;box-shadow:0 5px 12px #E66B4530}.btn.primary:hover{background:var(--terracotta-dark)}.btn.wide{width:100%;text-align:center}
.gridform{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.gridform label,.cartpanel label,.installer label{display:block;font-size:12px;color:#66746B;font-weight:700}
.gridform input,.gridform textarea,.cartpanel input,.cartpanel select,.installer input,.installer textarea,.loginbox input{display:block;width:100%;margin-top:6px;border:1px solid #E6E1D9;border-radius:10px;padding:12px;font:inherit;color:var(--ink);background:#FFFEFC;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--sage)!important;box-shadow:0 0 0 3px #3D7B6518}
.gridform .full{grid-column:1/-1}.inline{display:inline}.link{border:0;background:none;color:var(--sage);cursor:pointer;padding:0}.danger{color:#C65B4B}
.posgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr);gap:18px;align-items:start}
.productgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.productcard{text-align:left;border:1px solid var(--line);background:#FFFCF8;border-radius:13px;padding:14px;cursor:pointer;min-height:112px;transition:.18s}
.productcard:hover{border-color:#DCA18D;background:#FFF7F1;transform:translateY(-2px)}
.productcard b,.productcard small,.productcard strong{display:block}.productcard b{font-size:13px}.productcard small{font-size:11px;color:#929B93;margin:7px 0}.productcard strong{color:var(--sage);font-size:14px}
.cartpanel{position:sticky;top:15px}.cartitems{min-height:100px}.cartrow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border-bottom:1px solid #F1ECE6;padding:11px 0}
.cartrow small{display:block;color:#929B93}.cartrow button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:4px 10px;color:var(--sage);cursor:pointer}
.carttotal{display:flex;justify-content:space-between;padding:18px 0;font-size:17px;border-top:1px dashed var(--line);margin-top:12px}.carttotal strong{font-size:23px;color:var(--sage)}
.cartpanel label{margin:12px 0}.change{margin:14px 0;color:var(--muted)}.change b{float:right;color:var(--ink)}.muted{color:#9AA39B}
.alert,.success{padding:13px 15px;border-radius:11px;margin-bottom:15px;background:#FFF0ED;color:#A44732}.success{background:#EAF5EE;color:#286047}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#FFF4E8,#F5E9DC)}
.loginbox,.installer{background:#FFFEFC;width:min(420px,100%);padding:32px;border:1px solid #F0E5D9;border-radius:22px;box-shadow:0 18px 55px #4A3A2918}
.loginbox .brand,.installer .brand{margin-bottom:12px}.loginbox p,.installer p{color:var(--muted)}
.loginbox label{display:block;margin:14px 0 5px;color:#66746B;font-size:12px;font-weight:750}.loginbox small{display:block;text-align:center;color:#9AA39B;margin-top:18px}
.installer{width:min(560px,100%);max-height:95vh;overflow:auto}.installer h2{margin-bottom:4px}.installer h3{margin:22px 0 10px}.installer label{margin:10px 0}
.receipt{background:#fff;padding:20px}.receipt-actions{text-align:center;margin-bottom:20px}.paper{width:100%;max-width:760px;margin:auto;color:#111;font-family:Arial,sans-serif}
.paper h2,.paper p{text-align:center}.receipt-line{display:flex;justify-content:space-between;gap:12px;margin:10px 0}.receipt-line b:last-child{text-align:right}.paper hr{border:0;border-top:1px dashed #888;margin:12px 0}
@media(max-width:900px){.sidebar{width:210px}.main{padding:20px}.posgrid{grid-template-columns:1fr}.cartpanel{position:static}.productgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.layout{display:block}.sidebar{width:100%;padding:12px 14px;border-right:0;border-bottom:1px solid var(--line)}.sidebar .brand{font-size:20px}.brand img{width:36px;height:36px}.store{margin:2px 0 9px;padding-left:46px}.sidebar nav{display:flex;overflow:auto}.sidebar nav a{white-space:nowrap;padding:9px 12px;font-size:12px}.userbox{display:none}.main{padding:16px}header{align-items:flex-start}.topuser{display:none}h1{font-size:23px}.stats{grid-template-columns:1fr 1fr}.stat{padding:15px}.stat strong{font-size:21px}.stat:last-child{grid-column:1/-1}.gridform{grid-template-columns:1fr}.gridform .full{grid-column:auto}.productgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:15px}.panelhead{align-items:flex-start;flex-wrap:wrap}.search{max-width:100%;width:100%}}
@media print{body.receipt{padding:0}.receipt-actions{display:none}.paper{max-width:none}.paper h2{font-size:18px}.paper{font-size:12px}}
@media print and (max-width:420px){.paper{width:58mm;font-size:10px}.paper h2{font-size:14px}}

.demo-cta{border-color:#E9C9B9;background:linear-gradient(120deg,#FFFCF8,#FFF1E9)}.demo-cta p{color:#7D887F;margin-bottom:0}

.product-name-cell{display:flex;align-items:center;gap:10px;min-width:180px}
.table-thumb{width:42px;height:42px;border-radius:9px;object-fit:cover;background:#F7EEE5;flex-shrink:0}
.edit-thumb{display:block;width:76px;height:76px;object-fit:cover;border-radius:10px;margin-top:9px;border:1px solid var(--line)}
.productcard{display:flex;flex-direction:column;align-items:flex-start}
.pos-thumb{width:100%;height:86px;object-fit:cover;border-radius:9px;background:#F7EEE5;margin-bottom:9px}
.placeholder-thumb{display:flex;align-items:center;justify-content:center;color:var(--sage);font-size:24px;background:linear-gradient(135deg,#F7EEE5,#E9F0E9)}
.table-thumb.placeholder-thumb{font-size:20px}

.receipt-paper{max-width:760px;margin:24px auto;padding:28px;border:1px solid #eee;border-radius:12px}
.receipt-brand{text-align:center;font-size:22px;font-weight:850;color:#293B33;margin-bottom:8px}.receipt-brand b{color:#E66B45}
.receipt-paper h2{font-size:20px;margin:6px 0}.receipt-paper>p{line-height:1.5}
.receipt-meta{display:grid;grid-template-columns:120px 1fr;gap:7px 12px;padding:15px 0;margin:15px 0;border-top:1px dashed #aaa;border-bottom:1px dashed #aaa;font-size:13px}
.receipt-meta span{color:#66746B}.receipt-meta b{text-align:right;overflow-wrap:anywhere}
.receipt-table{width:100%;border-collapse:collapse;white-space:normal;margin:12px 0 18px}
.receipt-table th,.receipt-table td{padding:10px 7px;border-bottom:1px dashed #ddd;font-size:12px}
.receipt-table th{color:#555;text-transform:none;letter-spacing:0}.receipt-table th:not(:first-child),.receipt-table td:not(:first-child){text-align:right}
.receipt-totals{border-top:1px dashed #999;padding-top:10px}.receipt-totals>div{display:flex;justify-content:space-between;gap:15px;padding:6px 0;font-size:13px}.receipt-totals>div:first-child{font-size:17px;font-weight:800}
.receipt-thanks{text-align:center!important;border-top:1px dashed #999;padding-top:15px;margin-top:15px;font-size:12px}
@media print{body.receipt{padding:0}.receipt-paper{border:0;border-radius:0;margin:0 auto;padding:0;max-width:100%}.receipt-actions{display:none}.receipt-table th,.receipt-table td{font-size:11px}}
@media print and (max-width:500px){.receipt-paper{width:80mm;padding:2mm}.receipt-paper h2{font-size:15px}.receipt-table th,.receipt-table td{font-size:9px;padding:5px 2px}.receipt-meta,.receipt-totals>div{font-size:10px}.receipt-brand{font-size:18px}}

/* Buka POS v1.5 operational modules */
.sidebar nav a{font-size:13px}
.gridform select,.gridform textarea{display:block;width:100%;margin-top:6px;border:1px solid #E6E1D9;border-radius:10px;padding:12px;font:inherit;color:var(--ink);background:#FFFEFC;outline:none}
#purchaseRows select,#purchaseRows input{min-width:110px;border:1px solid #E6E1D9;border-radius:9px;padding:9px;font:inherit;max-width:100%}
#purchaseRows select{min-width:180px}
#purchaseForm>.btn{margin:12px 8px 0 0}
@media(max-width:650px){.sidebar nav{padding-bottom:4px}.sidebar nav a{flex-shrink:0}.main{overflow:hidden}#purchaseRows select{min-width:145px}}

/* Buka POS v1.6 finance dashboard */
.mini-bars{display:flex;align-items:flex-end;gap:12px;min-height:190px;padding:18px 8px 4px;overflow-x:auto}
.mini-bar{flex:1;min-width:48px;display:flex;flex-direction:column;align-items:center;gap:8px}
.mini-bar .bar-value{font-size:10px;color:#718078;white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:112px;width:100%;max-width:48px;background:#F5EEE7;border-radius:8px 8px 3px 3px;display:flex;align-items:flex-end;overflow:hidden}
.bar-track span{display:block;width:100%;background:linear-gradient(180deg,#E97750,#3D806A);border-radius:7px 7px 0 0;min-height:2px}
.mini-bar small{font-size:11px;color:#718078}
@media(max-width:650px){.mini-bars{gap:7px}.mini-bar{min-width:38px}.mini-bar .bar-value{font-size:9px}.bar-track{height:90px}}

/* v1.7 customer and receivable screens */
.settle-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:260px}
.settle-form input,.settle-form select{max-width:125px;min-width:90px;padding:8px;border:1px solid #e6e1d9;border-radius:9px;font:inherit}
@media(max-width:650px){.settle-form{min-width:230px}.settle-form input{width:100%}}

/* Buka POS v1.8 user access */
.pill{display:inline-flex;align-items:center;border-radius:99px;padding:5px 10px;background:#f2eee8;color:#6b756f;font-size:12px;font-weight:700}
.pill.good{background:#e7f3ec;color:#34745d}
.link{border:0;background:none;color:#3d806a;font:inherit;font-weight:700;cursor:pointer;padding:4px}