:root{
  --teal:#08b99a;--teal-2:#10c7a8;--teal-dark:#087e6b;--teal-soft:#e8fbf7;
  --ink:#17332f;--muted:#718580;--line:#e1ece9;--bg:#f3f7f6;--panel:#fff;
  --danger:#e14e4e;--danger-soft:#fff0f0;--warning:#f4a62a;--warning-soft:#fff6e6;
  --blue:#3488f5;--blue-soft:#edf5ff;--purple:#8067e8;--purple-soft:#f1efff;
  --shadow:0 12px 34px rgba(20,64,57,.08);--radius:18px;--sidebar:248px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);display:flex;flex-direction:column;background:linear-gradient(180deg,#073f38,#062f2a 75%);color:#fff;z-index:50;box-shadow:12px 0 34px rgba(2,45,38,.13)}.brand{display:flex;align-items:center;gap:12px;padding:22px 20px 18px}.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#4ce0c6,#08b99a);color:#fff;font-size:22px;font-weight:900;box-shadow:0 9px 20px rgba(11,199,168,.28)}.brand-mark.big{width:52px;height:52px;font-size:28px;border-radius:16px}.brand-copy,.login-brand>div:last-child{display:flex;flex-direction:column}.brand-copy strong{font-size:18px}.brand-copy span{font-size:11px;color:rgba(255,255,255,.6);letter-spacing:.12em;text-transform:uppercase}.outlet-card{margin:0 14px 16px;padding:12px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.07);border-radius:14px}.outlet-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.12)}.outlet-card>div:nth-child(2){min-width:0;display:flex;flex-direction:column;flex:1}.outlet-card small{font-size:10px;color:rgba(255,255,255,.55)}.outlet-card strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.online-dot{width:9px;height:9px;border-radius:50%;background:#44e8ae;box-shadow:0 0 0 4px rgba(68,232,174,.12)}.sidebar-nav{padding:0 12px;display:flex;flex-direction:column;gap:4px;overflow:auto}.nav-item{width:100%;height:43px;padding:0 12px;border:0;border-radius:11px;display:flex;align-items:center;gap:12px;background:transparent;color:rgba(255,255,255,.72);font-weight:650;transition:.2s}.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}.nav-item.active{background:linear-gradient(90deg,rgba(18,199,169,.96),rgba(18,199,169,.68));color:#fff;box-shadow:0 10px 20px rgba(6,35,31,.18)}.nav-icon{width:24px;text-align:center;font-size:18px}.sidebar-bottom{margin-top:auto;padding:12px}.sync-card{display:flex;gap:10px;align-items:center;padding:12px;margin-bottom:6px;border-top:1px solid rgba(255,255,255,.08)}.sync-pulse{width:10px;height:10px;border-radius:50%;background:#46e5b1;box-shadow:0 0 0 5px rgba(70,229,177,.1)}.sync-card div{display:flex;flex-direction:column}.sync-card strong{font-size:12px}.sync-card small{font-size:10px;color:rgba(255,255,255,.5)}.logout{color:#ffc1c1}.main-area{min-width:0;flex:1;margin-left:var(--sidebar)}.topbar{height:78px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}.topbar-left,.topbar-right{display:flex;align-items:center;gap:14px}.topbar-left h1{font-size:21px;margin:0;line-height:1.2}.topbar-left p{margin:3px 0 0;color:var(--muted);font-size:11px}.icon-button{border:0;background:transparent;width:38px;height:38px;border-radius:10px;color:inherit;font-size:20px}.icon-button:hover{background:rgba(255,255,255,.1)}.menu-toggle{display:none;background:var(--teal-soft);color:var(--teal-dark)}.sidebar-close{display:none;margin-left:auto}.connection-pill,.shift-pill{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:11px;color:var(--muted)}.connection-pill span{width:8px;height:8px;border-radius:50%;background:#22c794}.connection-pill.offline span{background:var(--danger)}.shift-pill{color:var(--teal-dark);background:var(--teal-soft);border-color:#c9f0e7}.quick-pos{padding:10px 14px;background:var(--teal);color:#fff;border-radius:10px;font-weight:750;box-shadow:0 8px 20px rgba(8,185,154,.2)}.user-chip{display:flex;align-items:center;gap:9px;padding-left:13px;border-left:1px solid var(--line)}.avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,var(--teal),#43d7be);color:#fff;font-weight:900}.user-chip>div:last-child{display:flex;flex-direction:column}.user-chip strong{font-size:12px}.user-chip span{font-size:10px;color:var(--muted)}.content-wrap{padding:24px 28px 40px}.alert{position:relative;padding:12px 42px 12px 14px;border-radius:12px;margin-bottom:16px;font-weight:650}.alert-success{background:#e9fff7;color:#08715d;border:1px solid #c5f5e5}.alert-error{background:#fff0f0;color:#a32626;border:1px solid #ffd3d3}.alert button{position:absolute;right:10px;top:7px;border:0;background:transparent;font-size:20px;color:inherit}.eyebrow{display:inline-block;font-size:10px;letter-spacing:.15em;font-weight:850;color:rgba(255,255,255,.7)}.eyebrow.teal{color:var(--teal-dark)}.orange-text{color:#d98a11}.welcome-banner{position:relative;min-height:154px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;border-radius:22px;color:#fff;background:linear-gradient(115deg,#08a98e 0%,#10c5a6 55%,#7ae6d2 100%);box-shadow:var(--shadow)}.welcome-banner:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:90px;top:-160px;background:rgba(255,255,255,.13)}.welcome-banner h2{margin:7px 0 6px;font-size:25px}.welcome-banner p{margin:0;color:rgba(255,255,255,.82)}.banner-illustration{position:relative;width:235px;height:120px}.rocket{position:absolute;right:62px;top:16px;width:72px;height:72px;border-radius:50% 50% 45% 50%;transform:rotate(-25deg);display:grid;place-items:center;background:#fff;color:var(--teal);font-size:38px;font-weight:900;box-shadow:0 10px 25px rgba(0,80,67,.18)}.box-shape{position:absolute;right:34px;bottom:2px;width:105px;height:45px;background:#ffd76e;transform:skewX(-10deg);border-radius:8px}.coin{position:absolute;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ffd15c;color:#9b6d00;font-size:11px;font-weight:900;border:4px solid rgba(255,255,255,.45)}.coin.c1{right:155px;top:13px}.coin.c2{right:19px;top:6px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}.metric-card{display:flex;align-items:center;gap:14px;padding:20px;background:#fff;border:1px solid rgba(219,233,230,.9);border-radius:17px;box-shadow:0 7px 22px rgba(20,64,57,.045)}.metric-icon{flex:0 0 48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:21px;font-weight:900}.metric-icon.green{background:var(--teal-soft);color:var(--teal-dark)}.metric-icon.blue{background:var(--blue-soft);color:var(--blue)}.metric-icon.purple{background:var(--purple-soft);color:var(--purple)}.metric-icon.orange{background:var(--warning-soft);color:var(--warning)}.metric-card>div:last-child{display:flex;min-width:0;flex-direction:column}.metric-card span{font-size:11px;color:var(--muted)}.metric-card strong{font-size:20px;margin:2px 0;white-space:nowrap}.metric-card small{font-size:10px;color:#9aaba7}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.85fr);gap:18px;margin-bottom:18px}.dashboard-grid.lower{grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr)}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 7px 25px rgba(20,64,57,.045);overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid #edf3f1}.panel-head h3{margin:3px 0 0;font-size:16px}.text-link{color:var(--teal-dark);font-size:11px;font-weight:800}.chart-legend{display:flex;gap:15px;color:var(--muted);font-size:10px}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-legend i{width:8px;height:8px;border-radius:50%}.legend-sales{background:var(--teal)}.legend-trx{background:#ffd05e}.sales-chart{height:270px;padding:20px;position:relative}.chart-svg{width:100%;height:100%;overflow:visible}.chart-grid{stroke:#e8efed;stroke-width:1}.chart-area{fill:url(#areaGradient)}.chart-line{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-point{fill:#fff;stroke:var(--teal);stroke-width:3}.chart-label{font-size:10px;fill:#869894}.chart-value{font-size:9px;fill:#4e6b65;font-weight:700}.payment-list{padding:7px 20px 14px}.payment-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #edf3f1}.payment-row:last-child{border-bottom:0}.payment-name{display:flex;gap:10px;align-items:center}.payment-dot{width:32px;height:32px;border-radius:10px;background:var(--teal-soft);position:relative}.payment-dot:before{content:"Rp";position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:900;color:var(--teal-dark)}.payment-name div,.payment-value{display:flex;flex-direction:column}.payment-name strong,.payment-value strong{font-size:11px}.payment-name small{font-size:9px;color:var(--muted)}.payment-value{text-align:right;min-width:100px}.payment-value span{margin-top:5px;width:100%;height:4px;border-radius:99px;background:#eef4f2;overflow:hidden}.payment-value span:after{content:"";display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--teal)}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:620px}.data-table th{padding:11px 16px;background:#f8fbfa;color:#7d918c;font-size:9px;text-transform:uppercase;letter-spacing:.08em;text-align:left}.data-table td{padding:13px 16px;border-top:1px solid #edf3f1;font-size:11px;vertical-align:middle}.data-table td small{display:block;color:#95a5a1;margin-top:2px}.data-table tr:hover td{background:#fbfdfc}.right{text-align:right!important}.strong{font-weight:800}.invoice-link{font-weight:800;color:var(--teal-dark)}.tag,.status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}.tag.neutral{background:#f0f4f3;color:#60736f}.status-completed{background:#e8fff6;color:#08836a}.status-voided,.status-refunded{background:#fff0f0;color:#bb3030}.stock-alert-list{padding:5px 20px 12px}.stock-alert-item{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #edf3f1}.stock-alert-item:last-child{border-bottom:0}.product-avatar{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#e8fbf7,#cbf3eb);font-weight:900;color:var(--teal-dark)}.grow{flex:1;min-width:0}.stock-alert-item .grow{display:flex;flex-direction:column}.stock-alert-item strong{font-size:11px}.stock-alert-item small{font-size:9px;color:var(--muted)}.stock-number{text-align:right;color:var(--warning)}.stock-number.danger{color:var(--danger)}.stock-number strong{display:block;font-size:14px}.empty-state{padding:36px 20px;text-align:center;color:var(--muted)}.empty-state.compact{padding:24px 14px}.empty-state.large{max-width:520px;margin:80px auto}.empty-icon{width:44px;height:44px;margin:0 auto 10px;display:grid;place-items:center;border-radius:14px;background:var(--teal-soft);color:var(--teal-dark);font-weight:900;font-size:20px}.empty-state h2{color:var(--ink)}
/* generic UI */
.page-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.page-actions .left,.page-actions .right-actions{display:flex;align-items:center;gap:10px}.btn{border:1px solid transparent;border-radius:11px;padding:10px 14px;font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:var(--teal);color:#fff;box-shadow:0 8px 18px rgba(8,185,154,.18)}.btn-primary:hover{background:#079f86}.btn-secondary{background:#fff;border-color:var(--line);color:var(--ink)}.btn-danger{background:var(--danger-soft);color:var(--danger);border-color:#ffd1d1}.btn-warning{background:var(--warning-soft);color:#c77b0a;border-color:#ffe3b2}.btn-sm{padding:7px 10px;font-size:10px;border-radius:9px}.btn-lg{padding:13px 18px}.full{width:100%}.filters,.form-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}.filter-row,.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .span-2{grid-column:span 2}.field,label.field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:750;color:#4d6862}.field input,.field select,.field textarea,.form-stack input,.form-stack select,.form-stack textarea,.search-input{width:100%;border:1px solid #dce8e5;background:#fff;color:var(--ink);border-radius:10px;padding:10px 12px;outline:0}.field input:focus,.field select:focus,.field textarea:focus,.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,.search-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,185,154,.1)}.field textarea{min-height:90px;resize:vertical}.form-stack{display:flex;flex-direction:column;gap:16px}.form-stack label{display:flex;flex-direction:column;gap:7px;font-weight:750}.muted{color:var(--muted)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.section-title h2,.section-title h3{margin:0}.two-column{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:18px}.sticky-card{position:sticky;top:96px}.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#eef4f2;color:#60736f;font-size:9px;font-weight:800}.badge.success{background:#e8fff6;color:#08836a}.badge.danger{background:#fff0f0;color:#c03535}.badge.warning{background:#fff6e6;color:#c77b0a}.actions-inline{display:flex;align-items:center;gap:6px}.search-wrap{position:relative;min-width:260px}.search-wrap:before{content:"⌕";position:absolute;left:12px;top:8px;color:#7e918d;font-size:18px}.search-wrap input{padding-left:36px}.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.summary-box{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}.summary-box span{display:block;color:var(--muted);font-size:10px}.summary-box strong{font-size:18px;display:block;margin-top:4px}.color-dot{width:12px;height:12px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:7px}.product-name-cell{display:flex;align-items:center;gap:10px}.product-thumb{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#e8fbf7,#d5f3ed);color:var(--teal-dark);font-weight:900;overflow:hidden}.product-thumb img{width:100%;height:100%;object-fit:cover}.danger-text{color:var(--danger)!important}.warning-text{color:#d48812!important}.success-text{color:var(--teal-dark)!important}.pagination-note{padding:12px 16px;color:var(--muted);font-size:10px;border-top:1px solid var(--line)}
/* POS */
.page-pos .sidebar{display:none}.page-pos .main-area{margin-left:0}
.page-pos .content-wrap{padding:0}.page-pos .topbar{display:none}.page-pos .main-area{height:100vh;overflow:hidden}.pos-shell{height:100vh;display:grid;grid-template-rows:68px 1fr;background:#f5f8f7}.pos-top{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#08b99a,#10c8a8);color:#fff;padding:0 18px;box-shadow:0 3px 14px rgba(3,101,85,.16);z-index:5}.pos-top-left,.pos-top-right,.pos-brand{display:flex;align-items:center;gap:12px}.pos-brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.18);font-weight:900;font-size:20px}.pos-brand strong{display:block;font-size:14px}.pos-brand small{display:block;color:rgba(255,255,255,.72);font-size:9px}.pos-online{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:10px}.pos-online i{width:7px;height:7px;border-radius:50%;background:#7dffcc}.pos-top-btn{height:40px;padding:0 14px;border:0;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;font-weight:750}.pos-top-btn:hover{background:rgba(255,255,255,.25)}.pos-body{min-height:0;display:grid;grid-template-columns:74px minmax(450px,1fr) 390px}.category-rail{padding:12px 8px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;overflow:auto}.category-btn{width:54px;min-height:54px;padding:6px 4px;border:1px solid transparent;border-radius:12px;background:transparent;color:#6d817c;font-size:9px;font-weight:750;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}.category-btn i{font-style:normal;font-size:19px}.category-btn:hover,.category-btn.active{background:var(--teal-soft);border-color:#aeeadd;color:var(--teal-dark)}.catalog-area{min-width:0;display:grid;grid-template-rows:64px 1fr;background:#f5f8f7}.catalog-toolbar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)}.catalog-search{position:relative;flex:1}.catalog-search:before{content:"⌕";position:absolute;left:13px;top:8px;font-size:22px;color:#738782}.catalog-search input{width:100%;height:42px;border:1px solid #dce8e5;border-radius:12px;padding:0 42px 0 40px;font-size:13px;outline:none}.catalog-search input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,185,154,.1)}.barcode-hint{position:absolute;right:12px;top:10px;color:#8ba09b;font-size:15px}.catalog-count{font-size:10px;color:var(--muted);white-space:nowrap}.product-grid{padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));align-content:start;gap:12px;overflow:auto}.product-card{position:relative;min-height:183px;border:1px solid #e1ebe8;border-radius:14px;background:#fff;overflow:hidden;text-align:left;padding:0;box-shadow:0 5px 15px rgba(20,64,57,.045);transition:.18s}.product-card:hover{transform:translateY(-2px);border-color:#a7e5d9;box-shadow:0 10px 25px rgba(20,64,57,.09)}.product-card:disabled{opacity:.55;cursor:not-allowed}.product-image{height:92px;display:grid;place-items:center;background:linear-gradient(145deg,#ecfaf7,#d9f0eb);color:var(--teal-dark);font-size:31px;font-weight:900;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover}.product-stock{position:absolute;top:7px;left:7px;padding:4px 6px;border-radius:7px;background:rgba(20,55,49,.78);color:#fff;font-size:8px;font-weight:800}.product-card-body{padding:10px}.product-card-body strong{display:block;height:34px;overflow:hidden;font-size:12px;line-height:1.35}.product-card-body span{display:block;margin-top:6px;color:var(--teal-dark);font-size:13px;font-weight:850}.order-panel{min-width:0;background:#fff;border-left:1px solid var(--line);display:grid;grid-template-rows:auto auto 1fr auto}.order-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.order-head h2{font-size:17px;margin:0}.order-id{font-size:9px;color:var(--muted)}.customer-row{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}.customer-select{flex:1;border:1px solid #dce8e5;border-radius:10px;padding:9px 10px;background:#fff}.add-customer-btn{width:38px;border:1px solid #dce8e5;border-radius:10px;background:#fff;color:var(--teal-dark);font-size:20px}.cart-list{overflow:auto;padding:5px 14px}.cart-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.cart-empty .empty-icon{font-size:24px}.cart-empty h3{color:#5e746f;margin:5px 0}.cart-empty p{font-size:10px;max-width:220px}.cart-item{padding:12px 0;border-bottom:1px solid #edf3f1}.cart-item-top{display:flex;align-items:flex-start;gap:8px}.cart-item-info{flex:1;min-width:0}.cart-item-info strong{display:block;font-size:12px}.cart-item-info small{color:var(--muted);font-size:9px}.cart-remove{width:26px;height:26px;border:0;border-radius:8px;background:#fff0f0;color:var(--danger);font-weight:900}.cart-item-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.qty-control{display:flex;align-items:center;border:1px solid #dce8e5;border-radius:9px;overflow:hidden}.qty-control button{width:29px;height:28px;border:0;background:#f7faf9;color:var(--teal-dark);font-weight:900}.qty-control input{width:42px;height:28px;border:0;text-align:center;font-weight:800;outline:0}.cart-line-total{font-weight:850;font-size:12px}.order-summary{border-top:1px solid var(--line);background:#fff}.order-options{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.order-option{padding:11px 12px;border:0;background:#fff;font-size:10px;font-weight:750;color:var(--teal-dark)}.order-option+ .order-option{border-left:1px solid var(--line)}.summary-lines{padding:11px 16px}.summary-line{display:flex;align-items:center;justify-content:space-between;margin:6px 0;font-size:10px;color:var(--muted)}.summary-line strong{font-size:11px;color:var(--ink)}.summary-total{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#edf5f3}.summary-total span{font-size:13px;font-weight:800}.summary-total strong{font-size:21px;color:var(--teal-dark)}.pay-button{width:100%;height:56px;border:0;background:var(--teal);color:#fff;font-size:16px;font-weight:900;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.pay-button:disabled{background:#c8d6d3;color:#8fa09d}.modal-backdrop{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,35,31,.52);backdrop-filter:blur(4px)}.modal-backdrop.open{display:flex}.modal{width:min(520px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 24px 70px rgba(0,30,25,.3)}.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:#f0f4f3;border-radius:9px;width:32px;height:32px;font-size:20px}.modal-body{padding:20px}.payment-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:10px 0 18px}.payment-method{padding:12px 6px;border:1px solid #dce8e5;border-radius:11px;background:#fff;text-align:center;font-size:10px;font-weight:800}.payment-method.active{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-dark)}.payment-total-card{padding:16px;border-radius:14px;background:#edf7f5;display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.payment-total-card span{font-size:11px;color:var(--muted)}.payment-total-card strong{font-size:23px;color:var(--teal-dark)}.quick-cash{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.quick-cash button{border:1px solid #dce8e5;background:#fff;border-radius:9px;padding:8px;font-size:10px;font-weight:750}.change-preview{margin-top:12px;padding:12px;border-radius:10px;background:#f7faf9;display:flex;justify-content:space-between}.success-modal{text-align:center;padding:26px}.success-check{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#e8fff6;color:var(--teal-dark);font-size:38px;font-weight:900}.success-modal h3{font-size:22px;margin:0 0 6px}.success-modal .big-change{font-size:26px;color:var(--teal-dark);font-weight:900;margin:10px 0 18px}
/* login */
.login-body{min-height:100vh;background:#fff}.login-layout{min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr}.login-visual{position:relative;overflow:hidden;padding:42px 58px;color:#fff;background:linear-gradient(135deg,#063d35,#087d6b 55%,#08b99a)}.login-visual:before,.login-visual:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}.login-visual:before{width:440px;height:440px;right:-160px;top:-170px}.login-visual:after{width:280px;height:280px;left:-120px;bottom:-100px}.login-brand{display:flex;align-items:center;gap:13px;position:relative;z-index:2}.login-brand strong{font-size:21px}.login-brand span{font-size:11px;color:rgba(255,255,255,.65)}.login-copy{position:relative;z-index:2;margin-top:70px;max-width:650px}.login-copy h1{font-size:48px;line-height:1.08;margin:12px 0 18px}.login-copy p{font-size:16px;color:rgba(255,255,255,.75);max-width:560px}.mock-dashboard{position:relative;z-index:2;width:min(650px,95%);height:290px;margin-top:36px;border:7px solid rgba(255,255,255,.16);border-radius:24px;background:#f6faf9;box-shadow:0 30px 70px rgba(1,28,24,.3);overflow:hidden;transform:perspective(1000px) rotateY(-5deg) rotateX(2deg)}.mock-top{height:38px;background:#fff;border-bottom:1px solid #dfeae7;display:flex;align-items:center;padding:0 14px;gap:5px}.mock-top i{width:6px;height:6px;border-radius:50%;background:#d3dfdc}.mock-grid{height:calc(100% - 38px);display:grid;grid-template-columns:110px 1fr}.mock-side{background:#073e37}.mock-main{padding:18px}.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.mock-cards b{height:54px;border-radius:10px;background:#fff;box-shadow:0 4px 12px rgba(0,50,42,.07)}.mock-chart{height:140px;margin-top:14px;border-radius:12px;background:#fff;position:relative;overflow:hidden}.mock-chart:before,.mock-chart:after{content:"";position:absolute;left:20px;right:20px;height:1px;background:#edf3f1}.mock-chart:before{top:45px}.mock-chart:after{top:90px}.mock-chart span{position:absolute;left:18px;right:18px;bottom:30px;height:70px;border-bottom:4px solid var(--teal);transform:skewY(-7deg);border-radius:50%}.login-features{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:18px;margin-top:30px;font-size:11px;color:rgba(255,255,255,.78)}.login-panel{display:grid;place-items:center;padding:40px}.login-box{width:min(410px,100%)}.login-box h2{font-size:28px;margin:8px 0 6px}.mobile-login-brand{display:none;align-items:center;gap:10px;margin-bottom:34px}.password-wrap{position:relative}.password-wrap input{padding-right:50px}.password-wrap button{position:absolute;right:6px;top:5px;width:36px;height:34px;border:0;background:transparent}.login-note{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:12px;border-radius:12px;background:#f5f9f8;color:var(--muted);font-size:10px}.login-note p{margin:0}
/* receipt */
.receipt-body{background:#edf3f1;padding:28px}.receipt-toolbar{max-width:880px;margin:0 auto 14px;display:flex;justify-content:space-between;gap:10px}.receipt-sheet{max-width:420px;margin:0 auto;background:#fff;padding:28px;box-shadow:0 15px 45px rgba(0,40,34,.12);font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}.receipt-brand{text-align:center;border-bottom:1px dashed #9fb0ac;padding-bottom:16px}.receipt-brand h1{margin:0;font:900 24px/1.2 system-ui}.receipt-meta{padding:14px 0;border-bottom:1px dashed #9fb0ac}.receipt-meta div,.receipt-total div{display:flex;justify-content:space-between;gap:12px;margin:4px 0}.receipt-items{padding:12px 0;border-bottom:1px dashed #9fb0ac}.receipt-item{margin:8px 0}.receipt-item>strong{display:block}.receipt-item-line{display:flex;justify-content:space-between}.receipt-total{padding:12px 0}.receipt-grand{font-size:15px;font-weight:900;border-top:1px dashed #9fb0ac;padding-top:9px!important}.receipt-footer{text-align:center;border-top:1px dashed #9fb0ac;padding-top:14px;color:#667b76}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,30,25,.45);z-index:45}
@media(max-width:1200px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.dashboard-grid.lower{grid-template-columns:1fr}.pos-body{grid-template-columns:68px minmax(410px,1fr) 350px}.order-panel{width:350px}.filter-row,.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){:root{--sidebar:236px}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.sidebar-overlay.show{display:block}.sidebar-close{display:block}.main-area{margin-left:0}.menu-toggle{display:grid;place-items:center}.topbar{padding:0 18px}.content-wrap{padding:18px}.topbar-right .connection-pill,.topbar-right .shift-pill,.user-chip>div:last-child{display:none}.quick-pos{padding:9px 11px}.welcome-banner{padding:24px}.welcome-banner h2{font-size:21px}.pos-body{grid-template-columns:64px minmax(360px,1fr) 330px}.category-rail{padding-inline:5px}.category-btn{width:50px}.product-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px;padding:10px}.order-panel{width:330px}.page-pos .sidebar{display:none}.page-pos .main-area{margin:0}.login-layout{grid-template-columns:1fr}.login-visual{display:none}.mobile-login-brand{display:flex}.login-panel{min-height:100vh}}
@media(max-width:720px){.topbar{height:68px}.topbar-left h1{font-size:17px}.topbar-left p{display:none}.content-wrap{padding:14px}.metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric-card{padding:14px;gap:10px}.metric-icon{width:40px;flex-basis:40px;height:40px}.metric-card strong{font-size:15px}.metric-card small{display:none}.welcome-banner{min-height:132px;padding:20px}.welcome-banner h2{font-size:18px}.welcome-banner p{font-size:11px;max-width:70%}.banner-illustration{position:absolute;right:-30px;opacity:.75;transform:scale(.8)}.summary-strip{grid-template-columns:repeat(2,1fr)}.two-column{grid-template-columns:1fr}.sticky-card{position:static}.page-actions{align-items:stretch;flex-direction:column}.page-actions .left,.page-actions .right-actions{width:100%;flex-wrap:wrap}.search-wrap{min-width:0;flex:1}.form-grid,.form-grid.cols-2,.filter-row{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.data-table td,.data-table th{padding:11px 12px}.pos-shell{height:100dvh}.pos-top{height:60px;padding:0 10px}.pos-top .pos-brand small,.pos-top .pos-online,.pos-top-btn span{display:none}.pos-body{grid-template-columns:54px minmax(0,1fr);position:relative}.category-rail{grid-column:1}.catalog-area{grid-column:2}.order-panel{position:absolute;inset:0 0 0 54px;width:auto;transform:translateX(102%);transition:.25s;z-index:15}.order-panel.mobile-open{transform:none}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-card{min-height:165px}.product-image{height:80px}.mobile-cart-toggle{display:inline-flex!important}.receipt-body{padding:12px}.receipt-sheet{padding:20px}.receipt-toolbar{flex-wrap:wrap}.login-panel{padding:28px 20px}}
@media(max-width:460px){.metric-grid{grid-template-columns:1fr}.welcome-banner p{max-width:85%}.quick-pos{display:none}.user-chip{border:0;padding:0}.chart-legend{display:none}.summary-strip{grid-template-columns:1fr 1fr}.summary-box strong{font-size:15px}.product-grid{gap:7px;padding:8px}.product-card-body{padding:8px}.product-card-body strong{font-size:11px}.login-box h2{font-size:24px}}
@media print{.no-print,.receipt-toolbar{display:none!important}.receipt-body{background:#fff;padding:0}.receipt-sheet{box-shadow:none;margin:0 auto;padding:10px;max-width:80mm}.app-shell{display:block}.sidebar,.topbar{display:none}.main-area{margin:0}.content-wrap{padding:0}}

/* =========================================================
   KASIRFLOW SKY BLUE UI — VERSION 1.1
   Visual refresh inspired by modern Indonesian POS products.
   Business logic and stock synchronization remain unchanged.
   ========================================================= */
:root{
  --teal:#38bdf8;
  --teal-2:#0ea5e9;
  --teal-dark:#0369a1;
  --teal-soft:#e0f2fe;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#dbeafe;
  --bg:#f4f9fd;
  --panel:#ffffff;
  --blue:#2563eb;
  --blue-soft:#eff6ff;
  --purple:#6366f1;
  --purple-soft:#eef2ff;
  --shadow:0 16px 44px rgba(14,116,144,.09);
  --radius:20px;
  --sidebar:232px;
}
body{background:linear-gradient(180deg,#f8fcff 0,#f3f8fc 100%);color:var(--ink)}

/* Sidebar & global navigation */
.sidebar{background:#fff;color:var(--ink);border-right:1px solid #e4eef6;box-shadow:12px 0 32px rgba(15,65,91,.045)}
.brand{padding:22px 20px 18px}
.brand-mark,.pos-brand-mark{background:linear-gradient(145deg,#38bdf8,#1687ed);box-shadow:0 10px 24px rgba(14,165,233,.26)}
.brand-copy strong{color:#0878bd;font-size:19px;letter-spacing:-.02em}
.brand-copy span{color:#8aa1b4}
.outlet-card{border:1px solid #dcecf7;background:#f5fbff;color:var(--ink)}
.outlet-icon{background:#dff4ff;color:#0284c7}
.outlet-card small{color:#7d93a6}
.online-dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.sidebar-nav{padding:0 12px}
.nav-item{color:#536779}
.nav-item:hover{background:#eef8ff;color:#0878bd}
.nav-item.active{background:linear-gradient(90deg,#dff4ff,#edf8ff);color:#0284c7;box-shadow:none}
.nav-item.active .nav-icon{background:#fff;color:#0284c7;box-shadow:0 5px 14px rgba(14,165,233,.12)}
.nav-icon{height:28px;width:28px;display:grid;place-items:center;border-radius:9px;color:#5b7083}
.sidebar-bottom{border-top:1px solid #e9f1f6}
.sync-card{border:0;background:#f7fbfe;border-radius:14px;color:#334155;margin-bottom:8px}
.sync-card small{color:#8aa1b4}
.sync-pulse{background:#38bdf8;box-shadow:0 0 0 5px rgba(56,189,248,.13)}
.logout{color:#e05252}
.sidebar-close{color:#64748b}

.main-area{background:transparent}
.topbar{height:76px;padding:0 30px;background:rgba(255,255,255,.88);border-bottom:1px solid #e6f0f6;box-shadow:0 4px 18px rgba(15,72,99,.025)}
.topbar-left h1{font-size:22px;letter-spacing:-.02em}
.topbar-left p{color:#8aa0b3}
.menu-toggle{background:#eaf7ff;color:#0284c7}
.connection-pill,.shift-pill{border-color:#dcecf7;background:#f8fcff}
.shift-pill{color:#0369a1;background:#eaf7ff;border-color:#c9ebff}
.quick-pos{background:linear-gradient(135deg,#2bbcf4,#1687ed);box-shadow:0 10px 24px rgba(14,165,233,.22);border-radius:12px}
.avatar{background:linear-gradient(145deg,#38bdf8,#2563eb)}
.content-wrap{padding:26px 30px 48px}

/* Common cards and controls */
.panel,.form-card,.metric-card,.summary-box{border:1px solid #e3eef6;box-shadow:var(--shadow);background:#fff}
.panel,.form-card{border-radius:20px}
.btn{border-radius:12px}
.btn-primary{background:linear-gradient(135deg,#2bbcf4,#1687ed);border-color:#1687ed;box-shadow:0 8px 18px rgba(14,165,233,.16)}
.btn-primary:hover{filter:brightness(.97)}
.btn-secondary{border-color:#d7e8f3;background:#fff;color:#25506b}
.text-link{color:#0284c7}
.search-input,input,select,textarea{border-color:#d8e8f2;background:#fff}
.search-input:focus,input:focus,select:focus,textarea:focus{border-color:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.12)}
.badge.success,.status-completed{background:#dcfce7;color:#15803d}
.tag.neutral{background:#eff7fc;color:#39718f}
.alert-success{background:#ecfdf5;color:#087a57;border-color:#c7f3df}

/* Dashboard */
.dashboard-hero{min-height:184px;padding:30px 34px 62px;border-radius:24px;background:linear-gradient(125deg,#0d8dde 0%,#38bdf8 56%,#80ddff 100%);position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-start;justify-content:space-between;box-shadow:0 20px 42px rgba(14,165,233,.20)}
.dashboard-hero:before,.dashboard-hero:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.13)}
.dashboard-hero:before{width:260px;height:260px;right:130px;top:-170px}
.dashboard-hero:after{width:170px;height:170px;right:-50px;bottom:-80px}
.dashboard-hero-copy{position:relative;z-index:1;max-width:660px}
.store-kicker{display:flex;gap:10px;align-items:center;margin-bottom:18px}
.store-kicker-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.18);font-size:20px}
.store-kicker div{display:flex;flex-direction:column}.store-kicker small{font-size:10px;color:rgba(255,255,255,.75)}.store-kicker strong{font-size:13px}
.dashboard-hero h2{font-size:28px;line-height:1.15;margin:0 0 8px;letter-spacing:-.03em}
.dashboard-hero p{margin:0;color:rgba(255,255,255,.82);max-width:540px}
.dashboard-date-pill{position:relative;z-index:1;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.2);padding:10px 14px;border-radius:14px;backdrop-filter:blur(8px)}
.dashboard-date-pill>span{font-size:19px}.dashboard-date-pill div{display:flex;flex-direction:column}.dashboard-date-pill small{font-size:9px;color:rgba(255,255,255,.7)}.dashboard-date-pill strong{font-size:12px}
.dashboard-metrics{margin-top:-45px;position:relative;z-index:3;padding:0 18px}
.metric-grid{gap:14px}
.metric-card{border-radius:18px;padding:19px;min-height:116px;position:relative;overflow:hidden}
.metric-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-45px;bottom:-50px;background:rgba(56,189,248,.055)}
.metric-card>div:last-child{min-width:0}
.metric-card span{color:#64748b;font-size:11px}.metric-card strong{font-size:20px;color:#102235;letter-spacing:-.02em}.metric-card small{color:#93a4b3}
.metric-icon{border-radius:13px}.metric-icon.green{background:#e7f9ff;color:#0284c7}.metric-icon.blue{background:#edf4ff;color:#2563eb}.metric-icon.purple{background:#f0f0ff;color:#6366f1}.metric-icon.orange{background:#fff5e5;color:#e59117}
.dashboard-primary-grid{margin-top:18px;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr)}
.panel-head{border-bottom-color:#eaf1f6}
.panel-head h3{letter-spacing:-.02em}
.eyebrow.teal,.eyebrow{color:#0284c7}
.dashboard-hero .eyebrow,.report-hero .eyebrow,.product-master-hero .eyebrow{color:rgba(255,255,255,.78)}
.chart-panel{min-height:380px}.sales-chart{min-height:286px}
.chart-line{stroke:#1687ed!important}.chart-point{fill:#1687ed!important;stroke:#fff!important}.legend-sales{background:#1687ed!important}.legend-trx{background:#67d7ff!important}
.payment-dot{background:#38bdf8}.payment-value>span{background:#e5f5fd}.payment-value>span:after{background:linear-gradient(90deg,#38bdf8,#1687ed)}
.quick-access-section{margin-top:18px;padding:22px;border:1px solid #e3eef6;background:#fff;border-radius:20px;box-shadow:var(--shadow)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.section-heading h3{margin:3px 0 0;font-size:18px}.section-heading p{margin:0;color:#8a9cad;font-size:11px}
.quick-access-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.quick-access-card{min-height:116px;padding:16px;border:1px solid #e5eff6;border-radius:16px;background:linear-gradient(180deg,#fff,#f9fcff);display:flex;flex-direction:column;gap:9px;position:relative;transition:.2s}
.quick-access-card:hover{transform:translateY(-2px);border-color:#bfe8fb;box-shadow:0 12px 25px rgba(14,165,233,.1)}
.quick-access-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#e3f6ff;color:#0284c7;font-size:19px}
.quick-access-card div{display:flex;flex-direction:column;gap:2px}.quick-access-card strong{font-size:13px}.quick-access-card small{font-size:10px;color:#8295a6;line-height:1.35}.quick-access-card>i{position:absolute;right:13px;top:13px;color:#a6bbca;font-style:normal;font-size:20px}
.dashboard-grid.lower{grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr)}
.product-avatar{background:#e6f6ff;color:#0284c7}.stock-number strong{color:#0284c7}

/* Reports */
.report-hero,.product-master-hero{padding:26px 30px;border-radius:22px;background:linear-gradient(125deg,#0d8dde,#38bdf8 70%,#78d8ff);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 16px 35px rgba(14,165,233,.18)}
.report-hero h2,.product-master-hero h2{margin:3px 0 6px;font-size:25px;letter-spacing:-.03em}.report-hero p,.product-master-hero p{margin:0;color:rgba(255,255,255,.8)}
.report-export-badge{display:flex;align-items:center;gap:8px;padding:11px 14px;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.22);border-radius:13px}
.report-tabs{margin-top:16px;display:flex;gap:5px;padding:5px;background:#e9f5fc;border-radius:14px;width:max-content;max-width:100%;overflow:auto}
.report-tab{padding:10px 18px;border-radius:10px;color:#557183;font-weight:750;white-space:nowrap}.report-tab.active{background:#fff;color:#0284c7;box-shadow:0 6px 16px rgba(30,90,120,.08)}
.report-filter{margin-top:14px}.filter-submit{justify-content:flex-end}
.report-finance-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px;margin:18px 0}
.finance-lines{padding:4px 20px 14px}.finance-lines>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px dashed #e0ebf2}.finance-lines span{color:#64748b}.finance-lines strong{font-size:14px}
.date-range-label{font-size:10px;color:#6f8799;background:#f1f8fc;border-radius:999px;padding:7px 10px}
.finance-total{margin:0 20px 20px;padding:16px 18px;border-radius:14px;background:linear-gradient(135deg,#e4f6ff,#eff8ff);display:flex;justify-content:space-between;align-items:center}.finance-total span{font-weight:800}.finance-total strong{font-size:22px;color:#027ebd}
.report-insight-card{padding-bottom:16px}.insight-stat{margin:0 18px;padding:13px 4px;border-bottom:1px solid #eaf1f6;display:flex;justify-content:space-between}.insight-stat span{color:#64748b}.insight-stat strong{color:#0369a1;font-size:18px}.insight-note{margin:16px 18px 0;padding:13px;border-radius:13px;background:#eff8ff;display:flex;gap:10px;color:#5c7182}.insight-note>span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#38bdf8;color:#fff;font-weight:900}.insight-note p{margin:0;font-size:10px;line-height:1.5}
.top-products-report{margin-bottom:18px}.top-products-layout{display:grid;grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr);gap:28px;padding:24px}
.donut-wrap{display:grid;place-items:center;align-content:start;gap:18px;border-right:1px solid #e8f0f5;padding-right:24px}.sales-donut{width:240px;height:240px;border-radius:50%;background:var(--donut);display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)}.sales-donut:after{content:"";position:absolute;width:128px;height:128px;border-radius:50%;background:#fff;box-shadow:0 4px 18px rgba(15,80,110,.07)}.sales-donut>div{position:relative;z-index:2;display:flex;flex-direction:column;text-align:center}.sales-donut strong{font-size:25px}.sales-donut span{font-size:10px;color:#7b90a1}.donut-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px}.donut-legend span{font-size:9px;color:#637788}.donut-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--legend-color);margin-right:5px}
.ranked-products h4{margin:0 0 10px}.ranked-product-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #e9f1f6}.rank-number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e1f4ff;color:#0284c7;font-weight:900}.ranked-product-row:nth-child(3) .rank-number{background:#eaf1ff;color:#2563eb}.ranked-product-row:nth-child(4) .rank-number{background:#eef0ff;color:#6366f1}.ranked-product-row .grow{display:flex;flex-direction:column}.ranked-product-row small{font-size:10px;color:#8a9dad}.ranked-value{text-align:right;display:flex;flex-direction:column}.ranked-value strong{font-size:12px}.cashier-performance-list{padding:0 18px 18px}.cashier-performance-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #eaf1f6}.cashier-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#e2f5ff;color:#0284c7;font-weight:900}.cashier-performance-row .grow{display:flex;flex-direction:column}.cashier-performance-row small{font-size:10px;color:#8ba0b0}

/* Products */
.product-master-hero .btn{background:#fff;color:#087fc0;border:0;box-shadow:none}
.master-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
.master-menu-card{min-height:106px;padding:16px;border-radius:17px;border:1px solid #e0edf5;background:#fff;display:flex;align-items:center;gap:12px;box-shadow:0 10px 28px rgba(15,90,125,.055);position:relative}.master-menu-card:hover,.master-menu-card.active{border-color:#bde7fb;background:#f9fdff}.master-menu-card>i{position:absolute;right:14px;font-style:normal;color:#98adbc;font-size:22px}.master-menu-card div{display:flex;flex-direction:column;padding-right:18px}.master-menu-card strong{font-size:13px}.master-menu-card small{font-size:10px;color:#8295a7;line-height:1.35}.master-menu-icon{width:45px;height:45px;flex:0 0 45px;border-radius:14px;display:grid;place-items:center;font-size:20px}.master-menu-icon.blue{background:#e2f4ff;color:#0284c7}.master-menu-icon.cyan{background:#e3fbfb;color:#0891b2}.master-menu-icon.violet{background:#eef0ff;color:#6366f1}.master-menu-icon.amber{background:#fff4dd;color:#e39518}
.product-page-actions{margin-top:0}.product-management-layout{grid-template-columns:minmax(0,1.55fr) minmax(330px,.65fr)}.product-list-panel{overflow:hidden}.product-thumb{background:#e6f5ff;color:#0284c7}.product-editor-card{border-top:4px solid #38bdf8}

/* POS */
.page-pos .mobile-bottom-nav{display:none!important}
.pos-shell{background:#f4f8fb;grid-template-rows:66px 1fr}
.pos-top{background:linear-gradient(90deg,#0b83ce,#38bdf8);color:#fff;border:0;box-shadow:0 5px 18px rgba(14,117,177,.16)}
.pos-top-btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18);color:#fff}
.pos-top-btn:hover{background:rgba(255,255,255,.22)}
.pos-brand-mark{background:#fff;color:#1687ed;box-shadow:none}.pos-online{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2)}.pos-online i{background:#8ff0b6}
.pos-body{grid-template-columns:76px minmax(440px,1fr) 390px}
.category-rail{background:#fff;border-right:1px solid #e3edf4;padding-top:10px}
.category-btn{color:#6a7f90}.category-btn i{background:#f1f7fb;color:#6a7f90}.category-btn.active{color:#0284c7;background:#e6f6ff}.category-btn.active i{background:#fff;color:#0284c7;box-shadow:0 5px 12px rgba(14,165,233,.12)}
.catalog-area{background:#f4f8fb}
.catalog-toolbar{background:#fff;border-bottom:1px solid #e3edf4;padding:10px 14px}
.catalog-search input{background:#f5f9fc;border-color:#dceaf3}.barcode-hint{color:#0284c7}.catalog-count{color:#708596}
.product-grid{padding:14px;gap:11px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.product-card{min-height:206px;border:1px solid #e1edf5;background:#fff;border-radius:16px;box-shadow:0 8px 20px rgba(18,84,117,.055);padding:0;overflow:hidden;display:flex;flex-direction:column;text-align:left;position:relative}
.product-card:hover{border-color:#aee0f8;box-shadow:0 12px 26px rgba(14,165,233,.11);transform:translateY(-1px)}
.product-card.in-cart{border-color:#83d4f7;box-shadow:0 0 0 2px rgba(56,189,248,.12),0 12px 26px rgba(14,165,233,.09)}
.product-stock{position:absolute;z-index:2;top:8px;left:8px;background:rgba(15,23,42,.68);color:#fff;padding:4px 7px;border-radius:7px;font-size:8px}.product-card:disabled .product-stock{background:#ef4444}
.product-image{height:104px;width:100%;border-radius:0;background:linear-gradient(145deg,#e5f5ff,#f5fbff);font-size:34px;color:#1687ed}.product-image img{width:100%;height:100%;object-fit:cover}
.product-card-body{padding:10px 11px 7px;display:flex;flex-direction:column;gap:4px;flex:1}.product-card-body strong{font-size:12px;line-height:1.25}.product-card-body span{color:#0369a1;font-size:12px;font-weight:850}
.product-card-actions{margin:0 9px 9px;height:34px;border-radius:10px;background:#f0f7fb;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;text-align:center;color:#365a70}.product-card-actions b{font-size:12px}.product-step{height:28px;display:grid;place-items:center;font-size:16px}.product-step-plus{color:#fff;background:#1aa8e7;border-radius:8px;margin:3px}.product-step-minus{color:#587084}
.order-panel{background:#fff;border-left:1px solid #dce9f2;box-shadow:-12px 0 28px rgba(26,79,104,.055)}
.order-head{border-bottom:1px solid #e5eef4}.order-head h2{font-size:17px}.order-id{color:#8195a5}.order-head-actions{display:flex;align-items:center}.mobile-cart-close{display:none}
.customer-row{background:#fbfdff;border-bottom-color:#e7eff5}.customer-select,.add-customer-btn{border-color:#dceaf3}.add-customer-btn{color:#0284c7;background:#e7f6ff}
.cart-item{border-bottom-color:#e8f0f5}.cart-remove{color:#ef4444}.qty-control{border-color:#d8e6ef}.qty-control button{color:#0284c7}.cart-line-total{color:#0f3d58}
.order-summary{border-top:1px solid #e1ebf2;background:#fff}.order-option{background:#f3f9fc;border-color:#dfebf3;color:#4b687b}.order-option b{color:#0284c7}.summary-total{background:#e9f7ff}.summary-total strong{color:#027ebd}.pay-button{background:linear-gradient(135deg,#2abcf4,#1687ed);box-shadow:0 9px 20px rgba(14,165,233,.20)}
.modal-backdrop{background:rgba(5,39,61,.52)}.payment-total-card{background:#e8f7ff}.payment-total-card strong,.success-modal .big-change{color:#027ebd}.payment-method.active{border-color:#38bdf8;background:#e8f7ff;color:#027ebd}.success-check{background:#e4f7ff;color:#0284c7}

/* Login */
.login-visual{background:linear-gradient(135deg,#075985,#0ea5e9 55%,#67d7ff)}
.mock-side{background:#086fae}.mock-chart span{border-bottom-color:#38bdf8}
.login-note{background:#f0f9ff}.mobile-login-brand strong{color:#0878bd}

/* Mobile bottom navigation */
.mobile-bottom-nav{display:none}

@media(max-width:1200px){
  .quick-access-grid{grid-template-columns:repeat(3,1fr)}
  .master-menu-grid{grid-template-columns:repeat(2,1fr)}
  .product-management-layout{grid-template-columns:1fr}
  .product-editor-card{position:static}
  .report-finance-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:920px){
  .sidebar{box-shadow:18px 0 45px rgba(15,75,105,.15)}
  .content-wrap{padding:18px 18px 92px}
  .dashboard-primary-grid,.dashboard-grid.lower{grid-template-columns:1fr}
  .quick-access-grid{grid-template-columns:repeat(3,1fr)}
  .top-products-layout{grid-template-columns:1fr}.donut-wrap{border-right:0;border-bottom:1px solid #e8f0f5;padding:0 0 22px}
  .pos-body{grid-template-columns:68px minmax(380px,1fr) 350px}.order-panel{width:350px}
}

@media(max-width:720px){
  body:not(.login-body):not(.receipt-body){padding-bottom:72px}
  .topbar{height:64px;padding:0 14px;position:sticky}.topbar-left h1{font-size:17px}.topbar-right{gap:7px}.topbar-right .quick-pos{display:none}.user-chip{border:0;padding:0}.avatar{width:36px;height:36px}
  .content-wrap{padding:12px 12px 28px}
  .dashboard-hero{min-height:180px;padding:20px 20px 58px;border-radius:20px}.dashboard-hero h2{font-size:21px}.dashboard-hero p{font-size:11px;max-width:75%}.dashboard-date-pill{padding:8px 10px}.dashboard-date-pill>span{display:none}
  .store-kicker{margin-bottom:13px}.store-kicker-icon{width:36px;height:36px}
  .dashboard-metrics{margin-top:-42px;padding:0 8px;grid-template-columns:1fr 1fr}.metric-card{min-height:102px;padding:13px;display:block}.metric-icon{width:34px;height:34px;margin-bottom:8px}.metric-card span{font-size:9px}.metric-card strong{font-size:15px}.metric-card small{display:none}
  .dashboard-primary-grid{margin-top:12px}.panel{border-radius:17px}.panel-head{padding:15px}.chart-panel{min-height:300px}.sales-chart{min-height:220px;padding:6px}
  .quick-access-section{padding:16px;margin-top:12px}.section-heading p{display:none}.quick-access-grid{grid-template-columns:repeat(3,1fr);gap:8px}.quick-access-card{min-height:100px;padding:12px}.quick-access-card>i{display:none}.quick-access-icon{width:36px;height:36px}.quick-access-card small{display:none}
  .data-table{min-width:660px}.recent-sales-panel .data-table{min-width:620px}
  .mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:68px;padding:6px 7px calc(6px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.97);border-top:1px solid #dceaf3;box-shadow:0 -10px 28px rgba(15,75,105,.09);z-index:44;backdrop-filter:blur(14px)}
  .mobile-nav-item{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#8a9dac;font:inherit;border-radius:12px}.mobile-nav-item span{font-size:18px;line-height:1}.mobile-nav-item b{font-size:9px}.mobile-nav-item.active{color:#0284c7;background:#edf8ff}.mobile-nav-pos{position:relative}.mobile-nav-pos span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2abcf4,#1687ed);color:#fff;box-shadow:0 9px 20px rgba(14,165,233,.28);margin-top:-24px}.mobile-nav-pos b{margin-top:2px}
  .report-hero,.product-master-hero{padding:20px;border-radius:18px}.report-hero h2,.product-master-hero h2{font-size:20px}.report-hero p,.product-master-hero p{font-size:10px}.report-export-badge{display:none}.product-master-hero .btn{display:none}
  .report-tabs{width:100%}.report-tab{flex:1;text-align:center;padding:9px 12px}.report-filter .filter-row{grid-template-columns:1fr 1fr}.report-filter .filter-row>div{display:none}.filter-submit{grid-column:1/-1}.filter-submit .btn{width:100%}
  .report-finance-grid{grid-template-columns:1fr;gap:12px}.finance-lines{padding-inline:14px}.finance-total{margin-inline:14px}.top-products-layout{padding:16px}.sales-donut{width:200px;height:200px}.sales-donut:after{width:106px;height:106px}
  .master-menu-grid{grid-template-columns:1fr 1fr;gap:8px}.master-menu-card{min-height:92px;padding:12px}.master-menu-icon{width:38px;height:38px;flex-basis:38px}.master-menu-card small{display:none}.product-page-actions{align-items:stretch}.product-page-actions .right-actions{display:none}.product-management-layout{gap:12px}.product-editor-card{order:-1}
  .page-pos{padding-bottom:0!important}.page-pos .content-wrap{padding:0}.pos-shell{height:100dvh;grid-template-rows:58px 1fr}.pos-top{height:58px;padding:0 8px}.pos-brand-mark{width:35px;height:35px}.pos-brand strong{font-size:11px}.pos-top-right{gap:5px}.pos-top-btn{padding:7px 8px}.mobile-cart-toggle{display:inline-flex!important;background:#fff!important;color:#087fc0!important}.pos-body{grid-template-columns:1fr;display:block;position:relative;overflow:hidden}.category-rail{height:52px;width:100%;display:flex;gap:7px;overflow-x:auto;border-right:0;border-bottom:1px solid #e1ebf2;padding:7px 9px;background:#fff}.category-btn{height:36px;width:auto;min-width:max-content;display:flex;flex-direction:row;gap:6px;padding:0 12px;border-radius:999px;border:1px solid #dce9f1}.category-btn i{width:auto;height:auto;background:transparent}.category-btn.active{border-color:#38bdf8;background:#e7f7ff}.category-btn span{display:block;font-size:10px}.catalog-area{height:calc(100dvh - 110px);display:flex;flex-direction:column}.catalog-toolbar{padding:8px;flex:0 0 auto}.catalog-count{display:none}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;overflow-y:auto}.product-card{min-height:188px}.product-image{height:86px}.product-card-body{padding:8px}.product-card-actions{margin:0 7px 7px}.order-panel{position:absolute;left:0;right:0;bottom:0;top:42px;width:auto;height:calc(100dvh - 42px);border-radius:24px 24px 0 0;transform:translateY(105%);transition:.28s ease;z-index:20;box-shadow:0 -20px 55px rgba(8,52,78,.22)}.order-panel.mobile-open{transform:translateY(0)}.order-head{padding:18px}.mobile-cart-close{display:grid;place-items:center}.cart-list{padding-bottom:8px}.order-summary{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .payment-methods{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:460px){
  .dashboard-hero p{max-width:88%}.dashboard-metrics{gap:8px}.metric-card{min-height:94px}.quick-access-grid{grid-template-columns:repeat(3,1fr)}.quick-access-card{padding:10px;min-height:88px}.quick-access-card strong{font-size:11px}
  .master-menu-grid{grid-template-columns:1fr}.master-menu-card{min-height:78px}.report-filter .filter-row{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-card{min-height:178px}.product-image{height:80px}
}

/* =========================================================
   KasirFlow v1.2 — Responsive mobile/tablet & reliability
   ========================================================= */
:root{
  --touch:46px;
  --tablet-breakpoint:1100px;
}
html{min-width:320px}
body.ui-locked{overflow:hidden;touch-action:none}
input,select,textarea{font-size:16px;max-width:100%}
.form-stack input,.form-stack select,.form-stack textarea,.field input,.field select,.field textarea{min-height:var(--touch)}
.field-help{display:block;color:#8aa0b2;font-size:10px;font-weight:500;line-height:1.35;margin-top:2px}
button:disabled,.btn:disabled{cursor:not-allowed;opacity:.62;box-shadow:none}
.checkbox-row{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;font-weight:600!important;color:#607789!important}.checkbox-row input{width:18px!important;height:18px!important;min-height:18px!important}

/* Shift & cash */
.shift-start-hero{padding:28px;display:flex;align-items:center;justify-content:space-between;gap:28px;overflow:visible}
.shift-start-copy{display:flex;align-items:center;gap:18px;min-width:0}.shift-start-copy h2{margin:4px 0 7px;font-size:24px}.shift-start-copy p{margin:0;color:#71889a}.shift-hero-icon{width:62px;height:62px;flex:0 0 62px;display:grid;place-items:center;border-radius:19px;background:linear-gradient(135deg,#dff5ff,#eef8ff);color:#0284c7;font-size:28px}
.shift-start-form{width:min(440px,100%);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}.shift-start-form label{display:flex;flex-direction:column;gap:6px;font-weight:750}.shift-start-form input{min-height:48px;border:1px solid #d8e8f2;border-radius:12px;padding:11px 13px}.shift-start-form .btn{min-height:48px}
.shift-status-banner{padding:23px 26px;margin-bottom:16px;border-radius:20px;background:linear-gradient(125deg,#0d8dde,#38bdf8 68%,#79dafe);color:#fff;box-shadow:0 16px 35px rgba(14,165,233,.17);display:flex;align-items:center;justify-content:space-between;gap:18px}.shift-status-banner .eyebrow{color:rgba(255,255,255,.78)}.shift-status-banner h2{margin:4px 0;font-size:22px}.shift-status-banner p{margin:0;color:rgba(255,255,255,.82)}.shift-status-banner .badge{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.25);color:#fff;padding:8px 11px}
.shift-summary-strip .summary-box{position:relative;overflow:hidden}.shift-summary-strip .summary-box:after{content:"";position:absolute;right:-26px;bottom:-35px;width:80px;height:80px;border-radius:50%;background:#e9f7ff}.summary-box small{display:block;color:#92a4b2;font-size:9px;margin-top:4px;position:relative;z-index:1}.summary-box span,.summary-box strong{position:relative;z-index:1}
.shift-workspace{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.68fr);gap:18px;align-items:start}.shift-tools{display:grid;gap:14px;position:sticky;top:94px}.shift-tool-card{margin:0}.shift-close-card{border-top:3px solid #fca5a5}.shift-history-panel{margin-top:18px}

/* Product editor */
.product-add-trigger{min-height:44px}.product-editor-card{min-width:0}.product-editor-close{display:none;background:#eff8fd;color:#517185}.product-editor-handle{display:none}.product-editor-overlay{display:none;position:fixed;inset:0;background:rgba(5,39,61,.48);z-index:58;backdrop-filter:blur(2px)}.product-editor-overlay.show{display:block}.mobile-product-fab{display:none;position:fixed;right:18px;bottom:86px;width:54px;height:54px;border:0;border-radius:18px;background:linear-gradient(135deg,#2bbcf4,#1687ed);color:#fff;font-size:28px;box-shadow:0 14px 28px rgba(14,165,233,.3);z-index:43}
.product-editor-actions{display:grid;grid-template-columns:.6fr 1.4fr;gap:10px}.product-editor-actions .btn{min-height:46px}
.input-action-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}.input-action-wrap input{border-radius:10px 0 0 10px!important}.input-action-wrap button{border:1px solid #cce6f5;border-left:0;border-radius:0 10px 10px 0;background:#edf8ff;color:#0284c7;font-size:10px;font-weight:850;padding:0 10px}
.product-image-field{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:start}.product-image-preview{width:92px;height:92px;border-radius:16px;background:linear-gradient(145deg,#e7f6ff,#f6fbff);border:1px dashed #b9ddf1;color:#5aa8d2;display:grid;place-items:center;overflow:hidden;font-weight:850}.product-image-preview img{width:100%;height:100%;object-fit:cover}.product-image-controls{display:flex;flex-direction:column;gap:8px}.product-image-controls>small{color:#8da0af;font-size:9px;margin-top:-4px}.product-image-controls input[type=file]{padding:8px;font-size:11px}.product-stock-note{margin:0}

/* Tablet navigation and layout */
@media(max-width:1100px){
  :root{--sidebar:250px}
  .sidebar{transform:translateX(-105%);transition:transform .25s ease;box-shadow:18px 0 50px rgba(15,75,105,.18)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.show{display:block}
  .sidebar-close{display:grid;place-items:center}
  .main-area{margin-left:0}
  .menu-toggle{display:grid;place-items:center;flex:0 0 38px}
  .content-wrap{padding:20px 22px 100px}
  .topbar{padding:0 22px}
  .topbar-right .connection-pill{display:none}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-primary-grid,.dashboard-grid.lower{grid-template-columns:1fr}
  .quick-access-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .master-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-column,.product-management-layout{grid-template-columns:1fr}
  .sticky-card{position:static}
  .shift-workspace{grid-template-columns:1fr}.shift-tools{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-list-panel{width:100%}
  .product-editor-card{position:fixed!important;right:0;top:0;bottom:0;width:min(460px,100%);max-height:100dvh;margin:0;border-radius:24px 0 0 24px!important;border-top:0!important;z-index:60;overflow-y:auto;transform:translateX(105%);transition:transform .28s ease;padding:22px;box-shadow:-24px 0 60px rgba(5,39,61,.2)}
  .product-editor-card.editor-open{transform:translateX(0)}
  .product-editor-close{display:grid;place-items:center}
  .mobile-product-fab{display:grid;place-items:center}
  .product-master-hero .product-add-trigger{display:inline-flex}
  .product-page-actions .right-actions{display:flex}
  .report-finance-grid{grid-template-columns:1fr 1fr}
}

@media(min-width:761px) and (max-width:1100px){
  .mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:72px;padding:7px 18px calc(7px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.97);border-top:1px solid #dceaf3;box-shadow:0 -10px 28px rgba(15,75,105,.08);z-index:44;backdrop-filter:blur(14px)}
  .mobile-nav-item{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#8095a6;border-radius:13px}.mobile-nav-item span{font-size:19px}.mobile-nav-item b{font-size:10px}.mobile-nav-item.active{color:#0284c7;background:#edf8ff}
  .mobile-nav-pos span{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#2abcf4,#1687ed);color:#fff;box-shadow:0 9px 20px rgba(14,165,233,.25)}
  .topbar-right .shift-pill{display:flex}.user-chip>div:last-child{display:none}
}

/* POS tablet: katalog luas, keranjang sebagai drawer */
@media(max-width:900px){
  .page-pos{padding-bottom:0!important}.page-pos .content-wrap{padding:0}.page-pos .mobile-bottom-nav{display:none!important}
  .pos-shell{height:100dvh;grid-template-rows:60px 1fr}.pos-top{height:60px;padding:0 10px}.pos-top .pos-brand small,.pos-online{display:none}.mobile-cart-toggle{display:inline-flex!important;background:#fff!important;color:#087fc0!important}
  .pos-body{display:block;position:relative;overflow:hidden}.category-rail{height:54px;width:100%;display:flex;gap:7px;overflow-x:auto;border-right:0;border-bottom:1px solid #e1ebf2;padding:8px 10px;background:#fff}.category-btn{height:36px;width:auto;min-width:max-content;display:flex;flex-direction:row;gap:6px;padding:0 12px;border-radius:999px;border:1px solid #dce9f1}.category-btn i{width:auto;height:auto;background:transparent}.category-btn span{display:block;font-size:10px}
  .catalog-area{height:calc(100dvh - 114px);display:flex;flex-direction:column}.catalog-toolbar{padding:9px;flex:0 0 auto}.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:10px;overflow-y:auto}.product-card{min-height:188px}.product-image{height:88px}
  .order-panel{position:absolute;right:0;left:auto;top:0;bottom:0;width:min(430px,100%);height:auto;border-radius:22px 0 0 22px;transform:translateX(105%);transition:.28s ease;z-index:20;box-shadow:-20px 0 55px rgba(8,52,78,.22)}.order-panel.mobile-open{transform:translateX(0)}.mobile-cart-close{display:grid;place-items:center}
}

@media(max-width:760px){
  body:not(.login-body):not(.receipt-body):not(.page-pos){padding-bottom:74px}
  .topbar{height:64px;padding:0 12px}.topbar-left{gap:8px;min-width:0}.topbar-left>div{min-width:0}.topbar-left h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}.topbar-left p{display:none}.topbar-right{gap:6px}.topbar-right .quick-pos,.topbar-right .shift-pill{display:none}.user-chip{border:0;padding:0}.user-chip>div:last-child{display:none}.avatar{width:36px;height:36px;border-radius:11px}
  .content-wrap{padding:12px 12px 26px}
  .mobile-bottom-nav{height:68px;padding:6px 7px calc(6px + env(safe-area-inset-bottom))}
  .panel,.form-card{border-radius:17px}.panel-head{padding:15px}.panel-head h3{font-size:15px}
  .summary-strip,.shift-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.summary-box{padding:14px;min-width:0}.summary-box strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-box small{display:none}
  .shift-start-hero{padding:18px;display:block}.shift-start-copy{align-items:flex-start}.shift-hero-icon{width:48px;height:48px;flex-basis:48px;border-radius:15px}.shift-start-copy h2{font-size:20px}.shift-start-form{width:100%;grid-template-columns:1fr;margin-top:20px}.shift-start-form .btn{width:100%}
  .shift-status-banner{padding:18px;border-radius:18px;align-items:flex-start}.shift-status-banner h2{font-size:18px}.shift-status-banner p{font-size:10px}.shift-status-banner .badge{white-space:nowrap;padding:6px 8px}
  .shift-tools{grid-template-columns:1fr}.shift-tool-card{padding:16px}.shift-history-panel{margin-top:12px}
  .master-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.master-menu-card{min-height:94px;padding:12px}.master-menu-card small{display:none}.master-menu-icon{width:38px;height:38px;flex-basis:38px}.product-master-hero{padding:19px}.product-master-hero h2{font-size:20px}.product-master-hero p{font-size:10px}.product-master-hero .product-add-trigger{display:none}.product-page-actions .right-actions{display:none}.mobile-product-fab{display:grid;place-items:center}.product-editor-card{width:100%;top:auto;bottom:0;max-height:92dvh;border-radius:25px 25px 0 0!important;transform:translateY(105%);padding:18px 16px calc(20px + env(safe-area-inset-bottom))}.product-editor-card.editor-open{transform:translateY(0)}.product-editor-handle{display:block;width:42px;height:4px;border-radius:99px;background:#d6e4ec;margin:-7px auto 13px}.product-image-field{grid-template-columns:74px 1fr}.product-image-preview{width:74px;height:74px;border-radius:14px}.product-editor-actions{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom));margin:4px -16px calc(-20px - env(safe-area-inset-bottom));padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid #e4eef5;z-index:2}

  /* Semua tabel berubah menjadi kartu mobile, tanpa scroll horizontal. */
  .table-wrap{overflow:visible;padding:0 10px 10px}.data-table.mobile-card-table{display:block;min-width:0;width:100%;border-collapse:separate}.data-table.mobile-card-table thead{display:none}.data-table.mobile-card-table tbody{display:grid;gap:10px}.data-table.mobile-card-table tr{display:block;background:#fff;border:1px solid #e1edf5;border-radius:15px;padding:8px 12px;box-shadow:0 7px 18px rgba(20,80,110,.045)}.data-table.mobile-card-table td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0!important;border-top:1px dashed #e4edf3!important;text-align:right!important;min-height:34px;background:transparent!important;font-size:11px}.data-table.mobile-card-table td:first-child{border-top:0!important}.data-table.mobile-card-table td:before{content:attr(data-label);font-size:9px;line-height:1.25;text-transform:uppercase;letter-spacing:.06em;color:#8195a5;font-weight:800;text-align:left;flex:0 0 34%}.data-table.mobile-card-table td>*{max-width:64%}.data-table.mobile-card-table td .product-name-cell{max-width:70%;text-align:left}.data-table.mobile-card-table td .actions-inline{justify-content:flex-end;flex-wrap:wrap;max-width:70%}.data-table.mobile-card-table td.mobile-empty-cell{display:block;border:0!important;padding:0!important}.data-table.mobile-card-table td.mobile-empty-cell:before{display:none}.data-table.mobile-card-table td.mobile-empty-cell>*{max-width:none}.data-table.mobile-card-table .right{text-align:right!important}.data-table.mobile-card-table td small{text-align:right}
  .recent-sales-panel .table-wrap{padding:0 10px 10px}.recent-sales-panel .data-table{min-width:0}
  .empty-state.large{margin:28px auto}.empty-state{padding:24px 14px}
  .actions-inline .btn{padding:8px 9px}
  .report-finance-grid{grid-template-columns:1fr}
}

@media(max-width:560px){
  .metric-grid.dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-metrics .metric-card{min-height:98px}.dashboard-metrics .metric-card strong{font-size:14px}
  .quick-access-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-access-card{min-height:88px;padding:10px}.quick-access-card small,.quick-access-card>i{display:none}.quick-access-card strong{font-size:11px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-card{min-height:178px}.product-image{height:80px}
  .pos-top-right .pos-top-btn:not(.mobile-cart-toggle){display:none}.pos-brand strong{font-size:11px}.catalog-search input{font-size:14px}
  .order-panel{left:0;right:0;top:38px;width:100%;border-radius:24px 24px 0 0;transform:translateY(105%)}.order-panel.mobile-open{transform:translateY(0)}
  .modal{width:100%;max-height:92dvh;border-radius:24px 24px 0 0;margin-top:auto}.modal-backdrop.open{align-items:flex-end;padding:0}.modal-body{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .master-menu-grid{grid-template-columns:1fr}.master-menu-card{min-height:76px}.summary-strip,.shift-summary-strip{grid-template-columns:1fr 1fr}.product-image-field{grid-template-columns:1fr}.product-image-preview{width:100%;height:150px}
}

@media(max-width:380px){
  .summary-strip,.shift-summary-strip{grid-template-columns:1fr}.metric-grid.dashboard-metrics{grid-template-columns:1fr 1fr}.quick-access-grid{grid-template-columns:repeat(2,1fr)}
  .topbar-left h1{max-width:44vw}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.product-card-body strong{font-size:10px}
}

@media print{
  .mobile-product-fab,.product-editor-overlay,.mobile-bottom-nav{display:none!important}
}