:root {
  --primary: #ef4b35;
  --primary-dark: #d43d29;
  --primary-soft: #fff0ed;
  --green: #1ebc61;
  --yellow: #e5a600;
  --red: #dc3545;
  --blue: #2f78ef;
  --ink: #273044;
  --muted: #7d8799;
  --line: #e8ebf0;
  --surface: #ffffff;
  --bg: #f4f6f9;
  --sidebar: #f7f8fa;
  --shadow: 0 8px 30px rgba(35, 45, 66, .08);
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.wide { width: 100%; }
.stack { display: grid; gap: 16px; }
.brand { font-size: 32px; font-weight: 800; letter-spacing: -2px; color: var(--ink); }
.brand span { color: var(--primary); }
.brand-large { font-size: 48px; text-align: center; }
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 20%, #fff 0, #f7f8fb 42%, #edf1f7 100%); }
.login-card { width: min(420px, 100%); background: white; border: 1px solid var(--line); border-radius: 24px; padding: 36px; box-shadow: var(--shadow); }
.login-card > p { text-align: center; margin: 10px 0 28px; }
label { display: grid; gap: 7px; font-size: 13px; font-weight: 650; }
input, select, textarea { width: 100%; border: 1px solid #dce1e9; background: #fff; border-radius: 9px; min-height: 42px; padding: 9px 12px; color: var(--ink); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(239,75,53,.11); }
textarea { min-height: 86px; resize: vertical; }
.btn { border: 1px solid transparent; border-radius: 9px; min-height: 40px; padding: 9px 16px; font-weight: 700; background: #edf0f4; color: var(--ink); }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.outline { background: #fff; border-color: var(--line); }
.btn.success { background: var(--green); color: #fff; }
.btn.danger { background: var(--red); color: #fff; }
.btn.soft { background: var(--primary-soft); color: var(--primary); }
.link-btn { border: 0; background: none; color: var(--primary); padding: 0; font-weight: 700; }
.icon-btn { width: 38px; height: 38px; border: 0; border-radius: 9px; background: #eef1f5; display: grid; place-items: center; }
.app { min-height: 100vh; display: grid; grid-template-columns: 238px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 238px; background: var(--sidebar); border-right: 1px solid var(--line); padding: 19px 14px; display: flex; flex-direction: column; z-index: 30; }
.sidebar .brand { padding: 0 8px 24px; }
.sidebar nav { display: grid; gap: 5px; }
.sidebar nav button { border: 0; background: transparent; text-align: left; border-radius: 9px; min-height: 44px; padding: 9px 12px; color: #4e586a; display: flex; align-items: center; gap: 12px; font-weight: 600; }
.sidebar nav button i { width: 22px; text-align: center; font-style: normal; font-size: 18px; }
.sidebar nav button:hover { background: #fff; }
.sidebar nav button.active { color: var(--primary); background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 16px 10px 2px; display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; }
.main { grid-column: 2; min-width: 0; }
.topbar { height: 82px; position: sticky; top: 0; z-index: 20; background: rgba(244,246,249,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 15px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topbar h1 { margin: 0 0 3px; font-size: 21px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.content { padding: 24px 26px 42px; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 800; }
.pill.success { color: #128c47; background: #e7f8ef; }
.pill.warning { color: #9b6b00; background: #fff4d6; }
.pill.danger { color: #ad2232; background: #fde8eb; }
.pill.info { color: #2360b8; background: #e7f0ff; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 14px rgba(35,45,66,.035); }
.card-head { padding: 17px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h2, .card-head h3 { margin: 0; font-size: 16px; }
.card-body { padding: 18px; }
.grid { display: grid; gap: 18px; }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { padding: 17px 18px; min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; }
.metric .value { font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.metric .label { font-size: 12px; color: var(--muted); }
.metric .hint { font-size: 11px; color: var(--primary); }
.two-col { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filters label { min-width: 170px; flex: 1 1 180px; }
.filters .compact { min-width: 130px; flex: 0 1 170px; }
.page-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 18px; }
.page-actions h2 { margin: 0; font-size: 18px; }
.action-group { display: flex; gap: 9px; flex-wrap: wrap; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; vertical-align: middle; }
th { position: sticky; top: 0; background: #f7f8fa; color: #586173; font-size: 12px; z-index: 1; }
tbody tr:hover { background: #fafbfc; }
.money { font-variant-numeric: tabular-nums; font-weight: 700; }
.text-right { text-align: right; }
.empty { padding: 50px 22px; text-align: center; color: var(--muted); }
.empty .symbol { font-size: 54px; opacity: .5; margin-bottom: 8px; }
.toolbar { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.chart { min-height: 230px; padding: 16px; display: flex; align-items: end; gap: 8px; overflow-x: auto; }
.bar-item { min-width: 34px; height: 205px; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 6px; }
.bar { width: 100%; background: linear-gradient(180deg, var(--primary), #ff8a75); border-radius: 7px 7px 2px 2px; min-height: 3px; }
.bar-label { font-size: 9px; color: var(--muted); transform: rotate(-35deg); white-space: nowrap; height: 28px; }
.pos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.pos-products { min-width: 0; }
.product-grid { padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; max-height: calc(100vh - 230px); overflow: auto; }
.product-tile { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 14px; text-align: left; min-height: 132px; display: flex; flex-direction: column; gap: 6px; }
.product-tile:hover { border-color: var(--primary); box-shadow: 0 6px 20px rgba(239,75,53,.1); }
.product-tile strong { line-height: 1.25; }
.product-tile .price { color: var(--primary); font-size: 16px; font-weight: 800; margin-top: auto; }
.product-tile .stock { font-size: 11px; color: var(--muted); }
.cart-card { position: sticky; top: 102px; }
.cart-list { max-height: 310px; overflow: auto; }
.cart-item { padding: 12px 0; border-bottom: 1px dashed var(--line); display: grid; gap: 8px; }
.cart-top { display: flex; justify-content: space-between; gap: 8px; }
.cart-controls { display: grid; grid-template-columns: 88px 1fr auto; gap: 8px; align-items: center; }
.qty-control { display: grid; grid-template-columns: 28px 32px 28px; gap: 3px; }
.qty-control button { border: 1px solid var(--line); background: #fff; border-radius: 6px; }
.qty-control input { min-height: 30px; height: 30px; padding: 3px; text-align: center; }
.cart-total { display: grid; gap: 9px; margin-top: 12px; }
.total-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.total-row.grand { font-size: 19px; font-weight: 800; border-top: 1px solid var(--line); padding-top: 11px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(23,30,43,.48); backdrop-filter: blur(2px); }
.modal-panel { position: relative; width: min(720px, 100%); max-height: calc(100vh - 40px); background: #fff; border-radius: 17px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.modal-head { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { font-size: 18px; margin: 0; }
.modal-body { padding: 18px; overflow: auto; max-height: calc(100vh - 110px); }
.toast { position: fixed; top: 18px; right: 18px; z-index: 200; min-width: 260px; max-width: 430px; padding: 13px 16px; border-radius: 10px; background: #273044; color: white; box-shadow: var(--shadow); opacity: 0; transform: translateY(-15px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--red); }
.toast.success { background: #168f4c; }
.receipt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width: min(380px, 100%); margin: auto; color: #111; }
.receipt .center { text-align: center; }
.receipt hr { border: 0; border-top: 1px dashed #777; margin: 12px 0; }
.receipt-row { display: flex; justify-content: space-between; gap: 12px; margin: 5px 0; }
.kpi-list { display: grid; gap: 12px; }
.kpi-row { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mobile-only { display: none; }
@media print {
  body * { visibility: hidden; }
  .modal, .modal * { visibility: visible; }
  .modal { position: static; display: block; padding: 0; }
  .modal-backdrop, .modal-head { display: none; }
  .modal-panel { box-shadow: none; max-height: none; width: 80mm; }
  .modal-body { max-height: none; padding: 3mm; }
}
@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pos-layout { grid-template-columns: 1fr; }
  .cart-card { position: static; }
  .product-grid { max-height: 500px; }
}
@media (max-width: 760px) {
  .app { display: block; }
  .sidebar { transform: translateX(-102%); transition: .2s; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .main { min-width: 0; }
  .topbar { height: 72px; padding: 12px 15px; }
  .content { padding: 15px; }
  .mobile-only { display: grid; }
  .metrics, .two-col, .three-col, .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .top-actions #clock { display: none; }
  .page-actions { align-items: flex-start; flex-direction: column; }
  .pos-layout { display: block; }
  .pos-products { margin-bottom: 15px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 10px; }
}

.brand-with-logo { display: flex; align-items: center; gap: 10px; letter-spacing: -1px; }
.brand-with-logo img { width: 34px; height: 34px; }
.brand-large.brand-with-logo { justify-content: center; font-size: 44px; }
.blue-btn { border-color: #c9dafd; color: var(--blue); }
.btn-mini { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.thumb { width: 44px; height: 44px; border-radius: 10px; background: #fff0ed; border: 1px solid #ffd4cc; display: grid; place-items: center; overflow: hidden; color: var(--primary); font-weight: 800; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.large { width: 120px; height: 120px; margin: 0 auto 10px; }
.photo-uploader { display: grid; gap: 12px; text-align: center; }
.product-edit-grid { grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr); gap: 18px; }
.switch-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.switch-inline input { width: 18px; min-height: 18px; }
.inline-menu { position: absolute; z-index: 120; min-width: 170px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.inline-menu button { display: block; width: 100%; border: 0; background: #fff; text-align: left; padding: 10px 12px; font: inherit; }
.inline-menu button:hover { background: #fafbfc; }
.row-actions { display: flex; justify-content: flex-end; }
.perm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 10px; }
.perm-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-weight: 500; }
.perm-item input { width: 16px; min-height: 16px; }
@media (max-width: 760px) {
  .product-edit-grid, .perm-grid { grid-template-columns: 1fr; }
}
.action-group .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.action-group { position: relative; z-index: 2; }


/* Admin logo settings v1.3.1 */
.brand-with-logo { max-width: 100%; overflow: hidden; }
.brand-with-logo img { flex: 0 0 auto; object-fit: contain; }
.login-card .brand-with-logo img { width: 48px; height: 48px; max-width: 48px; max-height: 48px; }
.sidebar .brand-with-logo img { width: 34px; height: 34px; max-width: 34px; max-height: 34px; }
.login-card .brand-with-logo.custom-logo img { width: min(300px, 85%); height: 82px; max-width: 300px; max-height: 82px; margin: 0 auto; }
.sidebar .brand-with-logo.custom-logo img { width: min(170px, 90%); height: 58px; max-width: 170px; max-height: 58px; margin: 0 auto; }
.logo-settings-layout { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(260px, 1.35fr); gap: 20px; align-items: center; }
.logo-preview-box { min-height: 150px; padding: 18px; border: 1px dashed #cfd7e4; border-radius: 14px; background: #f8fafc; display: grid; place-items: center; overflow: hidden; }
.logo-preview-box img { display: block; width: 100%; max-width: 280px; max-height: 112px; object-fit: contain; }
@media (max-width: 760px) {
  .logo-settings-layout { grid-template-columns: 1fr; }
  .login-card .brand-with-logo.custom-logo img { width: min(250px, 82%); height: 72px; }
}


/* Standalone administrator logo page */
.logo-preview-large { min-height: 260px; padding: 28px; }
.logo-preview-large img { max-width: min(520px, 92%); max-height: 220px; object-fit: contain; }
@media (max-width: 760px) {
  .logo-preview-large { min-height: 190px; padding: 18px; }
  .logo-preview-large img { max-height: 150px; }
}


/* Login branding adjustment */
.login-card > p { text-align: center; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 8px; margin-bottom: 18px; }
.login-card small { display: none !important; }
.login-card .brand-with-logo { margin-bottom: 8px; }
.login-card label { font-size: 14px; }

/* =========================================================
   LINKA CASHIER MODE — tablet-first POS interface
   ========================================================= */
body.cashier-mode { background: #f7f8fb; }
body.cashier-mode .app { display: block; }
body.cashier-mode .main { grid-column: auto; margin-left: 0; min-width: 0; }
body.cashier-mode .sidebar {
  transform: translateX(-102%);
  transition: transform .22s ease;
  box-shadow: 0 12px 42px rgba(26, 38, 61, .18);
}
body.cashier-mode .sidebar.open { transform: translateX(0); }
body.cashier-mode .mobile-only { display: grid; }
body.cashier-mode .topbar { padding-left: 22px; }
body.cashier-mode .content { max-width: none; }
body.cashier-mode[data-page="pos"] .topbar { display: none; }
body.cashier-mode[data-page="pos"] .content { padding: 0; }

.cashier-home { max-width: 1180px; margin: 0 auto; display: grid; gap: 22px; padding-bottom: 96px; }
.cashier-welcome {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 28px; background: white; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 5px 22px rgba(37, 51, 74, .05);
}
.cashier-welcome h2 { margin: 4px 0 6px; font-size: 26px; }
.cashier-welcome p { margin: 0; color: var(--muted); }
.cashier-eyebrow { font-size: 11px; font-weight: 850; letter-spacing: 2.2px; color: var(--primary); }
.cashier-notification { position: relative; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 22px; }
.cashier-notification span { position: absolute; width: 8px; height: 8px; border-radius: 50%; right: 7px; top: 6px; background: var(--primary); }
.cashier-shortcuts { display: flex; flex-wrap: wrap; gap: 18px; padding: 8px 4px; }
.cashier-shortcuts button {
  width: 112px; min-height: 98px; border: 0; background: transparent; border-radius: 16px;
  display: grid; place-items: center; align-content: center; gap: 8px; color: #424b5d; font-weight: 700;
}
.cashier-shortcuts button:hover { background: white; box-shadow: 0 8px 24px rgba(35, 45, 66, .07); }
.cashier-shortcuts i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary); font-style: normal; font-size: 24px; }
.cashier-report-section, .cashier-home-panel { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.cashier-section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.cashier-section-title h3 { margin: 0; }
.cashier-section-title button { border: 0; background: none; color: var(--primary); font-weight: 750; }
.cashier-report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cashier-report-grid article { min-height: 118px; border: 1px solid #dde2ea; border-radius: 14px; padding: 16px; display: grid; align-content: start; gap: 8px; }
.cashier-report-grid article span { color: #596273; font-size: 13px; }
.cashier-report-grid article b { font-size: 20px; }
.cashier-report-grid article small { color: var(--primary); }
.cashier-home-panel { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.cashier-home-panel h3 { margin: 0 0 7px; }
.cashier-home-panel p { margin: 0; color: var(--muted); }
.cashier-home-stats { min-width: 180px; padding: 14px 18px; border-radius: 12px; background: #f7f8fb; display: flex; justify-content: space-between; gap: 18px; }
.cashier-start-button {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 25;
  width: min(980px, calc(100% - 44px)); min-height: 58px; border: 0; border-radius: 10px;
  background: var(--primary); color: white; font-size: 18px; font-weight: 800; box-shadow: 0 14px 34px rgba(239, 75, 53, .28);
}

.cashier-pos-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 420px; background: #fff; }
.cashier-catalog-pane { min-width: 0; border-right: 1px solid #e5e8ee; display: flex; flex-direction: column; }
.cashier-pos-header { min-height: 92px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #eceef2; }
.cashier-icon-button { width: 44px; height: 44px; flex: 0 0 auto; border: 0; background: transparent; border-radius: 11px; font-size: 23px; color: #4d5565; position: relative; }
.cashier-icon-button:hover { background: #f2f4f7; }
.pending-button span { position: absolute; right: 2px; top: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; display: grid; place-items: center; }
.pending-button span:empty { display: none; }
.cashier-profile { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.cashier-avatar { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d7dce4; border-radius: 50%; font-size: 21px; }
.cashier-profile div { display: grid; }
.cashier-profile small { color: var(--muted); text-transform: capitalize; }
.cashier-search { flex: 1; position: relative; display: block; }
.cashier-search span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #596273; z-index: 1; font-size: 22px; }
.cashier-search input { height: 48px; padding-left: 46px; background: #f0f1f4; border: 0; border-radius: 9px; }
.cashier-pos-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 18px 20px 0; padding: 5px; border-radius: 9px; background: #e9ebf0; }
.cashier-pos-tabs button { min-height: 46px; border: 0; border-radius: 7px; background: transparent; color: #6a7180; font-size: 16px; font-weight: 750; }
.cashier-pos-tabs button.active { background: white; color: #363d4c; box-shadow: 0 2px 8px rgba(37, 48, 68, .07); }
.cashier-category-tabs { display: flex; gap: 24px; overflow-x: auto; padding: 26px 20px 0; border-bottom: 1px solid #e9ebf0; scrollbar-width: thin; }
.cashier-category-tabs button { border: 0; background: transparent; padding: 0 0 10px; white-space: nowrap; color: #4c5362; font-size: 14px; font-weight: 650; border-bottom: 3px solid transparent; }
.cashier-category-tabs button.active { color: var(--primary); border-color: var(--primary); }
.cashier-product-grid { flex: 1; padding: 20px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 22px 16px; align-content: start; }
.cashier-product-card { border: 0; background: transparent; text-align: left; min-width: 0; padding: 0; }
.cashier-product-image { width: 100%; aspect-ratio: 1 / .95; border: 1px solid #d9dde5; border-radius: 8px; overflow: hidden; background: #eef0f4; display: grid; place-items: center; color: #454c5b; font-size: 24px; font-weight: 800; }
.cashier-product-image img { width: 100%; height: 100%; object-fit: contain; background: white; }
.cashier-product-name { margin-top: 8px; font-weight: 750; line-height: 1.3; min-height: 34px; }
.cashier-product-meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 4px; font-size: 11px; color: var(--muted); }
.cashier-product-meta b { color: var(--primary); white-space: nowrap; }
.cashier-empty-catalog { grid-column: 1 / -1; padding: 80px 20px; text-align: center; color: var(--muted); }
.cashier-manual-form { grid-column: 1 / -1; width: min(680px, 100%); margin: 20px auto; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: grid; gap: 16px; }
.cashier-manual-form h3, .cashier-manual-form p { margin: 0; }

.cashier-cart-pane { min-width: 0; display: flex; flex-direction: column; background: #fff; }
.cashier-cart-header { min-height: 92px; display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eceef2; }
.cashier-customer-select { display: flex; align-items: center; gap: 8px; flex: 1; }
.cashier-customer-select > span { font-size: 22px; }
.cashier-customer-select select { border: 0; min-height: 40px; font-weight: 700; }
.cashier-cart-list { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px; }
.cashier-empty-cart { height: 100%; min-height: 420px; display: grid; place-items: center; align-content: center; text-align: center; color: #4d5565; padding: 30px; }
.cashier-empty-cart > div { font-size: 72px; filter: grayscale(1); opacity: .3; }
.cashier-empty-cart h3 { margin: 16px 0 6px; }
.cashier-empty-cart p { margin: 0; color: var(--muted); line-height: 1.5; }
.cashier-cart-item { padding: 14px 0; border-bottom: 1px solid #e5e8ee; display: grid; gap: 9px; }
.cashier-cart-item-top, .cashier-cart-item-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cashier-cart-item-top div { display: grid; gap: 3px; }
.cashier-cart-item-top span, .cashier-cart-item-bottom span { color: #5e6675; font-size: 12px; }
.cashier-cart-item-top button { border: 0; background: transparent; color: var(--red); font-size: 20px; }
.cashier-inline-stepper { justify-self: end; display: grid; grid-template-columns: 30px 42px 30px; gap: 3px; }
.cashier-inline-stepper button { border: 1px solid #d9dde5; background: #f7f8fa; border-radius: 6px; }
.cashier-inline-stepper input { min-height: 30px; height: 30px; padding: 2px; text-align: center; }
.cashier-cart-footer { border-top: 8px solid #eef0f4; padding: 18px 20px; display: grid; gap: 18px; }
.cashier-cart-total { display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.cashier-cart-total strong { font-size: 22px; }
.cashier-cart-actions { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.cashier-cart-actions .btn { min-height: 54px; font-size: 16px; }

.cashier-variant-product { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cashier-variant-thumb { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; font-weight: 800; }
.cashier-variant-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cashier-variant-product h3 { margin: 0 0 4px; }
.cashier-variant-product span { color: var(--muted); }
.cashier-variant-list { max-height: 360px; overflow: auto; }
.cashier-variant-row { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.cashier-variant-row > div:first-child { display: grid; gap: 5px; }
.cashier-variant-row span { color: var(--muted); }
.cashier-stepper { display: grid; grid-template-columns: 38px 76px 38px; gap: 4px; padding: 3px; border: 1px solid #d7dce4; border-radius: 8px; }
.cashier-stepper button { border: 0; border-radius: 6px; background: #e7eaf0; font-size: 20px; }
.cashier-stepper input { border: 0; min-height: 34px; text-align: center; padding: 4px; box-shadow: none; }
.cashier-modal-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; padding-top: 18px; }
.cashier-modal-actions .btn { min-height: 52px; }
.pending-cart-list { display: grid; gap: 10px; }
.pending-cart-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; }
.pending-cart-list span { display: grid; gap: 3px; }
.pending-cart-list small { color: var(--muted); }

.cashier-payment-page { min-height: 100vh; background: #fff; display: flex; flex-direction: column; }
.cashier-payment-page > header { min-height: 88px; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid #e6e9ef; }
.cashier-payment-page > header h2 { margin: 0; }
.cashier-payment-page > header > strong { color: var(--primary); font-size: 18px; }
.payment-back { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; font-size: 28px; }
.payment-total { background: #eef0f5; min-height: 210px; display: grid; place-items: center; align-content: center; gap: 14px; }
.payment-total span { font-size: 17px; font-weight: 700; color: #4d5565; }
.payment-total strong { font-size: clamp(42px, 6vw, 64px); color: var(--primary); }
.payment-method-section { width: min(1060px, calc(100% - 48px)); margin: 28px auto 18px; }
.payment-method-section h3 { margin: 0 0 16px; }
.payment-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.payment-method-grid button { min-height: 98px; border: 1px solid #d7dce4; background: #fff; border-radius: 8px; padding: 18px; text-align: left; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; }
.payment-method-grid b { font-size: 18px; font-weight: 600; }
.payment-method-grid small { color: var(--muted); grid-column: 1; line-height: 1.4; }
.payment-method-grid span { grid-column: 2; grid-row: 1 / 3; font-size: 28px; color: #6a7180; }
.payment-wide-option { width: 100%; min-height: 68px; border: solid #e9ebf0; border-width: 8px 0; background: #fff; padding: 0 max(24px, calc((100% - 1060px)/2)); display: flex; align-items: center; justify-content: space-between; font-weight: 750; font-size: 16px; }
.payment-delete { margin: 28px auto; border: 0; background: transparent; font-size: 17px; font-weight: 750; color: #4f5665; }
.cash-entry { width: min(850px, calc(100% - 44px)); margin: 34px auto 16px; display: grid; gap: 18px; }
.cash-entry label { position: relative; }
.cash-entry input { min-height: 64px; font-size: 24px; }
.exact-cash { min-height: 58px; border: 0; border-radius: 6px; background: #2fc857; color: #fff; font-size: 18px; font-weight: 800; }
.cash-suggestions { border-top: 10px solid #eef0f4; padding: 24px max(22px, calc((100% - 850px)/2)); }
.cash-suggestions h3 { margin: 0 0 16px; }
.cash-suggestions > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cash-suggestions button { min-height: 60px; border: 1px solid #d9dde5; background: #fff; border-radius: 7px; font-size: 17px; }
.payment-confirm { width: min(850px, calc(100% - 44px)); min-height: 58px; margin: auto auto 28px; font-size: 17px; }
.online-method-list { width: min(820px, calc(100% - 44px)); margin: 30px auto; display: grid; gap: 12px; }
.online-method-list label { display: flex; align-items: center; gap: 14px; border: 1px solid #d9dde5; border-radius: 9px; padding: 18px; }
.online-method-list input { width: 20px; min-height: 20px; }
.online-method-list span { display: grid; gap: 4px; }
.online-method-list small { color: var(--muted); }
.credit-total { min-height: 80px; padding: 0 min(10vw, 150px); display: flex; justify-content: space-between; align-items: center; background: #eef0f4; }
.credit-total strong { color: var(--primary); font-size: 18px; }
.credit-form { width: min(1080px, calc(100% - 44px)); margin: 24px auto; display: grid; gap: 18px; }
.credit-form h3 { margin: 0; }
.input-suffix { display: grid; grid-template-columns: 1fr 70px; align-items: center; gap: 8px; }
.input-suffix span { text-align: center; }
.credit-toggle { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; border-top: 8px solid #eef0f4; }
.credit-toggle > span { display: grid; gap: 5px; }
.credit-toggle small { color: var(--muted); }
.credit-toggle input { width: 46px; min-height: 24px; }

@media (max-width: 980px) {
  .cashier-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cashier-pos-shell { grid-template-columns: minmax(0, 1fr) 340px; }
  .cashier-profile { min-width: 135px; }
  .cashier-product-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
}
@media (max-width: 760px) {
  body.cashier-mode .topbar { display: flex; }
  body.cashier-mode[data-page="pos"] .topbar { display: none; }
  .cashier-welcome { padding: 20px; }
  .cashier-welcome h2 { font-size: 21px; }
  .cashier-report-grid { grid-template-columns: 1fr; }
  .cashier-home-panel { align-items: flex-start; flex-direction: column; }
  .cashier-start-button { bottom: 12px; width: calc(100% - 24px); }
  .cashier-pos-shell { display: block; min-height: 100vh; }
  .cashier-catalog-pane { min-height: 62vh; border-right: 0; }
  .cashier-profile { display: none; }
  .cashier-pos-header { padding: 10px; min-height: 70px; }
  .cashier-pos-tabs { margin: 10px 10px 0; }
  .cashier-category-tabs { padding: 18px 10px 0; gap: 18px; }
  .cashier-product-grid { padding: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .cashier-cart-pane { min-height: 38vh; border-top: 8px solid #eef0f4; }
  .cashier-cart-list { max-height: 280px; }
  .cashier-empty-cart { min-height: 240px; }
  .payment-method-grid { grid-template-columns: 1fr; }
  .payment-total { min-height: 160px; }
  .cash-suggestions > div { grid-template-columns: repeat(2, 1fr); }
  .cashier-payment-page > header { grid-template-columns: 50px 1fr auto; padding: 10px; min-height: 70px; }
}


/* Riwayat transaksi: tombol cetak struk */
.sales-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 170px;
}
.sales-row-actions .btn.outline {
  background: #fff;
  border-color: #cfd7e4;
  color: var(--ink);
}
.sales-row-actions .btn.outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}
@media (max-width: 760px) {
  .sales-row-actions { min-width: 145px; }
}


/* Fixed7: tombol Cetak Struk dibuat selalu terlihat */
.sales-action-cell { min-width: 245px; white-space: nowrap; }
.sales-row-actions { display: flex !important; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 235px; }
.print-receipt-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #17345d !important;
  border-color: #17345d !important;
  color: #fff !important;
  min-width: 116px;
  opacity: 1 !important;
  visibility: visible !important;
}
.print-receipt-btn:hover { background: #0f2747 !important; border-color: #0f2747 !important; }
@media (max-width: 760px) {
  .sales-action-cell { min-width: 220px; }
  .sales-row-actions { min-width: 210px; }
  .print-receipt-btn { min-width: 108px; }
}

/* Cashier transaction tools: discount, employee, customer */
.cashier-cart-header { align-items: stretch; }
.cashier-cart-tools { display: grid; grid-template-columns: repeat(3, minmax(68px, 1fr)); gap: 8px; flex: 1; }
.cashier-tool-button { min-height: 58px; border: 1px solid #d9dde5; border-radius: 9px; background: #fff; display: grid; place-items: center; align-content: center; gap: 2px; color: #4d5565; }
.cashier-tool-button:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.cashier-tool-button b { font-size: 21px; line-height: 1; }
.cashier-tool-button small { font-size: 10px; font-weight: 750; }
.cashier-transaction-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid #e9ebf0; background: #fafbfc; }
.cashier-transaction-meta button { min-width: 0; border: 0; border-right: 1px solid #e9ebf0; background: transparent; padding: 10px 12px; text-align: left; display: grid; gap: 3px; }
.cashier-transaction-meta button:last-child { border-right: 0; }
.cashier-transaction-meta button:hover { background: #fff5f2; }
.cashier-transaction-meta span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.cashier-transaction-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.transaction-selector { display: grid; gap: 16px; }
.selector-list { max-height: 410px; overflow: auto; display: grid; gap: 8px; }
.selector-list > button { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 10px; min-height: 66px; padding: 10px 12px; display: grid; grid-template-columns: 42px 1fr 24px; gap: 10px; align-items: center; text-align: left; }
.selector-list > button:hover, .selector-list > button.selected { border-color: var(--primary); background: var(--primary-soft); }
.selector-list > button > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.selector-list small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-list i { font-style: normal; justify-self: end; color: var(--primary); font-weight: 800; }
.selector-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #eef1f6; color: #32405a; font-weight: 850; }
.discount-quick { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.discount-quick button { min-height: 42px; border: 1px solid #d9dde5; background: #fff; border-radius: 8px; font-weight: 700; }
.discount-quick button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.discount-summary { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.discount-summary > div { display: flex; justify-content: space-between; gap: 14px; }
.discount-summary .grand { border-top: 1px solid var(--line); padding-top: 10px; font-size: 17px; }
@media (max-width: 1100px) {
  .cashier-cart-tools { grid-template-columns: repeat(3, minmax(56px,1fr)); }
  .cashier-tool-button small { display: none; }
}
@media (max-width: 760px) {
  .cashier-cart-header { min-height: auto; padding: 10px; }
  .cashier-cart-tools { grid-template-columns: repeat(3, 1fr); }
  .cashier-tool-button { min-height: 48px; }
  .cashier-transaction-meta { grid-template-columns: 1fr; }
  .cashier-transaction-meta button { border-right: 0; border-bottom: 1px solid #e9ebf0; }
  .discount-quick { grid-template-columns: repeat(2, 1fr); }
}


/* Employee transaction history */
.employee-row-actions { display:flex; flex-wrap:wrap; gap:7px; }
.employee-history-count { border:0; background:transparent; color:var(--blue); font:inherit; font-weight:700; padding:0; cursor:pointer; }
.employee-history-count:hover { text-decoration:underline; }
.employee-history-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:2px 2px 16px; }
.employee-history-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.employee-history-metrics .metric { box-shadow:none; border:1px solid var(--line); }
.employee-history-table-card { box-shadow:none; border:1px solid var(--line); }
@media (max-width:900px) { .employee-history-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .employee-history-metrics { grid-template-columns:1fr; } .employee-history-header { align-items:flex-start; } }

/* Courier outstanding and deposit */
.employee-history-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.employee-history-header-actions { display: flex; align-items: center; gap: 10px; }
.outstanding-money { color: var(--red); font-weight: 800; }
.deposit-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff7f4; }
.deposit-summary span { color: var(--muted); }
.deposit-summary strong { font-size: 24px; color: var(--primary); }
.courier-credit-card { width: min(760px, calc(100% - 40px)); margin: 32px auto 0; padding: 28px; text-align: center; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.courier-credit-card .courier-credit-icon { width: 60px; height: 60px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: #fff0ec; color: var(--primary); font-size: 26px; }
.courier-credit-card h3 { margin: 0 0 8px; }
.courier-credit-card p { max-width: 620px; margin: 0 auto 22px; color: var(--muted); line-height: 1.6; }
@media (max-width: 1100px) { .employee-history-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px) { .employee-history-metrics { grid-template-columns: 1fr; } .employee-history-header-actions { align-items: flex-end; flex-direction: column; } .courier-credit-card { width: calc(100% - 24px); padding: 20px; } }


/* Fixed 14: payment methods remain available when an employee is selected */
.courier-payment-notice {
  width: min(980px, calc(100% - 36px));
  margin: 18px auto 0;
  padding: 15px 18px;
  border: 1px solid #ffd6ce;
  border-radius: 14px;
  background: #fff8f6;
  display: grid;
  gap: 7px;
}
.courier-payment-notice > div { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.courier-payment-notice span { color:var(--muted); font-size:13px; }
.courier-payment-notice b { color:var(--ink); }
.courier-payment-notice p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.courier-credit-helper { padding:12px 14px; border-radius:10px; background:#fff8f6; border:1px solid #ffd6ce; display:grid; gap:3px; }
.courier-credit-helper span { color:var(--muted); font-size:12px; }
@media (max-width:760px) {
  .courier-payment-notice { width:calc(100% - 24px); margin-top:12px; }
  .courier-payment-notice > div { align-items:flex-start; flex-direction:column; gap:2px; }
}

/* Sales return / rejected delivery */
.status-stack { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.return-pill { white-space: nowrap; }
.employee-sale-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.warning-btn { background:#fff7e8; color:#a15b00; border:1px solid #f2c26b; }
.warning-btn:hover { background:#ffedc7; }
.return-info { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.return-info > div { border:1px solid var(--line); border-radius:11px; padding:12px; display:grid; gap:5px; }
.return-info span { color:var(--muted); font-size:12px; }
.return-items-card { overflow:hidden; }
.return-item-list { display:grid; }
.return-item-row { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:16px; align-items:center; padding:14px 16px; border-top:1px solid var(--line); }
.return-item-row:first-child { border-top:0; }
.return-item-row > div { display:grid; gap:4px; }
.return-item-row small { color:var(--muted); }
.return-item-row label { margin:0; }
.return-total-box { display:flex; justify-content:space-between; align-items:center; gap:15px; border-radius:12px; padding:15px 16px; background:#fff6ee; border:1px solid #ffd6bb; }
.return-total-box strong { color:var(--primary); font-size:21px; }
.receipt-return-row { color:#b24a35; font-size:12px; }
@media (max-width:760px) {
  .return-info { grid-template-columns:1fr; }
  .return-item-row { grid-template-columns:1fr; }
}


/* Fixed 16: employee delivery date filter */
.employee-filter-card { display: grid; gap: 10px; }
.employee-filters { align-items: end; }
.employee-filters .employee-search-filter { min-width: 280px; flex: 1 1 320px; }
.employee-period-label { padding: 0 2px; }
.employee-history-period { margin-top: 5px; font-size: 12px; color: var(--muted); }
.employee-history-table-card .card-head { gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .employee-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .employee-filters .employee-search-filter { grid-column: 1 / -1; min-width: 0; }
}
@media (max-width: 560px) {
  .employee-filters { grid-template-columns: 1fr; }
  .employee-filters .employee-search-filter { grid-column: auto; }
}


/* Fixed17: reset-friendly transaction view and independent product/cart scrolling */
.cashier-pos-shell {
  height: calc(100dvh - 148px);
  min-height: 560px;
  overflow: hidden;
}
.cashier-catalog-pane,
.cashier-cart-pane {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.cashier-pos-header,
.cashier-pos-tabs,
.cashier-category-tabs,
.cashier-cart-header,
.cashier-transaction-meta,
.cashier-cart-footer {
  flex: 0 0 auto;
}
.cashier-product-grid {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.cashier-cart-list {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
body.cashier-mode[data-page="pos"] {
  overflow: hidden;
}
body.cashier-mode[data-page="pos"] .cashier-pos-shell {
  height: 100dvh;
  min-height: 0;
}
body:not(.cashier-mode)[data-page="pos"] .content {
  overflow: hidden;
}
@media (max-width: 760px) {
  body.cashier-mode[data-page="pos"] { overflow: auto; }
  .cashier-pos-shell { height: auto; min-height: 100dvh; overflow: visible; }
  .cashier-catalog-pane, .cashier-cart-pane { height: auto; max-height: none; overflow: visible; }
  .cashier-product-grid { max-height: 52vh; overflow-y: auto; }
  .cashier-cart-list { max-height: 34vh; overflow-y: auto; }
}


/* Enable/disable nominal limit kasbon (kasbon tetap aktif) */
.credit-limit-toggle {
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.credit-limit-toggle.is-on { background: #e9f8ef; color: #168f4c; border-color: #bfe8cf; }
.credit-limit-toggle.is-off { background: #eef2f7; color: #526074; border-color: #d7dee8; }
#creditLimitField.limit-disabled { opacity: .62; }
#creditLimitField.limit-disabled input { background: #f3f5f8; cursor: not-allowed; }


/* Customer credit-limit checkbox controls */
.limit-master-wrap, .limit-checkbox-row { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.limit-master-wrap input, .limit-checkbox-row input { width:17px; height:17px; min-height:17px; accent-color:#16a34a; cursor:pointer; }
.limit-master-wrap input:disabled, .limit-checkbox-row input:disabled { cursor:not-allowed; opacity:.6; }
.limit-state { display:inline-flex; align-items:center; justify-content:center; min-width:140px; padding:7px 12px; border-radius:10px; font-size:12px; font-weight:700; border:1px solid transparent; }
.limit-state.is-on { background:#e8f8ee; color:#11833f; border-color:#b7e4c7; }
.limit-state.is-off { background:#f1f3f6; color:#667085; border-color:#d8dde6; }

/* Global customer tier pricing mode */
.pricing-disabled { opacity: .62; }
.pricing-disabled input:disabled,
.pricing-disabled select:disabled {
  cursor: not-allowed;
  background: #eef1f5;
  color: #7a8393;
}
.pricing-mode-note {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.45;
}
.pricing-mode-note.enabled {
  color: #146c3a;
  background: #eaf8f0;
  border: 1px solid #bee7cf;
}
.pricing-mode-note.disabled {
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #d9dde4;
}


/* Minimum item per customer price tier */
.cashier-product-minimum { display:block; margin-top:4px; font-size:10px; color:var(--muted); }
.cashier-cart-item.minimum-not-met { border-left:3px solid #ef4b35; padding-left:10px; }
.minimum-item-warning { margin-top:7px; padding:7px 9px; border-radius:8px; background:#fff1ee; color:#d63e2a; font-size:11px; font-weight:700; line-height:1.35; }

/* Fixed 25 - Tukar Wadah Kosong */
.cashier-cart-tools { grid-template-columns: repeat(4, minmax(58px, 1fr)); }
.cashier-tool-button.warning { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.cashier-tool-button.active { border-color: #22c55e; background: #f0fdf4; color: #15803d; }
.cashier-tool-button:disabled { opacity: .45; cursor: not-allowed; }
.container-exchange-editor { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fafbfc; display: grid; gap: 14px; }
.container-exchange-editor.enabled { border-color: #bbf7d0; background: #f0fdf4; }
.container-exchange-editor.disabled { opacity: .8; }
.container-exchange-title { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.container-exchange-title > div { display: grid; gap: 4px; }
.container-exchange-title b { font-size: 14px; }
.container-exchange-title small { color: var(--muted); line-height: 1.4; max-width: 660px; }
.container-exchange-title select { width: 140px; min-width: 140px; }
.container-exchange-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.container-exchange-editor.disabled .container-exchange-fields { opacity: .55; }
.cart-empty-exchange { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid; border-radius: 8px; padding: 8px 10px; margin-top: 9px; background: #fff; font: inherit; text-align: left; }
.cart-empty-exchange.missing { border-color: #fdba74; color: #c2410c; background: #fff7ed; }
.cart-empty-exchange.complete { border-color: #86efac; color: #15803d; background: #f0fdf4; }
.cashier-cart-item.empty-exchange-missing { border-left: 3px solid #f59e0b; padding-left: 12px; }
.empty-exchange-summary { border: 1px solid #fed7aa; border-radius: 12px; padding: 14px; background: #fff7ed; }
.empty-exchange-summary p { margin: 5px 0 0; color: #7c2d12; line-height: 1.45; }
.empty-exchange-list { display: grid; gap: 10px; }
.empty-exchange-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 12px; align-items: end; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.empty-exchange-row > div { display: grid; gap: 5px; }
.empty-exchange-row small { color: var(--muted); line-height: 1.4; }
.empty-exchange-total { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.danger-text { color: var(--red); }
.receipt-container-row { font-size: 12px; color: #166534; }
@media (max-width: 760px) {
  .cashier-cart-tools { grid-template-columns: repeat(4, minmax(46px, 1fr)); }
  .container-exchange-title { align-items: stretch; flex-direction: column; }
  .container-exchange-title select { width: 100%; }
  .container-exchange-fields { grid-template-columns: 1fr; }
  .empty-exchange-row { grid-template-columns: 1fr 110px; }
  .empty-exchange-row .btn { grid-column: 1 / -1; }
}


/* Fixed 26 - wadah kembali pada menu pegawai */
.employee-empty-summary,
.employee-empty-cell { display:flex; flex-direction:column; gap:2px; min-width:90px; }
.employee-empty-summary b,
.employee-empty-cell b { color:#168f4c; }
.employee-empty-summary small,
.employee-empty-cell small { color:var(--muted); font-size:11px; }
.employee-empty-summary.pending b,
.employee-empty-cell.pending b,
.employee-empty-cell.pending small { color:var(--red); }
.employee-empty-details { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.employee-empty-details span { font-size:10px; color:var(--muted); white-space:nowrap; }
.employee-empty-cell.complete small { color:#168f4c; }


/* Fixed 27: Wadah kembali dipisahkan berdasarkan jenis/nama */
.empty-return-btn {
  border-color: #9eddbd !important;
  background: #ecfbf3 !important;
  color: #13884a !important;
  font-weight: 800;
}
.empty-return-btn:hover { background: #dff7ea !important; border-color: #64c997 !important; }
.employee-empty-open {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.employee-empty-open:hover { background: #ecfbf3; }
.empty-return-header { margin-bottom: 14px; }
.empty-return-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.empty-return-summary > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
}
.empty-return-summary span { font-size: 12px; color: var(--muted); }
.empty-return-summary b { font-size: 22px; color: #168f4c; }
.empty-return-summary .pending b { color: var(--red); }
.empty-return-card { margin-top: 14px; overflow: hidden; }
.empty-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  padding: 14px;
}
.empty-type-card {
  border: 1px solid #a9dfc2;
  border-radius: 12px;
  padding: 14px;
  background: #f1fbf6;
}
.empty-type-card.pending { border-color: #f1b2b9; background: #fff6f7; }
.empty-type-name { color: #168f4c; font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.empty-type-card.pending .empty-type-name { color: var(--red); }
.empty-type-stats { display: grid; gap: 6px; }
.empty-type-stats span { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.empty-type-stats b { color: var(--text); }
.empty-type-status { margin-top: 10px; font-size: 12px; font-weight: 800; color: #168f4c; }
.empty-type-card.pending .empty-type-status { color: var(--red); }
.empty-name-green { color: #168f4c; }
.empty-pending-number { color: var(--red); font-weight: 800; }
@media (max-width: 760px) {
  .empty-return-summary { grid-template-columns: 1fr; }
  .empty-type-grid { grid-template-columns: 1fr; }
}

/* Fixed 28: wadah kasbon menjadi outstanding sampai benar-benar diterima */
.cart-empty-exchange.pending {
  border-color: #86efac;
  color: #15803d;
  background: #f0fdf4;
}
.empty-type-return-action {
  width: 100%;
  margin-top: 12px;
}
.courier-empty-obligation {
  display: grid;
  gap: 8px;
  border: 1px solid #86efac;
  background: #f0fdf4;
  border-radius: 12px;
  padding: 14px;
}
.courier-empty-obligation > b { color: #15803d; }
.courier-empty-obligation > span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.courier-empty-obligation > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px dashed #86efac;
  padding-top: 8px;
}
.courier-empty-obligation strong { color: #15803d; }


/* Fixed 29: Android HP/tablet + LAN mode */
html, body { min-height: 100%; }
body { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { touch-action: manipulation; }
@supports (height: 100dvh) {
  .cashier-pos-shell, .cashier-payment-page { min-height: 100dvh; }
}
@media (max-width: 760px) {
  .login-view { padding: 14px; }
  .login-card { width: min(100%, 460px); padding: 28px 22px; }
  .cashier-pos-shell { min-height: 100dvh; }
  .cashier-pos-header { position: sticky; top: 0; z-index: 12; background: #fff; }
  .cashier-cart-footer { position: sticky; bottom: 0; z-index: 10; background: #fff; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .cashier-product-card { min-height: 44px; }
  .cashier-icon-button, .btn, button { min-height: 44px; }
}
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
}


/* =========================================================
   Fixed 30: responsive Android APK layout for phone/tablet
   ========================================================= */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.content, .main, .card, .card-body, .table-wrap { max-width: 100%; }
.table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
button, .btn, input, select, textarea { font-size: 16px; }

/* Tablet portrait/landscape: preserve two-pane cashier layout. */
@media (min-width: 761px) and (max-width: 1180px) {
  .topbar { padding-inline: 18px; }
  .content { padding: 18px; }
  .cashier-pos-shell { grid-template-columns: minmax(0, 1fr) clamp(320px, 36vw, 390px); }
  .cashier-pos-header { padding: 12px 14px; gap: 10px; }
  .cashier-profile { min-width: 118px; }
  .cashier-search input { height: 46px; }
  .cashier-product-grid { padding: 14px; gap: 16px 12px; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); }
  .cashier-product-name { font-size: 13px; }
  .cashier-cart-header { padding: 12px; }
  .cashier-cart-list { padding: 14px; }
  .cashier-cart-footer { padding: 14px; }
  .modal-panel { width: min(900px, calc(100% - 32px)); }
}

/* Phone layout */
@media (max-width: 600px) {
  :root { --radius: 12px; }
  .sidebar { width: min(86vw, 310px); padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
  .sidebar .brand { padding-bottom: 14px; }
  .sidebar nav { overflow-y: auto; min-height: 0; padding-bottom: 12px; }
  .sidebar nav button { min-height: 48px; }
  .topbar { height: auto; min-height: 64px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
  .topbar h1 { font-size: 18px; }
  .content { padding: 12px 10px max(28px, env(safe-area-inset-bottom)); }
  .page-actions { gap: 10px; margin-bottom: 12px; }
  .page-actions h2 { font-size: 17px; }
  .action-group { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-group .btn { width: 100%; padding-inline: 8px; }
  .filters { display: grid; grid-template-columns: 1fr; width: 100%; }
  .filters label, .filters .compact { min-width: 0; width: 100%; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric { min-height: 96px; padding: 14px; }
  .metric .value { font-size: 19px; }
  .two-col, .three-col, .form-grid, .product-edit-grid, .perm-grid { grid-template-columns: 1fr; }
  .card-head { padding: 14px; align-items: flex-start; flex-wrap: wrap; }
  .card-body { padding: 14px; }
  table { min-width: 680px; }
  th, td { padding: 10px 11px; font-size: 12px; }
  .modal { padding: 0; align-items: stretch; }
  .modal-panel { width: 100%; max-width: none; max-height: 100dvh; min-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; }
  .modal-head { padding: max(12px, env(safe-area-inset-top)) 14px 12px; flex: 0 0 auto; }
  .modal-body { flex: 1; max-height: none; padding: 14px 12px max(22px, env(safe-area-inset-bottom)); }
  .toast { top: max(10px, env(safe-area-inset-top)); right: 10px; left: 10px; width: auto; min-width: 0; max-width: none; }
  .login-view { padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
  .login-card { border-radius: 20px; padding: 26px 20px; }

  /* Cashier: catalogue first, independent compact cart below. */
  body.cashier-mode[data-page="pos"] { overflow-y: auto; }
  body.cashier-mode[data-page="pos"] .content { min-height: 100dvh; }
  .cashier-pos-shell { display: flex; flex-direction: column; height: auto; min-height: 100dvh; overflow: visible; }
  .cashier-catalog-pane { height: auto; min-height: 62dvh; max-height: none; overflow: visible; border-right: 0; }
  .cashier-pos-header { position: sticky; top: 0; z-index: 20; min-height: 62px; padding: max(8px, env(safe-area-inset-top)) 8px 8px; background: #fff; }
  .cashier-pos-header .cashier-icon-button { width: 40px; height: 40px; }
  .cashier-search input { height: 44px; padding-left: 40px; }
  .cashier-pos-tabs { position: sticky; top: 62px; z-index: 18; margin: 0; border-radius: 0; padding: 5px 8px; }
  .cashier-pos-tabs button { min-height: 42px; font-size: 14px; }
  .cashier-category-tabs { position: sticky; top: 114px; z-index: 17; padding: 14px 10px 0; gap: 18px; background: #fff; }
  .cashier-product-grid { max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 10px 20px; gap: 16px 10px; }
  .cashier-product-image { aspect-ratio: 1 / .82; }
  .cashier-product-name { min-height: 0; font-size: 13px; margin-top: 7px; }
  .cashier-product-meta { align-items: flex-end; }
  .cashier-cart-pane { height: auto; min-height: 48dvh; max-height: none; overflow: visible; border-top: 10px solid #eef0f4; }
  .cashier-cart-header { position: sticky; top: 0; z-index: 16; min-height: auto; padding: 9px 8px; background: #fff; }
  .cashier-cart-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .cashier-tool-button { min-width: 0; padding: 6px 3px; font-size: 10px; }
  .cashier-transaction-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cashier-transaction-meta > div { min-width: 0; padding: 8px 7px; }
  .cashier-transaction-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cashier-cart-list { max-height: 42dvh; min-height: 240px; overflow-y: auto; padding: 12px; }
  .cashier-empty-cart { min-height: 230px; padding: 20px 12px; }
  .cashier-empty-cart > div { font-size: 58px; }
  .cashier-cart-footer { position: sticky; bottom: 0; z-index: 19; padding: 12px 10px max(12px, env(safe-area-inset-bottom)); gap: 12px; box-shadow: 0 -8px 24px rgba(35,45,66,.08); }
  .cashier-cart-actions { grid-template-columns: 104px 1fr; gap: 8px; }
  .cashier-cart-actions .btn { min-height: 50px; }
  .cashier-variant-row { align-items: flex-start; flex-direction: column; }
  .cashier-stepper { align-self: stretch; grid-template-columns: 44px 1fr 44px; }
  .cashier-modal-actions { grid-template-columns: 1fr 1.35fr; position: sticky; bottom: 0; background: #fff; padding-bottom: env(safe-area-inset-bottom); }

  /* Payment pages */
  .cashier-payment-page > header { position: sticky; top: 0; z-index: 10; background: #fff; }
  .payment-total { min-height: 130px; }
  .payment-total strong { font-size: clamp(34px, 12vw, 50px); }
  .payment-method-section { width: calc(100% - 20px); margin: 18px auto 12px; }
  .payment-method-grid { grid-template-columns: 1fr; gap: 10px; }
  .payment-method-grid button { min-height: 78px; padding: 14px; }
  .payment-wide-option { padding-inline: 14px; }
  .cash-entry, .payment-confirm, .online-method-list, .credit-form { width: calc(100% - 24px); }
  .cash-suggestions { padding-inline: 12px; }
  .cash-suggestions > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .credit-total { padding-inline: 14px; }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .metrics { grid-template-columns: 1fr; }
  .cashier-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; padding-inline: 8px; }
  .cashier-product-meta { display: grid; gap: 2px; }
  .cashier-cart-tools { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
  .cashier-cart-actions { grid-template-columns: 92px 1fr; }
}

/* Landscape phones: keep catalogue and cart side by side when there is enough width. */
@media (max-height: 520px) and (min-width: 640px) and (orientation: landscape) {
  .cashier-pos-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 40vw); height: 100dvh; min-height: 0; overflow: hidden; }
  .cashier-catalog-pane, .cashier-cart-pane { height: 100dvh; min-height: 0; overflow: hidden; border-top: 0; }
  .cashier-product-grid, .cashier-cart-list { overflow-y: auto; max-height: none; }
  .cashier-product-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .cashier-pos-tabs, .cashier-category-tabs, .cashier-pos-header, .cashier-cart-header { position: static; }
  .cashier-cart-footer { position: static; }
}


/* Fixed 32: sidebar show/hide, administrator logo, and catalog grid/list */
.sidebar-brand-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.sidebar-brand-row .brand { min-width:0; flex:1; }
.sidebar-close-btn { flex:0 0 auto; width:32px; height:32px; margin-top:0; font-size:18px; }
.sidebar-toggle-button { flex:0 0 auto; display:grid; }
.app.sidebar-hidden { grid-template-columns:1fr; }
.app.sidebar-hidden .sidebar { transform:translateX(-105%); pointer-events:none; box-shadow:none; }
.app.sidebar-hidden .main { grid-column:1; }
.sidebar, .main { transition:transform .22s ease, margin .22s ease; }
.cashier-view-toggle { display:inline-flex; flex:0 0 auto; padding:3px; border:1px solid var(--line); border-radius:10px; background:#f5f6f8; }
.cashier-view-toggle button { width:36px; height:36px; border:0; border-radius:7px; background:transparent; color:#667085; font-size:18px; font-weight:800; }
.cashier-view-toggle button.active { background:#fff; color:var(--primary); box-shadow:0 1px 5px rgba(35,45,66,.12); }
.cashier-product-grid.list-view { display:flex; flex-direction:column; gap:8px; align-content:stretch; }
.cashier-product-grid.list-view .cashier-product-card { display:grid; grid-template-columns:74px minmax(0,1fr); grid-template-areas:'image name' 'image meta' 'image minimum'; gap:3px 14px; align-items:center; width:100%; min-height:82px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.cashier-product-grid.list-view .cashier-product-image { grid-area:image; width:64px; height:64px; aspect-ratio:auto; }
.cashier-product-grid.list-view .cashier-product-name { grid-area:name; margin:0; min-height:0; font-size:14px; }
.cashier-product-grid.list-view .cashier-product-meta { grid-area:meta; justify-content:flex-start; margin:0; }
.cashier-product-grid.list-view .cashier-product-meta b { font-size:15px; margin-left:auto; }
.cashier-product-grid.list-view .cashier-product-minimum { grid-area:minimum; margin:0; }
@media (max-width:760px) {
  .sidebar-close-btn { display:grid; }
  .app.sidebar-hidden .sidebar { transform:translateX(-105%); }
  .cashier-view-toggle button { width:34px; height:34px; }
  .cashier-product-grid.list-view { display:flex; padding:10px 8px 18px; }
  .cashier-product-grid.list-view .cashier-product-card { grid-template-columns:62px minmax(0,1fr); grid-template-areas:'image name' 'image meta' 'image minimum'; min-height:72px; padding:7px 9px; }
  .cashier-product-grid.list-view .cashier-product-image { width:54px; height:54px; }
  .cashier-product-grid.list-view .cashier-product-meta { justify-content:space-between; }
}


/* =========================================================
   Fixed 33: sidebar scroll + independent POS scroll areas
   ========================================================= */
/* Sidebar owns one scrollable navigation area. Header/footer remain visible. */
.sidebar {
  overflow: hidden;
  min-height: 0;
}
.sidebar-brand-row,
.sidebar-foot {
  flex: 0 0 auto;
}
.sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-thumb { background: #cfd5df; border-radius: 999px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-close-btn { display: none !important; }
.sidebar-toggle-button.active,
.cashier-icon-button.active { background: #eef1f5; color: var(--primary); }

/* Desktop/tablet POS: catalogue and cart scroll independently inside the viewport. */
body.cashier-mode[data-page="pos"] { overflow: hidden; }
body.cashier-mode[data-page="pos"] .main,
body.cashier-mode[data-page="pos"] .content { height: 100dvh; min-height: 0; overflow: hidden; }
.cashier-pos-shell {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.cashier-catalog-pane,
.cashier-cart-pane {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.cashier-pos-header,
.cashier-pos-tabs,
.cashier-category-tabs,
.cashier-cart-header,
.cashier-transaction-meta,
.cashier-cart-footer {
  flex: 0 0 auto;
}
.cashier-product-grid,
.cashier-cart-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cashier-product-grid::-webkit-scrollbar,
.cashier-cart-list::-webkit-scrollbar { width: 7px; }
.cashier-product-grid::-webkit-scrollbar-thumb,
.cashier-cart-list::-webkit-scrollbar-thumb { background: #cfd5df; border-radius: 999px; }
.cashier-product-grid::-webkit-scrollbar-track,
.cashier-cart-list::-webkit-scrollbar-track { background: transparent; }
.cashier-empty-cart { min-height: 100%; }

/* Phone portrait: split the viewport into two panes; each list has its own scroll. */
@media (max-width: 600px) {
  body.cashier-mode[data-page="pos"] { height: 100dvh; overflow: hidden; }
  body.cashier-mode[data-page="pos"] .content { height: 100dvh; min-height: 0; overflow: hidden; }
  .cashier-pos-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 54dvh) minmax(0, 46dvh);
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .cashier-catalog-pane,
  .cashier-cart-pane {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }
  .cashier-catalog-pane { border-right: 0; }
  .cashier-cart-pane { border-top: 8px solid #eef0f4; }
  .cashier-pos-header,
  .cashier-pos-tabs,
  .cashier-category-tabs,
  .cashier-cart-header,
  .cashier-cart-footer { position: static; }
  .cashier-product-grid,
  .cashier-cart-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  .cashier-empty-cart { min-height: 100%; }
}

/* Medium mobile / small tablet portrait also gets independent scroll panes. */
@media (min-width: 601px) and (max-width: 760px) {
  body.cashier-mode[data-page="pos"] { height: 100dvh; overflow: hidden; }
  .cashier-pos-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 58dvh) minmax(0, 42dvh);
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .cashier-catalog-pane,
  .cashier-cart-pane { height: auto; min-height: 0; overflow: hidden; }
  .cashier-product-grid,
  .cashier-cart-list { min-height: 0; max-height: none; overflow-y: auto; }
  .cashier-cart-footer { position: static; }
}


/* Fixed 34: payment button has its own dock, fully separate from catalogue and cart scrolling. */
.cashier-cart-pane {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
}
.cashier-cart-header { grid-row: 1; }
.cashier-transaction-meta { grid-row: 2; }
.cashier-cart-list {
  grid-row: 3;
  min-height: 0;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.cashier-payment-dock {
  grid-row: 4;
  position: relative !important;
  inset: auto !important;
  z-index: 25;
  flex: none !important;
  background: #fff;
  border-top: 1px solid #dfe4ec;
  padding: 14px 18px max(14px, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 28px rgba(35,45,66,.11);
}
.cashier-payment-dock .cashier-cart-total {
  margin-bottom: 10px;
}
.cashier-payment-dock .cashier-cart-actions {
  display: grid;
  grid-template-columns: minmax(94px, 120px) minmax(0, 1fr);
  gap: 10px;
}
.cashier-payment-dock #payCartBtn {
  min-height: 54px;
  font-size: 17px;
  font-weight: 800;
}
.cashier-payment-dock #saveCartBtn {
  min-height: 54px;
}
@media (max-width: 760px) {
  .cashier-cart-pane {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .cashier-payment-dock {
    position: relative !important;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 22px rgba(35,45,66,.13);
  }
  .cashier-payment-dock .cashier-cart-actions {
    grid-template-columns: 92px minmax(0,1fr);
    gap: 8px;
  }
  .cashier-payment-dock #payCartBtn,
  .cashier-payment-dock #saveCartBtn {
    min-height: 50px;
  }
}

/* Fixed 35: only the item list may scroll. Transaction tools/meta and payment dock stay fixed. */
body.cashier-mode[data-page="pos"] .cashier-cart-pane {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}
.cashier-cart-fixed-top {
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  position: relative;
  z-index: 30;
  background: #fff;
  overflow: visible;
}
.cashier-cart-fixed-top .cashier-cart-header,
.cashier-cart-fixed-top .cashier-transaction-meta {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto;
  background: #fff;
}
body.cashier-mode[data-page="pos"] .cashier-cart-list {
  grid-row: 2 !important;
  width: 100%;
  height: 100%;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
body.cashier-mode[data-page="pos"] .cashier-payment-dock {
  grid-row: 3 !important;
  position: relative !important;
  inset: auto !important;
  bottom: auto !important;
  min-width: 0;
  flex: 0 0 auto !important;
  z-index: 35;
  background: #fff;
  overflow: visible;
}

@media (max-width: 760px) {
  body.cashier-mode[data-page="pos"] .cashier-cart-pane {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  .cashier-cart-fixed-top {
    position: relative !important;
  }
  body.cashier-mode[data-page="pos"] .cashier-cart-list {
    height: 100%;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  body.cashier-mode[data-page="pos"] .cashier-payment-dock {
    position: relative !important;
    bottom: auto !important;
  }
}


/* Fixed 36: cashier/non-admin sidebar stays controllable and shifts content on larger screens. */
/* On desktop and tablet, opening the cashier sidebar reserves its own width instead of covering the page. */
@media (min-width: 761px) {
  body.cashier-mode .app.sidebar-open .main {
    margin-left: 238px;
    width: calc(100% - 238px);
  }
  body.cashier-mode .app.sidebar-open .sidebar {
    transform: translateX(0);
  }
}

/* On compact phones the sidebar remains an overlay, but the same toggle is moved beside it so it is never covered. */
@media (max-width: 760px) {
  .app.sidebar-open #menuBtn,
  body.cashier-mode .app.sidebar-open #cashierMenuBtn {
    position: fixed !important;
    left: min(calc(238px + 6px), calc(100vw - 44px));
    top: max(12px, env(safe-area-inset-top));
    z-index: 45 !important;
    box-shadow: 0 5px 18px rgba(35,45,66,.18);
  }
}
@media (max-width: 600px) {
  .app.sidebar-open #menuBtn,
  body.cashier-mode .app.sidebar-open #cashierMenuBtn {
    left: min(calc(min(86vw, 310px) + 6px), calc(100vw - 44px));
  }
}

/* =========================================================
   Fixed 38: transaksi tersimpan per pelanggan
   ========================================================= */
.pending-save-dialog { display:grid; gap:16px; }
.pending-save-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--line);
}
.pending-save-summary > div { display:grid; gap:5px; padding:13px 14px; background:#fff; }
.pending-save-summary span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.pending-save-summary b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pending-customer-search { display:grid; gap:7px; font-weight:700; }
.pending-customer-list { max-height:330px; }
.pending-cart-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px; border:1px solid var(--line); border-radius:10px; }
.pending-cart-main { min-width:0; display:grid; gap:4px; }
.pending-cart-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pending-cart-main small { color:var(--muted); }
.pending-cart-actions { display:flex !important; grid-auto-flow:column; align-items:center; gap:8px !important; flex:0 0 auto; }

@media (max-width:600px) {
  .pending-save-summary { grid-template-columns:1fr 1fr; }
  .pending-save-summary > div:first-child { grid-column:1 / -1; }
  .pending-cart-row { align-items:flex-start; flex-direction:column; }
  .pending-cart-actions { width:100%; }
  .pending-cart-actions .btn { flex:1 1 0; }
}

/* =========================================================
   Fixed 39: status pembayaran pada struk
   ========================================================= */
.receipt-payment-status {
  margin: 14px 0 4px;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.35;
  color: #111;
}
.receipt-status-unpaid { color: #b42318; }

@media print {
  .receipt-payment-status,
  .receipt-status-unpaid {
    color: #000 !important;
    font-weight: 900 !important;
  }
}


/* =========================================================
   Fixed 40: pengelompokan transaksi kurir berdasarkan rit
   ========================================================= */
.cashier-transaction-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cashier-transaction-meta button:disabled {
  cursor: not-allowed;
  opacity: .58;
  background: #f6f7f9;
}
.cashier-transaction-meta button:disabled:hover { background: #f6f7f9; }

.courier-trip-selector { display: grid; gap: 16px; }
.courier-trip-employee {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #fafbfc;
}
.courier-trip-employee span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.courier-trip-employee b { font-size: 18px; }
.courier-trip-employee small { color: var(--muted); line-height: 1.45; }
.courier-trip-selector > label { display: grid; gap: 7px; font-weight: 750; }
.courier-trip-selector input { min-height: 48px; font-size: 18px; font-weight: 800; }
.courier-trip-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.courier-trip-quick button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font-weight: 800;
}
.courier-trip-quick button:hover,
.courier-trip-quick button.active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}

.employee-trip-table-wrap table { min-width: 980px; }
.employee-trip-group-row td {
  padding: 0 !important;
  border-top: 12px solid #f4f6f9;
  border-bottom: 0;
  background: #fff7f4;
}
.employee-trip-group-row:first-child td { border-top-width: 0; }
.employee-trip-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-left: 4px solid var(--primary);
}
.employee-trip-group-head > span {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.employee-trip-group-head strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font-size: 12px;
}
.employee-trip-group-head small {
  color: var(--muted);
  font-weight: 650;
  text-align: right;
}

@media (max-width: 760px) {
  .cashier-transaction-meta { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .cashier-transaction-meta button {
    padding: 8px 6px;
    border-right: 1px solid #e9ebf0 !important;
    border-bottom: 0 !important;
  }
  .cashier-transaction-meta button:last-child { border-right: 0 !important; }
  .cashier-transaction-meta span { font-size: 8px; letter-spacing: .02em; }
  .cashier-transaction-meta b { font-size: 10px; }
  .employee-trip-group-head { align-items: flex-start; flex-direction: column; }
  .employee-trip-group-head small { text-align: left; }
}

@media (max-width: 380px) {
  .cashier-transaction-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cashier-transaction-meta button:nth-child(2) { border-right: 0 !important; }
  .cashier-transaction-meta button:nth-child(-n+2) { border-bottom: 1px solid #e9ebf0 !important; }
  .courier-trip-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Fixed 41: rit kurir berurutan dan hanya maju setelah setoran selesai */
.courier-trip-progress {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
}
.courier-trip-progress.success { background: #effcf5; border-color: #b8efd0; color: #08783f; }
.courier-trip-progress.warning { background: #fff8eb; border-color: #ffd99b; color: #8a4d00; }
.courier-trip-progress span { font-size: 13px; line-height: 1.45; }
.courier-trip-current {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
}
.courier-trip-current strong { font-size: 22px; }
.courier-trip-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.courier-trip-step {
  min-height: 64px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  font-weight: 800;
}
.courier-trip-step small { font-size: 10px; font-weight: 600; color: var(--muted); text-align: center; }
.courier-trip-step.active { border-color: var(--orange); background: #fff1ed; color: var(--orange); cursor: pointer; }
.courier-trip-step.closed { border-color: #b8efd0; background: #effcf5; color: #08783f; }
.courier-trip-step.locked { opacity: .55; }
.trip-settled-badge, .trip-active-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}
.trip-settled-badge { color: #08783f; background: #dcf8e8; }
.trip-active-badge { color: #9a5600; background: #fff0cf; }
.employee-trip-group-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.trip-zero-outstanding {
  min-height: 94px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #b8efd0;
  border-radius: 10px;
  background: #effcf5;
}
.trip-zero-outstanding span, .trip-zero-outstanding small { color: #08783f; }
.trip-zero-outstanding strong { font-size: 20px; }
@media (max-width: 760px) {
  .courier-trip-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employee-trip-group-actions { width: 100%; align-items: flex-start; flex-direction: column; }
}

/* =========================================================
   Fixed 42: pilihan rit digabung ke menu pegawai pengiriman
   ========================================================= */
.cashier-transaction-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.employee-trip-selector-integrated { gap: 13px; }
.employee-trip-selector-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #ffd0c7;
  border-radius: 11px;
  background: #fff6f3;
}
.employee-trip-selector-note b { color: var(--orange); }
.employee-trip-selector-note span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.employee-selector-with-trip { max-height: min(520px, 58vh); }
.employee-selector-with-trip > button { min-height: 92px; }
.employee-selector-with-trip > button[data-clear-employee] { min-height: 66px; }
.employee-selector-copy { align-content: center; }
.employee-selector-trip {
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid #cfe1ff;
  background: #f3f7ff;
  color: #244b84;
}
.employee-selector-trip strong {
  font-size: 11px;
  white-space: nowrap;
}
.selector-list .employee-selector-trip small {
  min-width: 0;
  color: inherit;
  font-size: 10px;
  white-space: normal;
  line-height: 1.25;
}
.employee-selector-trip.active {
  border-color: #ffd39c;
  background: #fff7e9;
  color: #8a4d00;
}
.employee-selector-trip.ready {
  border-color: #b8efd0;
  background: #effcf5;
  color: #08783f;
}
.employee-selector-trip.loading { opacity: .72; }
.employee-selector-trip.error {
  border-color: #ffc9c9;
  background: #fff1f1;
  color: #b42318;
}

@media (max-width: 760px) {
  .cashier-transaction-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .cashier-transaction-meta button {
    border-right: 1px solid #e9ebf0 !important;
    border-bottom: 0 !important;
  }
  .cashier-transaction-meta button:last-child { border-right: 0 !important; }
  .employee-selector-with-trip { max-height: min(470px, 56vh); }
  .employee-selector-trip {
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (max-width: 380px) {
  .cashier-transaction-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .cashier-transaction-meta button:nth-child(2) { border-right: 1px solid #e9ebf0 !important; }
  .cashier-transaction-meta button:nth-child(-n+2) { border-bottom: 0 !important; }
  .cashier-transaction-meta span { font-size: 7px; }
  .cashier-transaction-meta b { font-size: 9px; }
  .employee-selector-trip {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}


/* =========================================================
   Fixed 43: tutup rit dan setoran rit dipisahkan
   ========================================================= */
.trip-closed-badge,
.trip-unsettled-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}
.trip-closed-badge { color: #244b84; background: #eaf2ff; }
.trip-unsettled-badge { color: #b42318; background: #ffe8e8; }
.trip-close-warning,
.trip-close-ready {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border-radius: 11px;
  line-height: 1.45;
}
.trip-close-warning { border: 1px solid #ffd39c; background: #fff7e9; color: #8a4d00; }
.trip-close-ready { border: 1px solid #b8efd0; background: #effcf5; color: #08783f; }
.trip-close-warning span,
.trip-close-ready span { font-size: 12px; }
.employee-trip-group-head > span { flex-wrap: wrap; }
@media (max-width: 760px) {
  .employee-history-header-actions { width: 100%; align-items: stretch; }
  .employee-history-header-actions .btn { width: 100%; }
  .employee-trip-group-actions .btn { width: 100%; }
}

/* =========================================================
   Fixed 44: wadah kembali dipisahkan per rit kurir
   ========================================================= */
.empty-trip-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.empty-trip-card {
  overflow: hidden;
  scroll-margin-top: 12px;
}
.empty-trip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  margin: -1px -1px 14px;
  border-left: 4px solid var(--primary);
  border-bottom: 1px solid var(--line);
  background: #fff7f4;
}
.empty-trip-title,
.empty-trip-totals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.empty-trip-title > strong {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font-size: 12px;
}
.empty-trip-totals span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 11px;
}
.empty-trip-totals b { color: var(--text); }
.trip-empty-pending-badge,
.trip-empty-complete-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}
.trip-empty-pending-badge { color: #a33a00; background: #ffe4cf; }
.trip-empty-complete-badge { color: #08783f; background: #dcf8e8; }
.empty-trip-details {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.empty-trip-details summary {
  cursor: pointer;
  padding: 12px 4px 2px;
  color: var(--text);
  font-weight: 800;
}
.empty-trip-details .table-wrap { margin-top: 10px; }

@media (max-width: 760px) {
  .empty-trip-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .empty-trip-totals { width: 100%; }
  .empty-trip-totals span { flex: 1 1 auto; justify-content: space-between; }
}


/* =========================================================
   Fixed 46: panel Belum Setor per Rit dipisahkan
   ========================================================= */
.employee-trip-unpaid-panel {
  margin-bottom: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid var(--line);
}
.employee-trip-unpaid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff8f6;
}
.employee-trip-unpaid-head .label {
  margin-bottom: 3px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.employee-trip-unpaid-head h3 { margin: 0; }
.employee-trip-unpaid-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.employee-trip-unpaid-period-total {
  min-width: 170px;
  padding: 10px 13px;
  border: 1px solid #ffd4ca;
  border-radius: 12px;
  background: #fff;
  text-align: right;
}
.employee-trip-unpaid-period-total span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
}
.employee-trip-unpaid-period-total strong { font-size: 19px; }
.employee-trip-unpaid-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: 270px;
  padding: 14px;
  overflow-y: auto;
}
.employee-trip-unpaid-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid #41b978;
  border-radius: 12px;
  background: #fff;
}
.employee-trip-unpaid-item.is-unpaid {
  border-left-color: var(--primary);
  background: #fffafa;
}
.employee-trip-unpaid-item span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.employee-trip-unpaid-date,
.employee-trip-unpaid-no,
.employee-trip-unpaid-amount { min-width: 0; }
.employee-trip-unpaid-date b,
.employee-trip-unpaid-no b { font-size: 13px; }
.employee-trip-unpaid-amount {
  grid-column: 1 / -1;
  padding-top: 9px;
  border-top: 1px dashed var(--line);
}
.employee-trip-unpaid-amount strong {
  display: block;
  font-size: 18px;
}
.employee-trip-unpaid-item em {
  align-self: start;
  justify-self: end;
  padding: 4px 7px;
  border-radius: 999px;
  color: #08783f;
  background: #dcf8e8;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.employee-trip-unpaid-item.is-unpaid em {
  color: #b52b1d;
  background: #ffe5e2;
}
.employee-trip-unpaid-empty {
  grid-column: 1 / -1;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 1100px) {
  .employee-trip-unpaid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .employee-trip-unpaid-head {
    align-items: stretch;
    flex-direction: column;
  }
  .employee-trip-unpaid-period-total {
    min-width: 0;
    text-align: left;
  }
  .employee-trip-unpaid-grid {
    grid-template-columns: 1fr;
    max-height: 330px;
  }
}

/* Fixed 47: pindahkan transaksi antar pegawai */
.transfer-sale-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.transfer-sale-summary > div,
.transfer-target-trip {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbfc;
}
.transfer-sale-summary span,
.transfer-target-trip span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.transfer-sale-summary b,
.transfer-target-trip strong {
  display: block;
  overflow-wrap: anywhere;
}
.transfer-target-trip {
  border-left: 4px solid var(--primary);
  background: #fff7f5;
}
.transfer-target-trip small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}
@media (max-width: 700px) {
  .transfer-sale-summary { grid-template-columns: 1fr; }
}

/* Fixed 48: rit tim kurir */
.employee-team-selector{display:grid;gap:14px}
.employee-team-empty{padding:18px;border:1px dashed var(--line,#dce3ec);border-radius:14px;color:var(--muted,#697386);text-align:center;background:#fafbfd}
.employee-team-card{border:1px solid var(--line,#dce3ec);border-radius:16px;padding:16px;background:#fff;display:grid;gap:14px}
.employee-team-card.is-active-run{border-color:#9bd9b4;background:#f7fff9}
.employee-team-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.employee-team-card-head span,.employee-team-section-title span{display:block;font-size:12px;color:var(--muted,#697386);text-transform:uppercase;letter-spacing:.04em}
.employee-team-card-head h3{margin:3px 0 0;font-size:18px}
.employee-team-card-head em{font-style:normal;font-size:12px;font-weight:700;padding:6px 9px;border-radius:999px;background:#e8f8ef;color:#08783a}
.employee-team-vehicle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.employee-team-members{display:grid;gap:8px}
.employee-team-section-title{margin-bottom:2px}
.employee-team-member{display:grid;grid-template-columns:auto 38px 1fr;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line,#dce3ec);border-radius:12px;cursor:pointer}
.employee-team-member.selected{border-color:#f34b3b;background:#fff4f1}
.employee-team-member.selection-locked{opacity:.58;cursor:not-allowed}
.employee-team-member input{width:18px;height:18px}
.employee-team-member span:last-child{display:grid;gap:2px}
.employee-team-member small,.employee-team-member em{font-size:12px;color:var(--muted,#697386);font-style:normal}
.employee-team-member em{color:#d84434;font-weight:700}
.employee-team-solo-note{padding:12px;border-radius:12px;background:#f6f8fb;color:var(--muted,#697386);font-size:13px}
.employee-team-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;border-radius:12px;background:#f7f8fb}
.employee-team-summary>div{display:grid;gap:2px}
.employee-team-summary span{font-size:11px;text-transform:uppercase;color:var(--muted,#697386)}
.employee-team-summary small{grid-column:1/-1;color:#8a4d00}
.employee-active-run-info{display:block!important;color:#08783a!important;font-weight:700;margin-top:4px}
.trip-vehicle-badge,.trip-team-badge,.trip-member-badge,.trip-leader-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:11px;font-style:normal;font-weight:700;margin-left:5px}
.trip-vehicle-badge{background:#eef2ff;color:#3949ab}
.trip-team-badge{background:#eaf8ff;color:#08729a}
.trip-member-badge{background:#fff6df;color:#9a6200}
.trip-leader-badge{background:#e8f8ef;color:#08783a}
.courier-payment-notice small{display:block;color:var(--muted,#697386);margin-top:3px}
@media(max-width:760px){
  .employee-team-vehicle-grid,.employee-team-summary{grid-template-columns:1fr}
  .employee-team-summary small{grid-column:auto}
  .employee-team-card{padding:12px}
  .employee-team-card-head{display:grid}
}

/* Fixed 49: tukar kurir pada rit tim aktif */
.swap-team-courier-form{display:grid;gap:14px}
.swap-team-current{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.swap-team-current>div,.swap-courier-preview{padding:12px 14px;border:1px solid var(--line,#dce3ec);border-radius:12px;background:#fafbfc}
.swap-team-current span,.swap-courier-preview span{display:block;margin-bottom:4px;color:var(--muted,#697386);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.swap-team-current b,.swap-courier-preview strong{display:block;overflow-wrap:anywhere}
.swap-team-members{display:grid;gap:8px;padding:12px;border:1px solid var(--line,#dce3ec);border-radius:14px;background:#fff}
.swap-team-members>.label{font-size:12px;font-weight:800;color:var(--muted,#697386);text-transform:uppercase;letter-spacing:.04em}
.swap-team-member-row{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;background:#f7f8fb}
.swap-team-member-row span:last-child{display:grid;gap:2px}
.swap-team-member-row small{color:var(--muted,#697386);font-size:12px}
.swap-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.swap-courier-preview{border-left:4px solid var(--primary);background:#fff7f5}
.swap-courier-preview small{display:block;margin-top:5px;color:var(--muted,#697386)}
.swap-courier-warning{display:grid;gap:3px;padding:11px 13px;border-radius:12px;background:#fff8e7;color:#8a5700;font-size:12px}
.swap-courier-warning b{font-size:13px}
@media(max-width:700px){
  .swap-team-current,.swap-team-grid{grid-template-columns:1fr}
}

/* =========================================================
   Fixed 56: compact Android tablet layout
   - Keeps touch targets usable while reducing oversized spacing.
   - Applies only to Android devices with a tablet-size shortest side.
   ========================================================= */
html.android-tablet {
  font-size: 14px;
}

html.android-tablet body:not(.cashier-mode) button,
html.android-tablet body:not(.cashier-mode) .btn,
html.android-tablet body:not(.cashier-mode) input,
html.android-tablet body:not(.cashier-mode) select,
html.android-tablet body:not(.cashier-mode) textarea {
  font-size: 14px;
}

html.android-tablet body:not(.cashier-mode) .app {
  grid-template-columns: 196px minmax(0, 1fr);
}

html.android-tablet body:not(.cashier-mode) .sidebar {
  width: 196px;
  padding: 12px 10px;
}

html.android-tablet body:not(.cashier-mode) .sidebar .brand {
  padding: 0 7px 14px;
  font-size: 27px;
}

html.android-tablet body:not(.cashier-mode) .sidebar .brand-with-logo.custom-logo img {
  width: min(136px, 90%);
  height: 46px;
  max-width: 136px;
  max-height: 46px;
}

html.android-tablet body:not(.cashier-mode) .sidebar nav {
  gap: 2px;
}

html.android-tablet body:not(.cashier-mode) .sidebar nav button {
  min-height: 38px;
  padding: 6px 9px;
  gap: 8px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.2;
}

html.android-tablet body:not(.cashier-mode) .sidebar nav button i {
  width: 18px;
  font-size: 15px;
}

html.android-tablet body:not(.cashier-mode) .sidebar-foot {
  padding: 10px 7px 0;
  font-size: 11px;
}

html.android-tablet body:not(.cashier-mode) .topbar {
  height: 66px;
  padding: 10px 18px;
  gap: 12px;
}

html.android-tablet body:not(.cashier-mode) .topbar h1 {
  margin-bottom: 1px;
  font-size: 18px;
}

html.android-tablet body:not(.cashier-mode) .top-actions {
  gap: 9px;
}

html.android-tablet body:not(.cashier-mode) .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

html.android-tablet body:not(.cashier-mode) .content {
  padding: 16px 18px 28px;
}

html.android-tablet body:not(.cashier-mode) .stack,
html.android-tablet body:not(.cashier-mode) .grid {
  gap: 12px;
}

html.android-tablet body:not(.cashier-mode) .card {
  border-radius: 12px;
}

html.android-tablet body:not(.cashier-mode) .card-head {
  padding: 12px 14px;
}

html.android-tablet body:not(.cashier-mode) .card-head h2,
html.android-tablet body:not(.cashier-mode) .card-head h3 {
  font-size: 15px;
}

html.android-tablet body:not(.cashier-mode) .card-body {
  padding: 14px;
}

html.android-tablet body:not(.cashier-mode) .toolbar {
  padding: 12px 14px;
}

html.android-tablet body:not(.cashier-mode) .filters {
  gap: 8px;
}

html.android-tablet body:not(.cashier-mode) .filters label {
  min-width: 145px;
  gap: 5px;
  font-size: 12px;
}

html.android-tablet body:not(.cashier-mode) input,
html.android-tablet body:not(.cashier-mode) select,
html.android-tablet body:not(.cashier-mode) textarea {
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 8px;
}

html.android-tablet body:not(.cashier-mode) .btn {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 8px;
  line-height: 1.15;
}

html.android-tablet body:not(.cashier-mode) .pill {
  padding: 4px 8px;
  font-size: 10px;
}

html.android-tablet body:not(.cashier-mode) .metrics {
  gap: 12px;
}

html.android-tablet body:not(.cashier-mode) .metric {
  min-height: 88px;
  padding: 12px 14px;
}

html.android-tablet body:not(.cashier-mode) .metric .label {
  font-size: 11px;
}

html.android-tablet body:not(.cashier-mode) .metric .value {
  font-size: 19px;
}

html.android-tablet body:not(.cashier-mode) .metric .hint {
  font-size: 10px;
}

html.android-tablet body:not(.cashier-mode) .two-col {
  grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr);
  gap: 12px;
}

html.android-tablet body:not(.cashier-mode) .chart {
  min-height: 185px;
  padding: 12px;
}

html.android-tablet body:not(.cashier-mode) .bar-item {
  height: 160px;
  min-width: 28px;
}

html.android-tablet body:not(.cashier-mode) .kpi-row {
  padding: 9px 0;
  font-size: 13px;
}

html.android-tablet body:not(.cashier-mode) .page-actions {
  margin-bottom: 13px;
}

html.android-tablet body:not(.cashier-mode) .page-actions h2 {
  font-size: 17px;
}

html.android-tablet body:not(.cashier-mode) table {
  min-width: 700px;
}

html.android-tablet body:not(.cashier-mode) th,
html.android-tablet body:not(.cashier-mode) td {
  padding: 8px 9px;
  font-size: 11.5px;
  line-height: 1.25;
}

html.android-tablet body:not(.cashier-mode) th {
  font-size: 10.5px;
}

html.android-tablet body:not(.cashier-mode) .small {
  font-size: 10.5px;
}

html.android-tablet body:not(.cashier-mode) .sales-row-actions {
  gap: 6px;
  flex-wrap: nowrap;
}

html.android-tablet body:not(.cashier-mode) .btn-mini {
  min-height: 31px;
  padding: 5px 9px;
  font-size: 11px;
  white-space: nowrap;
}

/* Sales table: avoid the tall wrapped rows visible on tablets. */
html.android-tablet body:not(.cashier-mode) #salesBody table {
  min-width: 1050px;
}

html.android-tablet body:not(.cashier-mode) #salesBody th:nth-child(1),
html.android-tablet body:not(.cashier-mode) #salesBody td:nth-child(1),
html.android-tablet body:not(.cashier-mode) #salesBody th:nth-child(2),
html.android-tablet body:not(.cashier-mode) #salesBody td:nth-child(2),
html.android-tablet body:not(.cashier-mode) #salesBody th:nth-child(6),
html.android-tablet body:not(.cashier-mode) #salesBody td:nth-child(6),
html.android-tablet body:not(.cashier-mode) #salesBody th:nth-child(8),
html.android-tablet body:not(.cashier-mode) #salesBody td:nth-child(8),
html.android-tablet body:not(.cashier-mode) #salesBody th:nth-child(9),
html.android-tablet body:not(.cashier-mode) #salesBody td:nth-child(9) {
  white-space: nowrap;
}

/* Compact modal presentation on landscape tablets without turning it into a phone sheet. */
html.android-tablet body:not(.cashier-mode) .modal {
  padding: 14px;
}

html.android-tablet body:not(.cashier-mode) .modal-panel {
  width: min(940px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  border-radius: 14px;
}

html.android-tablet body:not(.cashier-mode) .modal-head {
  padding: 11px 14px;
}

html.android-tablet body:not(.cashier-mode) .modal-head h2 {
  font-size: 16px;
}

html.android-tablet body:not(.cashier-mode) .modal-body {
  padding: 14px;
  max-height: calc(100dvh - 86px);
}

/* Cashier remains touch friendly, but trims oversized controls on tablets. */
html.android-tablet body.cashier-mode .cashier-pos-header {
  min-height: 58px;
  padding: 9px 12px;
}

html.android-tablet body.cashier-mode .cashier-icon-button {
  width: 38px;
  height: 38px;
  font-size: 19px;
}

html.android-tablet body.cashier-mode .cashier-search input {
  height: 40px;
  font-size: 14px;
}

html.android-tablet body.cashier-mode .cashier-pos-tabs button {
  min-height: 38px;
  font-size: 13px;
}

html.android-tablet body.cashier-mode .cashier-category-tabs {
  padding-top: 10px;
}

html.android-tablet body.cashier-mode .cashier-product-grid {
  padding: 12px;
  gap: 14px 10px;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

html.android-tablet body.cashier-mode .cashier-product-name {
  font-size: 12px;
}

html.android-tablet body.cashier-mode .cashier-cart-header,
html.android-tablet body.cashier-mode .cashier-cart-list,
html.android-tablet body.cashier-mode .cashier-cart-footer {
  padding: 10px;
}

html.android-tablet body.cashier-mode .cashier-tool-button {
  min-height: 50px;
  font-size: 11px;
}

html.android-tablet body.cashier-mode .cashier-cart-actions .btn {
  min-height: 44px;
  font-size: 14px;
}

/* Fixed-width sidebar shift for cashier-role tablet pages. */
@media (min-width: 761px) {
  html.android-tablet body.cashier-mode .app.sidebar-open .main {
    margin-left: 196px;
    width: calc(100% - 196px);
  }
  html.android-tablet body.cashier-mode .sidebar {
    width: 196px;
  }
}


/* Cashier-role administration pages use the same compact tablet density. */
html.android-tablet body.cashier-mode:not([data-page="pos"]) button,
html.android-tablet body.cashier-mode:not([data-page="pos"]) .btn,
html.android-tablet body.cashier-mode:not([data-page="pos"]) input,
html.android-tablet body.cashier-mode:not([data-page="pos"]) select,
html.android-tablet body.cashier-mode:not([data-page="pos"]) textarea {
  font-size: 14px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .sidebar {
  width: 196px;
  padding: 12px 10px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .sidebar .brand {
  padding: 0 7px 14px;
  font-size: 27px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .sidebar .brand-with-logo.custom-logo img {
  width: min(136px, 90%);
  height: 46px;
  max-width: 136px;
  max-height: 46px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .sidebar nav { gap: 2px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) .sidebar nav button {
  min-height: 38px;
  padding: 6px 9px;
  gap: 8px;
  font-size: 13px;
  line-height: 1.2;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .sidebar nav button i {
  width: 18px;
  font-size: 15px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .sidebar-foot {
  padding: 10px 7px 0;
  font-size: 11px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .topbar {
  height: 66px;
  padding: 10px 18px;
  gap: 12px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .topbar h1 { font-size: 18px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) .content { padding: 16px 18px 28px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) .toolbar { padding: 12px 14px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) .filters { gap: 8px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) .filters label {
  min-width: 145px;
  gap: 5px;
  font-size: 12px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) input,
html.android-tablet body.cashier-mode:not([data-page="pos"]) select,
html.android-tablet body.cashier-mode:not([data-page="pos"]) textarea {
  min-height: 38px;
  padding: 7px 10px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .btn {
  min-height: 36px;
  padding: 7px 12px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .metrics { gap: 12px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) .metric {
  min-height: 88px;
  padding: 12px 14px;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) .metric .value { font-size: 19px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) .card-head { padding: 12px 14px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) .card-body { padding: 14px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) th,
html.android-tablet body.cashier-mode:not([data-page="pos"]) td {
  padding: 8px 9px;
  font-size: 11.5px;
  line-height: 1.25;
}
html.android-tablet body.cashier-mode:not([data-page="pos"]) th { font-size: 10.5px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) #salesBody table { min-width: 1050px; }
html.android-tablet body.cashier-mode:not([data-page="pos"]) .btn-mini {
  min-height: 31px;
  padding: 5px 9px;
  font-size: 11px;
  white-space: nowrap;
}

/* =========================================================
   Fixed 57: administrator-only Android tablet POS fixes
   - Smaller product thumbnails in the administrator POS.
   - Hiding the administrator sidebar restores full page width.
   - Cart tools and payment dock stay fixed; only item lists scroll.
   - Cashier and other role layouts are intentionally unchanged.
   ========================================================= */

/* Fixed 56's tablet grid rule is later in the cascade than the generic
   sidebar-hidden rule. Re-assert the one-column layout only for administrator
   accounts so hiding the sidebar cannot leave the page inside a 196px column. */
@media (min-width: 761px) {
  html.android-tablet body.administrator-mode:not(.cashier-mode) .app.sidebar-hidden {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.android-tablet body.administrator-mode:not(.cashier-mode) .app.sidebar-hidden .main {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  html.android-tablet body.administrator-mode:not(.cashier-mode) .app.sidebar-hidden .sidebar {
    transform: translateX(-105%) !important;
    pointer-events: none;
    box-shadow: none;
  }
}

/* Administrator catalogue thumbnails are compact on Android tablets. */
html.android-tablet body.administrator-mode[data-page="pos"] .cashier-product-grid:not(.list-view) {
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)) !important;
  gap: 10px 8px !important;
  padding: 10px !important;
}

html.android-tablet body.administrator-mode[data-page="pos"] .cashier-product-grid:not(.list-view) .cashier-product-card {
  min-width: 0;
}

html.android-tablet body.administrator-mode[data-page="pos"] .cashier-product-grid:not(.list-view) .cashier-product-image {
  aspect-ratio: 1 / .72 !important;
  max-height: 112px;
  border-radius: 7px;
  font-size: 20px;
}

html.android-tablet body.administrator-mode[data-page="pos"] .cashier-product-grid:not(.list-view) .cashier-product-name {
  min-height: 28px;
  margin-top: 6px;
  font-size: 11.5px !important;
  line-height: 1.22;
}

html.android-tablet body.administrator-mode[data-page="pos"] .cashier-product-grid:not(.list-view) .cashier-product-meta {
  gap: 4px;
  margin-top: 2px;
  font-size: 9.5px;
}

html.android-tablet body.administrator-mode[data-page="pos"] .cashier-product-grid:not(.list-view) .cashier-product-meta b {
  font-size: 10.5px;
}

html.android-tablet body.administrator-mode[data-page="pos"] .cashier-product-grid.list-view .cashier-product-card {
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 62px;
  padding: 6px 8px;
}

html.android-tablet body.administrator-mode[data-page="pos"] .cashier-product-grid.list-view .cashier-product-image {
  width: 46px;
  height: 46px;
}

/* Administrator POS is a bounded tablet viewport. The main area has a fixed
   topbar and a content row. Product cards and cart items get separate scroll
   containers while the cart controls and payment dock remain visible. */
@media (min-width: 761px) {
  html.android-tablet body.administrator-mode[data-page="pos"] {
    height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .main {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .topbar {
    grid-row: 1;
    flex: 0 0 auto;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .content {
    grid-row: 2;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-pos-shell {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-catalog-pane,
  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-cart-pane {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-catalog-pane {
    display: flex !important;
    flex-direction: column;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-product-grid {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-cart-pane {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overscroll-behavior: none;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-cart-fixed-top {
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    z-index: 30;
    min-height: 0;
    overflow: hidden;
    background: #fff;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-cart-fixed-top .cashier-cart-header,
  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-cart-fixed-top .cashier-transaction-meta {
    position: relative !important;
    inset: auto !important;
    background: #fff;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-cart-list {
    grid-row: 2 !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.android-tablet body.administrator-mode[data-page="pos"] .cashier-payment-dock {
    grid-row: 3 !important;
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    z-index: 35;
    flex: 0 0 auto !important;
    background: #fff;
  }
}

/* =========================================================
   Fixed 58: unified tablet sidebar + search field + web POS scroll
   - Every Android-tablet role uses the same sidebar dimensions as admin.
   - The POS search icon never overlaps the placeholder/value.
   - Administrator POS uses one bounded viewport in APK and web browsers;
     only the product catalogue and cart item list can scroll.
   ========================================================= */

/* Use one sidebar scale for administrator, cashier, warehouse, and viewer
   accounts on Android tablets. Behaviour (fixed vs overlay) is unchanged;
   only width, typography, spacing, logo, and footer density are unified. */
html.android-tablet body .sidebar {
  width: 196px !important;
  padding: 12px 10px !important;
}

html.android-tablet body .sidebar .brand {
  padding: 0 7px 14px !important;
  font-size: 27px !important;
  line-height: 1.05;
}

html.android-tablet body .sidebar .brand-with-logo.custom-logo img {
  width: min(136px, 90%) !important;
  height: 46px !important;
  max-width: 136px !important;
  max-height: 46px !important;
}

html.android-tablet body .sidebar nav {
  gap: 2px !important;
  padding-right: 4px;
  padding-bottom: 12px;
}

html.android-tablet body .sidebar nav button {
  min-height: 38px !important;
  padding: 6px 9px !important;
  gap: 8px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

html.android-tablet body .sidebar nav button i {
  width: 18px !important;
  font-size: 15px !important;
}

html.android-tablet body .sidebar-foot {
  padding: 10px 7px 0 !important;
  font-size: 11px !important;
}

/* Non-administrator accounts still use an overlay/shift sidebar, but reserve
   exactly the same 196px width used by the administrator tablet sidebar. */
@media (min-width: 761px) {
  html.android-tablet body.cashier-mode .app.sidebar-open .main {
    margin-left: 196px !important;
    width: calc(100% - 196px) !important;
  }
}

/* Replace the font glyph with a small CSS magnifier. This avoids differences
   between Android/WebView fonts that previously made the icon collide with
   "Cari Produk". */
.cashier-search > span {
  left: 14px !important;
  width: 21px;
  height: 21px;
  color: #596273;
  font-size: 0 !important;
  line-height: 1;
  pointer-events: none;
}

.cashier-search > span::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.cashier-search > span::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 14px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.cashier-search input {
  padding-left: 48px !important;
}

/* Administrator POS: identical independent-scroll behaviour in Android APK,
   Android/desktop web browsers, and laptop browsers. */
@media (min-width: 761px) {
  body.administrator-mode[data-page="pos"] {
    height: 100dvh;
    min-height: 0;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.administrator-mode[data-page="pos"] .app {
    height: 100dvh;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.administrator-mode[data-page="pos"] .main {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.administrator-mode[data-page="pos"] .topbar {
    grid-row: 1;
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto;
  }

  body.administrator-mode[data-page="pos"] .content {
    grid-row: 2;
    width: 100%;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  body.administrator-mode[data-page="pos"] .cashier-pos-shell {
    display: grid !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body.administrator-mode[data-page="pos"] .cashier-catalog-pane,
  body.administrator-mode[data-page="pos"] .cashier-cart-pane {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body.administrator-mode[data-page="pos"] .cashier-catalog-pane {
    display: flex !important;
    flex-direction: column;
  }

  body.administrator-mode[data-page="pos"] .cashier-pos-header,
  body.administrator-mode[data-page="pos"] .cashier-pos-tabs,
  body.administrator-mode[data-page="pos"] .cashier-category-tabs {
    flex: 0 0 auto;
  }

  body.administrator-mode[data-page="pos"] .cashier-product-grid {
    flex: 1 1 auto;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.administrator-mode[data-page="pos"] .cashier-cart-pane {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overscroll-behavior: none;
  }

  body.administrator-mode[data-page="pos"] .cashier-cart-fixed-top {
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    z-index: 30;
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
    background: #fff;
  }

  body.administrator-mode[data-page="pos"] .cashier-cart-fixed-top .cashier-cart-header,
  body.administrator-mode[data-page="pos"] .cashier-cart-fixed-top .cashier-transaction-meta {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto;
    background: #fff;
  }

  body.administrator-mode[data-page="pos"] .cashier-cart-list {
    grid-row: 2 !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.administrator-mode[data-page="pos"] .cashier-payment-dock {
    grid-row: 3 !important;
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    z-index: 35;
    min-width: 0;
    flex: 0 0 auto !important;
    overflow: visible !important;
    background: #fff;
  }

  /* Sidebar hidden must not leave the web page in the old sidebar column. */
  body.administrator-mode[data-page="pos"] .app.sidebar-hidden {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.administrator-mode[data-page="pos"] .app.sidebar-hidden .main {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

/* Fixed 60 — alur katalog, variasi, manual, dan detail item seperti Qasir. */
.cart-item-open {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 3px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left;
  font-size: inherit !important;
  cursor: pointer;
}
.cart-item-open b { overflow-wrap: anywhere; }
.cart-item-open span,
.cart-item-open small { display: block; color: #687181; font-size: 12px; font-weight: 500; }
.cart-item-open .cart-item-discount { color: #ef4b36; }
.cart-item-open .cart-item-description { color: #7b8391; font-style: italic; }

/* Modal pilih variasi dibuat lebar, pendek, dan memiliki footer tetap. */
.qasir-variant-panel {
  width: min(910px, calc(100vw - 48px)) !important;
  height: min(540px, calc(100dvh - 70px));
  max-height: min(540px, calc(100dvh - 70px));
  display: flex;
  flex-direction: column;
}
.qasir-variant-panel .modal-head { flex: 0 0 auto; }
.qasir-variant-panel .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 22px 24px;
}
.cashier-variant-modal {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
}
.cashier-variant-product { padding: 0 0 18px; }
.cashier-variant-list {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.cashier-variant-row { min-height: 76px; padding: 14px 0; }
.cashier-variant-modal > .cashier-modal-actions {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.cashier-variant-modal > .cashier-modal-actions .btn { min-height: 58px; font-size: 17px; }

/* Penjualan manual: keypad 3 kolom dan tombol keranjang besar di sisi kanan. */
.qasir-manual-sale {
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  background: #f7f8fa;
}
.qasir-manual-display {
  width: 100%;
  min-height: 92px;
  padding: 17px 22px;
  border: 1px solid #dfe3e9;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  text-align: left;
  cursor: pointer;
}
.qasir-manual-display:hover { border-color: #f24b37; background: #fffaf8; }
.qasir-manual-display:focus-visible { outline: 3px solid rgba(242,75,55,.18); border-color: #f24b37; }
.qasir-manual-display-copy { min-width: 0; display: grid; gap: 5px; }
.qasir-manual-display-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4c5563; font-size: 16px; font-weight: 700; }
.qasir-manual-display-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #98a0ad; font-size: 12px; font-weight: 500; }
.qasir-manual-display strong { font-size: clamp(28px, 4vw, 44px); line-height: 1; color: #202633; white-space: nowrap; }
.qasir-manual-display > i { color: #f24b37; font-size: 18px; font-style: normal; }
.qasir-manual-keypad {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(150px, 1.05fr);
  grid-template-rows: repeat(4, minmax(58px, 1fr));
  gap: 10px;
}
.qasir-manual-keypad > button {
  min-width: 0;
  min-height: 58px;
  border: 1px solid #d9dde5;
  border-radius: 7px;
  background: #fff;
  color: #303744;
  font-size: 22px;
  font-weight: 600;
}
.qasir-manual-keypad > button:active { background: #eef0f4; transform: translateY(1px); }
.qasir-manual-keypad .qasir-manual-add {
  grid-column: 4;
  grid-row: 1 / 5;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 18px;
  background: #f3f4f6;
  color: #303744;
}
.qasir-manual-add span { font-size: 38px; }
.qasir-manual-add b { font-size: 15px; line-height: 1.35; }

.qasir-manual-description-panel { width: min(520px, calc(100vw - 40px)) !important; }
.qasir-manual-description-form { display: grid; gap: 24px; padding: 8px 0 2px; }
.qasir-manual-description-form input { width: 100%; min-height: 64px; padding: 0 18px; border: 1px solid #d8dde5; border-radius: 6px; font-size: 17px; }
.qasir-manual-description-form input:focus { border-color: #f24b37; box-shadow: 0 0 0 3px rgba(242,75,55,.12); outline: none; }
.qasir-manual-description-form .btn { min-height: 58px; font-size: 17px; }

.qasir-warning-panel { width: min(600px, calc(100vw - 40px)) !important; }
.qasir-warning-dialog { padding: 18px 6px 2px; text-align: center; }
.qasir-warning-dialog p { margin: 0 auto 28px; max-width: 470px; font-size: 17px; line-height: 1.55; color: #424957; }
.qasir-warning-dialog .btn { min-height: 54px; font-size: 16px; }

/* Detail item keranjang. */
.qasir-item-detail-panel {
  width: min(980px, calc(100vw - 48px)) !important;
  height: min(760px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
}
.qasir-item-detail-panel .modal-head { flex: 0 0 auto; }
.qasir-item-detail-panel .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  padding: 0;
}
.qasir-item-detail {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 24px 94px;
  background: #fff;
}
.qasir-item-summary {
  display: grid;
  gap: 0;
  border-bottom: 8px solid #e4e7ed;
}
.qasir-item-summary > div {
  min-height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid #dfe2e7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.qasir-item-summary span,
.qasir-item-summary b { font-size: 17px; }
.qasir-item-summary > div:last-child b { color: #d8422e; }
.qasir-item-section {
  padding: 24px 20px;
  border-bottom: 8px solid #e4e7ed;
}
.qasir-item-section > label,
.qasir-item-section > h3 { margin: 0; font-size: 17px; font-weight: 700; }
.qasir-item-section label input:not([type="radio"]) { margin-top: 16px; }
.qasir-qty-row {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.qasir-qty-row .cashier-stepper { grid-template-columns: 40px 100px 40px; }
.qasir-radio-row {
  min-height: 66px;
  display: flex !important;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid #dfe2e7;
  cursor: pointer;
}
.qasir-radio-row input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: #ef4b36; }
.qasir-radio-row span { font-weight: 650; }
#detailDiscountField { padding: 16px 0; }
.qasir-remove-cart-item {
  width: 100%;
  min-height: 68px;
  border: 0;
  background: #fff;
  color: #ef4b36;
  font-weight: 750;
  font-size: 16px;
}
.qasir-item-save {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 16px;
  z-index: 5;
  padding-top: 10px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 25%);
}
.qasir-item-save .btn { min-height: 58px; font-size: 17px; }
.receipt-item-description { margin: 2px 0 4px; color: #666; font-size: 11px; font-style: italic; }
.receipt-item-discount { color: #bd3d2c; }

@media (max-width: 760px) {
  .qasir-variant-panel,
  .qasir-item-detail-panel {
    width: 100% !important;
    height: 100dvh;
    max-height: 100dvh;
  }
  .qasir-manual-sale { padding: 10px; gap: 10px; }
  .qasir-manual-display { min-height: 70px; padding: 12px 15px; gap: 10px; }
  .qasir-manual-display-copy small { display: none; }
  .qasir-manual-display-copy b { font-size: 14px; }
  .qasir-manual-display > i { font-size: 15px; }
  .qasir-manual-description-panel { width: min(520px, calc(100vw - 28px)) !important; }
  .qasir-manual-keypad { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(54px, 1fr)); gap: 7px; }
  .qasir-manual-keypad .qasir-manual-add { grid-column: 1 / -1; grid-row: 5; display: flex; }
  .qasir-manual-add span { font-size: 25px; }
  .qasir-item-detail { padding: 10px 0 86px; }
  .qasir-item-save { left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* Pada tablet Android, detail item dibuat satu layar penuh seperti aplikasi referensi. */
html.android-tablet .qasir-item-detail-panel {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
}
html.android-tablet .qasir-item-detail-panel .modal-head { padding: 14px 22px; }
html.android-tablet .qasir-item-detail-panel .modal-body { padding: 0 !important; }
html.android-tablet .qasir-item-detail { padding-left: max(9vw, 70px); padding-right: max(9vw, 70px); }
html.android-tablet .qasir-item-save { left: max(9vw, 70px); right: max(9vw, 70px); }
html.android-tablet .qasir-variant-panel { width: min(900px, calc(100vw - 120px)) !important; }
.qasir-item-save {
  position: sticky;
  left: auto;
  right: auto;
  bottom: -1px;
  margin-top: 14px;
  padding: 14px 0 0;
  background: #fff;
}
html.android-tablet .qasir-item-save { left: auto; right: auto; }

/* =========================================================
   Fixed 61: Rekap Kas harian dan printer thermal
   ========================================================= */
.cash-session-gate {
  min-height: calc(100dvh - 150px); display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:32px; gap:14px; max-width:680px; margin:0 auto;
}
.cash-session-gate-icon { width:76px; height:76px; display:grid; place-items:center; border-radius:22px; background:#fff0ec; color:var(--primary); font-size:34px; }
.cash-session-gate h2 { margin:0; font-size:28px; }
.cash-session-gate p { margin:0; max-width:580px; color:var(--muted); line-height:1.6; }
.cash-session-gate-date { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 18px; }
.cash-recap-page { display:grid; gap:18px; }
.cash-recap-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.cash-recap-head h2 { margin:0 0 4px; }
.cash-recap-head p { margin:0; }
.cash-current-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:18px; box-shadow:var(--shadow); }
.cash-current-card.open { border-left:5px solid #22b85b; }
.cash-current-card.closed { border-left:5px solid var(--primary); }
.cash-current-main { display:flex; align-items:center; gap:15px; flex:1; min-width:0; }
.cash-session-icon { width:52px; height:52px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; background:#f0f2f6; font-size:24px; }
.cash-session-eyebrow { display:block; font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--primary); margin-bottom:4px; }
.cash-current-main h3 { margin:0 0 4px; }
.cash-current-main p { margin:0; color:var(--muted); }
.cash-current-amount { margin-left:auto; text-align:right; padding:0 18px; }
.cash-current-amount span { display:block; font-size:12px; color:var(--muted); }
.cash-current-amount b { font-size:24px; }
.cash-current-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.cash-history-title { display:flex; align-items:center; justify-content:space-between; padding:4px 2px; }
.cash-history-title h3 { margin:0; }
.cash-history-title span { color:var(--muted); }
.cash-day-group { display:grid; gap:0; background:#fff; border:1px solid var(--line); border-radius:15px; overflow:hidden; }
.cash-day-label { padding:11px 16px; background:#eef0f4; font-weight:700; color:#4a5160; }
.cash-session-row { width:100%; border:0; border-bottom:1px solid var(--line); background:#fff; display:grid; grid-template-columns:auto minmax(180px,1fr) minmax(180px,.8fr) auto auto; align-items:center; gap:14px; padding:15px 16px; text-align:left; cursor:pointer; }
.cash-session-row:last-child { border-bottom:0; }
.cash-session-row:hover { background:#fff9f7; }
.cash-row-icon { font-size:22px; color:#747b88; }
.cash-row-info,.cash-row-summary { display:grid; gap:3px; }
.cash-row-info small,.cash-row-summary small { color:var(--muted); }
.cash-row-summary { text-align:right; }
.cash-row-status { padding:6px 11px; border-radius:999px; font-size:12px; font-weight:750; }
.cash-row-status.open { background:#e6f8ed; color:#138443; }
.cash-row-status.closed { background:#eef1f6; color:#5a6372; }
.cash-row-arrow { font-size:26px; color:#7c8390; }
.cash-form-hero,.cash-flow-type { border:1px solid var(--line); border-radius:14px; padding:16px; background:#f8f9fb; }
.cash-form-hero span { display:block; color:var(--muted); font-size:12px; }
.cash-form-hero b { display:block; font-size:22px; margin:3px 0; }
.cash-form-hero p { margin:5px 0 0; color:var(--primary); font-size:13px; }
.cash-flow-type { display:flex; justify-content:space-between; gap:12px; }
.cash-flow-type.in b { color:#13924d; }
.cash-flow-type.out b { color:#d93737; }
.cash-close-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cash-close-summary>div { border:1px solid var(--line); border-radius:12px; padding:13px; display:grid; gap:5px; }
.cash-close-summary span { color:var(--muted); font-size:12px; }
.cash-close-summary b { font-size:18px; }
.cash-difference-preview { display:flex; justify-content:space-between; align-items:center; border-radius:12px; background:#f3f5f8; padding:14px; }
.cash-difference-preview.negative { background:#fff0f0; color:#c92d2d; }
.cash-difference-preview.positive { background:#eaf8ef; color:#128543; }
.cash-detail-page { max-width:1180px; margin:0 auto; display:grid; gap:10px; padding-bottom:30px; }
.cash-detail-topbar { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; background:#fff; border-bottom:1px solid var(--line); padding:14px 18px; border-radius:14px 14px 0 0; }
.cash-detail-topbar h2,.cash-detail-topbar p { margin:0; }
.cash-detail-topbar p { color:var(--muted); }
.cash-detail-section { background:#fff; padding:22px max(22px,8vw); border-top:8px solid #eef0f4; }
.cash-detail-section h3 { margin:0 0 6px; }
.cash-session-identity { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 40px; border-top:0; }
.cash-session-identity>div { display:grid; grid-template-columns:minmax(130px,1fr) minmax(180px,1fr); gap:10px; }
.cash-session-identity span { color:#565d69; }
.cash-session-identity b,.cash-session-identity small { text-align:right; }
.cash-session-identity small { grid-column:2; color:var(--muted); }
.cash-detail-line { display:flex; justify-content:space-between; gap:22px; padding:9px 0; }
.cash-detail-line>span { display:grid; }
.cash-detail-line small { color:var(--muted); margin-top:3px; }
.cash-detail-line.strong { font-weight:800; }
.cash-detail-line.negative b { color:#d33232; }
.cash-detail-line.positive b { color:#15944d; }
.cash-detail-wide-button { width:100%; min-height:48px; margin-top:14px; background:#fff; border:1px solid #ccd1da; border-radius:8px; font-weight:700; }
.cash-detail-actions { position:sticky; bottom:0; background:#fff; padding:12px; display:flex; justify-content:flex-end; gap:10px; border:1px solid var(--line); border-radius:12px; box-shadow:0 -8px 25px rgba(0,0,0,.06); }
.cash-product-list,.cash-entry-list { display:grid; gap:0; }
.cash-product-list>div,.cash-entry-row { display:flex; justify-content:space-between; gap:20px; padding:13px 4px; border-bottom:1px solid var(--line); }
.cash-product-list span { display:grid; gap:3px; }
.cash-product-list span:last-child { text-align:right; }
.cash-entry-row span { display:grid; gap:3px; }
.cash-entry-row small { color:var(--muted); }
.cash-entry-row.in strong { color:#15944d; }
.cash-entry-row.out strong { color:#d33232; }
.printer-fields-disabled { display:none !important; }
.receipt-print-actions { margin-top:14px; display:flex; gap:8px; }

@media (max-width:900px) {
  .cash-current-card { align-items:stretch; flex-direction:column; }
  .cash-current-amount { margin-left:0; padding:0; text-align:left; }
  .cash-current-actions { justify-content:flex-start; }
  .cash-session-row { grid-template-columns:auto 1fr auto; }
  .cash-row-summary { grid-column:2; text-align:left; }
  .cash-row-status { grid-column:3; grid-row:1; }
  .cash-row-arrow { grid-column:3; grid-row:2; }
  .cash-session-identity { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .cash-close-summary { grid-template-columns:1fr; }
  .cash-session-row { padding:13px 12px; gap:10px; }
  .cash-detail-section { padding:18px 16px; }
  .cash-session-identity>div { grid-template-columns:1fr; }
  .cash-session-identity b,.cash-session-identity small { text-align:left; grid-column:auto; }
  .cash-detail-topbar { grid-template-columns:auto 1fr; }
  .cash-detail-topbar #cashDetailPrint { grid-column:1/-1; }
}

@media print {
  @page { margin: 0; }
  .receipt-print-actions { display:none !important; }
  .modal-panel { width: var(--receipt-paper-width, 58mm) !important; max-width:var(--receipt-paper-width,58mm) !important; }
  .modal-body { padding:3mm !important; }
  .receipt { width:100% !important; font-size:10pt; }
  body.printing-cash-detail * { visibility:hidden !important; }
  body.printing-cash-detail .cash-detail-page,
  body.printing-cash-detail .cash-detail-page * { visibility:visible !important; }
  body.printing-cash-detail .cash-detail-page { position:absolute; inset:0; max-width:none; padding:0; }
  body.printing-cash-detail .cash-detail-topbar button,
  body.printing-cash-detail .cash-detail-actions,
  body.printing-cash-detail .cash-detail-wide-button { display:none !important; }
  body.printing-cash-detail .cash-detail-section { break-inside:avoid; border-top:2mm solid #eee; }
}


/* Fixed 62: deskripsi produk pada penjualan manual dapat diisi dari panel Harga Tambahan. */

/* Fixed 64: pilihan mode sesi kas bersama atau per akun. */
.cash-mode-explanation { display:grid; gap:10px; }
.cash-mode-explanation > div { display:grid; gap:3px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.cash-mode-explanation b { color:var(--ink); }
.cash-mode-explanation span { color:var(--muted); line-height:1.45; font-size:13px; }

/* =========================================================
   Fixed 67: Layout HP Android & browser HP ala aplikasi kasir
   - Satu layout mobile untuk APK WebView dan browser HP.
   - POS memakai katalog penuh + keranjang bottom-sheet.
   - Tabel desktop berubah menjadi kartu mobile yang mudah dibaca.
   - Seluruh fitur Linka tetap sama; hanya penyajian mobile yang dirapikan.
   ========================================================= */
.mobile-cart-sheet-handle,
.mobile-cart-peek-button { display: none; }

@media (max-width: 760px) {
  :root { --mobile-header: 64px; }
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { background: #fff; font-size: 14px; }
  button, .btn, input, select, textarea { font-size: 14px; }

  /* Shell, topbar, dan drawer */
  .app { display: block; min-height: 100dvh; }
  .main { grid-column: auto !important; width: 100% !important; min-width: 0; margin-left: 0 !important; }
  .topbar {
    position: sticky; top: 0; z-index: 24; height: var(--mobile-header); min-height: var(--mobile-header);
    padding: max(9px, env(safe-area-inset-top)) 14px 9px;
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
    display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px;
    border-bottom: 1px solid #e7e9ee;
  }
  .topbar > div:nth-child(2) { min-width: 0; }
  .topbar h1 { margin: 0; font-size: 20px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar #businessLabel { display: none; }
  .top-actions { gap: 6px; }
  .top-actions #clock { display: none; }
  .top-actions .pill { padding: 5px 8px; font-size: 9px; }
  #menuBtn { width: 40px; height: 40px; background: transparent; font-size: 22px; }
  .content { padding: 12px 12px calc(28px + env(safe-area-inset-bottom)); max-width: 100%; }

  .sidebar {
    width: min(84vw, 310px) !important;
    padding: max(16px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-103%); transition: transform .22s ease; box-shadow: 14px 0 38px rgba(26,38,61,.22);
    overflow: hidden;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar .brand { padding: 3px 12px 18px !important; font-size: 31px !important; }
  .sidebar .brand-with-logo.custom-logo img { max-width: 178px !important; max-height: 58px !important; height: 58px !important; }
  .sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: 3px !important; padding: 0 3px 12px 0; }
  .sidebar nav button { min-height: 48px !important; padding: 10px 12px !important; gap: 12px !important; font-size: 14px !important; border-radius: 10px !important; }
  .sidebar nav button i { width: 22px !important; font-size: 17px !important; }
  .sidebar-foot { flex: 0 0 auto; padding: 13px 10px 3px !important; font-size: 12px !important; background: var(--sidebar); }
  .app.sidebar-open #menuBtn,
  body.cashier-mode .app.sidebar-open #cashierMenuBtn {
    left: min(calc(min(84vw, 310px) + 5px), calc(100vw - 45px)) !important;
  }

  /* Umum: kartu, filter, form, metric */
  .card { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .card-head { padding: 14px 15px; }
  .card-body { padding: 15px; }
  .toolbar { padding: 14px; }
  .grid { gap: 12px; }
  .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .metric { min-height: 102px; padding: 14px; border-radius: 12px; }
  .metric .value { font-size: 19px; overflow-wrap: anywhere; }
  .two-col, .three-col, .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .filters { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
  .filters label, .filters .compact { min-width: 0; width: 100%; flex: none; }
  .filters .btn { width: 100%; }
  .page-actions { align-items: stretch; flex-direction: column; margin-bottom: 12px; }
  .page-actions h2 { font-size: 20px; }
  .action-group { display: grid; grid-template-columns: 1fr; width: 100%; }
  .action-group .btn { width: 100%; }
  input, select, textarea { min-height: 48px; border-radius: 9px; }
  .btn { min-height: 48px; }
  .empty { padding: 42px 16px; }

  /* Semua tabel Linka menjadi daftar kartu mobile, bukan tabel horizontal. */
  .table-wrap { overflow: visible; width: 100%; }
  table.mobile-card-table { display: block; min-width: 0 !important; width: 100%; border-collapse: separate; }
  table.mobile-card-table thead { display: none; }
  table.mobile-card-table tbody { display: grid; gap: 10px; width: 100%; }
  table.mobile-card-table tr {
    display: grid; width: 100%; padding: 12px 14px; background: #fff;
    border: 1px solid #e4e7ed; border-radius: 12px; box-shadow: 0 2px 8px rgba(35,45,66,.035);
  }
  table.mobile-card-table td {
    display: grid; grid-template-columns: minmax(92px, 37%) minmax(0,1fr); align-items: start; gap: 10px;
    min-height: 0; padding: 7px 0; border-bottom: 1px solid #eef0f4; font-size: 13px; text-align: right;
    overflow-wrap: anywhere;
  }
  table.mobile-card-table td:last-child { border-bottom: 0; }
  table.mobile-card-table td::before {
    content: attr(data-label); color: #7b8391; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .035em; text-align: left;
  }
  table.mobile-card-table td[data-label="Aksi"] { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; padding-top: 10px; }
  table.mobile-card-table td[data-label="Aksi"]::before { width: 100%; }
  table.mobile-card-table td .btn { min-height: 40px; padding: 7px 11px; }
  table.mobile-card-table td.money { font-size: 15px; }

  /* Modal mobile: bottom-sheet; detail item tetap satu layar penuh. */
  .modal { align-items: end; padding: 0; }
  .modal-panel {
    width: 100% !important; max-width: 100% !important; max-height: min(92dvh, 920px);
    border-radius: 20px 20px 0 0; box-shadow: 0 -18px 55px rgba(0,0,0,.24);
  }
  .modal-head { min-height: 60px; padding: 12px 16px; }
  .modal-head h2 { font-size: 18px; }
  .modal-body { padding: 16px; max-height: calc(92dvh - 60px); }
  .qasir-warning-panel, .qasir-manual-description-panel {
    width: min(92vw, 460px) !important; border-radius: 15px !important; margin: auto 0 auto;
  }
  .qasir-item-detail-panel {
    width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .qasir-item-detail-panel .modal-body { max-height: calc(100dvh - 60px); padding: 0 !important; }
  .qasir-item-detail { padding: 12px 18px 92px; }
  .qasir-item-save { position: fixed; left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; padding: 0; }
  .qasir-variant-panel { width: 100% !important; height: min(82dvh, 720px); max-height: 82dvh; border-radius: 20px 20px 0 0 !important; }
  .qasir-variant-panel .modal-body { padding: 14px 16px; }

  /* Dashboard kasir/beranda seperti home app, tetap memakai data Linka. */
  .cashier-home { gap: 14px; padding: 0 0 92px; }
  .cashier-welcome { border-radius: 14px; padding: 17px; }
  .cashier-welcome h2 { font-size: 21px; }
  .cashier-shortcuts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; padding: 0; }
  .cashier-shortcuts button { width: 100%; min-height: 84px; padding: 6px 2px; font-size: 11px; }
  .cashier-shortcuts i { width: 42px; height: 42px; font-size: 20px; }
  .cashier-report-section, .cashier-home-panel { border-radius: 14px; padding: 15px; }
  .cashier-report-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .cashier-report-grid article { flex: 0 0 78%; min-height: 112px; scroll-snap-align: start; }
  .cashier-home-panel { align-items: stretch; flex-direction: column; }
  .cashier-home-stats { min-width: 0; }
  .cashier-start-button { width: calc(100% - 24px); bottom: max(10px, env(safe-area-inset-bottom)); min-height: 54px; }

  /* POS HP: katalog penuh dan keranjang berupa bottom sheet. */
  body[data-page="pos"] { height: 100dvh; overflow: hidden !important; background: #fff; }
  body[data-page="pos"] .topbar { display: none !important; }
  body[data-page="pos"] .content { height: 100dvh !important; min-height: 0; padding: 0 !important; overflow: hidden !important; }
  body[data-page="pos"] .main, body[data-page="pos"] .app { height: 100dvh; overflow: hidden !important; }
  .cashier-pos-shell { display: block !important; width: 100%; height: 100dvh !important; min-height: 0 !important; overflow: hidden; background: #fff; }
  .cashier-catalog-pane { width: 100%; height: 100dvh !important; min-height: 0; border: 0; padding-bottom: 72px; overflow: hidden; display: flex; }
  .cashier-pos-header {
    position: relative !important; min-height: 66px; padding: max(8px, env(safe-area-inset-top)) 10px 8px;
    gap: 8px; background: #fff; z-index: 8;
  }
  .cashier-pos-header .cashier-profile { display: none; }
  .cashier-pos-header .cashier-view-toggle { display: none; }
  .cashier-pos-header .cashier-icon-button { width: 42px; height: 42px; font-size: 21px; }
  .cashier-search input { height: 46px; min-height: 46px; padding-left: 44px !important; background: #f0f1f4; }
  .cashier-search > span { left: 13px !important; }
  .cashier-pos-tabs { margin: 10px 12px 0; padding: 4px; }
  .cashier-pos-tabs button { min-height: 44px; font-size: 14px; }
  .cashier-category-tabs { padding: 17px 12px 0; gap: 25px; }
  .cashier-category-tabs button { font-size: 13px; padding-bottom: 9px; }
  .cashier-product-grid {
    flex: 1 1 auto; min-height: 0; padding: 14px 12px 95px; gap: 20px 10px;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important; overflow-y: auto; align-content: start;
  }
  .cashier-product-card { min-width: 0; }
  .cashier-product-image { aspect-ratio: 1/1; border-radius: 8px; font-size: 22px; }
  .cashier-product-name { min-height: 0; margin-top: 7px; font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cashier-product-meta { margin-top: 3px; font-size: 10px; display: block; }
  .cashier-product-meta span { display: none; }
  .cashier-product-meta b { display: block; overflow: hidden; text-overflow: ellipsis; }
  .cashier-product-minimum { display: none; }
  .qasir-manual-sale { width: 100%; }
  .qasir-manual-display { border-radius: 0; }
  .qasir-manual-keypad { padding: 8px 0 100px; }

  .cashier-cart-pane {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 60;
    width: 100%; height: 74px !important; max-height: 90dvh !important; min-height: 0 !important;
    display: grid !important; grid-template-rows: auto auto minmax(0,1fr) auto !important;
    border: 0; border-radius: 22px 22px 0 0; background: #fff;
    box-shadow: 0 -8px 30px rgba(25,34,50,.16); overflow: hidden !important;
    transition: height .23s ease;
  }
  .cashier-cart-pane.mobile-open { height: min(88dvh, 780px) !important; }
  .mobile-cart-sheet-handle {
    grid-row: 1; position: relative; min-height: 58px; padding: 19px 18px 10px;
    border: 0; border-bottom: 1px solid #eceef2; background: #fff;
    display: none; grid-template-columns: 1fr auto; align-items: center; gap: 10px; text-align: left;
  }
  .mobile-cart-sheet-handle b { font-size: 17px; }
  .mobile-cart-sheet-handle > span:last-child { font-size: 17px; font-weight: 800; }
  .mobile-cart-grabber { position: absolute; width: 46px; height: 5px; border-radius: 999px; background: #cdd2db; top: 7px; left: 50%; transform: translateX(-50%); }
  .cashier-cart-pane.mobile-open .mobile-cart-sheet-handle { display: grid; }
  .cashier-cart-fixed-top { grid-row: 2 !important; }
  .cashier-cart-list { grid-row: 3 !important; min-height: 0 !important; padding: 12px 18px; }
  .cashier-payment-dock { grid-row: 4 !important; padding: 10px 12px max(10px,env(safe-area-inset-bottom)) !important; box-shadow: none; }
  .cashier-cart-pane:not(.mobile-open) .cashier-cart-fixed-top,
  .cashier-cart-pane:not(.mobile-open) .cashier-cart-list,
  .cashier-cart-pane:not(.mobile-open) .cashier-cart-total,
  .cashier-cart-pane:not(.mobile-open) .cashier-cart-actions { display: none !important; }
  .mobile-cart-peek-button {
    display: block; width: 100%; min-height: 54px; border: 0; border-radius: 9px;
    background: var(--primary); color: #fff; font-size: 16px; font-weight: 800;
  }
  .cashier-cart-pane.mobile-open .mobile-cart-peek-button { display: none; }
  .cashier-cart-header { min-height: 62px; padding: 8px 10px; gap: 7px; }
  .cashier-cart-tools { grid-template-columns: repeat(4,minmax(48px,1fr)); gap: 6px; }
  .cashier-tool-button { min-height: 48px; padding: 4px 2px; }
  .cashier-tool-button b { font-size: 17px; }
  .cashier-tool-button small { font-size: 9px; }
  #clearCart { min-height: 48px; padding: 6px 10px; font-size: 12px; }
  .cashier-transaction-meta { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .cashier-transaction-meta button { min-height: 62px; padding: 8px 9px; }
  .cashier-transaction-meta span { font-size: 8px; }
  .cashier-transaction-meta b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cashier-cart-item { padding: 13px 0; }
  .cashier-empty-cart { min-height: 250px; }
  .cashier-empty-cart > div { font-size: 52px; }
  .cashier-cart-total { font-size: 16px; }
  .cashier-cart-total strong { font-size: 20px; }
  .cashier-payment-dock .cashier-cart-actions { grid-template-columns: minmax(95px,.65fr) minmax(0,1fr); }
  .cashier-payment-dock #saveCartBtn,
  .cashier-payment-dock #payCartBtn { min-height: 52px; font-size: 15px; }
  body.mobile-cart-open .cashier-catalog-pane { filter: brightness(.76); pointer-events: none; }

  /* Halaman pembayaran dibuat seperti halaman mobile, bukan dua kolom desktop. */
  .cashier-payment-page { min-height: 100dvh; padding: 0 0 calc(18px + env(safe-area-inset-bottom)); }
  .payment-shell, .payment-options, .payment-list { width: 100%; max-width: 100%; }
  .payment-header { min-height: 64px; }

  /* Rekap Kas dan detail kas mobile. */
  .cash-recap-page { gap: 12px; }
  .cash-recap-head { align-items: stretch; flex-direction: column; }
  .cash-current-card { padding: 15px; border-radius: 13px; }
  .cash-current-main { align-items: flex-start; }
  .cash-current-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .cash-current-actions .btn { width: 100%; }
  .cash-day-group { border-radius: 0; border-left: 0; border-right: 0; margin-inline: -12px; }
  .cash-day-label { padding: 13px 18px; }
  .cash-session-row { grid-template-columns: auto minmax(0,1fr) auto; padding: 16px 18px; border-radius: 0; }
  .cash-row-summary { display: none; }
  .cash-detail-page { margin-inline: -12px; gap: 0; }
  .cash-detail-topbar { border-radius: 0; position: sticky; top: var(--mobile-header); z-index: 4; }
  .cash-detail-section { padding: 18px; }
  .cash-detail-actions { bottom: max(0px,env(safe-area-inset-bottom)); border-radius: 0; }

  /* Selector/list panjang dibuat lapang seperti aplikasi native. */
  .selector-list { max-height: 58dvh; }
  .selector-list button { min-height: 64px; border-radius: 0; border-left: 0; border-right: 0; padding: 12px 4px; }
  .pending-cart-row { border-radius: 0; border-left: 0; border-right: 0; }
  .toast { left: 12px; right: 12px; top: max(12px,env(safe-area-inset-top)); min-width: 0; max-width: none; }
}

/* HP landscape tetap mobile, tetapi modal dan katalog memanfaatkan lebar. */
@media (max-height: 500px) and (max-width: 950px) and (orientation: landscape) {
  html.mobile-phone .cashier-product-grid { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
  html.mobile-phone .cashier-cart-pane.mobile-open { height: 94dvh !important; }
  html.mobile-phone .modal-panel { max-height: 96dvh; }
  html.mobile-phone .modal-body { max-height: calc(96dvh - 58px); }
}


/* Fixed 67: konfigurasi Direct Bluetooth ESC/POS */
.bluetooth-printer-fields, #networkPrinterFields { padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.printer-action-row { display:flex; flex-wrap:wrap; gap:8px; }
.printer-action-row .btn { flex:1 1 150px; }
.printer-status { min-height:20px; line-height:1.4; }
.error-text { color:var(--danger, #d92d20) !important; }
.printer-common-fields { align-items:end; }
@media (max-width:600px) {
  .printer-settings-card .card-body { gap:14px; }
  .bluetooth-printer-fields, #networkPrinterFields { margin-inline:-2px; padding:12px; border-radius:10px; }
  .printer-action-row { display:grid; grid-template-columns:1fr; }
  .printer-action-row .btn { width:100%; }
}


/* =========================================================
   Fixed 67: transaksi tersimpan, pecah pembayaran, dan stabilitas POS mobile
   ========================================================= */
.pending-cart-dialog { display:grid; gap:14px; }
.pending-cart-search { display:grid; gap:7px; font-weight:800; }
.pending-cart-search input { width:100%; }
.pending-cart-detail-trigger { appearance:none; border:0; background:transparent; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.pending-cart-detail-trigger em { color:var(--primary); font-size:11px; font-style:normal; font-weight:800; }
.pending-detail-dialog { display:grid; gap:14px; }
.pending-detail-back { justify-self:start; border:0; background:transparent; color:var(--primary); font-weight:800; padding:4px 0; }
.pending-detail-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pending-detail-summary > div { display:grid; gap:4px; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--soft); }
.pending-detail-summary span { color:var(--muted); font-size:11px; }
.pending-detail-items { display:grid; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.pending-detail-item { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border-bottom:1px solid var(--line); }
.pending-detail-item:last-child { border-bottom:0; }
.pending-detail-item span { display:grid; gap:4px; min-width:0; }
.pending-detail-item small { color:var(--muted); }
.pending-detail-item strong { white-space:nowrap; }
.pending-detail-total { display:grid; grid-template-columns:1fr auto; gap:8px 16px; padding:14px; border-radius:12px; background:var(--soft); }
.pending-detail-total strong { color:var(--primary); font-size:18px; }
.split-payment-page { max-width:760px; margin:0 auto; }
.split-payment-help { margin:14px 18px 0; padding:13px 14px; border-radius:12px; background:var(--soft); color:var(--muted); line-height:1.5; }
.split-payment-rows { display:grid; gap:10px; padding:16px 18px 4px; }
.split-payment-row { display:grid; grid-template-columns:32px minmax(0,1fr) minmax(120px,.8fr) 40px; gap:9px; align-items:end; padding:12px; border:1px solid var(--line); border-radius:12px; }
.split-payment-row label { display:grid; gap:6px; font-size:12px; font-weight:800; }
.split-payment-number { align-self:center; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--soft); font-weight:900; }
.split-remove { min-height:48px; border:0; border-radius:9px; background:#fff1f1; color:var(--danger); font-size:22px; }
.split-remove:disabled { opacity:.35; }
.split-customer-section { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 18px 0; padding:14px; border:1px solid #fed7aa; background:#fff7ed; border-radius:12px; }
.split-customer-section label { display:grid; gap:6px; font-weight:800; }
.split-customer-section small { grid-column:1/-1; color:#9a3412; }
.split-payment-summary { display:grid; gap:9px; margin:14px 18px; padding:15px; border-radius:12px; background:var(--soft); }
.split-payment-summary > div { display:flex; justify-content:space-between; gap:16px; }
.split-payment-summary strong { color:var(--primary); font-size:18px; }
.receipt-split-row { padding-left:10px; font-size:12px; }

@media (max-width:760px) {
  body[data-page="pos"] .sidebar { z-index:110 !important; }
  body[data-page="pos"] .cashier-pos-header { display:grid !important; grid-template-columns:42px minmax(0,1fr) 42px !important; }
  body[data-page="pos"] .cashier-search { min-width:0; width:100%; }
  body[data-page="pos"] .cashier-search input { width:100%; min-width:0; }
  body[data-page="pos"] .cashier-cart-pane { max-width:100vw !important; }
  body[data-page="pos"] .cashier-cart-pane.mobile-open { height:min(90dvh,820px) !important; }
  body[data-page="pos"] .cashier-cart-list { overflow-y:auto !important; overscroll-behavior:contain; }
  body[data-page="pos"] .cashier-payment-dock { background:#fff; }
  .pending-cart-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
  .pending-cart-main { min-width:0; width:100%; padding:0; }
  .pending-cart-actions { display:grid; gap:6px; }
  .pending-detail-summary { grid-template-columns:1fr; }
  .pending-detail-item { align-items:flex-start; }
  .split-payment-row { grid-template-columns:28px minmax(0,1fr) 38px; }
  .split-payment-row label:nth-of-type(2) { grid-column:2/3; }
  .split-payment-row .split-remove { grid-column:3; grid-row:1/3; align-self:stretch; }
  .split-customer-section { grid-template-columns:1fr; }
  .split-customer-section small { grid-column:auto; }
  .split-payment-page .payment-wide-option { margin-inline:18px; width:calc(100% - 36px); }
}

/* =========================================================
   Fixed 67: hotfix katalog dan keranjang POS pada HP
   - Menghilangkan kartu produk yang saling menimpa pada browser/WebView HP.
   - Menyamakan bottom-sheet Administrator dan Kasir.
   - Memastikan isi keranjang berada di antara header dan tombol pembayaran.
   ========================================================= */
@media (max-width: 760px) {
  body[data-page="pos"] .cashier-product-grid {
    --mobile-product-size: calc((100vw - 44px) / 3);
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: max-content !important;
    align-items: start !important;
    align-content: start !important;
    column-gap: 10px !important;
    row-gap: 18px !important;
    min-height: 0 !important;
    padding: 14px 12px 100px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-page="pos"] .cashier-product-grid .cashier-product-card {
    display: block !important;
    position: relative !important;
    align-self: start !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    contain: none !important;
  }

  body[data-page="pos"] .cashier-product-grid .cashier-product-image {
    display: grid !important;
    width: 100% !important;
    height: var(--mobile-product-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
  }

  body[data-page="pos"] .cashier-product-grid .cashier-product-name,
  body[data-page="pos"] .cashier-product-grid .cashier-product-meta {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="pos"] .cashier-product-grid .cashier-product-name {
    display: -webkit-box !important;
    min-height: 30px !important;
    margin-top: 7px !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="pos"] .cashier-product-grid .cashier-product-meta {
    display: block !important;
    min-height: 16px !important;
    margin-top: 3px !important;
  }

  /* Override aturan lama yang membuat panel Kasir setinggi 100% pada HP. */
  body.cashier-mode[data-page="pos"] .cashier-cart-pane,
  body.administrator-mode[data-page="pos"] .cashier-cart-pane,
  body[data-page="pos"] .cashier-cart-pane {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 60 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 76px !important;
    min-height: 0 !important;
    max-height: 90dvh !important;
    border: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 -8px 30px rgba(25, 34, 50, .16) !important;
  }

  body.cashier-mode[data-page="pos"] .cashier-cart-pane.mobile-open,
  body.administrator-mode[data-page="pos"] .cashier-cart-pane.mobile-open,
  body[data-page="pos"] .cashier-cart-pane.mobile-open {
    height: min(82dvh, 820px) !important;
    max-height: 90dvh !important;
  }

  body[data-page="pos"] .cashier-cart-pane .mobile-cart-sheet-handle {
    grid-row: 1 !important;
  }

  body.cashier-mode[data-page="pos"] .cashier-cart-pane .cashier-cart-fixed-top,
  body.administrator-mode[data-page="pos"] .cashier-cart-pane .cashier-cart-fixed-top,
  body[data-page="pos"] .cashier-cart-pane .cashier-cart-fixed-top {
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body.cashier-mode[data-page="pos"] .cashier-cart-pane .cashier-cart-list,
  body.administrator-mode[data-page="pos"] .cashier-cart-pane .cashier-cart-list,
  body[data-page="pos"] .cashier-cart-pane .cashier-cart-list {
    grid-row: 3 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    overflow-anchor: none;
    background: #fff !important;
  }

  body.cashier-mode[data-page="pos"] .cashier-cart-pane .cashier-payment-dock,
  body.administrator-mode[data-page="pos"] .cashier-cart-pane .cashier-payment-dock,
  body[data-page="pos"] .cashier-cart-pane .cashier-payment-dock {
    grid-row: 4 !important;
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    z-index: 5 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-item:first-child {
    margin-top: 0 !important;
  }

  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-item-top,
  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-item-bottom,
  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-inline-stepper {
    position: static !important;
  }

  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-inline-stepper {
    justify-self: end !important;
    margin-top: 2px !important;
  }
}

@media (max-height: 500px) and (max-width: 950px) and (orientation: landscape) {
  html.mobile-phone body[data-page="pos"] .cashier-product-grid {
    --mobile-product-size: calc((100vw - 64px) / 5);
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  body[data-page="pos"] .cashier-cart-pane.mobile-open {
    height: 94dvh !important;
  }
}


/* =========================================================
   Fixed 69: perbaikan terarah item pertama keranjang mobile.
   Desain tombol Tagih dan bottom-sheet tetap sama seperti v1.3.67.
   ========================================================= */
@media (max-width: 760px) {
  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-list {
    scroll-behavior: auto !important;
    scroll-padding-top: 12px !important;
    overflow-anchor: none !important;
  }

  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-item:first-child {
    scroll-margin-top: 12px !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   Linka POS v1.3.70 — penyederhanaan tampilan mobile
   ========================================================= */
.mobile-simple-list { display: none; }
.mobile-record-detail { display: grid; gap: 16px; }
.mobile-detail-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mobile-detail-title h3 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.mobile-detail-hero { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 14px; align-items: center; }
.mobile-detail-hero img,
.mobile-detail-placeholder { width: 92px; height: 92px; border-radius: 14px; object-fit: cover; background: #f1f3f6; border: 1px solid var(--line); }
.mobile-detail-placeholder { display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #747d8c; }
.mobile-detail-hero h3 { margin: 0 0 5px; font-size: 20px; }
.mobile-detail-hero p,
.mobile-detail-section p { margin: 0; color: var(--muted); line-height: 1.55; white-space: pre-wrap; }
.mobile-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.mobile-detail-grid > div { min-width: 0; display: grid; gap: 4px; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mobile-detail-grid > div:nth-child(2n) { border-right: 0; }
.mobile-detail-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.mobile-detail-grid span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.mobile-detail-grid b { overflow-wrap: anywhere; }
.mobile-detail-section { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; }
.mobile-detail-section h4 { margin: 0; }
.mobile-detail-line { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mobile-detail-line:last-child { border-bottom: 0; }
.mobile-detail-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.mobile-receivable-total { color: var(--primary); font-size: 20px; white-space: nowrap; }

@media (max-width: 760px) {
  .desktop-data-list { display: none !important; }
  .mobile-simple-list { display: grid !important; }
  .mobile-simple-name-row,
  .mobile-simple-value-row {
    appearance: none;
    width: 100%;
    min-height: 58px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .mobile-simple-name-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .mobile-simple-name-row::after { content: '›'; color: #9aa2ae; font-size: 24px; font-weight: 400; }
  .mobile-simple-value-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; }
  .mobile-simple-name-row b,
  .mobile-simple-value-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  .mobile-simple-value-row strong { color: var(--primary); white-space: nowrap; font-size: 15px; }
  .mobile-simple-list > button:last-child { border-bottom: 0; }

  /* Saat tombol Tagih ditekan, keranjang menjadi halaman penuh. */
  body.mobile-cart-open { overflow: hidden !important; }
  body.cashier-mode[data-page="pos"] .cashier-cart-pane.mobile-open,
  body.administrator-mode[data-page="pos"] .cashier-cart-pane.mobile-open,
  body[data-page="pos"] .cashier-cart-pane.mobile-open {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 120 !important;
  }

  body[data-page="pos"] .cashier-cart-pane.mobile-open .mobile-cart-sheet-handle {
    min-height: 62px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: max(8px, env(safe-area-inset-top)) 14px 8px !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: left !important;
  }
  body[data-page="pos"] .cashier-cart-pane.mobile-open .mobile-cart-grabber { display: none !important; }
  .mobile-cart-back-button {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #f1f3f6;
    color: #202633;
    font-size: 25px;
    line-height: 1;
  }
  body[data-page="pos"] .cashier-cart-pane.mobile-open .mobile-cart-back-button { display: grid; place-items: center; }
  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-fixed-top {
    position: static !important;
    overflow: visible !important;
    z-index: 1 !important;
  }
  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-list {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 16px !important;
    overflow-y: auto !important;
  }
  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-payment-dock {
    position: static !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  .mobile-detail-grid { grid-template-columns: 1fr; }
  .mobile-detail-grid > div { border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .mobile-detail-grid > div:last-child { border-bottom: 0 !important; }
  .mobile-detail-actions { grid-template-columns: 1fr; }
}


/* =========================================================
   Linka POS v1.3.71 — Piutang per invoice dan filter riwayat
   ========================================================= */
.receivable-search-card .filters { width:100%; }
.receivable-search-card label { min-width:min(100%,420px); }
.receivable-customer-list { display:grid; gap:14px; }
.receivable-customer-group { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 5px 18px rgba(38,47,62,.05); }
.receivable-customer-head { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); background:#fafbfc; }
.receivable-customer-main { min-width:0; flex:1; border:0; background:transparent; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.receivable-customer-main > span { min-width:0; display:grid; gap:3px; }
.receivable-customer-main b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.receivable-customer-main small { color:var(--muted); }
.receivable-customer-main > strong { color:var(--red); font-size:18px; white-space:nowrap; }
.receivable-invoice-list { display:grid; }
.receivable-invoice-row { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; border-bottom:1px solid #edf0f4; background:#fff; padding:12px 16px; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.receivable-invoice-row:last-child { border-bottom:0; }
button.receivable-invoice-row:hover { background:#fff7f4; }
.receivable-invoice-row > span { min-width:0; display:grid; gap:3px; }
.receivable-invoice-row b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.receivable-invoice-row small { color:var(--muted); font-size:11px; }
.receivable-invoice-value { flex:0 0 auto; text-align:right; justify-items:end; }
.receivable-invoice-value strong { color:#b42318; white-space:nowrap; }
.receivable-unlinked-row { cursor:default; background:#fffaf0; }
.receivable-detail-invoices, .receivable-products { display:grid; gap:9px; }
.receivable-detail-invoices h4, .receivable-products h4 { margin:0; }
.receivable-invoice-detail { display:grid; gap:16px; }
.receivable-invoice-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:16px; border-radius:12px; background:#fff5f2; border:1px solid #ffd5ca; }
.receivable-invoice-hero div { min-width:0; display:grid; gap:4px; }
.receivable-invoice-hero span, .receivable-invoice-hero small { color:var(--muted); }
.receivable-invoice-hero h3 { margin:0; overflow-wrap:anywhere; }
.receivable-invoice-hero > strong { color:var(--red); font-size:22px; white-space:nowrap; }
.receivable-product-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.receivable-product-row > span { min-width:0; display:grid; gap:3px; }
.receivable-product-row small { color:var(--muted); }
.receivable-product-row strong { white-space:nowrap; }
.receivable-invoice-summary { display:grid; grid-template-columns:1fr auto; gap:9px 16px; padding:14px; border-radius:12px; background:#f7f8fa; }
.receivable-invoice-summary b, .receivable-invoice-summary strong { text-align:right; }
.receivable-invoice-summary strong { color:var(--red); font-size:18px; }
.kpi-row span small { display:block; margin-top:3px; color:var(--muted); font-weight:600; }

@media (max-width:760px) {
  .receivable-search-card { padding:12px; }
  .receivable-search-card label { width:100%; min-width:0; }
  .receivable-customer-list { gap:10px; }
  .receivable-customer-group { border-left:0; border-right:0; border-radius:0; box-shadow:none; }
  .receivable-customer-head { padding:13px 14px; align-items:stretch; }
  .receivable-customer-main { align-items:flex-start; }
  .receivable-customer-main > strong { font-size:16px; }
  .receivable-invoice-row { padding:12px 14px; }
  .receivable-invoice-hero { padding:14px; }
  .receivable-invoice-hero > strong { font-size:18px; }
}


/* =========================================================
   Linka POS v1.3.72 — final mobile cart/WebView stabilization
   Aturan ini sengaja berada di luar media query. Android WebView tertentu
   dapat melaporkan viewport 980px walaupun perangkatnya adalah HP.
   ========================================================= */
html.mobile-phone body[data-page="pos"] .cashier-cart-pane {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0,1fr) auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 74px !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  border: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 -8px 30px rgba(25,34,50,.16) !important;
}
html.mobile-phone body[data-page="pos"] .cashier-cart-pane:not(.mobile-open) .cashier-cart-fixed-top,
html.mobile-phone body[data-page="pos"] .cashier-cart-pane:not(.mobile-open) .cashier-cart-list,
html.mobile-phone body[data-page="pos"] .cashier-cart-pane:not(.mobile-open) .cashier-cart-total,
html.mobile-phone body[data-page="pos"] .cashier-cart-pane:not(.mobile-open) .cashier-cart-actions {
  display: none !important;
}
html.mobile-phone body[data-page="pos"] .cashier-cart-pane:not(.mobile-open) .mobile-cart-peek-button {
  display: block !important;
  width: 100% !important;
  min-height: 54px !important;
}
html.mobile-phone body.mobile-cart-open { overflow: hidden !important; }
html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  grid-template-rows: 62px max-content minmax(0,1fr) max-content !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}
html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open .mobile-cart-sheet-handle {
  grid-row: 1 !important;
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: max(8px, env(safe-area-inset-top)) 14px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: #fff !important;
  text-align: left !important;
}
html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open .mobile-cart-back-button {
  display: grid !important;
  place-items: center !important;
}
html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-fixed-top {
  grid-row: 2 !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  z-index: 1 !important;
  background: #fff !important;
}
html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-header,
html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-transaction-meta {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-list {
  grid-row: 3 !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 14px 16px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  overflow-anchor: none !important;
  -webkit-overflow-scrolling: touch !important;
  background: #fff !important;
}
html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-item:first-child {
  margin-top: 0 !important;
  scroll-margin-top: 0 !important;
}
html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-payment-dock {
  grid-row: 4 !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  background: #fff !important;
  z-index: 2 !important;
}
html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open .mobile-cart-peek-button {
  display: none !important;
}


/* =========================================================
   Linka POS v1.3.73 — keranjang penuh kompatibel WebView lama
   - Fallback vh dan tinggi piksel dari JavaScript untuk WebView yang belum
     mendukung dvh.
   - Daftar item selalu berada di atas katalog dengan latar putih penuh.
   ========================================================= */
@media (max-width: 760px) {
  body[data-page="pos"] .cashier-cart-pane.mobile-open {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: var(--linka-mobile-viewport-height, 100vh) !important;
    min-height: 100vh !important;
    min-height: var(--linka-mobile-viewport-height, 100vh) !important;
    max-height: 100vh !important;
    max-height: var(--linka-mobile-viewport-height, 100vh) !important;
    overflow: hidden !important;
    background: #fff !important;
    isolation: isolate !important;
  }
}

html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open {
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: var(--linka-mobile-viewport-height, 100vh) !important;
  min-height: 100vh !important;
  min-height: var(--linka-mobile-viewport-height, 100vh) !important;
  max-height: 100vh !important;
  max-height: var(--linka-mobile-viewport-height, 100vh) !important;
  overflow: hidden !important;
  background: #fff !important;
  isolation: isolate !important;
}

@media (max-width: 760px) {
  body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #fff !important;
    z-index: 1 !important;
  }
}

html.mobile-phone body[data-page="pos"] .cashier-cart-pane.mobile-open .cashier-cart-list {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #fff !important;
  z-index: 1 !important;
}


/* =========================================================
   Linka POS v1.3.74 — variasi langsung sinkron ke keranjang
   ========================================================= */
.variant-live-note {
  display: block;
  margin-top: 6px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
}
.variant-live-actions {
  grid-template-columns: 1fr !important;
}
@media (max-width: 760px) {
  .qasir-variant-panel .cashier-variant-modal > .cashier-modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    padding: 10px 0 max(10px, env(safe-area-inset-bottom)) !important;
    background: #fff !important;
  }
  .qasir-variant-panel .cashier-variant-list {
    padding-bottom: 8px !important;
  }
}


/* =========================================================
   Linka POS v1.3.75 — modal transaksi selalu di atas keranjang mobile
   - Pilihan Pegawai/Pelanggan/Diskon tidak lagi terbuka di belakang cart.
   - Dock Tagih tidak menutupi modal struk transaksi.
   ========================================================= */
.modal {
  z-index: 500 !important;
}
body.modal-open .cashier-cart-pane {
  pointer-events: none !important;
}
body.modal-open .modal,
body.modal-open .modal * {
  pointer-events: auto;
}
@media (max-width: 760px) {
  body.modal-open .modal {
    isolation: isolate;
  }
}
html.mobile-phone body.modal-open .modal {
  z-index: 500 !important;
}


/* =========================================================
   Linka POS v1.3.77 — Stok Gudang & Payment Fix
   ========================================================= */
.warehouse-group-list { display:grid; gap:14px; margin-top:18px; }
.warehouse-group-card { padding:0; overflow:hidden; }
.warehouse-group-head { width:100%; border:0; background:#fff; padding:17px 18px; display:flex; justify-content:space-between; align-items:center; gap:14px; text-align:left; cursor:pointer; }
.warehouse-group-head > span:first-child { display:grid; gap:4px; }
.warehouse-group-head b { font-size:17px; }
.warehouse-group-head small { color:var(--muted); }
.warehouse-group-total { min-width:92px; text-align:right; display:grid; }
.warehouse-group-total strong { font-size:24px; color:var(--primary); }
.warehouse-product-list { border-top:1px solid var(--line); }
.warehouse-product-list.collapsed { display:none; }
.warehouse-product-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line); }
.warehouse-product-row:last-child { border-bottom:0; }
.warehouse-product-main { border:0; background:transparent; min-width:0; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left; cursor:pointer; }
.warehouse-product-main > span { min-width:0; display:grid; gap:3px; }
.warehouse-product-main b { overflow-wrap:anywhere; }
.warehouse-product-main small { color:var(--muted); }
.warehouse-product-main strong { white-space:nowrap; font-size:16px; }
.warehouse-row-actions { display:flex; gap:7px; }
.warehouse-history-card { margin-top:18px; }
@media (max-width:760px) {
  .warehouse-page-actions { align-items:flex-start; }
  .warehouse-page-actions .action-group { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .warehouse-group-head { padding:14px; }
  .warehouse-group-total strong { font-size:20px; }
  .warehouse-product-row { grid-template-columns:1fr; padding:13px 14px; }
  .warehouse-product-main { width:100%; }
  .warehouse-row-actions { width:100%; }
  .warehouse-row-actions .btn { flex:1 1 0; }
}


/* =========================================================
   Linka POS v1.3.77 — pengelompokan nama + jenis,
   satuan editable, dan tombol penyelesaian pembayaran stabil.
   ========================================================= */
.warehouse-group-total { min-width:120px; gap:4px; }
.warehouse-group-total > span { display:grid; grid-template-columns:auto auto; justify-content:end; align-items:baseline; gap:6px; }
.warehouse-group-total > span strong { font-size:20px; }
.warehouse-group-total > span small { font-weight:700; }
body.payment-mode .content {
  height:auto !important;
  min-height:100vh !important;
  min-height:100dvh !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:0 !important;
}
body.payment-mode .cashier-payment-page {
  min-height:100vh !important;
  min-height:100dvh !important;
  height:auto !important;
  overflow:visible !important;
  padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important;
}
body.payment-mode .payment-confirm {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  position:sticky !important;
  bottom:max(12px, env(safe-area-inset-bottom)) !important;
  z-index:90 !important;
  flex:0 0 auto !important;
  margin:18px auto max(18px, env(safe-area-inset-bottom)) !important;
  box-shadow:0 10px 28px rgba(27,39,61,.18) !important;
}
@media (max-width:760px) {
  .warehouse-group-total { min-width:94px; }
  .warehouse-group-total > span strong { font-size:18px; }
  .warehouse-row-actions { flex-wrap:wrap; }
  body.payment-mode .cashier-payment-page { padding-bottom:calc(104px + env(safe-area-inset-bottom)) !important; }
  body.payment-mode .payment-confirm { width:calc(100% - 24px) !important; min-height:56px !important; }
}

/* Fixed 79: Produk Gudang custom dengan Varian dari Katalog Produk. */
.warehouse-group-actions { display:flex; justify-content:flex-end; gap:8px; padding:12px 14px; border-top:1px solid var(--line); }
.warehouse-variant-builder { padding:0; overflow:hidden; }
.warehouse-variant-builder .card-head { padding:14px 16px; }
.warehouse-variant-selectors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 16px 16px; }
.warehouse-variant-selectors label { display:grid; gap:7px; font-weight:700; }
@media (max-width:760px) {
  .warehouse-variant-selectors { grid-template-columns:1fr; padding:0 12px 12px; }
  .warehouse-group-actions { display:grid; grid-template-columns:1fr 1fr; }
}

/* =========================================================
   v1.3.82: stok hanya pada Nama Produk Gudang.
   Varian hanya menjadi anggota penggabungan produk katalog.
   ========================================================= */
.warehouse-group-stock-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  cursor: default !important;
}
.warehouse-group-toggle {
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  gap: 4px;
  text-align: left;
  cursor: pointer;
}
.warehouse-group-toggle b { font-size: 17px; }
.warehouse-group-toggle small { color: var(--muted); }
.warehouse-name-stock-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.warehouse-variant-only-row .warehouse-product-main { width: 100%; }

@media (max-width: 760px) {
  .warehouse-group-stock-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px !important;
  }
  .warehouse-group-stock-head .warehouse-group-total { min-width: 82px; }
  .warehouse-name-stock-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .warehouse-name-stock-actions .btn { width: 100%; }
}


/* =========================================================
   v1.3.82: daftar Stok Gudang ringkas dan status stok per Nama Produk.
   Varian hanya ditampilkan setelah Nama Produk diklik.
   ========================================================= */
.warehouse-summary-card { padding: 0; overflow: hidden; }
.warehouse-summary-card.stock-disabled { border-color: #fecaca; background: #fffafa; }
.warehouse-summary-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(420px, auto);
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
}
.warehouse-summary-name {
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.warehouse-summary-name b { font-size: 17px; overflow-wrap: anywhere; }
.warehouse-summary-name:hover b { color: var(--primary); text-decoration: underline; }
.warehouse-summary-name .pill { flex: 0 0 auto; font-size: 10px; }
.warehouse-summary-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.warehouse-summary-actions .btn { white-space: nowrap; }
.warehouse-group-detail { display: grid; gap: 14px; }
.warehouse-group-detail .mobile-detail-title { align-items: flex-start; }
.warehouse-group-detail .mobile-detail-title p { margin: 5px 0 0; color: var(--muted); }
.warehouse-detail-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.warehouse-detail-total span { color: var(--muted); }
.warehouse-detail-total strong { font-size: 20px; }
.warehouse-modal-variant-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.warehouse-modal-variant-list .mobile-simple-name-row { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.warehouse-modal-variant-list .mobile-simple-name-row:last-child { border-bottom: 0; }
@media (max-width: 1100px) {
  .warehouse-summary-row { grid-template-columns: minmax(180px,1fr) auto; }
  .warehouse-summary-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .warehouse-summary-row { grid-template-columns: minmax(0,1fr) auto; padding: 13px 14px; gap: 10px; }
  .warehouse-summary-name { align-items: flex-start; flex-direction: column; gap: 6px; }
  .warehouse-summary-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .warehouse-summary-actions .btn { width: 100%; min-height: 42px; white-space: normal; }
  .warehouse-group-total { min-width: 78px; }
}

/* =========================================================
   v1.3.84: filter dan riwayat masuk/keluar Stok Gudang
   ========================================================= */
.warehouse-history-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 18px 16px;
}
.warehouse-history-filters label { display: grid; gap: 7px; font-weight: 700; }
.warehouse-history-group-link { padding: 0; text-align: left; }
.warehouse-group-movements { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.warehouse-group-movement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.warehouse-group-movement:last-child { border-bottom: 0; }
.warehouse-group-movement > span { min-width: 0; display: grid; gap: 3px; }
.warehouse-group-movement small { color: var(--muted); overflow-wrap: anywhere; }
.warehouse-group-movement strong { white-space: nowrap; }
.warehouse-group-movement.in strong { color: #059669; }
.warehouse-group-movement.out strong { color: #dc2626; }
@media (max-width: 760px) {
  .warehouse-history-filters { grid-template-columns: 1fr; padding: 0 12px 12px; }
  .warehouse-group-movement { align-items: flex-start; }
  .warehouse-group-movement strong { font-size: 13px; }
}


/* =========================================================
   v1.3.84: Riwayat Stok Gudang dipindahkan ke halaman terpisah
   ========================================================= */
.warehouse-history-page-card { margin-top: 0; overflow: hidden; }
.warehouse-history-page-card .warehouse-history-filters { padding-top: 18px; }
.warehouse-history-page-actions .action-group .btn { min-height: 42px; }
@media (max-width: 760px) {
  .warehouse-page-actions .action-group,
  .warehouse-history-page-actions .action-group { grid-template-columns: 1fr !important; }
  .warehouse-history-page-card { border-radius: 14px; }
}


/* =========================================================
   v1.3.92: header tabel membeku tepat di bawah topbar saat
   halaman desktop/tablet digulir. Filter dan panel di atas
   tetap bergulir normal; hanya header kolom yang dibekukan.
   ========================================================= */
.frozen-table-header {
  position: fixed;
  display: none;
  overflow: hidden;
  z-index: 19;
  pointer-events: none;
  background: #f7f8fa;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 5px 14px rgba(35,45,66,.09);
}
.frozen-table-header-table {
  margin: 0 !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  min-width: 0 !important;
}
.frozen-table-header-table thead,
.frozen-table-header-table tr { height: 100%; }
.frozen-table-header-table th {
  position: static !important;
  inset: auto !important;
  background: #f7f8fa !important;
  box-sizing: border-box;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .frozen-table-header { display: none !important; }
}
@media print {
  .frozen-table-header { display: none !important; }
}


/* =========================================================
   v1.3.93: nama Varian Produk Gudang selalu terlihat di
   modal desktop maupun mobile. Header HP dikunci tetap di
   atas agar tombol menu/sidebar selalu dapat digunakan.
   ========================================================= */
.warehouse-modal-variant-list {
  display: grid !important;
  background: #fff;
}
.warehouse-variant-name-row {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}
.warehouse-variant-name-row:last-child { border-bottom: 0; }
.warehouse-variant-name-row:hover { background: #fafbfc; }
.warehouse-variant-name-row b {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.warehouse-variant-name-row > span {
  flex: 0 0 auto;
  color: #9aa2ae;
  font-size: 23px;
  line-height: 1;
}

@media (max-width: 760px) {
  body:not([data-page="pos"]) .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 40 !important;
  }
  body:not([data-page="pos"]) .main {
    padding-top: var(--mobile-header) !important;
  }
  body[data-page="pos"] .main {
    padding-top: 0 !important;
  }
  /* Pada HP hanya header aplikasi (menu + nama halaman) yang dibekukan. */
  .frozen-table-header { display: none !important; }
}

/* =========================================================
   v1.3.94: sidebar mobile selalu berada di atas header tetap.
   Header menu tetap freeze saat drawer tertutup, namun ketika
   drawer dibuka seluruh area sidebar tidak lagi tertutup topbar.
   ========================================================= */
@media (max-width: 760px) {
  .sidebar,
  body.cashier-mode .sidebar {
    z-index: 80 !important;
  }

  .sidebar.open,
  .app.sidebar-open .sidebar,
  body.cashier-mode .sidebar.open,
  body.cashier-mode .app.sidebar-open .sidebar {
    z-index: 80 !important;
  }

  /* Tombol toggle tetap dapat dipakai di sisi kanan drawer. */
  .app.sidebar-open #menuBtn,
  body.cashier-mode .app.sidebar-open #cashierMenuBtn {
    z-index: 90 !important;
  }
}

/* v1.4.2 Multi-Outlet */
.top-outlet-selector{display:flex;align-items:center;gap:8px;min-width:210px}
.top-outlet-selector span{font-size:11px;font-weight:700;color:var(--muted,#6b7280);text-transform:uppercase;letter-spacing:.04em}
.top-outlet-selector select{min-width:150px;height:38px;padding:0 34px 0 10px;border-radius:10px;border:1px solid var(--line,#e5e7eb);background:var(--surface,#fff);font-weight:700}
.outlet-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:8px}
.master-scope-badge{white-space:nowrap}
@media(max-width:760px){
  .top-outlet-selector{min-width:0;max-width:145px;display:block}
  .top-outlet-selector span{display:none}
  .top-outlet-selector select{min-width:0;width:100%;height:34px;font-size:12px;padding-left:8px}
  .top-actions #clock{display:none}
}

/* v1.4.2: pilihan penerapan Master Data per outlet */
.master-data-option > span{display:flex;flex-direction:column;gap:4px;min-width:0}
.master-data-option small{display:block;line-height:1.35}
.master-data-option input:disabled + span{opacity:.62}
.master-data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.master-data-grid{grid-template-columns:1fr}}

/* =========================================================
   v1.4.30: Offline First, status sinkronisasi, dan optimasi DOM
   ========================================================= */
.sync-status-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.sync-status-button:focus-visible { outline: 3px solid rgba(47,120,239,.2); outline-offset: 3px; }
.sync-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(239,75,53,.28);
}
.linka-offline .topbar { border-bottom-color: #f2c5ca; }
.linka-offline .sync-status-button { animation: linka-offline-pulse 2.6s ease-in-out infinite; }
@keyframes linka-offline-pulse { 50% { opacity: .72; } }

.offline-login-button { display: grid; gap: 3px; text-align: center; margin-top: 2px; }
.offline-login-button small { display: block; color: var(--muted); font-weight: 600; }
.offline-sync-center { display: grid; gap: 16px; }
.offline-sync-summary {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr)) auto;
  gap: 10px;
  align-items: stretch;
}
.offline-sync-summary > div {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbfc;
}
.offline-sync-summary span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.offline-sync-summary b { font-size: 18px; }
.offline-sync-list { display: grid; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.offline-sync-list article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  content-visibility: auto;
  contain-intrinsic-size: 68px;
}
.offline-sync-list article:last-child { border-bottom: 0; }
.offline-sync-list article > div:first-child { min-width: 0; display: grid; gap: 3px; }
.offline-sync-list small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.sync-error { color: var(--red) !important; }
.offline-sync-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.receipt-offline-banner {
  margin-bottom: 10px;
  padding: 8px;
  border: 2px dashed #d79a00;
  border-radius: 8px;
  text-align: center;
  font-weight: 900;
  color: #7c5900;
  background: #fff7dc;
}
.receipt-offline-banner small { font-weight: 650; }
.render-limit-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  background: #fafbfc;
}

/* Browser melewati layout item yang masih jauh dari viewport. */
.table-wrap tbody tr,
.mobile-simple-name-row,
.cashier-product-card,
.cash-session-row,
.warehouse-list-item,
.selector-list > *,
.kpi-row,
.warehouse-group-movement {
  content-visibility: auto;
  contain-intrinsic-size: 58px;
}
.cashier-product-card { contain-intrinsic-size: 188px; }
.table-wrap tbody tr { contain-intrinsic-size: 52px; }
.cashier-product-image img,
.thumb img { object-fit: cover; }

@media (max-width: 760px) {
  .top-actions { gap: 7px; }
  .sync-status-button .pill { padding: 4px 8px; font-size: 9px; }
  .sync-count { position: absolute; right: -6px; top: -8px; }
  .offline-sync-summary { grid-template-columns: 1fr 1fr; }
  .offline-sync-summary .btn { grid-column: 1 / -1; }
  .offline-sync-list article { align-items: flex-start; flex-direction: column; }
  .offline-sync-actions { width: 100%; justify-content: flex-start; }
  .render-limit-note { align-items: stretch; flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .linka-offline .sync-status-button { animation: none; }
}
.offline-readiness { display:grid; gap:4px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; }
.offline-readiness.ready { background:#eaf9f0; border-color:#bce9cc; }
.offline-readiness.limited { background:#fff7dc; border-color:#f0d892; }
.offline-readiness small { color:var(--muted); line-height:1.45; }

/* v1.4.30: ID unik dan impor master */
@media(max-width:760px){.page-actions .action-group{display:grid;grid-template-columns:1fr 1fr;width:100%}.page-actions .action-group .btn,.page-actions .action-group a.btn{width:100%;justify-content:center}}


/* v1.4.30: tombol Stok Gudang sejajar dan tetap rapi pada layar lebar */
.warehouse-page-actions { align-items:flex-start; }
.warehouse-page-actions > div:first-child { min-width:280px; max-width:520px; }
.warehouse-stock-actions { flex-wrap:nowrap; justify-content:flex-end; align-items:center; gap:8px; }
.warehouse-stock-actions .btn { min-height:42px; padding-inline:12px; white-space:nowrap; }
@media (max-width:1280px) {
  .warehouse-page-actions { flex-direction:column; }
  .warehouse-page-actions > div:first-child { max-width:none; }
  .warehouse-stock-actions { width:100%; flex-wrap:wrap; justify-content:flex-start; }
}
@media (max-width:760px) {
  .warehouse-stock-actions { display:grid; grid-template-columns:1fr !important; }
  .warehouse-stock-actions .btn { width:100%; }
}


/* v1.4.30 - visible first offline-data reload and detailed sync queue */
.offline-reload-overlay{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.58);backdrop-filter:blur(5px)}
.offline-reload-overlay.hidden{display:none}
.offline-reload-card{width:min(420px,calc(100vw - 32px));padding:30px 26px 24px;border-radius:22px;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.28);text-align:center}
.offline-reload-card h2{margin:14px 0 7px;font-size:21px;color:#17243d}.offline-reload-card p{margin:0;color:#6b7280;line-height:1.55}
.offline-reload-spinner{height:50px;display:flex;align-items:center;justify-content:center;gap:8px}.offline-reload-spinner i{display:block;width:12px;height:12px;border-radius:50%;background:currentColor;animation:linkaOfflinePulse 1s ease-in-out infinite}.offline-reload-spinner i:nth-child(2){animation-delay:.14s}.offline-reload-spinner i:nth-child(3){animation-delay:.28s}
.offline-reload-progress{height:5px;margin-top:22px;border-radius:999px;overflow:hidden;background:#edf0f6}.offline-reload-progress span{display:block;width:42%;height:100%;border-radius:inherit;background:currentColor;animation:linkaOfflineBar 1.25s ease-in-out infinite}
@keyframes linkaOfflinePulse{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-8px);opacity:1}}@keyframes linkaOfflineBar{0%{transform:translateX(-115%)}100%{transform:translateX(340%)}}
.offline-sync-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center}.offline-sync-item-main{appearance:none;border:0;background:transparent;padding:0;display:flex;justify-content:space-between;gap:16px;align-items:center;text-align:left;color:inherit;cursor:pointer;min-width:0}.offline-sync-item-main>div{min-width:0;display:grid;gap:3px}.offline-sync-expand{font-size:12px;font-weight:800;white-space:nowrap;color:#64748b}.offline-sync-item-main:hover .offline-sync-expand,.offline-sync-item-main.expanded .offline-sync-expand{color:#ef4b35}
.offline-sync-detail{grid-column:1/-1;border-top:1px dashed #dbe1ea;padding:14px 2px 2px}.offline-sync-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.offline-sync-detail-grid>div,.offline-sync-product,.offline-sync-technical{display:flex;justify-content:space-between;gap:16px;padding:9px 11px;border-radius:10px;background:#f7f8fb}.offline-sync-detail-grid span,.offline-sync-technical span{color:#687386;font-size:12px}.offline-sync-detail-grid b{font-size:12px;text-align:right;overflow-wrap:anywhere}.offline-sync-detail-section{margin-top:12px}.offline-sync-detail-section h4{margin:0 0 8px}.offline-sync-product{margin-top:6px}.offline-sync-product span,.offline-sync-product b{font-size:12px}.offline-sync-technical{margin-top:10px;align-items:flex-start}.offline-sync-technical code{font-size:11px;text-align:right;white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){.offline-reload-card{padding:25px 19px 21px}.offline-sync-item{grid-template-columns:1fr}.offline-sync-actions{justify-content:flex-start}.offline-sync-detail-grid{grid-template-columns:1fr}.offline-sync-item-main{align-items:flex-start}.offline-sync-expand{padding-top:2px}}


/* v1.4.30 - offline login verification, detailed reports, dashboard expansion */
.offline-login-option{display:grid;gap:10px;margin-top:8px}.offline-login-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.offline-login-divider:before,.offline-login-divider:after{content:"";height:1px;background:var(--border);flex:1}.offline-login-account{border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--soft);display:grid;gap:3px}.offline-login-account span,.offline-login-account small{color:var(--muted);font-size:12px}.offline-login-button{display:grid!important;gap:2px}.offline-login-button small{font-weight:400;opacity:.8}
.report-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start}.report-submenu{position:sticky;top:84px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:8px;display:grid;gap:4px}.report-submenu button{border:0;background:transparent;text-align:left;padding:12px 13px;border-radius:10px;color:var(--text);font-weight:650;cursor:pointer}.report-submenu button:hover{background:var(--soft)}.report-submenu button.active{background:rgba(239,75,53,.11);color:var(--primary)}.report-content{min-width:0}.report-toolbar{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;margin-bottom:12px}.report-toolbar h2{margin:0}.report-toolbar p{margin:4px 0 0}.report-filter{margin-bottom:16px}.report-body{display:grid;gap:16px}.report-summary-cards,.dashboard-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.report-summary-cards article,.dashboard-summary-strip article{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;display:grid;gap:7px}.report-summary-cards span:first-child,.dashboard-summary-strip span:first-child{color:var(--muted)}.report-summary-cards b,.dashboard-summary-strip b{font-size:22px}.report-change,.dashboard-change{font-size:12px;font-weight:800;width:max-content}.report-change.up,.dashboard-change.up{color:#18a95b}.report-change.down,.dashboard-change.down{color:#e24b3b}.report-chart-card{padding:18px}.report-line-chart svg{width:100%;height:auto;min-height:220px}.report-line-chart .axis{stroke:var(--border);stroke-width:1}.report-line-chart polyline{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.report-line-chart polyline.current{stroke:var(--primary)}.report-line-chart polyline.previous{stroke:#b9c1cc;stroke-dasharray:7 6}.report-line-chart text{font-size:11px;fill:var(--muted)}.chart-legend{display:flex;gap:18px;justify-content:center;color:var(--muted);font-size:12px}.chart-legend span{display:flex;align-items:center;gap:7px}.chart-legend i{width:20px;height:3px;border-radius:4px}.chart-legend i.current{background:var(--primary)}.chart-legend i.previous{background:#b9c1cc}.report-summary-bottom{margin-top:0}.kpi-row.total{border-top:2px solid var(--border);padding-top:12px;font-weight:800}.report-period-comparison{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}.report-period-comparison article{display:grid;gap:4px}.report-period-comparison article span{color:var(--muted);font-size:13px}.report-period-comparison article b{font-size:20px}.report-kpi-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.report-table{background:var(--card);border:1px solid var(--border);border-radius:14px}.report-table table{min-width:760px}.report-loading{min-height:240px;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--muted)}.report-loading span{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.dashboard-expanded{display:grid;gap:18px;margin-top:18px}.dashboard-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-big-values{display:grid;grid-template-columns:1fr auto;gap:12px 14px;align-items:center}.dashboard-big-values span{color:var(--muted)}.dashboard-big-values b{font-size:17px}.kpi-row span small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.auto-close-settings-card input[type=time]{max-width:220px}
@media(max-width:1100px){.report-layout{grid-template-columns:1fr}.report-submenu{position:static;display:flex;overflow-x:auto;white-space:nowrap}.report-submenu button{flex:0 0 auto}.dashboard-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-summary-cards,.dashboard-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.report-toolbar{align-items:flex-start;gap:12px}.report-toolbar .btn{flex:0 0 auto}.report-submenu{margin:0 -4px}.report-summary-cards,.dashboard-summary-strip,.dashboard-detail-grid,.report-kpi-row{grid-template-columns:1fr}.report-period-comparison{align-items:flex-start;flex-direction:column}.report-chart-card{padding:12px}.report-line-chart svg{min-width:600px}.report-line-chart{overflow-x:auto}.report-table table{min-width:680px}}

/* v1.4.30 - dashboard KPI cleanup, editable auto-close time */
.dashboard-top-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}
.auto-close-settings-card #autoCloseCashierTime{max-width:220px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
@media(max-width:1180px){.dashboard-top-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.dashboard-top-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.dashboard-top-metrics{grid-template-columns:1fr}}


/* v1.4.30 - clickable customer report history and product list per date */
.report-customer-row{cursor:pointer;transition:background .16s ease,box-shadow .16s ease}.report-customer-row:hover,.report-customer-row:focus{background:rgba(239,75,53,.055);outline:none;box-shadow:inset 3px 0 0 var(--primary)}
.report-customer-detail{display:grid;gap:16px}.report-customer-detail-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.report-customer-detail-summary>div{border:1px solid var(--border);background:var(--soft);border-radius:12px;padding:12px;display:grid;gap:4px}.report-customer-detail-summary span,.report-customer-detail-summary small{color:var(--muted);font-size:12px}.report-customer-detail-summary b{font-size:17px}.report-customer-day{display:grid;gap:10px}.report-customer-day-head{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--soft);border:1px solid var(--border)}.report-customer-day-head h3{margin:0}.report-customer-day-head span{font-size:12px;color:var(--muted)}.report-customer-transaction{border:1px solid var(--border);border-radius:14px;padding:14px;display:grid;gap:12px;background:var(--card)}.report-customer-transaction-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.report-customer-transaction-head>div{display:grid;gap:4px}.report-customer-transaction-head>div:last-child{text-align:right;justify-items:end}.report-customer-transaction-head span{font-size:12px;color:var(--muted)}.report-customer-transaction-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;font-size:12px}.report-customer-transaction-meta span{padding:8px;border-radius:9px;background:var(--soft);color:var(--muted)}.report-customer-transaction-meta b{color:var(--text)}.report-customer-transaction .report-table{border-radius:10px}.report-customer-transaction .report-table table{min-width:620px}
@media(max-width:760px){.report-customer-detail-summary,.report-customer-transaction-meta{grid-template-columns:1fr 1fr}.report-customer-day-head,.report-customer-transaction-head{align-items:flex-start}.report-customer-transaction{padding:10px}}


/* =========================================================
   Linka POS v1.4.30 — payment scroll, pencarian pelanggan,
   dan tampilan Pegawai offline dari snapshot terbaru.
   ========================================================= */
body.payment-mode,
body.payment-mode .app,
body.payment-mode .main {
  height:auto !important;
  min-height:100vh !important;
  min-height:100dvh !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
body.payment-mode .content {
  height:auto !important;
  min-height:100vh !important;
  min-height:100dvh !important;
  overflow-y:visible !important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
body.payment-mode .credit-page {
  padding-bottom:calc(132px + env(safe-area-inset-bottom)) !important;
}
body.payment-mode .credit-form {
  flex:0 0 auto;
}
.credit-customer-search input[type="search"] {
  width:100%;
}
#creditCustomerResult {
  display:block;
  margin-top:6px;
  font-weight:500;
}
@media (max-width:760px) {
  body.payment-mode .credit-page { padding-bottom:calc(150px + env(safe-area-inset-bottom)) !important; }
}

/* v1.4.34 - Offline Data Safety Backup */
.offline-safety-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg,#fff 0%,#fafbfc 100%);
}
.offline-safety-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.offline-safety-head > div { display:grid; gap:4px; min-width:0; }
.offline-safety-head small { color:var(--muted); }
.offline-safety-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.offline-safety-grid > div { display:grid; gap:4px; padding:10px 11px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.offline-safety-grid span { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.offline-safety-grid b { font-size:13px; overflow-wrap:anywhere; }
.offline-safety-actions { display:flex; flex-wrap:wrap; gap:8px; }
@media(max-width:760px){.offline-safety-head{flex-direction:column}.offline-safety-grid{grid-template-columns:1fr 1fr}.offline-safety-actions .btn{flex:1 1 160px}}