:root{
  /* ---- Palet SoraPOS: pink lembut + tosca, teks plum ---- */
  --pink:#F2ACBC; --pink-dark:#E897AB; --pink-soft:#FBE4EA; --pink-tint:#FDF2F5;
  --tosca:#7FCAC3; --tosca-dark:#4FA39B; --tosca-soft:#DDF3F1;
  --peach:#F6C9A8; --peach-soft:#FBEFE4; --peach-dark:#B8743F;

  --ink:#3B3440; --ink-2:#6B5F70; --paper:#FDF7F8; --card:#FFFFFF; --border:#F0DEE3;
  --accent:var(--pink); --accent-dark:var(--pink-dark); --on-accent:#3B3440;
  --good:#3C9E8F; --good-bg:var(--tosca-soft);
  --bad:#D9697E; --bad-bg:var(--pink-soft); --muted:#9A8E9E; --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(90,60,80,.05), 0 8px 24px rgba(90,60,80,.08);
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{font-family:'Nunito',sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased;}
h1,h2,h3,.num{font-family:'Nunito',sans-serif; font-weight:700;}
.hidden{display:none !important;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,select,textarea{font-family:inherit; font-size:15px; color:var(--ink);}
a{color:inherit; text-decoration:none;}
::selection{background:var(--pink); color:var(--ink);}

/* ---------- Brand ---------- */
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{width:34px; height:34px; border-radius:9px; flex:none; display:block; object-fit:cover;}
.brand-word{font-weight:800; font-size:19px; letter-spacing:-0.02em; white-space:nowrap;}
.brand-word .accent{color:var(--tosca-dark);}

/* ---------- Login ---------- */
#loginScreen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(160deg, var(--pink-tint) 0%, var(--paper) 55%, var(--tosca-soft) 100%);}
.login-card{width:100%; max-width:360px; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:32px 28px; box-shadow:var(--shadow);}
.login-card .brand{justify-content:center; margin-bottom:6px;}
.login-wordmark{display:block; width:170px; margin:0 auto 6px;}
.login-card p.tag{text-align:center; color:var(--muted); font-size:13.5px; margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:6px;}
.field input{width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; outline:none; transition:border-color .15s, box-shadow .15s;}
.field input:focus{border-color:var(--tosca); box-shadow:0 0 0 3px var(--tosca-soft);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:var(--radius-sm); font-weight:700; font-size:14.5px; transition:transform .08s ease, opacity .15s;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--pink); color:var(--on-accent); width:100%;}
.btn-primary:hover{background:var(--pink-dark);}
.btn-accent{background:var(--accent); color:var(--on-accent);}
.btn-accent:hover{background:var(--accent-dark);}
.btn-ghost{background:transparent; color:var(--ink-2); border:1px solid var(--border);}
.btn-ghost:hover{background:var(--pink-tint);}
.btn-danger{background:var(--bad-bg); color:var(--bad);}
.btn[disabled]{opacity:.5; pointer-events:none;}
.err-msg{color:var(--bad); font-size:13px; margin-top:10px; min-height:16px;}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:42px;}
.pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--muted); border-radius:6px;}
.pw-toggle:hover{background:var(--pink-tint); color:var(--ink-2);}
.pw-toggle svg{width:18px; height:18px;}
.saved-accounts{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.saved-lbl{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.acc-card{display:flex; align-items:center; gap:10px; padding:9px 10px 9px 9px; border:1px solid var(--border); border-radius:14px; background:var(--pink-tint); cursor:pointer; transition:border-color .15s, background .15s;}
.acc-card:hover{border-color:var(--tosca); background:#fff;}
.acc-avatar{width:32px; height:32px; border-radius:10px; background:var(--pink); color:var(--ink); font-weight:800; display:flex; align-items:center; justify-content:center; flex:none;}
.acc-email{flex:1; min-width:0; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.acc-rm{width:26px; height:26px; border-radius:8px; color:var(--muted); font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center;}
.acc-rm:hover{background:var(--bad-bg); color:var(--bad);}
.remember-row{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2); margin:-4px 0 16px; cursor:pointer; user-select:none;}
.remember-row input{width:17px; height:17px; accent-color:var(--tosca-dark); margin:0;}

/* ---------- App shell: header atas + nav bawah melayang ---------- */
body.app-loading > *{visibility:hidden;}
#appShell{min-height:100vh; padding-bottom:96px;}
.topnav{position:sticky; top:0; z-index:30; background:rgba(253,247,248,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.topnav-inner{max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:10px 16px;}
.topnav-links{display:none;}
.topnav-right{margin-left:auto; display:flex; align-items:center; gap:10px;}
.topnav .date{font-size:12.5px; color:var(--muted); display:none; font-weight:600;}
.iconbtn{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--border); color:var(--ink-2);}
.iconbtn:hover{border-color:var(--pink); color:var(--ink);}
.iconbtn svg{width:19px; height:19px;}

.layout{max-width:1240px; margin:0 auto;}
.content{min-width:0; padding:18px 16px 40px;}

/* nav bawah (HP): pill melayang */
.bottomnav{position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:35; display:flex; background:var(--card); border:1px solid var(--border); border-radius:22px; padding:6px; box-shadow:var(--shadow);}
.bottomnav a, .bottomnav button{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 2px 6px; font-size:10.5px; font-weight:700; color:var(--muted); border-radius:16px; white-space:nowrap; font-family:inherit;}
.bottomnav svg{width:22px; height:22px;}
.bottomnav .active{color:var(--ink); background:var(--pink-soft);}

@media (min-width:900px){
  #appShell{padding-bottom:0;}
  .bottomnav{display:none;}
  .topnav .date{display:block;}
  .topnav-inner{padding:10px 24px;}
  .topnav-links{display:flex; gap:4px; margin-left:8px;}
  .navlink{display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; font-size:13.5px; font-weight:700; color:var(--ink-2);}
  .navlink svg{width:18px; height:18px;}
  .navlink:hover{background:var(--pink-tint); color:var(--ink);}
  .navlink.active{background:var(--pink); color:var(--ink);}
  .content{padding:26px 24px 48px;}
}
@media (min-width:900px) and (max-width:1120px){
  .navlink span{display:none;}
  .navlink{padding:9px 11px;}
  .navlink.active span{display:inline;}
}
body.kiosk-mode .topnav-links, body.kiosk-mode .bottomnav{display:none !important;}
body.kiosk-mode #appShell{padding-bottom:0 !important;}
.kiosk-only{display:none;}
body.kiosk-mode .kiosk-only{display:flex;}

/* sheet "Lainnya" */
.more-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.more-item{display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border-radius:16px; background:var(--pink-tint); border:1px solid var(--border); font-size:13px; font-weight:700; color:var(--ink-2); font-family:inherit;}
.more-item svg{width:26px; height:26px;}
.more-item.active{background:var(--pink-soft); color:var(--ink);}
.more-item.danger{color:var(--bad); background:var(--bad-bg); border-color:transparent;}

.page-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.page-head h1{font-size:22px; font-weight:800; letter-spacing:-0.01em;}
.page-sub{color:var(--muted); font-size:13px;}

/* ---------- Cards / generic ---------- */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px;}
.grid{display:grid; gap:12px;}
.badge{display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:20px;}
.badge-good{background:var(--good-bg); color:var(--good);}
.badge-bad{background:var(--bad-bg); color:var(--bad);}
.badge-warn{background:var(--peach-soft); color:var(--peach-dark);}
.badge-muted{background:var(--paper); color:var(--muted); border:1px solid var(--border);}
.chip{padding:7px 14px; border-radius:20px; font-size:13px; font-weight:600; border:1px solid var(--border); background:var(--card); white-space:nowrap;}
.chip.active{background:var(--pink); color:var(--ink); border-color:var(--pink);}
.chip-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; -ms-overflow-style:none; scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}

/* ---------- Dashboard ---------- */
.kpi-hero{background:linear-gradient(120deg, var(--pink) 0%, #F4C3CE 55%, var(--tosca) 100%); color:var(--ink); border-radius:18px; padding:22px 22px 20px; margin-bottom:14px;}
.kpi-hero .lbl{font-size:13px; color:rgba(59,52,64,.72); font-weight:600;}
.kpi-hero .val{font-size:34px; font-weight:800; margin-top:6px; letter-spacing:-0.01em;}
.kpi-row{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px;}
.kpi-mini{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px;}
.kpi-mini .lbl{font-size:12px; color:var(--muted); font-weight:600;}
.kpi-mini .val{font-size:19px; font-weight:800; margin-top:4px;}
@media (min-width:640px){.kpi-row{grid-template-columns:repeat(4,1fr);}}
.chart-wrap{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:14px;}
.chart-wrap h3{font-size:14px; margin-bottom:14px;}
.two-col{display:grid; gap:14px;}
@media (min-width:800px){.two-col{grid-template-columns:1fr 1fr;}}
.list-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px;}
.list-row:last-child{border-bottom:none;}
.list-row .rank{display:inline-block; width:20px; margin-right:6px; color:var(--muted); font-size:12px;}

/* ---------- Kasir ---------- */
.kasir-layout{display:flex; flex-direction:column; gap:14px;}
.product-panel{min-width:0;}
.search-row{display:flex; gap:8px; margin-bottom:10px;}
.search-row input{flex:1; padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); outline:none;}
.search-row input:focus{border-color:var(--tosca); box-shadow:0 0 0 3px var(--tosca-soft);}
.product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px;}
@media (min-width:560px){.product-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1200px){.product-grid{grid-template-columns:repeat(4,1fr);}}
.pcard{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:12px 12px 12px 14px; text-align:left; display:flex; flex-direction:column; gap:7px; min-height:108px; position:relative; overflow:hidden; transition:border-color .12s, box-shadow .12s;}
.pcard::before{content:''; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; background:var(--cat-color, var(--tosca));}
.pcard:hover{border-color:var(--pink); box-shadow:var(--shadow);}
.pcard[disabled]{opacity:.45;}
.pcard .pcard-top{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.pcard .cat{font-size:11px; color:var(--muted); font-weight:700; display:inline-flex; align-items:center; gap:5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pcard .cat i{width:7px; height:7px; border-radius:50%; background:var(--cat-color, var(--tosca)); flex:none;}
.pcard .name{font-weight:700; font-size:14px; line-height:1.3;}
.pcard .price{font-size:15px; color:var(--ink); margin-top:auto; font-weight:800;}
.pcard .stock{font-size:11px; flex:none;}
.empty-state{text-align:center; padding:50px 20px; color:var(--muted);}

.cart-fab{position:fixed; left:14px; right:14px; bottom:calc(88px + env(safe-area-inset-bottom,0px)); background:var(--ink); color:#fff; border-radius:16px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; z-index:40; box-shadow:var(--shadow);}
.cart-fab .n{font-size:13px; opacity:.8;}
.cart-fab .t{font-weight:800; font-size:16px;}
@media (min-width:900px){.cart-fab{display:none !important;}}

.cart-panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column;}
@media (max-width:899px){
  .cart-panel{position:fixed; inset:0; z-index:50; border-radius:0; transform:translateY(100%); transition:transform .28s ease; overflow-y:auto;}
  .cart-panel.open{transform:translateY(0);}
}
@media (min-width:900px){
  .kasir-layout{flex-direction:row; align-items:flex-start;}
  .product-panel{flex:1;}
  .cart-panel{width:360px; flex:none; position:sticky; top:14px; max-height:calc(100vh - 100px); overflow-y:auto;}
}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--pink-tint); border-radius:var(--radius) var(--radius) 0 0;}
.cart-head h3{font-size:15px;}
.cart-body{padding:16px; flex:1;}
.cart-section-lbl{font-size:12px; font-weight:700; color:var(--ink-2); margin:14px 0 8px; text-transform:uppercase; letter-spacing:.04em;}
.cart-section-lbl:first-child{margin-top:0;}
.type-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:7px;}
.type-btn{padding:9px 8px; border:1px solid var(--border); border-radius:10px; font-size:12.5px; font-weight:600; text-align:center; background:#fff;}
.type-btn.active{background:var(--pink); color:var(--ink); border-color:var(--pink);}
.type-btn .tag{display:block; font-size:9.5px; color:var(--tosca-dark); margin-top:2px; font-weight:700;}
.type-btn.active .tag{color:rgba(59,52,64,.7);}
.cart-item{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--border);}
.cart-item:last-child{border-bottom:none;}
.cart-item .info{flex:1; min-width:0;}
.cart-item .info .nm{font-size:13.5px; font-weight:700;}
.qty-ctrl{display:flex; align-items:center; gap:8px; margin-top:6px;}
.qty-ctrl button{width:24px; height:24px; border-radius:7px; background:var(--pink-soft); color:var(--ink); font-weight:800; display:flex; align-items:center; justify-content:center;}
.qty-ctrl .q{font-size:13px; font-weight:700; min-width:16px; text-align:center;}
.price-input{width:100%; margin-top:6px; padding:7px 9px; border:1px solid var(--tosca); border-radius:8px; font-size:13px;}
.item-disc{display:flex; gap:6px; margin-top:6px;}
.item-disc select{border:1px solid var(--border); border-radius:8px; padding:6px 7px; font-size:12px; background:#fff; color:var(--ink-2);}
.item-disc-value{width:70px; padding:6px 7px; border:1px solid var(--border); border-radius:8px; font-size:12px;}
.sub-orig{display:block; text-decoration:line-through; color:var(--muted); font-size:11px; font-weight:400;}
.cart-item .sub{font-size:13px; font-weight:700; white-space:nowrap;}
.cart-item .rm{color:var(--bad); font-size:11.5px; margin-top:6px; font-weight:600;}
.disc-row{display:flex; gap:8px;}
.disc-row select{border:1px solid var(--border); border-radius:8px; padding:9px; background:#fff; flex:1; min-width:0;}
.disc-row input{flex:1; min-width:0; border:1px solid var(--border); border-radius:8px; padding:9px;}
.disc-row input:disabled{background:var(--paper); color:var(--muted); cursor:not-allowed;}
.totals{padding:14px 16px; border-top:1px solid var(--border);}
.trow{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:6px; color:var(--ink-2);}
.trow.grand{font-size:17px; font-weight:800; color:var(--ink); margin-top:8px; padding-top:8px; border-top:1px dashed var(--border);}
.cart-footer{padding:14px 16px; border-top:1px solid var(--border);}

/* ---------- Tables / lists ---------- */
.data-list{display:flex; flex-direction:column; gap:8px;}
.data-row{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:13px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.data-row .main{min-width:0;}
.data-row .main .t1{font-weight:700; font-size:14px;}
.data-row .main .t2{font-size:12px; color:var(--muted); margin-top:2px;}
.data-row .actions{display:flex; gap:6px; flex:none;}
.iconsm{width:32px; height:32px; border-radius:9px; background:var(--pink-tint); display:flex; align-items:center; justify-content:center;}
.iconsm:hover{background:var(--pink-soft);}
.iconsm svg{width:15px; height:15px;}
.filter-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.filter-bar select, .filter-bar input{padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:#fff; font-size:13px;}

/* ---------- Modal ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(59,52,64,.45); z-index:60; display:flex; align-items:flex-end; justify-content:center;}
@media (min-width:640px){.modal-bg{align-items:center;}}
.modal{background:#fff; border-radius:20px 20px 0 0; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; padding:22px;}
@media (min-width:640px){.modal{border-radius:18px;}}
.modal h3{font-size:17px; margin-bottom:16px;}
.form-row{margin-bottom:13px;}
.form-row label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:5px;}
.form-row input, .form-row select{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:9px; outline:none;}
.form-row input:focus, .form-row select:focus{border-color:var(--tosca); box-shadow:0 0 0 3px var(--tosca-soft);}
.form-actions{display:flex; gap:8px; margin-top:18px;}
.form-actions .btn{flex:1;}
.switch-row{display:flex; align-items:center; justify-content:space-between; padding:8px 0;}
.switch{position:relative; width:42px; height:24px; border-radius:20px; background:var(--border); flex:none; cursor:pointer;}
.switch.on{background:var(--tosca);}
.switch .dot{position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .15s;}
.switch.on .dot{left:20px;}

/* ---------- Toast ---------- */
#toastHost{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; width:calc(100% - 28px); max-width:360px;}
.toast{padding:12px 16px; border-radius:12px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow); animation:slideDown .2s ease;}
.toast.good{background:var(--ink); color:#fff;}
.toast.bad{background:var(--bad); color:#fff;}
@keyframes slideDown{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Print receipt ---------- */
#receiptPrint{display:none;}
@media print{
  body *{visibility:hidden;}
  #receiptPrint, #receiptPrint *{visibility:visible;}
  #receiptPrint{display:block !important; position:absolute; top:0; left:0; width:280px; padding:10px; font-family:'Nunito',monospace; font-size:12px; color:#000;}
  #receiptPrint .rline{display:flex; justify-content:space-between;}
  #receiptPrint hr{border:none; border-top:1px dashed #000; margin:6px 0;}
}

/* ---------- Gerakan halus / micro-interactions ---------- */
.btn, .chip, .type-btn, .pcard, .iconbtn, .iconsm, .acc-chip, .data-row, .cart-fab, .qty-ctrl button{
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active, .chip:active, .type-btn:active, .iconbtn:active, .iconsm:active, .acc-chip:active, .qty-ctrl button:active{ transform:scale(.93); }
.pcard:active{ transform:scale(.96); }

@keyframes bgIn{ from{opacity:0;} to{opacity:1;} }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
.modal-bg{ animation:bgIn .18s ease; }
.modal{ animation:modalIn .22s cubic-bezier(.2,.8,.2,1); }

@keyframes cardPop{ 0%{transform:scale(1);} 40%{transform:scale(.92);} 100%{transform:scale(1);} }
.pcard.pop{ animation:cardPop .28s ease; }

@keyframes shakeX{
  10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);}
}
.shake{ animation:shakeX .4s cubic-bezier(.36,.07,.19,.97); }

@keyframes loginCardIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
.login-card{ animation:loginCardIn .35s ease; }

@keyframes checkPop{ 0%{transform:scale(0); opacity:0;} 60%{transform:scale(1.15); opacity:1;} 100%{transform:scale(1); opacity:1;} }
.checkout-success{ position:absolute; inset:0; background:#fff; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border-radius:var(--radius); }
.checkout-success .success-check{ color:var(--good); width:64px; height:64px; animation:checkPop .35s cubic-bezier(.34,1.56,.64,1); }
.checkout-success .success-check svg{ width:100%; height:100%; }
.checkout-success .success-text{ font-weight:800; font-size:16px; }

/* ---------- Stok page ---------- */
.stok-tabs{display:flex; gap:8px; margin-bottom:14px;}
.stok-summary{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px;}
.stok-row .nums{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;}
.stok-pill{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:20px; border:1px solid var(--border); background:var(--paper);}
.stok-pill .lbl{font-weight:600; color:var(--muted);}
.stok-pill.ok{background:var(--good-bg); border-color:transparent; color:var(--good);}
.stok-pill.ok .lbl{color:var(--good); opacity:.75;}
.stok-pill.low{background:var(--peach-soft); border-color:transparent; color:var(--peach-dark);}
.stok-pill.low .lbl{color:var(--peach-dark); opacity:.75;}
.stok-pill.zero{background:var(--bad-bg); border-color:transparent; color:var(--bad);}
.stok-pill.zero .lbl{color:var(--bad); opacity:.75;}
.stok-now{display:flex; justify-content:space-between; gap:8px; padding:10px 12px; background:var(--pink-tint); border-radius:10px; font-size:13px; margin-bottom:12px;}
.stok-now b{font-weight:800;}
.log-type{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:6px; margin-right:6px;}
.log-type.masuk{background:var(--good-bg); color:var(--good);}
.log-type.adjustment{background:var(--peach-soft); color:var(--peach-dark);}
.log-type.jual{background:var(--pink-soft); color:#B4506B;}
.log-type.refund{background:#EDE7F2; color:#6E5A8A;}
.log-delta{font-weight:800;}
.log-delta.plus{color:var(--good);}
.log-delta.minus{color:var(--bad);}

/* ---------- flatpickr (dashboard) ikut tema ---------- */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange{background:var(--pink) !important; border-color:var(--pink) !important; color:var(--ink) !important;}
.flatpickr-day.inRange{background:var(--pink-soft) !important; border-color:var(--pink-soft) !important; box-shadow:-5px 0 0 var(--pink-soft), 5px 0 0 var(--pink-soft) !important;}
.flatpickr-day.today{border-color:var(--tosca) !important;}