/* Enzz Biashara — app shell v11. One accent (teal), neutral surfaces, 13px base. */
:root{--bg:#f6f7f9;--panel:#fff;--side:#fbfbfc;--line:#e6e8ec;--line2:#eef0f3;--tx:#1f2430;--mut:#6b7280;--acc:#0d9488;--acc2:#0f766e;--accbg:#e6f6f4;--hov:#f1f3f5;--ok:#16a34a;--okbg:#e8f7ee;--warn:#b45309;--warnbg:#fef3c7;--bad:#dc2626;--badbg:#fee2e2;--r:8px;--sw:232px;--sh:0 1px 2px rgba(16,24,40,.05)}
:root[data-theme=dark]{--bg:#0f1115;--panel:#171a21;--side:#13161c;--line:#262b34;--line2:#1f242c;--tx:#e6e8ec;--mut:#8b93a1;--acc:#2dd4bf;--acc2:#5eead4;--accbg:#12332f;--hov:#1f242c;--okbg:#10301d;--warnbg:#3a2a0a;--badbg:#3b1414;--sh:none}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:13px/1.45 Inter,system-ui,sans-serif;background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600}h2{font-size:16px}h3{font-size:13px}p{margin:0}
.mut{color:var(--mut);font-size:12px}b,strong{font-weight:600}.blur{filter:blur(5px)}
.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--acc);background:var(--acc);color:#fff;border-radius:6px;font:500 12.5px Inter,sans-serif;cursor:pointer;white-space:nowrap}
:root[data-theme=dark] .btn{color:#06201c}.btn:hover{filter:brightness(.94)}
.btn.ghost{background:var(--panel);color:var(--tx);border-color:var(--line)}.btn.ghost:hover{background:var(--hov);filter:none}
.btn.sm{height:26px;padding:0 9px;font-size:12px}.btn:disabled{opacity:.45;cursor:not-allowed}
.lnk{background:none;border:0;color:var(--acc);font:500 12px Inter;cursor:pointer;padding:0}
input,select{height:30px;width:100%;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--tx);font:13px Inter,sans-serif;outline:0}
input:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--accbg)}
label{display:block;margin:10px 0 4px;font-size:12px;font-weight:500;color:var(--mut)}
.pill,.chip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;background:var(--accbg);color:var(--acc2);font-size:11px;font-weight:600;text-transform:capitalize}
.chip.up,.pill.ok{background:var(--okbg);color:var(--ok)}.chip.down,.pill.bad{background:var(--badbg);color:var(--bad)}.pill.warn{background:var(--warnbg);color:var(--warn)}
.err{color:var(--bad);font-size:12px;min-height:0}.low{color:var(--bad)}
.empty{padding:28px;text-align:center;color:var(--mut)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}.card.flush{padding:0;overflow:hidden}
.card-h{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:8px}
/* shell */
#app{display:none;grid-template-columns:var(--sw) minmax(0,1fr);height:100vh;transition:grid-template-columns .15s}
aside{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;border-bottom:1px solid var(--line)}
.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
:root[data-theme=dark] .brand-mark{color:#06201c}
.brand div{min-width:0;flex:1;line-height:1.2}.brand b{font-size:13px;display:block}.brand strong{color:var(--acc)}.brand small{color:var(--mut);font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#collapse{border:0;background:none;color:var(--mut);cursor:pointer;padding:4px;border-radius:5px}#collapse:hover{background:var(--hov)}
.nav-caption{display:none}#nav{flex:1;overflow:auto;padding:8px}
.grp{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:12px 8px 4px}
#nav a{display:flex;align-items:center;gap:10px;height:30px;padding:0 8px;border-radius:6px;color:var(--tx);cursor:pointer;margin-bottom:1px;font-weight:500}
#nav a .i{color:var(--mut)}#nav a:hover{background:var(--hov)}#nav a.on{background:var(--accbg);color:var(--acc2)}#nav a.on .i{color:var(--acc)}
#nav .tag{margin-left:auto;font-size:10px;color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:0 6px;text-transform:capitalize}
.side-f{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.av,.top-avatar{width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
:root[data-theme=dark] .av,:root[data-theme=dark] .top-avatar{color:#06201c}
.meta{flex:1;min-width:0;line-height:1.2}.meta small{color:var(--mut);font-size:11px;display:block}
#out{border:0;background:none;color:var(--mut);cursor:pointer;padding:4px;border-radius:5px}#out:hover{background:var(--hov);color:var(--bad)}
body.collapsed{--sw:56px}body.collapsed .brand div,body.collapsed .meta,body.collapsed #nav a span,body.collapsed .grp,body.collapsed #out{display:none}
body.collapsed #nav a{justify-content:center}body.collapsed .brand,body.collapsed .side-f{justify-content:center;padding:0}body.collapsed #collapse{display:none}
.shell{display:flex;flex-direction:column;min-width:0;height:100vh}
.top{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line);flex:none}
.top-left,.top-actions{display:flex;align-items:center;gap:10px}.crumb{color:var(--mut)}.crumb i{margin:0 6px;font-style:normal}.crumb b{color:var(--tx)}
.mobile-menu{display:none;border:0;background:none;font-size:18px;color:var(--tx);cursor:pointer}
.shop-context{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:12px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.theme-toggle{height:28px;padding:0 10px;border:1px solid var(--line);background:var(--panel);color:var(--tx);border-radius:6px;font:500 12px Inter;cursor:pointer;display:flex;gap:6px;align-items:center}
#view{flex:1;overflow:auto;padding:16px 20px 24px;min-height:0}
/* page header + KPIs (shared by all views) */
.dash-hero,.stock-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.dash-hero h2,.stock-head h2{font-size:16px}.dash-hero p,.stock-head p,.hero-date{color:var(--mut);font-size:12px}
.eyebrow{display:none}.hero-actions{display:flex;align-items:center;gap:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.kpi{display:flex;gap:12px;align-items:flex-start}.kpi>div:last-child{display:flex;flex-direction:column;gap:2px}
.kpi .ic{width:30px;height:30px;border-radius:7px;background:var(--accbg);color:var(--acc);display:grid;place-items:center;flex:none}
.kpi b{font-size:20px;font-weight:600;letter-spacing:-.01em}.kpi>span.mut{display:block}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin:4px 0 8px}.section-head span{color:var(--mut);font-size:12px}
.qa{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.dash-search{margin-bottom:8px;max-width:420px}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.mv,.row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line2);justify-content:space-between}.mv:first-of-type{border-top:0}
.rk{width:18px;color:var(--mut);font-size:12px}.acts{display:flex;gap:6px}
.pn{display:flex;align-items:center;gap:10px;min-width:0}.pn>span:last-child{min-width:0}
.im{position:relative;display:grid;place-items:center;background:var(--accbg);color:var(--acc);font-weight:600;border-radius:6px;overflow:hidden;flex:none}
.im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* tables */
.tw{overflow:auto;max-height:100%}table{width:100%;border-collapse:collapse}
th{position:sticky;top:0;background:var(--side);text-align:left;font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}tr:hover td{background:var(--hov)}.num{text-align:right}
/* toolbar + stock */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.toolbar input{max-width:280px}.toolbar .sp{flex:1}
.seg2{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)}
.seg2 button{height:28px;padding:0 10px;border:0;background:none;color:var(--mut);font:500 12px Inter;cursor:pointer}.seg2 button.on{background:var(--accbg);color:var(--acc2)}
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.stock-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stock-image{position:relative;aspect-ratio:4/3;display:grid;place-items:center;background:var(--accbg);color:var(--acc);font-weight:600;font-size:22px}
.stock-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stock-badge{display:none}
.stock-body{padding:10px}.stock-name{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stock-code{color:var(--mut);font-size:11px}
.stock-price-row{display:flex;justify-content:space-between;margin:6px 0 8px}.stock-qty{color:var(--mut);font-size:12px}.stock-actions{display:flex;gap:6px}
/* POS */
.pos-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;height:100%;min-height:0}
.pos-products{display:flex;flex-direction:column;min-height:0}.pos-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pos-head .mut:not(.pos-count){display:none}.pos-count{display:flex;gap:5px;align-items:baseline}.pos-count span{color:var(--mut);font-size:12px}
.pos-search{position:relative;margin-bottom:10px}.pos-search span{position:absolute;left:10px;top:5px;color:var(--mut)}.pos-search input{padding-left:30px}
.pos-section-line{display:none}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;overflow:auto;align-content:start;flex:1;padding:2px}
.product-card{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;color:var(--tx);font-family:inherit}
.product-card:hover{border-color:var(--acc)}.product-card:disabled{opacity:.45;cursor:not-allowed}
.product-photo{position:relative;aspect-ratio:4/3;display:grid;place-items:center;background:var(--accbg);color:var(--acc);font-size:22px;font-weight:600}.product-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product-body{padding:8px 10px}.product-name{font-size:12.5px;font-weight:500;line-height:1.3;height:32px;overflow:hidden}.product-price{font-weight:600;margin-top:2px}.product-meta{display:flex;justify-content:space-between;color:var(--mut);font-size:11px}
.cartp{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-height:0}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}.cart-head b{font-size:14px}.cart-live{display:flex;align-items:center;gap:5px;color:var(--ok);font-size:11px;font-weight:600}.cart-live i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.cart-body{flex:1;overflow:auto;padding:4px 14px}.cart-line{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line2)}
.qty{display:flex;align-items:center;gap:8px}.checkout{padding:12px 14px;border-top:1px solid var(--line);background:var(--side);border-radius:0 0 var(--r) var(--r)}
.checkout-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.tot{font-size:20px}.checkout-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.checkout-fields label{margin-top:0}.checkout-btn{width:100%;height:36px;margin-top:10px}
.lockbox{text-align:center;max-width:460px;margin:40px auto}.lockbox .ic{color:var(--acc);margin-bottom:6px}
/* dialog + toast */
.ov{position:fixed;inset:0;background:rgba(15,17,21,.45);display:grid;place-items:center;z-index:50}.ov .card{width:min(380px,92vw);box-shadow:0 12px 40px rgba(0,0,0,.25)}.ov .row{border:0;gap:8px;justify-content:flex-end}
#toast{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:8px 14px;border-radius:6px;z-index:60;font-size:12.5px}
/* login */
#login{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--panel)}
.login-stage{background:var(--side);border-right:1px solid var(--line);padding:40px;display:flex;flex-direction:column;justify-content:space-between}
.login-orbit,.login-points{display:none}.login-brandline,.mobile-brandline{display:flex;align-items:center;gap:10px;font-weight:600}.mobile-brandline{display:none;margin-bottom:20px}.login-brandline b,.mobile-brandline b{color:var(--acc)}
.login-copy h1{font-size:28px;line-height:1.2;letter-spacing:-.02em;margin:6px 0 10px}.login-copy em{font-style:normal;color:var(--acc)}.login-copy p,.login-foot,.login-sub,.login-note{color:var(--mut);font-size:12.5px}.login-foot{font-size:11px;letter-spacing:.06em}
.login-panel{display:grid;place-items:center;padding:24px}.login-form-wrap{width:min(340px,100%)}.login-form-wrap h2{font-size:18px;margin:4px 0}.login-sub{margin-bottom:16px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}.login-submit{width:100%;height:34px;margin-top:14px}.login-note{margin-top:14px;text-align:center}
@media(max-width:900px){#app{grid-template-columns:1fr}aside{position:fixed;inset:0 auto 0 0;width:240px;z-index:40;transform:translateX(-100%);transition:transform .2s}body.menu-open aside{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}.mobile-menu{display:block}.shop-context,.theme-toggle .theme-label{display:none}
.pos-shell{grid-template-columns:1fr;height:auto}.cartp{position:sticky;bottom:0}.product-grid{overflow:visible}#view{padding:12px}#login{grid-template-columns:1fr}.login-stage{display:none}.mobile-brandline{display:flex}body.collapsed{--sw:232px}}