:root{
  --green:#176b45;--green-2:#0f5a39;--green-soft:#e8f5ee;--green-line:#cce6d7;
  --purple:#7c4db3;--ink:#17211b;--muted:#647067;--line:#e3e9e5;--bg:#f4f7f5;
  --white:#fff;--danger:#c83e3e;--warning:#a66b0b;--shadow:0 8px 26px rgba(28,54,40,.09);
  --radius:16px;--radius-sm:11px;--topbar:70px;--mobile-nav:72px;
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:15px}
button,input,select,textarea{font:inherit}button{touch-action:manipulation}.hidden{display:none!important}
a{color:inherit;text-decoration:none}
.app-shell{min-height:100vh}.topbar{height:var(--topbar);position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:20px;padding:0 24px;box-shadow:0 3px 14px rgba(20,45,31,.04)}
.brand-wrap{display:flex;align-items:center;gap:11px;min-width:220px}.brand-logo{width:44px;height:44px;object-fit:contain}.brand-title{font-size:18px;font-weight:800;line-height:1.05;color:var(--green)}.brand-subtitle{font-size:12px;color:var(--muted);margin-top:4px;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desktop-nav{display:flex;align-items:center;gap:5px;margin-left:auto}.nav-link{padding:10px 14px;border-radius:10px;color:#4e5b52;font-weight:700}.nav-link:hover{background:#f1f6f3}.nav-link.active{background:var(--green-soft);color:var(--green)}
.user-box{display:flex;align-items:center;gap:10px;margin-left:8px;white-space:nowrap}.status-pill{font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px}.status-pill.online{background:#e8f6ed;color:#16723e}.status-pill.offline{background:#ffebeb;color:#a32626}
.page-content{padding:18px 22px 28px;max-width:1800px;margin:0 auto}.mobile-nav{display:none}
.page-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}.page-title-row h1{font-size:25px;margin:0}.page-title-row p{margin:4px 0 0;color:var(--muted)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card-pad{padding:18px}.card-title{margin:0;font-size:17px;font-weight:800}.muted{color:var(--muted)}
.btn{border:0;border-radius:11px;padding:11px 15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--green);color:#fff}.btn-primary:hover{background:var(--green-2)}.btn-secondary{background:#eef3f0;color:#344239}.btn-danger{background:#fff0f0;color:#a82f2f}.btn-outline{background:#fff;border:1px solid var(--line);color:#324238}.btn-block{width:100%}.btn-lg{min-height:54px;font-size:16px}.btn-icon{width:38px;height:38px;padding:0;border-radius:10px}
.form-control{width:100%;border:1px solid #cfd8d2;border-radius:11px;background:#fff;padding:11px 12px;min-height:44px;outline:none;color:var(--ink);font-size:16px}.form-control:focus{border-color:#67a985;box-shadow:0 0 0 3px rgba(23,107,69,.10)}label{font-size:13px;font-weight:800;color:#475249;display:block;margin:0 0 6px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-group{margin-bottom:13px}
.alert{border-radius:11px;padding:11px 13px;margin:0 0 14px;font-weight:650}.alert-error{background:#fff0f0;color:#9d2929;border:1px solid #ffd3d3}.alert-success{background:#edf9f1;color:#19693b;border:1px solid #cdebd8}.alert-warning{background:#fff7e7;color:#85590c;border:1px solid #f4dfb6}
/* POS */
.pos-grid{height:calc(100vh - var(--topbar) - 36px);min-height:520px;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(340px,.8fr);gap:16px}.catalog-panel,.cart-panel{min-height:0;overflow:hidden}.catalog-panel{display:flex;flex-direction:column}.catalog-head{padding:15px 16px 12px;border-bottom:1px solid var(--line)}.catalog-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) 210px;gap:10px}.search-wrap{position:relative}.search-wrap .form-control{padding-left:39px}.search-icon{position:absolute;left:13px;top:12px;color:#77837b;font-size:17px}.promo-line{margin-top:10px;display:flex;align-items:center;gap:8px;min-height:23px;color:var(--green);font-weight:750;font-size:13px}.catalog-scroll{overflow:auto;padding:12px 14px 20px;overscroll-behavior:contain}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-card{border:1px solid var(--line);border-radius:14px;padding:11px;background:#fff;display:grid;grid-template-columns:68px minmax(0,1fr);gap:11px;align-items:center;transition:border-color .15s,box-shadow .15s}.product-card:hover{border-color:#b9d6c6;box-shadow:0 4px 15px rgba(26,80,49,.07)}.product-image{width:68px;height:68px;border-radius:12px;object-fit:cover;background:#edf1ee}.product-name{font-weight:850;font-size:15px;line-height:1.25;margin-bottom:5px}.product-meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;margin-bottom:8px}.stock-badge{border-radius:999px;padding:3px 7px;background:#eef5f1;font-weight:800;color:#395346}.stock-badge.out{background:#ffeded;color:#a32828}.size-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.size-btn{border:1px solid #cfe3d7;background:#f4fbf7;color:#165f3e;border-radius:9px;padding:7px 8px;cursor:pointer;text-align:left;min-height:46px}.size-btn:hover{background:#e9f6ee}.size-btn:disabled{background:#f2f3f2;color:#a0a8a2;border-color:#e2e5e3;cursor:not-allowed}.size-btn b{display:block;font-size:13px}.size-btn span{font-size:12px}.empty-state{padding:40px 16px;text-align:center;color:var(--muted)}
.cart-panel{display:flex;flex-direction:column}.cart-head{padding:15px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.cart-count{font-size:12px;font-weight:800;color:var(--green);background:var(--green-soft);padding:5px 9px;border-radius:999px}.cart-scroll{flex:1;overflow:auto;min-height:120px;overscroll-behavior:contain}.cart-empty{padding:44px 20px;text-align:center;color:var(--muted)}.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:11px 14px;border-bottom:1px solid #edf1ee}.cart-line-title{font-weight:800;font-size:14px}.cart-line-sub{font-size:12px;color:var(--muted);margin-top:3px}.qty-control{display:flex;align-items:center;gap:5px;margin-top:7px}.qty-btn{width:30px;height:30px;border:1px solid #d8e2dc;background:#fff;border-radius:8px;font-weight:900;cursor:pointer}.qty-value{min-width:30px;text-align:center;font-weight:800}.remove-btn{border:0;background:transparent;color:#b23b3b;cursor:pointer;font-weight:800;padding:4px}.line-total{text-align:right;font-weight:850;white-space:nowrap}
.cart-summary{padding:12px 16px;border-top:1px solid var(--line);background:#fbfdfc}.summary-row{display:flex;justify-content:space-between;gap:15px;padding:3px 0;color:#536158}.summary-row.discount{color:#137346}.summary-row.total{font-size:20px;color:var(--ink);font-weight:900;padding-top:8px;margin-top:5px;border-top:1px dashed #d4ddd7}.cart-actions{padding:10px 14px 14px;display:grid;grid-template-columns:88px 1fr;gap:9px;background:#fff}.pending-banner{margin:0 14px 10px;padding:11px 12px;border-radius:11px;background:#fff7e6;border:1px solid #f2dfb2;color:#77500e;font-size:13px;line-height:1.38}.pending-banner.pending-confirmed{background:#edf9f1;border-color:#cdebd8;color:#19693b}.pending-banner.pending-offline,.pending-banner.pending-warning{background:#fff1f1;border-color:#ffd2d2;color:#922d2d}.pending-head{display:flex;align-items:center;gap:8px}.pending-message{margin-top:4px}.pending-actions{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}.pending-spinner{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:pos-spin .8s linear infinite;flex:0 0 auto}@keyframes pos-spin{to{transform:rotate(360deg)}}
/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,28,20,.54);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}.modal-card{width:min(520px,100%);max-height:min(90vh,780px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.28)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}.modal-head h2{font-size:18px;margin:0}.modal-body{padding:18px}.modal-total{text-align:center;margin:0 0 17px}.modal-total small{display:block;color:var(--muted);font-weight:700}.modal-total strong{display:block;font-size:38px;line-height:1.12;color:var(--danger);margin-top:4px}.pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.pay-method{border:1px solid #d7e0da;background:#fff;border-radius:11px;padding:11px 8px;cursor:pointer;font-weight:850}.pay-method.active{border-color:var(--green);background:var(--green-soft);color:var(--green)}.payment-status{min-height:20px;font-size:13px;font-weight:700;margin-bottom:10px}.payment-status.saving{color:#87610e}.payment-status.error{color:#a52f2f}.payment-status.success{color:#16723e}
/* Report */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stat-card{padding:16px;border-radius:15px;color:#fff;min-height:102px;position:relative;overflow:hidden}.stat-card.green{background:linear-gradient(135deg,#177047,#269563)}.stat-card.purple{background:linear-gradient(135deg,#7445a5,#9566c1)}.stat-card.blue{background:linear-gradient(135deg,#3072a3,#5597c8)}.stat-card.gold{background:linear-gradient(135deg,#ad7418,#cc993a)}.stat-value{font-size:26px;font-weight:900}.stat-label{font-size:13px;font-weight:700;opacity:.92;margin-top:4px}.filter-card{padding:13px 14px;margin-bottom:14px}.filter-grid{display:grid;grid-template-columns:160px 160px 150px minmax(180px,1fr) auto;gap:9px;align-items:end}.table-card{overflow:hidden}.table-scroll{overflow:auto;max-height:calc(100vh - 350px)}table.data-table{width:100%;border-collapse:collapse;min-width:850px}table.data-table th{position:sticky;top:0;z-index:2;background:#176b45;color:#fff;text-align:left;padding:11px 10px;font-size:12px;letter-spacing:.02em}table.data-table td{padding:10px;border-bottom:1px solid #edf0ee;font-size:13px;vertical-align:middle}table.data-table tbody tr:hover{background:#fafcfb}.text-right{text-align:right}.text-center{text-align:center}.payment-badge{display:inline-block;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:900;background:#eef3f0;color:#3d4e43}.pager{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-top:1px solid var(--line);gap:10px}.pager-links{display:flex;gap:7px}.pager .btn{min-height:36px;padding:7px 11px}
.detail-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f6f9f7;padding:11px;border-radius:10px;margin-bottom:12px}.detail-summary div{font-size:13px}.detail-summary b{display:block;color:var(--muted);font-size:11px;margin-bottom:2px}.detail-total-box{text-align:right;font-size:15px;line-height:1.8;margin-top:10px}.detail-total-box strong{font-size:19px}
/* Profile/login */
.profile-wrap{max-width:760px;margin:12px auto}.profile-head{display:flex;gap:13px;align-items:center;margin-bottom:18px}.profile-avatar{width:58px;height:58px;border-radius:16px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-weight:900;font-size:24px}.profile-meta h1{margin:0;font-size:22px}.profile-meta p{margin:4px 0 0;color:var(--muted)}
.login-page{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#eef4f0}.login-visual{padding:50px;display:flex;align-items:flex-end;position:relative;background:linear-gradient(145deg,rgba(12,83,51,.95),rgba(20,112,70,.84)),url('../gambar/login-bg.webp') center/cover}.login-copy{color:#fff;max-width:600px}.login-copy h1{font-size:42px;margin:0 0 10px}.login-copy p{font-size:17px;line-height:1.6;opacity:.9}.login-panel{display:flex;align-items:center;justify-content:center;padding:30px}.login-card{width:min(390px,100%);background:#fff;border-radius:20px;padding:28px;box-shadow:0 20px 50px rgba(24,55,37,.12)}.login-logo{height:70px;max-width:220px;object-fit:contain;display:block;margin:0 auto 14px}.login-card h2{text-align:center;margin:0 0 4px}.login-card .login-sub{text-align:center;color:var(--muted);margin:0 0 22px}.login-version{text-align:center;color:#98a29b;font-size:11px;margin-top:14px}
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:200;display:grid;gap:8px;max-width:360px}.toast{background:#17211b;color:#fff;padding:11px 14px;border-radius:11px;box-shadow:0 8px 30px rgba(0,0,0,.2);font-size:13px}.toast.error{background:#9c2f2f}.toast.success{background:#176b45}
@media (max-width:1180px){.pos-grid{grid-template-columns:minmax(0,1.45fr) minmax(330px,.8fr)}.stat-grid{grid-template-columns:repeat(2,1fr)}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-grid .filter-action{grid-column:span 2}}
@media (max-width:960px){.product-grid{grid-template-columns:1fr}}
@media (max-width:900px){:root{--topbar:62px}.topbar{height:var(--topbar);padding:0 14px}.brand-logo{width:38px;height:38px}.brand-title{font-size:16px}.brand-subtitle{max-width:180px}.desktop-nav{display:none}.user-box strong{display:none}.page-content{padding:12px 12px calc(var(--mobile-nav) + 14px)}.mobile-nav{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));z-index:50;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 36px rgba(23,48,33,.18);overflow:hidden}.mobile-nav-link{height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#6c776f;font-weight:800}.mobile-nav-link span{font-size:18px}.mobile-nav-link small{font-size:11px}.mobile-nav-link.active{color:var(--green);background:var(--green-soft)}
.pos-grid{height:calc(100vh - var(--topbar) - var(--mobile-nav) - 36px);grid-template-columns:1fr 360px;gap:10px}.catalog-head{padding:11px}.catalog-toolbar{grid-template-columns:1fr}.catalog-scroll{padding:9px}.product-card{grid-template-columns:56px minmax(0,1fr);padding:9px}.product-image{width:56px;height:56px}.cart-head{padding:12px}.cart-line{padding:9px 11px}.cart-summary{padding:10px 12px}.cart-actions{padding:8px 10px 10px}.modal-backdrop{padding:10px}}
@media (max-width:760px) and (orientation:portrait){body[data-page="pos"]{overflow:auto}.pos-grid{height:auto;min-height:0;display:flex;flex-direction:column}.catalog-panel{height:47vh;min-height:340px}.cart-panel{height:auto;min-height:430px}.cart-scroll{max-height:35vh}.catalog-toolbar{grid-template-columns:1fr 140px}.product-grid{grid-template-columns:1fr}.page-title-row{align-items:flex-start;flex-direction:column}.stat-grid{grid-template-columns:1fr 1fr}.filter-grid{grid-template-columns:1fr}.filter-grid .filter-action{grid-column:auto}.table-scroll{max-height:none}.form-row{grid-template-columns:1fr}.modal-total strong{font-size:32px}.pay-methods{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:520px){.brand-subtitle{display:none}.brand-wrap{min-width:0}.page-content{padding-left:8px;padding-right:8px}.catalog-toolbar{grid-template-columns:1fr}.stat-grid{gap:8px}.stat-card{padding:13px;min-height:90px}.stat-value{font-size:21px}.login-page{display:block;background:#eef4f0}.login-visual{min-height:190px;padding:28px;align-items:center}.login-copy h1{font-size:29px}.login-copy p{font-size:14px}.login-panel{padding:18px;margin-top:-25px;position:relative}.login-card{padding:22px}.modal-card{border-radius:15px}.modal-body{padding:14px}}
@media (max-height:640px) and (orientation:landscape){.topbar{height:56px}.brand-logo{width:34px;height:34px}.page-content{padding-top:8px}.pos-grid{height:calc(100vh - 56px - 16px);grid-template-columns:minmax(0,1.45fr) minmax(320px,.78fr)}.catalog-head{padding:8px 10px}.promo-line{display:none}.product-card{grid-template-columns:48px minmax(0,1fr);padding:7px}.product-image{width:48px;height:48px}.size-btn{min-height:40px;padding:5px 7px}.cart-head{padding:8px 11px}.cart-line{padding:7px 10px}.cart-summary{padding:6px 10px}.summary-row{padding:1px 0}.summary-row.total{font-size:17px}.cart-actions{padding:6px 9px 8px}.mobile-nav{display:none}.page-content{padding-bottom:8px}}
@media print{.topbar,.mobile-nav,.no-print{display:none!important}.page-content{padding:0}.card{box-shadow:none;border:0}}