:root{
  --blue:#0b3fbd; --blue2:#0a36a4; --bg:#f5f5f7; --panel:#fff; --ink:#141416;
  --muted:#6e7079; --line:#dedfe4; --sidebar:#090a0c; --sidebarText:#c8cad1;
  --green:#067a55; --greenBg:#d9f8eb; --orange:#a65b05; --orangeBg:#fff0c6;
  --red:#d90013; --shadow:0 1px 2px rgba(0,0,0,.08); --radius:12px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
#app{min-height:100vh;display:flex}.sidebar{width:250px;background:var(--sidebar);color:white;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:30;box-shadow:1px 0 0 #1e1f23}.shell{margin-left:250px;width:calc(100% - 250px);min-height:100vh}
.brand{height:64px;padding:0 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #24252a}.brand-icon{width:38px;height:38px;border-radius:8px;background:var(--blue);display:grid;place-items:center;font-size:22px}.brand-name{font-size:18px;font-weight:900;letter-spacing:-.2px}.brand-sub{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:2px;color:#9196a2;margin-top:1px}
nav{padding:12px 8px 70px;overflow:auto;flex:1}.nav-section{font-size:9.5px;letter-spacing:1.8px;color:#9aa1ad;margin:18px 8px 7px;font-weight:800;text-shadow:0 1px 0 rgba(0,0,0,.35)}.nav-item{border:0;background:transparent;color:var(--sidebarText);display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:7px;text-align:left;font-weight:650;margin:2px 0}.nav-item:hover{background:#15171c;color:white}.nav-item.active{background:var(--blue);color:white}.nav-icon{width:19px;text-align:center;font-size:15px}.sidebar-foot{height:42px;border-top:1px solid #24252a;padding:13px 10px;color:#586070;font-size:10px}
.topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 26px;position:sticky;top:0;z-index:20}.top-title{font-weight:800}.userbox{margin-left:auto;display:flex;align-items:center;gap:9px}.userbox small{display:block;color:#6d7280;font-size:11px;margin-top:2px}.avatar{width:34px;height:34px;border-radius:7px;background:var(--blue);display:grid;place-items:center;color:white;font-weight:800}.mobile-menu{display:none;border:0;background:transparent;font-size:24px;margin-right:12px}
.content{padding:28px 28px 42px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.page-title h1{font-size:30px;line-height:1.1;margin:0 0 6px;letter-spacing:-.7px}.page-title p{margin:0;color:var(--muted);font-size:14px}.primary{border:0;border-radius:6px;background:var(--blue);color:white;padding:10px 18px;font-weight:750}.primary:hover{background:var(--blue2)}.secondary{border:1px solid var(--line);border-radius:7px;background:white;padding:9px 14px;font-weight:650}.danger{color:var(--red);border-color:#f4c5ca}.btn-sm{padding:7px 10px;font-size:12px}.btn-row{display:flex;gap:8px;align-items:center}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card-pad{padding:20px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stat{min-height:118px;padding:20px;position:relative}.stat-label{text-transform:uppercase;letter-spacing:1.4px;color:#696c74;font-size:11px;font-weight:800}.stat-value{font:750 24px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;margin-top:12px}.stat-sub{color:#70737b;font-size:12px;margin-top:6px}.stat-icon{position:absolute;right:20px;top:20px;width:40px;height:40px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:20px}.i-blue{background:var(--blue)}.i-red{background:#ed0b14}.i-orange{background:#f59b08}.i-dark{background:#3c3c42}.i-purple{background:#8e2de2}.i-green{background:#05986d}.i-cyan{background:#1563df}
.dashboard-lower{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:22px}.chart-card{padding:20px;min-height:340px}.card-title{font-weight:800;font-size:16px;margin:0 0 16px}.bar-chart{height:250px;display:flex;align-items:flex-end;gap:14px;padding:16px 10px 0;border-bottom:1px solid #bfc1c7}.bar-slot{height:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;position:relative}.bar{width:min(54px,70%);background:linear-gradient(#164ac7,#0b3fbd);border-radius:5px 5px 0 0;min-height:2px}.bar-label{position:absolute;bottom:-25px;font-size:11px;color:#7b7f88;white-space:nowrap}.donut-wrap{display:grid;place-items:center;height:215px}.donut{width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--blue) 0 75%,#f6a00d 75% 100%);position:relative}.donut:after{content:"";position:absolute;inset:35px;background:#fff;border-radius:50%}.legend{display:flex;justify-content:space-between;gap:16px;font-size:13px;margin:7px 0}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;background:var(--blue)}.dot.orange{background:#f6a00d}
.toolbar{display:flex;gap:12px;margin-bottom:15px}.search{position:relative;flex:1}.search input{width:100%;height:38px;border:1px solid var(--line);border-radius:7px;padding:0 12px 0 38px;background:#fff}.search:before{content:"⌕";position:absolute;left:13px;top:7px;font-size:19px;color:#6d7380}.toolbar select,.form-control{height:38px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 12px;min-width:190px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th{text-align:left;color:#676a73;text-transform:uppercase;letter-spacing:.5px;font-size:11px;padding:12px 8px;border-bottom:1px solid var(--line)}.table td{padding:13px 8px;border-bottom:1px solid var(--line);font-size:13px}.table tr:last-child td{border-bottom:0}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.money{font-weight:750;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.linkish{color:var(--blue);font-family:ui-monospace,monospace}.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:750;background:#f0f0f2;border:1px solid #e0e0e3}.badge.green{background:var(--greenBg);border-color:#9fe9ca;color:var(--green)}.badge.orange{background:var(--orangeBg);border-color:#ffda72;color:var(--orange)}.icon-actions{display:flex;justify-content:flex-end;gap:10px}.icon-btn{border:0;background:transparent;padding:4px;color:#222;font-size:15px}.icon-btn.red{color:red}
.pos-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(350px,1fr);gap:16px;align-items:start}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.product-card{height:140px;padding:18px;background:white;border:1px solid var(--line);border-radius:9px;text-align:left;transition:.15s;display:flex;flex-direction:column}.product-card:hover{border-color:#a8b8eb;transform:translateY(-1px);box-shadow:0 3px 12px rgba(0,0,0,.05)}.product-cat{text-transform:uppercase;font-size:10px;color:#6c6f76;font-weight:800}.product-name{font-weight:750;margin-top:8px}.product-price{font-family:ui-monospace,monospace;color:var(--blue);font-size:16px;font-weight:850;margin-top:auto}.product-unit{color:#7b7e86;font-size:11px}.cart{position:sticky;top:80px;padding:16px}.cart-head{font-weight:800;font-size:16px;display:flex;gap:10px}.cart-customer{margin:14px 0}.cart-customer select{width:100%}.cart-items{min-height:125px;max-height:320px;overflow:auto;border-top:1px solid transparent;border-bottom:1px solid var(--line);padding:5px 0 12px}.empty{display:grid;place-items:center;color:#7a7d86;min-height:130px;font-size:13px}.cart-line{padding:10px 0;border-bottom:1px solid #eee}.cart-line-top{display:flex;justify-content:space-between;gap:10px}.cart-line-name{font-size:13px;font-weight:700}.cart-line-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:7px}.qtybox{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden}.qtybox button{border:0;background:#f7f7f8;width:28px;height:27px}.qtybox input{border:0;width:54px;text-align:center;height:27px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;color:#666;font-size:13px}.summary-row input{width:110px;height:32px;border:1px solid var(--line);border-radius:6px;text-align:right;padding:0 8px}.summary-total{border-top:1px solid var(--line);padding-top:12px;margin-top:3px;font-weight:850;color:#111;font-size:16px}.summary-total span:last-child{color:var(--blue)}.pay-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.pay-actions .primary{grid-column:1/-1}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-group label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:0 11px;background:white}.form-group input,.form-group select{height:38px}.form-group textarea{min-height:85px;padding-top:10px}.form-help{font-size:11px;color:#777;margin-top:5px}.calculator{display:grid;grid-template-columns:1fr 1fr;gap:16px}.result-box{padding:22px;min-height:365px}.calc-main{font-family:ui-monospace,monospace;font-size:31px;font-weight:900;margin:7px 0}.result-line{display:flex;justify-content:space-between;border-bottom:1px dashed #e1e1e4;padding:9px 0;font-size:13px}.strategies{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.strategy{border:1px solid var(--line);border-radius:9px;padding:12px}.strategy-name{font-size:11px;text-transform:uppercase;color:#777;font-weight:800}.strategy-price{font-family:ui-monospace,monospace;font-weight:850;margin-top:7px}.strategy-meta{font-size:11px;color:#777;margin-top:4px}
.placeholder{padding:50px;text-align:center;color:#72757d}.placeholder h2{color:#25262a}.settings-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}.info-banner{border:1px solid #c9d5ff;background:#f3f6ff;border-radius:10px;padding:14px 16px;color:#243a75;font-size:13px;line-height:1.5}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:grid;place-items:center;padding:20px}.modal{width:min(720px,95vw);max-height:90vh;overflow:auto;background:white;border-radius:13px;box-shadow:0 20px 70px rgba(0,0,0,.25)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0}.modal-close{border:0;background:transparent;font-size:21px}.modal-body{padding:20px}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:15px 20px;border-top:1px solid var(--line)}.recipe-row{display:grid;grid-template-columns:1.5fr .7fr auto;gap:8px;align-items:end;margin-bottom:8px}.recipe-row .form-group{margin:0}
.toast-root{position:fixed;right:20px;bottom:20px;z-index:200;display:grid;gap:8px}.toast{background:#17181b;color:white;border-radius:8px;padding:11px 14px;box-shadow:0 7px 25px rgba(0,0,0,.2);font-size:13px}.toast.error{background:#a90e1e}
@media(max-width:1200px){.product-grid{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.shell{margin-left:0;width:100%}.mobile-menu{display:block}.content{padding:20px}.pos-grid,.calculator,.settings-layout,.dashboard-lower{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.cart{position:static}.top-title{font-size:13px}.userbox strong{font-size:12px}.stats{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}}
@media(max-width:560px){.product-grid,.stats{grid-template-columns:1fr}.content{padding:15px}.topbar{padding:0 12px}.top-title{display:none}.page-head{gap:12px}.page-title h1{font-size:24px}.strategies{grid-template-columns:1fr}.toolbar{flex-direction:column}.toolbar select{width:100%}}
.badge.red{background:#ffe4e7;border-color:#ffb5bd;color:#b31225}.neg{color:#b31225}.checkline{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:650}.ink-config{margin-top:18px;padding:14px;border:1px solid #c9d5ff;background:#f7f9ff;border-radius:10px}.hpp-section{margin-top:14px}.section-title{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#6d7078;font-weight:800;margin-bottom:4px}.line-note{display:block;color:#81848c;font-weight:400;margin-top:3px}.current-price-box,.suggest-box{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:14px}.current-price-box{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fafafa}.current-price{font:850 21px ui-monospace,monospace;margin-top:5px}.suggest-box{background:#f7f9ff;border-color:#c9d5ff}.strategy .apply-strategy{width:100%;margin-top:9px}.settings-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.settings-card-head .card-title{margin-bottom:0}.overhead-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #ececf0}.overhead-actions{display:flex;align-items:center;gap:8px}
.cart-price-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.cart-price-row label{font-size:11px;color:#777;font-weight:700}.price-input-wrap{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}.price-input-wrap span{padding:0 7px;color:#777;font-size:12px;background:#f6f6f8;height:30px;display:flex;align-items:center}.price-input-wrap input{width:105px;height:30px;border:0;padding:0 8px;text-align:right;font-family:ui-monospace,monospace;font-weight:700;outline:none}.invoice-link{border:0;background:transparent;color:var(--blue);font-family:ui-monospace,monospace;padding:0;font-size:13px}.invoice-link:hover{text-decoration:underline}.manual-price-box{margin-top:14px;padding-top:12px;border-top:1px dashed #ccd4ed}.manual-price-box label{display:block;font-size:11px;color:#626b86;font-weight:800;margin-bottom:6px}.manual-price-row{display:flex;gap:8px}.manual-price-row input{flex:1;min-width:0;height:34px;border:1px solid var(--line);border-radius:6px;padding:0 10px;font-family:ui-monospace,monospace;font-weight:750}
.job-input-wrap{margin-top:9px}.job-input-wrap label{display:block;font-size:11px;color:#5f626b;font-weight:800;margin-bottom:5px}.job-input-wrap label span{color:#d11}.job-input-wrap input{width:100%;height:34px;border:1px solid var(--line);border-radius:6px;padding:0 9px;font-size:12px;outline:none;background:#fff}.job-input-wrap input:focus{border-color:#7293ee;box-shadow:0 0 0 2px rgba(11,63,189,.08)}.job-input-wrap input.invalid{border-color:#df3348;background:#fff7f8}.order-job{font-size:12px;font-weight:650;margin:2px 0;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.purchase-item-line{font-size:12px;margin:3px 0}.purchase-head{display:flex;justify-content:space-between;align-items:center;margin-top:18px;margin-bottom:8px}.purchase-entry{display:grid;grid-template-columns:minmax(180px,1.5fr) 100px 165px 34px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #eee}.purchase-entry>select,.purchase-entry>input{height:34px;border:1px solid var(--line);border-radius:6px;padding:0 8px;min-width:0}.purchase-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:2px solid #222;font-size:15px}.purchase-total b{font-size:18px}.modal:has(.purchase-entry){width:min(850px,calc(100vw - 30px))}@media(max-width:780px){.purchase-entry{grid-template-columns:1fr 90px}.purchase-entry .price-input-wrap{grid-column:1/2}.purchase-entry [data-prem]{grid-column:2/3;grid-row:2/3}.order-job{max-width:160px}}

/* v0.3.2: make job/print-name field unmistakably visible in POS */
.job-input-wrap{margin:8px 0 10px}
.invalid{border-color:#dc2626!important;background:#fff7f7!important}
/* v0.3.4 POS: satu Nama Cetakan per item, tanpa field ganda */
.cart-items{min-height:125px;max-height:390px}
.cart-line{padding:12px 0 14px}
.cart-line-top{align-items:flex-start}
.cart-line-name{font-size:13px;font-weight:800;color:#111827}
.cart-line-unit{font-size:10px;color:#8a8f99;margin-top:3px;text-transform:uppercase;letter-spacing:.03em}
.job-input-wrap{margin:10px 0 11px}
.job-input-wrap label{display:block;font-size:11px;color:#4b5563;font-weight:800;margin-bottom:5px}
.job-input-wrap label span{color:#dc2626}
.job-input-wrap input{width:100%;box-sizing:border-box;height:36px;border:1px solid #cbd5e1;border-radius:7px;padding:0 10px;font-size:12px;outline:none;background:#fff}
.job-input-wrap input:focus{border-color:#1d4ed8;box-shadow:0 0 0 2px rgba(29,78,216,.10)}
.job-input-wrap input.invalid{border-color:#dc2626;background:#fff7f7}

/* v0.4.0: production workflow + payments */
.badge.blue{background:#e7efff;border-color:#b8ccff;color:#1749b7}.badge.purple{background:#f1e8ff;border-color:#d9bdff;color:#6f2dbd}
.order-detail-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#fafafa}.order-detail-summary>div{min-width:0}
.order-items-detail{margin-top:16px;border-top:1px solid var(--line)}.order-detail-item{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #ececf0}.order-detail-item>.money{text-align:right}
.payment-box{margin-top:18px;padding:14px;border:1px solid #c9d5ff;background:#f8faff;border-radius:10px}.payment-totals{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:9px 0 5px}.payment-history{margin-top:8px;border-top:1px dashed #ccd4ed}.payment-history-row{padding:9px 0;border-bottom:1px dashed #e0e5f2}.modal:has(.order-detail-summary){width:min(760px,calc(100vw - 30px))}
@media(max-width:700px){.order-detail-summary{grid-template-columns:1fr 1fr}.order-detail-item{flex-direction:column;gap:5px}.order-detail-item>.money{text-align:left}}

/* v0.5.0: identitas usaha, invoice, hutang, pengeluaran, laba-rugi */
.business-settings-grid{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start}.logo-setting-box{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fafafa}.logo-preview{width:92px;height:92px;border:1px dashed #c7cad2;border-radius:10px;background:white;display:grid;place-items:center;overflow:hidden;color:#8a8e98;font-size:11px;font-weight:800;letter-spacing:1px;flex:0 0 auto}.logo-preview img{width:100%;height:100%;object-fit:contain;padding:6px}.purchase-total+.form-grid{padding-top:2px}.stat-value.neg{color:#b31225}
@media(max-width:900px){.business-settings-grid{grid-template-columns:1fr}.logo-setting-box{align-items:flex-start}}

/* v0.7.0: production deadlines, finishing & sales report */
.production-box{margin-top:16px;padding:15px;border:1px solid #cbd5e1;border-radius:10px;background:#fbfcff}.production-item{padding:13px 0;border-bottom:1px solid #eceef3}.production-item:last-child{border-bottom:0}.production-item-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.production-item-head>.money{text-align:right;white-space:nowrap}.row-alert{background:#fff8f8}.row-alert td:first-child{box-shadow:inset 3px 0 0 #dc2626}.sales-report-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.sales-report-grid .table-wrap{max-height:520px;overflow:auto}.production-box textarea{resize:vertical}
@media(max-width:1050px){.sales-report-grid{grid-template-columns:1fr}}
@media(max-width:700px){.production-item-head{flex-direction:column;gap:6px}.production-item-head>.money{text-align:left}}

.invoice-preview{min-height:38px;border:1px dashed #9aa8c5;background:#f7f9ff;border-radius:7px;padding:9px 12px;font:750 14px ui-monospace,SFMono-Regular,Consolas,monospace;color:#1d3d7a}

/* v1.0.0 — login, role access, go-live reset, mobile polish */
body.auth-locked #app{display:none}.login-layer{position:fixed;inset:0;z-index:500;background:radial-gradient(circle at 15% 15%,#173fa8 0,#0b1f57 32%,#080a10 70%);display:grid;place-items:center;padding:22px}.login-card{width:min(430px,100%);background:#fff;border-radius:18px;box-shadow:0 28px 90px rgba(0,0,0,.38);padding:28px}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:23px}.login-brand .brand-icon{flex:0 0 auto}.login-title{font-size:24px;font-weight:900;letter-spacing:-.5px}.login-sub{color:#6b7280;font-size:13px;margin-top:2px}.login-card .form-group{margin-top:14px}.login-card .primary{width:100%;margin-top:20px;height:44px}.login-note{margin-top:15px;padding:10px 12px;border-radius:8px;background:#f6f7fb;color:#646978;font-size:11px;line-height:1.45}.top-action{border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 9px;font-size:11px;font-weight:700}.top-action:hover{background:#f5f6f8}.userbox-info{min-width:110px}.role-pill{display:inline-flex;padding:3px 7px;border-radius:999px;background:#eef2ff;color:#3149a2;font-size:10px;font-weight:800;text-transform:uppercase}.danger-zone{border:1px solid #ffc6cc;background:#fff8f8;border-radius:10px;padding:16px}.danger-zone h3{color:#a41424;margin:0 0 6px}.danger-zone p{color:#7a4b50;font-size:12px;line-height:1.5;margin:0 0 12px}.access-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.access-card{border:1px solid var(--line);border-radius:9px;padding:12px;background:#fafafa}.access-card b{display:block;margin-bottom:5px}.access-card span{font-size:11px;color:#6b7280;line-height:1.45}.user-row{display:grid;grid-template-columns:1.2fr .9fr .7fr .55fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #ececf0}.user-row:last-child{border-bottom:0}.activity-list{max-height:330px;overflow:auto}.activity-row{display:grid;grid-template-columns:150px 150px 80px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #eee;font-size:11px}.stock-opname-btn{white-space:nowrap}.approval-box{margin-top:12px;padding:12px;border:1px solid #e0d3ff;background:#fbf9ff;border-radius:9px}.cancelled-box{margin-top:12px;padding:12px;border:1px solid #ffc6cc;background:#fff5f6;border-radius:9px;color:#8b1724}.range-toolbar{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.range-toolbar .form-group{min-width:150px}.range-toolbar .form-group label{font-size:10px}.range-toolbar input{height:36px}.mobile-card-label{display:none}
@media(max-width:900px){.userbox-info{display:none}.top-action{padding:7px}.access-grid{grid-template-columns:1fr}.user-row{grid-template-columns:1fr 1fr}.user-row .user-actions{grid-column:1/-1}.activity-row{grid-template-columns:1fr 1fr}.activity-row .activity-detail{grid-column:1/-1}.table{min-width:780px}.cart-items{max-height:none}.pos-grid{gap:12px}}
@media(max-width:560px){.login-card{padding:22px}.topbar{height:58px}.avatar{width:30px;height:30px}.top-action{font-size:10px}.content{padding:12px}.page-head{flex-direction:column}.page-head>.primary,.page-head>.secondary{width:100%}.card-pad{padding:14px}.modal-backdrop{padding:8px}.modal{width:100%;max-height:96vh;border-radius:10px}.modal-body{padding:14px}.modal-head,.modal-foot{padding:13px 14px}.btn-row{flex-wrap:wrap}.btn-row>button{flex:1 1 auto}.range-toolbar{display:grid;grid-template-columns:1fr 1fr;width:100%}.range-toolbar .form-group{min-width:0}.range-toolbar button{width:100%}.order-detail-summary{grid-template-columns:1fr 1fr}.pay-actions{grid-template-columns:1fr}.pay-actions .primary{grid-column:auto}.product-card{height:112px}.product-grid{gap:8px}}

/* v1.0.1 — invoice bank settings & responsive refinements */
.bank-settings-card{border:1px solid var(--border);border-radius:10px;padding:14px;background:#fafbfc}
button:disabled{opacity:.6;cursor:not-allowed}

/* v1.0.3 — input ukuran untuk produk berbasis m2 */
.size-box{margin-top:10px;padding:9px;border:1px solid #dbe2ef;border-radius:8px;background:#f8faff}
.size-title{font-size:11px;font-weight:800;color:#334155;margin-bottom:7px}
.size-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.size-grid label{font-size:10px;color:#64748b;font-weight:700}
.size-grid input,.size-grid select{width:100%;height:31px;margin-top:4px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;padding:0 7px;font-size:12px}
.area-result{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:7px;border-top:1px dashed #cbd5e1;font-size:11px;color:#475569}
.area-result b{color:#0b3fbd;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.area-line-total{margin-top:5px}
@media(max-width:560px){.size-grid{grid-template-columns:1fr 1fr}}

/* v1.0.9 — MAKAPPA black/yellow branding + premium login */
:root{
  --brand-yellow:#ffd100;
  --brand-yellow-2:#f2b900;
  --brand-gold:#b98500;
  --brand-black:#090a0b;
  --brand-charcoal:#151619;
  --blue:#b98500;
  --blue2:#8f6700;
}
.brand-icon.brand-mark{background:transparent;width:38px;height:38px;border-radius:0;overflow:visible}
.brand-icon.brand-mark img{width:37px;height:37px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(255,209,0,.18))}
.brand-name{color:#fff}
.brand-sub{color:#d0ad34}
.nav-item.active{background:linear-gradient(135deg,var(--brand-yellow),#f1b800);color:#121212;box-shadow:0 5px 16px rgba(255,209,0,.16)}
.nav-item.active .nav-icon{color:#111}
.nav-item:hover{background:#171819;color:#fff}
.primary{background:linear-gradient(135deg,var(--brand-yellow),#f4ba00);color:#15100a;box-shadow:0 3px 9px rgba(232,177,0,.14)}
.primary:hover{background:linear-gradient(135deg,#ffe04b,#eeb300)}
.avatar{background:#161616;color:var(--brand-yellow);border:1px solid #2c2c2c}
.brand-icon:not(.brand-mark){background:var(--brand-yellow);color:#121212}
.linkish,.product-price{color:#986c00}
.summary-total span:last-child{color:#986c00}
.i-blue{background:#d9aa00;color:#111}.i-cyan{background:#202124;color:#ffd100}
.bar{background:linear-gradient(#ffe259,#c78d00)}
.dot{background:#d6a300}
.donut{background:conic-gradient(#d6a300 0 75%,#f6a00d 75% 100%)}
.area-result b{color:#936a00}
.invoice-preview{color:#6f5200;background:#fffcef;border-color:#d7b94e}
.role-pill{background:#fff7cc;color:#795800;border-color:#ead27a}
.top-action:hover{background:#fff9df;border-color:#e0c453}

body.auth-locked{overflow:hidden;background:#08090a}
body.auth-locked #app{display:none}
.login-layer{position:fixed;inset:0;z-index:500;background:#08090a;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(430px,.75fr);min-height:100vh;overflow:hidden;padding:0}
.login-hero{position:relative;overflow:hidden;isolation:isolate;background:#0a0b0c;min-width:0}
.login-hero-image{position:absolute;inset:-2.5%;width:105%;height:105%;object-fit:cover;object-position:center center;transform:scale(1.035);animation:makappaHeroDrift 18s ease-in-out infinite alternate;z-index:0;will-change:transform;display:block}
.login-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,7,.05) 0%,rgba(5,6,7,.04) 55%,rgba(5,6,7,.52) 100%),linear-gradient(0deg,rgba(5,6,7,.30),transparent 42%);z-index:1;pointer-events:none}
.login-hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 70% 16%,rgba(255,209,0,.12),transparent 28%),radial-gradient(circle at 19% 78%,rgba(255,183,0,.10),transparent 31%);pointer-events:none;z-index:2}
.login-hero-glow{position:absolute;z-index:3;border-radius:50%;filter:blur(35px);opacity:.16;pointer-events:none;animation:makappaGlow 9s ease-in-out infinite alternate}
.glow-one{width:270px;height:270px;background:#ffd100;right:-100px;top:18%}
.glow-two{width:190px;height:190px;background:#f59e0b;left:-70px;bottom:6%;animation-delay:-3s}
.login-hero-footer{position:absolute;z-index:4;left:28px;right:28px;bottom:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:rgba(255,255,255,.73);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.login-form-zone{position:relative;display:grid;place-items:center;padding:38px;background:linear-gradient(145deg,#0e0f11 0%,#0b0c0e 60%,#16130a 100%);overflow:hidden}
.login-form-zone::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,209,0,.12) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.4),transparent 68%);opacity:.42;pointer-events:none}
.login-yellow-line{position:absolute;height:2px;background:linear-gradient(90deg,transparent,#ffd100,transparent);opacity:.55;transform:rotate(-32deg);width:78%;animation:makappaLine 10s ease-in-out infinite alternate}
.line-one{right:-23%;top:19%}.line-two{left:-32%;bottom:15%;animation-delay:-4s}
.login-card{position:relative;z-index:2;width:min(470px,100%);background:rgba(255,255,255,.985);border:1px solid rgba(255,255,255,.88);border-radius:22px;box-shadow:0 34px 90px rgba(0,0,0,.48),0 0 0 1px rgba(255,209,0,.05);padding:31px 34px 27px;backdrop-filter:blur(9px)}
.login-logo-wrap{height:92px;display:grid;place-items:center;margin:-5px 0 4px}
.login-logo{display:block;max-width:214px;max-height:90px;object-fit:contain}
.login-heading{text-align:center;margin-bottom:20px}
.login-title{font-size:27px;font-weight:950;letter-spacing:-.65px;color:#17181a}
.login-sub{color:#74777e;font-size:13px;margin-top:4px}
.login-error{margin:0 0 12px;padding:10px 12px;border:1px solid #f2c5c9;border-radius:9px;background:#fff6f7;color:#991b2a;font-size:12px;font-weight:650}
.login-card .form-group{margin-top:13px}
.login-field label{font-size:12px;font-weight:800;color:#24262a;margin-bottom:7px}
.login-input-wrap{position:relative}
.login-input-wrap input{height:47px!important;border:1px solid #d7d9df!important;border-radius:9px!important;padding:0 46px 0 42px!important;background:#fbfbfc!important;transition:border-color .18s,box-shadow .18s,background .18s}
.login-input-wrap input:focus{outline:none;border-color:#ddb500!important;background:#fff!important;box-shadow:0 0 0 3px rgba(255,209,0,.16)}
.login-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2;color:#777c86;font-size:15px;pointer-events:none}
.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;background:transparent;color:#777c86;border-radius:7px;font-size:14px}
.password-toggle:hover,.password-toggle.active{background:#fff5bf;color:#6d5000}
.login-options{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 1px 0;font-size:11px;color:#666a73}
.remember-check{display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:650}
.remember-check input{width:15px;height:15px;accent-color:#edbc00}
.login-role-note{font-size:10px;color:#8a8c92;white-space:nowrap}
.login-submit{width:100%;height:48px;border:0;border-radius:9px;margin-top:17px;padding:0 18px;background:linear-gradient(100deg,#ffd400,#f4b900);color:#16120b;font-size:14px;font-weight:900;display:flex;justify-content:center;align-items:center;gap:12px;box-shadow:0 8px 20px rgba(216,163,0,.22);transition:transform .18s,box-shadow .18s,filter .18s}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(216,163,0,.29);filter:saturate(1.08)}
.login-submit:active{transform:translateY(0)}
.login-arrow{font-size:19px;line-height:1}
.login-note{margin-top:17px;padding:12px 13px;border-radius:10px;background:linear-gradient(135deg,#f6f7f8,#fffaf0);border:1px solid #ece3c5;color:#555a62;font-size:11px;line-height:1.4;display:flex;align-items:center;gap:11px}
.login-note-icon{width:34px;height:34px;flex:0 0 34px;border-radius:8px;background:#151619;color:#ffd100;display:grid;place-items:center;font-size:15px}
.login-note b{display:block;color:#25272b;margin-bottom:2px}.login-note small{display:block;color:#74777d;font-size:10.5px}
.login-copyright{text-align:center;margin-top:14px;color:#a0a2a7;font-size:9px;letter-spacing:.6px;text-transform:uppercase}
@keyframes makappaHeroDrift{0%{transform:scale(1.035) translate3d(0,0,0)}100%{transform:scale(1.075) translate3d(-1.1%,.7%,0)}}
@keyframes makappaGlow{0%{transform:translate3d(0,0,0) scale(.9);opacity:.10}100%{transform:translate3d(18px,-13px,0) scale(1.12);opacity:.22}}
@keyframes makappaLine{0%{transform:rotate(-32deg) translateX(-12%);opacity:.2}100%{transform:rotate(-32deg) translateX(13%);opacity:.66}}
@media(max-width:1120px){.login-layer{grid-template-columns:minmax(0,1.15fr) minmax(400px,.85fr)}.login-form-zone{padding:28px}.login-hero-image{object-position:48% center}.login-hero-footer{font-size:9px}}
@media(max-width:840px){.login-layer{display:block;background:#0b0c0e;overflow:auto}.login-hero{height:270px}.login-hero-image{object-position:center 48%}.login-hero-footer{display:none}.login-form-zone{min-height:calc(100vh - 270px);padding:24px}.login-card{margin-top:-48px;width:min(500px,100%)}.login-yellow-line{display:none}}
@media(max-width:560px){.login-hero{height:190px}.login-form-zone{min-height:calc(100vh - 190px);padding:14px}.login-card{padding:24px 20px 21px;border-radius:18px;margin-top:-38px}.login-logo-wrap{height:75px}.login-logo{max-width:185px;max-height:74px}.login-title{font-size:24px}.login-options{align-items:flex-start;flex-direction:column}.login-role-note{white-space:normal}.login-note{align-items:flex-start}.login-input-wrap input{height:45px!important}}
@media(prefers-reduced-motion:reduce){.login-hero-image,.login-hero-glow,.login-yellow-line{animation:none!important}}

/* v1.0.9: definitive login hero sizing fix.
   Older base login rule left place-items:center active, collapsing the absolute-image hero. */
body.auth-locked .login-layer{
  place-items:stretch !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  grid-template-rows:minmax(100vh,1fr);
  height:100vh;
}
body.auth-locked .login-hero{
  display:block !important;
  width:100%;
  height:100vh;
  min-height:100vh;
  align-self:stretch !important;
  justify-self:stretch !important;
}
body.auth-locked .login-hero-image{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.auth-locked .login-form-zone{
  min-height:100vh;
  align-self:stretch !important;
  justify-self:stretch !important;
}
.nav-section{
  font-weight:800 !important;
  color:#a6a9af !important;
  letter-spacing:1.8px !important;
  opacity:1 !important;
}
@media(max-width:840px){
  body.auth-locked .login-layer{height:auto;min-height:100vh;grid-template-rows:none}
  body.auth-locked .login-hero{height:270px;min-height:270px}
  body.auth-locked .login-form-zone{min-height:calc(100vh - 270px)}
}
@media(max-width:560px){
  body.auth-locked .login-hero{height:190px;min-height:190px}
  body.auth-locked .login-form-zone{min-height:calc(100vh - 190px)}
}

/* v1.0.16: ukuran produk per-cm di kasir */
.cm-size-grid{grid-template-columns:minmax(0,1fr) minmax(110px,.65fr)}
@media(max-width:420px){.cm-size-grid{grid-template-columns:1fr}}


/* v1.0.16 — notifikasi order baru lintas akun */
.order-alert-button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:34px;font-size:15px}
.order-alert-badge{position:absolute;right:-6px;top:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#e11d48;color:#fff;border:2px solid #fff;font-size:9px;font-weight:900;line-height:14px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.order-alert-toast{border:1px solid rgba(255,209,0,.35);text-align:left;display:grid;gap:3px;min-width:280px;cursor:pointer;background:#141414;color:#fff}
.order-alert-toast b{color:#ffd100;font-size:13px}.order-alert-toast span{font-size:12px;font-weight:750}.order-alert-toast small{color:#d1d5db;font-size:11px}.order-alert-toast em{font-style:normal;color:#a3a3a3;font-size:9px;text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
.order-alert-toast:hover{background:#1c1c1c;border-color:#ffd100}