:root{
  --tk-bg:#f4f7fb;--tk-surface:#fff;--tk-soft:#f8fafc;--tk-text:#172033;--tk-muted:#667085;
  --tk-line:#dde4ed;--tk-brand:#d81b60;--tk-brand-dark:#ad1457;--tk-brand-soft:#fce4ec;
  --tk-danger:#b42318;--tk-radius:14px;--tk-shadow:0 8px 24px rgba(25,39,68,.075);
  --tk-side:250px;--tk-gap:16px;
}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;overflow-x:hidden;background:var(--tk-bg)!important;color:var(--tk-text)!important;font-family:Inter,"Segoe UI",Arial,sans-serif!important;-webkit-text-size-adjust:100%}
img,svg,video,canvas{max-width:100%;height:auto}
.layout{display:grid!important;grid-template-columns:var(--tk-side) minmax(0,1fr)!important;min-height:100vh;width:100%;max-width:100vw}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;background:#8e1648!important;color:#fff4f8;border:0!important;padding:22px 16px!important;box-shadow:4px 0 18px rgba(8,25,20,.12);z-index:30}
.brand{font-size:27px!important;line-height:1.1;letter-spacing:-.7px;margin:0 8px 4px!important;color:#fff}
.side>.muted{color:#ffd1e3!important;margin:0 8px 22px;font-size:12px!important}
.nav{display:block!important}
.nav details{border-top:1px solid rgba(255,255,255,.11)!important;margin:10px 0!important;padding-top:9px!important}
.nav summary{color:#ffe0ec!important;padding:8px 10px!important;font-size:13px!important;font-weight:800!important;letter-spacing:.2px;list-style:none;cursor:pointer}
.nav summary::-webkit-details-marker{display:none}
.nav a{display:block!important;border:0!important;border-radius:10px!important;color:#fff0f6!important;margin:3px 0!important;padding:10px 12px!important;transition:background .16s ease,transform .16s ease;white-space:normal;overflow-wrap:anywhere}
.nav details a{margin-left:0!important}
.nav a:hover{background:rgba(255,255,255,.09)!important;transform:translateX(2px)}
.nav a.active{background:linear-gradient(135deg,#f06292,#d81b60)!important;color:#fff!important;box-shadow:0 7px 18px rgba(0,0,0,.18)}
.main{width:100%;max-width:100%;overflow:hidden;background:var(--tk-bg)}
.top{min-height:70px!important;height:auto!important;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(10px);border-bottom:1px solid var(--tk-line)!important;padding:12px 24px!important;box-shadow:0 2px 10px rgba(30,44,72,.04);gap:12px;flex-wrap:wrap}
.top>strong{font-size:20px;letter-spacing:-.25px;overflow-wrap:anywhere}
.content{padding:22px 24px 42px!important;margin:0 auto;width:100%;max-width:1540px!important;overflow:hidden}
.card{width:100%;max-width:100%;border:1px solid var(--tk-line)!important;border-radius:var(--tk-radius)!important;box-shadow:var(--tk-shadow);padding:18px!important;background:var(--tk-surface)!important;margin-bottom:18px!important;overflow:hidden}
.grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:var(--tk-gap)!important;width:100%}
.metric{position:relative;overflow:hidden!important;min-height:112px}
.metric:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--tk-brand)}
.metric strong{font-size:clamp(20px,2vw,26px)!important;line-height:1.15;color:var(--tk-brand-dark);overflow-wrap:anywhere}
h1,h2,h3{letter-spacing:-.35px;color:#4a1830;overflow-wrap:anywhere}.muted{color:var(--tk-muted)!important}
.row{max-width:100%;gap:10px!important}.row>*{max-width:100%}
.btn,button{min-height:40px;max-width:100%;border:1px solid #b9c5d4!important;background:#fff!important;color:#5b2340!important;border-radius:10px!important;padding:9px 14px!important;font-weight:650;transition:.16s ease;white-space:normal;overflow-wrap:anywhere}
.btn:hover,button:hover{border-color:var(--tk-brand)!important;box-shadow:0 4px 12px rgba(23,107,82,.14);transform:translateY(-1px)}
.btn.primary,button.primary{background:linear-gradient(135deg,var(--tk-brand),var(--tk-brand-dark))!important;color:#fff!important;border-color:transparent!important}
.btn.danger,button.danger{color:var(--tk-danger)!important;border-color:#efb7b2!important}
input,select,textarea{display:block;width:100%!important;max-width:100%;border:1px solid #c8d1dc!important;border-radius:10px!important;padding:10px 11px!important;min-height:41px;background:#fff!important;color:var(--tk-text)!important;transition:.16s ease}
textarea{resize:vertical;min-height:88px}input[type=checkbox],input[type=radio]{width:auto!important;min-height:auto}
input:focus,select:focus,textarea:focus{outline:0!important;border-color:var(--tk-brand)!important;box-shadow:0 0 0 3px rgba(23,107,82,.12)!important}
label{color:#6d3650!important;margin-top:10px!important;overflow-wrap:anywhere}
.form-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;width:100%}
.finance-entry-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;align-items:start;width:100%}
.pos{display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr)!important;gap:16px!important;width:100%;align-items:start}
.table-wrap{width:100%;max-width:100%;overflow:auto!important;-webkit-overflow-scrolling:touch;border:1px solid var(--tk-line);border-radius:12px;background:#fff;overscroll-behavior-inline:contain}
table{width:100%!important;max-width:none;background:#fff;border-collapse:collapse}th{background:#fff0f6!important;color:#7a294f!important;font-size:12px;text-transform:uppercase;letter-spacing:.25px;position:sticky;top:0;z-index:1}th,td{padding:11px 12px!important;border-bottom:1px solid #e8edf3!important;overflow-wrap:anywhere}tr:hover td{background:#fffafd}
.flash{border:0!important;border-left:4px solid var(--tk-brand)!important;background:var(--tk-brand-soft)!important;color:#8a204f;box-shadow:var(--tk-shadow)}.flash.err{border-left-color:var(--tk-danger)!important;background:#fff1f0!important;color:#7a271a}
.product-list{max-width:100%;border-color:var(--tk-line)!important;border-radius:12px!important;background:#fff}.product-item{padding:12px!important;border-color:#f5dbe6!important;overflow-wrap:anywhere}.product-item:hover,.product-item.active{background:var(--tk-brand-soft)!important}
.total{font-size:clamp(25px,4vw,34px)!important;color:var(--tk-brand-dark);letter-spacing:-1px;overflow-wrap:anywhere}
.qtybox{max-width:100%}.qtybox input{width:64px!important;min-width:54px}
.modal{padding:14px!important;backdrop-filter:blur(5px)}.modal-box{width:min(560px,100%)!important;max-height:calc(100vh - 28px);overflow:auto;border:0!important;border-radius:18px!important;box-shadow:0 25px 70px rgba(12,25,21,.28)}
.status-item,.shift-summary>div,.deposit-box,.account-help{border-color:var(--tk-line)!important;background:var(--tk-soft)!important}
.shift-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}.shift-summary strong{white-space:normal!important;overflow-wrap:anywhere}
.finance-entry-card{overflow:visible!important}.finance-entry-card select{background:#fff!important}
.tk-mobile-menu{display:none}
body.tk-ui-ready .card{animation:tkEnter .18s ease both}@keyframes tkEnter{from{opacity:.76;transform:translateY(2px)}to{opacity:1;transform:none}}
@media(max-width:1180px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pos{grid-template-columns:minmax(0,1fr) minmax(300px,.72fr)!important}}
@media(max-width:900px){
  :root{--tk-gap:12px}.layout{display:block!important}.side{position:fixed;inset:0 auto 0 0;width:min(82vw,300px);height:100dvh;transform:translateX(-105%);transition:transform .2s ease;padding:18px 14px!important;box-shadow:14px 0 40px rgba(8,25,20,.28)}
  body.tk-menu-open .side{transform:translateX(0)}body.tk-menu-open{overflow:hidden}body.tk-menu-open:after{content:"";position:fixed;inset:0;background:rgba(5,18,14,.45);z-index:25}
  .tk-mobile-menu{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;min-width:42px;padding:8px 10px!important}
  .top{padding:10px 14px!important;align-items:center!important;flex-wrap:nowrap}.top>strong{font-size:17px;flex:1}.top>.row{flex:0 1 auto;justify-content:flex-end;flex-wrap:nowrap!important}.top>.row span{display:none}
  .content{padding:14px!important}.card{padding:14px!important;border-radius:12px!important;margin-bottom:14px!important}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.form-grid,.finance-entry-grid,.pos{grid-template-columns:1fr!important}.shift-summary{grid-template-columns:1fr!important}.deposit-form{grid-template-columns:1fr!important}
  table{min-width:680px}.nav summary{font-size:13px!important}.nav a{padding:11px 12px!important}
}
@media(max-width:600px){
  .grid{grid-template-columns:1fr!important}.metric{min-height:92px}.top{min-height:58px!important}.top>strong{font-size:16px}.content{padding:10px!important}.card{padding:12px!important}
  .row{align-items:stretch!important}.row>.btn,.row>button{flex:1 1 140px}.btn,button,input,select,textarea{font-size:14px!important}
  .table-wrap{border-radius:10px}table{min-width:620px}th,td{padding:9px 10px!important}.modal{padding:8px!important}.modal-box{max-height:calc(100dvh - 16px)}
}
@media(max-width:390px){.content{padding:8px!important}.card{padding:10px!important}.top{padding:8px 10px!important}.brand{font-size:23px!important}.row>.btn,.row>button{flex-basis:100%}}
@media print{.side,.top,.flash,.tk-mobile-menu{display:none!important}.layout{display:block!important}.content{padding:0!important;max-width:none!important}.card{box-shadow:none!important;border:0!important;padding:0!important}.table-wrap{overflow:visible!important;border:0!important}table{min-width:0!important}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* El-Beauty UI Tahap 3 — responsive polish tanpa mengubah mesin sistem */
html{overflow-x:hidden;scrollbar-gutter:stable}
body{min-width:0;overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.layout,.main,.content,.card,.grid,.form-grid,.finance-entry-grid,.pos{min-width:0}
.side{overscroll-behavior:contain}
.side .muted{display:block;margin:-14px 4px 18px;color:rgba(255,255,255,.66)!important;font-size:12px;line-height:1.35}
.nav details{border-top-color:rgba(255,255,255,.12)!important}
.nav summary{display:flex;align-items:center;min-height:38px;color:rgba(255,255,255,.76)!important;text-transform:uppercase;letter-spacing:.075em;font-size:11px!important}
.nav summary::-webkit-details-marker{display:none}
.nav summary:after{content:"⌄";margin-left:auto;font-size:13px;opacity:.7;transition:transform .15s ease}
.nav details:not([open]) summary:after{transform:rotate(-90deg)}
.nav a{font-weight:700!important;line-height:1.25}
.top{max-width:100vw}
.top .row{min-width:0}
.top .row form{margin:0}
.content>h1,.content>h2{margin-top:0}
.card>h3:first-child,.card>h2:first-child{margin-top:0}
hr{height:1px;border:0;background:var(--tk-line);margin:18px 0}
small,.small{line-height:1.45}
.metric{display:flex;flex-direction:column;justify-content:center}
.metric strong{font-variant-numeric:tabular-nums}
.health{font-size:clamp(22px,3vw,31px)!important;line-height:1.15}
.status-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.status-item{min-width:0}
.status-item strong,.status-item span{overflow-wrap:anywhere}
.row>div{min-width:0}
.row>h1,.row>h2,.row>h3{min-width:0}
.row>.muted{line-height:1.45}
.btn,button{line-height:1.25;text-align:center;text-decoration:none}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid rgba(23,107,82,.23);outline-offset:2px}
button[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}
input[type=file]{padding:7px!important}
input[type=number]{font-variant-numeric:tabular-nums}
select{padding-right:34px!important}
.table-wrap{position:relative}
.table-wrap table{font-variant-numeric:tabular-nums}
.table-wrap td:last-child,.table-wrap th:last-child{padding-right:14px!important}
td .row{flex-wrap:nowrap}
td .btn,td button{min-height:34px;padding:7px 10px!important;font-size:12px}
.product-list{max-height:min(52vh,520px)!important;overflow:auto!important;overscroll-behavior:contain}
.product-item{min-width:0}
.product-item>div{min-width:0}
.product-item strong,.product-item span{overflow-wrap:anywhere}
.pos>div{min-width:0}
.pos>.card,.pos>div>.card{min-width:0}
.total{font-variant-numeric:tabular-nums}
.shift-summary>div{min-width:0}
.modal{overflow:auto}
.modal-box{margin:auto}
.finance-entry-grid>.card{height:100%}
.account-help{line-height:1.55}
.flash{position:relative;padding-right:42px!important}
.flash:after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;border-radius:50%;background:currentColor;transform:translateY(-50%);opacity:.55}

/* Tab / tombol menu laporan tetap ringkas dan tidak meluber */
.content>.card>.row:has(a[href*="tab="]){gap:8px!important;align-items:center}
.content>.card>.row:has(a[href*="tab="]) .btn{flex:0 1 auto;min-height:36px;padding:8px 11px!important;font-size:13px;white-space:nowrap}

/* Login dan setup lebih proporsional */
body:not(.tk-ui-ready) .login-wrap{visibility:visible}
.login-wrap{min-height:100dvh;padding:20px;display:grid;place-items:center;background:radial-gradient(circle at top left,#fce4ec 0,transparent 42%),linear-gradient(145deg,#fff8fb,#ffeaf2)}
.login-card{width:min(440px,100%);border:1px solid var(--tk-line);border-radius:22px;padding:26px;background:rgba(255,255,255,.96);box-shadow:0 24px 70px rgba(20,55,44,.13)}
.login-card .brand{color:var(--tk-brand-dark)!important}

/* Desktop lebar: ruang konten maksimal tanpa terasa kosong */
@media(min-width:1500px){.layout{grid-template-columns:240px minmax(0,1fr)!important}.content{max-width:1680px!important}.grid{grid-template-columns:repeat(4,minmax(220px,1fr))!important}}
@media(max-width:1180px){.status-list{grid-template-columns:1fr}.content>.card>.row:has(a[href*="tab="]){overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:4px;scrollbar-width:thin}.content>.card>.row:has(a[href*="tab="]) .btn{flex:0 0 auto}}
@media(max-width:900px){
  .side{padding-top:max(18px,env(safe-area-inset-top))!important;padding-bottom:max(18px,env(safe-area-inset-bottom))!important}
  .top{padding-top:max(10px,env(safe-area-inset-top))!important}
  .content{padding-bottom:max(20px,env(safe-area-inset-bottom))!important}
  .top>.row .btn,.top>.row button{min-width:40px;min-height:40px;padding:8px 10px!important}
  .status-list{grid-template-columns:1fr}
  .product-list{max-height:42vh!important}
  .content>.card>.row:has(a[href*="tab="]){margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
}
@media(max-width:600px){
  body{font-size:14px}
  .top{box-shadow:0 3px 14px rgba(25,52,43,.08)}
  .top>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand{margin-bottom:20px!important}
  .nav a{font-size:14px!important}
  .grid{gap:10px!important}
  .metric{padding:14px!important}
  .metric strong{font-size:22px!important}
  .card h3{font-size:17px}
  .row{gap:8px!important}
  .row>div[style*="padding-top"]{padding-top:0!important;width:100%}
  .row>div[style*="padding-top"] button{width:100%}
  .btn,button{min-height:42px}
  .form-grid{gap:8px!important}
  .table-wrap:after{content:"Geser tabel ke samping";position:sticky;left:8px;display:inline-block;margin:7px 8px 8px;padding:4px 8px;border-radius:999px;background:#ffe8f2;color:#4c665d;font-size:10px;font-weight:700;pointer-events:none}
  .table-wrap:not(:hover):after{opacity:.86}
  td .row{flex-wrap:wrap}
  td .btn,td button{flex:0 0 auto!important}
  .product-item{padding:11px!important}
  .login-wrap{padding:12px}.login-card{padding:20px;border-radius:17px}
}
@media(max-width:420px){
  .content{padding:8px!important}
  .card{border-radius:11px!important}
  .top>.row .btn,.top>.row button{font-size:0!important}
  .top>.row .btn:after,.top>.row button:after{content:"Keluar";font-size:12px}
  .content>.card>.row:has(a[href*="tab="]){margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
}
@supports not selector(:has(*)){
  .content>.card>.row{max-width:100%}
}

/* El-Beauty UI Tahap 4 — Dashboard & POS polish, tetap ringan */
:root{
  --tk-surface-2:#fff8fb;
  --tk-success:#d81b60;
  --tk-warning:#a15c00;
  --tk-focus:rgba(23,107,82,.18);
}
body.tk-page-dashboard .content,
body.tk-page-pos .content{max-width:1600px!important}
body.tk-page-dashboard .grid:first-child{align-items:stretch}
body.tk-page-dashboard .grid:first-child .metric{
  min-height:126px;
  border-top:3px solid rgba(23,107,82,.78)!important;
  background:linear-gradient(180deg,#fff 0%,#fffafd 100%)!important;
}
body.tk-page-dashboard .grid:first-child .metric:before{display:none}
body.tk-page-dashboard .grid:first-child .metric strong{margin-top:10px!important;font-size:clamp(23px,2.2vw,31px)!important}
body.tk-page-dashboard .card h2,
body.tk-page-dashboard .card h3{margin-bottom:10px}
body.tk-page-dashboard .status-list{gap:10px!important}
body.tk-page-dashboard .status-item{
  padding:14px!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#fff,var(--tk-surface-2))!important;
}
body.tk-page-dashboard .status-item strong{display:block;margin-top:4px;font-size:18px;color:var(--tk-brand-dark)}

/* POS: ruang kerja fokus, keranjang tetap terlihat di desktop */
body.tk-page-pos .pos{gap:18px!important}
body.tk-page-pos .pos>.card,
body.tk-page-pos .pos>div>.card{border-radius:16px!important}
body.tk-page-pos .pos>div:last-child{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 104px);overflow:auto;overscroll-behavior:contain}
body.tk-page-pos .product-list{
  max-height:calc(100vh - 330px)!important;
  min-height:260px;
  border-radius:14px!important;
}
body.tk-page-pos .product-item{padding:13px 14px!important;transition:background .13s ease,border-color .13s ease}
body.tk-page-pos .product-item+.product-item{border-top:1px solid #edf1f4}
body.tk-page-pos .product-item:hover{transform:none}
body.tk-page-pos .product-item.active{box-shadow:inset 3px 0 0 var(--tk-brand)}
body.tk-page-pos .total{
  display:block;
  margin:8px 0 4px;
  padding:13px 14px;
  border-radius:13px;
  background:linear-gradient(135deg,var(--tk-brand-soft),#f8fcfa);
  border:1px solid #f1c4d7;
}
body.tk-page-pos .shift-summary{gap:10px!important}
body.tk-page-pos .shift-summary>div{padding:10px 11px!important;border-radius:11px!important;background:#fffafd!important}
body.tk-page-pos .deposit-box{border-radius:11px!important;background:#fffafd!important}
body.tk-page-pos .qtybox{flex-wrap:nowrap!important}
body.tk-page-pos .qtybox button{min-width:36px;padding:7px 9px!important}
body.tk-page-pos .qtybox input{text-align:center;font-weight:700}
body.tk-page-pos button.primary,
body.tk-page-pos .btn.primary{box-shadow:0 7px 18px rgba(23,107,82,.18)}

/* Toolbar halaman dan filter agar konsisten */
.content>.row:first-child{margin-bottom:14px}
.content>.row:first-child h1,
.content>.row:first-child h2{margin:0}
.card form>.row:last-child{margin-top:12px}
.card .form-grid+br{display:none}
.card .form-grid~button,
.card .form-grid~.btn{margin-top:14px}

/* Tabel data besar tetap ringan dan mudah dibaca */
.table-wrap tbody tr:nth-child(even) td{background:#fcfdfd}
.table-wrap tbody tr:hover td{background:#fff0f6!important}
.table-wrap th{white-space:nowrap}
.table-wrap td{line-height:1.4}
.table-wrap td:first-child,.table-wrap th:first-child{padding-left:14px!important}

/* Scrollbar tipis, tanpa library */
.side,.product-list,.table-wrap,.modal-box{scrollbar-width:thin;scrollbar-color:#e5a4c0 transparent}
.side::-webkit-scrollbar,.product-list::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.modal-box::-webkit-scrollbar{width:8px;height:8px}
.side::-webkit-scrollbar-thumb,.product-list::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.modal-box::-webkit-scrollbar-thumb{background:#e5a4c0;border-radius:10px}

@media(max-width:1180px){
  body.tk-page-pos .pos>div:last-child{top:84px}
  body.tk-page-pos .product-list{max-height:460px!important}
}
@media(max-width:900px){
  body.tk-page-dashboard .grid:first-child .metric{min-height:104px}
  body.tk-page-pos .pos>div:last-child{position:static;max-height:none;overflow:visible}
  body.tk-page-pos .product-list{max-height:42vh!important;min-height:220px}
  body.tk-page-pos .total{position:sticky;bottom:0;z-index:3;box-shadow:0 -5px 16px rgba(20,50,40,.08)}
}
@media(max-width:600px){
  body.tk-page-dashboard .grid:first-child{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.tk-page-dashboard .grid:first-child .metric{min-height:100px;padding:12px!important}
  body.tk-page-dashboard .grid:first-child .metric strong{font-size:20px!important}
  body.tk-page-pos .product-list{min-height:190px}
  body.tk-page-pos .product-item{padding:12px!important}
  body.tk-page-pos .total{font-size:25px!important;padding:11px 12px}
  body.tk-page-pos .shift-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:380px){
  body.tk-page-dashboard .grid:first-child{grid-template-columns:1fr!important}
  body.tk-page-pos .shift-summary{grid-template-columns:1fr!important}
}

/* El-Beauty UI Tahap 5 — sidebar penuh sampai bawah dan scroll mandiri */
@media (min-width:901px){
  html,body{min-height:100%;}
  .layout{
    display:block!important;
    min-height:100vh!important;
    width:100%!important;
  }
  .side{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:var(--tk-side)!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:100vh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    z-index:40!important;
  }
  .main{
    display:flex!important;
    flex-direction:column!important;
    width:calc(100% - var(--tk-side))!important;
    max-width:calc(100% - var(--tk-side))!important;
    min-height:100vh!important;
    margin-left:var(--tk-side)!important;
    overflow-x:hidden!important;
  }
  .top{flex:0 0 auto}
  .content{
    flex:1 0 auto;
    min-height:calc(100vh - 70px)!important;
  }
}

@media (min-width:1500px){
  .side{width:240px!important}
  .main{
    width:calc(100% - 240px)!important;
    max-width:calc(100% - 240px)!important;
    margin-left:240px!important;
  }
}

@media (max-width:900px){
  .layout{display:block!important;min-height:100dvh!important}
  .side{
    position:fixed!important;
    inset:0 auto 0 0!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .main{
    width:100%!important;
    max-width:100%!important;
    min-height:100dvh!important;
    margin-left:0!important;
    overflow-x:hidden!important;
  }
  .content{min-height:calc(100dvh - 58px)!important}
}

/* El-Beauty UI Tahap 6 — master data, pembelian, keuangan, jurnal & laporan */
:root{
  --tk-panel-head:#ffe8f2;
  --tk-panel-line:#f0c6d8;
  --tk-info:#205b89;
}

/* Judul halaman dan toolbar aksi */
.content>h1,.content>h2{margin:0 0 16px!important;font-size:clamp(22px,2.2vw,30px)!important}
.content>.row:first-child{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:12px!important;min-height:42px;
}
.content>.row:first-child>.row{justify-content:flex-end}
.content>.row:first-child .btn,.content>.row:first-child button{flex:0 0 auto}

/* Kartu formulir dan ringkasan lebih terstruktur */
.card>h2:first-child,.card>h3:first-child{
  margin:-18px -18px 16px!important;padding:15px 18px 13px!important;
  border-bottom:1px solid var(--tk-panel-line);background:linear-gradient(180deg,#f9fcfb,var(--tk-panel-head));
  font-size:18px!important;
}
.card>h2:first-child+.muted,.card>h3:first-child+.muted{margin-top:-6px!important}
.card form{max-width:100%}
.card form .row{align-items:flex-end}
.card form button[type="submit"]{min-width:120px}

/* Tab keuangan/laporan tetap satu baris dan mudah digeser */
body.tk-page-finance .content>.card>.row:first-child,
body.tk-page-system_tools .content>.card>.row:first-child,
body.tk-page-inventory_control .content>.card>.row:first-child{
  overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap!important;justify-content:flex-start!important;
  margin:-4px 0 16px;padding:4px 1px 8px;scrollbar-width:thin;
}
body.tk-page-finance .content>.card>.row:first-child .btn,
body.tk-page-system_tools .content>.card>.row:first-child .btn,
body.tk-page-inventory_control .content>.card>.row:first-child .btn{flex:0 0 auto;white-space:nowrap}

/* Master data: filter dan tombol tetap padat */
body.tk-page-products .content,
body.tk-page-categories .content,
body.tk-page-customers .content,
body.tk-page-suppliers .content,
body.tk-page-users .content{max-width:1540px!important}
body.tk-page-products .card form .form-grid,
body.tk-page-customers .card form .form-grid,
body.tk-page-suppliers .card form .form-grid,
body.tk-page-users .card form .form-grid{align-items:end}
body.tk-page-products td .row,
body.tk-page-customers td .row,
body.tk-page-suppliers td .row,
body.tk-page-users td .row{flex-wrap:nowrap!important}
body.tk-page-products td .btn,
body.tk-page-customers td .btn,
body.tk-page-suppliers td .btn,
body.tk-page-users td .btn{min-height:34px;padding:6px 9px!important;font-size:12px!important}

/* Pembelian dan retur: area kerja lebih jelas */
body.tk-page-purchases .content,
body.tk-page-purchase_return .content,
body.tk-page-sale_return .content{max-width:1600px!important}
body.tk-page-purchases .product-list{max-height:420px!important}
body.tk-page-purchases .total,
body.tk-page-purchase_return .total,
body.tk-page-sale_return .total{background:var(--tk-brand-soft);border:1px solid #cfe6dd;padding:12px 14px;border-radius:12px}

/* Keuangan dan jurnal */
body.tk-page-finance .metric{min-height:104px}
body.tk-page-finance .metric strong{font-size:clamp(19px,2vw,26px)!important}
body.tk-page-finance .finance-entry-card{
  border-top:3px solid rgba(23,107,82,.68)!important;
}
body.tk-page-finance .account-help{padding:12px 14px!important;border-radius:11px!important;line-height:1.55}
body.tk-page-finance .table-wrap td:nth-child(n+3){font-variant-numeric:tabular-nums}
body.tk-page-finance .table-wrap td:last-child{white-space:nowrap}

/* Laporan: angka sejajar dan mudah dibaca */
body.tk-page-finance table td,
body.tk-page-system_tools table td{vertical-align:top}
body.tk-page-finance table td[style*="text-align:right"],
body.tk-page-finance table th[style*="text-align:right"]{font-variant-numeric:tabular-nums}
body.tk-page-finance .card .row .muted{line-height:1.45}

/* Pengaturan printer, sistem, AI */
body.tk-page-printer_settings .content,
body.tk-page-system_tools .content,
body.tk-page-ai .content{max-width:1180px!important}
body.tk-page-printer_settings .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.tk-page-system_tools .card,
body.tk-page-printer_settings .card{overflow:visible}
body.tk-page-ai textarea{min-height:150px}

/* Badge status generik tanpa mengubah HTML */
.status-item strong,.metric strong,.total{font-variant-numeric:tabular-nums}
.card code{display:inline-block;max-width:100%;overflow-wrap:anywhere;background:#fff0f6;padding:2px 6px;border-radius:6px;color:#8f2455}

/* Empty state dan teks panjang */
td[colspan]{padding:28px 16px!important;text-align:center;color:var(--tk-muted)}
.card p,.card .muted{overflow-wrap:anywhere}

/* Desktop kecil dan tablet */
@media(max-width:1180px){
  body.tk-page-products td .row,
  body.tk-page-customers td .row,
  body.tk-page-suppliers td .row,
  body.tk-page-users td .row{flex-wrap:wrap!important}
  body.tk-page-printer_settings .form-grid{grid-template-columns:1fr 1fr!important}
}

@media(max-width:900px){
  .content>.row:first-child{align-items:flex-start!important;flex-wrap:wrap!important}
  .content>.row:first-child>.row{width:100%;justify-content:flex-start!important;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:4px}
  .content>.row:first-child>.row>.btn,.content>.row:first-child>.row>button{flex:0 0 auto}
  .card>h2:first-child,.card>h3:first-child{margin:-14px -14px 14px!important;padding:13px 14px 12px!important}
  body.tk-page-purchases .product-list{max-height:38vh!important}
  body.tk-page-finance .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:600px){
  .content>.row:first-child{margin-bottom:10px!important}
  .content>.row:first-child h1,.content>.row:first-child h2{font-size:21px!important}
  .card>h2:first-child,.card>h3:first-child{margin:-12px -12px 12px!important;padding:12px!important;font-size:16px!important}
  body.tk-page-printer_settings .form-grid{grid-template-columns:1fr!important}
  body.tk-page-finance .grid{grid-template-columns:1fr!important}
  body.tk-page-finance .metric{min-height:86px}
  body.tk-page-products td .row,
  body.tk-page-customers td .row,
  body.tk-page-suppliers td .row,
  body.tk-page-users td .row{flex-wrap:wrap!important}
  body.tk-page-products td .btn,
  body.tk-page-customers td .btn,
  body.tk-page-suppliers td .btn,
  body.tk-page-users td .btn{flex:1 1 auto!important}
}

/* =========================================================
   TAHAP 7 — FINAL RESPONSIVE POLISH
   Hanya lapisan tampilan; tidak mengubah logika aplikasi.
   ========================================================= */

/* Ritme halaman dan lebar aman pada semua resolusi */
:root{
  --tk-page-gap:clamp(12px,1.4vw,22px);
  --tk-card-radius:14px;
}
html{scroll-behavior:smooth}
body{min-width:0;max-width:100%;overflow-x:hidden}
.content{width:auto!important;max-width:none;min-width:0;padding:var(--tk-page-gap)!important}
.content>*{min-width:0;max-width:100%}
.grid,.form-grid,.row,.card,.table-wrap{min-width:0}

/* Header halaman tetap ringkas dan tidak memaksa layar melebar */
.tk-page-toolbar{gap:10px!important;min-width:0}
.tk-page-toolbar>div,.tk-page-toolbar>.row{min-width:0}
.tk-page-toolbar h1,.tk-page-toolbar h2{max-width:100%;overflow-wrap:anywhere}
.tk-page-toolbar .btn,.tk-page-toolbar button{white-space:nowrap}

/* Konsistensi kartu dan form */
.card{border-radius:var(--tk-card-radius)!important;box-shadow:0 8px 24px rgba(28,52,45,.055)!important}
.card:hover{box-shadow:0 10px 28px rgba(28,52,45,.075)!important}
label{min-width:0}
input,select,textarea{max-width:100%;min-width:0}
textarea{resize:vertical}
input[type="date"],input[type="datetime-local"],input[type="month"],input[type="number"]{width:100%}

/* Fokus keyboard yang jelas tetapi ringan */
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid rgba(36,143,108,.25)!important;
  outline-offset:2px!important;
}

/* Navigasi desktop: item panjang tidak memotong sidebar */
.side,.nav{min-width:0}
.nav a,.nav summary{overflow-wrap:anywhere;word-break:normal}
.nav details[open]>summary{color:#fff}
.side::-webkit-scrollbar{width:7px}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
.side::-webkit-scrollbar-track{background:transparent}

/* Tabel data besar: header stabil, teks panjang aman */
.table-wrap{position:relative;max-width:100%;overscroll-behavior-inline:contain}
.table-wrap table{width:100%;max-width:none}
.table-wrap th{position:sticky;top:0;z-index:2;background:#fff0f6!important}
.table-wrap td,.table-wrap th{overflow-wrap:break-word}
.table-wrap td .row{min-width:max-content}
.table-wrap:focus-visible{outline:2px solid rgba(36,143,108,.35);outline-offset:2px}

/* Angka laporan lebih sejajar */
.metric strong,.total,td[style*="text-align:right"],th[style*="text-align:right"]{
  font-variant-numeric:tabular-nums;
}

/* Login dan setup: pas di HP maupun desktop */
body.tk-page-login,body.tk-page-setup{
  min-height:100dvh;
  background:linear-gradient(145deg,#fff0f6 0%,#fffafd 52%,#ffe8f2 100%)!important;
}
body.tk-page-login .content,body.tk-page-setup .content{
  min-height:100dvh;display:grid;place-items:center;padding:20px!important;
}
body.tk-page-login .card,body.tk-page-setup .card{
  width:min(100%,460px)!important;margin:auto!important;padding:clamp(20px,4vw,34px)!important;
  border:1px solid #f0c6d8!important;box-shadow:0 24px 60px rgba(20,64,49,.12)!important;
}
body.tk-page-login .card h1,body.tk-page-setup .card h1{font-size:clamp(26px,5vw,38px)!important;line-height:1.08}
body.tk-page-login .btn,body.tk-page-setup .btn{width:100%;justify-content:center;min-height:46px}

/* POS pada laptop pendek tetap nyaman */
@media(min-width:901px) and (max-height:760px){
  body.tk-page-pos .content{padding-top:12px!important;padding-bottom:12px!important}
  body.tk-page-pos .card{padding:12px!important}
  body.tk-page-pos .product-list{max-height:42vh!important}
  body.tk-page-pos .cart-panel{top:12px!important;max-height:calc(100vh - 24px);overflow:auto}
}

/* Tablet: grid tidak memaksa kolom terlalu sempit */
@media(max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tk-page-toolbar{align-items:flex-start!important;flex-wrap:wrap!important}
}

/* HP: benar-benar satu layar, tidak ada elemen keluar */
@media(max-width:900px){
  body{width:100%;min-height:100dvh}
  .content{padding:12px!important;padding-top:64px!important}
  .side{height:100dvh!important;max-height:100dvh!important;padding-bottom:max(20px,env(safe-area-inset-bottom))!important}
  .top{min-width:0}
  .tk-mobile-menu{position:fixed!important;top:max(10px,env(safe-area-inset-top));left:10px;z-index:1002}
  .grid,.form-grid{grid-template-columns:1fr!important}
  .row{max-width:100%}
  .card{padding:12px!important;border-radius:12px!important}
  .table-wrap{width:100%;max-width:100%;-webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:680px}
  .table-wrap td .row{flex-wrap:nowrap!important}
  .tk-page-toolbar>.row{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:4px}
  .tk-page-toolbar>.row>*{flex:0 0 auto}
  body.tk-page-pos .table-wrap table{min-width:560px}
  body.tk-page-finance .table-wrap table{min-width:720px}
  body.tk-page-products .table-wrap table,
  body.tk-page-customers .table-wrap table,
  body.tk-page-suppliers .table-wrap table,
  body.tk-page-users .table-wrap table{min-width:760px}
}

@media(max-width:480px){
  .content{padding:10px!important;padding-top:62px!important}
  .card{padding:10px!important}
  .btn,button{max-width:100%}
  .tk-page-toolbar h1,.tk-page-toolbar h2{font-size:20px!important}
  body.tk-page-login .content,body.tk-page-setup .content{padding:12px!important}
  body.tk-page-login .card,body.tk-page-setup .card{padding:20px!important}
}

/* Pengguna yang memilih gerakan minimal */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Cetak: sidebar dan kontrol layar tidak ikut */
@media print{
  .side,.top,.tk-mobile-menu,.no-print{display:none!important}
  .content{margin:0!important;padding:0!important;width:100%!important}
  .card{box-shadow:none!important;border:0!important;break-inside:avoid}
  .table-wrap{overflow:visible!important}
  table{min-width:0!important;width:100%!important}
}

/* =========================================================
   TAHAP 8 — FINAL VISUAL CONSISTENCY
   Hanya lapisan tampilan; tidak mengubah proses aplikasi.
   ========================================================= */
:root{
  --tk-surface:#ffffff;
  --tk-surface-soft:#fff7fa;
  --tk-border:#f0c9da;
  --tk-border-strong:#e8b5ca;
  --tk-text:#4a1830;
  --tk-muted:#95657c;
  --tk-accent:#d81b60;
  --tk-accent-hover:#ad1457;
  --tk-danger:#b53b3b;
  --tk-warning:#9a6410;
}
html.tk-ui-v8{scrollbar-gutter:stable}
body{color:var(--tk-text);background:#fff5f8!important}
.content{background:transparent!important}

/* Hierarki halaman dan ruang antarbagian */
.content>h1,.content>h2{letter-spacing:-.025em;color:var(--tk-text)}
.tk-page-toolbar{margin-bottom:14px!important;padding:2px 0}
.tk-page-toolbar h1,.tk-page-toolbar h2{margin:0!important;line-height:1.18!important}
.tk-page-toolbar p{margin:5px 0 0;color:var(--tk-muted)}
.content>.card+.card,.content>.grid+.card,.content>.card+.grid{margin-top:16px}

/* Kartu: bersih, ringan, dan konsisten */
.card{
  background:var(--tk-surface)!important;
  border:1px solid var(--tk-border)!important;
  overflow:hidden;
}
.tk-section-card>h2:first-child,.tk-section-card>h3:first-child{
  margin:-2px 0 16px!important;
  padding-bottom:11px;
  border-bottom:1px solid var(--tk-border);
  font-weight:800!important;
  letter-spacing:-.015em;
}
.card>p:first-child{margin-top:0}
.card>p:last-child{margin-bottom:0}

/* Tombol: satu bahasa visual */
.btn,button,input[type="submit"],input[type="button"]{
  border-radius:9px!important;
  font-weight:750!important;
  min-height:39px;
  line-height:1.15;
  box-shadow:none!important;
  transition:background-color .16s ease,border-color .16s ease,transform .12s ease!important;
}
.btn:hover,button:hover{transform:translateY(-1px)}
.btn:active,button:active{transform:translateY(0)}
.btn.primary,.btn-success,button.primary{background:var(--tk-accent)!important;border-color:var(--tk-accent)!important;color:#fff!important}
.btn.primary:hover,.btn-success:hover,button.primary:hover{background:var(--tk-accent-hover)!important;border-color:var(--tk-accent-hover)!important}
.btn.danger,.btn-danger{background:#fff4f4!important;color:var(--tk-danger)!important;border-color:#e9caca!important}
.btn.danger:hover,.btn-danger:hover{background:#ffeaea!important}
.btn.small,.table-wrap .btn,.table-wrap button{min-height:32px;padding:6px 10px!important;font-size:12.5px!important}

/* Form lebih mudah dipindai */
label{font-weight:720!important;color:#6b334e}
input,select,textarea{
  background:#fff!important;
  border:1px solid var(--tk-border-strong)!important;
  border-radius:9px!important;
  min-height:42px;
}
textarea{min-height:96px}
input:hover,select:hover,textarea:hover{border-color:#dc8fb0!important}
input:focus,select:focus,textarea:focus{
  border-color:var(--tk-accent)!important;
  box-shadow:0 0 0 3px rgba(22,121,91,.11)!important;
}
input:disabled,select:disabled,textarea:disabled{background:#fff0f5!important;color:#9d7387!important}

/* Tabel padat tetapi tetap terbaca */
.table-wrap{
  border:1px solid var(--tk-border)!important;
  border-radius:11px!important;
  background:#fff;
}
.table-wrap table{border-collapse:separate!important;border-spacing:0!important}
.table-wrap th{
  color:#405149!important;
  font-size:12px!important;
  letter-spacing:.025em;
  text-transform:none;
  border-bottom:1px solid var(--tk-border-strong)!important;
  padding-top:11px!important;padding-bottom:11px!important;
}
.table-wrap td{border-bottom:1px solid #edf2ef!important;padding-top:10px!important;padding-bottom:10px!important;vertical-align:middle!important}
.table-wrap tbody tr:last-child td{border-bottom:0!important}
.table-wrap tbody tr:hover td{background:#fff8fb!important}
.table-wrap .tk-table-actions{gap:6px!important;align-items:center!important}
.table-wrap .tk-table-actions form{margin:0!important}

/* Badge/status agar cepat dikenali tanpa warna berlebihan */
.badge,.status,.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:25px;padding:4px 9px;border-radius:999px!important;
  font-size:11.5px!important;font-weight:800!important;
}

/* Ringkasan angka */
.metric{position:relative}
.metric strong{letter-spacing:-.035em;line-height:1.05}
.metric small,.muted,.help{color:var(--tk-muted)!important}
.total{letter-spacing:-.025em}

/* Sidebar: keterbacaan dan pemisah kelompok lebih baik */
.side{border-right:1px solid rgba(255,255,255,.09)}
.nav details{border-bottom:1px solid rgba(255,255,255,.075)}
.nav details:last-child{border-bottom:0}
.nav summary{padding-top:13px!important;padding-bottom:9px!important;letter-spacing:.035em}
.nav a{min-height:39px;display:flex!important;align-items:center}
.nav a.active{box-shadow:inset 3px 0 0 rgba(255,255,255,.72)}

/* Tab laporan dan toolbar tidak patah */
.tabs,.tab-list,.report-tabs{display:flex;gap:7px;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding-bottom:3px}
.tabs>a,.tab-list>a,.report-tabs>a{flex:0 0 auto;white-space:nowrap}

/* Empty state sederhana */
.table-wrap td[colspan]{text-align:center;color:var(--tk-muted);padding:28px 14px!important}

/* Desktop lebar: konten tidak terlalu melebar sehingga mudah dibaca */
@media(min-width:1500px){
  .content{padding-left:clamp(24px,2.4vw,42px)!important;padding-right:clamp(24px,2.4vw,42px)!important}
  .content>form,.content>.card,.content>.grid,.content>.row{max-width:1540px}
}

/* Tablet */
@media(min-width:901px) and (max-width:1180px){
  .card{padding:14px!important}
  .table-wrap th,.table-wrap td{padding-left:10px!important;padding-right:10px!important}
}

/* HP: kontrol besar, ruang efisien, tetap satu layar */
@media(max-width:900px){
  .tk-page-toolbar{margin-bottom:10px!important}
  .tk-page-toolbar h1,.tk-page-toolbar h2{font-size:clamp(20px,6vw,25px)!important}
  .card{box-shadow:0 5px 16px rgba(28,52,45,.05)!important}
  .content>.card+.card,.content>.grid+.card,.content>.card+.grid{margin-top:12px}
  input,select,textarea{font-size:16px!important;min-height:44px}
  .btn,button,input[type="submit"],input[type="button"]{min-height:42px}
  .table-wrap th,.table-wrap td{padding-left:9px!important;padding-right:9px!important}
  .table-wrap .btn,.table-wrap button{min-height:34px!important}
  .tabs,.tab-list,.report-tabs{margin-left:-2px;margin-right:-2px}
}

@media(max-width:420px){
  .content{padding-left:8px!important;padding-right:8px!important}
  .card{padding:10px!important;border-radius:10px!important}
  .row{gap:8px!important}
  .btn,button{padding-left:11px!important;padding-right:11px!important}
}

/* =========================================================
   TAHAP 9 — Final usability polish
   Hanya lapisan visual; tidak mengubah logika aplikasi.
   ========================================================= */
:root{
  --tk-touch:44px;
  --tk-focus:0 0 0 3px rgba(31,111,82,.18);
}

/* Area konten stabil pada layar sempit maupun sangat lebar */
html,body{max-width:100%;overflow-x:hidden}
.content{width:auto;min-width:0;box-sizing:border-box}
.content>*{min-width:0;box-sizing:border-box}
.grid,.row,.card,.table-wrap,form,fieldset{min-width:0}

/* Heading dan toolbar tetap teratur ketika teks panjang */
.tk-page-toolbar{align-items:flex-start!important}
.tk-page-toolbar>div:first-child,.tk-page-toolbar>h1,.tk-page-toolbar>h2{min-width:0}
.tk-page-toolbar h1,.tk-page-toolbar h2,.tk-section-card>h2,.tk-section-card>h3{
  overflow-wrap:anywhere;
}

/* Tombol lebih konsisten untuk mouse dan sentuhan */
.btn,button,input[type="submit"],input[type="button"]{
  min-height:38px;
  line-height:1.15;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
  outline:none!important;
  box-shadow:var(--tk-focus)!important;
}
.btn:disabled,button:disabled,input:disabled,select:disabled,textarea:disabled{
  cursor:not-allowed!important;
  opacity:.62!important;
}

/* Notifikasi lebih mudah terlihat tanpa menutup konten */
.flash,.alert,.notice,.message{
  position:relative;
  border-radius:11px!important;
  box-shadow:0 8px 24px rgba(29,55,46,.08);
  overflow-wrap:anywhere;
}
.flash:empty,.alert:empty,.notice:empty,.message:empty{display:none!important}

/* Form: label dan bantuan tidak bertabrakan */
label{overflow-wrap:anywhere}
input,select,textarea{max-width:100%;box-sizing:border-box}
textarea{resize:vertical;min-height:92px}
fieldset{border:1px solid var(--tk-border);border-radius:12px;padding:14px}
legend{padding:0 7px;font-weight:800;color:#34463e}

/* Tabel data besar: header stabil, angka rapi, aksi tidak pecah */
.table-wrap{isolation:isolate}
.table-wrap table{width:100%;max-width:none}
.table-wrap th{position:sticky;top:0;z-index:2;background:#f7faf8!important}
.table-wrap td,.table-wrap th{overflow-wrap:break-word}
.table-wrap td:last-child,.table-wrap th:last-child{padding-right:12px!important}
.table-wrap .tk-table-actions{display:flex!important;flex-wrap:nowrap!important;white-space:nowrap}
.table-wrap .tk-table-actions>*{flex:0 0 auto}
.table-wrap[data-rows="0"]::after{content:"Belum ada data";display:none}

/* Scroll hint yang sangat ringan untuk tabel horizontal */
.tk-table-overflow{background-image:linear-gradient(to left,rgba(33,96,72,.08),transparent 20px);background-repeat:no-repeat;background-position:right top}
.tk-table-overflow.tk-has-scrolled{background-image:none}

/* Menu aktif dan hover tetap jelas, tetapi tidak ramai */
.nav a{transition:background-color .14s ease,color .14s ease,transform .14s ease}
.nav a:hover{transform:translateX(1px)}
.nav a.active{font-weight:850!important}

/* Kondisi klik untuk perangkat sentuh */
@media(hover:none){
  .nav a:hover,.btn:hover,button:hover{transform:none!important}
  .btn:active,button:active,.nav a:active{filter:brightness(.96)}
}

/* Laptop dengan tinggi terbatas */
@media(min-width:901px) and (max-height:760px){
  .top{min-height:58px!important}
  .content{padding-top:14px!important;padding-bottom:18px!important}
  .card{padding-top:13px!important;padding-bottom:13px!important}
  .nav a{min-height:36px!important}
  .nav summary{padding-top:10px!important;padding-bottom:7px!important}
}

/* HP dan tablet */
@media(max-width:900px){
  .content{width:100%!important;max-width:100%!important}
  .tk-page-toolbar{gap:9px!important}
  .tk-page-toolbar>.row,.tk-page-toolbar>.actions{width:100%;max-width:100%}
  .btn,button,input[type="submit"],input[type="button"]{min-height:var(--tk-touch)}
  .table-wrap{max-width:100vw;overscroll-behavior-x:contain}
  .table-wrap th{top:0}
  .table-wrap .tk-table-actions{gap:5px!important}
  .table-wrap .tk-table-actions .btn,.table-wrap .tk-table-actions button{min-height:36px!important;padding:7px 9px!important}
  .modal,.dialog,[role="dialog"]{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 18px)!important}
}

@media(max-width:520px){
  .tk-page-toolbar>.row,.tk-page-toolbar>.actions,.card>.row:first-child{
    align-items:stretch!important;
  }
  .tk-page-toolbar>.row .btn,.tk-page-toolbar>.row button,
  .tk-page-toolbar>.actions .btn,.tk-page-toolbar>.actions button{
    flex:1 1 auto;
  }
  .table-wrap{border-radius:9px!important}
  .table-wrap th,.table-wrap td{font-size:12.5px!important}
}

/* Cetak tetap bersih */
@media print{
  .flash,.alert,.notice,.message{box-shadow:none!important}
  .table-wrap th{position:static!important}
}
.table-wrap .tk-number-cell{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* =========================================================
   TAHAP 10 — ENTERPRISE EXPERIENCE
   Hanya lapisan UI/UX, tidak mengubah proses PHP atau database.
   ========================================================= */
:root{
  --tk-bottom-nav-h:68px;
  --tk-toast-z:9999;
}
.tk-live-meta{display:flex;align-items:center;gap:10px;min-width:0}
.tk-live-greeting{font-size:12px;color:var(--muted,#64748b);font-weight:700;white-space:nowrap}
.tk-live-clock{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.tk-quick-actions{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 10px;margin-bottom:8px}
.tk-quick-actions::-webkit-scrollbar{display:none}
.tk-quick-actions .btn{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:40px}
.tk-quick-actions .btn::before{content:'+';font-size:18px;line-height:1;font-weight:900}
.tk-toast-stack{position:fixed;top:18px;right:18px;z-index:var(--tk-toast-z);display:grid;gap:10px;width:min(390px,calc(100vw - 28px));pointer-events:none}
.tk-toast{pointer-events:auto;display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:start;gap:10px;padding:13px 12px;border:1px solid #d6dde7;border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.16);animation:tkToastIn .22s ease both}
.tk-toast.tk-toast-out{animation:tkToastOut .2s ease both}
.tk-toast-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:#eaf8ef;color:#137a3d}
.tk-toast.err .tk-toast-icon{background:#fff0f0;color:#b42318}
.tk-toast-message{font-size:14px;line-height:1.45;padding-top:4px;overflow-wrap:anywhere}
.tk-toast-close{border:0!important;padding:0!important;width:28px;height:28px;background:transparent!important;font-size:20px;line-height:1;color:#64748b}
body.tk-toast-ready .content>.flash{display:none!important}
@keyframes tkToastIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes tkToastOut{to{opacity:0;transform:translateY(-8px) scale(.98)}}
.tk-bottom-nav{display:none}
.tk-empty-state{padding:34px 18px!important;text-align:center!important;color:#64748b!important}
.tk-empty-state::before{content:'▢';display:block;font-size:30px;line-height:1;margin-bottom:9px;color:#94a3b8}
.tk-shortcut-hint{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#64748b;margin-left:7px;vertical-align:middle}
.tk-shortcut-hint kbd{border:1px solid #cbd5e1;border-bottom-width:2px;border-radius:5px;background:#fff;padding:2px 5px;font:700 10px/1 Arial,sans-serif;color:#334155}
.tk-page-dashboard .grid .metric{position:relative;isolation:isolate}
.tk-page-dashboard .grid .metric::after{content:'';position:absolute;right:14px;top:14px;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.tk-page-pos #search{font-size:17px;min-height:48px}
.tk-page-pos .product-item{transition:background .14s ease,transform .14s ease}
.tk-page-pos .product-item:active{transform:scale(.995)}

@media(max-width:900px){
  body{padding-bottom:calc(var(--tk-bottom-nav-h) + env(safe-area-inset-bottom,0px))}
  .tk-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--tk-bottom-nav-h) + env(safe-area-inset-bottom,0px));padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px));border-top:1px solid #d7dee8;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);box-shadow:0 -8px 30px rgba(15,23,42,.08)}
  .tk-bottom-nav a,.tk-bottom-nav button{border:0!important;background:transparent!important;color:#64748b!important;padding:4px 2px!important;border-radius:9px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:800;min-width:0}
  .tk-bottom-nav a.active{background:#edf8f0!important;color:#166534!important}
  .tk-bottom-nav .tk-nav-icon{font-size:19px;line-height:1}
  .tk-bottom-nav .tk-nav-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tk-toast-stack{top:10px;right:10px;width:calc(100vw - 20px)}
  .tk-live-greeting{display:none}
  .tk-live-clock{font-size:13px}
  .top{padding-right:12px!important}
  .tk-quick-actions{margin-left:-2px;margin-right:-2px}
  .tk-quick-actions .btn{min-height:42px}
}
@media(max-width:430px){
  .tk-bottom-nav .tk-nav-label{font-size:9px}
  .tk-toast{grid-template-columns:30px minmax(0,1fr) 26px;padding:11px 10px}
}
@media print{.tk-bottom-nav,.tk-toast-stack,.tk-live-meta,.tk-quick-actions{display:none!important}}

/* Tahap 11 — Mode Kasir Cepat Keyboard */
.tk-pos-shortcuts{padding:12px 16px!important}
.tk-pos-shortcut-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.tk-shortcut-grid,.tk-payment-shortcuts{display:flex;gap:7px 12px;flex-wrap:wrap;align-items:center}
.tk-shortcut-grid span,.tk-payment-shortcuts span{font-size:12px;white-space:nowrap}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:23px;padding:0 6px;border:1px solid rgba(15,23,42,.25);border-bottom-width:2px;border-radius:5px;background:#fff;font:700 11px/1 system-ui,sans-serif;box-shadow:0 1px 0 rgba(15,23,42,.08)}
.tk-payment-shortcuts{padding:8px 10px;margin:-4px 0 12px;border:1px solid rgba(15,23,42,.12);border-radius:8px;background:rgba(15,23,42,.035)}
#cartRows tr[data-cart-index]{cursor:pointer;transition:background .12s ease,outline .12s ease}
#cartRows tr.tk-cart-active{background:rgba(22,163,74,.10);outline:2px solid rgba(22,163,74,.48);outline-offset:-2px}
#cartRows tr.tk-cart-active td:first-child{font-weight:800}
@media(max-width:700px){.tk-pos-shortcuts{display:none}.tk-payment-shortcuts{overflow-x:auto;flex-wrap:nowrap;padding-bottom:10px}.tk-payment-shortcuts span{flex:0 0 auto}}


/* Tahap 12 — Enterprise navigation and personal appearance */
.tk-command-trigger,.tk-theme-toggle{border:1px solid var(--line,#d8e2dd);background:var(--card,#fff);color:var(--text,#17201c);border-radius:10px;min-height:38px}
.tk-command-trigger{display:flex;align-items:center;gap:12px;padding:7px 10px;margin-left:auto}
.tk-command-trigger kbd{font-size:11px;opacity:.7}.tk-theme-toggle{width:40px;font-size:18px;margin-left:6px}
.tk-command-palette{position:fixed;inset:0;z-index:9999;display:none}.tk-command-palette.open{display:block}
.tk-command-backdrop{position:absolute;inset:0;background:rgba(8,18,13,.56);backdrop-filter:blur(3px)}
.tk-command-box{position:relative;width:min(650px,calc(100% - 24px));max-height:min(620px,calc(100vh - 48px));margin:8vh auto 0;background:var(--card,#fff);color:var(--text,#17201c);border:1px solid var(--line,#d8e2dd);border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.28);overflow:hidden}
.tk-command-head,.tk-command-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}.tk-command-head{border-bottom:1px solid var(--line,#e3e9e6)}.tk-command-foot{border-top:1px solid var(--line,#e3e9e6);font-size:12px;opacity:.7;gap:14px;justify-content:flex-start}
.tk-command-input{width:calc(100% - 24px)!important;margin:12px!important;font-size:17px!important;padding:13px 14px!important}
.tk-command-results{max-height:390px;overflow:auto;padding:0 8px 10px}.tk-command-item{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:10px;color:inherit;text-decoration:none}.tk-command-item span:first-child{display:flex;flex-direction:column;gap:2px}.tk-command-item small{opacity:.58}.tk-command-item.active,.tk-command-item:hover{background:var(--soft,#eef7f2)}.tk-command-empty{padding:28px;text-align:center;opacity:.65}
.tk-recent-menu{margin-bottom:14px}.tk-recent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.tk-recent-head button{min-height:30px;padding:4px 9px}.tk-recent-links{display:flex;gap:8px;flex-wrap:wrap}.tk-recent-links a{padding:8px 11px;border:1px solid var(--line,#d8e2dd);border-radius:10px;text-decoration:none;color:inherit;background:var(--card,#fff)}
.tk-fab-wrap{display:none}

html[data-tk-theme="dark"]{color-scheme:dark;--bg:#0e1512;--card:#17201c;--soft:#203029;--line:#31443a;--text:#edf6f1;--muted:#9fb2a8}
html[data-tk-theme="dark"] body,html[data-tk-theme="dark"] .main,html[data-tk-theme="dark"] .content{background:#0e1512;color:#edf6f1}
html[data-tk-theme="dark"] .card,html[data-tk-theme="dark"] .top,html[data-tk-theme="dark"] .modal-box,html[data-tk-theme="dark"] input,html[data-tk-theme="dark"] select,html[data-tk-theme="dark"] textarea,html[data-tk-theme="dark"] button{background:#17201c;color:#edf6f1;border-color:#31443a}
html[data-tk-theme="dark"] table th{background:#203029;color:#edf6f1}html[data-tk-theme="dark"] table td{border-color:#31443a}
html[data-tk-theme="dark"] .muted{color:#9fb2a8!important}html[data-tk-theme="dark"] a{color:inherit}
html[data-tk-theme="dark"] .tk-bottom-nav{background:#17201c;border-color:#31443a}

@media(max-width:900px){
  .tk-command-trigger{margin-left:auto;padding:7px 9px}.tk-command-trigger span{display:none}.tk-command-trigger kbd{font-size:10px}.tk-theme-toggle{margin-left:2px}
  .tk-command-box{margin-top:3vh;max-height:90vh}.tk-command-results{max-height:60vh}
  .tk-fab-wrap{display:block;position:fixed;right:16px;bottom:82px;z-index:1010}.tk-fab{width:54px;height:54px;border-radius:50%!important;font-size:30px!important;line-height:1!important;background:var(--primary,#178449)!important;color:#fff!important;box-shadow:0 10px 28px rgba(0,0,0,.25);border:0!important}.tk-fab-wrap.open .tk-fab{transform:rotate(45deg)}
  .tk-fab-menu{position:absolute;right:0;bottom:64px;display:flex;flex-direction:column;gap:7px;min-width:155px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.18s}.tk-fab-wrap.open .tk-fab-menu{opacity:1;pointer-events:auto;transform:none}.tk-fab-menu a{background:var(--card,#fff);color:var(--text,#17201c);border:1px solid var(--line,#d8e2dd);border-radius:11px;padding:10px 13px;text-decoration:none;box-shadow:0 7px 20px rgba(0,0,0,.12);text-align:right}
}
@media(max-width:520px){.tk-live-meta{display:none!important}.tk-command-trigger kbd{display:none}.tk-command-trigger:before{content:'⌕';font-size:20px}}
@media print{.tk-command-trigger,.tk-theme-toggle,.tk-command-palette,.tk-fab-wrap,.tk-recent-menu{display:none!important}}

/* Tahap 13 — Dashboard mobile yang rapi, ringan, dan tidak terpotong */
.tk-top-title{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.tk-top-title>strong{display:block;max-width:100%;font-size:20px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-top-subtitle{display:none;font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-top-actions{margin-left:auto;flex-wrap:nowrap!important;min-width:0}
.tk-user-label{white-space:nowrap}
.tk-logout-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;font-weight:800}

.tk-dashboard-metrics{align-items:stretch}
.tk-metric-card{position:relative;min-height:190px;padding:26px 22px 20px!important;border-left:4px solid #15935a!important;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden!important}
.tk-metric-card::after{right:22px!important;top:22px!important;width:10px!important;height:10px!important;box-shadow:0 0 0 6px rgba(34,197,94,.12)!important}
.tk-metric-icon{position:absolute;left:22px;top:22px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:800;color:#15935a;background:#e9f8ef}
.tk-metric-trx .tk-metric-icon{color:#1681d4;background:#e9f4ff}
.tk-metric-stock .tk-metric-icon{color:#d79400;background:#fff5d9}
.tk-metric-cash .tk-metric-icon{color:#128b52;background:#e9f8ef}
.tk-metric-label{font-size:18px;line-height:1.3}
.tk-metric-card strong{font-size:29px!important;line-height:1.15;margin:9px 0 0!important;color:#087044}
.tk-metric-card small{display:block;margin-top:10px;color:#64748b;font-size:13px}

.tk-alert-panel{padding:18px 22px!important}
.tk-alert-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.tk-alert-head h3{margin:0;display:flex;align-items:center;gap:10px;font-size:19px}
.tk-alert-head a{font-weight:800;color:#087a43;white-space:nowrap}
.tk-alert-list{display:grid}
.tk-alert-row{display:grid;grid-template-columns:48px minmax(0,1fr) 20px;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid #e5e9ed;color:inherit}
.tk-alert-row:last-child{border-bottom:0}
.tk-alert-row>span:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0}
.tk-alert-row strong{font-size:15px}
.tk-alert-row small{font-size:13px;color:#64748b;line-height:1.35}
.tk-alert-row>b{font-size:30px;color:#64748b;font-weight:400}
.tk-alert-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:900}
.tk-alert-icon.warn{background:#fff5d9;color:#dc9500}.tk-alert-icon.danger{background:#ffe9eb;color:#e2354c}.tk-alert-icon.info{background:#e8f3ff;color:#167bd1}

@media(max-width:900px){
  .top{min-height:82px!important;height:auto!important;padding:10px 14px 10px 88px!important;gap:10px!important;overflow:visible!important}
  .tk-top-title{flex:1;max-width:none;overflow:hidden}
  .tk-top-title>strong{font-size:20px}
  .tk-top-subtitle{display:block}
  .tk-user-label{display:none}
  .tk-top-actions{flex:0 0 auto}
  .tk-logout-btn{min-height:48px!important;padding:9px 13px!important;border-radius:12px!important;font-size:14px}
  .tk-command-trigger,.tk-theme-toggle{display:none!important}
  .tk-quick-actions{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(124px,1fr);gap:9px!important;margin:0 -2px 18px!important;padding:2px 2px 8px!important;overflow-x:auto!important;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
  .tk-quick-actions .btn{width:100%;min-width:0;min-height:72px!important;padding:10px!important;justify-content:center!important;text-align:center;overflow:hidden;text-overflow:ellipsis;scroll-snap-align:start;border-radius:13px!important}
  .tk-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .tk-metric-card{min-height:200px;padding:78px 18px 18px!important}
  .tk-metric-icon{left:18px;top:18px}
  .tk-metric-card::after{right:18px!important;top:20px!important}
  .tk-alert-panel{padding:16px!important}
}
@media(max-width:560px){
  .top{padding-left:84px!important;padding-right:10px!important;min-height:80px!important}
  .tk-top-title>strong{font-size:19px}
  .tk-top-subtitle{font-size:11px}
  .tk-logout-btn{font-size:13px;padding:8px 11px!important}
  .content{padding-left:12px!important;padding-right:12px!important}
  .tk-dashboard-metrics{grid-template-columns:1fr!important;gap:10px!important}
  .tk-metric-card{min-height:168px;padding:70px 16px 16px!important}
  .tk-metric-icon{width:46px;height:46px;left:16px;top:16px;font-size:23px}
  .tk-metric-label{font-size:17px}
  .tk-metric-card strong{font-size:27px!important}
  .tk-alert-row{grid-template-columns:42px minmax(0,1fr) 16px;gap:10px;padding:13px 0}
  .tk-alert-icon{width:40px;height:40px;font-size:19px}
}
@media(max-width:380px){
  .top{padding-left:76px!important}
  .tk-top-title>strong{font-size:17px}
  .tk-top-subtitle{display:none}
  .tk-logout-btn span{display:none}
  .tk-logout-btn{padding:8px 9px!important}
}
html[data-tk-theme="dark"] .tk-metric-card small,html[data-tk-theme="dark"] .tk-alert-row small{color:#9fb2a8}
html[data-tk-theme="dark"] .tk-alert-row{border-color:#31443a}
@media print{.tk-alert-panel{break-inside:avoid}.tk-metric-card{min-height:0}}

/* Tahap 14: navigasi user kasir hanya memuat menu operasional yang tersedia. */
@media(max-width:700px){.tk-bottom-nav.tk-bottom-nav-cashier{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* Tahap 15 — tampilan operasional kasir dan konsistensi mobile */
body[data-user-role="cashier"] .brand{margin-bottom:6px!important}
body[data-user-role="cashier"] .side>.muted{display:block;margin-bottom:18px;color:rgba(255,255,255,.72)!important}
body[data-user-role="cashier"] .nav details{margin-top:4px}
body[data-user-role="cashier"] .nav summary{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
body[data-user-role="cashier"] .nav a{min-height:44px;display:flex;align-items:center}

body.tk-page-pos .content{max-width:none!important}
body.tk-page-pos .pos{align-items:start}
body.tk-page-pos .pos>.card{margin-bottom:0!important}
body.tk-page-pos .product-list{border-radius:12px!important;background:var(--tk-surface,#fff)}
body.tk-page-pos .product-item{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px!important}
body.tk-page-pos .product-item:hover,body.tk-page-pos .product-item.active{background:#edf8f1!important;box-shadow:inset 3px 0 0 #138a4f}
body.tk-page-pos .total{padding:14px 16px;border:1px solid #cfe2d7;border-radius:13px;background:linear-gradient(180deg,#f6fcf8,#edf8f1);color:#087044;font-size:clamp(28px,4vw,40px)!important}
body.tk-page-pos .qtybox{justify-content:flex-end}
body.tk-page-pos .qtybox button{width:36px;height:36px;padding:0!important;border-radius:9px!important;font-size:18px;font-weight:900}
body.tk-page-pos .qtybox input{height:36px!important;border-radius:9px!important}
body.tk-page-pos .shift-summary>div{background:#f8fbf9;border-color:#dce8e1!important}
body.tk-page-pos .shift-summary span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
body.tk-page-pos .shift-summary strong{font-size:15px!important;color:#173c2d}

@media(max-width:900px){
  body[data-user-role="cashier"] .top{padding-left:84px!important}
  body[data-user-role="cashier"] .tk-top-subtitle{display:block}
  body.tk-page-pos .content{padding:10px!important;padding-bottom:calc(var(--tk-bottom-nav-h,68px) + 16px)!important}
  body.tk-page-pos .pos{grid-template-columns:1fr!important;gap:10px!important}
  body.tk-page-pos .card{border-radius:14px!important;padding:13px!important}
  body.tk-page-pos .product-list{max-height:36vh!important}
  body.tk-page-pos .total{position:sticky;bottom:calc(var(--tk-bottom-nav-h,68px) + 8px);z-index:8;margin-top:8px;box-shadow:0 -8px 24px rgba(17,76,48,.12)}
  body.tk-page-pos .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.tk-page-pos .tk-pos-shortcut-title{margin-bottom:5px}
}
@media(max-width:560px){
  body.tk-page-pos .form-grid{grid-template-columns:1fr!important}
  body.tk-page-pos .product-item{min-height:58px;padding:12px!important}
  body.tk-page-pos .qtybox button{width:40px;height:40px}
  body.tk-page-pos .qtybox input{width:58px!important;height:40px!important}
  body.tk-page-pos .shift-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-user-role="cashier"] .tk-fab-wrap{display:none!important}
}
html[data-tk-theme="dark"] body.tk-page-pos .product-item:hover,
html[data-tk-theme="dark"] body.tk-page-pos .product-item.active{background:#20382c!important}
html[data-tk-theme="dark"] body.tk-page-pos .total{background:#1c3026;border-color:#355d48;color:#69d99a}
html[data-tk-theme="dark"] body.tk-page-pos .shift-summary>div{background:#1b2922;border-color:#31443a!important}
html[data-tk-theme="dark"] body.tk-page-pos .shift-summary strong{color:#dcebe3}


/* El-Beauty Pink Theme — branding only, no functional changes */
:root{--eb-pink:#d92d78;--eb-pink-dark:#a81357;--eb-pink-soft:#fff0f6;--eb-pink-pale:#fff8fb;--eb-border:#f2bdd4;--eb-text:#3b1728}
body{background:var(--eb-pink-pale);color:var(--eb-text)}
.side{background:linear-gradient(180deg,#fff 0%,#fff3f8 100%);border-right-color:var(--eb-border)}
.brand{color:var(--eb-pink-dark)}
.nav a:hover,.nav a.active{border-color:var(--eb-pink);background:var(--eb-pink-soft);color:var(--eb-pink-dark)}
.top{background:#fff;border-bottom-color:var(--eb-border)}
.card{border-color:var(--eb-border);box-shadow:0 8px 24px rgba(174,28,92,.06)}
.btn.primary,button.primary{background:linear-gradient(135deg,var(--eb-pink),var(--eb-pink-dark));border-color:var(--eb-pink-dark);color:#fff}
.btn.primary:hover,button.primary:hover{filter:brightness(.96)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--eb-pink);box-shadow:0 0 0 3px rgba(217,45,120,.12)}
.product-item:hover,.product-item.active{background:var(--eb-pink-soft)}
.flash{border-color:var(--eb-pink);background:var(--eb-pink-soft)}
.eb-login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top right,#ffd2e5 0,transparent 34%),linear-gradient(145deg,#fff8fb,#ffeaf3)}
.eb-login-card{width:min(430px,100%);margin:0;text-align:center;padding:30px 28px;border:1px solid var(--eb-border);box-shadow:0 24px 70px rgba(168,19,87,.16)}
.eb-login-card h1{margin:10px 0 4px;font-size:34px;color:var(--eb-pink-dark);letter-spacing:-.7px}
.eb-login-subtitle{margin:0 0 24px;color:#865069;font-weight:600}
.eb-login-mark{width:72px;height:72px;border-radius:24px;display:grid;place-items:center;margin:0 auto;background:linear-gradient(135deg,#f45698,#a81357);color:#fff;font-size:25px;font-weight:900;box-shadow:0 12px 30px rgba(217,45,120,.28)}
.eb-login-card form{text-align:left}
.eb-login-footer{margin-top:24px;padding-top:16px;border-top:1px solid #f5d5e3;color:#9a6b80;font-size:11px;text-align:center}
@media(max-width:600px){.eb-login-shell{padding:16px}.eb-login-card{padding:24px 20px}.eb-login-card h1{font-size:30px}}

/* =========================================================
   EL-BEAUTY TOTAL PINK THEME — FINAL OVERRIDE
   Visual-only override. No menu, role, query, or function changes.
   ========================================================= */
:root{
  --tk-bg:#fff6fa!important;
  --tk-surface:#ffffff!important;
  --tk-soft:#fff0f6!important;
  --tk-text:#3f1830!important;
  --tk-muted:#8b6176!important;
  --tk-line:#f2c8da!important;
  --tk-brand:#e62e7b!important;
  --tk-brand-dark:#ad1457!important;
  --tk-brand-soft:#ffe8f2!important;
  --tk-danger:#c6285b!important;
  --tk-success:#d81b60!important;
  --tk-warning:#d96b8f!important;
  --tk-focus:rgba(230,46,123,.18)!important;
  --tk-surface-2:#fff8fb!important;
  --tk-panel-head:#ffeaf3!important;
  --tk-panel-line:#f2c8da!important;
  --tk-info:#c2185b!important;
  --tk-accent:#e62e7b!important;
  --tk-accent-hover:#c2185b!important;
  --tk-border:#f2c8da!important;
  --tk-border-strong:#eaaac5!important;
  --tk-surface-soft:#fff4f8!important;
  --eb-pink:#e62e7b;--eb-pink-dark:#ad1457;--eb-pink-soft:#ffe8f2;
  --eb-pink-pale:#fff6fa;--eb-border:#f2c8da;--eb-text:#3f1830;
}
html,body{background:#fff6fa!important;color:#3f1830!important}
body{background-image:radial-gradient(circle at 100% 0,rgba(255,194,220,.32),transparent 32%)!important}
h1,h2,h3,h4,h5,h6,.health,.total{color:#7b1747!important}
.muted,small{color:#8b6176!important}
a{color:#b5165a}

.side{
  background:linear-gradient(180deg,#9f124d 0%,#c2185b 42%,#e62e7b 100%)!important;
  color:#fff!important;border-right:0!important;box-shadow:6px 0 24px rgba(154,18,75,.22)!important;
}
.side .brand,.side>.brand{color:#fff!important;text-shadow:0 1px 2px rgba(87,0,38,.18)}
.side>.muted,.side .muted,body[data-user-role="cashier"] .side>.muted{color:#ffe3ef!important}
.nav details{border-top-color:rgba(255,255,255,.18)!important}
.nav summary,.nav details[open]>summary{color:#ffe8f2!important}
.nav a{color:#fff4f8!important;border-color:transparent!important}
.nav a:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
.nav a.active{background:linear-gradient(135deg,#ff74ad,#ef3d86)!important;color:#fff!important;box-shadow:0 8px 20px rgba(93,0,40,.25)!important}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)!important}

.top{background:rgba(255,255,255,.97)!important;border-bottom:1px solid #f2c8da!important;box-shadow:0 4px 16px rgba(177,25,91,.08)!important}
.tk-top-title>strong{color:#8f1249!important}.tk-top-subtitle{color:#a76684!important}
.content{background:transparent!important}
.card,.modal-box,.product-list,.table-wrap,.finance-entry-card{
  background:#fff!important;border-color:#f2c8da!important;box-shadow:0 9px 26px rgba(174,28,92,.07)!important;
}
.card:hover{box-shadow:0 12px 30px rgba(174,28,92,.1)!important}
.card code{background:#fff0f6!important;color:#8f1249!important}

.btn,button{background:#fff!important;color:#7b1747!important;border-color:#e9b4ca!important}
.btn:hover,button:hover{border-color:#e62e7b!important;background:#fff4f8!important;box-shadow:0 5px 14px rgba(230,46,123,.15)!important}
.btn.primary,button.primary,.btn-success{
  background:linear-gradient(135deg,#f34b91,#c2185b)!important;border-color:#c2185b!important;color:#fff!important;
  box-shadow:0 7px 18px rgba(194,24,91,.2)!important;
}
.btn.primary:hover,button.primary:hover,.btn-success:hover{background:linear-gradient(135deg,#e62e7b,#ad1457)!important;color:#fff!important}
.btn.danger,button.danger,.btn-danger{background:#fff0f5!important;color:#b31252!important;border-color:#efadc8!important}
.btn.danger:hover,button.danger:hover,.btn-danger:hover{background:#ffe3ed!important}

input,select,textarea{background:#fff!important;color:#3f1830!important;border-color:#e8b8cc!important}
input:hover,select:hover,textarea:hover{border-color:#df7fa9!important}
input:focus,select:focus,textarea:focus{border-color:#e62e7b!important;box-shadow:0 0 0 3px rgba(230,46,123,.14)!important}
input:disabled,select:disabled,textarea:disabled{background:#fff0f5!important;color:#9e7588!important}
label{color:#653048!important}

.table-wrap th,table th{background:linear-gradient(180deg,#fff4f8,#ffe8f2)!important;color:#7b1747!important;border-bottom-color:#e8b8cc!important}
.table-wrap td,table td{border-bottom-color:#f5dbe6!important}
.table-wrap tbody tr:nth-child(even) td{background:#fffafd!important}
.table-wrap tbody tr:hover td,table tr:hover td{background:#fff0f6!important}
.table-wrap:after{background:#ffe8f2!important;color:#9b2459!important}
.table-wrap:focus-visible{outline-color:rgba(230,46,123,.38)!important}

.flash{background:#ffe8f2!important;color:#7b1747!important;border-left-color:#e62e7b!important}
.flash.err{background:#fff0f4!important;color:#9e174d!important;border-left-color:#c6285b!important}
.product-item{border-color:#f3d7e3!important}
.product-item:hover,.product-item.active,body.tk-page-pos .product-item:hover,body.tk-page-pos .product-item.active{
  background:#ffe8f2!important;box-shadow:inset 4px 0 0 #e62e7b!important;color:#6f123f!important;
}

.total,body.tk-page-pos .total{
  color:#a81357!important;border-color:#efaec9!important;
  background:linear-gradient(180deg,#fff8fb,#ffe8f2)!important;
  box-shadow:0 -6px 20px rgba(194,24,91,.1)!important;
}
body.tk-page-pos .shift-summary>div,.shift-summary>div,.deposit-box{
  background:#fff7fa!important;border-color:#f0c5d7!important;
}
body.tk-page-pos .shift-summary span{color:#9a617b!important}
body.tk-page-pos .shift-summary strong{color:#6d2747!important}
.finance-entry-card .account-help{background:#fff6fa!important;border-color:#f2c8da!important;color:#80516a!important}

.tk-metric-card{background:linear-gradient(155deg,#fff 0%,#fff5f9 100%)!important;border-color:#efbfd3!important}
.tk-metric-card::after{color:#e62e7b!important}
.tk-metric-icon,.tk-metric-sales .tk-metric-icon,.tk-metric-trx .tk-metric-icon,.tk-metric-stock .tk-metric-icon,.tk-metric-cash .tk-metric-icon{
  color:#c2185b!important;background:#ffe5f0!important;
}
.tk-metric-card strong{color:#a81357!important}
.tk-metric-card small{color:#91647a!important}
.tk-alert-head a{color:#c2185b!important}
.tk-alert-row{border-bottom-color:#f2d4e1!important}
.tk-alert-row small,.tk-alert-row>b{color:#91647a!important}
.tk-alert-icon.warn,.tk-alert-icon.danger,.tk-alert-icon.info{background:#ffe5f0!important;color:#c2185b!important}

.tk-bottom-nav,.tk-fab-wrap .btn,.tk-command-panel{border-color:#efbfd3!important}
.tk-bottom-nav{background:rgba(255,255,255,.98)!important;box-shadow:0 -8px 24px rgba(174,28,92,.12)!important}
.tk-bottom-nav a{color:#8c5c74!important}
.tk-bottom-nav a.active,.tk-bottom-nav a:hover{color:#c2185b!important;background:#fff0f6!important}
.tk-fab,.tk-fab-wrap .primary{background:linear-gradient(135deg,#f34b91,#c2185b)!important;color:#fff!important}

.modal{background:rgba(91,8,45,.5)!important}
.modal-box{border-top:4px solid #e62e7b!important}
*{scrollbar-color:#e5a4c0 transparent}
*::-webkit-scrollbar-thumb{background:#e5a4c0!important;border-radius:10px}

.login-wrap,.eb-login-shell{
  background:radial-gradient(circle at 14% 12%,#ffd5e7 0,transparent 33%),radial-gradient(circle at 90% 85%,#ffc3dd 0,transparent 34%),linear-gradient(145deg,#fff8fb,#ffe5f0)!important;
}
.login-card,.eb-login-card{border-color:#efb6ce!important;box-shadow:0 26px 75px rgba(168,19,87,.2)!important}
.eb-login-mark{background:linear-gradient(135deg,#ff6ca9,#c2185b)!important;box-shadow:0 14px 32px rgba(194,24,91,.28)!important}
.eb-login-card h1{color:#9f124d!important}.eb-login-subtitle{color:#8d5771!important}.eb-login-footer{border-top-color:#f2c8da!important;color:#9a6b80!important}

/* Pink dark mode, preserving accessibility while removing green/blue palette. */
html[data-tk-theme="dark"]{
  --tk-bg:#2b0b1b!important;--tk-surface:#401126!important;--tk-soft:#551632!important;
  --tk-text:#fff2f8!important;--tk-muted:#e7b7cc!important;--tk-line:#74304e!important;
  --tk-brand:#ff5a9d!important;--tk-brand-dark:#d81b60!important;--tk-brand-soft:#57152f!important;
}
html[data-tk-theme="dark"] body{background:#2b0b1b!important;color:#fff2f8!important;background-image:none!important}
html[data-tk-theme="dark"] .top,html[data-tk-theme="dark"] .card,html[data-tk-theme="dark"] .modal-box,
html[data-tk-theme="dark"] .product-list,html[data-tk-theme="dark"] .table-wrap{background:#401126!important;border-color:#74304e!important;color:#fff2f8!important}
html[data-tk-theme="dark"] h1,html[data-tk-theme="dark"] h2,html[data-tk-theme="dark"] h3,html[data-tk-theme="dark"] strong{color:#ffe1ee!important}
html[data-tk-theme="dark"] input,html[data-tk-theme="dark"] select,html[data-tk-theme="dark"] textarea{background:#321020!important;color:#fff2f8!important;border-color:#7b3553!important}
html[data-tk-theme="dark"] .table-wrap th{background:#57152f!important;color:#ffd9e9!important}
html[data-tk-theme="dark"] .table-wrap td{background:#401126!important;border-color:#61243f!important}
html[data-tk-theme="dark"] .table-wrap tbody tr:hover td{background:#551632!important}
html[data-tk-theme="dark"] body.tk-page-pos .product-item:hover,
html[data-tk-theme="dark"] body.tk-page-pos .product-item.active{background:#64183a!important;box-shadow:inset 4px 0 0 #ff5a9d!important}
html[data-tk-theme="dark"] body.tk-page-pos .total{background:#57152f!important;border-color:#8f3a60!important;color:#ffb7d4!important}
html[data-tk-theme="dark"] body.tk-page-pos .shift-summary>div{background:#481329!important;border-color:#74304e!important}
html[data-tk-theme="dark"] body.tk-page-pos .shift-summary strong{color:#ffe1ee!important}
html[data-tk-theme="dark"] .tk-metric-card{background:#401126!important;border-color:#74304e!important}
html[data-tk-theme="dark"] .tk-metric-card small,html[data-tk-theme="dark"] .tk-alert-row small{color:#ddb0c5!important}
html[data-tk-theme="dark"] .tk-alert-row{border-color:#682743!important}

@media(max-width:900px){
  body.tk-menu-open:after{background:rgba(84,5,39,.5)!important}
  .side{box-shadow:14px 0 40px rgba(99,5,46,.3)!important}
}
@media print{
  body{background:#fff!important;background-image:none!important;color:#000!important}
  .card,.table-wrap{box-shadow:none!important}
}


/* El-Beauty sidebar identity refinement */
.eb-sidebar-brand{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
  margin:4px 0 22px!important;
  padding:0 10px!important;
  line-height:1.05!important;
  white-space:normal!important;
}
.eb-sidebar-brand span{
  display:block!important;
  font-size:27px!important;
  font-weight:850!important;
  letter-spacing:-.7px!important;
  color:#fff!important;
  text-shadow:0 1px 1px rgba(67,0,29,.18)!important;
}
.eb-sidebar-brand small{
  display:block!important;
  margin-top:4px!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:650!important;
  letter-spacing:.15px!important;
  color:rgba(255,255,255,.86)!important;
}
@media(max-width:900px){
  .eb-sidebar-brand{margin-bottom:14px!important;padding-left:6px!important}
  .eb-sidebar-brand span{font-size:24px!important}
}