/* ── Reset & Variables ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#0d9488;--teal-dark:#0f766e;--teal-dim:#134e4a;--teal-light:#ccfbf1;--teal-bg:#f0fdfa;
  --amber:#f59e0b;--amber-dark:#d97706;--amber-bg:#fffbeb;
  --red:#ef4444;--red-bg:#fef2f2;--green:#22c55e;--green-bg:#dcfce7;
  --blue:#3b82f6;--blue-bg:#eff6ff;--purple:#8b5cf6;--purple-bg:#f5f3ff;
  --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;
  --gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;
  --gray-800:#1f2937;--gray-900:#111827;
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --radius:14px;--radius-sm:10px;--radius-xs:7px;
  --shadow:0 1px 4px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 10px 25px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.06);
  --nav-h:62px;--top-h:56px;
}
html,body{height:100%;font-family:var(--font);background:var(--gray-100);color:var(--gray-800);-webkit-font-smoothing:antialiased}
#app{height:100%;display:flex;flex-direction:column}
button{cursor:pointer;font-family:var(--font);border:none;background:none}
input,select,textarea{font-family:var(--font)}
a{text-decoration:none;color:inherit}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(145deg,var(--teal-dim) 0%,var(--teal) 60%,#065f46 100%)}
.login-card{background:white;border-radius:24px;padding:36px 28px;width:100%;max-width:400px;
  box-shadow:var(--shadow-lg);animation:slideUp .35s ease both}
.login-brand{text-align:center;margin-bottom:32px}
.login-icon{width:72px;height:72px;background:var(--teal);border-radius:20px;display:flex;
  align-items:center;justify-content:center;margin:0 auto 14px;font-size:36px;
  box-shadow:0 8px 20px rgba(13,148,136,.4)}
.login-brand h1{font-size:26px;font-weight:800;color:var(--gray-900);letter-spacing:-.5px}
.login-brand p{font-size:13px;color:var(--gray-400);margin-top:4px}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:11px;font-weight:700;color:var(--gray-600);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.6px}
.form-input{width:100%;padding:13px 16px;border:2px solid var(--gray-200);border-radius:var(--radius-sm);
  font-size:15px;font-family:var(--font);background:var(--gray-50);color:var(--gray-900);
  transition:border-color .2s,background .2s,box-shadow .2s;-webkit-appearance:none}
.form-input:focus{outline:none;border-color:var(--teal);background:white;box-shadow:0 0 0 3px rgba(13,148,136,.12)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.login-error{background:var(--red-bg);color:var(--red);border:1px solid #fecaca;border-radius:var(--radius-xs);
  padding:10px 14px;font-size:13px;font-weight:500;margin-bottom:16px;display:none}
.login-error.show{display:block}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:13px 20px;
  border-radius:var(--radius-sm);font-size:14px;font-weight:700;font-family:var(--font);
  transition:all .18s;border:none;cursor:pointer;letter-spacing:.2px}
.btn-primary{background:var(--teal);color:white;box-shadow:0 4px 12px rgba(13,148,136,.35)}
.btn-primary:hover{background:var(--teal-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(13,148,136,.4)}
.btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.65;cursor:not-allowed;transform:none;box-shadow:none}
.btn-full{width:100%}
.btn-sm{padding:8px 14px;font-size:12px;border-radius:var(--radius-xs)}
.btn-danger{background:var(--red);color:white}
.btn-amber{background:var(--amber);color:white}
.btn-gray{background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-200)}
.btn-outline{background:transparent;color:var(--teal);border:2px solid var(--teal)}
.btn-ghost{background:transparent;color:var(--gray-600)}
.btn-danger:hover{filter:brightness(1.08)}
.btn-amber:hover{filter:brightness(1.05)}
.btn-gray:hover{background:var(--gray-200)}
.btn-green{background:var(--green);color:white}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.layout{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.topbar{height:var(--top-h);background:var(--teal);color:white;padding:0 16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 2px 8px rgba(13,148,136,.3);position:relative;z-index:10}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-emoji{font-size:22px}
.topbar-info{line-height:1.3}
.topbar-name{font-size:16px;font-weight:800;letter-spacing:-.3px}
.topbar-sub{font-size:11px;opacity:.75;font-weight:500}
.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-user{font-size:12px;opacity:.85;font-weight:600}
.btn-topbar{background:rgba(255,255,255,.18);color:white;padding:6px 10px;border-radius:8px;
  font-size:12px;font-weight:700;transition:background .2s}
.btn-topbar:hover{background:rgba(255,255,255,.28)}

.main{flex:1;overflow-y:auto;padding:14px;padding-bottom:calc(var(--nav-h) + 14px);
  -webkit-overflow-scrolling:touch}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:white;
  border-top:1px solid var(--gray-200);display:flex;
  box-shadow:0 -4px 16px rgba(0,0,0,.07);z-index:50}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:5px 2px;color:var(--gray-400);font-size:9px;font-weight:700;
  background:none;border:none;transition:color .2s;letter-spacing:.4px;text-transform:uppercase}
.nav-item svg{width:19px;height:19px;stroke-width:2.2}
.nav-item.active{color:var(--teal)}

/* ── Page ───────────────────────────────────────────────────────────────── */
.page-header{margin-bottom:14px}
.page-title{font-size:20px;font-weight:800;color:var(--gray-900);letter-spacing:-.5px}
.page-sub{font-size:13px;color:var(--gray-400);font-weight:500;margin-top:2px}
.section-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-row h2{font-size:17px;font-weight:800;color:var(--gray-900);letter-spacing:-.3px}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card{background:white;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:12px;animation:slideUp .25s ease both}
.card-title{font-size:11px;font-weight:700;color:var(--gray-500);text-transform:uppercase;
  letter-spacing:.6px;margin-bottom:14px;display:flex;align-items:center;gap:6px}

/* ── Stat Cards ─────────────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.stat-card{border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:5px;animation:slideUp .25s ease both}
.stat-card.teal{background:var(--teal);color:white;box-shadow:0 4px 14px rgba(13,148,136,.3)}
.stat-card.amber{background:var(--amber);color:white;box-shadow:0 4px 14px rgba(245,158,11,.3)}
.stat-card.white{background:white}
.stat-label{font-size:10px;font-weight:700;opacity:.8;text-transform:uppercase;letter-spacing:.7px}
.stat-value{font-size:18px;font-weight:800;line-height:1.2;letter-spacing:-.5px}
.stat-sub{font-size:11px;opacity:.7;font-weight:500}
.stat-card.white .stat-label{color:var(--gray-500);opacity:1}
.stat-card.white .stat-value{color:var(--gray-900)}
.stat-card.white .stat-sub{color:var(--gray-400);opacity:1}
.stat-card.profit .stat-value{color:var(--green)}
.stat-card.loss .stat-value{color:var(--red)}

/* ── List Items ─────────────────────────────────────────────────────────── */
.list-item{background:white;border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:8px;
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;
  gap:12px;animation:slideUp .2s ease both}
.list-item.clickable{cursor:pointer;transition:transform .15s,box-shadow .15s}
.list-item.clickable:active{transform:scale(.98)}
.list-item.clickable:hover{box-shadow:var(--shadow-md)}
.item-info{flex:1;min-width:0}
.item-name{font-size:14px;font-weight:600;color:var(--gray-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-meta{font-size:12px;color:var(--gray-400);font-weight:500;margin-top:2px}
.item-right{text-align:right;flex-shrink:0}
.item-amount{font-size:14px;font-weight:800;color:var(--teal);letter-spacing:-.3px}
.item-amount.red{color:var(--red)}
.item-amount.green{color:var(--green)}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase}
.badge-green{background:var(--green-bg);color:#15803d}
.badge-amber{background:var(--amber-bg);color:#92400e}
.badge-red{background:var(--red-bg);color:#b91c1c}
.badge-gray{background:var(--gray-100);color:var(--gray-500)}
.badge-teal{background:var(--teal-light);color:var(--teal-dark)}
.badge-blue{background:var(--blue-bg);color:#1d4ed8}
.badge-purple{background:var(--purple-bg);color:#6d28d9}

/* ── Category Pills ─────────────────────────────────────────────────────── */
.cat-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-pill{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;
  white-space:nowrap;border:2px solid var(--gray-200);color:var(--gray-500);
  background:white;transition:all .15s;flex-shrink:0}
.cat-pill.active{border-color:var(--teal);color:var(--teal);background:var(--teal-bg)}

/* ── Search ─────────────────────────────────────────────────────────────── */
.search-wrap{position:relative;margin-bottom:12px}
.search-box{width:100%;padding:12px 16px 12px 42px;border:2px solid var(--gray-200);
  border-radius:var(--radius-sm);font-size:15px;font-family:var(--font);background:white;
  transition:border-color .2s;-webkit-appearance:none}
.search-box:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--gray-400);pointer-events:none;font-size:16px}

/* ── Product Grid (POS) ─────────────────────────────────────────────────── */
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.product-btn{background:white;border:2px solid var(--gray-200);border-radius:var(--radius-sm);
  padding:11px 10px;text-align:left;transition:all .15s;position:relative;overflow:hidden}
.product-btn:active{transform:scale(.97);border-color:var(--teal)}
.product-btn.out-of-stock{opacity:.4}
.product-btn-name{font-size:13px;font-weight:700;color:var(--gray-800);margin-bottom:4px;
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-btn-price{font-size:15px;font-weight:800;color:var(--teal);letter-spacing:-.3px}
.product-btn-stock{font-size:10px;color:var(--gray-400);font-weight:600;margin-top:2px;text-transform:uppercase}
.product-btn-cat{font-size:9px;color:var(--teal);font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:3px;opacity:.7}

/* ── Cart ───────────────────────────────────────────────────────────────── */
.cart-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.cart-header{padding:11px 14px;border-bottom:1px solid var(--gray-100);font-size:13px;
  font-weight:700;color:var(--gray-700);display:flex;justify-content:space-between;
  align-items:center;background:var(--gray-50)}
.cart-empty{padding:24px;text-align:center;color:var(--gray-400);font-size:13px}
.cart-row{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--gray-50)}
.cart-row-name{flex:1;font-size:13px;font-weight:600;color:var(--gray-800)}
.cart-row-sub{font-size:10px;color:var(--gray-400);font-weight:500}
.qty-ctrl{display:flex;align-items:center;gap:5px}
.qty-btn{width:26px;height:26px;border-radius:50%;background:var(--gray-100);color:var(--gray-700);
  font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;
  transition:background .15s;flex-shrink:0}
.qty-btn:hover{background:var(--teal-light);color:var(--teal-dark)}
.qty-btn:active{transform:scale(.9)}
.qty-num{font-size:14px;font-weight:800;min-width:22px;text-align:center;color:var(--gray-900)}
.cart-row-price{font-size:13px;font-weight:800;color:var(--teal);min-width:72px;text-align:right}
.cart-footer{padding:12px 14px;border-top:2px solid var(--gray-100)}
.total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.total-label{font-size:14px;font-weight:700;color:var(--gray-600)}
.total-amount{font-size:24px;font-weight:800;color:var(--teal);letter-spacing:-.5px}

/* ── Payment methods ────────────────────────────────────────────────────── */
.payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.pay-btn{padding:9px 6px;background:var(--gray-100);border-radius:var(--radius-xs);font-size:11px;
  font-weight:700;color:var(--gray-500);text-align:center;transition:all .15s;border:2px solid transparent}
.pay-btn.active{background:var(--teal-bg);color:var(--teal-dark);border-color:var(--teal)}
.pay-btn.credit.active{background:var(--purple-bg);color:#6d28d9;border-color:var(--purple)}

.sell-btn{width:100%;padding:15px;background:var(--teal);color:white;border-radius:var(--radius-sm);
  font-size:16px;font-weight:800;letter-spacing:-.2px;box-shadow:0 4px 12px rgba(13,148,136,.4);
  transition:all .2s;margin-bottom:8px}
.sell-btn:hover{background:var(--teal-dark);transform:translateY(-1px)}
.sell-btn:active{transform:scale(.98)}
.sell-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.sell-btn.credit-mode{background:var(--purple);box-shadow:0 4px 12px rgba(139,92,246,.4)}
.clear-btn{width:100%;padding:10px;background:var(--gray-100);color:var(--gray-600);
  border-radius:var(--radius-xs);font-size:13px;font-weight:700}
.clear-btn:hover{background:var(--gray-200)}

/* ── Customer picker ────────────────────────────────────────────────────── */
.customer-pick{background:var(--purple-bg);border:2px solid var(--purple);border-radius:var(--radius-sm);
  padding:10px 14px;margin-bottom:10px;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;font-size:13px;font-weight:700;color:#6d28d9}

/* ── Variation chips ─────────────────────────────────────────────────────  */
.var-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.var-chip{padding:5px 10px;border:2px solid var(--gray-200);border-radius:20px;
  font-size:11px;font-weight:700;color:var(--gray-500);cursor:pointer;transition:all .15s}
.var-chip.active{border-color:var(--teal);color:var(--teal);background:var(--teal-bg)}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
  display:flex;align-items:flex-end;padding:0;animation:fadeIn .2s ease}
.modal-bg.hidden{display:none}
.modal{background:white;border-radius:24px 24px 0 0;padding:24px 20px 32px;
  width:100%;max-height:92vh;overflow-y:auto;animation:slideUp .25s ease}
.modal-hdr{font-size:17px;font-weight:800;color:var(--gray-900);margin-bottom:18px;
  display:flex;justify-content:space-between;align-items:center;letter-spacing:-.3px}
.modal-x{width:32px;height:32px;background:var(--gray-100);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gray-500)}
.modal-x:hover{background:var(--gray-200)}
.modal-footer{display:flex;gap:10px;margin-top:20px}
.modal-footer .btn{flex:1}
.modal-tabs{display:flex;gap:0;margin-bottom:18px;border-bottom:2px solid var(--gray-100)}
.modal-tab{padding:8px 16px;font-size:13px;font-weight:700;color:var(--gray-400);
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.modal-tab.active{color:var(--teal);border-bottom-color:var(--teal)}

/* ── Variation manager ───────────────────────────────────────────────────── */
.var-row{background:var(--gray-50);border-radius:var(--radius-xs);padding:10px 12px;
  margin-bottom:8px;display:flex;align-items:center;gap:8px}
.var-row-info{flex:1;font-size:13px;font-weight:600}
.var-row-price{font-size:13px;font-weight:800;color:var(--teal)}
.var-del{color:var(--red);font-size:16px;padding:4px;line-height:1}

/* ── Customer page ───────────────────────────────────────────────────────── */
.credit-bar{height:8px;background:var(--gray-200);border-radius:4px;overflow:hidden;margin-top:6px}
.credit-fill{height:100%;background:var(--red);border-radius:4px;transition:width .3s}
.debt-amount{font-size:18px;font-weight:800;color:var(--red);letter-spacing:-.3px}
.credit-tag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;
  background:var(--purple-bg);color:#6d28d9}

/* ── Settings ────────────────────────────────────────────────────────────── */
.settings-section{margin-bottom:16px}
.settings-title{font-size:11px;font-weight:700;color:var(--gray-400);text-transform:uppercase;
  letter-spacing:.7px;margin-bottom:8px;padding:0 4px}
.settings-item{background:white;border-radius:var(--radius-sm);padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;
  box-shadow:var(--shadow);cursor:pointer;transition:background .15s}
.settings-item:hover{background:var(--gray-50)}
.settings-item-left{display:flex;align-items:center;gap:12px}
.settings-item-icon{width:36px;height:36px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.settings-item-info{line-height:1.4}
.settings-item-name{font-size:14px;font-weight:700;color:var(--gray-900)}
.settings-item-sub{font-size:12px;color:var(--gray-400)}

/* ── Toggle switch ────────────────────────────────────────────────────────── */
.toggle{width:44px;height:24px;background:var(--gray-300);border-radius:12px;position:relative;
  cursor:pointer;transition:background .2s;flex-shrink:0}
.toggle.on{background:var(--teal)}
.toggle::after{content:'';width:20px;height:20px;background:white;border-radius:50%;
  position:absolute;top:2px;left:2px;transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle.on::after{transform:translateX(20px)}

/* ── Reports ─────────────────────────────────────────────────────────────── */
.pl-box{background:linear-gradient(135deg,var(--teal-dim),var(--teal-dark));border-radius:var(--radius);
  padding:20px;color:white;margin-bottom:12px;box-shadow:0 6px 20px rgba(13,148,136,.3)}
.pl-title{font-size:12px;font-weight:700;opacity:.7;text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}
.pl-amount{font-size:30px;font-weight:800;letter-spacing:-1px;margin-bottom:4px}
.pl-sub{font-size:13px;opacity:.75;font-weight:500}
.pl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pl-mini{background:rgba(255,255,255,.15);border-radius:10px;padding:12px}
.pl-mini-label{font-size:10px;font-weight:700;opacity:.7;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.pl-mini-val{font-size:16px;font-weight:800;letter-spacing:-.3px}

/* ── States ─────────────────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:48px 20px;color:var(--gray-400);animation:fadeIn .3s ease}
.empty-icon{font-size:52px;margin-bottom:12px}
.empty-text{font-size:14px;font-weight:500}
.loading-state{display:flex;align-items:center;justify-content:center;padding:48px;
  color:var(--gray-400);gap:10px;font-size:14px;font-weight:500}
.spinner{width:20px;height:20px;border:2.5px solid var(--gray-200);border-top-color:var(--teal);
  border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}

/* ── Toast ───────────────────────────────────────────────────────────────── */
#toast-container{position:fixed;top:68px;right:12px;left:12px;z-index:500;
  display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--gray-800);color:white;padding:12px 16px;border-radius:12px;
  font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);animation:toastIn .3s ease;
  display:flex;align-items:center;gap:8px}
.toast.success{background:#166534}
.toast.error{background:#991b1b}

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.divider{height:1px;background:var(--gray-100);margin:12px 0}
.text-muted{color:var(--gray-400)}.text-sm{font-size:12px}.fw-bold{font-weight:700}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.profit{color:var(--green)}.loss{color:var(--red)}
.text-center{text-align:center}.mt-12{margin-top:12px}
.list-item:nth-child(1){animation-delay:.03s}
.list-item:nth-child(2){animation-delay:.06s}
.list-item:nth-child(3){animation-delay:.09s}
.list-item:nth-child(4){animation-delay:.12s}
.list-item:nth-child(5){animation-delay:.15s}
.list-item:nth-child(n+6){animation-delay:.18s}