:root{
  --banana:#f6c900;
  --banana-2:#ffd93d;
  --banana-soft:#fff7c2;
  --banana-pale:#fffbe8;
  --leaf:#49751f;
  --leaf-dark:#2f5b17;
  --ink:#3b3213;
  --muted:#746b48;
  --line:#eadf9b;
  --danger:#c62828;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,#fff8c9 0,#fffdf2 42%,#fff 100%);color:var(--ink);min-height:100vh}
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,#f4bf00 0%,#ffd83d 52%,#ffea72 100%);color:#3d3210;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 18px rgba(107,86,0,.18);border-bottom:1px solid rgba(105,83,0,.16)}
.brand{display:flex;align-items:center;gap:10px}.brand-banana{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#fff7b0;border:1px solid rgba(88,70,0,.12);font-size:25px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.topbar strong{font-size:21px;letter-spacing:.2px}.topbar small{display:block;opacity:.75;margin-top:2px}
.topbar nav{display:flex;gap:7px;flex-wrap:wrap}.topbar a{color:#41350e;text-decoration:none;padding:8px 10px;border-radius:9px;font-weight:700}.topbar a:hover{background:rgba(255,255,255,.42)}
.container{max-width:1280px;margin:24px auto;padding:0 18px}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{background:rgba(255,255,255,.95);border-radius:18px;padding:18px;box-shadow:0 6px 22px rgba(104,84,0,.08);border:1px solid #f0e5a8}.card h2,.card h3{margin-top:0}.stat{font-size:28px;font-weight:900;margin-top:6px;color:#52420a}.muted{color:var(--muted)}
.btn{border:0;border-radius:11px;padding:10px 14px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block;transition:.15s transform,.15s filter}.btn:hover{filter:brightness(.97);transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,#e8b800,#ffd536);color:#3e3100;box-shadow:0 4px 12px rgba(186,144,0,.18)}.btn-success{background:var(--leaf);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-warning{background:#ffcb21;color:#352900}.btn-secondary{background:#fff7c7;color:#5a4700;border:1px solid #e5d46e}.btn-sm{padding:7px 9px;font-size:12px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-group{margin-bottom:14px}.form-group label{display:block;font-weight:800;margin-bottom:6px}.form-control,select,textarea,input[type=number],input[type=text],input[type=password],input[type=date]{width:100%;padding:11px 12px;border:1px solid #dccd72;border-radius:11px;background:#fffef7;color:#3e3515;font-size:14px;outline:none}.form-control:focus,select:focus,textarea:focus,input:focus{border-color:#d2a900;box-shadow:0 0 0 3px rgba(246,201,0,.16)}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:11px 10px;border-bottom:1px solid #f0e9bb;text-align:left;vertical-align:middle}.table th{background:#fff9d3;font-size:13px;white-space:nowrap;color:#5b4908}
.badge{display:inline-block;padding:5px 8px;border-radius:999px;font-size:12px;font-weight:800}.badge-blue{background:#fff1a8;color:#6c5200}.badge-green{background:#e8f3dc;color:#315d18}.badge-orange{background:#fff1b8;color:#815b00}.badge-red{background:#fdeaea;color:#a41616}
.alert{padding:12px 14px;border-radius:11px;margin-bottom:16px}.alert.success{background:#e8f5dd;color:#315f1a}.alert.warning{background:#fff1bd;color:#735200}.alert.danger{background:#fde9e9;color:#9b1c1c}.alert.info{background:#fff8d6;color:#6e5500;border:1px solid #ecda7e}
.page-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}.page-head h1{font-size:24px;margin:0;color:#493b09}.product-row{display:grid;grid-template-columns:1.8fr .7fr .8fr auto;gap:8px;align-items:end;margin-bottom:8px}.total-box{font-size:26px;font-weight:900;text-align:right;margin:12px 0;color:#3f5d16}
.modal{position:fixed;inset:0;background:rgba(55,46,8,.58);z-index:1000;display:none;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}.modal-box{background:#fffef7;border-radius:20px;width:min(1100px,100%);max-height:90vh;overflow:auto;box-shadow:0 25px 70px rgba(54,44,0,.32);border:1px solid #eadb79}.modal-head{position:sticky;top:0;background:#fff8c7;padding:16px 18px;border-bottom:1px solid #e6d77c;display:flex;justify-content:space-between;align-items:center;z-index:2}.modal-body{padding:18px}.queue{font-size:24px;font-weight:900;color:#735900}.toast{position:fixed;right:20px;bottom:20px;background:#493b09;color:#fff9c5;padding:12px 16px;border-radius:11px;display:none;z-index:2000}.toast.show{display:block}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 20%,#fff4a3 0 13%,transparent 14%),linear-gradient(135deg,#f1bd00,#ffe25e 58%,#fff19a)}.login-card{width:min(430px,100%);background:#fffef7;border-radius:22px;padding:28px;box-shadow:0 24px 70px rgba(84,65,0,.26);border:1px solid rgba(104,83,0,.16)}.login-card h1{margin-top:0}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}.login-banana{font-size:42px}.login-brand h1{margin:0;color:#493b09}
.stock-single{max-width:520px;margin:8px auto 0;padding:20px;background:linear-gradient(180deg,#fff9d0,#fffef7);border:1px solid #eadb79;border-radius:18px}.stock-single .stock-icon{font-size:38px;margin-bottom:8px}
.right{text-align:right}.mb-0{margin-bottom:0}.mt-2{margin-top:12px}.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){.grid-5,.grid-3,.grid-2,.form-row{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start;flex-direction:column}.product-row{grid-template-columns:1fr 90px}.product-row>*:nth-child(3),.product-row>*:nth-child(4){grid-column:auto}}
@media(max-width:600px){.grid-5,.grid-3,.grid-2,.form-row{grid-template-columns:1fr}.container{padding:0 10px}.topbar{padding:12px}.topbar nav{font-size:13px}.product-row{grid-template-columns:1fr 70px}.card{padding:14px}.modal{padding:6px}.modal-box{max-height:96vh}.brand-banana{width:38px;height:38px}}

/* ===== V3: Bootstrap + pesanan aktif + rekap tabel ===== */
.form-label{color:#493b09}.form-select{border:1px solid #dccd72;border-radius:11px;background-color:#fffef7;color:#3e3515;padding:.68rem 2.25rem .68rem .8rem}.form-select:focus{border-color:#d2a900;box-shadow:0 0 0 .2rem rgba(246,201,0,.16)}
.order-card{padding:22px!important;border-color:#e9d779!important}.order-title{font-size:18px;font-weight:800;color:#3f330b}.order-status-badge{font-size:12px;padding:8px 11px}.order-total-label{font-size:12px;color:var(--muted);font-weight:700}.order-total{font-size:18px;font-weight:900;color:#342a08;white-space:nowrap}.order-help{font-size:12px;color:#746b48;background:#fff9d8;border:1px solid #eee0a0;border-radius:9px;padding:8px 10px}.update-order-btn{min-height:46px}.toast.toast-danger{background:#9b1c1c;color:#fff}
.report-card{padding:20px}.report-table{border-color:#e7d987!important}.report-table thead th{background:#f6c900!important;color:#3d3105!important;border-color:#d6b900!important;font-weight:900;padding:13px 12px}.report-table tbody td{padding:13px 12px;border-color:#eee4ad}.report-table.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:#fffdf1;--bs-table-striped-bg:#fffdf1;color:inherit}.report-table.table-hover>tbody>tr:hover>*{--bs-table-accent-bg:#fff6c0;--bs-table-hover-bg:#fff6c0;color:inherit}.report-total-row>*{background:#4f711e!important;color:#fff!important;border-color:#3e5d15!important;font-size:15px;padding:14px 12px!important}.table-responsive{border-radius:12px;overflow:hidden;border:1px solid #e7d987}
@media(max-width:767.98px){.order-card{padding:16px!important}.order-total{font-size:20px}.report-table{min-width:760px}}

/* ===== V4: status pesanan eksplisit + transaksi seluruh cabang admin ===== */
.order-status-options{gap:0}.order-status-options .status-choice{border:1px solid #d9c55c!important;background:#fffdf0!important;color:#5a4700!important;border-radius:0!important;min-height:48px;font-weight:800}.order-status-options .status-choice:first-child{border-radius:11px 0 0 11px!important}.order-status-options .status-choice:last-child{border-radius:0 11px 11px 0!important}.order-status-options .status-choice.active[data-status="QUEUED"]{background:#f6c900!important;color:#3d3105!important;border-color:#d7ae00!important;box-shadow:inset 0 0 0 2px rgba(85,67,0,.08)}.order-status-options .status-choice.active[data-status="PROCESS"]{background:#0d6efd!important;color:#fff!important;border-color:#0b5ed7!important}.order-status-options .status-choice.active[data-status="DONE"]{background:#49751f!important;color:#fff!important;border-color:#365b15!important}.order-removing{opacity:0;transform:translateY(-8px);transition:.2s ease}.admin-stat-money{font-size:22px}.admin-transactions-table{min-width:1320px}.admin-transactions-table thead th{background:#f6c900!important;color:#3d3105!important;border-color:#d6b900!important;font-weight:900;white-space:nowrap}.admin-items-cell{min-width:220px;max-width:340px}.admin-transactions-table .badge{font-size:11px;padding:7px 9px}
@media(max-width:767.98px){.order-status-options{display:grid!important;grid-template-columns:repeat(3,1fr)}.order-status-options .status-choice{border-radius:8px!important;margin:0 2px}.order-status-options .status-choice:first-child,.order-status-options .status-choice:last-child{border-radius:8px!important}.admin-stat-money{font-size:20px}}


/* ===== V5: mobile app navigation + item sales + cash payment ===== */
.mobile-bottom-nav,
.mobile-more-menu,
.mobile-more-backdrop{display:none}

.cash-payment-panel{
  margin:10px 0 18px;
  padding:18px;
  border-radius:18px;
  border:1px solid #e1cf64;
  background:linear-gradient(135deg,#fff8c8,#fffdf0);
}
.cash-panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.cash-icon{font-size:34px}
.cash-input{font-size:22px!important;font-weight:900!important}
.cash-change-box{
  min-height:76px;
  border-radius:14px;
  border:1px solid #e6d77c;
  background:#fff;
  padding:11px 14px;
  display:grid;
  align-content:center;
}
.cash-change-box span{font-size:12px;font-weight:800;color:var(--muted)}
.cash-change-box strong{font-size:24px;color:var(--leaf-dark);line-height:1.15}
.cash-change-box small{margin-top:3px}
.cash-recommendations{display:flex;flex-wrap:wrap;gap:8px}
.cash-recommendation{
  border:1px solid #d9bf39;
  background:#fff;
  color:#5c4800;
  border-radius:999px;
  padding:9px 13px;
  font-weight:900;
  min-width:82px;
  transition:.15s ease;
}
.cash-recommendation:hover,
.cash-recommendation.recommended-best{
  background:#f6c900;
  border-color:#cfa800;
  transform:translateY(-1px);
}
.cash-recommendation.recommended-best::after{
  content:' ✓';
}
.transaction-save-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.item-count-link{
  text-decoration:none;
  color:#416b1b;
  display:inline-block;
}
.item-count-link:hover{text-decoration:underline}
.item-qty-link{
  display:inline-block;
  min-width:68px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff3ac;
  color:#5a4600;
  text-decoration:none;
  font-weight:900;
  border:1px solid #e5cf60;
}
.item-qty-link:hover{background:#f6c900;color:#3d3105}
.report-total-item-link{color:#fff;text-decoration:underline;font-weight:900}
.report-summary-card .stat{margin-top:3px}
.item-detail-table{min-width:1220px}
.item-detail-table thead th{
  background:#f6c900!important;
  color:#3d3105!important;
  white-space:nowrap;
}
.item-value-stat{font-size:21px}

@media(max-width:767.98px){
  body{
    padding-bottom:calc(78px + env(safe-area-inset-bottom));
  }
  .desktop-nav{display:none!important}
  .topbar{
    position:sticky;
    top:0;
    padding:10px 13px;
    min-height:62px;
  }
  .topbar .brand{width:100%}
  .topbar strong{font-size:18px}
  .topbar small{font-size:11px}
  .app-main{
    margin:14px auto;
    padding-left:10px;
    padding-right:10px;
  }

  .mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1200;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:stretch;
    min-height:66px;
    padding:5px 5px calc(5px + env(safe-area-inset-bottom));
    background:rgba(255,254,247,.97);
    border-top:1px solid #e1cf64;
    box-shadow:0 -8px 25px rgba(78,61,0,.13);
    backdrop-filter:blur(12px);
  }
  .mobile-bottom-nav a,
  .mobile-bottom-nav button{
    appearance:none;
    border:0;
    background:transparent;
    color:#66531a;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:4px 2px;
    font-size:10px;
    font-weight:800;
    border-radius:12px;
    min-width:0;
  }
  .mobile-bottom-nav a:active,
  .mobile-bottom-nav button:active,
  .mobile-bottom-nav button.active{
    background:#fff1a7;
    color:#3f5d16;
  }
  .mobile-nav-icon{
    font-size:22px;
    line-height:1;
    font-weight:900;
  }

  .mobile-more-backdrop{
    position:fixed;
    inset:0;
    z-index:1190;
    background:rgba(52,43,7,.42);
  }
  .mobile-more-backdrop.show{display:block}

  .mobile-more-menu{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(75px + env(safe-area-inset-bottom));
    z-index:1195;
    background:#fffef7;
    border:1px solid #e2d273;
    border-radius:20px;
    padding:10px;
    box-shadow:0 20px 60px rgba(63,50,0,.26);
    transform:translateY(18px);
    opacity:0;
  }
  .mobile-more-menu.show{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    transform:translateY(0);
    opacity:1;
  }
  .mobile-more-handle{
    grid-column:1/-1;
    width:46px;
    height:5px;
    margin:0 auto 2px;
    border-radius:999px;
    background:#d5c879;
  }
  .mobile-more-title{
    grid-column:1/-1;
    font-weight:900;
    padding:4px 6px 7px;
    color:#4b3d0e;
  }
  .mobile-more-menu a{
    text-decoration:none;
    color:#4c3d0d;
    border:1px solid #efe4a2;
    border-radius:14px;
    min-height:72px;
    background:#fffaf0;
    padding:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
  }
  .mobile-more-menu a span{font-size:24px}
  .mobile-more-menu .mobile-logout{
    color:#9b1c1c;
    background:#fff1f1;
  }

  .cash-payment-panel{padding:14px}
  .cash-recommendations{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
  }
  .cash-recommendation{
    min-width:0;
    padding:9px 4px;
    font-size:12px;
  }
  .cash-change-box strong{font-size:22px}

  .report-summary-card{text-align:center}
}


/* ===== V6: compact transaction UI + fully responsive item table ===== */
.app-main-wide{
  max-width:1680px!important;
  margin:22px auto;
  padding-left:22px;
  padding-right:22px;
}

.transaction-page-head{max-width:920px;margin-left:auto;margin-right:auto}
.transaction-shell{
  width:min(920px,100%);
  margin:0 auto;
  background:rgba(255,255,255,.96);
  border:1px solid #eadb79;
  border-radius:18px;
  padding:14px;
  box-shadow:0 7px 24px rgba(100,80,0,.09);
}
.transaction-block{
  background:#fffdf2;
  border:1px solid #eee0a0;
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}
.transaction-block-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.transaction-block-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  font-size:14px;
  font-weight:900;
  color:#4a3b08;
}
.transaction-block-head .transaction-block-title{margin-bottom:0}
.transaction-block-title>span{
  width:24px;
  height:24px;
  display:inline-grid;
  place-items:center;
  border-radius:8px;
  background:#f6c900;
  color:#423400;
  font-size:12px;
}
.compact-label{
  margin-bottom:4px!important;
  font-size:12px;
  font-weight:800;
  color:#5f4c0c;
}
.compact-control{
  min-height:40px!important;
  padding:8px 10px!important;
  font-size:14px!important;
  border-radius:9px!important;
}
.compact-items-list{display:grid;gap:7px}
.compact-product-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,1fr) 76px 130px 72px;
  gap:7px;
  align-items:end;
  padding:9px;
  margin:0;
  border:1px solid #efe3aa;
  border-radius:11px;
  background:#fff;
}
.compact-subtotal{
  min-height:40px;
  display:flex;
  align-items:center;
  padding:7px 9px;
  background:#fff9d8;
  border-radius:9px;
  font-weight:900;
  white-space:nowrap;
}
.compact-remove-btn{min-height:40px;padding:7px!important}
.compact-total-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:9px;
  padding:9px 11px;
  border-radius:10px;
  background:#fff3ac;
  color:#493900;
  font-size:13px;
  font-weight:800;
}
.compact-total-row strong{font-size:20px}
.compact-cash-panel{margin:9px 0 0!important;padding:11px!important;border-radius:12px!important}
.compact-cash-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.8fr);gap:9px;align-items:end}
.compact-change-box{min-height:64px!important;padding:8px 11px!important}
.compact-change-box strong{font-size:20px!important}
.compact-cash-panel .cash-panel-title{margin-bottom:8px}
.compact-cash-panel .cash-icon{font-size:26px}
.compact-cash-panel .cash-input{font-size:18px!important}
.compact-cash-panel .cash-recommendation{padding:7px 10px;min-width:72px;font-size:12px}
.transaction-save-btn{min-height:46px;font-size:15px}
.compact-active-btn{white-space:nowrap}

/* Bootstrap responsive table: jangan lagi memotong kolom kanan. */
.item-detail-scroll,
.table-responsive{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch;
}
.item-detail-table{
  width:100%!important;
  min-width:1180px!important;
  table-layout:auto!important;
  margin-bottom:0!important;
}
.item-detail-table th,
.item-detail-table td{
  padding:.55rem .6rem!important;
  vertical-align:middle!important;
}
.item-detail-table thead th{white-space:nowrap}
.txn-no-head,.txn-no-cell{min-width:178px;white-space:nowrap}
.payment-head,.payment-cell{min-width:145px;white-space:nowrap}
.status-head,.status-cell{min-width:120px;white-space:nowrap}
.cashier-head,.cashier-cell{min-width:130px;white-space:nowrap}
.item-detail-table td:nth-child(5){min-width:120px}
.item-detail-table td:nth-child(6){min-width:150px}

@media(max-width:767.98px){
  .app-main-wide{padding-left:8px;padding-right:8px;margin:12px auto}
  .transaction-page-head{align-items:flex-start;gap:8px}
  .transaction-page-head h1{font-size:20px}
  .compact-active-btn{font-size:12px;padding:8px 9px}
  .transaction-shell{padding:8px;border-radius:14px}
  .transaction-block{padding:9px;border-radius:11px;margin-bottom:8px}
  .compact-product-row{
    grid-template-columns:minmax(0,1fr) 76px;
    gap:6px;
    padding:8px;
  }
  .item-product-field{grid-column:1/-1}
  .item-qty-field{grid-column:1}
  .item-subtotal-field{grid-column:2}
  .compact-remove-btn{
    grid-column:1/-1;
    min-height:34px;
    width:100%;
  }
  .compact-control{min-height:38px!important;font-size:13px!important}
  .compact-subtotal{min-height:38px;font-size:13px;padding:6px 8px}
  .compact-total-row{padding:8px 9px}
  .compact-total-row strong{font-size:18px}
  .compact-cash-grid{grid-template-columns:1fr}
  .cash-recommendations{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .compact-cash-panel .cash-recommendation{min-width:0!important;padding:7px 2px!important;font-size:11px!important}
  .transaction-save-btn{position:sticky;bottom:78px;z-index:20;box-shadow:0 6px 20px rgba(72,56,0,.22)}

  .item-detail-table{min-width:1080px!important;font-size:12px}
  .item-detail-table th,.item-detail-table td{padding:.45rem .5rem!important}
  .txn-no-head,.txn-no-cell{min-width:165px}
}

@media(max-width:380px){
  .cash-recommendations{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .compact-product-row{grid-template-columns:minmax(0,1fr) 68px}
}


/* ===== V7: active orders 3-grid + transaksi compact grid ===== */

/* Modal pesanan aktif dibuat lebih lebar agar 3 kartu nyaman dibaca. */
#active-orders-modal .modal-box{
  width:min(1480px,96vw);
}
#active-orders-modal .modal-body{
  padding:14px;
}

.active-orders-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.order-grid-card{
  min-width:0;
  margin:0!important;
  padding:13px!important;
  border-radius:15px!important;
  border:1px solid #e7d46e!important;
  background:linear-gradient(180deg,#fffefa,#fffdf0)!important;
  box-shadow:0 5px 16px rgba(92,72,0,.07)!important;
}
.order-grid-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}
.order-grid-customer{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  color:#3f330b;
}
.order-grid-customer strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-grid-card .queue{
  font-size:18px;
  line-height:1;
}
.order-grid-card .order-status-badge{
  flex:0 0 auto;
  padding:6px 8px;
  font-size:10px;
}
.order-grid-items{
  min-height:34px;
  max-height:46px;
  overflow:auto;
  font-size:12px;
  line-height:1.35;
  color:#746637;
  padding:6px 8px;
  margin-bottom:8px;
  border-radius:9px;
  background:#fff9d8;
  border:1px solid #eee0a0;
}
.order-grid-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 9px;
  margin-bottom:8px;
  border-radius:9px;
  background:#f6c900;
  color:#423400;
}
.order-grid-total span{
  font-size:11px;
  font-weight:800;
}
.order-grid-total strong{
  font-size:17px;
  white-space:nowrap;
}
.order-grid-section{margin-top:7px}
.order-grid-label{
  display:block;
  margin-bottom:4px;
  color:#5a4700;
  font-size:11px;
  font-weight:900;
}
.order-status-compact .status-choice{
  min-height:35px!important;
  padding:5px 4px!important;
  font-size:10px!important;
  line-height:1.05!important;
}
.order-payment-compact{
  min-height:36px!important;
  padding:.4rem 1.9rem .4rem .55rem!important;
  font-size:12px!important;
  border-radius:8px!important;
}
.order-grid-update{
  width:100%;
  min-height:37px!important;
  margin-top:9px;
  padding:7px 9px!important;
  font-size:12px!important;
  border-radius:9px!important;
}

/* Transaksi dibuat sebagai kartu grid sehingga tidak menumpuk panjang. */
.transaction-shell-grid{
  width:min(1320px,100%)!important;
  padding:10px!important;
}
.transaction-form-grid{
  display:grid;
  grid-template-columns:minmax(190px,.72fr) minmax(430px,1.65fr) minmax(280px,1fr);
  gap:9px;
  align-items:start;
}
.transaction-form-grid > input[type="hidden"]{display:none}
.transaction-grid-card{
  margin:0!important;
  min-width:0;
  height:100%;
  padding:10px!important;
}
.transaction-mini-hint{
  margin:-5px 0 8px 31px;
  color:#8a7a45;
  font-size:10px;
}
.transaction-items-block{
  max-height:330px;
  overflow:auto;
}
.transaction-payment-block{
  overflow:visible;
}
.transaction-form-grid .compact-items-list{
  gap:5px;
}
.transaction-form-grid .compact-product-row{
  grid-template-columns:minmax(185px,1fr) 58px 94px 32px;
  gap:5px;
  padding:6px;
  border-radius:9px;
}
.transaction-form-grid .compact-product-row .compact-label{
  font-size:10px!important;
  margin-bottom:2px!important;
}
.transaction-form-grid .compact-control{
  min-height:34px!important;
  padding:5px 7px!important;
  font-size:12px!important;
}
.transaction-form-grid .compact-subtotal{
  min-height:34px;
  padding:5px 6px;
  font-size:11px;
}
.transaction-form-grid .compact-remove-btn{
  width:32px;
  min-width:32px;
  min-height:34px;
  overflow:hidden;
  padding:0!important;
  font-size:0!important;
  position:relative;
}
.transaction-form-grid .compact-remove-btn::after{
  content:'×';
  font-size:20px;
  line-height:1;
}
.transaction-form-grid .compact-total-row{
  margin-top:6px;
  padding:6px 8px;
}
.transaction-form-grid .compact-total-row strong{
  font-size:17px;
}
.transaction-form-grid .compact-cash-panel{
  padding:8px!important;
}
.transaction-form-grid .compact-cash-grid{
  grid-template-columns:1fr!important;
  gap:6px;
}
.transaction-form-grid .compact-change-box{
  min-height:52px!important;
}
.transaction-form-grid .cash-recommendations{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
}
.transaction-form-grid .cash-recommendation{
  min-width:0!important;
  padding:5px 2px!important;
  font-size:10px!important;
}
.transaction-grid-save{
  grid-column:1/-1;
  min-height:42px!important;
  margin:0!important;
  font-size:14px!important;
}

@media(max-width:1199.98px){
  .active-orders-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .transaction-form-grid{
    grid-template-columns:minmax(180px,.75fr) minmax(380px,1.5fr);
  }
  .transaction-payment-block{
    grid-column:1/-1;
  }
  .transaction-payment-block .compact-cash-panel{
    max-width:760px;
  }
}

@media(max-width:767.98px){
  #active-orders-modal .modal-box{
    width:100%;
  }
  #active-orders-modal .modal-head{
    padding:10px 11px;
  }
  #active-orders-modal .modal-head .muted{
    font-size:10px;
  }
  #active-orders-modal .modal-body{
    padding:8px;
  }
  .active-orders-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .order-grid-card{
    padding:10px!important;
  }
  .order-grid-items{
    min-height:0;
    max-height:38px;
  }
  .order-status-compact{
    display:grid!important;
    grid-template-columns:repeat(3,1fr);
    gap:3px!important;
  }
  .order-status-compact .status-choice,
  .order-status-compact .status-choice:first-child,
  .order-status-compact .status-choice:last-child{
    border-radius:7px!important;
    margin:0!important;
  }

  .transaction-shell-grid{
    padding:6px!important;
  }
  .transaction-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .transaction-customer-block,
  .transaction-payment-block{
    grid-column:auto;
  }
  .transaction-items-block{
    grid-column:1/-1;
    max-height:none;
  }
  .transaction-grid-card{
    padding:7px!important;
  }
  .transaction-block-title{
    font-size:12px!important;
    margin-bottom:5px!important;
  }
  .transaction-block-title>span{
    width:20px!important;
    height:20px!important;
    font-size:10px!important;
  }
  .transaction-mini-hint{
    display:none;
  }
  .transaction-form-grid .compact-product-row{
    grid-template-columns:minmax(0,1fr) 54px 82px 30px!important;
    gap:4px!important;
    padding:5px!important;
  }
  .transaction-form-grid .item-product-field,
  .transaction-form-grid .item-qty-field,
  .transaction-form-grid .item-subtotal-field,
  .transaction-form-grid .compact-remove-btn{
    grid-column:auto!important;
  }
  .transaction-form-grid .compact-label{
    display:none!important;
  }
  .transaction-form-grid .compact-control{
    min-height:32px!important;
    font-size:11px!important;
    padding:4px 5px!important;
  }
  .transaction-form-grid .compact-subtotal{
    min-height:32px!important;
    font-size:10px!important;
    padding:4px!important;
  }
  .transaction-form-grid .compact-remove-btn{
    min-height:32px!important;
  }
  .transaction-form-grid .cash-recommendations{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .transaction-grid-save{
    position:sticky;
    bottom:76px;
    z-index:30;
  }
}

@media(max-width:520px){
  .transaction-form-grid{
    grid-template-columns:1fr;
  }
  .transaction-customer-block,
  .transaction-items-block,
  .transaction-payment-block{
    grid-column:1;
  }
  .transaction-form-grid .compact-product-row{
    grid-template-columns:minmax(0,1fr) 50px 76px 28px!important;
  }
  .transaction-form-grid .cash-recommendations{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

@media(max-width:380px){
  .transaction-form-grid .compact-product-row{
    grid-template-columns:minmax(0,1fr) 46px 70px 26px!important;
  }
  .transaction-form-grid .cash-recommendations{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}


/* ===== V8: Monitoring Keuntungan Bersih ===== */
.profit-monitor{padding-bottom:18px}
.profit-page-head{align-items:flex-end}
.profit-period-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:#fff5b7;
  border:1px solid #e5ce52;
  color:#594600;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}
.profit-filter-card{padding:13px!important}
.profit-filter-note{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  background:#fff9dc;
  border:1px solid #eee0a0;
  font-size:12px;
  color:#726126;
}
.profit-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.profit-kpi{
  position:relative;
  min-width:0;
  padding:13px!important;
  overflow:hidden;
}
.profit-kpi-main{
  background:linear-gradient(145deg,#fff2a2,#fffbe6)!important;
  border-color:#d7bd2f!important;
}
.profit-kpi-main.profit-negative{
  background:linear-gradient(145deg,#ffe2df,#fff7f6)!important;
  border-color:#e0a09a!important;
}
.profit-kpi-icon{
  position:absolute;
  right:10px;
  top:8px;
  font-size:22px;
  opacity:.22;
}
.profit-kpi-label{
  color:#75662c;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.profit-kpi-value{
  margin-top:5px;
  color:#3e3105;
  font-size:21px;
  line-height:1.08;
  font-weight:950;
  word-break:break-word;
}
.profit-kpi-sub,
.profit-delta{
  margin-top:7px;
  font-size:10px;
  line-height:1.25;
}
.profit-kpi-sub{color:#897a49}
.profit-delta{
  display:inline-flex;
  border-radius:999px;
  padding:4px 7px;
  font-weight:800;
}
.profit-delta-good{background:#e4f5e8;color:#1e6b33}
.profit-delta-bad{background:#fde9e7;color:#a22e25}
.profit-delta-neutral{background:#f2f0e6;color:#6d6750}

.profit-insight-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:10px;
}
.profit-health-card{
  padding:14px!important;
  border-left:5px solid #dabf2d!important;
}
.profit-health-good{border-left-color:#4f8c28!important}
.profit-health-warning{border-left-color:#e0a415!important}
.profit-health-danger{border-left-color:#c74636!important}
.profit-health-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.profit-health-title{
  margin-top:2px;
  font-size:24px;
  font-weight:950;
  color:#3f330b;
}
.profit-health-score{
  min-width:78px;
  text-align:center;
  padding:9px 10px;
  border-radius:13px;
  background:#fff6b9;
  color:#493b0a;
  font-size:18px;
  font-weight:950;
}
.profit-health-card p{
  margin:8px 0 12px;
  color:#74673d;
  font-size:12px;
}
.profit-health-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
  border-top:1px dashed #e6dcad;
  font-size:12px;
}
.profit-health-row strong{white-space:nowrap}
.profit-insight-card{padding:14px!important}
.profit-insight-list{display:grid;gap:7px;margin-top:9px}
.profit-insight-list>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2px 10px;
  padding:9px 10px;
  border-radius:11px;
  background:#fff9df;
  border:1px solid #eee3aa;
}
.profit-insight-list span{font-size:11px;color:#76673a}
.profit-insight-list strong{font-size:13px;color:#493a06}
.profit-insight-list small{grid-column:1/-1;color:#8b7d50}

.profit-main-grid{
  display:grid;
  grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr);
  gap:10px;
}
.profit-expense-form-card,
.profit-trend-card{padding:14px!important}
.profit-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:11px;
}
.profit-section-head h2{
  margin:0;
  font-size:16px;
  color:#453704;
}
.profit-section-head .muted{font-size:11px}
.profit-admin-badge{
  padding:5px 8px;
  border-radius:999px;
  background:#4b7b22;
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.profit-expense-amount{
  font-size:18px!important;
  font-weight:900!important;
}
.profit-divider{
  margin:14px 0;
  border-color:#eadf9f;
}
.profit-category-form .input-group{max-width:100%}

.profit-legend{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:10px;
  font-weight:800;
  color:#6f6239;
}
.profit-legend span{display:flex;align-items:center;gap:5px}
.profit-dot{
  width:8px;height:8px;border-radius:50%;display:inline-block;
}
.profit-dot-sales{background:#537f28}
.profit-dot-expense{background:#d68f1d}
.profit-trend-list{
  max-height:420px;
  overflow:auto;
  display:grid;
  gap:5px;
  padding-right:3px;
}
.profit-trend-row{
  display:grid;
  grid-template-columns:46px minmax(100px,1fr) 118px;
  gap:8px;
  align-items:center;
  min-height:34px;
}
.profit-trend-date{
  font-size:10px;
  font-weight:900;
  color:#6c5d2a;
}
.profit-trend-bars{display:grid;gap:3px}
.profit-trend-line{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#f1edda;
}
.profit-bar{
  display:block;
  height:100%;
  min-width:0;
  border-radius:999px;
}
.profit-bar-sales{background:linear-gradient(90deg,#426b20,#78a94a)}
.profit-bar-expense{background:linear-gradient(90deg,#c77d12,#eeb94e)}
.profit-trend-values{
  text-align:right;
  display:grid;
  line-height:1.05;
}
.profit-trend-values strong{font-size:10px;color:#466922}
.profit-trend-values small{font-size:9px;color:#9b691d}

.profit-analysis-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.profit-category-bars{display:grid;gap:10px}
.profit-category-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
  font-size:11px;
}
.profit-category-head strong{white-space:nowrap}
.profit-category-track{
  height:9px;
  border-radius:999px;
  overflow:hidden;
  background:#f0ecd8;
}
.profit-category-track span{
  display:block;
  height:100%;
  min-width:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#f2bd00,#7aa43f);
}
.profit-empty{
  padding:18px;
  text-align:center;
  border-radius:12px;
  background:#fffaf0;
  color:#8b7d50;
  font-size:12px;
}
.profit-cost-split{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.profit-cost-split>div{
  padding:12px;
  border-radius:12px;
  background:#fff9df;
  border:1px solid #ede0a1;
  display:grid;
  gap:3px;
}
.profit-cost-split span{font-size:10px;color:#78693a;font-weight:800}
.profit-cost-split strong{font-size:15px;color:#463803}
.profit-cost-split small{font-size:9px;color:#8e8259}
.profit-cost-total{
  background:#f1f7e8!important;
  border-color:#c7d9af!important;
}

.profit-branch-card,
.profit-expense-history-card{padding:14px!important}
.profit-table{min-width:980px}
.profit-table thead th{
  background:#f6c900!important;
  color:#3e3104!important;
  white-space:nowrap;
  font-size:11px;
}
.profit-table td{font-size:11px}
.profit-text-good{color:#376a22!important}
.profit-text-danger{color:#b23429!important}
.profit-footnote{
  padding:10px 12px;
  border-radius:12px;
  background:#fff7cf;
  border:1px solid #e6d46f;
  color:#6a5a28;
  font-size:11px;
  line-height:1.45;
}

@media(max-width:1399.98px){
  .profit-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:991.98px){
  .profit-main-grid,
  .profit-insight-grid,
  .profit-analysis-grid{grid-template-columns:1fr}
  .profit-cost-split{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:767.98px){
  .profit-page-head{align-items:flex-start}
  .profit-period-chip{font-size:10px}
  .profit-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .profit-kpi{padding:10px!important}
  .profit-kpi-value{font-size:17px}
  .profit-kpi-label{font-size:9px}
  .profit-health-title{font-size:20px}
  .profit-main-grid,
  .profit-insight-grid,
  .profit-analysis-grid{gap:7px}
  .profit-trend-row{
    grid-template-columns:38px minmax(80px,1fr) 92px;
    gap:5px;
  }
  .profit-trend-values strong{font-size:9px}
  .profit-trend-values small{font-size:8px}
  .profit-cost-split{grid-template-columns:1fr}
}
@media(max-width:390px){
  .profit-kpi-grid{grid-template-columns:1fr 1fr}
  .profit-kpi-value{font-size:15px}
}


/* ===== V9: Monitoring Aktivitas Cabang + Detail Pengeluaran + Rekap Semua Cabang ===== */
.report-money-link,
.profit-money-link,
.profit-table-money-link,
.monitoring-money-link{
  color:#4d741f;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:3px;
  font-weight:900;
}
.report-money-link:hover,
.profit-money-link:hover,
.profit-table-money-link:hover,
.monitoring-money-link:hover{
  color:#2e5510;
}
.profit-kpi-value.profit-money-link{
  display:inline-block;
  text-decoration:none;
  color:#3e3105;
}
.profit-kpi-value.profit-money-link:hover{
  text-decoration:underline;
  text-decoration-style:dotted;
}

.expense-detail-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.expense-detail-kpis .card{padding:13px!important}
.expense-detail-money{font-size:20px!important}
.expense-detail-total{
  background:linear-gradient(135deg,#fff3a6,#fffbea)!important;
  border-color:#d8bf33!important;
}
.expense-breakdown-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.expense-breakdown-list{
  display:grid;
  gap:6px;
  margin-top:8px;
}
.expense-breakdown-list a,
.expense-breakdown-list>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-radius:10px;
  background:#fff9df;
  border:1px solid #eee1a4;
  color:#5d4d17;
  text-decoration:none;
  font-size:12px;
}
.expense-breakdown-list a:hover{
  background:#fff1a4;
}
.expense-breakdown-list strong{white-space:nowrap}
.expense-detail-table{min-width:1050px}
.expense-detail-table thead th{
  background:#f6c900!important;
  color:#3f3205!important;
  white-space:nowrap;
}

.monitoring-filter-card{padding:13px!important}
.monitoring-filter-note{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  background:#fff9dc;
  border:1px solid #eee0a0;
  color:#73632e;
  font-size:11px;
}
.monitoring-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
}
.monitoring-kpi-grid .card{
  padding:12px!important;
  min-width:0;
}
.monitoring-kpi-label{
  color:#76672f;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.monitoring-kpi-value{
  margin-top:5px;
  color:#403303;
  font-size:19px;
  font-weight:950;
  line-height:1.08;
  word-break:break-word;
}
.monitoring-kpi-grid small{
  display:block;
  margin-top:5px;
  color:#8d8054;
  font-size:9px;
}
.monitoring-shift-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.monitoring-shift-strip>div{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e7db98;
  color:#625521;
  font-size:11px;
  box-shadow:0 2px 8px rgba(78,61,0,.05);
}
.monitoring-shift-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}
.monitoring-shift-dot.open{background:#4f8c28}
.monitoring-shift-dot.closed{background:#7d7d70}
.monitoring-shift-dot.not-open{background:#e3a51e}

.monitoring-branch-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.monitoring-branch-card{
  padding:12px!important;
  min-width:0;
  border-color:#e6d475!important;
}
.monitoring-branch-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
  padding-bottom:8px;
  border-bottom:1px solid #eee5b4;
}
.monitoring-branch-head h2{
  margin:0 0 5px;
  color:#463802;
  font-size:16px;
}
.monitoring-branch-sales{
  color:#3f6e1b;
  font-size:17px;
  font-weight:950;
  text-align:right;
  white-space:nowrap;
}
.monitoring-branch-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  margin-top:8px;
}
.monitoring-branch-metrics>div{
  padding:7px 4px;
  text-align:center;
  border-radius:9px;
  background:#fff9df;
  border:1px solid #eee2a7;
}
.monitoring-branch-metrics span{
  display:block;
  color:#817343;
  font-size:9px;
}
.monitoring-branch-metrics strong{
  display:block;
  color:#473902;
  font-size:14px;
  margin-top:1px;
}
.monitoring-branch-costs{
  display:grid;
  gap:5px;
  margin-top:8px;
}
.monitoring-branch-costs>a,
.monitoring-branch-costs>div{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:6px 8px;
  border-radius:8px;
  background:#f8f6e8;
  color:#62531f;
  text-decoration:none;
  font-size:10px;
}
.monitoring-branch-costs>a:hover{background:#fff0a0}
.monitoring-branch-costs strong{white-space:nowrap}
.monitoring-stock-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  margin-top:8px;
}
.monitoring-stock-row span{
  padding:5px 4px;
  border-radius:7px;
  background:#f4f7ed;
  color:#6b704d;
  font-size:8px;
  text-align:center;
}
.monitoring-stock-row b{
  display:block;
  margin-top:2px;
  color:#425d26;
  font-size:10px;
}
.monitoring-shift-meta{
  margin-top:7px;
  color:#897a48;
  font-size:9px;
  line-height:1.3;
}
.monitoring-branch-actions{
  display:flex;
  gap:5px;
  margin-top:8px;
}
.monitoring-branch-actions .btn{
  flex:1;
  padding:6px 5px!important;
  font-size:9px!important;
}

.monitoring-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.monitoring-section-head h2{
  margin:0;
  color:#473902;
  font-size:16px;
}
.monitoring-section-head .muted{font-size:10px}
.monitoring-summary-table-card,
.monitoring-activity-card{padding:13px!important}
.monitoring-summary-table{min-width:1450px}
.monitoring-summary-table thead th{
  background:#f6c900!important;
  color:#3d3103!important;
  white-space:nowrap;
  font-size:10px;
}
.monitoring-summary-table td{font-size:10px}

.monitoring-activity-list{
  display:grid;
  gap:5px;
  max-height:650px;
  overflow:auto;
  padding-right:3px;
}
.monitoring-activity-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid #eee3ad;
  border-radius:11px;
  background:#fffefa;
}
.monitoring-activity-time{
  display:grid;
  text-align:center;
  line-height:1.05;
}
.monitoring-activity-time strong{font-size:10px;color:#5b4a12}
.monitoring-activity-time span{font-size:9px;color:#8a7d53;margin-top:2px}
.monitoring-activity-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.monitoring-activity-title strong{
  font-size:11px;
  color:#443600;
}
.monitoring-activity-detail{
  margin-top:2px;
  color:#827649;
  font-size:9px;
}
.monitoring-activity-type{
  display:inline-flex;
  padding:3px 6px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
}
.monitoring-type-success{background:#e5f5e4;color:#2d6f31}
.monitoring-type-warning{background:#fff0b8;color:#8b6500}
.monitoring-type-danger{background:#fde4e1;color:#a02f27}
.monitoring-type-info{background:#e8f2ff;color:#245f9f}
.monitoring-type-expense{background:#f4e8ff;color:#70419a}
.monitoring-activity-amount{
  color:#4c3e09;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.monitoring-activity-link{
  padding:5px 7px!important;
  font-size:8px!important;
}
.monitoring-empty{
  padding:20px;
  text-align:center;
  color:#8a7d52;
}

@media(max-width:1399.98px){
  .monitoring-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .monitoring-branch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:991.98px){
  .expense-detail-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .expense-breakdown-grid{grid-template-columns:1fr}
}
@media(max-width:767.98px){
  .monitoring-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .monitoring-kpi-grid .card{padding:9px!important}
  .monitoring-kpi-value{font-size:15px}
  .monitoring-branch-grid{grid-template-columns:1fr;gap:7px}
  .monitoring-branch-metrics{gap:3px}
  .monitoring-stock-row{grid-template-columns:repeat(2,1fr)}
  .monitoring-activity-row{
    grid-template-columns:42px minmax(0,1fr) auto;
  }
  .monitoring-activity-link{
    grid-column:2/4;
    justify-self:start;
  }
  .expense-detail-kpis{gap:6px}
  .expense-detail-money{font-size:15px!important}
}

/* ===== V10: Bootstrap mobile polish, reload, cash, close validation ===== */
.global-reload-button{
  position:fixed;right:16px;top:78px;z-index:1050;width:42px;height:42px;border-radius:50%;
  border:1px solid #d4b800;background:#fff8c9;color:#4b3b05;font-size:24px;font-weight:900;
  box-shadow:0 6px 18px rgba(70,55,0,.18);display:grid;place-items:center;cursor:pointer;
}
.global-reload-button:active{transform:rotate(20deg) scale(.96)}
.app-main .card{border-radius:16px!important}
.app-main .form-control,.app-main .form-select,.app-main .input-group-text{min-height:42px;border-radius:10px}
.app-main .input-group>.input-group-text{border-radius:10px 0 0 10px}
.app-main .input-group>.form-control{border-radius:0 10px 10px 0}
.app-main .table thead th{vertical-align:middle}
.product-form-sticky{position:sticky;top:86px}
.product-table{min-width:760px}
.compact-stat-card{padding:12px!important;display:grid;align-content:center;gap:3px}
.compact-stat-card span{font-size:10px;text-transform:uppercase;font-weight:900;color:#7a6b36}
.compact-stat-card strong{font-size:18px;color:#403303}
.compact-stat-card small{font-size:9px;color:#8d8058}
.notification-list{display:grid;gap:7px;max-height:330px;overflow:auto}
.notification-item{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid #eadf9e;border-radius:11px;background:#fffdf2}
.notification-item.unread{background:#fff3b0;border-color:#dbbd32}
.notification-item strong{font-size:12px}.notification-item p{font-size:11px;margin:3px 0 0;color:#706337}.notification-item small{font-size:9px;color:#8b7d52;white-space:nowrap}
.cash-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cash-admin-card{padding:13px!important}
.cash-admin-values{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
.cash-admin-values>div{padding:8px 5px;border-radius:9px;background:#fff9dd;border:1px solid #eadf9d;text-align:center}
.cash-admin-values span{display:block;font-size:9px;color:#807243}.cash-admin-values b{display:block;font-size:12px;margin-top:2px;color:#493a06}
.closing-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.closing-check{display:flex!important;align-items:center;gap:10px;padding:12px!important;border-left-width:5px!important}
.closing-check>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:900}
.closing-check b{display:block;font-size:12px}.closing-check small{display:block;font-size:10px;color:#7b7047;margin-top:2px}
.closing-check.ok{border-left-color:#4f8c28!important;background:#f6fbf2!important}.closing-check.ok>span{background:#dff3d4;color:#37651d}
.closing-check.bad{border-left-color:#c94132!important;background:#fff7f5!important}.closing-check.bad>span{background:#ffe0dc;color:#a52c22}
.report-money-link{font-weight:800;text-decoration:none;color:#4f6f22}.report-money-link:hover{text-decoration:underline}
.money-input{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.2px}

@media(max-width:1199.98px){
  .cash-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767.98px){
  .global-reload-button{top:auto;right:12px;bottom:84px;width:40px;height:40px;font-size:22px}
  .app-main{max-width:none!important;width:100%!important;margin:10px auto!important;padding-left:8px!important;padding-right:8px!important}
  .app-main .card{padding:11px!important;border-radius:13px!important}
  .page-head{margin-bottom:10px!important;align-items:flex-start!important}
  .page-head h1{font-size:19px!important}
  .page-head .muted{font-size:10px!important}
  .app-main .btn{min-height:38px}
  .app-main .form-control,.app-main .form-select,.app-main .input-group-text{min-height:39px;font-size:13px}
  .product-form-sticky{position:static}
  .cash-admin-grid{grid-template-columns:1fr}
  .closing-check-grid{grid-template-columns:1fr;gap:6px}
  .compact-stat-card strong{font-size:15px}
  .notification-item{display:grid;gap:3px}
  .notification-item small{white-space:normal}
}
@media(min-width:768px) and (max-width:1199.98px){
  .app-main{max-width:96%!important}
}


/* ===== V11: tanggal otomatis & monitoring kas per tanggal ===== */
.cash-date-auto{
  background:#fff9d7!important;
  color:#4b3a00!important;
  font-weight:900!important;
  letter-spacing:.3px;
}
.cash-history-table{
  min-width:980px;
}
.cash-history-table thead th{
  background:#f6c900!important;
  color:#3d3105!important;
  white-space:nowrap;
  font-size:11px;
}
.cash-history-table td{
  font-size:11px;
}
@media(max-width:767.98px){
  .cash-history-table{
    min-width:900px;
  }
}


/* ===== V12: kamera bukti pengeluaran ===== */
.expense-camera-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  min-height:78px;
  padding:14px 16px;
  border:2px dashed #d5ad00;
  border-radius:16px;
  background:#fff9d7;
  color:#3d3105;
  cursor:pointer;
  text-align:left;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.expense-camera-button:hover,
.expense-camera-button:focus-within{
  background:#fff3a6;
  box-shadow:0 6px 18px rgba(79,62,0,.10);
  transform:translateY(-1px);
}
.expense-camera-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:#f6c900;
  font-size:24px;
}
.expense-camera-button strong,
.expense-camera-button small{
  display:block;
}
.expense-camera-button strong{
  font-size:15px;
}
.expense-camera-button small{
  margin-top:2px;
  color:#6f6250;
  font-size:12px;
}
.expense-photo-preview-wrap{
  margin-top:12px;
  padding:10px;
  border:1px solid #e8e1c1;
  border-radius:14px;
  background:#fff;
}
.expense-photo-preview{
  display:block;
  width:100%;
  max-height:320px;
  object-fit:contain;
  border-radius:10px;
  background:#f4f4f4;
}
@media(max-width:767.98px){
  .expense-camera-button{
    min-height:88px;
    border-radius:14px;
  }
  .expense-camera-icon{
    width:50px;
    height:50px;
  }
}


/* ===== V14: kamera TF, thumbnail bukti, daftar belum bayar ===== */
.transfer-proof-panel{
  margin-top:12px;
  padding:13px;
  border:1px solid #e3d26c;
  border-radius:14px;
  background:#fffbea;
}
.camera-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 9px;
  border-radius:999px;
  background:#fff1a6;
  color:#604a00;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.payment-proof-inline{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #e5d884;
}
.mini-camera-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  width:100%;
  padding:8px 10px;
  border:1px dashed #d4af12;
  border-radius:10px;
  background:#fff8cc;
  color:#4e3d00;
  cursor:pointer;
  font-size:12px;
  text-align:center;
}
.payment-proof-mini-preview{
  margin-top:8px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #e7d986;
  background:#fff;
}
.payment-proof-mini-preview img{
  display:block;
  width:100%;
  max-height:180px;
  object-fit:contain;
}
.proof-thumbnail-button{
  appearance:none;
  border:0;
  padding:0;
  width:58px;
  height:58px;
  border-radius:10px;
  overflow:hidden;
  background:#f4f4f4;
  box-shadow:0 0 0 1px #e1d376;
  cursor:pointer;
}
.proof-thumbnail-button img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.proof-thumbnail-button:active{
  transform:scale(.97);
}
.proof-lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:5000;
  padding:16px;
  background:rgba(20,18,10,.78);
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
}
.proof-lightbox.show{
  display:flex;
}
.proof-lightbox-card{
  position:relative;
  width:min(720px,96vw);
  max-height:92vh;
  overflow:hidden;
  border-radius:18px;
  background:#fffef8;
  box-shadow:0 24px 80px rgba(0,0,0,.36);
}
.proof-lightbox-title{
  padding:13px 58px 11px 16px;
  border-bottom:1px solid #eee1a6;
  font-size:14px;
  font-weight:900;
  color:#423500;
}
.proof-lightbox-close{
  position:absolute;
  z-index:2;
  top:7px;
  right:8px;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:#9b1c1c;
  color:#fff;
  font-size:28px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
}
.proof-lightbox-image-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  max-height:calc(92vh - 56px);
  padding:10px;
  background:#171717;
}
.proof-lightbox-image{
  display:block;
  max-width:100%;
  max-height:calc(92vh - 80px);
  object-fit:contain;
  border-radius:8px;
}
.unpaid-order-card{
  border-color:#e4a3a3!important;
}
.unpaid-order-card .order-grid-total{
  background:#fff4f4;
}
@media(max-width:767.98px){
  .proof-thumbnail-button{
    width:52px;
    height:52px;
  }
  .proof-lightbox{
    padding:8px;
  }
  .proof-lightbox-card{
    width:100%;
    max-height:94vh;
    border-radius:14px;
  }
  .proof-lightbox-image-wrap{
    max-height:calc(94vh - 56px);
  }
}


/* ===== V15: kamera langsung di halaman ===== */
button.expense-camera-button,
button.mini-camera-button{
  font-family:inherit;
}
button.expense-camera-button{
  border-style:dashed;
}
.direct-camera-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:7000;
  padding:12px;
  background:rgba(0,0,0,.88);
  align-items:center;
  justify-content:center;
}
.direct-camera-modal.show{
  display:flex;
}
.direct-camera-card{
  width:min(680px,100%);
  max-height:96vh;
  overflow:auto;
  border-radius:18px;
  background:#111;
  color:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.direct-camera-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:#1a1a1a;
}
.direct-camera-head strong{
  font-size:16px;
}
.direct-camera-head .small{
  margin-top:2px;
  color:#c9c9c9;
}
.direct-camera-close{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#b91c1c;
  color:#fff;
  font-size:30px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
}
.direct-camera-view{
  position:relative;
  width:100%;
  min-height:280px;
  background:#000;
  overflow:hidden;
}
.direct-camera-video{
  display:block;
  width:100%;
  max-height:70vh;
  min-height:280px;
  object-fit:contain;
  background:#000;
}
.direct-camera-video.camera-waiting{
  opacity:.25;
}
.direct-camera-loading{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  pointer-events:none;
}
.direct-camera-actions{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:10px;
  padding:12px;
  background:#171717;
}
.direct-camera-actions .btn{
  min-height:48px;
  font-weight:900;
}
@media(max-width:576px){
  .direct-camera-modal{
    padding:0;
  }
  .direct-camera-card{
    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
    display:flex;
    flex-direction:column;
  }
  .direct-camera-view{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    align-items:center;
  }
  .direct-camera-video{
    width:100%;
    max-height:none;
    min-height:0;
  }
  .direct-camera-actions{
    grid-template-columns:1fr 1.5fr;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
  }
}


/* ===== V16: logo Serbanana + Android safe-area + rekap bukti TF ===== */
.brand-logo{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:block;
  object-fit:cover;
  border-radius:50%;
  background:#fff;
  border:2px solid rgba(255,255,255,.82);
  box-shadow:0 3px 10px rgba(83,65,0,.18);
}
.login-logo{
  width:68px;
  height:68px;
  display:block;
  object-fit:cover;
  border-radius:50%;
  background:#fff;
  border:3px solid rgba(255,255,255,.82);
  box-shadow:0 4px 14px rgba(68,52,0,.18);
}

/*
 * WebView Android Serbanana berjalan edge-to-edge.
 * Tambahkan ruang khusus agar logo/nama tidak tertutup jam, sinyal, dan baterai.
 * Browser Chrome biasa tidak mendapat class ini.
 */
body.serbanana-android-app .topbar{
  padding-top:calc(14px + max(env(safe-area-inset-top, 0px), 28px));
}
body.serbanana-android-app .global-reload-button{
  top:calc(84px + max(env(safe-area-inset-top, 0px), 28px));
}

.tf-proof-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
  gap:12px;
}
.tf-proof-card{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
  padding:10px;
  border:1px solid #eadb79;
  border-radius:14px;
  background:#fffdf3;
}
.proof-thumbnail-large{
  width:76px!important;
  height:76px!important;
  flex:0 0 76px;
}
.tf-proof-meta{
  display:grid;
  gap:2px;
  min-width:0;
  font-size:11px;
  color:#746b48;
}
.tf-proof-meta strong{
  color:#493b09;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.proof-file-missing{
  width:76px;
  height:76px;
  flex:0 0 76px;
  display:grid;
  place-items:center;
  padding:7px;
  border-radius:10px;
  background:#fdeaea;
  color:#a41616;
  font-size:10px;
  font-weight:900;
  text-align:center;
}

@media(max-width:767.98px){
  .brand-logo{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  body.serbanana-android-app .topbar{
    padding-top:calc(10px + max(env(safe-area-inset-top, 0px), 32px))!important;
    min-height:96px;
  }

  body.serbanana-android-app .brand{
    align-items:center;
  }

  .tf-proof-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:430px){
  .tf-proof-grid{
    grid-template-columns:1fr;
  }
}


/* ===== V17: penarikan kas fleksibel + Uang Pas semua transaksi ===== */
.cash-withdraw-panel{
  border:1px solid #eadc7d!important;
}
.cash-withdraw-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cash-withdraw-actions .btn{
  min-height:42px;
  font-weight:800;
}
.cash-exact{
  background:#1d7a42!important;
  border-color:#1d7a42!important;
  color:#fff!important;
  min-width:104px!important;
}
.cash-exact:hover{
  background:#176637!important;
}

.order-cash-panel{
  margin-top:10px;
  padding:10px;
  border:1px solid #e7d987;
  border-radius:11px;
  background:#fff9d9;
}
.order-cash-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:end;
}
.order-cash-input-wrap{
  min-width:0;
}
.order-cash-exact{
  min-height:38px;
  white-space:nowrap;
  font-weight:900!important;
}
.order-cash-change{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 8px;
  align-items:center;
  margin-top:8px;
  padding:8px 10px;
  border-radius:9px;
  background:#fff;
  border:1px solid #ede3ac;
}
.order-cash-change span{
  font-size:10px;
  color:#75683e;
}
.order-cash-change strong{
  text-align:right;
  font-size:13px;
  color:#3f340b;
}
.order-cash-change small{
  grid-column:1/-1;
  color:#766c4a;
  font-size:10px;
}

@media(max-width:767.98px){
  .cash-withdraw-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .cash-withdraw-actions .btn{
    width:100%;
  }
  .order-cash-row{
    grid-template-columns:minmax(0,1fr) 105px;
  }
}


/* ===== V17.2: halaman Uang Kas admin lebih sederhana ===== */
.cash-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.cash-page-head h1{
  margin:0;
  font-size:25px;
}
.cash-filter-card{
  padding:15px!important;
  margin-bottom:12px;
}
.cash-filter-form{
  display:grid;
  grid-template-columns:180px minmax(220px,360px) auto;
  gap:10px;
  align-items:end;
}
.cash-filter-form .btn{
  min-height:44px;
}
.cash-summary-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:14px;
}
.cash-summary-box{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:14px 16px;
  border:1px solid #eadb82;
  border-radius:15px;
  background:#fff;
  box-shadow:0 4px 16px rgba(94,76,7,.05);
}
.cash-summary-box span{
  color:#7a6a2d;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.cash-summary-box strong{
  color:#392f0d;
  font-size:22px;
}
.cash-summary-primary{
  background:#fff4ba;
}
.cash-branch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}
.cash-branch-card{
  padding:15px!important;
}
.cash-branch-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.cash-branch-card-head > div{
  display:grid;
  gap:3px;
}
.cash-branch-card-head strong{
  font-size:17px;
}
.cash-branch-card-head span{
  color:#7a704e;
  font-size:11px;
}
.cash-status-pill{
  padding:6px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.cash-status-pill.has-balance{
  background:#e4f4d3;
  color:#2e6710;
}
.cash-status-pill.zero-balance{
  background:#f4eee1;
  color:#796c51;
}
.cash-branch-balance{
  display:grid;
  gap:3px;
  margin:15px 0 10px;
  padding:14px;
  border-radius:13px;
  background:#fff5bc;
}
.cash-branch-balance span{
  color:#7d6b27;
  font-size:11px;
}
.cash-branch-balance strong{
  font-size:25px;
  color:#3c3108;
}
.cash-branch-mini-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.cash-branch-mini-stats > div{
  display:grid;
  gap:2px;
  padding:9px 10px;
  border:1px solid #eee2a8;
  border-radius:10px;
  background:#fff;
}
.cash-branch-mini-stats span{
  color:#827755;
  font-size:10px;
}
.cash-branch-mini-stats strong{
  color:#473b16;
  font-size:12px;
}
.cash-empty-card{
  min-height:180px;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:5px;
}
.cash-empty-icon{
  font-size:38px;
}
.cash-history-card{
  padding:0!important;
  overflow:hidden;
}
.cash-history-head{
  padding:14px 16px;
  border-bottom:1px solid #eee1a5;
}
.cash-history-head h2{
  margin:0 0 3px;
  font-size:17px;
}
.cash-history-head span{
  color:#7e7555;
  font-size:11px;
}
.cash-history-table{
  min-width:760px!important;
}
.cash-withdraw-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:6500;
  padding:14px;
  background:rgba(28,23,8,.55);
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(3px);
}
.cash-withdraw-modal.show{
  display:flex;
}
.cash-withdraw-modal-card{
  width:min(460px,100%);
  border-radius:18px;
  overflow:hidden;
  background:#fffef8;
  box-shadow:0 28px 90px rgba(0,0,0,.30);
}
.cash-withdraw-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:15px 17px;
  background:#ffdc42;
}
.cash-withdraw-modal-head > div{
  display:grid;
  gap:2px;
}
.cash-withdraw-modal-head span{
  font-size:11px;
  font-weight:800;
  color:#725e0d;
}
.cash-withdraw-modal-head strong{
  font-size:19px;
  color:#372d07;
}
.cash-withdraw-modal-close{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#9c1d1d;
  color:#fff;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}
#cash-withdraw-modal-form{
  padding:16px;
}
.cash-withdraw-current{
  display:grid;
  gap:3px;
  margin-bottom:15px;
  padding:13px 14px;
  border-radius:13px;
  background:#f2f8e8;
  border:1px solid #d9e8c5;
}
.cash-withdraw-current span{
  color:#60704a;
  font-size:11px;
}
.cash-withdraw-current strong{
  color:#24570c;
  font-size:23px;
}
.cash-fill-full{
  border:0;
  padding:7px 0 0;
  background:transparent;
  color:#286e1b;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
.cash-withdraw-modal-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.cash-withdraw-modal-actions .btn{
  min-height:45px;
  font-weight:900;
}

@media(max-width:767.98px){
  .cash-page-head{
    align-items:stretch;
    flex-direction:column;
  }
  .cash-page-head > form .btn{
    width:100%;
  }
  .cash-filter-form{
    grid-template-columns:1fr 1fr;
  }
  .cash-filter-form .btn{
    grid-column:1/-1;
    width:100%;
  }
  .cash-summary-row{
    grid-template-columns:1fr 1fr;
  }
  .cash-summary-primary{
    grid-column:1/-1;
  }
  .cash-branch-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:480px){
  .cash-filter-form{
    grid-template-columns:1fr;
  }
  .cash-filter-form .btn{
    grid-column:auto;
  }
  .cash-withdraw-modal{
    padding:8px;
  }
  .cash-withdraw-modal-actions{
    grid-template-columns:1fr;
  }
}


/* ===== V18: global loading / anti double action ===== */
.global-action-loader{
  display:none;
  position:fixed;
  inset:0;
  z-index:9000;
  padding:18px;
  background:rgba(255,250,222,.78);
  backdrop-filter:blur(5px);
  align-items:center;
  justify-content:center;
}
.global-action-loader.show{
  display:flex;
}
.global-action-loader-card{
  width:min(360px,92vw);
  padding:24px 22px;
  border:1px solid #e8d46c;
  border-radius:22px;
  background:#fffef7;
  box-shadow:0 28px 90px rgba(65,52,4,.22);
  text-align:center;
}
.global-loader-logo{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid #f3cf18;
}
.global-loader-spinner{
  width:38px;
  height:38px;
  margin:15px auto 12px;
  border:4px solid #f4e9a4;
  border-top-color:#e7b900;
  border-radius:50%;
  animation:serbananaSpin .72s linear infinite;
}
.global-action-loader-card strong{
  display:block;
  color:#3d3108;
  font-size:17px;
}
.global-action-loader-card > span{
  display:block;
  margin-top:5px;
  color:#766b45;
  font-size:12px;
}
.global-loader-skeleton{
  display:grid;
  gap:6px;
  margin-top:15px;
}
.global-loader-skeleton i{
  display:block;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#f5efc9 25%,#fff8dc 50%,#f5efc9 75%);
  background-size:200% 100%;
  animation:serbananaSkeleton 1.05s linear infinite;
}
.global-loader-skeleton i:nth-child(2){
  width:82%;
  margin:auto;
}
.global-loader-skeleton i:nth-child(3){
  width:62%;
  margin:auto;
}
.action-button-spinner{
  display:inline-block;
  width:15px;
  height:15px;
  margin-right:7px;
  vertical-align:-2px;
  border:2px solid rgba(255,255,255,.48);
  border-top-color:#fff;
  border-radius:50%;
  animation:serbananaSpin .65s linear infinite;
}
button.is-loading-action{
  cursor:wait!important;
  opacity:.82;
}
@keyframes serbananaSpin{
  to{transform:rotate(360deg)}
}
@keyframes serbananaSkeleton{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ===== V18: Monitoring Saldo Kas ===== */
.cash-monitor-kpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.cash-monitor-kpi{
  min-width:0;
  padding:14px;
  border:1px solid #eadc83;
  border-radius:15px;
  background:#fff;
  box-shadow:0 4px 14px rgba(77,62,8,.05);
}
.cash-monitor-kpi span{
  display:block;
  min-height:28px;
  color:#76672c;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.cash-monitor-kpi strong{
  display:block;
  margin-top:5px;
  color:#3a300b;
  font-size:20px;
  white-space:nowrap;
}
.cash-monitor-kpi-main{
  background:#fff1a8;
  border-color:#ddbe1e;
}
.cash-monitor-branch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;
}
.cash-monitor-branch-card{
  display:grid;
  gap:11px;
  padding:13px;
  border:1px solid #ece0a7;
  border-radius:14px;
  background:#fffdf4;
}
.cash-monitor-branch-card > div:first-child{
  display:grid;
  gap:2px;
}
.cash-monitor-branch-card > div:first-child strong{
  font-size:15px;
  color:#44370b;
}
.cash-monitor-branch-card > div:first-child span{
  color:#817552;
  font-size:10px;
}
.cash-monitor-balance{
  padding:11px;
  border-radius:11px;
  background:#eef8de;
}
.cash-monitor-balance span{
  display:block;
  color:#627345;
  font-size:10px;
}
.cash-monitor-balance strong{
  color:#2e650f;
  font-size:22px;
}
.cash-monitor-branch-detail{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#776c4a;
  font-size:10px;
}
.cash-monitor-table{
  min-width:720px;
}

/* ===== V18: Admin Rekap Bahan Habis ===== */
.oos-admin-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:14px;
}
.oos-admin-kpi{
  padding:15px;
  border:1px solid #eadc83;
  border-radius:15px;
  background:#fff;
}
.oos-admin-kpi span{
  display:block;
  color:#77692e;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.oos-admin-kpi strong{
  display:block;
  margin-top:5px;
  color:#3c310b;
  font-size:25px;
}
.oos-admin-branch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
}
.oos-admin-branch-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 10px;
  padding:13px;
  border:1px solid #ece1a8;
  border-radius:13px;
  background:#fffdf5;
}
.oos-admin-branch-card > strong{
  grid-column:1/-1;
  color:#44370c;
  font-size:15px;
}
.oos-admin-branch-card > div{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#786d4d;
  font-size:11px;
}
.oos-admin-branch-card small{
  grid-column:1/-1;
  color:#8a805f;
}
.oos-admin-table{
  min-width:820px;
}
.oos-check-table{
  min-width:650px;
}

@media(max-width:991.98px){
  .cash-monitor-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cash-monitor-kpi-main{
    grid-column:1/-1;
  }
}
@media(max-width:767.98px){
  .global-action-loader-card{
    padding:21px 18px;
    border-radius:18px;
  }
  .cash-monitor-kpis{
    grid-template-columns:1fr 1fr;
  }
  .cash-monitor-kpi strong{
    font-size:17px;
  }
  .oos-admin-kpis{
    grid-template-columns:1fr 1fr;
  }
  .oos-admin-kpi:last-child{
    grid-column:1/-1;
  }
}


/* ===== V19: Tutup Kasir Admin ===== */
.admin-shift-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:12px;
}
.admin-shift-card{
  padding:15px!important;
}
.admin-shift-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.admin-shift-head > div{
  display:grid;
  gap:2px;
}
.admin-shift-head strong{
  color:#3e320a;
  font-size:18px;
}
.admin-shift-head span{
  color:#80734c;
  font-size:11px;
}
.admin-shift-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:10px;
}
.admin-shift-info > div{
  display:grid;
  gap:2px;
  padding:9px 10px;
  border:1px solid #eee2a6;
  border-radius:10px;
  background:#fffdf4;
}
.admin-shift-info span,
.admin-shift-checks span{
  color:#807451;
  font-size:10px;
}
.admin-shift-info strong{
  color:#44380f;
  font-size:12px;
}
.admin-shift-checks{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-bottom:12px;
}
.admin-shift-checks > div{
  display:grid;
  gap:2px;
  padding:9px;
  border-radius:10px;
  border:1px solid #e8ddaa;
}
.admin-shift-checks > div.ok{
  background:#eff8e5;
  border-color:#d3e8bb;
}
.admin-shift-checks > div.warn{
  background:#fff0e9;
  border-color:#f0c3ae;
}
.admin-shift-checks strong{
  font-size:11px;
  color:#45390f;
}
.admin-shift-close-form{
  padding-top:10px;
  border-top:1px dashed #e6d78e;
}

@media(max-width:600px){
  .admin-shift-grid{
    grid-template-columns:1fr;
  }
  .admin-shift-checks{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
 * V19.1 - NAVIGASI KONSISTEN HP / TABLET / ANDROID
 * ==========================================================
 *
 * Tujuan:
 * - APK Android: bottom navigation SELALU aktif pada semua ukuran/orientasi.
 * - Browser touch tablet: bottom navigation tetap aktif sampai landscape.
 * - Desktop/laptop pointer-fine: desktop navigation tetap digunakan.
 * - Rotate portrait/landscape tidak memindahkan menu ke header.
 */

/* ---------- APK Android: selalu mode aplikasi ---------- */
body.serbanana-android-app{
  padding-bottom:calc(78px + max(env(safe-area-inset-bottom, 0px), 0px))!important;
}

body.serbanana-android-app .desktop-nav{
  display:none!important;
}

body.serbanana-android-app .topbar{
  position:sticky!important;
  top:0!important;
  z-index:1100!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:72px;
  padding-left:13px!important;
  padding-right:13px!important;
}

body.serbanana-android-app .topbar .brand{
  width:auto!important;
  max-width:100%;
  display:flex;
  align-items:center;
  min-width:0;
}

body.serbanana-android-app .brand-logo{
  flex:0 0 46px;
  width:46px;
  height:46px;
}

body.serbanana-android-app .topbar .brand > div{
  min-width:0;
}

body.serbanana-android-app .topbar strong,
body.serbanana-android-app .topbar small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.serbanana-android-app .mobile-bottom-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:1200!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:stretch!important;
  min-height:66px!important;
  padding:5px 5px calc(5px + max(env(safe-area-inset-bottom, 0px), 0px))!important;
  background:rgba(255,254,247,.98)!important;
  border-top:1px solid #e1cf64!important;
  box-shadow:0 -8px 25px rgba(78,61,0,.13)!important;
  backdrop-filter:blur(12px);
}

body.serbanana-android-app .mobile-bottom-nav a,
body.serbanana-android-app .mobile-bottom-nav button{
  appearance:none;
  border:0;
  background:transparent;
  color:#66531a;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:4px 2px;
  font-size:10px;
  font-weight:800;
  line-height:1.1;
  border-radius:12px;
  min-width:0;
  overflow:hidden;
}

body.serbanana-android-app .mobile-bottom-nav a > span:last-child,
body.serbanana-android-app .mobile-bottom-nav button > span:last-child{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
}

body.serbanana-android-app .mobile-nav-icon{
  font-size:21px;
  line-height:1;
  font-weight:900;
}

body.serbanana-android-app .mobile-more-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:1190!important;
  background:rgba(52,43,7,.42)!important;
}

body.serbanana-android-app .mobile-more-backdrop.show{
  display:block!important;
}

body.serbanana-android-app .mobile-more-menu{
  position:fixed!important;
  left:10px!important;
  right:10px!important;
  bottom:calc(75px + max(env(safe-area-inset-bottom, 0px), 0px))!important;
  z-index:1195!important;
  max-height:min(68vh,560px);
  overflow-y:auto;
  background:#fffef7!important;
  border:1px solid #e2d273!important;
  border-radius:20px!important;
  padding:10px!important;
  box-shadow:0 20px 60px rgba(63,50,0,.26)!important;
  transform:translateY(18px);
  opacity:0;
}

body.serbanana-android-app .mobile-more-menu.show{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  transform:translateY(0)!important;
  opacity:1!important;
}

body.serbanana-android-app .mobile-more-handle,
body.serbanana-android-app .mobile-more-title{
  grid-column:1/-1!important;
}

body.serbanana-android-app .mobile-more-menu a{
  text-decoration:none;
  color:#4c3d0d;
  border:1px solid #efe4a2;
  border-radius:14px;
  min-height:68px;
  background:#fffaf0;
  padding:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}

/* Landscape APK: menu tetap di bawah, hanya dibuat lebih ringkas. */
@media (orientation:landscape){
  body.serbanana-android-app{
    padding-bottom:calc(64px + max(env(safe-area-inset-bottom, 0px), 0px))!important;
  }

  body.serbanana-android-app .topbar{
    min-height:62px!important;
  }

  body.serbanana-android-app .brand-logo{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  body.serbanana-android-app .topbar strong{
    font-size:17px!important;
  }

  body.serbanana-android-app .topbar small{
    font-size:10px!important;
  }

  body.serbanana-android-app .mobile-bottom-nav{
    min-height:56px!important;
    padding-top:3px!important;
  }

  body.serbanana-android-app .mobile-bottom-nav a,
  body.serbanana-android-app .mobile-bottom-nav button{
    padding:2px;
    font-size:9px;
  }

  body.serbanana-android-app .mobile-nav-icon{
    font-size:18px;
  }

  body.serbanana-android-app .mobile-more-menu{
    bottom:calc(62px + max(env(safe-area-inset-bottom, 0px), 0px))!important;
    max-height:66vh;
  }
}

/* ---------- Browser HP/tablet touch ---------- */
/*
 * Phone <=900px selalu mode bottom-nav.
 * Tablet landscape sampai 1366px memakai bottom-nav hanya bila pointer utama
 * adalah touch/coarse, sehingga laptop 1280/1366 tetap memakai menu desktop.
 */
@media (max-width:900px), (max-width:1366px) and (pointer:coarse){
  body:not(.serbanana-android-app){
    padding-bottom:calc(78px + max(env(safe-area-inset-bottom, 0px), 0px));
  }

  body:not(.serbanana-android-app) .desktop-nav{
    display:none!important;
  }

  body:not(.serbanana-android-app) .topbar{
    position:sticky;
    top:0;
    z-index:1100;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:66px;
    padding:10px 13px;
  }

  body:not(.serbanana-android-app) .topbar .brand{
    width:auto!important;
    min-width:0;
    max-width:100%;
  }

  body:not(.serbanana-android-app) .topbar strong{
    font-size:18px;
  }

  body:not(.serbanana-android-app) .topbar small{
    font-size:11px;
  }

  body:not(.serbanana-android-app) .mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1200;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    min-height:66px;
    padding:5px 5px calc(5px + max(env(safe-area-inset-bottom, 0px), 0px));
    background:rgba(255,254,247,.98);
    border-top:1px solid #e1cf64;
    box-shadow:0 -8px 25px rgba(78,61,0,.13);
    backdrop-filter:blur(12px);
  }

  body:not(.serbanana-android-app) .mobile-bottom-nav a,
  body:not(.serbanana-android-app) .mobile-bottom-nav button{
    appearance:none;
    border:0;
    background:transparent;
    color:#66531a;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:4px 2px;
    font-size:10px;
    font-weight:800;
    line-height:1.1;
    border-radius:12px;
    min-width:0;
    overflow:hidden;
  }

  body:not(.serbanana-android-app) .mobile-bottom-nav a > span:last-child,
  body:not(.serbanana-android-app) .mobile-bottom-nav button > span:last-child{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
  }

  body:not(.serbanana-android-app) .mobile-nav-icon{
    font-size:21px;
    line-height:1;
  }

  body:not(.serbanana-android-app) .mobile-more-backdrop{
    position:fixed;
    inset:0;
    z-index:1190;
    background:rgba(52,43,7,.42);
  }

  body:not(.serbanana-android-app) .mobile-more-backdrop.show{
    display:block!important;
  }

  body:not(.serbanana-android-app) .mobile-more-menu{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(75px + max(env(safe-area-inset-bottom, 0px), 0px));
    z-index:1195;
    max-height:min(68vh,560px);
    overflow-y:auto;
    background:#fffef7;
    border:1px solid #e2d273;
    border-radius:20px;
    padding:10px;
    box-shadow:0 20px 60px rgba(63,50,0,.26);
    transform:translateY(18px);
    opacity:0;
  }

  body:not(.serbanana-android-app) .mobile-more-menu.show{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    transform:translateY(0);
    opacity:1;
  }

  body:not(.serbanana-android-app) .mobile-more-handle,
  body:not(.serbanana-android-app) .mobile-more-title{
    grid-column:1/-1;
  }

  body:not(.serbanana-android-app) .mobile-more-menu a{
    text-decoration:none;
    color:#4c3d0d;
    border:1px solid #efe4a2;
    border-radius:14px;
    min-height:68px;
    background:#fffaf0;
    padding:9px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-align:center;
  }
}

/* Tablet touch landscape: tetap bottom-nav, sedikit lebih ringkas. */
@media (min-width:768px) and (max-width:1366px) and (pointer:coarse) and (orientation:landscape){
  body:not(.serbanana-android-app){
    padding-bottom:64px;
  }

  body:not(.serbanana-android-app) .topbar{
    min-height:58px;
    padding-top:7px;
    padding-bottom:7px;
  }

  body:not(.serbanana-android-app) .brand-logo{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  body:not(.serbanana-android-app) .mobile-bottom-nav{
    min-height:56px;
    padding-top:3px;
    padding-bottom:3px;
  }

  body:not(.serbanana-android-app) .mobile-bottom-nav a,
  body:not(.serbanana-android-app) .mobile-bottom-nav button{
    font-size:9px;
    padding:2px;
  }

  body:not(.serbanana-android-app) .mobile-nav-icon{
    font-size:18px;
  }

  body:not(.serbanana-android-app) .mobile-more-menu{
    bottom:62px;
    max-height:65vh;
  }
}


/* ===== V19.2: tombol Cetak PDF ===== */
.page-head .btn-danger{
  white-space:nowrap;
}


/* =========================================================
 * V20 - DASHBOARD INFORMASI SERBANANA
 * ========================================================= */
.dashboard-v20-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.dashboard-v20-head h1{
  margin:1px 0 3px;
  color:#3d3108;
  font-size:30px;
  line-height:1.08;
}
.dashboard-v20-head p{
  margin:0;
  color:#786c47;
  font-size:12px;
}
.dashboard-v20-eyebrow{
  display:block;
  color:#977a08;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.dashboard-v20-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.dashboard-alert{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:14px;
}
.dashboard-alert-danger{
  border:1px solid #efb7a5;
  background:#fff0ea;
  color:#6f2016;
}
.dashboard-alert-icon{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#b42318;
  color:#fff;
  font-size:19px;
  font-weight:900;
}
.dashboard-alert > div:nth-child(2){
  display:grid;
  gap:2px;
}
.dashboard-alert strong{
  font-size:13px;
}
.dashboard-alert span{
  font-size:11px;
  color:#805147;
}

.dashboard-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.dashboard-kpi-grid-cashier{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.dashboard-kpi-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:14px 13px;
  border:1px solid #eadf9f;
  border-radius:16px;
  background:#fff;
  box-shadow:0 5px 18px rgba(77,61,5,.055);
}
.dashboard-kpi-card::after{
  content:"";
  position:absolute;
  right:-24px;
  bottom:-24px;
  width:68px;
  height:68px;
  border-radius:50%;
  background:rgba(239,201,24,.09);
}
.dashboard-kpi-main{
  background:linear-gradient(145deg,#ffe15a,#fff4b2);
  border-color:#ddbd19;
}
.dashboard-kpi-warning{
  border-color:#efbb74;
  background:#fff6e8;
}
.dashboard-kpi-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  border-radius:10px;
  background:#fff8cf;
  color:#725b04;
  font-size:11px;
  font-weight:900;
}
.dashboard-kpi-main .dashboard-kpi-icon{
  background:rgba(255,255,255,.68);
}
.dashboard-kpi-card > span{
  display:block;
  min-height:26px;
  color:#766a45;
  font-size:9px;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.dashboard-kpi-card > strong{
  display:block;
  position:relative;
  z-index:1;
  margin:4px 0 2px;
  overflow:hidden;
  color:#3c310c;
  font-size:19px;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-kpi-card > small{
  position:relative;
  z-index:1;
  color:#837757;
  font-size:9px;
}
.dashboard-shift-stat{
  font-size:15px!important;
}

.dashboard-section-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:12px;
}
.dashboard-section-grid-main{
  align-items:stretch;
}
.dashboard-panel{
  min-width:0;
  padding:15px!important;
}
.dashboard-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.dashboard-panel-head > div:first-child{
  min-width:0;
}
.dashboard-panel-head > div:first-child > span{
  display:block;
  margin-bottom:2px;
  color:#9b7c08;
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.dashboard-panel-head h2{
  margin:0;
  color:#3e330d;
  font-size:17px;
}
.dashboard-panel-total{
  flex:0 0 auto;
  display:grid;
  justify-items:end;
  gap:1px;
  text-align:right;
}
.dashboard-panel-total span{
  color:#7e7453;
  font-size:9px;
}
.dashboard-panel-total strong{
  color:#3c310c;
  font-size:16px;
}
.dashboard-panel-total small{
  color:#8d8262;
  font-size:9px;
}
.dashboard-panel-link{
  color:#76600c;
  font-size:10px;
  font-weight:900;
  text-decoration:none;
}

.dashboard-seven-bars{
  display:grid;
  grid-template-columns:repeat(7,minmax(54px,1fr));
  gap:7px;
  height:225px;
  align-items:end;
}
.dashboard-day-bar{
  min-width:0;
  height:100%;
  display:grid;
  grid-template-rows:32px minmax(0,1fr) 16px 14px;
  align-items:end;
  text-align:center;
}
.dashboard-day-amount{
  align-self:center;
  overflow:hidden;
  color:#746a4a;
  font-size:8px;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-bar-track{
  position:relative;
  width:72%;
  height:100%;
  min-height:70px;
  margin:0 auto;
  overflow:hidden;
  border-radius:9px 9px 4px 4px;
  background:#f4efd1;
}
.dashboard-bar-track i{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  min-height:4px;
  border-radius:9px 9px 4px 4px;
  background:linear-gradient(180deg,#f5cf1a,#dba800);
}
.dashboard-day-bar strong{
  color:#4e4118;
  font-size:9px;
}
.dashboard-day-bar > span{
  color:#958a69;
  font-size:8px;
}

.dashboard-ranking-list{
  display:grid;
  gap:11px;
}
.dashboard-ranking-row{
  display:grid;
  grid-template-columns:29px minmax(0,1fr);
  gap:9px;
  align-items:start;
}
.dashboard-ranking-number{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fff2a3;
  color:#664f00;
  font-size:11px;
  font-weight:900;
}
.dashboard-ranking-content{
  min-width:0;
}
.dashboard-ranking-title{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:5px;
}
.dashboard-ranking-title strong{
  min-width:0;
  overflow:hidden;
  color:#44380f;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-ranking-title span{
  flex:0 0 auto;
  color:#57470d;
  font-size:10px;
  font-weight:900;
}
.dashboard-ranking-track{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#f0ebd1;
}
.dashboard-ranking-track i{
  display:block;
  height:100%;
  min-width:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#e2b300,#f2d02e);
}
.dashboard-ranking-content small{
  display:block;
  margin-top:4px;
  color:#958a69;
  font-size:8px;
}

.dashboard-week-table{
  min-width:960px!important;
  font-size:10px;
}
.dashboard-week-table thead th{
  vertical-align:bottom;
  background:#fff8d7;
}
.dashboard-week-table thead th span{
  display:block;
  font-size:9px;
}
.dashboard-week-table thead th small{
  display:block;
  color:#92855f;
  font-size:8px;
}
.dashboard-week-total-head,
.dashboard-week-total-cell{
  background:#fff3b3!important;
}
.dashboard-week-table tfoot th{
  background:#f8f1d2;
}

.dashboard-branch-status-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.dashboard-branch-status-card{
  padding:11px;
  border:1px solid #ece1a9;
  border-radius:13px;
  background:#fffdf5;
}
.dashboard-branch-status-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.dashboard-branch-status-head strong{
  min-width:0;
  overflow:hidden;
  color:#45390f;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-status-badge{
  flex:0 0 auto;
  padding:4px 6px;
  border-radius:999px;
  font-size:7px;
  font-weight:900;
}
.dashboard-status-badge.open{
  background:#ddf1ce;
  color:#2e6514;
}
.dashboard-status-badge.closed{
  background:#e6e6e6;
  color:#555;
}
.dashboard-status-badge.not-open{
  background:#fff0d6;
  color:#8a5800;
}
.dashboard-branch-status-money{
  margin:10px 0 7px;
  color:#3c310b;
  font-size:17px;
  font-weight:900;
}
.dashboard-branch-status-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px 8px;
  color:#877b58;
  font-size:8px;
}
.dashboard-branch-status-meta .danger{
  color:#b42318;
  font-weight:900;
}

.dashboard-product-list{
  display:grid;
  gap:7px;
}
.dashboard-product-row{
  display:grid;
  grid-template-columns:29px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid #f0e7ba;
}
.dashboard-product-row:last-child{
  border-bottom:0;
}
.dashboard-product-rank{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fff3ac;
  color:#664e00;
  font-size:10px;
  font-weight:900;
}
.dashboard-product-row > div{
  min-width:0;
  display:grid;
  gap:1px;
}
.dashboard-product-row > div strong{
  overflow:hidden;
  color:#463a10;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-product-row > div small{
  color:#928765;
  font-size:8px;
}
.dashboard-product-row > b{
  color:#4b3e11;
  font-size:10px;
  white-space:nowrap;
}

.dashboard-operational-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px!important;
}
.dashboard-operational-card h2{
  margin:1px 0 0;
  font-size:17px;
}
.dashboard-operational-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

@media(max-width:1180px){
  .dashboard-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .dashboard-kpi-grid-cashier{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .dashboard-section-grid{
    grid-template-columns:1fr;
  }
  .dashboard-branch-status-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:900px){
  .dashboard-v20-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .dashboard-kpi-grid,
  .dashboard-kpi-grid-cashier{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-seven-bars{
    height:205px;
    gap:4px;
  }
  .dashboard-day-amount{
    font-size:7px;
  }
  .dashboard-branch-status-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px){
  .dashboard-v20-head h1{
    font-size:25px;
  }
  .dashboard-v20-head-actions{
    width:100%;
  }
  .dashboard-v20-head-actions .btn{
    flex:1 1 0;
  }
  .dashboard-kpi-card{
    padding:12px 11px;
  }
  .dashboard-kpi-card > strong{
    font-size:16px;
  }
  .dashboard-kpi-card > span{
    min-height:24px;
    font-size:8px;
  }
  .dashboard-panel{
    padding:12px!important;
  }
  .dashboard-panel-head{
    align-items:flex-start;
  }
  .dashboard-panel-head h2{
    font-size:15px;
  }
  .dashboard-panel-total strong{
    font-size:13px;
  }
  .dashboard-seven-bars{
    height:188px;
  }
  .dashboard-bar-track{
    width:78%;
  }
  .dashboard-day-amount{
    transform:rotate(-28deg);
    transform-origin:center;
    overflow:visible;
    font-size:6px;
  }
  .dashboard-branch-status-list{
    grid-template-columns:1fr;
  }
  .dashboard-alert{
    grid-template-columns:auto minmax(0,1fr);
  }
  .dashboard-alert .btn{
    grid-column:1/-1;
    width:100%;
  }
  .dashboard-operational-card{
    align-items:stretch;
    flex-direction:column;
  }
  .dashboard-operational-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .dashboard-operational-actions .btn{
    width:100%;
  }
}


/* =========================================================
 * V20.1 - Dashboard responsive + item cabang + modal orders
 * ========================================================= */

/* Jangan biarkan elemen dashboard mendorong lebar halaman. */
.dashboard-v20-head,
.dashboard-kpi-grid,
.dashboard-section-grid,
.dashboard-panel,
.dashboard-seven-bars,
.dashboard-ranking-list,
.dashboard-branch-status-list,
.dashboard-product-list,
.dashboard-operational-card{
  min-width:0;
  max-width:100%;
}

.dashboard-panel{
  overflow:hidden;
}

.dashboard-panel > .table-responsive{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

.dashboard-week-table{
  width:max-content!important;
  min-width:100%!important;
  max-width:none!important;
}

.dashboard-week-table th,
.dashboard-week-table td{
  max-width:190px;
}

.dashboard-week-branch{
  min-width:135px;
}

.dashboard-week-branch a{
  display:block;
  overflow:hidden;
  color:#42350c;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dashboard-week-branch small{
  display:block;
  margin-top:2px;
  color:#928663;
  font-size:8px;
  font-weight:600;
}

.dashboard-day-amount{
  max-width:100%;
  padding:0 1px;
  overflow:hidden!important;
  text-overflow:ellipsis;
  white-space:nowrap;
  transform:none!important;
}

.dashboard-ranking-row{
  color:inherit;
  text-decoration:none;
  border-radius:10px;
  transition:background .15s ease, transform .15s ease;
}

.dashboard-ranking-row:hover{
  background:#fff9dc;
}

.dashboard-ranking-row:active{
  transform:scale(.995);
}

.dashboard-branch-status-card{
  display:block;
  color:inherit;
  text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.dashboard-branch-status-card:hover{
  border-color:#d7bd3e;
  box-shadow:0 6px 18px rgba(82,64,4,.09);
}

.dashboard-branch-status-card:active{
  transform:scale(.995);
}

.dashboard-branch-items{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 8px;
  padding:7px 9px;
  border-radius:9px;
  background:#fff7cb;
}

.dashboard-branch-items span{
  color:#796b3d;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}

.dashboard-branch-items strong{
  color:#4c3d08;
  font-size:14px;
}

.dashboard-branch-open-link{
  display:block;
  margin-top:8px;
  padding-top:7px;
  border-top:1px dashed #eadb96;
  color:#7d6508;
  font-size:8px;
  font-weight:900;
  text-align:right;
}

/* Versi kartu untuk rekap 7 hari pada HP. */
.dashboard-week-mobile{
  display:none;
}

.dashboard-week-mobile-card{
  color:inherit;
  text-decoration:none;
}

.dashboard-week-mobile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:9px;
  margin-bottom:10px;
}

.dashboard-week-mobile-head > div{
  min-width:0;
  display:grid;
  gap:2px;
}

.dashboard-week-mobile-head strong{
  overflow:hidden;
  color:#43370e;
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dashboard-week-mobile-head span{
  color:#887b57;
  font-size:9px;
}

.dashboard-week-mobile-head > b{
  flex:0 0 auto;
  color:#3e320a;
  font-size:13px;
  white-space:nowrap;
}

.dashboard-week-mobile-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
}

.dashboard-week-mobile-days > div{
  min-width:0;
  padding:6px 2px;
  border:1px solid #eee2a7;
  border-radius:8px;
  background:#fffdf5;
  text-align:center;
}

.dashboard-week-mobile-days span{
  display:grid;
  gap:1px;
  color:#665623;
  font-size:8px;
  font-weight:900;
}

.dashboard-week-mobile-days span small{
  color:#958968;
  font-size:6px;
  font-weight:600;
}

.dashboard-week-mobile-days strong{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:#4a3d11;
  font-size:7px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dashboard-week-mobile-link{
  display:block;
  margin-top:9px;
  color:#806707;
  font-size:9px;
  font-weight:900;
  text-align:right;
}

/* Modal pesanan harus berada DI ATAS bottom navigation Android. */
.modal{
  z-index:5200!important;
}

#active-orders-modal .modal-box,
#unpaid-orders-modal .modal-box{
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
  max-height:calc(100dvh - 18px)!important;
}

#active-orders-modal .modal-head,
#unpaid-orders-modal .modal-head{
  flex:0 0 auto;
  z-index:3;
}

#active-orders-modal .modal-body,
#unpaid-orders-modal .modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-padding-bottom:100px;
}

#active-orders-modal .active-orders-grid,
#unpaid-orders-modal .active-orders-grid{
  align-items:start;
  padding-bottom:72px;
}

#active-orders-modal .order-grid-card,
#unpaid-orders-modal .order-grid-card{
  scroll-margin-bottom:110px;
}

/* Update selalu punya ruang sendiri dan tidak ikut tertutup konten lain. */
.order-grid-update{
  position:relative;
  z-index:2;
  display:block;
  margin-top:10px!important;
  margin-bottom:2px!important;
}

/* Toast harus tetap di atas modal. */
.toast{
  z-index:8000!important;
}

@media(max-width:900px){
  /*
   * Di HP, tabel 8 kolom tidak dipaksakan masuk viewport.
   * Diganti kartu cabang agar halaman sama sekali tidak melebar ke kanan.
   */
  .dashboard-week-table{
    display:none!important;
  }

  .dashboard-panel > .table-responsive:has(.dashboard-week-table){
    display:none!important;
  }

  .dashboard-week-mobile{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .dashboard-week-mobile-card{
    display:block;
    min-width:0;
    padding:11px;
    border:1px solid #eadc97;
    border-radius:12px;
    background:#fffef8;
  }

  .dashboard-seven-bars{
    width:100%;
    min-width:0;
    grid-template-columns:repeat(7,minmax(0,1fr));
  }

  .dashboard-day-bar{
    min-width:0;
  }

  .dashboard-bar-track{
    width:min(76%,30px);
  }

  .dashboard-day-amount{
    font-size:6px!important;
  }

  #active-orders-modal,
  #unpaid-orders-modal{
    align-items:stretch!important;
    padding:4px!important;
  }

  #active-orders-modal .modal-box,
  #unpaid-orders-modal .modal-box{
    width:100%!important;
    height:calc(100dvh - 8px)!important;
    max-height:calc(100dvh - 8px)!important;
    border-radius:14px!important;
  }

  #active-orders-modal .modal-body,
  #unpaid-orders-modal .modal-body{
    padding:8px 8px calc(105px + max(env(safe-area-inset-bottom, 0px), 0px))!important;
  }

  #active-orders-modal .active-orders-grid,
  #unpaid-orders-modal .active-orders-grid{
    padding-bottom:12px;
  }
}

@media(max-width:600px){
  .dashboard-kpi-grid,
  .dashboard-kpi-grid-cashier{
    width:100%;
  }

  .dashboard-kpi-card{
    min-width:0;
    overflow:hidden;
  }

  .dashboard-kpi-card > strong{
    max-width:100%;
  }

  .dashboard-panel-head{
    min-width:0;
  }

  .dashboard-panel-head > div,
  .dashboard-panel-total{
    min-width:0;
  }

  .dashboard-panel-total strong{
    max-width:135px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .dashboard-week-mobile-days{
    gap:3px;
  }

  .dashboard-week-mobile-days > div{
    padding:5px 1px;
  }

  .dashboard-week-mobile-head > b{
    font-size:11px;
  }
}

/* APK landscape / tablet touch: modal tetap penuh dan bottom nav tidak menutup aksi. */
body.serbanana-android-app #active-orders-modal,
body.serbanana-android-app #unpaid-orders-modal{
  z-index:5300!important;
}

body.serbanana-android-app #active-orders-modal .modal-body,
body.serbanana-android-app #unpaid-orders-modal .modal-body{
  padding-bottom:calc(105px + max(env(safe-area-inset-bottom, 0px), 0px))!important;
}


/* =========================================================
 * V20.2 - Tablet loader + camera viewport + edit menu order
 * ========================================================= */

/* Preloader harus selalu tepat di tengah viewport, termasuk tablet landscape. */
.global-action-loader{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-width:100vw!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))!important;
  transform:none!important;
  place-items:center!important;
  align-items:center!important;
  justify-content:center!important;
}
.global-action-loader.show{
  display:grid!important;
}
.global-action-loader-card{
  position:relative!important;
  inset:auto!important;
  margin:auto!important;
  align-self:center!important;
  justify-self:center!important;
  transform:none!important;
  width:min(380px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
}

/* Saat kamera aktif, halaman belakang tidak boleh ikut scroll. */
body.serbanana-camera-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

/* Kamera selalu fit di viewport dan tombol foto selalu terlihat. */
.direct-camera-modal{
  position:fixed!important;
  inset:0!important;
  z-index:9800!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))!important;
  margin:0!important;
  overflow:hidden!important;
  place-items:center!important;
  align-items:center!important;
  justify-content:center!important;
}
.direct-camera-modal.show{
  display:grid!important;
}
.direct-camera-card{
  position:relative!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  width:min(760px,calc(100vw - 18px))!important;
  height:min(760px,calc(100dvh - 18px))!important;
  max-width:calc(100vw - 18px)!important;
  max-height:calc(100dvh - 18px)!important;
  margin:auto!important;
  overflow:hidden!important;
  border-radius:18px!important;
}
.direct-camera-head{
  position:relative!important;
  z-index:3!important;
  flex:0 0 auto!important;
}
.direct-camera-view{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
.direct-camera-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}
.direct-camera-actions{
  position:relative!important;
  z-index:4!important;
  flex:0 0 auto!important;
  padding:10px 12px calc(10px + max(env(safe-area-inset-bottom,0px),0px))!important;
  background:#171717!important;
}
.direct-camera-actions .btn{
  min-height:46px!important;
}

/* Tablet portrait / landscape: tetap center, video menyesuaikan ruang yang tersedia. */
@media (max-width:1366px) and (pointer:coarse),
       (max-width:1366px) and (hover:none),
       (max-width:900px){
  .direct-camera-card{
    width:min(820px,calc(100vw - 12px))!important;
    height:calc(100dvh - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
    border-radius:15px!important;
  }
  .direct-camera-head{
    padding:9px 11px!important;
  }
  .direct-camera-head strong{
    font-size:14px!important;
  }
  .direct-camera-head .small{
    font-size:9px!important;
  }
  .direct-camera-close{
    width:38px!important;
    height:38px!important;
    font-size:26px!important;
  }
}

@media (orientation:landscape) and (max-height:700px){
  .direct-camera-card{
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }
  .direct-camera-head{
    padding:7px 10px!important;
  }
  .direct-camera-head .small{
    display:none!important;
  }
  .direct-camera-actions{
    padding-top:7px!important;
    padding-bottom:calc(7px + max(env(safe-area-inset-bottom,0px),0px))!important;
  }
  .direct-camera-actions .btn{
    min-height:39px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }
}

/* Editor menu di kartu Pesanan Aktif. */
.order-menu-summary-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:-2px 0 8px;
}
.order-menu-summary-actions > span{
  color:#81744d;
  font-size:9px;
  font-weight:800;
}
.order-menu-edit-toggle{
  min-height:31px!important;
  padding:5px 9px!important;
  font-size:10px!important;
  font-weight:900!important;
}
.order-menu-edit-toggle.active{
  background:#785f08!important;
  border-color:#785f08!important;
  color:#fff!important;
}
.order-menu-editor{
  margin:0 0 10px;
  padding:10px;
  border:1px solid #dac34c;
  border-radius:11px;
  background:#fff8cf;
}
.order-menu-editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.order-menu-editor-head > div{
  min-width:0;
  display:grid;
  gap:1px;
}
.order-menu-editor-head strong{
  color:#483900;
  font-size:11px;
}
.order-menu-editor-head small{
  color:#85784a;
  font-size:8px;
}
.order-menu-editor-list{
  display:grid;
  gap:6px;
  margin-bottom:7px;
}
.order-menu-edit-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 62px auto;
  gap:5px;
  align-items:end;
  padding:7px;
  border:1px solid #e9dc93;
  border-radius:9px;
  background:#fffef7;
}
.order-menu-edit-row label{
  display:block;
  margin-bottom:2px;
  color:#766837;
  font-size:8px;
  font-weight:900;
}
.order-menu-edit-row .form-select,
.order-menu-edit-row .form-control{
  min-height:33px!important;
  padding-top:4px!important;
  padding-bottom:4px!important;
  font-size:10px!important;
}
.order-menu-remove{
  min-height:33px!important;
  padding:5px 7px!important;
  font-size:9px!important;
  font-weight:900!important;
}
.order-menu-add{
  min-height:33px!important;
  font-size:10px!important;
  font-weight:900!important;
}
.order-menu-editor-note{
  margin:7px 0;
  padding:7px 8px;
  border-radius:8px;
  background:#fff3ae;
  color:#6e5c1d;
  font-size:8px;
  line-height:1.35;
}
.order-menu-save{
  min-height:36px!important;
  font-size:10px!important;
  font-weight:900!important;
}

/* Pesanan terakhir harus punya ruang aman lebih besar dari bottom nav. */
#active-orders-modal .modal-body,
#unpaid-orders-modal .modal-body{
  padding-bottom:calc(150px + max(env(safe-area-inset-bottom,0px),0px))!important;
  scroll-padding-bottom:170px!important;
}
#active-orders-modal .active-orders-grid,
#unpaid-orders-modal .active-orders-grid{
  padding-bottom:90px!important;
}
#active-orders-modal .order-grid-card:last-child,
#unpaid-orders-modal .order-grid-card:last-child{
  margin-bottom:90px!important;
}

@media(max-width:700px){
  .order-menu-edit-row{
    grid-template-columns:minmax(0,1fr) 58px!important;
  }
  .order-menu-remove{
    grid-column:1/-1;
    width:100%;
  }
}


/* =========================================================
 * V20.3 - FINAL tablet center + camera center + order manager
 * ========================================================= */

/*
 * Overlay sengaja memakai top/left/width/height inline dari visualViewport.
 * CSS di bawah adalah fallback dan mengalahkan rule versi lama.
 */
.global-action-loader{
  position:fixed!important;
  inset:auto!important;
  margin:0!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
  place-items:center!important;
  transform:none!important;
  overflow:hidden!important;
}
.global-action-loader.show{
  display:flex!important;
}
.global-action-loader-card{
  position:relative!important;
  inset:auto!important;
  margin:0!important;
  transform:none!important;
  flex:0 0 auto!important;
}

/* Kamera: overlay selalu center dan action tidak pernah di bawah viewport. */
.direct-camera-modal{
  position:fixed!important;
  inset:auto!important;
  margin:0!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
  transform:none!important;
  overflow:hidden!important;
  background:rgba(0,0,0,.94)!important;
}
.direct-camera-modal.show{
  display:flex!important;
}
.direct-camera-card{
  position:relative!important;
  inset:auto!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  transform:none!important;
}
.direct-camera-head{
  flex:0 0 auto!important;
}
.direct-camera-view{
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
}
.direct-camera-video{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
}
.direct-camera-actions{
  position:relative!important;
  flex:0 0 auto!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)!important;
  gap:8px!important;
  padding:9px 10px calc(9px + max(env(safe-area-inset-bottom,0px),0px))!important;
  background:#171717!important;
}
.direct-camera-actions .btn{
  min-width:0!important;
  min-height:42px!important;
  white-space:normal!important;
}

/* Modal khusus Kelola Menu Pesanan Aktif. */
body.serbanana-order-manager-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

.order-menu-manager{
  display:none;
  position:fixed;
  z-index:99000;
  box-sizing:border-box;
  background:rgba(35,29,8,.68);
  backdrop-filter:blur(4px);
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.order-menu-manager.show{
  display:flex!important;
}

.order-menu-manager-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  width:min(720px,100%);
  overflow:hidden;
  border:1px solid #dfc94f;
  border-radius:18px;
  background:#fffef8;
  box-shadow:0 26px 90px rgba(49,39,0,.3);
}

.order-menu-manager-head{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background:#ffdc42;
  border-bottom:1px solid #d6b31d;
}

.order-menu-manager-head > div{
  min-width:0;
  display:grid;
  gap:2px;
}

.order-menu-manager-head > div > span{
  color:#76600a;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
}

.order-menu-manager-head strong{
  color:#372d07;
  font-size:18px;
}

.order-menu-manager-head small{
  overflow:hidden;
  color:#75651e;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.order-menu-manager-close{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#9f1f1f;
  color:#fff;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}

.order-menu-manager-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:11px;
}

.order-menu-manager-list{
  display:grid;
  gap:8px;
  margin-bottom:9px;
}

.order-manager-row{
  padding:9px;
  border:1px solid #e8dc95;
  border-radius:11px;
  background:#fff;
}

.order-manager-row-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}

.order-manager-row-title > span{
  min-width:0;
  overflow:hidden;
  color:#44370d;
  font-size:11px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.order-manager-remove{
  flex:0 0 auto;
  border:0;
  border-radius:8px;
  padding:6px 9px;
  background:#fee9e5;
  color:#a52a1d;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

.order-manager-fields{
  display:grid;
  grid-template-columns:minmax(0,1fr) 90px;
  gap:7px;
}

.order-manager-fields label{
  display:block;
  margin-bottom:3px;
  color:#766a45;
  font-size:8px;
  font-weight:900;
}

.order-manager-fields .form-select,
.order-manager-fields .form-control{
  min-height:38px!important;
  font-size:11px!important;
}

.order-menu-manager-warning{
  margin-top:9px;
  padding:8px 9px;
  border-radius:9px;
  background:#fff2af;
  color:#695719;
  font-size:9px;
  line-height:1.4;
}

.order-menu-manager-footer{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:8px;
  padding:10px 11px calc(10px + max(env(safe-area-inset-bottom,0px),0px));
  border-top:1px solid #e4d78b;
  background:#fffef8;
}

.order-menu-manager-footer .btn{
  min-height:43px!important;
  font-weight:900!important;
}

.order-menu-manage{
  min-height:34px!important;
  padding:6px 9px!important;
  font-size:10px!important;
  font-weight:900!important;
}

/* Editor inline lama tidak lagi dipakai. */
.order-menu-editor{
  display:none!important;
}

@media(max-width:700px){
  .order-menu-manager-card{
    border-radius:14px;
  }

  .order-menu-manager-head{
    padding:10px 11px;
  }

  .order-menu-manager-head strong{
    font-size:15px;
  }

  .order-manager-fields{
    grid-template-columns:minmax(0,1fr) 74px;
  }

  .order-menu-manager-footer{
    grid-template-columns:1fr 1.35fr;
  }
}

@media(orientation:landscape) and (max-height:700px){
  .direct-camera-head{
    padding:6px 9px!important;
  }

  .direct-camera-head .small{
    display:none!important;
  }

  .direct-camera-actions{
    padding-top:6px!important;
    padding-bottom:calc(6px + max(env(safe-area-inset-bottom,0px),0px))!important;
  }

  .direct-camera-actions .btn{
    min-height:36px!important;
    font-size:10px!important;
  }

  .order-menu-manager-head{
    padding-top:7px;
    padding-bottom:7px;
  }

  .order-menu-manager-body{
    padding:8px;
  }

  .order-menu-manager-footer{
    padding-top:7px;
    padding-bottom:calc(7px + max(env(safe-area-inset-bottom,0px),0px));
  }
}


/* =========================================================
 * V20.4 - CAMERA MOBILE TOUCH FIX
 * ========================================================= */

.direct-camera-modal{
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

.direct-camera-card{
  pointer-events:auto!important;
}

.direct-camera-head{
  position:relative!important;
  z-index:20!important;
  pointer-events:auto!important;
}

.direct-camera-close{
  position:relative!important;
  z-index:30!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:rgba(255,255,255,.12)!important;
}

.direct-camera-view,
.direct-camera-video,
.direct-camera-loading{
  pointer-events:none!important;
}

.direct-camera-actions{
  position:relative!important;
  z-index:30!important;
  pointer-events:auto!important;
}

.direct-camera-actions .btn{
  position:relative!important;
  z-index:31!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:rgba(255,255,255,.12)!important;
}

/* HP: kamera full-screen stabil, preview selalu di tengah. */
@media(max-width:640px){
  .direct-camera-modal{
    padding:0!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }

  .direct-camera-card{
    width:100%!important;
    max-width:100%!important;
    height:var(--camera-real-height,100dvh)!important;
    max-height:var(--camera-real-height,100dvh)!important;
    margin:0!important;
    border-radius:0!important;
  }

  .direct-camera-head{
    flex:0 0 auto!important;
    padding:
      calc(8px + max(env(safe-area-inset-top,0px),0px))
      10px
      8px!important;
  }

  .direct-camera-view{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#000!important;
  }

  .direct-camera-video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }

  .direct-camera-actions{
    flex:0 0 auto!important;
    grid-template-columns:1fr 1.35fr!important;
    padding:
      8px
      9px
      calc(8px + max(env(safe-area-inset-bottom,0px),0px))!important;
  }

  .direct-camera-actions .btn{
    min-height:46px!important;
    font-size:11px!important;
  }

  .direct-camera-close{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }
}


/* =========================================================
 * V20.5 - THUMBNAIL BUKTI TF DI TENGAH
 * ========================================================= */

/* Input Transaksi */
[data-payment-proof-preview-wrap]{
  width:100%!important;
  max-width:440px!important;
  margin:12px auto 0!important;
  padding:12px!important;
  text-align:center!important;
  scroll-margin-top:18vh!important;
  scroll-margin-bottom:18vh!important;
}

[data-payment-proof-preview-wrap]:not(.d-none){
  display:grid!important;
  justify-items:center!important;
  align-items:center!important;
}

[data-payment-proof-preview-wrap] > img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:min(100%,280px)!important;
  max-height:280px!important;
  margin:0 auto!important;
  object-fit:contain!important;
  border-radius:12px!important;
  background:#f5f5f5!important;
  box-shadow:0 3px 12px rgba(58,46,0,.10)!important;
}

[data-payment-proof-preview-wrap] > .d-flex{
  width:100%!important;
  max-width:320px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Bukti TF pada Pesanan Aktif / Belum Bayar */
[data-dynamic-proof-preview-wrap]{
  width:100%!important;
  max-width:320px!important;
  margin:9px auto 0!important;
  padding:8px!important;
  text-align:center!important;
  scroll-margin-top:18vh!important;
  scroll-margin-bottom:18vh!important;
}

[data-dynamic-proof-preview-wrap]:not(.d-none){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

[data-dynamic-proof-preview-wrap] img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:min(100%,220px)!important;
  max-height:220px!important;
  margin:0 auto!important;
  object-fit:contain!important;
  border-radius:10px!important;
}

/* HP: thumbnail cukup besar tetapi tetap benar-benar di tengah. */
@media(max-width:640px){
  [data-payment-proof-preview-wrap]{
    max-width:94%!important;
    padding:10px!important;
  }

  [data-payment-proof-preview-wrap] > img{
    max-width:min(100%,240px)!important;
    max-height:240px!important;
  }

  [data-payment-proof-preview-wrap] > .d-flex{
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:7px!important;
  }

  [data-payment-proof-preview-wrap] > .d-flex .btn{
    width:100%!important;
    max-width:220px!important;
  }
}


/* =========================================================
 * V20.6 - SATU POSISI TENGAH UNTUK HP + TABLET
 * ========================================================= */

/* Preloading */
.global-action-loader{
  display:none!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:12px!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
  place-items:center!important;
  transform:none!important;
  overflow:hidden!important;
  z-index:110000!important;
}
.global-action-loader.show{
  display:flex!important;
}
.global-action-loader-card{
  position:relative!important;
  inset:auto!important;
  width:min(380px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  height:auto!important;
  max-height:calc(100dvh - 24px)!important;
  margin:0!important;
  align-self:center!important;
  justify-self:center!important;
  transform:none!important;
}

/* Kamera - aturan sama untuk HP dan tablet */
.direct-camera-modal{
  display:none!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:8px!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
  place-items:center!important;
  transform:none!important;
  overflow:hidden!important;
  background:rgba(0,0,0,.94)!important;
  z-index:100000!important;
}
.direct-camera-modal.show{
  display:flex!important;
}
.direct-camera-card{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(780px,calc(100vw - 16px))!important;
  max-width:calc(100vw - 16px)!important;
  height:min(760px,calc(100dvh - 16px))!important;
  max-height:calc(100dvh - 16px)!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:16px!important;
  transform:none!important;
  background:#111!important;
}
.direct-camera-head{
  position:relative!important;
  flex:0 0 auto!important;
  z-index:20!important;
  padding:9px 11px!important;
  pointer-events:auto!important;
}
.direct-camera-view{
  position:relative!important;
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#000!important;
  pointer-events:none!important;
}
.direct-camera-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  object-fit:contain!important;
  pointer-events:none!important;
}
.direct-camera-actions{
  position:relative!important;
  flex:0 0 auto!important;
  z-index:30!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)!important;
  gap:8px!important;
  padding:8px 9px calc(8px + max(env(safe-area-inset-bottom,0px),0px))!important;
  background:#171717!important;
  pointer-events:auto!important;
}
.direct-camera-actions .btn{
  min-width:0!important;
  min-height:42px!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.direct-camera-close{
  pointer-events:auto!important;
  touch-action:manipulation!important;
}

/* Bukti foto / hasil foto - selalu modal tengah */
.proof-lightbox{
  display:none!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:10px!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
  place-items:center!important;
  transform:none!important;
  overflow:hidden!important;
  background:rgba(20,18,10,.82)!important;
  z-index:105000!important;
}
.proof-lightbox.show{
  display:flex!important;
}
.proof-lightbox-card{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(720px,calc(100vw - 20px))!important;
  max-width:calc(100vw - 20px)!important;
  height:auto!important;
  max-height:calc(100dvh - 20px)!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:16px!important;
  transform:none!important;
}
.proof-lightbox-title{
  flex:0 0 auto!important;
}
.proof-lightbox-image-wrap{
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:180px!important;
  max-height:calc(100dvh - 90px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:10px!important;
}
.proof-lightbox-image{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:calc(100dvh - 110px)!important;
  margin:auto!important;
  object-fit:contain!important;
}

/* Preview inline tetap rapi tetapi tidak menggeser layar ke bawah */
[data-payment-proof-preview-wrap],
[data-dynamic-proof-preview-wrap]{
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

/* Satu aturan alignment untuk seluruh HP/tablet */
@media(max-width:1400px){
  .global-action-loader,
  .direct-camera-modal,
  .proof-lightbox{
    align-items:center!important;
    justify-content:center!important;
  }
}


/* =========================================================
 * V20.7 - CAMERA RETURN + TABLET BUTTON VISIBILITY
 * ========================================================= */

/*
 * Ukuran overlay/card utama sekarang diatur JS menggunakan visualViewport.
 * Rule ini hanya menjaga struktur flex agar tombol tidak pernah terpotong.
 */
.direct-camera-modal{
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}

.direct-camera-card{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}

.direct-camera-head{
  flex:0 0 auto!important;
  min-height:52px!important;
  box-sizing:border-box!important;
}

.direct-camera-view{
  flex:1 1 0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.direct-camera-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}

.direct-camera-actions{
  flex:0 0 auto!important;
  min-height:58px!important;
  box-sizing:border-box!important;
  position:relative!important;
  z-index:50!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)!important;
  align-items:center!important;
  gap:8px!important;
  overflow:visible!important;
}

.direct-camera-actions .btn{
  min-width:0!important;
  min-height:42px!important;
  max-height:none!important;
  position:relative!important;
  z-index:51!important;
}

/* Landscape rendah: kecilkan header, bukan menyembunyikan tombol foto. */
@media(orientation:landscape) and (max-height:600px){
  .direct-camera-head{
    min-height:44px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  .direct-camera-head .small{
    display:none!important;
  }

  .direct-camera-actions{
    min-height:50px!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
  }

  .direct-camera-actions .btn{
    min-height:38px!important;
    font-size:10px!important;
  }
}


/* =========================================================
 * V20.8 - LIVE CAMERA + KONTROL DI BAGIAN BAWAH
 * ========================================================= */

/*
 * Struktur final:
 * [ Header ]
 * [ Preview kamera - memenuhi ruang sisa ]
 * [ Balik Kamera | Ambil Foto ]  <-- selalu bagian bawah
 */
.direct-camera-card{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
}

.direct-camera-head{
  order:1!important;
  flex:0 0 auto!important;
}

.direct-camera-view{
  order:2!important;
  position:relative!important;
  flex:1 1 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#000!important;
}

.direct-camera-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  object-fit:contain!important;
  opacity:1;
  visibility:visible;
}

.direct-camera-video.camera-waiting{
  opacity:0!important;
  visibility:hidden!important;
}

.direct-camera-loading{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  display:grid!important;
  place-items:center!important;
  padding:16px!important;
  background:#000!important;
  color:#fff!important;
  text-align:center!important;
  pointer-events:none!important;
}

.direct-camera-loading.d-none{
  display:none!important;
}

/*
 * Action bar benar-benar item TERAKHIR flex.
 * Tidak absolute, tidak center, tidak mengambang di atas video.
 */
.direct-camera-actions{
  order:3!important;
  flex:0 0 auto!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  margin-top:auto!important;
  min-height:60px!important;
  z-index:50!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)!important;
  align-items:center!important;
  gap:8px!important;
  padding:
    8px
    10px
    calc(8px + max(env(safe-area-inset-bottom,0px),0px))
    10px!important;
  background:#171717!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  box-sizing:border-box!important;
  transform:none!important;
}

.direct-camera-actions .btn{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  margin:0!important;
  position:relative!important;
  inset:auto!important;
  z-index:51!important;
}

/* Tablet landscape: tombol tetap bawah, preview yang mengecil. */
@media(min-width:641px) and (max-width:1400px){
  .direct-camera-actions{
    min-height:60px!important;
  }

  .direct-camera-view{
    min-height:0!important;
  }
}

/* Layar rendah: pertahankan tombol, kurangi header saja. */
@media(orientation:landscape) and (max-height:600px){
  .direct-camera-head{
    min-height:42px!important;
    padding:5px 9px!important;
  }

  .direct-camera-head .small{
    display:none!important;
  }

  .direct-camera-actions{
    min-height:50px!important;
    padding-top:5px!important;
    padding-bottom:
      calc(5px + max(env(safe-area-inset-bottom,0px),0px))!important;
  }

  .direct-camera-actions .btn{
    min-height:38px!important;
  }
}


/* =========================================================
 * V20.9 - CAMERA SAFE BOTTOM FINAL OVERRIDE
 * =========================================================
 *
 * Penting:
 * Rule versi lama memakai 100dvh !important.
 * Pada sebagian HP/tablet 100dvh lebih tinggi dari area yang benar-benar
 * terlihat. V20.9 menggantinya dengan ukuran visualViewport dari JS.
 */

.direct-camera-modal{
  position:fixed!important;

  top:var(--camera-vv-top,0px)!important;
  left:var(--camera-vv-left,0px)!important;
  right:auto!important;
  bottom:auto!important;

  width:var(--camera-vv-width,100vw)!important;
  height:var(--camera-vv-height,100dvh)!important;

  margin:0!important;

  /*
   * Ruang bawah sengaja lebih besar sehingga action bar tidak berada
   * di area navigation/browser bar perangkat.
   */
  padding:
    10px
    10px
    var(--camera-safe-bottom,64px)
    10px!important;

  box-sizing:border-box!important;

  display:none!important;
  align-items:center!important;
  justify-content:center!important;

  overflow:hidden!important;
  transform:none!important;

  z-index:100000!important;
}

.direct-camera-modal.show{
  display:flex!important;
}

.direct-camera-card{
  position:relative!important;

  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;

  width:var(--camera-card-width,calc(100vw - 20px))!important;
  max-width:var(--camera-card-width,calc(100vw - 20px))!important;

  height:var(--camera-card-height,calc(100dvh - 84px))!important;
  max-height:var(--camera-card-height,calc(100dvh - 84px))!important;

  min-width:0!important;
  min-height:0!important;

  margin:0!important;

  display:flex!important;
  flex-direction:column!important;

  overflow:hidden!important;
  border-radius:16px!important;
  transform:none!important;
  background:#111!important;
}

/*
 * Header dan tombol punya ruang sendiri.
 * Hanya preview yang boleh mengecil.
 */
.direct-camera-head{
  order:1!important;
  flex:0 0 auto!important;
  min-height:46px!important;
  max-height:64px!important;
  overflow:hidden!important;
}

.direct-camera-view{
  order:2!important;

  flex:1 1 0!important;

  width:100%!important;
  height:0!important;

  min-width:0!important;
  min-height:0!important;

  overflow:hidden!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.direct-camera-video{
  width:100%!important;
  height:100%!important;

  max-width:100%!important;
  max-height:100%!important;

  object-fit:contain!important;
}

/*
 * Tombol benar-benar menjadi BAR BAWAH dari card.
 * Bukan fixed ke dasar viewport.
 */
.direct-camera-actions{
  order:3!important;

  position:relative!important;
  inset:auto!important;

  flex:0 0 auto!important;

  width:100%!important;
  min-height:60px!important;

  margin:0!important;

  display:grid!important;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1.35fr)!important;

  align-items:center!important;
  gap:8px!important;

  padding:
    8px
    10px
    8px
    10px!important;

  box-sizing:border-box!important;

  background:#171717!important;
  border-top:1px solid rgba(255,255,255,.10)!important;

  overflow:visible!important;

  z-index:60!important;
  pointer-events:auto!important;
}

.direct-camera-actions .btn{
  position:relative!important;
  inset:auto!important;

  width:100%!important;
  min-width:0!important;

  min-height:44px!important;

  margin:0!important;

  z-index:61!important;

  pointer-events:auto!important;
  touch-action:manipulation!important;
}

/*
 * Untuk layar sangat rendah, tombol tetap dipertahankan.
 * Preview yang dikorbankan.
 */
@media(orientation:landscape) and (max-height:520px){
  .direct-camera-head{
    min-height:38px!important;
    max-height:42px!important;
    padding-top:4px!important;
    padding-bottom:4px!important;
  }

  .direct-camera-head .small{
    display:none!important;
  }

  .direct-camera-actions{
    min-height:48px!important;
    padding-top:4px!important;
    padding-bottom:4px!important;
  }

  .direct-camera-actions .btn{
    min-height:36px!important;
    font-size:10px!important;
  }
}


/* =========================================================
 * V20.10 - ITEM PER BARIS DALAM SATU TRANSAKSI
 * ========================================================= */

/* Pesanan Aktif / Belum Bayar */
.order-grid-items-list{
  display:grid;
  gap:0;
  margin-bottom:8px;
  overflow:hidden;
  border:1px solid #eee0a0;
  border-radius:9px;
  background:#fff9d8;
}

.order-grid-item-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:7px 9px;
  border-bottom:1px solid #eee0a0;
  color:#655828;
  font-size:11px;
  line-height:1.25;
}

.order-grid-item-row:last-child{
  border-bottom:0;
}

.order-grid-item-row > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
  word-break:break-word;
}

.order-grid-item-row > strong{
  min-width:30px;
  color:#463908;
  text-align:right;
  white-space:nowrap;
}

/* Element text gabungan lama tidak dipakai lagi. */
.order-grid-items{
  display:none!important;
}

/* Admin -> Semua Transaksi */
.admin-customer-cell{
  min-width:120px;
  vertical-align:top!important;
}

.admin-items-cell{
  min-width:220px!important;
  max-width:360px!important;
  padding-top:6px!important;
  padding-bottom:6px!important;
  vertical-align:top!important;
}

.admin-transaction-items{
  display:grid;
  width:100%;
  min-width:0;
  overflow:hidden;
  border:1px solid #eadf9e;
  border-radius:8px;
  background:#fffdf2;
}

.admin-transaction-item-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:6px 8px;
  border-bottom:1px solid #eee4b0;
  font-size:10px;
  line-height:1.25;
}

.admin-transaction-item-row:last-child{
  border-bottom:0;
}

.admin-transaction-item-row > span{
  min-width:0;
  overflow:hidden;
  color:#55481b;
  text-overflow:ellipsis;
  white-space:normal;
  word-break:break-word;
}

.admin-transaction-item-row > strong{
  min-width:28px;
  color:#382e08;
  text-align:right;
  white-space:nowrap;
}

/*
 * Tetap satu row transaksi. Kolom lain tidak diulang meskipun item banyak.
 */
.admin-transactions-table tbody > tr > td{
  vertical-align:top;
}

/* HP/tablet: daftar item tetap mudah dibaca. */
@media(max-width:900px){
  .order-grid-item-row{
    padding:7px 8px;
    font-size:11px;
  }

  .admin-transaction-item-row{
    padding:6px 7px;
  }
}

/* Mode cetak PDF */
.serbanana-print-mode .admin-transaction-items{
  border-color:#cfc9ae!important;
  background:#fff!important;
}

.serbanana-print-mode .admin-transaction-item-row{
  padding:4px 5px!important;
  border-bottom:1px solid #ddd7bf!important;
  font-size:8px!important;
  break-inside:avoid;
}


/* =========================================================
 * V20.11 - HARGA PER ITEM PESANAN AKTIF / BELUM BAYAR
 * ========================================================= */

.order-grid-item-row{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
}

.order-grid-item-name{
  min-width:0;
  display:grid;
  gap:2px;
}

.order-grid-item-name > span{
  min-width:0;
  overflow:hidden;
  color:#514411;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:normal;
  word-break:break-word;
}

.order-grid-item-name > small{
  color:#92845c;
  font-size:8px;
  font-weight:600;
}

.order-grid-item-price{
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:end;
  gap:8px;
  min-width:0;
  text-align:right;
}

.order-grid-item-price > span{
  color:#75611a;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

.order-grid-item-price > strong{
  min-width:30px;
  color:#3e330b;
  font-size:11px;
  text-align:right;
  white-space:nowrap;
}

@media(max-width:480px){
  .order-grid-item-row{
    gap:6px!important;
  }

  .order-grid-item-price{
    grid-template-columns:1fr;
    gap:1px;
  }

  .order-grid-item-price > span{
    font-size:9px;
  }

  .order-grid-item-price > strong{
    min-width:0;
    font-size:10px;
  }
}


/* =========================================================
 * V20.12 - PESANAN AKTIF: SCROLL TANPA PULL-TO-REFRESH
 * ========================================================= */

/*
 * Saat Pesanan Aktif / Belum Bayar dibuka, halaman utama diberi tinggi
 * sedikit lebih besar supaya JS dapat menahan WebView pada scrollY=1.
 * Modal fixed tidak ikut bergeser.
 */
html.serbanana-order-scroll-guard,
body.serbanana-order-scroll-guard{
  min-height:calc(100dvh + 3px)!important;
  overscroll-behavior-y:none!important;
  overscroll-behavior-x:none!important;
}

/*
 * Seluruh modal menahan overscroll di dalam dirinya sendiri.
 */
#active-orders-modal,
#unpaid-orders-modal{
  overscroll-behavior:none!important;
  touch-action:none;
}

/*
 * Hanya .modal-body yang menjadi area scroll.
 * pan-y tetap mengizinkan scroll vertikal normal dan halus.
 */
#active-orders-modal .modal-body,
#unpaid-orders-modal .modal-body{
  overflow-y:auto!important;
  overflow-x:hidden!important;

  overscroll-behavior-y:contain!important;
  overscroll-behavior-x:none!important;

  touch-action:pan-y!important;

  -webkit-overflow-scrolling:touch!important;

  scroll-behavior:auto!important;
  scroll-snap-type:none!important;

  /*
   * Momentum scroll tetap natural, tetapi tidak bocor ke halaman induk.
   */
  contain:layout paint;
}

/*
 * Isi kartu tidak boleh membuat area gesture sendiri.
 */
#active-orders-modal .active-orders-grid,
#unpaid-orders-modal .active-orders-grid,
#active-orders-modal .order-grid-card,
#unpaid-orders-modal .order-grid-card{
  overscroll-behavior:contain!important;
}

/*
 * Saat berada pada input/select/button, sentuhan tetap berfungsi normal.
 */
#active-orders-modal button,
#active-orders-modal input,
#active-orders-modal select,
#active-orders-modal textarea,
#unpaid-orders-modal button,
#unpaid-orders-modal input,
#unpaid-orders-modal select,
#unpaid-orders-modal textarea{
  touch-action:manipulation;
}


/* =========================================================
 * V20.16 - MODAL PENGINGAT BUKA KASIR + STOK AWAL
 * ========================================================= */

body.serbanana-daily-opening-reminder-open{
  overflow:hidden!important;
}

.daily-opening-reminder{
  display:none;
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  padding:
    max(16px,env(safe-area-inset-top,0px))
    max(16px,env(safe-area-inset-right,0px))
    max(16px,env(safe-area-inset-bottom,0px))
    max(16px,env(safe-area-inset-left,0px));
  box-sizing:border-box;
  align-items:center;
  justify-content:center;
  z-index:90000;
}

.daily-opening-reminder.show{
  display:flex;
}

.daily-opening-reminder-backdrop{
  position:absolute;
  inset:0;
  background:rgba(39,33,8,.62);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.daily-opening-reminder-card{
  position:relative;
  z-index:2;
  width:min(430px,100%);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:26px 22px 20px;
  box-sizing:border-box;
  border:1px solid rgba(103,87,15,.12);
  border-radius:24px;
  background:#fff;
  box-shadow:
    0 28px 70px rgba(41,34,5,.28),
    0 6px 18px rgba(41,34,5,.10);
  text-align:center;
}

.daily-opening-reminder-close{
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#f5f1df;
  color:#62551b;
  font-size:27px;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
}

.daily-opening-reminder-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:106px;
  margin:0 auto 7px;
}

.daily-opening-reminder-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:126px;
  max-height:100px;
  object-fit:contain;
}

.daily-opening-reminder-date{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 9px;
  padding:5px 10px;
  border-radius:999px;
  background:#fff7c7;
  color:#746211;
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
}

.daily-opening-reminder-card h2{
  margin:0 0 14px;
  color:#30290a;
  font-size:19px;
  font-weight:900;
}

.daily-opening-reminder-message{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 12px;
  padding:13px 14px;
  border:1px solid #efdf82;
  border-radius:14px;
  background:#fff9d7;
  text-align:left;
}

.daily-opening-reminder-message p{
  margin:0;
  color:#594b12;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}

.daily-opening-reminder-icon{
  display:grid;
  flex:0 0 34px;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#f6c900;
  color:#302900;
  font-size:18px;
  font-weight:1000;
}

.daily-opening-reminder-extra{
  margin:0 0 12px;
  padding:10px 12px;
  border-radius:11px;
  background:#fff0ee;
  color:#9b3029;
  font-size:11px;
  font-weight:700;
  line-height:1.45;
  text-align:left;
}

.daily-opening-reminder-action,
.daily-opening-reminder-later{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.daily-opening-reminder-action{
  margin-top:4px;
  font-weight:900;
}

.daily-opening-reminder-later{
  margin-top:8px;
}

.daily-opening-reminder-card > small{
  display:block;
  margin-top:12px;
  color:#8a8265;
  font-size:9px;
  line-height:1.5;
}

@media(max-width:640px){
  .daily-opening-reminder{
    padding:
      max(12px,env(safe-area-inset-top,0px))
      12px
      max(12px,env(safe-area-inset-bottom,0px));
  }

  .daily-opening-reminder-card{
    width:min(390px,100%);
    padding:22px 17px 17px;
    border-radius:20px;
  }

  .daily-opening-reminder-logo{
    max-width:112px;
    max-height:90px;
  }

  .daily-opening-reminder-logo-wrap{
    min-height:94px;
  }

  .daily-opening-reminder-card h2{
    font-size:17px;
  }

  .daily-opening-reminder-message p{
    font-size:12px;
  }
}


/* =========================================================
 * V20.17 - UANG KAS ADMIN / PENARIKAN KUMULATIF
 * ========================================================= */

body.serbanana-cash-modal-open{
  overflow:hidden!important;
}

.cash-admin-page-head{
  align-items:flex-start!important;
}

.cash-withdraw-all-form{
  display:grid;
  justify-items:end;
  gap:5px;
  min-width:250px;
}

.cash-withdraw-all-form small{
  color:#776b45;
  font-size:10px;
}

.cash-rule-card{
  display:grid;
  gap:4px;
  margin-bottom:12px;
  padding:13px 15px!important;
  border-color:#e8d66d!important;
  background:#fff9d8!important;
}

.cash-rule-card strong{
  color:#4c3f0d;
  font-size:12px;
}

.cash-rule-card span{
  color:#74652f;
  font-size:10px;
  line-height:1.5;
}

.cash-filter-form-branch-only{
  grid-template-columns:minmax(220px,360px) auto!important;
}

.cash-withdraw-modal{
  z-index:95000!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

.cash-withdraw-modal-card{
  max-height:calc(100dvh - 24px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}

.cash-withdraw-current strong{
  word-break:break-word;
}

@media(max-width:767.98px){
  .cash-admin-page-head{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .cash-withdraw-all-form{
    width:100%;
    min-width:0;
    justify-items:stretch;
  }

  .cash-withdraw-all-form .btn{
    width:100%;
  }

  .cash-withdraw-all-form small{
    text-align:center;
  }
}

@media(max-width:560px){
  .cash-filter-form-branch-only{
    grid-template-columns:1fr!important;
  }

  .cash-withdraw-modal-card{
    max-height:calc(100dvh - 16px)!important;
  }
}