:root{--bg:#0f1720;--panel:#17212b;--panel-2:#1e2b38;--border:#2a3a4a;--text:#e7eef5;--muted:#8fa3b5;--brand:#17a673;--brand-2:#12c48b;--danger:#e5484d;--warn:#f5a524;--accent:#3b82f6;--radius:12px}*{box-sizing:border-box}body,html{padding:0;margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,#14324a 0,var(--bg) 55%)}.login-card{width:360px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:14px}.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:6px}.login-logo{font-size:40px;color:var(--brand-2);line-height:1}.login-brand h1{margin:0;font-size:24px;letter-spacing:.5px}.login-brand p{margin:0}.login-brand p,.login-card label{color:var(--muted);font-size:13px}.login-card label{display:flex;flex-direction:column;gap:6px}.login-card input{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:12px;border-radius:8px;font-size:16px}.login-card button{margin-top:8px;background:var(--brand);color:#fff;border:0;padding:13px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer}.login-card button:hover{background:var(--brand-2)}.login-error{background:rgba(229,72,77,.12);border:1px solid var(--danger);color:#ffb3b5;padding:10px;border-radius:8px;font-size:13px}.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}.sidebar{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;height:100vh}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}.sidebar-brand .logo{font-size:26px;color:var(--brand-2)}.sidebar-brand b{font-size:18px;letter-spacing:.5px}.nav{flex-direction:column;padding:6px;gap:2px;overflow-y:auto}.nav,.nav a{display:flex}.nav a{align-items:center;gap:11px;padding:11px 13px;border-radius:9px;color:var(--muted);font-size:14px}.nav a .ic{width:20px;text-align:center;font-size:16px}.nav a:hover{background:var(--panel-2);color:var(--text)}.nav a.active{background:rgba(18,196,139,.14);color:var(--brand-2);font-weight:600}.sidebar-foot{margin-top:auto;padding:12px;border-top:1px solid var(--border);font-size:13px}.sidebar-foot .who{color:var(--text);font-weight:600}.sidebar-foot .role{color:var(--muted);font-size:12px;text-transform:capitalize}.logout-btn{margin-top:10px;width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);padding:9px;border-radius:8px;cursor:pointer}.logout-btn:hover{color:var(--text);border-color:var(--danger)}.main{display:flex;flex-direction:column;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--panel);position:-webkit-sticky;position:sticky;top:0;z-index:5}.topbar h2{margin:0;font-size:18px}.branch-chip{background:var(--panel-2);border:1px solid var(--border);color:var(--muted);padding:6px 12px;border-radius:20px;font-size:13px}.content{padding:24px}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:16px;gap:16px}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.kpi .label{color:var(--muted);font-size:13px}.kpi .value{font-size:28px;font-weight:700;margin-top:6px}.kpi .sub{color:var(--muted);font-size:12px;margin-top:4px}.kpi.warn .value{color:var(--warn)}.kpi.danger .value{color:var(--danger)}.kpi.good .value{color:var(--brand-2)}.section-title{font-size:15px;color:var(--muted);margin:28px 0 12px;text-transform:uppercase;letter-spacing:.6px}table.grid{width:100%;border-collapse:collapse}table.grid td,table.grid th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);font-size:14px}table.grid th{color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.badge,table.grid th{font-weight:600;font-size:12px}.badge{display:inline-block;padding:2px 9px;border-radius:12px}.badge.danger{background:rgba(229,72,77,.15);color:#ff8a8d}.badge.warn{background:rgba(245,165,36,.15);color:#ffcb73}.badge.good{background:rgba(18,196,139,.15);color:var(--brand-2)}.placeholder{color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius);padding:40px;text-align:center}.mini-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:7px 12px;border-radius:8px;font-size:13px;cursor:pointer;margin-left:6px}.mini-btn:hover{border-color:var(--brand)}.mini-btn.danger:hover{border-color:var(--danger);color:#ff9b9d}.primary-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:11px 16px;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;text-align:center}.primary-btn.brand{background:var(--brand);color:#fff;border-color:var(--brand)}.primary-btn.brand:hover{background:var(--brand-2)}.primary-btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:50}.modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;width:380px;max-width:92vw}.modal.success{text-align:center;width:340px}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.modal-x{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer}.modal-form{gap:12px}.modal-form,.modal-form label{display:flex;flex-direction:column}.modal-form label{gap:6px;font-size:13px;color:var(--muted)}.modal-form input,.modal-form select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:11px;border-radius:8px;font-size:15px}.rcpt-no{font-size:20px;font-weight:700;margin:6px 0;letter-spacing:.5px}.rcpt-change{font-size:18px;color:var(--brand-2);margin-bottom:8px}.success-actions{display:flex;gap:10px;margin-top:16px}.success-actions>*{flex:1 1}.pos{display:grid;grid-template-columns:1fr 420px;grid-gap:0;gap:0;height:calc(100vh - 65px)}.pos-catalog{padding:16px;overflow-y:auto;border-right:1px solid var(--border)}.pos-search{width:100%;padding:14px 16px;font-size:17px;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:10px;margin-bottom:14px}.pos-search:focus{outline:none;border-color:var(--brand)}.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-gap:12px;gap:12px}.pos-prod{text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:7px;min-height:96px;color:var(--text)}.pos-prod:hover{border-color:var(--brand);background:var(--panel-2)}.pos-prod.out{opacity:.45;cursor:not-allowed}.pp-name{font-weight:600;font-size:14px;line-height:1.25}.pp-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pp-sku{color:var(--muted);font-size:11px}.tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px}.tag.rx{background:rgba(59,130,246,.2);color:#7fb0ff}.tag.ex{background:rgba(245,165,36,.2);color:#ffcb73}.pp-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline}.pp-price{font-size:17px;font-weight:700;color:var(--brand-2)}.pp-stock{font-size:11px;color:var(--muted)}.pp-stock.low{color:var(--warn)}.pos-cart{display:flex;flex-direction:column;background:var(--panel);height:100%;overflow:hidden}.cart-head{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:600}.cart-head .cashier{color:var(--muted);font-weight:400;font-size:13px}.cart-lines{flex:1 1;overflow-y:auto;padding:8px 12px;min-height:80px}.cart-empty{color:var(--muted);text-align:center;padding:30px 10px}.cart-line{border-bottom:1px solid var(--border);padding:10px 4px}.cl-top{display:flex;justify-content:space-between}.cl-name{font-weight:600;font-size:14px}.cl-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px}.cl-x:hover{color:var(--danger)}.cl-row{gap:8px;margin-top:7px}.cl-row,.qty{display:flex;align-items:center}.qty{border:1px solid var(--border);border-radius:8px;overflow:hidden}.qty button{width:30px;background:var(--panel-2);font-size:18px;cursor:pointer}.qty button,.qty input{height:32px;border:0;color:var(--text)}.qty input{width:44px;text-align:center;background:transparent;font-size:15px}.cl-unit{color:var(--muted);font-size:13px}.cl-total{margin-left:auto;font-weight:700}.cl-disc{margin-left:auto;color:var(--warn);font-size:13px}.disc-sel{flex:1 1;padding:6px 8px;font-size:12px}.disc-pct,.disc-sel{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:7px}.disc-pct{width:60px;padding:6px}.cart-cust{padding:10px 14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}.cart-cust select,.sc-fields input{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:9px;border-radius:8px;font-size:13px;width:100%}.sc-fields{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}.cart-totals{padding:12px 16px;border-top:1px solid var(--border)}.r-row,.trow{padding:2px 0;font-size:14px}.grand,.r-row,.trow{display:flex;justify-content:space-between}.grand{font-size:20px;font-weight:800;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}.cart-pay{padding:10px 16px;border-top:1px solid var(--border)}.pay-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:13px;color:var(--muted)}.pay-line{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;grid-gap:6px;gap:6px;margin-bottom:6px}.pay-line input,.pay-line select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:8px;border-radius:7px;font-size:13px;min-width:0}.pay-summary{display:flex;justify-content:space-between;margin-top:6px;font-size:14px}.pay-summary .owed{color:var(--danger);font-weight:700}.pay-summary .change{color:var(--brand-2);font-weight:700}.pos-error{background:rgba(229,72,77,.12);border:1px solid var(--danger);color:#ffb3b5;padding:9px 12px;border-radius:8px;margin:8px 16px;font-size:13px}.checkout-btn{margin:10px 16px 16px;padding:16px;background:var(--brand);color:#fff;border:0;border-radius:11px;font-size:17px;font-weight:700;cursor:pointer}.checkout-btn:disabled{background:var(--panel-2);color:var(--muted);cursor:not-allowed}.checkout-btn:not(:disabled):hover{background:var(--brand-2)}.receipt-wrap{display:flex;flex-direction:column;align-items:center}.receipt{width:320px;background:#fff;color:#111;padding:18px 20px;border-radius:6px;font-family:Menlo,Consolas,monospace;font-size:12px;line-height:1.5}.receipt .r-center{text-align:center}.receipt .r-strong{font-weight:700}.receipt .r-sm{font-size:11px}.receipt .r-muted{color:#666}.receipt .r-rule{border-top:1px dashed #999;margin:8px 0}.receipt .r-row{display:flex;justify-content:space-between;gap:12px}.receipt .r-items{width:100%;border-collapse:collapse}.receipt .r-items td{vertical-align:top;padding:2px 0}.receipt .r-amt{text-align:right;white-space:nowrap}.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}.toolbar .search{flex:1 1;min-width:220px;padding:10px 14px;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:9px;font-size:14px}.btn{background:var(--brand);color:#fff;border:0;padding:10px 16px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;text-align:center}.btn:hover{background:var(--brand-2)}.btn.ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--border)}.btn.ghost:hover{border-color:var(--brand)}.btn.sm{padding:6px 11px;font-size:13px}.btn:disabled{opacity:.5;cursor:not-allowed}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:14px 18px;gap:14px 18px}.form-grid.one{grid-template-columns:1fr}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.field input,.field select,.field textarea{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:8px;font-size:15px;width:100%}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand)}.field .hint{font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0}.check-row{gap:18px;flex-wrap:wrap}.check-row,.check-row label{display:flex;align-items:center}.check-row label{gap:7px;font-size:14px;color:var(--text);text-transform:none;letter-spacing:0}.check-row input{width:auto}.form-actions{display:flex;gap:10px;margin-top:20px}.card h3{margin:0 0 14px;font-size:16px}.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--border)}.tabs a{padding:9px 14px;color:var(--muted);font-size:14px;border-bottom:2px solid transparent}.tabs a.active{color:var(--brand-2);border-color:var(--brand-2);font-weight:600}.right{text-align:right}.muted{color:var(--muted)}.ok-banner{background:rgba(18,196,139,.12);border:1px solid var(--brand);color:var(--brand-2);padding:9px 12px;border-radius:8px;font-size:13px;margin-bottom:12px}.pill{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:600;background:var(--panel-2);color:var(--muted);border:1px solid var(--border)}.mobile-bar,.shell-backdrop{display:none}.rider-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.rider-top{position:-webkit-sticky;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--panel);border-bottom:1px solid var(--border)}.rider-brand{font-size:18px;font-weight:700}.rider-brand .logo,.rider-brand b{color:var(--brand-2)}.rider-signout{background:var(--panel-2);border:1px solid var(--border);color:var(--muted);padding:8px 12px;border-radius:8px;font-size:13px;cursor:pointer}.rider-main{flex:1 1;width:100%;max-width:620px;margin:0 auto}.deliv-cards{display:flex;flex-direction:column;gap:12px}.deliv-card{display:block;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px}.deliv-card:active{border-color:var(--brand)}.deliv-card .dc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.deliv-card .dc-no{font-weight:700}.deliv-card .dc-recipient{font-size:15px}.deliv-card .dc-addr{color:var(--muted);font-size:13px;margin-top:2px}.deliv-card .dc-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--muted)}@media (max-width:900px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;top:0;left:0;height:100vh;width:258px;transform:translateX(-100%);transition:transform .22s ease;z-index:60}.sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.55)}.shell-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}.mobile-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--border);position:-webkit-sticky;position:sticky;top:0;z-index:20}.hamburger{background:var(--panel-2);border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:9px;font-size:18px;cursor:pointer}.mb-brand{font-weight:800;font-size:17px}.mb-brand .logo{color:var(--brand-2)}.content{padding:14px}.topbar{padding:12px 14px}.topbar h2{font-size:16px}.form-grid,.form-grid.one{grid-template-columns:1fr}.deliv-detail{grid-template-columns:1fr!important}.pos{grid-template-columns:1fr;height:auto}.pos-catalog{border-right:0;border-bottom:1px solid var(--border)}.pos-cart{height:auto}.kpi-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.card{overflow-x:auto}table.grid{min-width:560px}.form-actions{flex-wrap:wrap}.form-actions>.btn,.form-actions>.primary-btn,.form-actions>form{flex:1 1 auto}.btn,.primary-btn{min-height:44px}}.track-wrap{min-height:100vh;display:grid;place-items:start center;padding:20px;background:radial-gradient(1000px 500px at 50% -10%,#14324a 0,var(--bg) 55%)}.track-card{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px;margin-top:24px}.track-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.track-brand{font-size:20px;font-weight:800;color:var(--brand-2)}.stepper{display:flex;justify-content:space-between;margin:6px 0 18px;position:relative}.stepper:before{content:"";position:absolute;top:7px;left:8%;right:8%;height:2px;background:var(--border)}.step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1;z-index:1}.step .dot{width:16px;height:16px;border-radius:50%;background:var(--panel-2);border:2px solid var(--border)}.step.done .dot{background:var(--brand-2);border-color:var(--brand-2)}.step.current .dot{box-shadow:0 0 0 4px rgba(18,196,139,.25)}.step .lbl{font-size:10px;color:var(--muted);text-align:center}.step.done .lbl{color:var(--text)}.track-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:14px;gap:10px;flex-wrap:wrap}.track-addr{margin-top:14px;font-size:13px;border-top:1px solid var(--border);padding-top:12px}.track-done{background:rgba(18,196,139,.12);border:1px solid var(--brand);color:var(--brand-2);padding:24px;border-radius:12px;text-align:center;font-size:18px;font-weight:700}.rider-pin{font-size:26px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));text-align:center}.leaflet-container{font-family:inherit}.timeline{display:flex;flex-direction:column;gap:2px}.tl-item{display:flex;gap:12px;padding:6px 0;position:relative}.tl-item:not(:last-child):before{content:"";position:absolute;left:5px;top:20px;bottom:-6px;width:2px;background:var(--border)}.tl-dot{width:12px;height:12px;border-radius:50%;margin-top:4px;flex:0 0 auto;background:var(--muted);z-index:1}.tl-dot.good{background:var(--brand-2)}.tl-dot.warn{background:var(--warn)}.tl-dot.danger{background:var(--danger)}@media print{.no-print,.sidebar,.topbar{display:none!important}.shell{display:block}.content,.main{padding:0!important}body{background:#fff}.receipt{width:100%;border-radius:0;padding:0}}