:root{
  --brand:#1A56DB;--brand-dark:#1043b5;--brand-light:#EBF2FF;
  --accent:#F59E0B;--accent2:#10B981;--danger:#EF4444;--purple:#8B5CF6;
  --text:#0F172A;--text2:#475569;--text3:#94A3B8;
  --border:#E2E8F0;--surface:#F8FAFC;--white:#FFFFFF;
  --sidebar-w:240px;--header-h:60px;
  --radius:12px;--radius-sm:8px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.05);
  --shadow-md:0 4px 20px rgba(0,0,0,.1);
  --tr:all .2s ease;
}
/* ── DARK MODE ── */
body.dark{
  --text:#F1F5F9;--text2:#94A3B8;--text3:#64748B;
  --border:#1E293B;--surface:#0F172A;--white:#1E293B;
  --brand-light:rgba(26,86,219,.18);
  --shadow:0 1px 3px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25);
  --shadow-md:0 4px 20px rgba(0,0,0,.4);
}
body.dark .topbar{background:#1E293B;border-color:#1E293B;}
body.dark .sidebar{background:#080f1f;}
body.dark .modal{background:#1E293B;}
body.dark .field input,body.dark .field select,body.dark .field textarea{background:#0F172A;border-color:#334155;color:#F1F5F9;}
body.dark .pos-search{background:#1E293B;border-color:#334155;}
body.dark .pos-search input{color:#F1F5F9;}
body.dark .pos-search input::placeholder{color:#475569;}
body.dark .receipt{background:#0F172A;border-color:#334155;}
body.dark .toast{background:#334155;}
body.dark table{color:#F1F5F9;}
body.dark th{background:#0F172A;border-color:#334155;}
body.dark td{border-color:#1E293B;}
body.dark tr:hover td{background:#0F172A;}
body.dark .btn-outline{border-color:#334155;color:#94A3B8;}
body.dark .btn-outline:hover{border-color:var(--brand);color:var(--brand);}
body.dark .table-card{background:#1E293B;border-color:#1E293B;}
body.dark .table-header{border-color:#334155;}
body.dark .chart-card{background:#1E293B;border-color:#1E293B;}
body.dark .stat-card{background:#1E293B;border-color:#1E293B;}
body.dark .promo-card{background:#1E293B;border-color:#1E293B;}
body.dark .pos-item{background:#1E293B;border-color:#334155;}
body.dark .pos-item:hover,body.dark .pos-item.in-cart{background:rgba(26,86,219,.25);}
body.dark .cart-drawer{background:#1E293B;}
body.dark .tab-bar{border-color:#334155;}
body.dark .cust-field-wrap{background:#0F172A;border-color:#334155;}
body.dark .cust-field-wrap input{color:#F1F5F9;}
body.dark .cust-field-wrap input::placeholder{color:#475569;}
body.dark .notif-btn{background:#0F172A;border-color:#334155;}
body.dark .notif-btn svg{stroke:#94A3B8;}
/* dark mode toggle button */
.dark-toggle-btn{
  width:34px;height:34px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:var(--tr);flex-shrink:0;
}
.dark-toggle-btn:hover{background:var(--brand-light);border-color:var(--brand);}
.dark-toggle-btn svg{width:17px;height:17px;stroke:var(--text2);transition:var(--tr);}
.dark-toggle-btn:hover svg{stroke:var(--brand);}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:'Plus Jakarta Sans',sans-serif;background:var(--surface);color:var(--text);font-size:14px;}

/* ── LUCIDE ICON HELPERS ── */
.ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.ic svg{stroke-width:1.75;}
.ic-sm svg{width:14px;height:14px;}
.ic-md svg{width:17px;height:17px;}
.ic-lg svg{width:20px;height:20px;}
.ic-xl svg{width:24px;height:24px;}
.ic-2xl svg{width:32px;height:32px;}
.ic-white svg{stroke:#fff;}
.ic-muted svg{stroke:var(--text3);}
.ic-brand svg{stroke:var(--brand);}
.ic-success svg{stroke:var(--accent2);}
.ic-danger svg{stroke:var(--danger);}
.ic-warn svg{stroke:var(--accent);}

/* ── LOGIN ── */
#splash{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(140deg,#080f1f 0%,#0c2161 55%,#1A56DB 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .5s ease,transform .5s ease;padding:20px;
}
#splash.out{opacity:0;pointer-events:none;transform:scale(1.04);}
.splash-logo{display:flex;align-items:center;justify-content:center;margin-bottom:36px;}
.splash-logo img{height:56px;object-fit:contain;filter:drop-shadow(0 2px 16px rgba(255,255,255,.3));}
.login-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(24px);border-radius:20px;padding:36px 32px;
  width:100%;max-width:380px;box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.login-card h2{color:#fff;font-size:22px;font-weight:800;margin-bottom:4px;}
.login-card>p{color:rgba(255,255,255,.5);font-size:13px;margin-bottom:28px;}
.fg{margin-bottom:16px;}
.fg label{display:block;color:rgba(255,255,255,.65);font-size:11px;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px;}
.fg-inner{position:relative;display:flex;align-items:center;}
.fg-inner .ic{position:absolute;left:12px;pointer-events:none;}
.fg-inner .ic svg{stroke:rgba(255,255,255,.35);width:15px;height:15px;}
.fg input{
  width:100%;padding:11px 14px 11px 38px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);color:#fff;font-family:inherit;font-size:14px;outline:none;transition:var(--tr);
}
.fg input::placeholder{color:rgba(255,255,255,.3);}
.fg input:focus{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.14);}
.btn-login{
  width:100%;padding:13px;border:none;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#1A56DB,#3B82F6);
  color:#fff;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;transition:var(--tr);box-shadow:0 4px 16px rgba(26,86,219,.4);
  margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(26,86,219,.5);}
.login-error{
  display:none;align-items:center;gap:8px;
  background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);
  border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:14px;
  color:#FCA5A5;font-size:13px;font-weight:500;
}
.login-error.show{display:flex;}
.login-error svg{stroke:#FCA5A5;width:15px;height:15px;flex-shrink:0;}
.login-support{
  margin-top:18px;text-align:center;
}
.login-support a{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.45);font-size:12px;font-weight:500;
  text-decoration:none;transition:var(--tr);
  padding:6px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.12);
}
.login-support a:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);}
.login-support a svg{width:13px;height:13px;stroke:currentColor;}

/* ── APP SHELL ── */
#app{display:none;height:100vh;overflow:hidden;position:relative;}
#app.visible{display:flex;}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--sidebar-w);height:100vh;background:#0B1426;
  display:flex;flex-direction:column;flex-shrink:0;
  overflow-y:auto;overflow-x:hidden;
  transition:transform .3s ease;z-index:200;position:relative;
}
.sidebar-brand{
  padding:0 18px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;min-height:var(--header-h);
}
.sidebar-brand img{height:34px;object-fit:contain;filter:drop-shadow(0 1px 6px rgba(255,255,255,.15));}
.sidebar-role{
  margin:12px 14px 4px;padding:7px 11px;border-radius:var(--radius-sm);
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;display:flex;align-items:center;gap:6px;
}
.role-sa{background:rgba(245,158,11,.12);color:#F59E0B;border:1px solid rgba(245,158,11,.22);}
.role-admin{background:rgba(16,185,129,.12);color:#10B981;border:1px solid rgba(16,185,129,.22);}
.role-kasir{background:rgba(96,165,250,.12);color:#60A5FA;border:1px solid rgba(96,165,250,.22);}
.sidebar-role svg{width:11px;height:11px;flex-shrink:0;}
.sidebar-section{padding:10px 0 2px;}
.sidebar-section-title{padding:4px 18px;font-size:10px;font-weight:700;color:rgba(255,255,255,.22);text-transform:uppercase;letter-spacing:.9px;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 18px;cursor:pointer;color:rgba(255,255,255,.45);
  font-size:13px;font-weight:500;transition:var(--tr);
  position:relative;margin:1px 8px;border-radius:var(--radius-sm);
}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.07);}
.nav-item.active{color:#fff;background:rgba(26,86,219,.38);}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:58%;background:var(--brand);border-radius:0 3px 3px 0;}
.nav-item .ic svg{width:16px;height:16px;stroke:currentColor;transition:var(--tr);}
.sidebar-footer{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.06);}
.user-info{display:flex;align-items:center;gap:9px;}
.avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),#3B82F6);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:700;flex-shrink:0;
}
.user-name{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-biz{font-size:11px;color:rgba(255,255,255,.38);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.btn-logout{
  margin-left:auto;padding:6px;background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.22);color:#EF4444;
  border-radius:var(--radius-sm);cursor:pointer;transition:var(--tr);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.btn-logout:hover{background:rgba(239,68,68,.25);}
.btn-logout svg{width:15px;height:15px;stroke:#EF4444;}

/* ── MOBILE ── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;}
.sidebar-overlay.show{display:block;}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{
  height:var(--header-h);padding:0 20px;
  display:flex;align-items:center;gap:12px;
  background:var(--white);border-bottom:1px solid var(--border);flex-shrink:0;
}
.topbar-hamburger{
  display:none;width:36px;height:36px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);
  align-items:center;justify-content:center;cursor:pointer;
}
.topbar-hamburger svg{width:18px;height:18px;stroke:var(--text2);}
.topbar h1{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.notif-btn{
  width:34px;height:34px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
  transition:var(--tr);
}
.notif-btn:hover{background:var(--brand-light);border-color:var(--brand);}
.notif-btn svg{width:17px;height:17px;stroke:var(--text2);}
.notif-btn:hover svg{stroke:var(--brand);}
.notif-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;background:var(--danger);border-radius:50%;border:2px solid var(--white);}
.content{flex:1;overflow-y:auto;padding:20px;}
.content.no-pad{padding:0;}

/* ── STAT CARDS ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px;margin-bottom:20px;}
.stat-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;position:relative;overflow:hidden;transition:var(--tr);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.stat-card::after{content:'';position:absolute;top:0;right:0;width:72px;height:72px;border-radius:50%;background:var(--card-color,var(--brand));opacity:.07;transform:translate(20px,-20px);}
.stat-label{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;}
.stat-value{font-size:24px;font-weight:800;color:var(--text);font-family:'Space Grotesk',sans-serif;line-height:1;}
.stat-sub{font-size:11px;color:var(--text3);margin-top:5px;}
.stat-icon-wrap{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:10px;
  background:var(--card-color,var(--brand));
  display:flex;align-items:center;justify-content:center;
  opacity:.18;
}
.stat-icon-wrap svg{width:18px;height:18px;stroke:#fff;stroke-width:2;}
.stat-up{color:var(--accent2);font-weight:700;}

/* ── CHARTS ── */
.chart-row{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:20px;}
.chart-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.chart-card h3{font-size:13px;font-weight:700;margin-bottom:3px;}
.chart-card p{font-size:12px;color:var(--text3);margin-bottom:16px;}
.bar-chart{display:flex;align-items:flex-end;gap:8px;height:110px;}
.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.bar{width:100%;border-radius:4px 4px 0 0;background:var(--brand);transition:height .6s ease;min-height:4px;}
.bar-label{font-size:9px;color:var(--text3);font-weight:600;text-align:center;}
.bar-val{font-size:10px;color:var(--text2);font-weight:700;}
.donut-wrap{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;height:110px;}
svg.donut{width:90px;height:90px;}
.donut-legend{display:flex;flex-direction:column;gap:5px;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* ── TABLES ── */
.table-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px;}
.table-header{padding:14px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.table-header h3{font-size:14px;font-weight:700;}
.table-header-right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;min-width:420px;}
th{padding:9px 16px;text-align:left;font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;background:var(--surface);border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:11px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--surface);}

/* ── BADGES ── */
.badge{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.badge svg{width:10px;height:10px;}
.badge-green{background:#D1FAE5;color:#065F46;}
.badge-blue{background:#DBEAFE;color:#1E40AF;}
.badge-red{background:#FEE2E2;color:#991B1B;}
.badge-yellow{background:#FEF3C7;color:#92400E;}
.badge-gray{background:#F1F5F9;color:#475569;}

/* ── BUTTONS ── */
.btn{
  padding:8px 14px;border-radius:var(--radius-sm);font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;transition:var(--tr);border:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.btn svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0;}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-primary svg{stroke:#fff;}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text2);}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{background:#DC2626;}
.btn-danger svg{stroke:#fff;}
.btn-success{background:var(--accent2);color:#fff;}
.btn-success:hover{background:#059669;}
.btn-success svg{stroke:#fff;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-sm svg{width:12px;height:12px;}
.btn-icon{padding:7px;border-radius:var(--radius-sm);}

/* ── PRODUCT GRID ── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:16px;}
.product-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--tr);}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.product-color-bar{height:4px;}
.product-info{padding:12px;}
.product-name{font-size:13px;font-weight:700;margin-bottom:4px;}
.product-price{font-size:14px;font-weight:800;color:var(--brand);font-family:'Space Grotesk',sans-serif;}
.product-stock{font-size:11px;color:var(--text3);margin-top:3px;display:flex;align-items:center;gap:4px;}
.product-stock svg{width:11px;height:11px;stroke:var(--text3);}
.product-cat{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;margin-bottom:2px;}
.product-actions{display:flex;gap:5px;margin-top:10px;}

/* ── POS ── */
.pos-layout{display:grid;grid-template-columns:1fr 320px;height:calc(100vh - var(--header-h));overflow:hidden;}
.pos-products{padding:16px;overflow-y:auto;background:var(--surface);}
.pos-search{
  display:flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:9px 13px;margin-bottom:12px;
}
.pos-search svg{width:15px;height:15px;stroke:var(--text3);flex-shrink:0;}
.pos-search input{border:none;background:transparent;font-family:inherit;font-size:14px;outline:none;flex:1;}
.pos-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.cat-pill{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--text2);transition:var(--tr);}
.cat-pill.active,.cat-pill:hover{background:var(--brand);color:#fff;border-color:var(--brand);}
.promo-banner{
  background:linear-gradient(135deg,#FEF3C7,#FDE68A);border:1px solid #F59E0B;
  border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:10px;
  font-size:12px;color:#92400E;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.promo-banner svg{width:14px;height:14px;stroke:#92400E;flex-shrink:0;}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.pos-item{
  background:var(--white);border:2px solid var(--border);border-radius:var(--radius);
  padding:14px 10px;text-align:center;cursor:pointer;transition:var(--tr);position:relative;
}
.pos-item:hover{border-color:var(--brand);background:var(--brand-light);}
.pos-item.in-cart{border-color:var(--brand);background:var(--brand-light);}
.pos-item-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.3;}
.pos-item-price{font-size:13px;font-weight:800;color:var(--brand);font-family:'Space Grotesk',sans-serif;}
.pos-item-cat{font-size:10px;color:var(--text3);margin-top:3px;text-transform:uppercase;}
.pos-badge{
  position:absolute;top:-7px;right:-7px;
  background:var(--brand);color:#fff;width:21px;height:21px;border-radius:50%;
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--white);font-family:'Space Grotesk',sans-serif;
}
/* CART */
.pos-cart{display:flex;flex-direction:column;background:var(--white);border-left:1px solid var(--border);}
.cart-header{padding:14px 16px;border-bottom:1px solid var(--border);}
.cart-title-row{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.cart-title-row h2{font-size:15px;font-weight:800;display:flex;align-items:center;gap:7px;}
.cart-title-row h2 svg{width:17px;height:17px;stroke:var(--text);}
.cart-count{background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;font-family:'Space Grotesk',sans-serif;}
.cart-items{flex:1;overflow-y:auto;padding:10px;}
.cart-item{
  display:flex;align-items:center;gap:9px;padding:9px 10px;
  border-radius:var(--radius-sm);border:1px solid var(--border);margin-bottom:7px;background:var(--surface);
}
.cart-item-info{flex:1;min-width:0;}
.cart-item-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-item-price{font-size:11px;color:var(--text3);font-family:'Space Grotesk',sans-serif;}
.qty-control{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.qty-btn{
  width:24px;height:24px;border-radius:6px;border:1px solid var(--border);
  background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--tr);color:var(--text);font-size:14px;font-weight:700;
}
.qty-btn svg{width:13px;height:13px;stroke:var(--text2);}
.qty-btn:hover{background:var(--brand);border-color:var(--brand);}
.qty-btn:hover svg{stroke:#fff;}
.qty-num{font-size:13px;font-weight:700;min-width:18px;text-align:center;font-family:'Space Grotesk',sans-serif;}
.cart-footer{padding:14px 16px;border-top:1px solid var(--border);}
.cart-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;color:var(--text2);}
.cart-row.total{font-size:15px;font-weight:800;font-family:'Space Grotesk',sans-serif;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);color:var(--text);}
.cart-row.disc-row{color:var(--accent2);font-weight:600;}
.cust-fields{display:flex;flex-direction:column;gap:7px;margin-top:10px;}
.cust-field-wrap{position:relative;display:flex;align-items:center;}
.cust-field-wrap svg{position:absolute;left:10px;width:13px;height:13px;stroke:var(--text3);pointer-events:none;}
.cust-fields input{
  width:100%;padding:8px 12px 8px 32px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-family:inherit;font-size:13px;outline:none;transition:var(--tr);
}
.cust-fields input:focus{border-color:var(--brand);}
.btn-pay{
  width:100%;padding:13px;border:none;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--brand),#3B82F6);
  color:#fff;font-family:inherit;font-size:15px;font-weight:800;
  cursor:pointer;margin-top:12px;transition:var(--tr);
  box-shadow:0 4px 14px rgba(26,86,219,.3);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-pay svg{width:18px;height:18px;stroke:#fff;}
.btn-pay:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 24px rgba(26,86,219,.4);}
.btn-pay:disabled{background:#94A3B8;box-shadow:none;cursor:not-allowed;}

/* ── MOBILE CART ── */
.cart-fab{
  display:none;position:fixed;bottom:20px;right:20px;z-index:100;
  background:var(--brand);color:#fff;border:none;border-radius:50px;
  padding:12px 18px;font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;box-shadow:0 6px 20px rgba(26,86,219,.4);
  align-items:center;gap:8px;transition:var(--tr);
}
.cart-fab:hover{transform:translateY(-2px);}
.cart-fab svg{width:16px;height:16px;stroke:#fff;}
.cart-drawer{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:var(--white);border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.15);
  max-height:85vh;flex-direction:column;
  transform:translateY(100%);transition:transform .3s ease;
}
.cart-drawer.open{transform:translateY(0);}
.drawer-handle{width:40px;height:4px;background:var(--border);border-radius:4px;margin:12px auto 0;}

/* ── MODAL ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s;padding:16px;
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{
  background:var(--white);border-radius:16px;padding:24px;
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  transform:translateY(16px);transition:transform .2s;
  box-shadow:var(--shadow-md);
}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-title{font-size:17px;font-weight:800;margin-bottom:18px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;}
.field input,.field select,.field textarea{
  width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:14px;color:var(--text);outline:none;transition:var(--tr);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light);}
.field textarea{resize:vertical;min-height:76px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;flex-wrap:wrap;}

/* ── TOAST ── */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:9998;display:flex;flex-direction:column;gap:7px;}
.toast{
  padding:10px 14px;border-radius:var(--radius-sm);background:var(--text);color:#fff;
  font-size:13px;font-weight:600;box-shadow:var(--shadow-md);
  transform:translateX(120%);transition:transform .3s ease;
  min-width:200px;display:flex;align-items:center;gap:8px;
}
.toast svg{width:15px;height:15px;stroke:#fff;flex-shrink:0;}
.toast.show{transform:translateX(0);}
.toast.success{background:var(--accent2);}
.toast.error{background:var(--danger);}
.toast.warning{background:var(--accent);color:var(--text);}
.toast.warning svg{stroke:var(--text);}

/* ── MISC ── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.page-header h2{font-size:19px;font-weight:800;}
.page-header p{font-size:12px;color:var(--text3);margin-top:2px;}
.empty-state{text-align:center;padding:48px 16px;color:var(--text3);}
.empty-icon-wrap{display:inline-flex;padding:16px;background:var(--surface);border-radius:50%;margin-bottom:12px;}
.empty-icon-wrap svg{width:32px;height:32px;stroke:var(--text3);}
.empty-state p{font-size:13px;}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;}
.tag-blue{background:var(--brand-light);color:var(--brand);}

/* ── RECEIPT ── */
.receipt{font-family:'Space Grotesk',monospace;border:1px dashed var(--border);border-radius:var(--radius-sm);padding:18px;background:var(--surface);margin:14px 0;}
.receipt-header{text-align:center;margin-bottom:14px;}
.receipt-header img{height:30px;margin-bottom:6px;object-fit:contain;}
.receipt-header h3{font-size:15px;font-weight:800;}
.receipt-header p{font-size:11px;color:var(--text3);}
.receipt-divider{border:none;border-top:1px dashed var(--border);margin:10px 0;}
.receipt-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;}
.receipt-total{font-size:14px;font-weight:800;}
.receipt-footer{text-align:center;font-size:11px;color:var(--text3);margin-top:8px;}

/* ── TABS ── */
.tab-bar{display:flex;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;}
.tab{padding:10px 18px;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--tr);white-space:nowrap;}
.tab:hover{color:var(--text);}
.tab.active{color:var(--brand);border-bottom-color:var(--brand);}

/* ── PROMO ── */
.promo-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;align-items:flex-start;gap:14px;margin-bottom:10px;transition:var(--tr);}
.promo-card:hover{box-shadow:var(--shadow);}
.promo-badge-icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#F59E0B,#F97316);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.promo-badge-icon svg{width:20px;height:20px;stroke:#fff;}
.promo-info{flex:1;min-width:0;}
.promo-name{font-size:14px;font-weight:700;}
.promo-desc{font-size:12px;color:var(--text3);margin-top:2px;}
.promo-val{font-size:12px;color:var(--accent);font-weight:700;margin-top:4px;}
.promo-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;flex-wrap:wrap;}

/* ── TOGGLE ── */
.toggle-switch{position:relative;width:40px;height:22px;display:inline-block;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:#CBD5E1;border-radius:22px;cursor:pointer;transition:.3s;}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
input:checked+.toggle-slider{background:var(--accent2);}
input:checked+.toggle-slider::before{transform:translateX(18px);}

.btn-wa{background:#25D366;color:#fff;border:none;}
.btn-wa:hover{background:#1fba59;}
.btn-wa svg{stroke:#fff;}

/* ── PAYMENT METHOD ── */
.pay-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;}
.pay-method-card{
  border:2px solid var(--border);border-radius:var(--radius);padding:14px 12px;
  cursor:pointer;transition:var(--tr);text-align:center;background:var(--white);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.pay-method-card:hover{border-color:var(--brand);background:var(--brand-light);}
.pay-method-card.selected{border-color:var(--brand);background:var(--brand-light);}
.pay-method-card.selected .pay-icon-wrap{background:var(--brand);}
.pay-method-card.selected .pay-icon-wrap svg{stroke:#fff;}
.pay-method-card.selected .pay-label{color:var(--brand);}
.pay-icon-wrap{
  width:44px;height:44px;border-radius:12px;background:var(--surface);
  display:flex;align-items:center;justify-content:center;transition:var(--tr);
}
.pay-icon-wrap svg{width:22px;height:22px;stroke:var(--text2);transition:var(--tr);}
.pay-label{font-size:13px;font-weight:700;color:var(--text);transition:var(--tr);}
.pay-label-sub{font-size:10px;color:var(--text3);margin-top:1px;}
.pay-cash-detail{margin-top:10px;padding:12px;background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border);}
.pay-cash-detail label{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:5px;}
.pay-cash-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;outline:none;transition:var(--tr);color:var(--text);}
.pay-cash-input:focus{border-color:var(--brand);}
.pay-change-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:8px 10px;background:var(--white);border-radius:var(--radius-sm);border:1px solid var(--border);}
.pay-change-label{font-size:12px;color:var(--text2);}
.pay-change-val{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:800;color:var(--accent2);}
.pay-change-val.negative{color:var(--danger);}
.pay-transfer-detail{margin-top:10px;padding:14px;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);border-radius:var(--radius-sm);border:1px solid #93C5FD;}
.pay-transfer-detail .bank-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.pay-transfer-detail .bank-logo{width:36px;height:36px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--brand);flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.1);}
.pay-transfer-detail .bank-info{flex:1;}
.pay-transfer-detail .bank-name{font-size:13px;font-weight:700;color:#1E40AF;}
.pay-transfer-detail .bank-num{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:800;color:#1E40AF;letter-spacing:1px;}
.pay-transfer-detail .bank-holder{font-size:11px;color:#3B82F6;}
.copy-btn{padding:6px 12px;background:#1A56DB;color:#fff;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;transition:var(--tr);}
.copy-btn:hover{background:#1043b5;}
.pay-total-bar{background:linear-gradient(135deg,var(--brand),#3B82F6);border-radius:var(--radius-sm);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;margin:12px 0;}
.pay-total-bar .lbl{color:rgba(255,255,255,.8);font-size:12px;font-weight:600;}
.pay-total-bar .val{color:#fff;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:800;}
/* confirmation order summary */
.confirm-items{background:var(--surface);border-radius:var(--radius-sm);padding:10px;border:1px solid var(--border);margin-bottom:14px;max-height:160px;overflow-y:auto;}
.confirm-item-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:5px 4px;border-bottom:1px solid var(--border);}
.confirm-item-row:last-child{border-bottom:none;}
.confirm-item-name{color:var(--text);font-weight:500;}
.confirm-item-price{color:var(--brand);font-weight:700;font-family:'Space Grotesk',sans-serif;white-space:nowrap;}
/* WA image receipt */
.wa-share-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.wa-share-opt{
  padding:12px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);
  text-align:center;cursor:pointer;transition:var(--tr);background:var(--white);
}
.wa-share-opt:hover{border-color:#25D366;background:#f0fdf4;}
.wa-share-opt-icon{width:36px;height:36px;border-radius:50%;background:#25D366;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;}
.wa-share-opt-icon svg{width:18px;height:18px;stroke:#fff;}
.wa-share-opt-label{font-size:12px;font-weight:700;color:var(--text);}
.wa-share-opt-sub{font-size:10px;color:var(--text3);margin-top:2px;}
/* canvas hidden for image generation */
#receiptCanvas{display:none;}

.cust-selector-wrap{position:relative;margin-bottom:8px;}
.cust-selector-wrap .cust-field-wrap{cursor:text;}
.cust-dropdown{
  position:absolute;bottom:100%;left:0;right:0;margin-bottom:4px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);z-index:50;max-height:180px;overflow-y:auto;display:none;
}
.cust-dropdown.open{display:block;}
.cust-opt{
  padding:9px 12px;cursor:pointer;display:flex;align-items:center;gap:10px;
  font-size:13px;border-bottom:1px solid var(--border);transition:var(--tr);
}
.cust-opt:last-child{border-bottom:none;}
.cust-opt:hover{background:var(--brand-light);}
.cust-opt-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#3B82F6);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cust-opt-info{flex:1;min-width:0;}
.cust-opt-name{font-weight:600;color:var(--text);}
.cust-opt-phone{font-size:11px;color:var(--text3);}
.cust-opt-new{color:var(--brand);font-weight:600;font-size:12px;display:flex;align-items:center;gap:6px;}
.cust-opt-new svg{width:13px;height:13px;stroke:var(--brand);}
body.dark .cust-dropdown{background:#1E293B;border-color:#334155;}
body.dark .cust-opt{border-color:#334155;}
body.dark .cust-opt:hover{background:rgba(26,86,219,.2);}
body.dark .cust-opt-name{color:#F1F5F9;}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--text3);}

/* ── FEATURE FLAG STOK ── */
.feat-flag-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;display:flex;align-items:center;gap:14px;margin-bottom:10px;transition:var(--tr);}
.feat-flag-card:hover{box-shadow:var(--shadow);}
.feat-flag-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.feat-flag-icon svg{width:20px;height:20px;}
.feat-flag-info{flex:1;min-width:0;}
.feat-flag-name{font-size:14px;font-weight:700;}
.feat-flag-desc{font-size:12px;color:var(--text3);margin-top:2px;line-height:1.4;}
.feat-flag-status.on{color:var(--accent2);font-size:11px;font-weight:700;margin-top:4px;}
.feat-flag-status.off{color:var(--text3);font-size:11px;font-weight:700;margin-top:4px;}
/* stok mode selector */
.stock-mode-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px;}
.stock-mode-opt{border:2px solid var(--border);border-radius:var(--radius-sm);padding:10px 8px;text-align:center;cursor:pointer;transition:var(--tr);background:var(--white);}
.stock-mode-opt:hover{border-color:var(--brand);}
.stock-mode-opt.selected{border-color:var(--brand);background:var(--brand-light);}
.stock-mode-opt .sm-icon{font-size:18px;margin-bottom:4px;}
.stock-mode-opt .sm-lbl{font-size:11px;font-weight:700;color:var(--text);}
.stock-mode-opt .sm-sub{font-size:10px;color:var(--text3);margin-top:1px;}
/* stok badge */
.stok-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;margin-top:4px;}
.stok-ok{background:#D1FAE5;color:#065F46;}
.stok-low{background:#FEF3C7;color:#92400E;}
.stok-out{background:#FEE2E2;color:#991B1B;}
.stok-unlimited{background:#EDE9FE;color:#5B21B6;}
/* stok alert banner */
.stok-alert-banner{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border:1px solid #F59E0B;border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:14px;display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;}
.stok-alert-banner svg{width:15px;height:15px;stroke:#92400E;flex-shrink:0;margin-top:1px;}
.stok-alert-title{font-size:12px;font-weight:700;color:#92400E;}
.stok-alert-items{font-size:11px;color:#78350F;margin-top:2px;}
/* pos stok */
.pos-stok-bar{height:3px;border-radius:2px;margin-top:5px;background:var(--border);}
.pos-stok-fill{height:100%;border-radius:2px;}
.pos-item-out{opacity:.4;cursor:not-allowed!important;}
.pos-item-out:hover{border-color:var(--border)!important;background:var(--white)!important;}
/* SA fitur panel */
.sa-fitur-header{background:linear-gradient(135deg,#1A56DB,#3B82F6);border-radius:var(--radius);padding:20px;color:#fff;margin-bottom:16px;display:flex;align-items:center;gap:14px;}
.sa-fitur-header svg{width:28px;height:28px;stroke:#fff;flex-shrink:0;}
.sa-fitur-header h3{font-size:16px;font-weight:800;}
.sa-fitur-header p{font-size:12px;opacity:.75;margin-top:2px;}
.biz-fitur-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;}
.biz-fitur-header{padding:14px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);background:var(--surface);}
.biz-fitur-header .biz-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.biz-fitur-header strong{font-size:14px;}
.biz-fitur-header .biz-type{font-size:11px;color:var(--text3);margin-left:auto;}
.biz-fitur-body{padding:14px 18px;}

/* ── ANIMATIONS ── */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  :root{--sidebar-w:200px;}
  .chart-row{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  :root{--sidebar-w:260px;}
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .topbar-hamburger{display:flex;}
  .pos-layout{grid-template-columns:1fr;}
  .pos-cart{display:none!important;}
  .cart-fab{display:flex;}
  .cart-drawer{display:flex;}
  .chart-row{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .field-row{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .modal{padding:18px;}
  .content{padding:14px;}
  .pos-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr;}
  .stat-value{font-size:20px;}
  .product-grid{grid-template-columns:1fr 1fr;}
  .pos-grid{grid-template-columns:repeat(2,1fr);}
  .tab{padding:8px 12px;font-size:12px;}
  .topbar h1{font-size:14px;}
  .toast-wrap{left:16px;right:16px;}
  .toast{min-width:unset;}
}

/* ── SYSTEM STATES ── */
.loading-overlay{
  position:fixed;inset:0;z-index:99999;display:none;
  align-items:center;justify-content:center;
  background:rgba(15,23,42,.48);backdrop-filter:blur(3px);
}
.loading-card{
  min-width:220px;padding:26px 32px;border-radius:14px;
  background:var(--white);border:1px solid var(--border);
  box-shadow:var(--shadow-md);text-align:center;
}
.loading-spinner{
  width:40px;height:40px;margin:0 auto 14px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--brand);
  animation:jb-spin .7s linear infinite;
}
.loading-message{font-size:14px;font-weight:700;color:var(--text);}
@keyframes jb-spin{to{transform:rotate(360deg)}}
button:disabled{opacity:.58;cursor:not-allowed;transform:none!important;}

/* Landing page navigation link on login */
.back-home-link{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:17px;color:rgba(255,255,255,.52);font-size:11px;font-weight:600;text-decoration:none;transition:color .2s}.back-home-link:hover{color:#fff}.back-home-link svg{width:13px;height:13px;stroke:currentColor}