:root{
  --side:285px;--brand:#176f57;--brand2:#0f513f;--bg:#f4f7f6;--card:#fff;
  --text:#18241f;--muted:#68766f;--line:#dce6e1;--danger:#b42318;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}
body{font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg)!important;color:var(--text)!important}
a{text-decoration:none;color:inherit}.layout{display:grid!important;grid-template-columns:var(--side) minmax(0,1fr)!important;min-height:100vh!important;width:100%!important}
.side{position:sticky!important;top:0!important;height:100vh!important;overflow-y:auto!important;overflow-x:hidden!important;background:#102b23!important;color:#edf7f3!important;padding:20px 16px!important;border:0!important;display:flex!important;flex-direction:column!important;z-index:30}
.brand{font-size:27px!important;line-height:1.05;font-weight:900!important;margin:4px 6px 2px!important}.side>.muted,.tk-store-name{color:#c9ddd5!important;margin:0 6px 12px!important;font-size:12px!important}
.tk-logout-btn{width:100%;min-height:42px;border-radius:10px!important;border:1px solid #efb3ad!important;background:#fff5f4!important;color:var(--danger)!important;font-weight:800!important;cursor:pointer}.tk-logout-btn:hover{background:#ffe9e7!important}
.nav{display:flex!important;flex-direction:column!important;gap:2px!important;min-height:0}.nav details{border-top:1px solid rgba(255,255,255,.12)!important;margin:7px 0!important;padding-top:7px!important}.nav summary{padding:9px 10px!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.35px!important;color:#cbdcd5!important;cursor:pointer!important;list-style:none!important;font-weight:800!important}.nav summary::-webkit-details-marker{display:none}.nav a{display:block!important;padding:10px 12px!important;margin:2px 0!important;border-radius:10px!important;color:#f1f8f5!important;font-weight:700!important;font-size:14px!important;border:0!important}.nav a:hover,.nav a.active{background:#1f866a!important;color:#fff!important}

.main{display:flex!important;flex-direction:column!important;min-width:0!important;width:100%!important;max-width:100%!important;min-height:100vh!important;overflow:visible!important;background:var(--bg)!important;visibility:visible!important;opacity:1!important}
.top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:68px!important;height:auto!important;padding:12px 22px!important;background:#fff!important;border-bottom:1px solid var(--line)!important;position:sticky!important;top:0!important;z-index:20!important;visibility:visible!important;opacity:1!important}.tk-top-title{display:flex!important;flex-direction:column!important;min-width:0}.tk-top-title strong{font-size:20px!important}.tk-top-subtitle{font-size:12px!important;color:var(--muted)!important;margin-top:3px!important}.tk-top-actions{display:flex!important;align-items:center!important;gap:10px!important}.tk-user-label{font-size:13px!important;color:var(--muted)!important}.tk-top-logout-form{margin:0!important}.tk-top-logout-form .tk-logout-btn{width:auto!important;padding:8px 13px!important;min-height:38px!important}
.content{display:block!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:1!important;width:100%!important;max-width:1600px!important;min-height:calc(100vh - 68px)!important;margin:0 auto!important;padding:22px!important;overflow:visible!important;color:var(--text)!important}
.card{display:block!important;visibility:visible!important;opacity:1!important;background:var(--card)!important;border:1px solid var(--line)!important;border-radius:14px!important;padding:17px!important;margin:0 0 16px!important;box-shadow:0 6px 22px rgba(18,43,34,.06)!important;overflow:hidden!important}.grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:13px!important;margin-bottom:16px!important}.metric{min-height:105px!important}.metric strong{display:block!important;font-size:24px!important;margin-top:8px!important;color:var(--brand2)!important}.row{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}.form-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:11px!important}.pos{display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(340px,.6fr)!important;gap:14px!important}
.btn,button{max-width:100%;min-height:39px;border:1px solid #b8c7c0!important;background:#fff!important;color:#21322b!important;border-radius:9px!important;padding:8px 13px!important;font-weight:700!important;cursor:pointer}.btn.primary,button.primary{background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}.btn.danger,button.danger{color:var(--danger)!important;border-color:#e8aaa5!important}input,select,textarea{width:100%!important;max-width:100%!important;border:1px solid #b9c7c1!important;border-radius:8px!important;padding:9px!important;background:#fff!important;color:#17231f!important}label{display:block!important;font-size:13px!important;font-weight:700!important;margin:8px 0 5px!important}.muted{color:var(--muted)!important;font-size:13px!important}.flash{padding:12px!important;border:1px solid var(--line)!important;background:#fff!important;border-radius:10px!important;margin-bottom:14px!important}.flash.err{border-color:#e5aaa5!important;color:var(--danger)!important}
.table-wrap{display:block!important;width:100%!important;max-width:100%!important;overflow:auto!important;border:1px solid var(--line)!important;border-radius:10px!important;background:#fff!important}.table-wrap table{width:100%!important;min-width:760px!important;border-collapse:collapse!important;background:#fff!important}th,td{padding:10px 11px!important;border-bottom:1px solid #e8efeb!important;text-align:left!important;vertical-align:top!important}th{background:#eef5f2!important;font-size:12px!important;position:sticky!important;top:0!important;z-index:2!important}.product-list{max-height:430px!important;overflow:auto!important;border:1px solid var(--line)!important;border-radius:10px!important;background:#fff!important}.product-item{padding:11px!important;border-bottom:1px solid #e8efeb!important;cursor:pointer!important}.product-item:hover,.product-item.active{background:#e9f5f0!important}.total{font-size:30px!important;font-weight:900!important;color:var(--brand2)!important}.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);align-items:center;justify-content:center;padding:18px;z-index:100}.modal.open{display:flex!important}.modal-box{background:#fff!important;border-radius:14px!important;padding:18px!important;width:min(540px,100%)!important;max-height:calc(100vh - 36px)!important;overflow:auto!important}.tk-mobile-menu{display:none!important}
@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}.pos{grid-template-columns:1fr!important}}
@media(max-width:900px){.layout{display:block!important}.side{position:fixed!important;inset:0 auto 0 0!important;width:min(84vw,300px)!important;height:100dvh!important;transform:translateX(-105%);transition:transform .2s ease;box-shadow:14px 0 40px rgba(0,0,0,.25)}body.tk-menu-open .side{transform:translateX(0)}.main{width:100%!important}.tk-mobile-menu{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;padding:0!important;font-size:22px!important;flex:0 0 44px}.top{padding:9px 12px!important;min-height:62px!important}.content{padding:13px!important}.tk-user-label{display:none!important}.form-grid,.grid{grid-template-columns:1fr!important}.top .tk-top-logout-form{display:block!important}}
@media(max-width:480px){.content{padding:9px!important}.card{padding:12px!important}.top{gap:7px!important}.tk-top-title strong{font-size:16px!important}.tk-top-subtitle{display:none!important}.tk-top-logout-form .tk-logout-btn span{display:none!important}.table-wrap table{min-width:680px!important}}
@media print{.side,.top,.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}.table-wrap{overflow:visible!important}.table-wrap table{min-width:0!important}}

/* Struktur menu utama v24: enam kelompok besar, tanpa duplikasi laporan. */
.nav summary{font-size:15px!important;text-transform:none!important;letter-spacing:0!important;color:#fff!important;padding:12px 10px!important}.nav details{margin:9px 0!important;padding-top:9px!important}.nav details a{padding-left:18px!important;font-size:13px!important}


/* v25 — Tampilan desktop nyaman dan mudah dibaca. */
@media(min-width:901px){
  body{font-size:16px!important}
  .side{padding:22px 18px!important}
  .brand{font-size:30px!important}
  .side>.muted,.tk-store-name{font-size:14px!important}
  .nav summary{font-size:18px!important;padding:14px 11px!important}
  .nav details a{font-size:16px!important;padding:12px 16px!important;line-height:1.35!important}
  .top{min-height:76px!important;padding:14px 26px!important}
  .tk-top-title strong{font-size:24px!important}
  .tk-top-subtitle,.tk-user-label{font-size:14px!important}
  .content{padding:28px!important}
  .card{padding:22px!important;border-radius:16px!important}
  h1{font-size:30px!important} h2{font-size:25px!important} h3{font-size:21px!important}
  label{font-size:15px!important}
  input,select,textarea{font-size:16px!important;min-height:46px!important;padding:11px 12px!important}
  .btn,button{font-size:15px!important;min-height:44px!important;padding:10px 16px!important}
  th{font-size:14px!important} td{font-size:15px!important;line-height:1.45!important}
  th,td{padding:13px 14px!important}
  .muted{font-size:14px!important;line-height:1.5!important}
  .metric strong{font-size:28px!important}
}

/* v26 POS/Pembelian fokus transaksi desktop */
.pos-shift-bar{display:flex;align-items:center;gap:18px;justify-content:space-between}.pos-shift-bar form{display:flex;gap:8px;align-items:center}.pos-shift-bar form input{width:170px}.shortcut-help{display:flex;gap:8px;flex-wrap:wrap}.shortcut-help span{background:#eef7f1;border:1px solid #b8d9c4;border-radius:7px;padding:6px 9px;font-size:13px;font-weight:700}.pos-main-card{min-height:calc(100vh - 190px)}.pos-scan-row{display:grid;grid-template-columns:minmax(360px,1fr) minmax(520px,1.4fr);gap:16px;align-items:end}.pos-summary-mini{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr)) 150px;gap:8px;align-items:stretch}.pos-summary-mini span{border:1px solid #d5d5d5;border-radius:9px;padding:8px 11px}.pos-summary-mini span strong{display:block;font-size:20px;margin-top:3px}.pos-cart-scroll{max-height:calc(100vh - 350px);min-height:430px;overflow:auto}.search-suggestions{position:relative;z-index:5;display:grid;gap:3px;max-height:240px;overflow:auto;margin-top:4px}.search-suggestions button{display:flex;justify-content:space-between;text-align:left;width:100%;border-color:#d4d4d4}.search-suggestions button span{color:#555}.search-suggestions button em{color:#b91c1c;font-style:normal}.search-suggestions button.disabled{border-color:#ef4444}.inline-notice{margin:10px 0;padding:11px 13px;border-radius:9px;font-weight:700}.inline-notice.err{background:#fff7ed;border:1px solid #f59e0b}.inline-notice.ok{background:#ecfdf5;border:1px solid #10b981}.payment-modal{z-index:500;background:rgba(0,0,0,.68)}.payment-modal-box{width:min(1050px,96vw);max-height:94vh;overflow:auto;padding:26px}.payment-head{display:flex;justify-content:space-between;align-items:flex-start}.payment-head h2{font-size:30px;margin:0}.payment-total{border:2px solid #111;border-radius:12px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;margin:15px 0}.payment-total strong{font-size:42px}.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.payment-money{font-size:28px;font-weight:800;padding:14px}.change-panel{border:1px solid #bbb;border-radius:12px;padding:16px;margin-top:12px}.change-panel>div{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.change-panel strong{font-size:23px}.donation-choice{font-size:16px}.donation-choice input,.print-mode-options input{width:auto}.payment-save,.wide-action{width:100%;font-size:20px;padding:15px;margin-top:18px}.purchase-workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(340px,.7fr);gap:16px}.purchase-cart-card{min-height:calc(100vh - 185px)}.purchase-cart-table{max-height:calc(100vh - 360px);min-height:430px;overflow:auto}.purchase-cart-head{justify-content:space-between;margin-top:15px}.purchase-summary-card{position:sticky;top:12px;align-self:start}.print-mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.print-mode-options label{border:1px solid #bbb;border-radius:9px;padding:12px;font-size:15px}
@media(max-width:1050px){.pos-scan-row,.purchase-workspace,.payment-grid{grid-template-columns:1fr}.pos-summary-mini{grid-template-columns:repeat(2,1fr)}.purchase-summary-card{position:static}.shortcut-help{display:none}.pos-shift-bar{align-items:flex-start;flex-direction:column}.print-mode-options{grid-template-columns:1fr}}

/* v27 - halaman shift terpisah dari POS */
.shift-workspace{max-width:1100px;margin:0 auto;padding:28px}
.shift-page-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:22px}
.shift-page-head h2,.shift-workspace h2{font-size:30px;margin:0 0 6px}
.shift-open-form{max-width:560px}
.shift-money{font-size:24px!important;font-weight:800;min-height:58px}
.shift-open-form button,.shift-close-button{width:100%;min-height:54px;font-size:17px;margin-top:16px}
.shift-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 24px}
.shift-metrics>div,.shift-calc>div{border:1px solid #cfd8d3;border-radius:12px;padding:16px;background:#f8fbf9}
.shift-metrics span,.shift-calc span{display:block;color:#52605a;font-size:13px;margin-bottom:7px}
.shift-metrics strong,.shift-calc strong{font-size:20px;display:block}
.shift-close-panel{border-top:2px solid #dfe8e3;padding-top:22px}
.shift-calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
@media(max-width:900px){.shift-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.shift-calc{grid-template-columns:1fr}.shift-page-head{align-items:flex-start;flex-direction:column}.shift-workspace{padding:18px}}

/* v28 — Optimasi desktop: seluruh halaman tidak bergeser ke kiri/kanan. */
html,body{max-width:100%!important;overflow-x:hidden!important}
.layout,.main,.content,.card,.grid,.form-grid,.pos,.purchase-workspace{min-width:0!important;max-width:100%!important}

/* Grid adaptif: dua kartu laporan memakai ruang penuh, bukan masing-masing 1/4 layar. */
.grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))!important}

/* Tabel desktop selalu mengikuti lebar kartu dan membungkus teks panjang. */
.table-wrap{overflow-x:hidden!important;overflow-y:auto!important;max-width:100%!important}
.table-wrap table,table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important}
th,td{min-width:0!important;max-width:none!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.35!important}
th{font-size:14px!important}
td{font-size:14px!important}
td .row,td form,.table-wrap .row{max-width:100%!important;flex-wrap:wrap!important}
td .btn,td button,td input,td select{max-width:100%!important}

/* Ruang laporan lebih luas pada komputer. */
@media(min-width:1101px){
  .content{max-width:none!important;padding:22px 26px!important}
  .side{width:285px!important}
  .layout{grid-template-columns:285px minmax(0,1fr)!important}
  .card{padding:18px!important}
  .table-wrap th,.table-wrap td{padding:11px 10px!important}
}

/* Pada layar kecil tetap aman; tabel boleh digeser hanya bila benar-benar tidak muat. */
@media(max-width:700px){
  .table-wrap{overflow-x:auto!important}
  .table-wrap table{table-layout:auto!important;min-width:680px!important}
}


/* v29 — Layout laporan desktop penuh dan tanpa ruang kosong sempit. */
.report-sales-grid{
  display:grid!important;
  grid-template-columns:minmax(330px,.8fr) minmax(0,2.2fr)!important;
  gap:18px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  align-items:start!important;
}
.report-sales-grid>.card{width:100%!important;min-width:0!important;margin:0!important}
.report-sales-grid .table-wrap{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
.report-sales-grid table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important}
.report-cashier-card th:nth-child(1),.report-cashier-card td:nth-child(1){width:42%!important}
.report-cashier-card th:nth-child(2),.report-cashier-card td:nth-child(2){width:24%!important;text-align:center!important}
.report-cashier-card th:nth-child(3),.report-cashier-card td:nth-child(3){width:34%!important;text-align:right!important}
.report-product-card th:nth-child(1),.report-product-card td:nth-child(1){width:auto!important}
.report-product-card th:nth-child(2),.report-product-card td:nth-child(2){width:105px!important;text-align:center!important}
.report-product-card th:nth-child(3),.report-product-card td:nth-child(3){width:165px!important;text-align:right!important}
@media(max-width:1050px){
  .report-sales-grid{grid-template-columns:1fr!important}
}
@media(max-width:700px){
  .report-sales-grid .table-wrap{overflow-x:auto!important}
  .report-sales-grid table{table-layout:auto!important;min-width:620px!important}
}

/* v30 - antrean POS 3 pelanggan dan tombol cepat pembayaran */
.pos-queue-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #dce5df}
.pos-queue-bar>div:first-child strong,.pos-queue-bar>div:first-child small{display:block}.pos-queue-bar>div:first-child small{color:#64706a;margin-top:3px}
.queue-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.queue-tab{display:flex;flex-direction:column;align-items:flex-start;min-height:58px;border:1px solid #aebdb4;background:#fff}.queue-tab small{margin-top:4px;color:#64706a}.queue-tab.active{background:#0b5d3b;color:#fff;border-color:#0b5d3b}.queue-tab.active small{color:#e5f4eb}.queue-tab.held:not(.active){background:#fff8df;border-color:#d8b64c}
.pos-shortcuts{margin-bottom:12px}.payment-shortcuts{margin:8px 0 14px}.print-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.print-choice{min-height:54px;font-size:16px}.print-choice.active{background:#0b5d3b;color:#fff;border-color:#0b5d3b}
@media(max-width:1050px){.pos-queue-bar{grid-template-columns:1fr}.queue-tabs{grid-template-columns:1fr}.payment-shortcuts{display:flex}.pos-shortcuts{display:none}}

/* v31 - Quick Qty POS */
.pos-summary-mini{align-items:end}
.qty-modal-box{max-width:460px}
.qty-modal-box #quickQtyInput{font-size:2rem;font-weight:800;text-align:center;min-height:68px}
.selected-cart-row{outline:2px solid rgba(22,101,52,.35);outline-offset:-2px;background:rgba(22,101,52,.06)}
#quickQty{white-space:nowrap}
@media (min-width:900px){.qty-modal-box{padding:28px}.qty-modal-box h2{font-size:1.55rem}}


/* v32 - modal pembayaran desktop ringkas dan seluruh informasi terlihat */
@media (min-width:900px){
  .payment-modal{padding:8px!important}
  .payment-modal-box{
    width:min(940px,97vw)!important;
    max-height:calc(100vh - 16px)!important;
    overflow-y:auto!important;
    padding:14px 18px!important;
    border-radius:12px!important;
  }
  .payment-head{align-items:center!important;margin-bottom:2px!important}
  .payment-head h2{font-size:22px!important;line-height:1.1!important}
  .payment-head p{margin:3px 0 0!important;font-size:13px!important}
  .payment-head button{min-height:36px!important;padding:6px 11px!important}
  .payment-shortcuts{margin:6px 0 8px!important;gap:5px!important}
  .payment-shortcuts span{padding:4px 7px!important;font-size:11px!important}
  .payment-total{padding:10px 16px!important;margin:7px 0 10px!important;min-height:66px!important}
  .payment-total span{font-size:14px!important}
  .payment-total strong{font-size:32px!important;line-height:1!important}
  .payment-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:16px!important;align-items:start!important}
  .payment-grid label{font-size:13px!important;margin:5px 0 3px!important}
  .payment-grid select,.payment-grid input{min-height:38px!important;padding:7px 10px!important;font-size:14px!important}
  .payment-grid .row{gap:7px!important}
  .payment-money{font-size:20px!important;font-weight:800!important;padding:7px 10px!important}
  .change-panel{padding:8px 12px!important;margin-top:7px!important;border-radius:10px!important}
  .change-panel>div{padding:5px 0!important;gap:10px!important}
  .change-panel strong{font-size:19px!important;white-space:nowrap!important}
  .donation-choice{font-size:13px!important;line-height:1.25!important;margin:5px 0!important;display:flex!important;align-items:center!important;gap:7px!important}
  .donation-choice input{min-height:auto!important;width:20px!important;height:20px!important;padding:0!important;flex:0 0 auto!important}
  #donationInputWrap small{font-size:11px!important}
  .print-choice-grid{gap:7px!important}
  .print-choice{min-height:40px!important;padding:7px 9px!important;font-size:13px!important}
  .payment-save{font-size:16px!important;padding:10px 14px!important;margin-top:10px!important;min-height:44px!important}
  .payment-shortage{color:#b42318!important}
}
@media (min-width:900px) and (max-height:700px){
  .payment-modal-box{padding:10px 14px!important}
  .payment-shortcuts{display:none!important}
  .payment-total{min-height:54px!important;padding:8px 14px!important;margin:5px 0 7px!important}
  .payment-total strong{font-size:28px!important}
  .payment-grid label{margin:3px 0 2px!important}
  .payment-grid select,.payment-grid input{min-height:34px!important;padding:5px 8px!important}
  .change-panel{padding:5px 10px!important;margin-top:5px!important}
  .change-panel>div{padding:3px 0!important}
  .payment-save{margin-top:7px!important;min-height:39px!important;padding:7px 12px!important}
}

/* v34: tombol nominal cepat pada layar pembayaran */
.quick-cash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:7px 0 9px}
.quick-cash-grid button{min-height:36px;padding:6px 8px;font-size:13px;font-weight:800;background:#f2f8f4;border:1px solid #9fc8ad;color:#123d2a}
.quick-cash-grid button:hover,.quick-cash-grid button:focus{background:#dff1e5;border-color:#4f9b69}
@media(max-width:700px){.quick-cash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* v35: filter cepat dan pagination laporan agar tetap ringan saat data membesar */
.quick-periods{margin-top:10px;gap:7px;flex-wrap:wrap}
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid #e5e7eb}
.pagination .btn{min-height:34px;padding:7px 11px;font-size:13px}
.pagination-summary{margin-right:auto;color:#667085;font-size:13px;font-weight:700}
.report-filter{align-items:flex-end}
@media(max-width:700px){.pagination{justify-content:center}.pagination-summary{width:100%;text-align:center;margin-right:0}.report-filter>div{width:100%}}

/* v37: hak akses rinci dan audit keamanan */
.permission-grid label{min-height:64px;display:flex;align-items:flex-start;gap:7px;line-height:1.3}
.permission-grid label input{margin-top:2px!important;flex:0 0 auto}
.login-device{max-width:360px;white-space:normal;overflow-wrap:anywhere;font-size:12px;color:#475467}
@media(min-width:1100px){.permission-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}

/* v38: laporan desktop, ekspor/cetak, dan tampilan cetak */
.report-actions{margin-top:12px;gap:8px;flex-wrap:wrap}
@media print{
  body{background:#fff!important;font-size:11pt!important}
  .sidebar,.top,.no-print,.report-filter,.quick-periods,.tk-top-actions,button,.btn{display:none!important}
  .main,.content{margin:0!important;padding:0!important;width:100%!important;max-width:none!important}
  .card{box-shadow:none!important;border:1px solid #bbb!important;break-inside:avoid}
  .table-wrap{overflow:visible!important}
  table{width:100%!important;table-layout:auto!important;font-size:9pt!important}
  th,td{padding:5px!important;white-space:normal!important}
  @page{size:landscape;margin:10mm}
}


/* v47 - hitung kas tutup shift berdasarkan pecahan */
.cash-count-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:18px 0 12px;padding:14px 16px;border:1px solid #cbd9d1;border-radius:12px;background:#f7faf8}.cash-count-head>div:first-child{display:flex;flex-direction:column;gap:4px}.cash-count-total{text-align:right}.cash-count-total span{display:block;font-size:13px;color:#5b6c63}.cash-count-total strong{font-size:24px;color:#174f39}.cash-denomination-grid{display:grid;grid-template-columns:repeat(5,minmax(145px,1fr));gap:10px}.cash-denomination{display:grid;grid-template-columns:1fr 74px;align-items:center;gap:8px;padding:10px 12px;border:1px solid #d8e1dc;border-radius:10px;background:#fff}.cash-denomination span{font-weight:700;color:#244f3e}.cash-denomination input{margin:0;text-align:center;padding:9px 6px}.cash-denomination small{grid-column:1/-1;text-align:right;color:#697a71}.shift-count-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.shift-count-summary>div{padding:12px 14px;border:1px solid #d8e1dc;border-radius:10px;background:#f8faf9}.shift-count-summary span{display:block;font-size:13px;color:#65766d}.shift-count-summary strong{display:block;margin-top:4px;font-size:18px;color:#174f39}.shift-count-summary .is-danger{color:#b91c1c}@media(max-width:1100px){.cash-denomination-grid{grid-template-columns:repeat(3,minmax(145px,1fr))}}@media(max-width:700px){.cash-count-head{align-items:flex-start;flex-direction:column}.cash-count-total{text-align:left}.cash-denomination-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}.shift-count-summary{grid-template-columns:1fr}}


/* v48 - Cek opname modern per kategori */
.opname-progress{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:14px}.opname-progress span{display:block;height:100%;background:#15803d;border-radius:999px}.opname-category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:16px 0}.opname-category{text-decoration:none;color:inherit;border-left:5px solid #94a3b8}.opname-category.counting{border-left-color:#f59e0b}.opname-category.completed{border-left-color:#16a34a;background:#f0fdf4}.opname-badge{font-size:12px;font-weight:700;padding:5px 9px;border-radius:999px;background:#eef2f7}.opname-category.completed .opname-badge{background:#dcfce7;color:#166534}.opname-category.counting .opname-badge{background:#fef3c7;color:#92400e}.opname-table input{min-width:130px}.opname-checked{background:#f0fdf4}.checked-mark{font-weight:700;color:#15803d;white-space:nowrap}.opname-intro{max-width:900px}.opname-category:hover{transform:translateY(-1px);box-shadow:0 8px 24px #00000012}@media(max-width:700px){.opname-category-grid{grid-template-columns:1fr}.opname-table input{min-width:105px}}


/* v49 - desktop compact layout, one-column content blocks, without touching business logic */
@media (min-width: 901px){
  :root{--side:250px}
  body{font-size:14px!important}
  .side{padding:16px 14px!important}
  .brand{font-size:24px!important;margin-bottom:4px!important}
  .side>.muted,.tk-store-name{font-size:12px!important;margin-bottom:10px!important}
  .nav summary{font-size:16px!important;padding:10px 9px!important}
  .nav details{margin:6px 0!important;padding-top:6px!important}
  .nav details a{font-size:14px!important;padding:8px 12px!important;line-height:1.25!important}
  .top{min-height:64px!important;padding:10px 18px!important}
  .tk-top-title strong{font-size:20px!important}
  .tk-top-subtitle,.tk-user-label{font-size:12px!important}
  .content{max-width:1540px!important;padding:16px 18px!important}
  .card{padding:14px!important;margin-bottom:12px!important;border-radius:12px!important}
  h1{font-size:24px!important;margin:0 0 10px!important}
  h2{font-size:21px!important;margin:0 0 10px!important}
  h3{font-size:17px!important;margin:0 0 10px!important}
  label{font-size:13px!important;margin:6px 0 4px!important}
  input,select,textarea{font-size:14px!important;min-height:38px!important;padding:8px 10px!important}
  .btn,button{font-size:13px!important;min-height:36px!important;padding:7px 11px!important}
  .muted{font-size:12px!important;line-height:1.35!important}
  .flash{padding:10px!important;margin-bottom:12px!important}
  .table-wrap{border-radius:8px!important}
  .table-wrap table{min-width:640px!important}
  th,td{padding:8px 10px!important;font-size:13px!important;line-height:1.35!important}
  th{font-size:12px!important}
  .metric{min-height:auto!important}
  .metric strong{font-size:22px!important;margin-top:5px!important}
  .status-item{padding:9px 10px!important}
  .row{gap:8px!important}
  .report-sales-grid,
  .finance-entry-grid,
  .account-security-grid,
  .desktop-stack{grid-template-columns:1fr!important;gap:12px!important}
  .table-wrap td form{display:inline-flex!important;align-items:center!important;gap:6px!important;margin:0 6px 4px 0!important;vertical-align:middle!important}
  .table-wrap td form.row{flex-wrap:wrap!important}
  .table-wrap td .btn,
  .table-wrap td button{min-height:32px!important;padding:6px 10px!important;font-size:12px!important;white-space:nowrap!important}
  .table-wrap td:last-child{white-space:normal!important}
}


/* v50 - pemilih cetak barcode barang */
.barcode-product-picker{max-height:520px;overflow:auto!important}
.barcode-product-picker input[type=checkbox]{width:20px!important;height:20px!important;min-height:20px!important;padding:0!important;margin:0!important}
.barcode-product-picker td:first-child,.barcode-product-picker th:first-child{text-align:center!important}
@media(min-width:901px){.barcode-product-picker table{min-width:0!important;table-layout:fixed!important}.barcode-product-picker th:nth-child(1){width:60px}.barcode-product-picker th:nth-child(3){width:180px}.barcode-product-picker th:nth-child(4){width:220px}}


/* v51 - cek opname seluruh barang dengan scan barcode/kamera */
.opname-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.opname-scan-grid{display:grid;grid-template-columns:minmax(280px,1.5fr) minmax(150px,.55fr) minmax(240px,1fr);gap:10px;align-items:end}
.opname-scan-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.opname-scan-card{border-left:5px solid var(--brand)!important}
.barcode-camera-panel{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#0b1814}
.barcode-camera-panel video{display:block;width:100%;max-width:640px;max-height:360px;margin:0 auto 10px;object-fit:cover;border-radius:8px;background:#000}
.barcode-camera-panel .muted{color:#d6e5df!important}
.is-balanced{color:#15803d}.is-different{color:#b42318}
@media(max-width:900px){.opname-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.opname-scan-grid{grid-template-columns:1fr}.opname-scan-actions{grid-column:auto}}
@media(max-width:520px){.opname-summary-grid{grid-template-columns:1fr!important}}


/* v52 - histori cek opname dan analisa IA selisih stok */
.opname-analysis-stack{display:grid;grid-template-columns:1fr;gap:12px}
.opname-ai-analysis .form-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:end}
.opname-ai-metrics .metric span{display:block;margin-top:5px;color:#66756e;font-size:12px}
.is-balanced{color:#157347}.is-different{color:#b42318}
@media(max-width:1100px){.opname-ai-analysis .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.opname-ai-analysis .form-grid{grid-template-columns:1fr!important}}


/* v55 - hierarki warna tulisan menu yang tenang dan mudah dibaca */
.nav details > summary{
  color:#f3d59a!important;
  font-weight:900!important;
}
.nav details[open] > summary{
  color:#ffe7ad!important;
}
.nav details > a{
  color:#d3e5dd!important;
  font-weight:650!important;
}
.nav details > a:hover{
  color:#ffffff!important;
}
.nav details > a.active{
  color:#ffffff!important;
  font-weight:850!important;
}
.nav > a{
  color:#d3e5dd!important;
}
.nav > a:hover,.nav > a.active{
  color:#ffffff!important;
}
.brand{color:#ffffff!important}
.tk-store-name,.side>.muted{color:#aec9be!important}


/* v68.46 - tabel master barang lebih padat tanpa menimpa teks */
.product-master-table th,.product-master-table td{padding:6px 8px!important;vertical-align:middle!important;line-height:1.25!important}
.product-master-table td:nth-child(1){width:130px!important}
.product-master-table td:nth-child(3),.product-master-table td:nth-child(4){width:125px!important}
.product-master-table td:nth-child(5){width:70px!important;text-align:center!important}
.product-master-table td:nth-child(6){width:135px!important}
.product-master-table td:nth-child(7){width:78px!important}
.product-master-table td:nth-child(8),.product-master-table th:nth-child(8){width:190px!important}
.product-master-table .muted{margin-top:2px!important;line-height:1.2!important}
.product-actions{display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:nowrap!important}
.product-actions form{display:inline-flex!important;margin:0!important}
.product-actions .btn,.product-actions button{min-height:29px!important;padding:4px 8px!important;font-size:12px!important;line-height:1.15!important;margin:0!important}
@media(max-width:900px){.product-actions{flex-wrap:wrap!important}.product-master-table td:nth-child(n){width:auto!important}}


/* v69.10 - sidebar penuh, rapi, dan posisi menu dipertahankan */
html,body{min-height:100%;}
.layout{min-height:100vh;align-items:stretch;background:#f4f7f5}
.side{background:#0b3428!important;color:#fff!important;min-height:100vh;height:100vh;position:sticky;top:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:32px!important}
.side .muted,.side .tk-store-name{color:#c8ded5!important}
.side .nav details{border-color:#285547!important}
.side .nav summary{color:#ffd777}
.side .nav a{color:#f7fffb;border-color:transparent}
.side .nav a:hover,.side .nav a.active{background:#fff!important;color:#103b2d!important;border-color:#fff!important}
.main{background:#f4f7f5;min-height:100vh}
.product-master-table td{vertical-align:middle}
@media(max-width:900px){.side{position:fixed!important;inset:0 auto 0 0;height:100dvh;min-height:100dvh;max-width:min(86vw,330px);z-index:1001;transform:translateX(-105%);transition:transform .2s ease}.tk-menu-open .side{transform:translateX(0)}.layout{display:block}.main{min-height:100vh}}


/* v69.11 - pencarian dan scan kamera HP khusus Data Barang; POS/Pembelian tetap desktop */
.product-search-form{align-items:center;flex-wrap:wrap}
.product-camera-button{display:none}
.product-camera-panel{max-width:760px}
.product-camera-panel video{aspect-ratio:4/3}
@media(max-width:900px){
  .tk-page-products .product-camera-button{display:inline-flex!important}
  .tk-page-products .product-search-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px!important}
  .tk-page-products .product-search-form input[name=q]{grid-column:1/-1;max-width:none!important;width:100%}
  .tk-page-products .product-search-form .btn,.tk-page-products .product-search-form button{justify-content:center}
  .tk-page-products .product-camera-panel{position:relative;margin-top:10px}
  .tk-page-products .product-camera-panel video{max-height:55vh}
  .tk-page-inventory_control .opname-scan-card{padding:12px!important}
  .tk-page-inventory_control .opname-scan-actions>*{width:100%;justify-content:center}
  .tk-page-inventory_control #openBarcodeCamera{display:flex!important}
  .tk-page-inventory_control #opnameBarcode,.tk-page-inventory_control #opnamePhysical{font-size:18px!important;min-height:48px!important}
}
@media(min-width:901px){.tk-page-inventory_control #openBarcodeCamera{display:none!important}}

/* Autocomplete barang: aktif mulai 2 karakter. */
.product-master-suggestions,.opname-product-results{max-height:420px;margin-top:6px;overflow:auto}.search-empty{padding:10px 12px;border:1px dashed #cbd5e1;border-radius:8px}.product-master-suggestions button,.opname-product-results button{gap:12px;align-items:center}.product-master-suggestions button span,.opname-product-results button span{white-space:nowrap}

/* POS member by phone */
.member-phone-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}.member-phone-row input{min-width:0}.member-phone-row .btn{white-space:nowrap}@media(max-width:700px){.member-phone-row{grid-template-columns:1fr}.member-phone-row .btn{width:100%}}

/* Promo Tebus Murah */
.promo-offer-panel{margin:10px 0;padding:12px;border:1px solid #111;border-radius:10px;background:#fffbe8}.promo-offer-panel>strong{display:block;margin-bottom:8px}.promo-offer-list{display:flex;gap:8px;flex-wrap:wrap}.promo-offer-list button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:250px;text-align:left;background:#fff}.promo-offer-list button span{font-weight:800}.promo-offer-list button small{color:#555}.promo-offer-panel b{letter-spacing:.03em}


/* v69.21 - POS pembayaran tampil penuh, rapat, dan selalu di atas sidebar */
.side{z-index:30}
.main,.content,.pos-main-card{overflow:visible!important}
body.pos-payment-open{overflow:hidden!important}
body.pos-payment-open .side{z-index:20!important}
body.pos-payment-open .top{z-index:25!important}
.payment-modal{z-index:5000!important;align-items:flex-start!important;justify-content:center!important;padding:10px!important;overflow:auto!important}
.payment-modal::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:-1}
.payment-modal-box{position:relative!important;z-index:5001!important;margin:0 auto!important;box-shadow:0 18px 56px rgba(0,0,0,.28)!important;border:1px solid #d7e2db!important}
.pos-main-card{padding:12px!important;min-height:calc(100vh - 152px)!important}
.pos-queue-bar{gap:10px!important;margin-bottom:10px!important}
.pos-queue-bar strong{font-size:15px!important}
.pos-queue-bar small{font-size:11px!important}
.pos-shortcuts span{padding:4px 7px!important;font-size:11px!important}
.pos-scan-row{grid-template-columns:minmax(300px,1fr) minmax(450px,1.1fr)!important;gap:10px!important;align-items:end!important}
.pos-scan-row label{font-size:12px!important;margin:0 0 4px!important}
.pos-scan-row input{min-height:40px!important;padding:8px 10px!important}
.pos-summary-mini{grid-template-columns:repeat(3,minmax(86px,1fr)) 120px 120px!important;gap:6px!important}
.pos-summary-mini span{padding:6px 8px!important;border-radius:8px!important}
.pos-summary-mini span strong{font-size:17px!important;line-height:1.1!important;margin-top:2px!important}
.pos-summary-mini .btn,.pos-summary-mini .primary{min-height:38px!important;padding:7px 10px!important;font-size:13px!important}
.pos-cart-scroll{max-height:calc(100vh - 250px)!important;min-height:300px!important}
.pos-cart-scroll th,.pos-cart-scroll td{padding:8px 8px!important;font-size:13px!important}
.pos-cart-scroll .btn,.pos-cart-scroll button{min-height:30px!important;padding:4px 8px!important;font-size:12px!important}
.customer-suggestions{max-height:150px!important}
.print-choice-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.print-choice{min-height:40px!important;padding:8px 10px!important;font-size:13px!important;font-weight:800!important;border:1px solid #b8c9bf!important;border-radius:10px!important;background:#fff!important}
.print-choice.active{background:#e8f5ee!important;border-color:#2f8f67!important;color:#114935!important}
@media (min-width:901px){
  .payment-modal{padding:8px 10px!important}
  .payment-modal-box{width:min(980px,calc(100vw - 32px))!important;max-height:calc(100vh - 16px)!important;padding:12px 16px!important;border-radius:12px!important}
  .payment-head{margin-bottom:2px!important}
  .payment-head h2{font-size:24px!important;line-height:1.05!important}
  .payment-head p{font-size:12px!important;margin-top:2px!important}
  .payment-head button{min-height:34px!important;padding:5px 10px!important}
  .payment-shortcuts{margin:5px 0 7px!important;gap:4px!important}
  .payment-shortcuts span{padding:3px 6px!important;font-size:10px!important}
  .payment-total{padding:8px 14px!important;margin:5px 0 8px!important;min-height:56px!important;border-radius:10px!important}
  .payment-total span{font-size:13px!important}
  .payment-total strong{font-size:26px!important;line-height:1!important}
  .payment-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:12px!important;align-items:start!important}
  .payment-grid > div{min-width:0!important}
  .payment-grid label{font-size:12px!important;margin:4px 0 2px!important}
  .payment-grid small,.payment-grid .muted,#redeemHint{font-size:11px!important;line-height:1.3!important}
  .payment-grid select,.payment-grid input{min-height:34px!important;padding:6px 8px!important;font-size:13px!important;border-radius:8px!important}
  .member-phone-row{grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important}
  .member-phone-row .btn{min-height:34px!important;padding:6px 9px!important;font-size:12px!important}
  #memberLookupStatus{margin-top:6px!important;padding:8px 10px!important;font-size:12px!important}
  .customer-suggestions button{padding:7px 9px!important}
  .customer-suggestions button strong{font-size:13px!important}
  .customer-suggestions button span{font-size:11px!important}
  .payment-money{font-size:18px!important;font-weight:800!important;padding:6px 8px!important}
  .quick-cash-grid{gap:6px!important;margin:6px 0 7px!important}
  .quick-cash-grid button{min-height:34px!important;padding:5px 7px!important;font-size:12px!important;border-radius:8px!important}
  .change-panel{padding:7px 10px!important;margin-top:6px!important;border-radius:10px!important}
  .change-panel>div{padding:4px 0!important;gap:8px!important}
  .change-panel strong{font-size:18px!important;line-height:1.15!important}
  .donation-choice{font-size:12px!important;line-height:1.25!important;margin:4px 0!important}
  #donationInputWrap label{margin-top:2px!important}
  #donationInputWrap small{font-size:10px!important;display:block!important;margin-top:2px!important}
  .payment-save{font-size:15px!important;padding:9px 12px!important;margin-top:8px!important;min-height:40px!important}
}
@media (min-width:901px) and (max-height:820px){
  .pos-main-card{padding:10px!important;min-height:calc(100vh - 145px)!important}
  .pos-shortcuts{display:none!important}
  .pos-scan-row{grid-template-columns:minmax(260px,1fr) minmax(420px,1.05fr)!important;gap:8px!important}
  .pos-summary-mini{grid-template-columns:repeat(3,minmax(80px,1fr)) 112px 112px!important}
  .pos-summary-mini span strong{font-size:15px!important}
  .pos-cart-scroll{max-height:calc(100vh - 220px)!important;min-height:260px!important}
  .payment-modal-box{padding:10px 14px!important}
  .payment-shortcuts{display:none!important}
  .payment-total{min-height:50px!important;padding:7px 12px!important;margin:4px 0 6px!important}
  .payment-total strong{font-size:24px!important}
  .payment-grid{gap:10px!important}
  .payment-grid label{font-size:11px!important;margin:3px 0 2px!important}
  .payment-grid select,.payment-grid input{min-height:32px!important;padding:5px 7px!important;font-size:12px!important}
  .quick-cash-grid button{min-height:31px!important;font-size:11px!important}
  .change-panel{padding:6px 9px!important;margin-top:5px!important}
  .change-panel strong{font-size:16px!important}
  .payment-save{min-height:38px!important;font-size:14px!important;margin-top:7px!important}
}
@media (max-width:900px){
  .payment-modal{padding:0!important;align-items:flex-end!important}
  .payment-modal-box{width:100vw!important;max-width:100vw!important;max-height:92vh!important;border-radius:16px 16px 0 0!important;padding:12px!important}
  .pos-summary-mini{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pos-cart-scroll{max-height:none!important;min-height:240px!important}
}


/* v69.25 - sidebar stabil, scroll nyaman, dan dashboard lebih menarik */
@media (min-width:901px){
  html,body{min-height:100%!important;overflow-x:hidden!important}
  body{background:#f1f6f3!important}
  .layout{display:block!important;min-height:100vh!important;background:#f1f6f3!important}
  .side{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:var(--side)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:scroll!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;
    scrollbar-color:#5a8f7c #0b3428!important;
    background:linear-gradient(180deg,#0b3428 0%,#0d3d2f 55%,#082a21 100%)!important;
    box-shadow:8px 0 28px rgba(7,42,32,.12)!important;
    z-index:60!important;
  }
  .side::-webkit-scrollbar{width:9px!important}
  .side::-webkit-scrollbar-track{background:#0b3428!important}
  .side::-webkit-scrollbar-thumb{background:#5a8f7c!important;border-radius:999px!important;border:2px solid #0b3428!important}
  .main{
    margin-left:var(--side)!important;
    width:calc(100% - var(--side))!important;
    min-width:0!important;
    min-height:100vh!important;
    background:linear-gradient(180deg,#f6faf8 0,#eef5f1 100%)!important;
  }
  .content{min-height:calc(100vh - 76px)!important}
  .nav a{transition:background-color .14s ease,color .14s ease,transform .14s ease!important}
  .nav a:hover{transform:translateX(2px)!important}
  .nav a:focus-visible{outline:3px solid rgba(255,215,119,.65)!important;outline-offset:2px!important}
}
@media (max-width:900px){
  .main{margin-left:0!important;width:100%!important}
  .side{overflow-y:auto!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;background:linear-gradient(180deg,#0b3428,#082a21)!important}
}

.tk-page-dashboard .content{
  background:
    radial-gradient(circle at 95% 0,rgba(34,139,103,.09),transparent 32%),
    radial-gradient(circle at 0 25%,rgba(255,202,87,.08),transparent 27%);
}
.tk-dashboard-metrics{gap:16px!important;margin-bottom:18px!important}
.tk-metric-card{
  position:relative!important;
  min-height:132px!important;
  padding:20px 20px 18px 22px!important;
  border:1px solid rgba(17,92,68,.12)!important;
  overflow:hidden!important;
  box-shadow:0 10px 30px rgba(15,81,63,.08)!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.tk-metric-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:#267e62}
.tk-metric-card::after{content:"";position:absolute;width:96px;height:96px;border-radius:50%;right:-34px;top:-38px;background:rgba(23,111,87,.07)}
.tk-metric-card:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(15,81,63,.12)!important}
.tk-metric-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e7f4ee;color:#125c46;font-size:18px;font-weight:900;margin-bottom:9px}
.tk-metric-label{display:block;color:#52675e;font-size:13px;font-weight:800;letter-spacing:.1px}
.tk-metric-card strong{font-size:27px!important;line-height:1.12!important;margin:7px 0 4px!important;color:#0d5d45!important}
.tk-metric-card small{display:block;color:#718078;font-size:12px}
.tk-metric-sales::before{background:#16835d}.tk-metric-trx::before{background:#3177b7}.tk-metric-stock::before{background:#c98a16}.tk-metric-cash::before{background:#7d56a8}
.tk-metric-trx .tk-metric-icon{background:#eaf3fb;color:#24689e}.tk-metric-stock .tk-metric-icon{background:#fff5df;color:#a56b08}.tk-metric-cash .tk-metric-icon{background:#f3ecfa;color:#714694}
.tk-alert-panel{padding:0!important;overflow:hidden!important;border:1px solid #d8e5df!important}
.tk-alert-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 19px;background:linear-gradient(90deg,#f5faf7,#eef7f2);border-bottom:1px solid #dde9e3}
.tk-alert-head h3{margin:0!important;font-size:18px!important;color:#183d31}.tk-alert-head a{font-size:12px;font-weight:800;color:#176f57}
.tk-alert-list{display:grid}.tk-alert-row{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid #edf2ef;transition:background .14s ease,transform .14s ease}
.tk-alert-row:last-child{border-bottom:0}.tk-alert-row:hover{background:#f7fbf9;transform:translateX(2px)}
.tk-alert-row>span:nth-child(2){display:flex;flex-direction:column;gap:3px}.tk-alert-row strong{font-size:14px;color:#253a32}.tk-alert-row small{font-size:12px;color:#6b7a73}.tk-alert-row>b{font-size:22px;color:#829188}
.tk-alert-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:900}.tk-alert-icon.warn{background:#fff4d7;color:#a66a00}.tk-alert-icon.danger{background:#fff0ee;color:#b42318}.tk-alert-icon.info{background:#eaf4fb;color:#266d9d}
@media(max-width:700px){
  .tk-dashboard-metrics{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .tk-metric-card{min-height:116px!important;padding:15px!important}.tk-metric-card strong{font-size:21px!important}
  .tk-alert-row{padding:12px 13px!important}
}
@media(max-width:440px){.tk-dashboard-metrics{grid-template-columns:1fr!important}}


/* v69.28 - daftar Promo Tebus Murah POS dibuat padat untuk banyak pilihan */
.promo-offer-panel{
  margin:7px 0 9px!important;
  padding:8px 9px!important;
  border-radius:9px!important;
  background:#fffbed!important;
  overflow:hidden!important;
}
.promo-offer-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0 1px 6px!important;
}
.promo-offer-head strong{font-size:13px!important;line-height:1.15!important;color:#2b332e!important}
.promo-offer-head span{
  flex:0 0 auto!important;
  padding:2px 7px!important;
  border-radius:999px!important;
  background:#eef5ef!important;
  border:1px solid #c8d8cc!important;
  color:#466055!important;
  font-size:10px!important;
  font-weight:800!important;
}
.promo-offer-list{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:5px!important;
  max-height:104px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:3px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#9fb4a7 transparent!important;
  overscroll-behavior:contain!important;
}
.promo-offer-list::-webkit-scrollbar{width:6px!important}
.promo-offer-list::-webkit-scrollbar-thumb{background:#9fb4a7!important;border-radius:10px!important}
.promo-offer-list button{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:2px!important;
  min-width:0!important;
  min-height:46px!important;
  max-height:46px!important;
  width:100%!important;
  padding:5px 8px!important;
  border-radius:8px!important;
  text-align:left!important;
  overflow:hidden!important;
  background:#fff!important;
}
.promo-offer-list button span{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:800!important;
}
.promo-offer-list button small{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:9px!important;
  line-height:1.15!important;
  color:#59655f!important;
}
.promo-offer-list button small b{color:#0f6b4e!important;font-weight:900!important}
.promo-offer-list button:hover,.promo-offer-list button:focus{
  border-color:#3f8e6d!important;
  background:#f4fbf7!important;
}
@media(max-width:1180px){.promo-offer-list{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:820px){
  .promo-offer-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:104px!important}
}
@media(max-width:480px){
  .promo-offer-panel{padding:7px!important}
  .promo-offer-list{grid-template-columns:1fr!important;max-height:98px!important}
  .promo-offer-list button{min-height:44px!important;max-height:44px!important}
}

/* v69.29 - mode offline POS satu kasir */
.offline-pos-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;margin-bottom:10px;border:1px solid #bad5c7;border-radius:10px;background:#f4fbf7}.offline-pos-bar>div:first-child{display:flex;flex-direction:column;gap:2px}.offline-pos-bar strong{color:#14543d}.offline-pos-bar small{font-size:11px;color:#5d7066}.offline-queue-badge{font-size:12px;font-weight:800;padding:6px 9px;border-radius:999px;background:#e5eee9}.pos-is-offline .offline-pos-bar{background:#fff7df;border-color:#e3b94f}.pos-is-offline .offline-pos-bar strong{color:#8a5600}.pos-is-offline #paymentMethod option:not([value=cash]){display:none}.pos-is-offline #posMemberPhone,.pos-is-offline #clearMember,.pos-is-offline #redeemPoints,.pos-is-offline #discountType,.pos-is-offline #discountValue{opacity:.55;pointer-events:none}@media(max-width:700px){.offline-pos-bar{align-items:flex-start;flex-direction:column}.offline-pos-bar .row{width:100%}.offline-pos-bar button{flex:1}}


/* v69.30 - aksi riwayat pembelian padat dan sejajar */
.purchase-action-row{display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:nowrap!important;white-space:nowrap!important}
.purchase-action-row .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:30px!important;padding:5px 8px!important;margin:0!important;font-size:11px!important;line-height:1.1!important;border-radius:7px!important}
.tk-page-purchase_history .table-wrap th,.tk-page-purchase_history .table-wrap td{padding:7px 8px!important;vertical-align:middle!important}
.tk-page-purchase_history .table-wrap td:last-child{width:250px!important}
@media(max-width:900px){.purchase-action-row{flex-wrap:wrap!important}.tk-page-purchase_history .table-wrap td:last-child{width:auto!important}}

/* v69.31 - riwayat pembelian lebih padat dan semua aksi tetap terlihat */
.tk-page-purchase_history .table-wrap{overflow-x:hidden!important}
.tk-page-purchase_history .table-wrap table{width:100%!important;min-width:0!important;table-layout:fixed!important}
.tk-page-purchase_history .table-wrap th,
.tk-page-purchase_history .table-wrap td{padding:6px 7px!important;font-size:12px!important;line-height:1.2!important;vertical-align:middle!important}
.tk-page-purchase_history .table-wrap th:nth-child(1){width:10%!important}
.tk-page-purchase_history .table-wrap th:nth-child(2){width:14%!important}
.tk-page-purchase_history .table-wrap th:nth-child(3){width:13%!important}
.tk-page-purchase_history .table-wrap th:nth-child(4){width:8%!important}
.tk-page-purchase_history .table-wrap th:nth-child(5),
.tk-page-purchase_history .table-wrap th:nth-child(6),
.tk-page-purchase_history .table-wrap th:nth-child(7){width:11%!important}
.tk-page-purchase_history .table-wrap th:nth-child(8){width:22%!important}
.tk-page-purchase_history .table-wrap td{overflow-wrap:anywhere!important}
.tk-page-purchase_history .purchase-date-cell{white-space:nowrap!important}
.tk-page-purchase_history .purchase-date-cell small{display:block;margin-top:2px;color:#5f6f67;font-size:10px!important}
.tk-page-purchase_history .purchase-no-cell{font-size:11px!important;line-height:1.15!important}
.tk-page-purchase_history .num-cell{white-space:nowrap!important;font-size:11px!important}
.tk-page-purchase_history .purchase-action-cell{width:auto!important;white-space:normal!important}
.tk-page-purchase_history .purchase-action-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;width:100%!important;white-space:normal!important}
.tk-page-purchase_history .purchase-action-row .btn{width:100%!important;min-width:0!important;min-height:29px!important;padding:5px 4px!important;font-size:10px!important;line-height:1!important;border-radius:6px!important;white-space:nowrap!important}
@media(max-width:1050px){
  .tk-page-purchase_history .table-wrap{overflow-x:auto!important}
  .tk-page-purchase_history .table-wrap table{min-width:900px!important;table-layout:fixed!important}
}

/* v69.33 - laporan grafik, barang tidur, dan IA lokal */
.report-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}.report-chart-grid .card{min-width:0}.airkita-chart{display:block;max-width:100%;min-height:240px}.report-analysis-metrics .metric strong{font-size:22px}.ai-question-pills{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.ai-question-pills button{font-size:12px;padding:7px 10px;background:#f2f8f4;border-color:#acd0ba}.ai-local-badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#e9f7ef;color:#155b3d;font-size:12px;font-weight:800}.ai-answer{white-space:pre-wrap}.ai-source-note{margin-top:10px;padding:9px 11px;border:1px solid #d8e1dc;border-radius:8px;background:#f8faf9;font-size:12px;color:#526158}@media(max-width:900px){.report-chart-grid{grid-template-columns:1fr}.airkita-chart{min-height:220px}}

/* v69.50 keyboard-first POS/purchase/master pickers */
.search-suggestions button.keyboard-active{outline:2px solid #166534;outline-offset:-2px;background:#e7f5ec}
.shortcut-help span{padding:4px 7px;font-size:11px}
.quick-cash-grid button small{display:block;font-size:9px;font-weight:700;opacity:.75;margin-top:2px}
.master-picker{position:relative}
.master-picker .search-suggestions{position:absolute;left:0;right:0;top:100%;background:#fff;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.12);z-index:30;max-height:220px}
.master-picker .search-suggestions:empty{display:none}
.purchase-price-warning{display:block;margin-top:4px;font-size:11px;font-weight:700;color:#9a6700}
.purchase-price-warning.danger{color:#b91c1c}

/* v69.51 keyboard-first & lightweight search/scroll */
.keyboard-legend{display:flex!important;align-items:center;gap:3px!important;flex-wrap:wrap;margin:4px 0 6px!important;padding:3px 5px!important;border:1px solid #d8e4dc;border-radius:6px;background:#f8fbf9;line-height:1.05}
.keyboard-legend span{padding:2px 4px!important;border-radius:4px!important;font-size:8px!important;font-weight:600!important;background:#eef6f0!important;border:1px solid #cbded1!important;color:#284538!important;white-space:nowrap}
.keyboard-legend-purchase{margin-top:5px!important;margin-bottom:0!important}
.search-suggestions{scroll-behavior:auto!important;scrollbar-width:thin;overscroll-behavior:contain}
.search-suggestions button{transition:none!important;min-height:34px}
.search-suggestions button.keyboard-active,.search-suggestions button:focus-visible{outline:2px solid #0a5138!important;outline-offset:-2px!important;background:#0f6b49!important;color:#fff!important}
.search-suggestions button.keyboard-active span,.search-suggestions button.keyboard-active em,.search-suggestions button:focus-visible span{color:#fff!important}
.table-wrap{scroll-behavior:auto!important;scrollbar-width:thin}
.table-wrap:focus{outline:2px solid #1f7a55;outline-offset:-2px}
.purchase-cart-table input{min-width:105px}
.purchase-line-total,.purchase-unit-price{font-weight:700}
.purchase-price-warning{display:block;margin-top:3px;font-size:10px;line-height:1.2}
.purchase-price-warning.danger{color:#b42318;font-weight:800}
.tk-keyboard-row-active{background:#0f6b49!important;color:#fff!important}
.tk-keyboard-row-active td,.tk-keyboard-row-active strong,.tk-keyboard-row-active small{color:#fff!important}
.tk-search-focus{box-shadow:0 0 0 3px rgba(15,107,73,.18)!important;border-color:#0f6b49!important}
@media(max-width:1050px){.keyboard-legend{display:flex!important}.keyboard-legend span{font-size:8px!important}}

/* v69.52 - POS shortcut legend dibuat sangat kecil/plain + navigasi pencarian keyboard kontras */
.keyboard-legend-pos{
  display:block!important;
  margin:2px 0 4px!important;
  padding:0!important;
  line-height:1.25!important;
  font-size:6pt!important;
  color:#52615a!important;
  white-space:normal!important;
}
.keyboard-legend-pos span{
  display:inline!important;
  margin:0 5px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:6pt!important;
  font-weight:600!important;
  color:inherit!important;
}
.keyboard-legend-pos span:not(:last-child)::after{content:" · ";color:#9aa59f}
#posSuggestions button.keyboard-active{
  background:#0b5d3b!important;
  color:#fff!important;
  border-color:#0b5d3b!important;
  outline:none!important;
}
#posSuggestions button.keyboard-active strong,
#posSuggestions button.keyboard-active span,
#posSuggestions button.keyboard-active em{color:#fff!important}
#posSuggestions{scroll-behavior:auto!important}


/* v69.53 - final POS keyboard focus / plain 4pt legend */
.keyboard-legend-pos{font-size:6pt!important;line-height:1.15!important;color:#52615a!important;margin:1px 0 3px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-weight:600!important}
#posSuggestions button.keyboard-active{background:#0b5d3b!important;color:#fff!important;border-color:#0b5d3b!important;outline:2px solid #063f2a!important;outline-offset:-2px!important}
#posSuggestions button.keyboard-active strong,#posSuggestions button.keyboard-active span,#posSuggestions button.keyboard-active em{color:#fff!important}


/* v69.54 - legend 6pt tanpa background + pencarian master seragam */
.keyboard-legend-pos{font-size:6pt!important;background:transparent!important;border:0!important;box-shadow:none!important}
.keyboard-legend-pos span{font-size:6pt!important;background:transparent!important;border:0!important;box-shadow:none!important}
.live-master-search-form{position:relative;align-items:center;flex-wrap:wrap}
.live-master-search-form input[data-live-master-search]{min-width:280px;max-width:440px}
.live-master-suggestions{max-width:720px;max-height:310px;overflow:auto;margin:4px 0 8px;scroll-behavior:auto!important;overscroll-behavior:contain}
.live-master-suggestions:empty{display:none}
.live-master-suggestions button{display:flex!important;justify-content:space-between!important;gap:12px!important;width:100%!important;text-align:left!important;min-height:34px!important;transition:none!important}
.live-master-suggestions button span{color:#56645e;font-size:11px}
.live-master-suggestions button.keyboard-active{background:#0b5d3b!important;color:#fff!important;border-color:#0b5d3b!important;outline:2px solid #083f2a!important;outline-offset:-2px!important}
.live-master-suggestions button.keyboard-active strong,.live-master-suggestions button.keyboard-active span{color:#fff!important}


/* v69.55 - POS legend 10pt, 4 antrean, active-only contrast */
.keyboard-legend-pos{font-size:10pt!important;line-height:1.25!important;color:#43544b!important;background:transparent!important;border:0!important;box-shadow:none!important;margin:2px 0 5px!important;padding:0!important;font-weight:600!important}
.keyboard-legend-pos span{font-size:10pt!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.queue-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.queue-tab{background:transparent!important;border:1px solid #aebdb4!important;color:inherit!important}
.queue-tab small{color:#64706a!important}
.queue-tab.held:not(.active){background:transparent!important;border-color:#aebdb4!important}
.queue-tab.active{background:#0b5d3b!important;color:#fff!important;border-color:#0b5d3b!important;box-shadow:0 0 0 2px rgba(11,93,59,.18)!important}
.queue-tab.active small{color:#e5f4eb!important}
.product-master-suggestions button.keyboard-active{background:#0b5d3b!important;color:#fff!important;border-color:#0b5d3b!important;outline:2px solid #063f2a!important;outline-offset:-2px!important}
.product-master-suggestions button.keyboard-active strong,.product-master-suggestions button.keyboard-active span{color:#fff!important}
@media(max-width:1050px){.queue-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v69.56 - master picker exact filtering + scanner-ready barcode input */
.master-picker-suggestions:empty{display:none!important}
.master-picker-suggestions button.keyboard-active{background:#0b5d3b!important;color:#fff!important;border-color:#0b5d3b!important;outline:2px solid #063f2a!important;outline-offset:-2px!important}
.master-picker-suggestions button.keyboard-active strong{color:#fff!important}
[data-barcode-scan-input="1"]{letter-spacing:.02em}

/* v69.80 - Tahap 2 POS Operational Polish
   Fokus: keyboard/scanner first, tampilan kasir sederhana, dan kontrol yang mudah untuk pemula. */
.tk-page-pos .content{padding-top:10px!important}
.tk-page-pos .pos-status-bar{
  min-height:42px!important;
  padding:7px 10px!important;
  margin:0 0 6px!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
.tk-page-pos .pos-status-bar strong{font-size:13px!important;line-height:1.15!important}
.tk-page-pos .pos-status-bar small{font-size:10px!important;line-height:1.2!important}
.tk-page-pos .pos-status-bar .row{gap:6px!important;align-items:center!important}
.tk-page-pos .offline-queue-badge{padding:4px 7px!important;font-size:10px!important}
.tk-page-pos .pos-offline-maintenance{display:none!important}
.tk-page-pos .pos-essential-shortcuts{
  margin:0 0 5px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#5a6861!important;
}
.tk-page-pos .pos-essential-shortcuts span{
  border:0!important;
  background:transparent!important;
  padding:0!important;
  font-size:9px!important;
  font-weight:650!important;
}
.tk-page-pos .pos-essential-shortcuts span:not(:last-child)::after{content:" · ";color:#a1aaa5;margin-left:4px}
.tk-page-pos .pos-main-card{border-radius:10px!important;box-shadow:0 2px 12px rgba(0,0,0,.04)!important}
.tk-page-pos .pos-queue-bar{
  grid-template-columns:112px minmax(0,1fr) auto auto!important;
  gap:7px!important;
  padding-bottom:7px!important;
  margin-bottom:7px!important;
}
.tk-page-pos .pos-queue-bar>div:first-child strong{font-size:13px!important}
.tk-page-pos .pos-queue-bar>div:first-child small{font-size:9px!important;line-height:1.15!important}
.tk-page-pos .queue-tabs{gap:5px!important}
.tk-page-pos .queue-tab{min-height:42px!important;padding:6px 8px!important;border-radius:7px!important}
.tk-page-pos .queue-tab strong{font-size:11px!important;line-height:1.1!important}
.tk-page-pos .queue-tab small{font-size:9px!important;margin-top:2px!important}
.tk-page-pos #holdTransaction,.tk-page-pos #cancelTransaction{min-height:36px!important;padding:6px 9px!important;font-size:11px!important;white-space:nowrap!important}
.tk-page-pos .pos-scan-row{
  position:sticky!important;
  top:6px!important;
  z-index:24!important;
  background:#fff!important;
  border:1px solid #dbe6df!important;
  border-radius:10px!important;
  padding:8px!important;
  box-shadow:0 5px 14px rgba(19,72,49,.07)!important;
}
.tk-page-pos .pos-scan-row label{font-size:11px!important;font-weight:800!important;color:#334b3f!important}
.tk-page-pos #posSearch{
  min-height:44px!important;
  font-size:16px!important;
  font-weight:700!important;
  border:2px solid #93b5a4!important;
  border-radius:8px!important;
}
.tk-page-pos #posSearch:focus{border-color:#0b5d3b!important;box-shadow:0 0 0 3px rgba(11,93,59,.12)!important}
.tk-page-pos .pos-summary-mini span{min-height:44px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;background:#f7faf8!important;border:1px solid #dce7e1!important}
.tk-page-pos .pos-summary-mini span strong{font-size:16px!important}
.tk-page-pos #posTotal{font-size:20px!important;color:#0b5d3b!important}
.tk-page-pos #openPayment{min-height:44px!important;font-size:14px!important;font-weight:900!important}
.tk-page-pos #quickQty{min-height:44px!important}
.tk-page-pos #posSuggestions{position:relative!important;z-index:30!important;margin-top:5px!important;max-height:260px!important;overflow:auto!important}
.tk-page-pos #posSuggestions:empty{display:none!important}
.tk-page-pos #posSuggestions button{padding:7px 10px!important;min-height:40px!important}
.tk-page-pos #posSuggestions button strong{font-size:13px!important}
.tk-page-pos #posSuggestions button span{font-size:10px!important}
.tk-page-pos .pos-cart-scroll{margin-top:7px!important;border:1px solid #e0e8e3!important;border-radius:9px!important}
.tk-page-pos .pos-cart-scroll table{table-layout:fixed!important;width:100%!important;min-width:0!important}
.tk-page-pos .pos-cart-scroll th{position:sticky!important;top:0!important;z-index:3!important;background:#f3f7f5!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.03em!important;color:#52635a!important}
.tk-page-pos .pos-cart-scroll th:nth-child(1){width:auto!important}
.tk-page-pos .pos-cart-scroll th:nth-child(2){width:160px!important}
.tk-page-pos .pos-cart-scroll th:nth-child(3){width:125px!important}
.tk-page-pos .pos-cart-scroll th:nth-child(4){width:140px!important}
.tk-page-pos .pos-cart-scroll th:nth-child(5){width:72px!important}
.tk-page-pos .pos-cart-scroll td{vertical-align:middle!important}
.tk-page-pos .pos-cart-scroll td:nth-child(3),.tk-page-pos .pos-cart-scroll td:nth-child(4){white-space:nowrap!important;text-align:right!important}
.tk-page-pos .pos-qty-stepper{display:grid!important;grid-template-columns:32px minmax(50px,70px) 32px!important;gap:3px!important;align-items:center!important;justify-content:center!important}
.tk-page-pos .pos-qty-stepper .qty-step{min-width:32px!important;width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;font-size:18px!important;font-weight:900!important;line-height:1!important;border-radius:6px!important}
.tk-page-pos .pos-qty-stepper input{width:100%!important;min-width:0!important;height:32px!important;min-height:32px!important;padding:3px 4px!important;text-align:center!important;font-weight:800!important}
.tk-page-pos .pos-remove-item{min-height:30px!important;padding:4px 7px!important;font-size:10px!important}
.tk-page-pos .pos-empty-cart td{text-align:center!important;padding:54px 10px!important;color:#59675f!important}
.tk-page-pos .pos-empty-cart strong,.tk-page-pos .pos-empty-cart small{display:block!important}
.tk-page-pos .pos-empty-cart strong{font-size:17px!important;color:#29483a!important;margin-bottom:4px!important}
.tk-page-pos .pos-empty-cart small{font-size:11px!important}
.tk-page-pos .selected-cart-row{outline:2px solid rgba(11,93,59,.28)!important;background:#f0f8f4!important}

/* Pembayaran: tindakan utama selalu jelas tanpa membuat kasir membaca banyak keterangan. */
.tk-page-pos .payment-modal-box{overflow-x:hidden!important}
.tk-page-pos .payment-total{background:#f3f8f5!important;border:1px solid #d5e5dc!important}
.tk-page-pos .payment-total strong{color:#0b5d3b!important}
.tk-page-pos .payment-save{position:sticky!important;bottom:0!important;z-index:4!important;width:100%!important;font-weight:900!important;box-shadow:0 -5px 12px rgba(255,255,255,.9)!important}
.tk-page-pos .payment-save:focus{outline:3px solid rgba(11,93,59,.24)!important;outline-offset:2px!important}
.tk-page-pos .quick-cash-grid button{font-weight:850!important}

@media(max-width:1050px){
  .tk-page-pos .pos-queue-bar{grid-template-columns:1fr!important}
  .tk-page-pos .queue-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .tk-page-pos .pos-scan-row{position:relative!important;top:auto!important;grid-template-columns:1fr!important}
}
@media(max-width:700px){
  .tk-page-pos .content{padding-left:8px!important;padding-right:8px!important}
  .tk-page-pos .pos-essential-shortcuts{display:none!important}
  .tk-page-pos .pos-status-bar{align-items:center!important;flex-direction:row!important}
  .tk-page-pos .pos-status-bar small{display:none!important}
  .tk-page-pos .queue-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tk-page-pos .pos-cart-scroll{overflow-x:auto!important}
  .tk-page-pos .pos-cart-scroll table{min-width:690px!important}
  .tk-page-pos .pos-empty-cart td{padding:36px 8px!important}
}


/* v69.81 — Tahap 3 UI Cleanup / Stable Layout Layer
   Satu lapisan final untuk scroll, sidebar, form, tombol, tabel, dan modal.
   Tidak mengubah business logic. */
:root{
  --tk-shell-max:1600px;
  --tk-radius:9px;
  --tk-control-h:38px;
}

/* Shell: satu sumber kebenaran untuk lebar/scroll halaman. */
html{min-height:100%;overflow-y:scroll;overflow-x:hidden}
body{min-height:100%;overflow-x:hidden}
.layout{width:100%;min-height:100vh;align-items:stretch}
.main{width:100%;min-width:0;overflow:visible}
.content{width:100%;max-width:var(--tk-shell-max);min-width:0;margin:0;overflow:visible}

/* Sidebar: native scrolling; tidak memakai wheel hijack. */
.side{
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable!important;
}
.nav,.nav details,.nav summary,.nav a{max-width:100%}
.nav summary,.nav a{overflow-wrap:anywhere}

/* Kontrol umum: ukuran konsisten dan nyaman untuk pemula. */
input,select,textarea,.btn,button{
  min-height:var(--tk-control-h);
}
input,select,textarea{
  max-width:100%;
}
textarea{min-height:88px;resize:vertical}
.btn,button{
  line-height:1.2;
  vertical-align:middle;
}
.row{min-width:0}
.form-grid>*{min-width:0}

/* Tabel: desktop tidak dipaksa scroll horizontal kecuali tabel memang membutuhkan. */
.table-wrap{
  width:100%!important;
  max-width:100%!important;
  overscroll-behavior:auto!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.table-wrap table{margin:0}
.table-wrap th,.table-wrap td{
  overflow-wrap:break-word;
  word-break:normal;
}
.table-wrap button,.table-wrap .btn{
  max-width:100%;
}

/* Modal: selalu dapat digulir tanpa mengunci layar. */
.modal{
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
.modal.open{align-items:flex-start!important}
.modal-box{
  max-height:calc(100dvh - 32px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  margin:auto!important;
}

/* Focus terlihat jelas tetapi sederhana. */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.table-wrap:focus-visible{
  outline:2px solid #1f7a55!important;
  outline-offset:2px!important;
}

/* Kurangi animasi yang membuat sistem terasa berat. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Mobile: halaman tetap scroll normal; sidebar saja yang menjadi drawer. */
@media(max-width:900px){
  html,body{overflow-x:hidden}
  .content{max-width:none!important}
  .side{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:contain!important;
  }
  .table-wrap{
    overflow-x:auto!important;
    overflow-y:visible!important;
  }
  .table-wrap table{
    min-width:680px!important;
    table-layout:auto!important;
  }
  .modal{padding:8px!important}
  .modal-box{
    width:min(100%,640px)!important;
    max-height:calc(100dvh - 16px)!important;
  }
}

/* POS memiliki aturan khusus Tahap 2; jangan ditimpa oleh tabel mobile umum. */
@media(max-width:900px){
  .tk-page-pos .pos-cart-scroll table{
    table-layout:fixed!important;
  }
}

/* v70.12 - CO mobile workflow: scan -> keputusan -> simpan -> scan berikutnya */
.co-mobile-operation{display:none}
.co-mobile-status{display:none}
.co-decision{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.co-decision button{min-height:48px;font-size:15px;font-weight:800}
.co-match{background:#0f7a55!important;color:#fff!important;border-color:#0f7a55!important}
.co-different{background:#fff7ed!important;color:#9a3412!important;border-color:#fdba74!important}
.co-mismatch-panel{margin-top:12px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fafafa}
.co-mismatch-panel input{min-height:42px}
.opname-live-product{margin-top:12px;padding:12px;border:1px solid #d7e2db;border-radius:10px;background:#f8fbf9}
.co-product-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.co-product-head>strong{font-size:17px;line-height:1.25}
.co-product-head>span{font-size:12px;color:#64748b;white-space:nowrap}
.opname-live-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.opname-live-metrics>span{display:block;padding:8px;border:1px solid #e2e8f0;border-radius:8px;font-size:11px;color:#64748b;background:#fff}
.opname-live-metrics>span strong{display:block;margin-top:2px;font-size:18px;color:#111}
.co-already{margin-top:10px!important;margin-bottom:0!important}

@media(max-width:900px) and (pointer:coarse){
  body.co-mobile-workflow[data-user-role="employee"],body.co-mobile-workflow[data-user-role="cashier"]{background:#f4f7f5!important}
  body.co-mobile-workflow[data-user-role="employee"] .side,
  body.co-mobile-workflow[data-user-role="cashier"] .side,
  body.co-mobile-workflow[data-user-role="employee"] .top,
  body.co-mobile-workflow[data-user-role="cashier"] .top{display:none!important}
  body.co-mobile-workflow[data-user-role="employee"] .main,
  body.co-mobile-workflow[data-user-role="cashier"] .main{min-height:100dvh!important;background:#f4f7f5!important}
  body.co-mobile-workflow[data-user-role="employee"] .content,
  body.co-mobile-workflow[data-user-role="cashier"] .content{padding:8px!important;max-width:none!important}
  body.co-mobile-workflow[data-user-role="employee"] .content>*:not(.opname-scan-card),
  body.co-mobile-workflow[data-user-role="cashier"] .content>*:not(.opname-scan-card){display:none!important}
  body.co-mobile-workflow .opname-scan-card{display:flex!important;flex-direction:column!important;margin:0!important;padding:10px!important;border:0!important;border-radius:12px!important;min-height:calc(100dvh - 16px)!important;overflow:visible!important;box-shadow:none!important}
  body.co-mobile-workflow .opname-scan-card>h3{display:none!important}
  body.co-mobile-workflow .co-help-text{display:none!important}
  body.co-mobile-workflow .co-mobile-operation{display:flex!important;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 7px;border-bottom:1px solid #e5e7eb;font-size:11px;color:#64748b;order:0}
  body.co-mobile-workflow .co-mobile-operation strong{font-size:13px;color:#111;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70vw}
  body.co-mobile-workflow .co-mobile-status{display:block!important;order:1;margin:7px 0;padding:7px 9px;border-radius:8px;font-size:12px;font-weight:700;background:#eef2f7;color:#334155}
  body.co-mobile-workflow .co-mobile-status.ok{background:#dcfce7;color:#166534}
  body.co-mobile-workflow .co-mobile-status.warn{background:#fff7ed;color:#9a3412}
  body.co-mobile-workflow .co-mobile-status.error{background:#fee2e2;color:#991b1b}
  body.co-mobile-workflow .co-mobile-status.saving{background:#eff6ff;color:#1d4ed8}
  body.co-mobile-workflow #barcodeCameraPanel{order:2;margin:0 0 8px!important;padding:6px!important;border-radius:10px!important;background:#07130f!important}
  body.co-mobile-workflow #barcodeCameraPanel video{width:100%!important;max-width:none!important;max-height:46dvh!important;aspect-ratio:4/3!important;object-fit:cover!important;margin:0!important;border-radius:8px!important}
  body.co-mobile-workflow #barcodeCameraPanel .row{margin-top:5px!important;gap:6px!important;flex-wrap:nowrap!important}
  body.co-mobile-workflow #barcodeCameraPanel #closeBarcodeCamera{padding:6px 9px!important;min-height:32px!important;font-size:11px!important;white-space:nowrap!important}
  body.co-mobile-workflow #barcodeCameraPanel #barcodeCameraStatus{font-size:10px!important;line-height:1.2!important}
  body.co-mobile-workflow #opnameScanForm{order:3;margin:0!important}
  body.co-mobile-workflow .opname-scan-grid{display:block!important;margin:0!important}
  body.co-mobile-workflow .opname-scan-grid label{display:none!important}
  body.co-mobile-workflow #opnameBarcode{min-height:38px!important;font-size:14px!important;padding:7px 9px!important;margin:0!important}
  body.co-mobile-workflow .opname-scan-actions{margin-top:5px!important;display:flex!important}
  body.co-mobile-workflow #openBarcodeCamera{width:auto!important;min-height:34px!important;padding:6px 10px!important;font-size:11px!important;margin-left:auto!important}
  body.co-mobile-workflow .opname-product-results{max-height:120px!important;margin-top:4px!important}
  body.co-mobile-workflow .opname-product-results button{padding:7px 8px!important;font-size:12px!important;min-height:36px!important}
  body.co-mobile-workflow .opname-live-product{margin-top:8px!important;padding:9px!important;border-radius:9px!important}
  body.co-mobile-workflow .co-product-head{display:block!important}
  body.co-mobile-workflow .co-product-head>strong{display:block;font-size:16px!important;line-height:1.2!important;margin-bottom:2px}
  body.co-mobile-workflow .co-product-head>span{font-size:10px!important}
  body.co-mobile-workflow .opname-live-metrics{grid-template-columns:1fr!important;margin-top:7px!important;gap:0!important}
  body.co-mobile-workflow .opname-live-metrics>span{display:none!important}
  body.co-mobile-workflow .opname-live-metrics>.co-stock-metric{display:flex!important;align-items:center;justify-content:space-between;padding:7px 9px!important;font-size:12px!important}
  body.co-mobile-workflow .opname-live-metrics>.co-stock-metric strong{font-size:24px!important;margin:0!important}
  body.co-mobile-workflow .co-already{padding:8px!important;font-size:11px!important;line-height:1.3!important}
  body.co-mobile-workflow .co-already button{min-height:34px!important;padding:6px 9px!important;font-size:11px!important;margin-top:5px!important}
  body.co-mobile-workflow .co-decision{grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:8px!important}
  body.co-mobile-workflow .co-decision button{min-height:44px!important;padding:7px!important;font-size:13px!important;border-radius:9px!important}
  body.co-mobile-workflow .co-mismatch-panel{margin-top:8px!important;padding:9px!important}
  body.co-mobile-workflow .co-mismatch-panel label{font-size:11px!important;margin:3px 0!important}
  body.co-mobile-workflow .co-mismatch-panel input{min-height:39px!important;font-size:15px!important;padding:7px 9px!important}
  body.co-mobile-workflow .co-mismatch-panel #coReasonInput{font-size:12px!important}
  body.co-mobile-workflow .co-mismatch-panel button{width:100%!important;min-height:42px!important;margin-top:7px!important;font-size:13px!important}
}

/* v70.65 — laporan CO padat + fitur pembayaran opsional */
.co-compact-report{padding:11px!important}.co-report-head{gap:5px!important;margin-bottom:6px}.co-report-head h3{margin:0!important;font-size:16px}.co-report-head .btn{padding:5px 8px!important;font-size:11px!important}.co-report-search{margin:5px 0 7px!important}.co-report-search input,.co-report-search button{min-height:32px!important;padding:5px 8px!important}.co-report-table{min-width:980px!important}.co-report-table th,.co-report-table td{padding:5px 7px!important;font-size:11.5px!important;line-height:1.18!important;vertical-align:middle!important}.co-report-table th{white-space:nowrap}.co-report-table td:nth-child(1),.co-report-table td:nth-child(2),.co-report-table td:nth-child(4),.co-report-table td:nth-child(5),.co-report-table td:nth-child(6){white-space:nowrap}.co-journal-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;border:1px solid #d8dee4;background:#f8fafc;border-radius:8px;padding:7px 9px;margin:7px 0}.co-journal-toolbar>div{margin-right:auto;min-width:260px}.co-journal-toolbar strong,.co-journal-toolbar small{display:block}.co-journal-toolbar small{font-size:11px;color:#555;margin-top:2px}.co-journal-toolbar form{margin:0}.co-journal-toolbar button{padding:6px 9px!important;font-size:11px!important}.co-journal-status{display:inline-block;font-weight:700;font-size:10.5px;padding:2px 6px;border-radius:999px;background:#eef2f7;white-space:nowrap}.co-journal-status.posted{background:#dcfce7;color:#166534}.co-journal-status.pending{background:#fef3c7;color:#92400e}.co-journal-status.matched{background:#e0f2fe;color:#075985}.co-journal-pick{display:inline-flex!important;align-items:center;gap:3px;margin:0 0 0 5px!important;font-size:10px!important;font-weight:600!important}.co-journal-pick input{width:auto!important;min-width:0!important;margin:0!important}.co-recount-mini{padding:2px 5px!important;font-size:9.5px!important;margin-left:4px!important;border-color:#bbb!important}.pos-option-card{border:1px solid #ddd;border-radius:8px;padding:8px 9px;margin:8px 0;background:#fafafa}.pos-option-card .row{gap:7px}.pos-option-card label{margin:0}.pos-option-card input[type=number]{width:86px;min-height:34px}.pos-fee-summary{display:grid;gap:3px;margin:7px 0;font-size:12px}.pos-fee-summary>div{display:flex;justify-content:space-between;gap:12px}.pos-fee-summary strong{white-space:nowrap}

/* ======================================================================
   v71 — Visual parity with AIRKITA PUSAT
   UI ONLY. Tidak mengubah alur transaksi, database, akuntansi, WA, API,
   stok, hak akses, ataupun business logic.
   ====================================================================== */
:root{
  --side:252px!important;
  --brand:#0f766e!important;
  --brand2:#0b5f59!important;
  --bg:#f2f6f5!important;
  --card:#ffffff!important;
  --text:#182129!important;
  --muted:#6b7882!important;
  --line:#dfe8e6!important;
  --danger:#b42318!important;
  --tk-shell-max:1540px!important;
  --tk-radius:12px!important;
  --tk-control-h:38px!important;
}
html{background:#f2f6f5!important}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  background:linear-gradient(180deg,#f7faf9 0,#f1f5f4 100%)!important;
  color:var(--text)!important;
  font-size:14px!important;
  line-height:1.5!important;
}

/* Kokoh seperti dashboard Pusat: sidebar fixed visual, tetap native scroll. */
.layout{grid-template-columns:var(--side) minmax(0,1fr)!important;background:transparent!important}
.side{
  position:sticky!important;top:0!important;height:100vh!important;
  padding:22px 16px 18px!important;
  background:linear-gradient(180deg,#0c5f59 0%,#0f766e 48%,#0b5f59 100%)!important;
  color:#fff!important;border:0!important;
  box-shadow:12px 0 32px rgba(12,70,66,.08)!important;
}
.brand{
  display:flex!important;align-items:center!important;gap:12px!important;
  min-height:50px!important;margin:0 0 0!important;padding:4px 8px 2px!important;
  font-size:17px!important;line-height:1.15!important;font-weight:900!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;color:#fff!important;
}
.brand::before{
  content:none!important;display:none!important;width:0!important;height:0!important;
  border-radius:13px;background:linear-gradient(145deg,#fff,#d8f5ef);
  color:#0f766e;font-size:22px;font-weight:900;letter-spacing:0;
  box-shadow:0 8px 20px rgba(0,0,0,.13);
}
.side>.muted,.tk-store-name{
  margin:-16px 8px 17px 62px!important;color:rgba(255,255,255,.76)!important;
  font-size:10px!important;letter-spacing:.08em!important;line-height:1.3!important;
}
.nav{gap:2px!important;padding-top:2px!important}
.nav details{
  margin:5px 0!important;padding:5px 0 0!important;
  border-top:1px solid rgba(255,255,255,.11)!important;
}
.nav details:first-child{border-top:0!important}
.nav summary{
  color:rgba(255,255,255,.68)!important;font-size:10.5px!important;
  text-transform:uppercase!important;letter-spacing:.13em!important;
  font-weight:850!important;padding:8px 12px 6px!important;border-radius:9px!important;
}
.nav details[open]>summary{color:rgba(255,255,255,.78)!important}
.nav a,.nav details>a{
  display:flex!important;align-items:center!important;min-height:38px!important;
  margin:2px 0!important;padding:9px 12px!important;border-radius:11px!important;
  color:rgba(255,255,255,.88)!important;font-size:13.5px!important;
  line-height:1.25!important;font-weight:650!important;border:0!important;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease!important;
}
.nav details>a{padding-left:12px!important}
.nav a:hover,.nav details>a:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
.nav a.active,.nav details>a.active{
  background:#fff!important;color:#0b5f59!important;
  box-shadow:0 8px 22px rgba(1,48,45,.18)!important;font-weight:800!important;
}

/* Header sama rasa dengan Pusat. */
.main{background:transparent!important}
.top{
  min-height:96px!important;padding:18px 30px!important;gap:24px!important;
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--line)!important;
  backdrop-filter:blur(12px)!important;
}
.tk-top-title{position:relative!important;padding-top:17px!important}
.tk-top-title::before{
  content:"AIRKITA AIRKITA";position:absolute;left:0;top:0;
  color:#0f766e;font-size:10px;font-weight:850;letter-spacing:.14em;line-height:1;
}
.tk-top-title strong{
  font-size:23px!important;line-height:1.2!important;letter-spacing:-.025em!important;color:#182129!important;
}
.tk-top-subtitle{font-size:12.5px!important;color:#6b7882!important;margin-top:2px!important}
.tk-top-actions{gap:10px!important;flex-wrap:nowrap!important}
.tk-user-label{
  display:inline-flex!important;align-items:center!important;min-height:38px!important;
  padding:0 5px!important;font-size:12px!important;font-weight:750!important;color:#38464e!important;
}
.tk-account-btn{
  min-height:38px!important;padding:8px 11px!important;border-radius:10px!important;
  border:1px solid #dfe8e6!important;background:#fff!important;color:#4e5b64!important;
  font-size:12px!important;font-weight:750!important;box-shadow:none!important;
}
.tk-account-btn:hover{border-color:#9fc9c4!important;background:#f5fbfa!important}
.tk-top-logout-form .tk-logout-btn{
  min-height:38px!important;width:auto!important;padding:8px 11px!important;border-radius:10px!important;
  border:1px solid #efc5c1!important;background:#fff!important;color:#9f2d25!important;
  font-size:12px!important;font-weight:800!important;
}
.tk-top-logout-form .tk-logout-btn:hover{background:#fff7f7!important;border-color:#efb4b4!important;color:#b42318!important}

/* Isi, kartu, form, tabel mengikuti bahasa visual Pusat. */
.content{max-width:1540px!important;margin:0 auto!important;padding:24px 30px 18px!important}
.card{
  background:#fff!important;border:1px solid #dfe8e6!important;border-radius:16px!important;
  padding:18px!important;margin-bottom:16px!important;
  box-shadow:0 8px 30px rgba(15,56,52,.06)!important;
}
.card h1,.card h2,.card h3,h1,h2,h3{letter-spacing:-.015em!important;color:#182129!important}
h1{font-size:24px!important}h2{font-size:19px!important}h3{font-size:17px!important}
.grid{gap:14px!important;margin-bottom:16px!important}
.metric{position:relative!important;overflow:hidden!important;min-height:112px!important;padding:17px 18px!important}
.metric::before{
  content:"";position:absolute;right:-28px;top:-32px;width:92px;height:92px;border-radius:50%;
  background:#e8f5f3;pointer-events:none;
}
.metric>*{position:relative!important}
.metric strong{font-size:24px!important;line-height:1.2!important;color:#182129!important;letter-spacing:-.03em!important}
.muted{color:#6b7882!important;font-size:12.5px!important}

.btn,button{
  border:1px solid #d2ddda!important;background:#fff!important;color:#334149!important;
  min-height:38px!important;padding:8px 11px!important;border-radius:10px!important;
  font-size:12.5px!important;font-weight:700!important;box-shadow:none!important;
}
.btn:hover,button:hover{border-color:#9fc9c4!important;background:#f5fbfa!important}
.btn.primary,button.primary{
  background:#0f766e!important;border-color:#0f766e!important;color:#fff!important;
  box-shadow:0 4px 12px rgba(15,118,110,.14)!important;
}
.btn.primary:hover,button.primary:hover{background:#0b5f59!important;border-color:#0b5f59!important}
.btn.danger,button.danger{color:#b42318!important;border-color:#efc5c1!important;background:#fff!important}

label{font-size:11.5px!important;font-weight:750!important;color:#56646d!important;margin:0 0 5px!important}
input,select,textarea{
  min-height:40px!important;padding:9px 10px!important;border:1px solid #cdd9d6!important;
  border-radius:10px!important;background:#fff!important;color:#213038!important;font-size:14px!important;
  outline:none!important;box-shadow:none!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#5eb1a9!important;box-shadow:0 0 0 3px rgba(15,118,110,.09)!important;
}
textarea{min-height:92px!important}
.form-grid{gap:12px!important}
.flash{padding:12px 14px!important;border-radius:12px!important;background:#edf7f5!important;border:1px solid #d7eee9!important;font-size:13px!important}
.flash.err{background:#fff2f1!important;border-color:#ffd1cc!important;color:#b42318!important}

.table-wrap{border:1px solid #e4ebe9!important;border-radius:12px!important;background:#fff!important}
.table-wrap table{background:#fff!important;font-size:12.5px!important}
th,td{padding:10px 11px!important;border-bottom:1px solid #e9efed!important;vertical-align:middle!important}
th{
  background:#f6f9f8!important;color:#536169!important;font-size:11px!important;
  text-transform:uppercase!important;letter-spacing:.035em!important;font-weight:800!important;
}
tbody tr:hover td{background:#fbfdfc!important}
.total{color:#0b5f59!important;letter-spacing:-.03em!important}
.product-list{border-color:#e4ebe9!important;border-radius:12px!important}
.product-item:hover,.product-item.active{background:#f1f8f6!important}
.modal-box{border:1px solid #dfe8e6!important;border-radius:16px!important;box-shadow:0 24px 70px rgba(5,63,59,.22)!important}

/* Jangan mengubah kepadatan POS/CO khusus; hanya samakan warna shell-nya. */
.tk-page-pos .card,.co-mobile-workflow .card{box-shadow:0 5px 18px rgba(15,56,52,.05)!important}
.tk-page-pos .payment-total{background:#f3f8f7!important;border-color:#d7e8e4!important}
.tk-page-pos .payment-total strong{color:#0b5f59!important}

@media(min-width:901px){
  body{font-size:14px!important}
  .side{padding:22px 16px 18px!important}
  .content{padding:24px 30px 18px!important}
  .card{padding:18px!important}
  input,select,textarea{font-size:14px!important;min-height:40px!important;padding:9px 10px!important}
  .btn,button{font-size:12.5px!important;min-height:38px!important;padding:8px 11px!important}
  th{font-size:11px!important}td{font-size:12.5px!important;line-height:1.4!important}
  th,td{padding:10px 11px!important}
}

@media(max-width:1050px) and (min-width:901px){
  :root{--side:218px!important}
  .top{padding:16px 20px!important}
  .content{padding:20px!important}
  .brand{font-size:15px!important}.side>.muted,.tk-store-name{margin-left:62px!important}
  .nav a,.nav details>a{font-size:12.5px!important}
}

@media(max-width:900px){
  .layout{display:block!important}
  .side{
    position:fixed!important;inset:0 auto 0 0!important;width:min(84vw,300px)!important;height:100dvh!important;
    padding:18px 14px!important;transform:translateX(-105%);box-shadow:14px 0 40px rgba(0,0,0,.25)!important;
  }
  body.tk-menu-open .side{transform:translateX(0)}
  .top{position:sticky!important;top:0!important;min-height:70px!important;padding:11px 12px!important;gap:8px!important}
  .tk-top-title{padding-top:13px!important;min-width:0!important}
  .tk-top-title::before{font-size:8px!important}
  .tk-top-title strong{font-size:18px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .tk-top-subtitle{display:none!important}
  .tk-user-label{display:none!important}
  .content{padding:12px!important;max-width:none!important}
  .card{padding:14px!important;border-radius:13px!important;margin-bottom:12px!important}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .metric{min-height:100px!important;padding:14px!important}
  .metric strong{font-size:19px!important}
}
@media(max-width:480px){
  .content{padding:9px!important}
  .top{padding:9px!important}
  .tk-account-btn{display:none!important}
  .grid{grid-template-columns:1fr 1fr!important}
  .metric strong{font-size:17px!important}
}

@media print{
  .side,.top,.tk-mobile-menu{display:none!important}
  body{background:#fff!important}
  .layout{display:block!important}
  .content{padding:0!important;max-width:none!important}
  .card{box-shadow:none!important}
}

/* v72 — Sidebar lebih rapi: grup menu accordion, padat, stabil, tanpa mengubah fungsi. */
@media (min-width:901px){
  .side{
    padding:16px 14px 14px!important;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.28) transparent;
  }
  .side::-webkit-scrollbar{width:6px}
  .side::-webkit-scrollbar-track{background:transparent}
  .side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:999px}
  .brand{margin:2px 6px 1px!important;font-size:25px!important;line-height:1.05!important}
  .side>.muted,.tk-store-name{margin:0 6px 12px!important;font-size:12px!important;line-height:1.25!important}
  .nav{gap:3px!important;padding-bottom:18px!important}
  .nav> a{padding:10px 12px!important;margin:2px 0!important;border-radius:10px!important;font-size:14px!important}
  .nav details{
    margin:2px 0!important;
    padding:0!important;
    border-top:0!important;
    border-radius:11px!important;
    overflow:hidden!important;
    background:rgba(255,255,255,.025)!important;
  }
  .nav summary{
    position:relative!important;
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    padding:10px 34px 10px 12px!important;
    margin:0!important;
    border-radius:10px!important;
    font-size:14px!important;
    line-height:1.2!important;
    font-weight:800!important;
    color:#f1f8f5!important;
    text-transform:none!important;
    letter-spacing:0!important;
    user-select:none!important;
  }
  .nav summary:hover{background:rgba(255,255,255,.08)!important}
  .nav summary::after{
    content:'›';
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    font-size:22px;
    line-height:1;
    color:#bcd6cc;
    transition:transform .16s ease;
  }
  .nav details[open]>summary{background:rgba(255,255,255,.08)!important;color:#fff!important}
  .nav details[open]>summary::after{transform:translateY(-50%) rotate(90deg)}
  .nav details a{
    padding:8px 12px 8px 18px!important;
    margin:2px 5px!important;
    border-radius:9px!important;
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:650!important;
  }
  .nav details a:last-child{margin-bottom:7px!important}
  .nav a.active{
    background:#fff!important;
    color:#0f6552!important;
    box-shadow:0 2px 9px rgba(0,0,0,.08)!important;
  }
}

@media (max-width:900px){
  .side .nav{display:block!important;overflow:visible!important;padding-bottom:24px!important}
  .side .nav details{margin:3px 0!important;padding:0!important;border-top:0!important;border-radius:10px!important;overflow:hidden!important}
  .side .nav summary{position:relative!important;padding:11px 34px 11px 12px!important;font-size:14px!important}
  .side .nav summary::after{content:'›';position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:22px;color:#bcd6cc}
  .side .nav details[open]>summary::after{transform:translateY(-50%) rotate(90deg)}
  .side .nav details a{white-space:normal!important;padding:9px 12px 9px 18px!important;margin:2px 5px!important;font-size:13px!important}
}

/* v73 — FIX FINAL desktop shell: sidebar dan konten harus sejajar dari atas.
   Menimpa aturan legacy v69.25 yang pernah mengubah .layout menjadi block. */
@media (min-width:901px){
  .layout{
    display:grid!important;
    grid-template-columns:var(--side) minmax(0,1fr)!important;
    align-items:start!important;
    width:100%!important;
    min-height:100vh!important;
  }
  .side{
    grid-column:1!important;
    grid-row:1!important;
    position:sticky!important;
    top:0!important;
    width:auto!important;
    height:100vh!important;
    min-height:100vh!important;
    max-height:100vh!important;
    margin:0!important;
    align-self:start!important;
  }
  .main{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    margin-left:0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:100vh!important;
    align-self:start!important;
  }
  .top{
    margin:0!important;
    top:0!important;
    transform:none!important;
  }
  .content{
    margin:0 auto!important;
  }
}