/* ===== SOURCE: mobile-backend-final.css ===== */
/* Toko ERP v1.6.21 — definitive backend-mobile interaction layer.
   Loaded after all other stylesheets. Staff Mobile PWA is explicitly excluded. */
@media (max-width: 800px) {
  body:not(.mobile-app-body) {
    overscroll-behavior-x: none;
  }

  /* Compact, predictable page actions. Info -> Create -> Export -> More.
     These actions use content width and wrap only when the screen truly runs out. */
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) {
    display:flex!important;
    flex-flow:row wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) > * {
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) .erp-ui-help-button,
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) .erp-title-info {order:10!important}
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) .erp-create-icon-only {order:20!important}
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) > .action-export,
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) > details.action-menu:has(>summary.action-export) {order:30!important}
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) > details.action-menu:has(>summary.action-more) {order:40!important}
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) .erp-ui-help-button,
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) .erp-title-info,
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) .erp-create-icon-only {
    width:38px!important;min-width:38px!important;height:38px!important;padding:0!important;
    display:inline-grid!important;place-items:center!important;
  }
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) summary.btn,
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading) :is(.actions,.top-action-bar) > .btn {
    min-height:38px!important;padding:6px 9px!important;white-space:nowrap!important;
  }

  /* The on-page filter bar contains only search/filter controls. Reset belongs
     in the filter drawer, so it cannot become a full-width orphan row. */
  body:not(.mobile-app-body) .erp-unified-filterbar {
    display:flex!important;flex-flow:row wrap!important;align-items:center!important;
    gap:7px!important;padding:8px!important;min-width:0!important;
  }
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-unified-search {
    flex:1 1 100%!important;width:100%!important;min-width:0!important;max-width:none!important;
  }
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions {
    flex:1 1 100%!important;width:100%!important;min-width:0!important;
    margin-left:0!important;justify-content:flex-start!important;align-items:center!important;
    row-gap:7px!important;column-gap:6px!important;
  }
  /* Stable mobile command order.  This is presentation-only: the same desktop
     controls, forms and URLs are retained. */
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions > [data-erp-drawer-target]{order:10!important}
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions > :is(.erp-ui-help-button,.erp-title-info,.erp-info-icon){order:20!important}
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions > button[type="submit"]{order:30!important}
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions > :is(.action-reset,[data-action="reset"]){order:40!important}
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions > :is(.erp-create-icon-only,.action-create){order:50!important}
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions > .action-import{order:60!important}
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions > details.action-menu:has(>summary.action-export){order:70!important}
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions > details.action-menu:has(>summary.action-more){order:80!important}
  body:not(.mobile-app-body) .erp-filter-drawer-actions {
    display:flex!important;flex-flow:row wrap!important;justify-content:flex-end!important;gap:7px!important;
  }
  body:not(.mobile-app-body) .erp-filter-drawer-actions > * {width:auto!important;flex:0 0 auto!important}

  /* Definitive horizontal table viewport. Native vertical page scrolling is
     preserved; horizontal movement is handled by mobile-backend-final.js. */
  body:not(.mobile-app-body) :is(
    .table-wrap,.erp-global-table-scroll,.report-table-wrap,.po-planning-wrap,.adjustment-table-wrap,
    .po-table-body,.erp-table-scroll,.ci-table-wrap,.modal-table,.table-container,.responsive-table,.table-scroll
  ) {
    display:block!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    overflow-x:auto!important;overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    overscroll-behavior-x:none!important;
    scrollbar-gutter:auto!important;
    position:relative!important;
    contain:layout paint;
  }
  body:not(.mobile-app-body) :is(
    .table-wrap,.erp-global-table-scroll,.report-table-wrap,.po-planning-wrap,.adjustment-table-wrap,
    .po-table-body,.erp-table-scroll,.ci-table-wrap,.modal-table,.table-container,.responsive-table,.table-scroll
  ).erp-mobile-xscroll {
    cursor:grab;
  }
  body:not(.mobile-app-body) :is(
    .table-wrap,.erp-global-table-scroll,.report-table-wrap,.po-planning-wrap,.adjustment-table-wrap,
    .po-table-body,.erp-table-scroll,.ci-table-wrap,.modal-table,.table-container,.responsive-table,.table-scroll
  ).erp-mobile-xscroll.erp-mobile-xdragging {cursor:grabbing}

  body:not(.mobile-app-body) :is(
    .table-wrap,.erp-global-table-scroll,.report-table-wrap,.po-planning-wrap,.adjustment-table-wrap,
    .po-table-body,.erp-table-scroll,.ci-table-wrap,.modal-table,.table-container,.responsive-table,.table-scroll
  ) > table,
  body:not(.mobile-app-body) table.data-table {
    display:table!important;
    width:max-content!important;
    min-width:max(760px,100%)!important;
    max-width:none!important;
    table-layout:auto!important;
    transform:none!important;
  }
  body:not(.mobile-app-body) table.data-table :is(th,td) {
    max-width:none!important;
  }

  /* Keep the same reviewed frozen-column behaviour as desktop.  Earlier mobile
     CSS deliberately released these pins; that caused mixed sticky/static header
     cells (for example Product/checkbox scrolling away while S/N stayed fixed).
     Mobile now keeps desktop table logic and only constrains identity width below. */

  /* Product identity must not be wider than most phone screens. */
  body:not(.mobile-app-body) .table-wrap .erp-baten-table :is(th,td).erp-ui-product-col,
  body:not(.mobile-app-body) .table-wrap .erp-baten-table td[data-baten-pin="identity"].erp-ui-product-col {
    min-width:220px!important;width:220px!important;max-width:220px!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
  }

  /* Small visible cue that the table is genuinely horizontally movable. */
  body:not(.mobile-app-body) .erp-mobile-scroll-hint {
    display:flex;align-items:center;justify-content:flex-end;gap:4px;
    min-height:24px;margin:0 4px 3px;padding:2px 5px;
    color:#64748b;font-size:.65rem;font-weight:750;pointer-events:none;
  }
  body:not(.mobile-app-body) .erp-mobile-scroll-hint[hidden]{display:none!important}
}


@media (min-width:521px) and (max-width:800px) {
  /* Landscape phones / small tablets: do not squeeze every command into one
     crowded line. Four content-width actions per row keeps the same commands
     as desktop while making the mobile toolbar predictable. */
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions {
    display:grid!important;
    grid-template-columns:repeat(4,max-content)!important;
    justify-content:start!important;
    align-items:center!important;
    width:100%!important;
    gap:7px 6px!important;
  }
}

@media (min-width:801px) {
  .erp-mobile-scroll-hint{display:none!important}
}

/* ===== SOURCE: mobile-overlay-performance-final.css ===== */
/* Toko ERP v1.6.21 — final mobile overlay + native table momentum layer.
   Loaded LAST so generic modal/table rules cannot override mobile behavior. */
@media (max-width: 800px) {
  /* BACKEND: use browser-native two-axis touch scrolling for wide tables.
     Native scrolling gives Android/iOS momentum; JS remains a legacy fallback. */
  body:not(.mobile-app-body) :is(
    .table-wrap,.erp-global-table-scroll,.report-table-wrap,.po-planning-wrap,.adjustment-table-wrap,
    .po-table-body,.erp-table-scroll,.ci-table-wrap,.modal-table,.table-container,.responsive-table,.table-scroll
  ) {
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x pan-y pinch-zoom!important;
    overscroll-behavior-x:contain!important;
    scroll-behavior:auto!important;
  }

  /* BACKEND FILTERS / MODALS: one isolated viewport layer, never underneath
     sticky tables, charts, frozen columns, toolbars, or action menus. */
  body:not(.mobile-app-body) .erp-drawer-backdrop:not([hidden]),
  body:not(.mobile-app-body) .modal-overlay:not([hidden]),
  body:not(.mobile-app-body) .ci-modal-backdrop:not([hidden]) {
    position:fixed!important;
    inset:0!important;
    z-index:2140000000!important;
    isolation:isolate!important;
    background:rgba(15,23,42,.52)!important;
  }
  body:not(.mobile-app-body) .erp-drawer-backdrop:not([hidden]) > .erp-side-drawer,
  body:not(.mobile-app-body) .modal-overlay:not([hidden]) > :is(.modal-card,.erp-modal-card),
  body:not(.mobile-app-body) .ci-modal-backdrop:not([hidden]) > .ci-modal-dialog {
    position:relative!important;
    z-index:2!important;
    isolation:isolate!important;
    background:#fff!important;
  }
  body:not(.mobile-app-body) :is(
    .erp-filter-drawer-actions,
    .erp-side-drawer .modal-actions,
    #reportFilterModal .modal-actions,
    .ci-modal-dialog .modal-actions,
    .ci-modal-dialog .ci-filter-actions
  ) {
    position:sticky!important;
    bottom:0!important;
    z-index:50!important;
    isolation:isolate!important;
    background:#fff!important;
    border-top:1px solid #dbe3ec!important;
    box-shadow:0 -8px 18px rgba(15,23,42,.08)!important;
  }

  /* STAFF PWA: every modal sits above the mobile page, including cards that
     use their own sticky/positioned children. */
  body.mobile-app-body .modal-overlay:not([hidden]),
  body.mobile-app-body .mobile-entry-modal:not([hidden]),
  body.mobile-app-body .mobile-search-modal:not([hidden]) {
    position:fixed!important;
    inset:0!important;
    z-index:2140000000!important;
    isolation:isolate!important;
  }
  body.mobile-app-body .modal-overlay:not([hidden]) > :is(.modal-card,.erp-modal-card,.mobile-sheet-card),
  body.mobile-app-body .mobile-entry-modal:not([hidden]) > :is(.modal-card,.erp-modal-card,.mobile-sheet-card),
  body.mobile-app-body .mobile-search-modal:not([hidden]) > :is(.modal-card,.erp-modal-card,.mobile-sheet-card) {
    isolation:isolate!important;
    background:#fff!important;
  }

  /* Shared Select Multiple Products filter sheet. The selection cards are
     temporarily hidden while filters are open, eliminating any possible
     stacking bleed over Clear/Apply controls. */
  body.mobile-app-body #erpProductPicker{isolation:isolate!important}
  body.mobile-app-body #erpProductPicker .picker-filter-scrim:not([hidden]) {
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:100000!important;
    background:rgba(15,23,42,.58)!important;
    backdrop-filter:blur(1px)!important;
  }
  body.mobile-app-body #erpProductPicker .picker-filter-panel {
    z-index:100010!important;
    isolation:isolate!important;
    background:#fff!important;
    opacity:1!important;
    box-shadow:0 22px 60px rgba(15,23,42,.30)!important;
  }
  body.mobile-app-body #erpProductPicker.picker-filters-open :is(
    .picker-query-row,.modal-summary,.modal-table,.modal-actions
  ) {
    visibility:hidden!important;
  }
  body.mobile-app-body #erpProductPicker .picker-filter-mobile-head {
    position:sticky!important;
    top:0!important;
    z-index:100020!important;
    background:#fff!important;
    padding-top:4px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-filter-mobile-actions {
    position:sticky!important;
    bottom:-10px!important;
    z-index:100020!important;
    margin:4px -10px -10px!important;
    padding:10px!important;
    background:#fff!important;
    border-top:1px solid #dbe3ec!important;
    box-shadow:0 -10px 20px rgba(15,23,42,.10)!important;
  }
  body.mobile-app-body #erpProductPicker .picker-filter-mobile-actions > .btn {
    min-width:0!important;
    width:100%!important;
    min-height:44px!important;
  }

  /* Product View filter sheet: actions always own the top stacking layer and
     have a fully opaque background. */
  body.mobile-app-body #mobileProductContext.mobile-entry-modal {
    z-index:2140000000!important;
    isolation:isolate!important;
  }
  body.mobile-app-body #mobileProductContext .mobile-product-filter-sheet {
    position:relative!important;
    z-index:2!important;
    isolation:isolate!important;
    background:#fff!important;
  }
  body.mobile-app-body #mobileProductContext .mobile-product-filter-sheet > .modal-actions {
    position:relative!important;
    z-index:100!important;
    isolation:isolate!important;
    background:#fff!important;
    border-top:1px solid #dbe3ec!important;
    box-shadow:0 -9px 20px rgba(15,23,42,.09)!important;
  }
}

@media (max-width: 800px) {
  body.mobile-app-body .modal-overlay:not([hidden]) .modal-actions,
  body.mobile-app-body .mobile-entry-modal:not([hidden]) .modal-actions,
  body.mobile-app-body .mobile-search-modal:not([hidden]) .modal-actions {
    z-index:200!important;
    isolation:isolate!important;
    background:#fff!important;
  }
}

/* v1.6.21 PWA transaction recovery layer ------------------------------------
   Final overrides for product edit/filter sheets and the shared multi-product
   picker. Keep this file LAST in base.html. */
@media (max-width:800px) {
  /* Product quick-edit: top aligned, one smooth scrolling body, fixed actions. */
  body.mobile-app-body #mobileProductEditModal:not([hidden]){
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    padding:max(4px,env(safe-area-inset-top)) 4px max(4px,env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
    touch-action:pan-y!important;
  }
  body.mobile-app-body #mobileProductEditModal>.mobile-sheet-card{
    width:min(100%,720px)!important;
    height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)))!important;
    max-height:none!important;
    margin:0!important;
    border-radius:16px!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  body.mobile-app-body #mobileProductEditModal>.mobile-sheet-card>.modal-head{
    grid-row:1!important;position:relative!important;top:auto!important;z-index:5!important;background:#fff!important;
  }
  body.mobile-app-body #mobileProductEditModal #pmEditForm{
    grid-row:2!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;scroll-behavior:auto!important;
    padding-bottom:18px!important;background:#fff!important;
  }
  body.mobile-app-body #mobileProductEditModal .mobile-product-edit-actions{
    grid-row:3!important;position:relative!important;bottom:auto!important;z-index:6!important;
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;
    background:#fff!important;border-top:1px solid #dbe3ec!important;
    box-shadow:0 -8px 18px rgba(15,23,42,.08)!important;
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
  body.mobile-app-body #mobileProductEditModal .mobile-product-edit-actions>a:first-child{
    grid-column:1/-1!important;
  }

  /* Shared multi-product picker filter: completely remove underlying picker
     content while the filter sheet is open. This is stronger than visibility
     and prevents transformed/sticky product cards from painting above actions. */
  body.mobile-app-body #erpProductPicker{contain:paint!important;isolation:isolate!important}
  body.mobile-app-body #erpProductPicker.picker-filters-open>.modal-card>
    :is(.picker-query-row,.modal-summary,.modal-table,.modal-actions){
    display:none!important;
  }
  body.mobile-app-body #erpProductPicker .picker-filter-scrim:not([hidden]){
    position:absolute!important;inset:0!important;z-index:2140000100!important;
    display:block!important;background:rgba(15,23,42,.62)!important;pointer-events:auto!important;
  }
  body.mobile-app-body #erpProductPicker.picker-filters-open .picker-filter-panel{
    display:grid!important;position:absolute!important;
    inset:max(6px,env(safe-area-inset-top)) 8px max(6px,env(safe-area-inset-bottom))!important;
    z-index:2140000200!important;width:auto!important;height:auto!important;max-height:none!important;
    grid-template-columns:1fr!important;align-content:start!important;gap:9px!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;
    background:#fff!important;opacity:1!important;border-radius:16px!important;padding:10px!important;
    box-shadow:0 24px 64px rgba(15,23,42,.34)!important;transform:translateZ(0)!important;
  }
  body.mobile-app-body #erpProductPicker .picker-filter-mobile-head{
    position:sticky!important;top:-10px!important;z-index:5!important;background:#fff!important;
    margin:-10px -10px 0!important;padding:12px 10px 9px!important;border-bottom:1px solid #e2e8f0!important;
  }
  body.mobile-app-body #erpProductPicker .picker-filter-mobile-actions{
    position:sticky!important;bottom:-10px!important;z-index:6!important;
    margin:4px -10px -10px!important;padding:10px!important;
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;
    background:#fff!important;border-top:1px solid #dbe3ec!important;
    box-shadow:0 -10px 22px rgba(15,23,42,.12)!important;
  }
  body.mobile-app-body #erpProductPicker .picker-filter-mobile-actions>.btn{
    width:100%!important;min-width:0!important;min-height:46px!important;
    white-space:normal!important;line-height:1.2!important;
  }
  /* New Product entered from Staff Mobile is a normal page, not a nested
     scroll container. Keep one vertical scroll surface for smooth touch use. */
  body.mobile-app-body .mobile-product-entry-form{
    overflow:visible!important;max-height:none!important;touch-action:pan-y!important;
    overscroll-behavior-y:auto!important;-webkit-overflow-scrolling:touch!important;
  }
}


/* v3.1.2 — PWA Product Filter content-height sheet -------------------------
   Product Filters should use only the space required by their controls.  The
   previous full-height grid left a large white area below Apply/Clear. */
@media (max-width:800px) {
  body.mobile-app-body #mobileProductContext.mobile-entry-modal:not([hidden]) {
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body.mobile-app-body #mobileProductContext .mobile-product-filter-sheet {
    width:min(100%,720px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))!important;
    margin:0!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,auto) auto!important;
    overflow:hidden!important;
  }
  body.mobile-app-body #mobileProductContext .mobile-product-filter-sheet>.erp-modal-body {
    min-height:0!important;
    max-height:calc(100dvh - 170px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:8px!important;
  }
  body.mobile-app-body #mobileProductContext .mobile-product-filter-sheet>.modal-actions {
    position:relative!important;
    margin:0!important;
    padding:8px 10px max(8px,env(safe-area-inset-bottom))!important;
    box-shadow:none!important;
  }
}

/* ===== SOURCE: backend-global-ui-v164.css ===== */
/* Toko ERP v1.6.24 — global backend compact-controls/parity pass.
   Presentation-only.  Staff Mobile PWA (.mobile-app-body) is intentionally excluded. */

/* -------------------------------------------------------------------------
   1) One small arrow language for every existing Hide/Show control.
      The underlying buttons/handlers remain for keyboard/accessibility and
      business logic, but all visual button chrome/text is removed.
   ------------------------------------------------------------------------- */
body:not(.mobile-app-body) .erp-collapse-arrow {
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-grid!important;
  place-items:center!important;
  width:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#53657a!important;
  line-height:1!important;
  font-size:0!important;
  font-weight:800!important;
  cursor:pointer!important;
  vertical-align:middle!important;
  text-decoration:none!important;
  filter:none!important;
  transform:none!important;
}
body:not(.mobile-app-body) .erp-collapse-arrow::after {
  content:"↑";
  display:block;
  font-size:17px!important;
  line-height:1!important;
  font-weight:850!important;
  color:currentColor!important;
}
body:not(.mobile-app-body) .erp-collapse-arrow[aria-expanded="false"]::after {content:"↓"}
body:not(.mobile-app-body) .erp-collapse-arrow:hover {color:#1f4f7a!important;background:transparent!important}
body:not(.mobile-app-body) .erp-collapse-arrow:focus-visible {
  outline:2px solid rgba(49,95,143,.28)!important;
  outline-offset:2px!important;
}
body:not(.mobile-app-body) .erp-summary-toggle-strip {
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  min-height:18px!important;
  height:18px!important;
  margin:-2px 2px 2px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
body:not(.mobile-app-body) .erp-summary-toggle-strip .erp-collapse-arrow {
  width:22px!important;min-width:22px!important;height:18px!important;min-height:18px!important;
}
body:not(.mobile-app-body) .erp-summary-toggle-strip .erp-collapse-arrow::after {font-size:16px!important}
body:not(.mobile-app-body) .ci-chart-toggle.erp-collapse-arrow,
body:not(.mobile-app-body) .ci-table-toggle.erp-collapse-arrow,
body:not(.mobile-app-body) [data-erp-inline-table-toggle].erp-collapse-arrow {margin-left:auto!important}

/* -------------------------------------------------------------------------
   2) Help is a tiny ? immediately beside the thing it explains — never a
      toolbar button.  No background, border, square shell or oversized hitbox.
   ------------------------------------------------------------------------- */
body:not(.mobile-app-body) :is(.erp-info-icon,.erp-ui-help-button,.erp-title-info).erp-inline-help-mark {
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0 0 0 .28em!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#60738a!important;
  font-size:.88em!important;
  font-weight:850!important;
  line-height:1!important;
  vertical-align:baseline!important;
  cursor:help!important;
  transform:none!important;
  filter:none!important;
}
body:not(.mobile-app-body) :is(.erp-info-icon,.erp-ui-help-button,.erp-title-info).erp-inline-help-mark:hover,
body:not(.mobile-app-body) :is(.erp-info-icon,.erp-ui-help-button,.erp-title-info).erp-inline-help-mark:focus-visible {
  background:transparent!important;
  color:#244f78!important;
  outline:none!important;
  text-decoration:underline!important;
  text-underline-offset:2px!important;
}
body:not(.mobile-app-body) :is(h1,h2,h3,label,.label,.smart-demand-label) > .erp-inline-help-mark {
  font-size:.88em!important;
}
body:not(.mobile-app-body) .erp-help-anchor {display:inline!important}

/* -------------------------------------------------------------------------
   3) Mobile backend: the search/filter command area stays visible while the
      user vertically reviews a table.  Table data and logic are untouched.
   ------------------------------------------------------------------------- */
@media (max-width:800px) {
  body:not(.mobile-app-body){--erp-mobile-backend-sticky-top:54px}
  body:not(.mobile-app-body) .erp-mobile-sticky-search {
    position:sticky!important;
    top:var(--erp-mobile-backend-sticky-top)!important;
    z-index:720!important;
    background:#fff!important;
    isolation:isolate!important;
    box-shadow:0 5px 11px rgba(15,23,42,.075)!important;
  }
  body:not(.mobile-app-body) .erp-mobile-sticky-search.panel-head,
  body:not(.mobile-app-body) .erp-mobile-sticky-search.table-tools,
  body:not(.mobile-app-body) .erp-mobile-sticky-search.toolbar {
    border-top:1px solid #dbe7f5!important;
    border-bottom:1px solid #dbe7f5!important;
  }

  /* Search gets the first/full row.  Essential actions remain compact below. */
  body:not(.mobile-app-body) .erp-mobile-sticky-search :is(.erp-search-box,.compact-search,.erp-unified-search,.field.grow):has(input[type="search"],input[name="q"]) {
    flex:1 1 100%!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  body:not(.mobile-app-body) .erp-mobile-sticky-search input[type="search"],
  body:not(.mobile-app-body) .erp-mobile-sticky-search input[name="q"] {
    width:100%!important;
    min-width:0!important;
  }

  /* Compact overflow: Filter is never moved to More. More itself is icon-only. */
  body:not(.mobile-app-body) .erp-mobile-auto-more,
  body:not(.mobile-app-body) .erp-mobile-existing-more {
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    height:36px!important;
    margin:0!important;
  }
  body:not(.mobile-app-body) :is(.erp-mobile-auto-more,.erp-mobile-existing-more) > summary {
    list-style:none!important;
    display:inline-grid!important;
    place-items:center!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
    border:1px solid #d7e0ea!important;
    border-radius:8px!important;
    background:#f7f9fb!important;
    color:#475569!important;
    font-size:0!important;
    cursor:pointer!important;
  }
  body:not(.mobile-app-body) :is(.erp-mobile-auto-more,.erp-mobile-existing-more) > summary::-webkit-details-marker{display:none!important}
  body:not(.mobile-app-body) :is(.erp-mobile-auto-more,.erp-mobile-existing-more) > summary::after{
    content:"⋯"!important;font-size:20px!important;font-weight:900!important;line-height:1!important
  }
  body:not(.mobile-app-body) .erp-mobile-auto-more > .action-menu-pop {right:0!important;left:auto!important}

  /* Direct mobile action rows stay consistent; they wrap rather than squeeze. */
  body:not(.mobile-app-body) :is(.erp-filterbar-actions,.erp-command-actions,.ci-actions,.commercial-nav-actions,.top-action-bar,.erp-panel-inline-actions) {
    gap:6px!important;
    flex-wrap:wrap!important;
    align-items:center!important;
  }
  body:not(.mobile-app-body) :is(.erp-filterbar-actions,.erp-command-actions,.ci-actions,.commercial-nav-actions,.top-action-bar,.erp-panel-inline-actions) > [data-erp-drawer-target] {
    flex:0 0 auto!important;
  }

  /* After page-level help is relocated beside a heading, do not leave an empty
     actions strip behind. */
  body:not(.mobile-app-body) :is(.actions,.commercial-nav-actions,.erp-filterbar-actions,.erp-command-actions):empty{display:none!important}
}

/* -------------------------------------------------------------------------
   Toko ERP v1.6.24 — column totals + proportional filter modals.
   Presentation only.  The Staff Mobile PWA is intentionally excluded.
   ------------------------------------------------------------------------- */

/* Column totals: every top total sits immediately after the table header,
   remains visually stronger than ordinary rows and is one text step larger. */
body:not(.mobile-app-body) table.data-table > tbody > tr.erp-top-total-row > :is(td,th),
body:not(.mobile-app-body) table > tbody > tr.erp-top-total-row > :is(td,th) {
  font-size:.84rem!important; /* normal data cell is .77rem in the shared UI */
  font-weight:850!important;
  line-height:1.35!important;
  background:#eef5fb!important;
  color:#20364d!important;
  border-top:0!important;
  border-bottom:2px solid #c6d8e9!important;
}
body:not(.mobile-app-body) table.data-table > tbody > tr.erp-top-total-row strong,
body:not(.mobile-app-body) table > tbody > tr.erp-top-total-row strong {
  font-size:inherit!important;
  font-weight:900!important;
  color:inherit!important;
}
/* Keep the existing bottom total for reconciliation/reference, but the top row
   is the primary total row requested by the user. */
body:not(.mobile-app-body) table.data-table > tfoot > tr.erp-column-total-row > :is(td,th),
body:not(.mobile-app-body) table.data-table > tfoot > tr.report-total-row > :is(td,th),
body:not(.mobile-app-body) table.data-table > tfoot > tr.ci-total-row > :is(td,th) {
  font-weight:800!important;
}

/* All backend filter drawers now render as centered, content-sized modals.
   Existing IDs, form actions, field names and GET submission logic are kept. */
body:not(.mobile-app-body) .erp-drawer-backdrop,
body:not(.mobile-app-body) #reportFilterModal.report-filter-drawer {
  position:fixed!important;
  inset:0!important;
  z-index:18000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(12px,3vh,28px)!important;
  margin:0!important;
  overflow:auto!important;
  background:rgba(24,39,60,.26)!important;
  backdrop-filter:blur(1.5px)!important;
}
body:not(.mobile-app-body) .erp-drawer-backdrop[hidden],
body:not(.mobile-app-body) #reportFilterModal.report-filter-drawer[hidden] {display:none!important}

body:not(.mobile-app-body) .erp-drawer-backdrop > .erp-side-drawer,
body:not(.mobile-app-body) #reportFilterModal.report-filter-drawer > .erp-side-drawer {
  position:relative!important;
  inset:auto!important;
  margin:auto!important;
  box-sizing:border-box!important;
  width:min(680px,calc(100vw - 24px))!important;
  min-width:min(460px,calc(100vw - 24px))!important;
  max-width:min(840px,calc(100vw - 24px))!important;
  height:auto!important;
  min-height:0!important;
  max-height:min(86dvh,780px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #d8e3ef!important;
  border-radius:15px!important;
  box-shadow:0 24px 65px rgba(15,30,50,.24)!important;
  transform:none!important;
  animation:none!important;
  opacity:1!important;
}
body:not(.mobile-app-body) .erp-drawer-backdrop > .erp-side-drawer > .erp-drawer-head,
body:not(.mobile-app-body) #reportFilterModal .erp-drawer-head {
  flex:0 0 auto!important;
  border-radius:15px 15px 0 0!important;
}

/* The filter body scrolls only when its real content needs more room. Small
   filter sets therefore stay small instead of occupying the full screen. */
body:not(.mobile-app-body) .erp-side-drawer > form.erp-drawer-form,
body:not(.mobile-app-body) .erp-side-drawer > .erp-filter-drawer-body,
body:not(.mobile-app-body) #reportFilterModal .report-filter-modal-body {
  min-height:0!important;
  max-height:calc(min(86dvh,780px) - 118px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
body:not(.mobile-app-body) .erp-side-drawer > form.erp-drawer-form {
  flex:0 1 auto!important;
}

/* Standard three-action footer for every filter: Reset · Cancel · Apply. */
body:not(.mobile-app-body) .erp-side-drawer :is(.erp-filter-drawer-actions,.ci-filter-actions,.modal-actions).erp-filter-modal-actions {
  position:sticky!important;
  bottom:0!important;
  z-index:12!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin-top:10px!important;
  padding:11px!important;
  border-top:1px solid #dce5ef!important;
  background:#fff!important;
}
body:not(.mobile-app-body) .erp-side-drawer .erp-filter-modal-actions > :is(.btn,button,a) {
  width:100%!important;
  min-width:0!important;
  min-height:38px!important;
  justify-content:center!important;
  text-align:center!important;
}

/* Business Analytics modal: keep rich multi-selects comfortably sized without
   forcing the old full-height side panel. */
body:not(.mobile-app-body) .ci-shell .erp-drawer-backdrop > .erp-side-drawer {
  position:relative!important;
  inset:auto!important;
  /* V18 consolidation: BA desktop filters are 20% narrower than V17.
     Keep the existing full-width mobile backend breakpoint below 800px. */
  width:min(608px,calc(100vw - 24px))!important;
  min-width:min(400px,calc(100vw - 24px))!important;
  max-width:min(720px,calc(100vw - 24px))!important;
  height:auto!important;
  max-height:min(88dvh,800px)!important;
  border-radius:15px!important;
  box-shadow:0 24px 65px rgba(15,30,50,.24)!important;
}
body:not(.mobile-app-body) .ci-shell .erp-side-drawer .erp-drawer-form {
  max-height:calc(min(88dvh,800px) - 72px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}

@media(max-width:800px){
  body:not(.mobile-app-body) .erp-drawer-backdrop,
  body:not(.mobile-app-body) #reportFilterModal.report-filter-drawer {
    align-items:flex-start!important;
    padding:calc(var(--erp-mobile-backend-sticky-top,54px) + 10px) 8px 12px!important;
  }
  body:not(.mobile-app-body) .erp-drawer-backdrop > .erp-side-drawer,
  body:not(.mobile-app-body) #reportFilterModal.report-filter-drawer > .erp-side-drawer,
  body:not(.mobile-app-body) .ci-shell .erp-drawer-backdrop > .erp-side-drawer {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:calc(100dvh - var(--erp-mobile-backend-sticky-top,54px) - 22px)!important;
    border-radius:13px!important;
  }
  body:not(.mobile-app-body) .erp-side-drawer > form.erp-drawer-form,
  body:not(.mobile-app-body) .erp-side-drawer > .erp-filter-drawer-body,
  body:not(.mobile-app-body) #reportFilterModal .report-filter-modal-body,
  body:not(.mobile-app-body) .ci-shell .erp-side-drawer .erp-drawer-form {
    max-height:calc(100dvh - var(--erp-mobile-backend-sticky-top,54px) - 130px)!important;
  }
  body:not(.mobile-app-body) .erp-side-drawer :is(.erp-filter-drawer-actions,.ci-filter-actions,.modal-actions).erp-filter-modal-actions {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding:9px!important;
  }
  body:not(.mobile-app-body) .erp-side-drawer .erp-filter-modal-actions > :is(.btn,button,a) {
    padding:7px 5px!important;
    font-size:.72rem!important;
  }
}

/* Report Centre keeps its form outside the modal card and associates controls
   through the HTML form= attribute, so normalize its already-complete
   Reset/Cancel/Apply footer with the same three-column presentation. */
body:not(.mobile-app-body) #reportFilterModal .erp-side-drawer > .modal-actions {
  position:sticky!important;
  bottom:0!important;
  z-index:12!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:11px!important;
  border-top:1px solid #dce5ef!important;
  background:#fff!important;
  border-radius:0 0 15px 15px!important;
}
body:not(.mobile-app-body) #reportFilterModal .erp-side-drawer > .modal-actions > :is(.btn,button,a) {
  width:100%!important;min-width:0!important;min-height:38px!important;
  justify-content:center!important;text-align:center!important;
}
@media(max-width:800px){
  body:not(.mobile-app-body) #reportFilterModal .erp-side-drawer > .modal-actions{gap:6px!important;padding:9px!important}
  body:not(.mobile-app-body) #reportFilterModal .erp-side-drawer > .modal-actions > :is(.btn,button,a){padding:7px 5px!important;font-size:.72rem!important}
}

/* -------------------------------------------------------------------------
   Toko ERP v1.6.25 — smooth navigation / anti-flash performance layer.
   Presentation only. No route, form, calculation, permission or data changes.
   ------------------------------------------------------------------------- */
html{
  scrollbar-gutter:stable;
  -webkit-tap-highlight-color:transparent;
}
a,button,summary,[role="button"]{
  touch-action:manipulation;
}

/* v1.6.29 navigation stability -------------------------------------------------
   Cross-document View Transitions are intentionally disabled. On multi-page
   Flask navigation Chrome was snapshotting/replacing the entire document, which
   made the fixed sidebar/logo/topbar look as if they blinked. Keep the shell
   paint stable and let normal navigation replace the document without a root
   cross-fade. */
html,body,.app-shell{background:#f5f9ff!important;}
body:not(.mobile-app-body) .sidebar{background:#202B63!important;background-image:none!important;}
body:not(.mobile-app-body) .topbar{background:#fff!important;}

/* Keep interaction feedback local to the control instead of producing a
   platform-wide tap flash. */
:is(.btn,button,summary,[role="button"]):active:not(:disabled){
  opacity:.92;
}

/* v1.6.26 correction — main ERP module navigation uses the Toko Warisan
   logo blue. Filter drawers/modals remain light/white. */
body:not(.mobile-app-body) .sidebar{
  background:#202B63!important;
  color:#f7f9ff!important;
}
body:not(.mobile-app-body) .sidebar :is(nav>a,summary){color:#f7f9ff!important}
body:not(.mobile-app-body) .sidebar details div a{color:#dfe5ff!important}
body:not(.mobile-app-body) .sidebar :is(nav>a,summary,details div a):hover{
  background:rgba(255,255,255,.12)!important;
}
body:not(.mobile-app-body) .sidebar :is(nav>a.active,details div a.active){
  background:rgba(255,255,255,.18)!important;color:#fff!important;
}

/* v1.6.27 — move the company logo/name slightly higher in the main ERP sidebar. */
body:not(.mobile-app-body) .sidebar .brand{
  margin-top:-6px!important;
  padding-top:4px!important;
  padding-bottom:13px!important;
}


/* -------------------------------------------------------------------------
   Toko ERP v1.6.56 — Business Analytics sticky filtered total + compact,
   user-owned Hide/Show controls. Desktop/backend only; Staff PWA excluded.
   ------------------------------------------------------------------------- */
body:not(.mobile-app-body) .ci-shell .commercial-nav-actions > .erp-collapse-arrow,
body:not(.mobile-app-body) .ci-shell :is(.page-head,.ci-page-head,.page-heading) > .actions > .erp-collapse-arrow {
  width:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  height:18px!important;
  min-height:18px!important;
  padding:0!important;
  margin:0 1px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body:not(.mobile-app-body) .ci-shell .commercial-nav-actions > .erp-collapse-arrow::after,
body:not(.mobile-app-body) .ci-shell :is(.page-head,.ci-page-head,.page-heading) > .actions > .erp-collapse-arrow::after {
  content:"⌃"!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:900!important;
  color:#64748b!important;
}
body:not(.mobile-app-body) .ci-shell .commercial-nav-actions > .erp-collapse-arrow[aria-expanded="false"]::after,
body:not(.mobile-app-body) .ci-shell :is(.page-head,.ci-page-head,.page-heading) > .actions > .erp-collapse-arrow[aria-expanded="false"]::after {
  content:"⌄"!important;
}
body:not(.mobile-app-body) .ci-shell .commercial-nav-actions > .erp-collapse-arrow:hover::after,
body:not(.mobile-app-body) .ci-shell :is(.page-head,.ci-page-head,.page-heading) > .actions > .erp-collapse-arrow:hover::after {
  color:#244f7a!important;
}

/* The filtered total is a second sticky row directly below however many
   header rows the current report has. JS writes the measured combined header
   height to --ci-sticky-total-top, so wrapped or two-tier headers remain safe. */
body:not(.mobile-app-body) .ci-shell .table-wrap table > tbody > tr.ci-sticky-filtered-total > :is(td,th) {
  position:sticky!important;
  top:var(--ci-sticky-total-top,36px)!important;
  bottom:auto!important;
  z-index:18!important;
  background:#eef5fb!important;
  background-clip:padding-box!important;
  box-shadow:inset 0 -2px 0 #c6d8e9,0 3px 5px rgba(31,51,73,.05)!important;
}
/* Frozen identity cells in the total row stay above the other total cells,
   but still below the table header's frozen identity cells. */
body:not(.mobile-app-body) .ci-shell .table-wrap table.ci-freeze-identity > tbody > tr.ci-sticky-filtered-total > [data-ba-sticky] {
  z-index:19!important;
  background:#eef5fb!important;
}

/* -------------------------------------------------------------------------
   Toko ERP v1.6.59 — one desktop/backend Hide/Show control language.
   Every collapsible region starts closed on a fresh result.  Controls are
   tiny plain text rectangles: fixed compact size, coloured, no shadow/icon.
   Staff Mobile PWA is intentionally excluded.
   ------------------------------------------------------------------------- */
body:not(.mobile-app-body) .erp-plain-toggle {
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  width:43px!important;
  min-width:43px!important;
  max-width:43px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  padding:0 4px!important;
  margin:0 2px!important;
  border:1px solid #8bb5df!important;
  border-radius:4px!important;
  background:#eaf4ff!important;
  color:#155b91!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  text-decoration:none!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:22px!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  vertical-align:middle!important;
}
body:not(.mobile-app-body) .erp-plain-toggle[aria-expanded="true"] {
  border-color:#d9aa61!important;
  background:#fff5df!important;
  color:#86540b!important;
}
body:not(.mobile-app-body) .erp-plain-toggle:hover {
  border-color:#5f96cb!important;
  background:#dceeff!important;
  color:#0e4f82!important;
}
body:not(.mobile-app-body) .erp-plain-toggle[aria-expanded="true"]:hover {
  border-color:#c9933e!important;
  background:#ffedc7!important;
  color:#754500!important;
}
body:not(.mobile-app-body) .erp-plain-toggle:focus-visible {
  outline:2px solid rgba(49,95,143,.28)!important;
  outline-offset:2px!important;
}
body:not(.mobile-app-body) .erp-plain-toggle::before,
body:not(.mobile-app-body) .erp-plain-toggle::after {content:none!important;display:none!important}
body:not(.mobile-app-body) .erp-summary-toggle-strip {
  min-height:26px!important;
  height:26px!important;
  margin:0 2px 2px!important;
}
body:not(.mobile-app-body) .erp-summary-toggle-strip .erp-plain-toggle,
body:not(.mobile-app-body) .ci-chart-toggle.erp-plain-toggle,
body:not(.mobile-app-body) .ci-table-toggle.erp-plain-toggle,
body:not(.mobile-app-body) [data-erp-inline-table-toggle].erp-plain-toggle,
body:not(.mobile-app-body) [data-po-table-toggle].erp-plain-toggle {margin-left:auto!important}

/* ===== SOURCE: ui-final-v1628.css ===== */
/* v1.6.28 final help/info appearance: glyph only, never a bordered button. */
:is(button,a,span).erp-info-icon,
:is(button,a,span).erp-ui-help-button,
:is(button,a,span).erp-title-info,
:is(button,a,span).ci-info-icon,
:is(button,a,span).erp-final-help-mark{
  appearance:none!important;-webkit-appearance:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:18px!important;min-width:18px!important;max-width:18px!important;height:20px!important;min-height:20px!important;
  padding:0!important;margin-left:0!important;margin-right:4px!important;border:0!important;border-radius:0!important;
  background:transparent!important;background-image:none!important;box-shadow:none!important;
  color:#315b8f!important;font:900 .82rem/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  text-decoration:none!important;cursor:pointer!important;vertical-align:middle!important;
}
:is(button,a,span).erp-info-icon:hover,
:is(button,a,span).erp-ui-help-button:hover,
:is(button,a,span).erp-title-info:hover,
:is(button,a,span).ci-info-icon:hover,
:is(button,a,span).erp-final-help-mark:hover,
:is(button,a,span).erp-info-icon:focus-visible,
:is(button,a,span).erp-ui-help-button:focus-visible,
:is(button,a,span).erp-title-info:focus-visible,
:is(button,a,span).ci-info-icon:focus-visible,
:is(button,a,span).erp-final-help-mark:focus-visible{
  border:0!important;background:transparent!important;box-shadow:none!important;color:#163f75!important;
  outline:1px dotted currentColor!important;outline-offset:2px!important;
}
body.mobile-app-body .mobile-product-pager{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;
  padding:8px 10px max(10px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #dce5ef;
}
body.mobile-app-body .mobile-product-pager .btn{min-height:40px!important;width:100%!important}
body.mobile-app-body .mobile-product-pager [data-pm-page-label]{font-size:.76rem;font-weight:850;color:#42566f;white-space:nowrap;text-align:center}

/* High-specificity final override: old UI layers used equally-important rules. */
:is(button.erp-info-icon.erp-info-icon.erp-info-icon,
    a.erp-info-icon.erp-info-icon.erp-info-icon,
    span.erp-info-icon.erp-info-icon.erp-info-icon,
    button.erp-ui-help-button.erp-ui-help-button.erp-ui-help-button,
    button.erp-title-info.erp-title-info.erp-title-info,
    button.ci-info-icon.ci-info-icon.ci-info-icon,
    button.erp-final-help-mark.erp-final-help-mark.erp-final-help-mark){
  appearance:none!important;-webkit-appearance:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:18px!important;min-width:18px!important;max-width:18px!important;
  height:20px!important;min-height:20px!important;max-height:20px!important;flex:0 0 18px!important;
  padding:0!important;margin-left:0!important;margin-right:4px!important;border:0!important;border-radius:0!important;
  background:transparent!important;background-image:none!important;box-shadow:none!important;
  color:#315b8f!important;font:900 .82rem/1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  text-decoration:none!important;cursor:pointer!important;vertical-align:middle!important;
}
:is(button.erp-info-icon.erp-info-icon.erp-info-icon,
    button.erp-ui-help-button.erp-ui-help-button.erp-ui-help-button,
    button.erp-title-info.erp-title-info.erp-title-info,
    button.ci-info-icon.ci-info-icon.ci-info-icon,
    button.erp-final-help-mark.erp-final-help-mark.erp-final-help-mark)::before,
:is(button.erp-info-icon.erp-info-icon.erp-info-icon,
    button.erp-ui-help-button.erp-ui-help-button.erp-ui-help-button,
    button.erp-title-info.erp-title-info.erp-title-info,
    button.ci-info-icon.ci-info-icon.ci-info-icon,
    button.erp-final-help-mark.erp-final-help-mark.erp-final-help-mark)::after{
  content:none!important;display:none!important;
}


/* v1.6.37 — global help placement + backend-mobile overlap guard ----------- */
.erp-help-before-text{
  display:inline-flex!important;align-items:center!important;gap:0!important;
}
label.erp-help-before-text{width:max-content;max-width:100%}
.topbar-title.erp-help-before-text{display:flex!important;align-items:center!important;min-width:0!important}

@media (max-width:800px){
  /* Backend mobile pages must use normal document flow. Older sticky command
     bars could cover the pager/table (notably Currency Rates) while scrolling. */
  body:not(.mobile-app-body) :is(
    .erp-unified-filterbar,
    .toolbar.erp-search-only-toolbar,
    .erp-table-commandbar,
    .erp-sticky-table-toolbar,
    .erp-mobile-sticky-search,
    .ci-campaign-listbar,
    .toolbar.compact-filter-bar
  ){
    position:relative!important;top:auto!important;bottom:auto!important;
    z-index:20!important;transform:none!important;inset:auto!important;
    margin-top:0!important;
  }
  body:not(.mobile-app-body) .erp-filter-host-panel{overflow:visible!important}
  body:not(.mobile-app-body) .erp-filter-host-panel > :is(.pager,.erp-table-pager){
    position:relative!important;z-index:5!important;clear:both!important;
  }
  body:not(.mobile-app-body) .erp-filter-host-panel > .table-wrap{
    position:relative!important;z-index:1!important;clear:both!important;
  }
  body:not(.mobile-app-body) .erp-mobile-scroll-hint{
    position:relative!important;z-index:2!important;clear:both!important;
  }
  /* Once page help is moved to the topbar/title, an otherwise empty page-head
     must not leave a blank rounded block above the filter/table workspace. */
  body:not(.mobile-app-body) :is(.page-head,.ci-page-head,.page-heading).erp-page-head-empty{
    display:none!important;height:0!important;min-height:0!important;
    margin:0!important;padding:0!important;border:0!important;
  }
}

/* Pending backend-mobile sidebar trigger polish — presentation only. */
@media(max-width:800px){
  body:not(.mobile-app-body) #sidebarToggle{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
    border-radius:10px!important;
    display:grid!important;
    place-items:center!important;
    font-size:0!important;
  }
  body:not(.mobile-app-body) #sidebarToggle::before,
  body:not(.mobile-app-body).toko-sidebar-collapsed #sidebarToggle::before{
    content:''!important;
    display:block!important;
    width:17px!important;
    height:12px!important;
    background:
      linear-gradient(currentColor,currentColor) 0 0/17px 2px no-repeat,
      linear-gradient(currentColor,currentColor) 0 5px/17px 2px no-repeat,
      linear-gradient(currentColor,currentColor) 0 10px/17px 2px no-repeat!important;
    border-radius:2px!important;
  }
}

/* v1.6.48 filter-footer polish — every backend filter modal.
   One action: full-width. Two actions: one row. Three actions: one row when
   there is room; on narrow phones Reset + Cancel sit above a full-width Apply. */
body:not(.mobile-app-body) .erp-filter-modal-actions[data-erp-filter-action-count="1"]{
  grid-template-columns:minmax(0,1fr)!important;
}
body:not(.mobile-app-body) .erp-filter-modal-actions[data-erp-filter-action-count="1"] > :last-child{
  grid-column:1 / -1!important;width:100%!important;min-width:0!important;
}
body:not(.mobile-app-body) .erp-filter-modal-actions[data-erp-filter-action-count="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body:not(.mobile-app-body) .erp-filter-modal-actions[data-erp-filter-action-count="3"]{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* CSS fallback for a footer painted before the normalizer runs. */
body:not(.mobile-app-body) .erp-filter-modal-actions:has(> :only-child){
  grid-template-columns:minmax(0,1fr)!important;
}
body:not(.mobile-app-body) .erp-filter-modal-actions:has(> :only-child) > :only-child{
  grid-column:1 / -1!important;width:100%!important;
}

@media(max-width:560px){
  body:not(.mobile-app-body) .erp-filter-modal-actions[data-erp-filter-action-count="3"],
  body:not(.mobile-app-body) .erp-filter-modal-actions:has(> :nth-child(3):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body:not(.mobile-app-body) .erp-filter-modal-actions[data-erp-filter-action-count="3"] > :last-child,
  body:not(.mobile-app-body) .erp-filter-modal-actions:has(> :nth-child(3):last-child) > :last-child{
    grid-column:1 / -1!important;width:100%!important;min-width:0!important;
    min-height:42px!important;
  }
}

/* -------------------------------------------------------------------------
   v1.6.45 — mobile-backend global toolbar/pager polish.
   Presentation only. Staff Mobile PWA and desktop (>800px) are excluded.
   ------------------------------------------------------------------------- */
@media (max-width:800px){
  /* Search stays full width.  Command buttons beneath it read naturally from
     left to right instead of being pushed to the right edge by older layers. */
  body:not(.mobile-app-body) .erp-unified-filterbar > .erp-filterbar-actions,
  body:not(.mobile-app-body) .toolbar.erp-search-only-toolbar > .erp-filterbar-actions,
  body:not(.mobile-app-body) .compact-filter-bar > .erp-filterbar-actions{
    display:flex!important;
    flex-flow:row wrap!important;
    justify-content:flex-start!important;
    align-items:center!important;
    width:100%!important;
    margin-left:0!important;
    gap:6px!important;
  }

  /* A single compact information/control line on normal phones:
       result count | Rows selector | previous / Page n / next
     Older mobile CSS gave the range 100% width, forcing an unnecessary row. */
  body:not(.mobile-app-body) :is(.pager,.erp-table-pager){
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    padding:7px 8px!important;
  }
  body:not(.mobile-app-body) .erp-table-pager .erp-pager-range{
    flex:0 0 auto!important;
    width:auto!important;
    margin:0!important;
    white-space:nowrap!important;
  }
  body:not(.mobile-app-body) .erp-pager-controls{
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    margin-left:auto!important;
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
  }
  body:not(.mobile-app-body) .erp-pager-size{
    flex:0 0 auto!important;
    margin:0!important;
  }
  body:not(.mobile-app-body) .erp-pager-nav{
    flex:0 0 auto!important;
    gap:4px!important;
  }

  /* Keep the horizontal-scroll cue mobile-only, but make it a quiet hint rather
     than another apparent toolbar row. */
  body:not(.mobile-app-body) .erp-mobile-scroll-hint{
    justify-content:flex-end!important;
    min-height:17px!important;
    margin:0 7px 2px!important;
    padding:0!important;
    font-size:.58rem!important;
    font-weight:700!important;
    line-height:1.15!important;
    opacity:.72!important;
  }
}

/* Truly narrow screens may wrap, but in a controlled two-line layout rather
   than forcing the result count onto a separate row on every phone. */
@media (max-width:350px){
  body:not(.mobile-app-body) :is(.pager,.erp-table-pager){
    flex-wrap:wrap!important;
  }
  body:not(.mobile-app-body) .erp-table-pager .erp-pager-range{
    flex:1 1 auto!important;
  }
  body:not(.mobile-app-body) .erp-pager-controls{
    flex:1 1 100%!important;
    width:100%!important;
    justify-content:flex-start!important;
  }
}

/* ===== SOURCE: page-stability-v1630.css ===== */
/* v1.6.30 global page/PWA stability layer. Loaded LAST. */
:root{--nav:#202B63!important;--nav2:#202B63!important;}
html{background:#f5f9ff!important;scrollbar-gutter:stable;}
body{background:#f5f9ff!important;}
body:not(.mobile-app-body) .sidebar{background:#202B63!important;background-image:none!important;border-right-color:#202B63!important;}

/* v1.6.39: persistent navigation never hides/reveals the workspace.
   SSR content is visible from first paint and remains visible while the next
   page is fetched/prepared. This prevents whole-page flash on every click. */
body .content{visibility:visible!important;opacity:1!important;}

/* Normal page UI must not resize/scale/animate under the user's finger. */
.app-main,.content,.page-head,.ci-page-head,.page-heading,.panel,.panel-head,.panel-body,
.toolbar,.erp-unified-filterbar,.erp-table-commandbar,.table-tools,.pager,.ci-pager,
.mobile-workspace,.mobile-page-head,.mobile-doc-list-head,.mobile-doc-view-head,
.mobile-context-strip,.mobile-product-toolbar,.mobile-list-tools,.mobile-workflow-bar,.mobile-sticky-entry-actions,
.mobile-primary-action,.mobile-list-tool,.mobile-workflow-btn,.mobile-context-button,.mobile-touch-action,.mobile-fab-new{
  transition:none!important;animation:none!important;
}
.mobile-primary-action:active,.mobile-list-tool:active,.mobile-workflow-btn:active,.mobile-context-button:active,.mobile-touch-action:active,.mobile-fab-new:active{
  transform:none!important;
}

/* PWA normal pages use one natural scroll path. Sticky page bars were repainting
   against the dynamic phone viewport and looked like jumping/dancing. */
body.mobile-app-body :is(.mobile-context-strip,.mobile-product-toolbar,.mobile-list-tools,.mobile-workflow-bar,.mobile-sticky-entry-actions){
  position:relative!important;top:auto!important;bottom:auto!important;transform:none!important;will-change:auto!important;
}
body.mobile-app-body{overscroll-behavior-y:contain!important;}
body.mobile-app-body .app-shell,body.mobile-app-body .app-main{contain:none!important;min-height:100svh!important;}

/* With server-side pagination, progressive card paint is no longer worth the
   scroll-height correction/jump it can cause on variable-height cards. */
body.mobile-app-body .mobile-product-master-card,
body.mobile-app-body #erpProductPicker .modal-table tr[data-id]{
  content-visibility:visible!important;contain-intrinsic-size:none!important;
}

/* Sidebar controls: color changes may be instant; geometry never animates during page loads. */
.sidebar,.sidebar .brand,.sidebar nav>a,.sidebar summary,.sidebar details div a,.app-main,.topbar{
  transition:none!important;animation:none!important;
}

/* Keep genuine progress indicators animated. */
.export-download-spinner{animation:erp-export-spin .8s linear infinite!important;}

/* ===== SOURCE: navigation-hold-v1648.css ===== */
/* Toko ERP v1.6.48 — native full-lifecycle navigation hold.
   This does NOT replace Flask navigation and does not execute page scripts in a
   custom runtime. Chrome/Android can keep the previous painted document visible
   until the next same-origin document is ready, then swap instantly with no
   cross-fade. Unsupported browsers simply ignore this file. */
@view-transition { navigation: auto; }

/* Disable the browser's default root cross-fade: it was the source of the
   sidebar/logo flash in the older v1.6.25 experiment. The transition is used
   only as a paint hold + instant swap. */
::view-transition-old(root),
::view-transition-new(root){
  animation:none!important;
  mix-blend-mode:normal!important;
}

@supports (view-transition-name: none){
  body[data-authenticated="1"]:not(.mobile-app-body) .sidebar{view-transition-name:erp-stable-sidebar;}
  body[data-authenticated="1"]:not(.mobile-app-body) .topbar{view-transition-name:erp-stable-topbar;}
  body[data-authenticated="1"]:not(.mobile-app-body) #erpWorkspace{view-transition-name:erp-stable-workspace;}

  ::view-transition-old(erp-stable-sidebar),
  ::view-transition-new(erp-stable-sidebar),
  ::view-transition-old(erp-stable-topbar),
  ::view-transition-new(erp-stable-topbar),
  ::view-transition-old(erp-stable-workspace),
  ::view-transition-new(erp-stable-workspace){
    animation:none!important;
    mix-blend-mode:normal!important;
  }
}

/* ===== SOURCE: pwa-stability-v1631.css ===== */
/* v1.6.31 — mobile browser stability + exact shared multi-product card layout. */

/* The Staff Mobile App must never briefly paint the desktop shell while the
   browser is still resolving the external stylesheets. */
body.mobile-app-body .sidebar,
body.mobile-app-body .topbar,
body.mobile-app-body #sidebarBackdrop{display:none!important;}
body.mobile-app-body .app-main{margin-left:0!important;min-height:100svh!important;}
body.mobile-app-body .content{
  visibility:visible!important;opacity:1!important;transform:none!important;
  min-height:100svh!important;
}
body.mobile-app-body .mobile-workspace{overflow-anchor:none;}

/* Browser installability can become known after DOMContentLoaded. Keep the
   Install button outside normal document flow so its late appearance cannot
   push the mobile home header/cards and look like a blink. */
body.mobile-app-body .mobile-home-screen [data-install-pwa]{
  position:fixed!important;
  right:max(12px,env(safe-area-inset-right))!important;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  z-index:850!important;
  width:auto!important;max-width:190px!important;
  box-shadow:0 8px 24px rgba(15,23,42,.16)!important;
}
body.mobile-app-body .mobile-home-screen .mobile-card:active,
body.mobile-app-body .mobile-primary-action:active,
body.mobile-app-body .mobile-touch-action:active,
body.mobile-app-body .mobile-nav-button:active{transform:none!important;}

/* Exact PWA multi-product card requested:
   left = photo from top to bottom;
   right top = product name + small SOH / Per CTN / Unit;
   right bottom = Qty + PCS/CTN + checkbox. */
body.mobile-app-body #erpProductPicker .modal-table tr[data-id]{
  display:grid!important;
  grid-template-columns:92px minmax(72px,.78fr) minmax(116px,1.22fr) 36px!important;
  grid-template-rows:auto minmax(48px,auto) auto!important;
  grid-template-areas:
    "photo info info info"
    "photo qty mode select"
    "photo cost cost cost"!important;
  gap:8px 9px!important;
  align-items:stretch!important;
  padding:10px!important;
  min-height:126px!important;
}
body.mobile-app-body #erpProductPicker .picker-picture-cell{
  grid-area:photo!important;grid-column:auto!important;grid-row:auto!important;
  align-self:stretch!important;display:flex!important;min-width:0!important;
}
body.mobile-app-body #erpProductPicker .picker-picture-cell .picker-product-thumb{
  width:100%!important;height:100%!important;min-height:106px!important;
  border-radius:12px!important;border:1px solid #d6e1ec!important;background:#fff!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
body.mobile-app-body #erpProductPicker .picker-picture-cell .picker-product-thumb img{
  width:100%!important;height:100%!important;object-fit:contain!important;
}
body.mobile-app-body #erpProductPicker .picker-product-cell{
  grid-area:info!important;grid-column:auto!important;grid-row:auto!important;
  align-self:start!important;min-width:0!important;padding:1px 0 0!important;
}
body.mobile-app-body #erpProductPicker .picker-product-cell .product-name{
  margin:0!important;font-size:.88rem!important;line-height:1.18!important;
  font-weight:900!important;color:#19324f!important;overflow-wrap:anywhere!important;
}
/* Keep the PWA card exactly to the requested information hierarchy. */
body.mobile-app-body #erpProductPicker .picker-product-cell>.barcode,
body.mobile-app-body #erpProductPicker .picker-desktop-rack{display:none!important;}
body.mobile-app-body #erpProductPicker .picker-mobile-product-meta{
  display:flex!important;align-items:center!important;gap:4px 9px!important;flex-wrap:wrap!important;
  margin-top:6px!important;font-size:.62rem!important;line-height:1.25!important;
  color:#66778a!important;text-transform:none!important;
}
body.mobile-app-body #erpProductPicker .picker-mobile-product-meta>span{
  display:inline-flex!important;align-items:center!important;gap:3px!important;white-space:nowrap!important;
}
body.mobile-app-body #erpProductPicker .picker-mobile-product-meta b{
  color:#334a63!important;font-size:.65rem!important;font-weight:850!important;
}
/* Global stock rule is preserved here explicitly for the picker: <=0 or below
   reorder = red; exactly equal to reorder remains normal. */
body.mobile-app-body #erpProductPicker .picker-mobile-product-meta .stock-level-value.stock-zero,
body.mobile-app-body #erpProductPicker .picker-mobile-product-meta .stock-level-value.stock-low{
  color:#b42318!important;background:#fee4e2!important;border:1px solid #fda29b!important;
  padding:1px 5px!important;border-radius:6px!important;
}
body.mobile-app-body #erpProductPicker .picker-mobile-product-meta .stock-level-value.stock-normal{
  color:#334a63!important;background:transparent!important;border-color:transparent!important;
}
body.mobile-app-body #erpProductPicker .picker-qty-cell{
  grid-area:qty!important;grid-column:auto!important;grid-row:auto!important;min-width:0!important;
}
body.mobile-app-body #erpProductPicker .picker-by{
  grid-area:mode!important;grid-column:auto!important;grid-row:auto!important;min-width:0!important;
}
body.mobile-app-body #erpProductPicker .picker-select-cell{
  grid-area:select!important;grid-column:auto!important;grid-row:auto!important;
  display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;
  padding:0 0 3px!important;
}
body.mobile-app-body #erpProductPicker .picker-cost{
  grid-area:cost!important;grid-column:auto!important;grid-row:auto!important;min-width:0!important;
}
body.mobile-app-body #erpProductPicker :is(.picker-qty-cell,.picker-by,.picker-cost){
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  justify-content:flex-end!important;gap:4px!important;margin:0!important;
}
body.mobile-app-body #erpProductPicker :is(.picker-qty-cell,.picker-by,.picker-cost)::before{
  content:attr(data-mobile-label)!important;font-size:.62rem!important;line-height:1!important;
  font-weight:850!important;color:#5b6f86!important;white-space:nowrap!important;
}
body.mobile-app-body #erpProductPicker :is(.picker-qty,.picker-mode,.picker-unit-cost){
  width:100%!important;min-width:0!important;height:42px!important;min-height:42px!important;
  padding:5px 8px!important;font-size:16px!important;border-radius:10px!important;
}
body.mobile-app-body #erpProductPicker .picker-check{
  width:25px!important;height:25px!important;margin:0!important;accent-color:#202B63!important;
}

@media(max-width:390px){
  body.mobile-app-body #erpProductPicker .modal-table tr[data-id]{
    grid-template-columns:82px minmax(64px,.76fr) minmax(102px,1.24fr) 32px!important;
    gap:7px!important;padding:9px!important;min-height:118px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-picture-cell .picker-product-thumb{min-height:100px!important;}
  body.mobile-app-body #erpProductPicker .picker-mobile-product-meta{font-size:.59rem!important;gap:3px 6px!important;}
}

@media(max-width:340px){
  body.mobile-app-body #erpProductPicker .modal-table tr[data-id]{
    grid-template-columns:72px minmax(58px,.72fr) minmax(94px,1.28fr) 30px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-picture-cell .picker-product-thumb{min-height:94px!important;}
}

/* v1.6.44 — final Staff PWA natural-scroll authority -------------------------
   One and only one normal-page vertical scroll surface: the document. This is
   intentionally loaded after the older mobile layers so Android/iOS cannot end
   up with a fixed-height/clipped transaction or Product Master form. Modals and
   picker sheets keep their own controlled scroll surfaces. */
html:has(body.mobile-app-body){
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
body.mobile-app-body{
  position:static!important;
  height:auto!important;
  min-height:100svh!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y pinch-zoom!important;
  -webkit-overflow-scrolling:touch!important;
}
body.mobile-app-body .app-shell,
body.mobile-app-body .app-main,
body.mobile-app-body .content,
body.mobile-app-body #erpWorkspace,
body.mobile-app-body .mobile-workspace,
body.mobile-app-body .mobile-compact-entry-page,
body.mobile-app-body .mobile-doc-entry-page,
body.mobile-app-body .mobile-product-entry-form,
body.mobile-app-body #mobilePoForm,
body.mobile-app-body #mobileTransferForm,
body.mobile-app-body #mobileAdjustmentForm,
body.mobile-app-body .mobile-products-panel,
body.mobile-app-body .mobile-products-focus,
body.mobile-app-body .mobile-product-section,
body.mobile-app-body .mobile-item-list,
body.mobile-app-body .mobile-doc-item-list,
body.mobile-app-body .mobile-adjustment-item-list{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
}
body.mobile-app-body .mobile-item-list,
body.mobile-app-body .mobile-doc-item-list,
body.mobile-app-body .mobile-adjustment-item-list{
  contain:none!important;
  content-visibility:visible!important;
}
body.mobile-app-body .mobile-transaction-card,
body.mobile-app-body .mobile-line,
body.mobile-app-body .mobile-adjustment-card{
  touch-action:pan-y!important;
}
body.mobile-app-body .mobile-product-entry-form>.actions,
body.mobile-app-body .mobile-workspace{
  padding-bottom:max(92px,calc(18px + env(safe-area-inset-bottom)))!important;
}
/* Keep modal scrolling isolated. Normal-page overrides above must never turn a
   sheet/picker into document scrolling. */
body.mobile-app-body .modal-overlay:not([hidden]),
body.mobile-app-body .mobile-entry-modal:not([hidden]),
body.mobile-app-body .mobile-search-modal:not([hidden]){
  overflow:hidden!important;
  overscroll-behavior:contain!important;
}
body.mobile-app-body .mobile-sheet-card .erp-modal-body,
body.mobile-app-body #erpProductPicker .modal-table{
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
}

/* ===== SOURCE: pwa-picker-v1632.css ===== */
/* v1.6.32 — structural Staff-PWA multi-product picker layout.
   This file intentionally uses new wrapper classes so legacy table/card rules
   cannot move the photo, quantity, unit selector, or checkbox. */
@media (max-width: 800px) {
  body.mobile-app-body #erpProductPicker .modal-table tr.picker-mobile-row-v1632 {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 8px!important;
    padding:0!important;
    border:1px solid #dce5ef!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(31,51,75,.04)!important;
    overflow:hidden!important;
  }
  body.mobile-app-body #erpProductPicker .modal-table tr.picker-mobile-row-v1632:has(.picker-check:checked){
    border-color:#7fb1e7!important;
    background:#f7faff!important;
    box-shadow:0 0 0 2px rgba(61,124,191,.08)!important;
  }
  body.mobile-app-body #erpProductPicker td.picker-mobile-card-cell-v1632 {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-card-v1632 {
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    grid-template-rows:auto minmax(52px,auto)!important;
    grid-template-areas:
      "photo info"
      "photo controls"!important;
    column-gap:10px!important;
    row-gap:8px!important;
    align-items:stretch!important;
    min-height:132px!important;
    padding:10px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632 {
    grid-area:photo!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    min-width:0!important;
    min-height:112px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632 .picker-product-thumb {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
    min-height:112px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #d6e1ec!important;
    border-radius:12px!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632 .picker-product-thumb img {
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-info-v1632 {
    grid-area:info!important;
    min-width:0!important;
    align-self:start!important;
    padding-top:1px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-info-v1632 .product-name {
    margin:0!important;
    font-size:.89rem!important;
    line-height:1.18!important;
    font-weight:900!important;
    color:#19324f!important;
    overflow-wrap:anywhere!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632 {
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:4px 9px!important;
    margin-top:6px!important;
    color:#66778a!important;
    font-size:.62rem!important;
    line-height:1.25!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632>span {
    display:inline-flex!important;
    align-items:center!important;
    gap:3px!important;
    white-space:nowrap!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632 b {
    color:#334a63!important;
    font-size:.65rem!important;
    font-weight:850!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632 .stock-level-value.stock-zero,
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632 .stock-level-value.stock-low {
    color:#b42318!important;
    background:#fee4e2!important;
    border:1px solid #fda29b!important;
    border-radius:6px!important;
    padding:1px 5px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632 .stock-level-value.stock-normal {
    color:#334a63!important;
    background:transparent!important;
    border-color:transparent!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-controls-v1632 {
    grid-area:controls!important;
    display:grid!important;
    grid-template-columns:minmax(70px,.82fr) minmax(98px,1.18fr) 32px!important;
    gap:8px!important;
    align-items:end!important;
    min-width:0!important;
  }
  body.mobile-app-body #erpProductPicker :is(.picker-mobile-qty-v1632,.picker-mobile-mode-v1632,.picker-mobile-cost-v1632) {
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    min-width:0!important;
    margin:0!important;
  }
  body.mobile-app-body #erpProductPicker :is(.picker-mobile-qty-v1632,.picker-mobile-mode-v1632,.picker-mobile-cost-v1632)>span {
    color:#5b6f86!important;
    font-size:.62rem!important;
    line-height:1!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-controls-v1632 :is(.picker-qty,.picker-mode,.picker-unit-cost) {
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:5px 8px!important;
    border-radius:10px!important;
    font-size:16px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-check-v1632 {
    display:flex!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
    min-width:0!important;
    height:42px!important;
    margin:0!important;
    padding:0 0 7px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-check-v1632 .picker-check {
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
    margin:0!important;
    accent-color:#202B63!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-check-label-v1632 {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    white-space:nowrap!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-cost-v1632 {
    grid-column:1/3!important;
    margin-top:2px!important;
  }
}
@media (max-width:390px) {
  body.mobile-app-body #erpProductPicker .picker-mobile-card-v1632 {
    grid-template-columns:82px minmax(0,1fr)!important;
    column-gap:8px!important;
    padding:9px!important;
    min-height:122px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632,
  body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632 .picker-product-thumb {
    min-height:104px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-controls-v1632 {
    grid-template-columns:minmax(64px,.8fr) minmax(92px,1.2fr) 30px!important;
    gap:6px!important;
  }
}

/* Wide Staff-PWA picker support.
   The Staff PWA always renders the mobile-card markup, including when it is
   opened in a desktop/tablet browser. Above 800px, keep that same card model
   but use the extra width instead of letting the controls collapse at left.
   Phone rules above remain unchanged. */
@media (min-width:801px) {
  body.mobile-app-body #erpProductPicker .modal-table tr.picker-mobile-row-v1632 {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 10px!important;
    padding:0!important;
    border:1px solid #dce5ef!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(31,51,75,.04)!important;
    overflow:hidden!important;
  }
  body.mobile-app-body #erpProductPicker .modal-table tr.picker-mobile-row-v1632:has(.picker-check:checked){
    border-color:#7fb1e7!important;
    background:#f7faff!important;
    box-shadow:0 0 0 2px rgba(61,124,191,.08)!important;
  }
  body.mobile-app-body #erpProductPicker td.picker-mobile-card-cell-v1632 {
    display:block!important;
    width:100%!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-card-v1632 {
    display:grid!important;
    grid-template-columns:104px minmax(220px,1fr) minmax(330px,.9fr)!important;
    grid-template-rows:auto!important;
    grid-template-areas:"photo info controls"!important;
    column-gap:16px!important;
    align-items:center!important;
    min-height:126px!important;
    padding:12px 14px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632 {
    grid-area:photo!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    min-width:0!important;
    min-height:102px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632 .picker-product-thumb {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
    min-height:102px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #d6e1ec!important;
    border-radius:12px!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632 .picker-product-thumb img {
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-info-v1632 {
    grid-area:info!important;
    min-width:0!important;
    align-self:start!important;
    padding-top:3px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-info-v1632 .product-name {
    margin:0!important;
    font-size:.95rem!important;
    line-height:1.22!important;
    font-weight:900!important;
    color:#19324f!important;
    overflow-wrap:anywhere!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632 {
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:6px 12px!important;
    margin-top:8px!important;
    color:#66778a!important;
    font-size:.68rem!important;
    line-height:1.25!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632>span {
    display:inline-flex!important;
    align-items:center!important;
    gap:4px!important;
    white-space:nowrap!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632 b {
    color:#334a63!important;
    font-size:.70rem!important;
    font-weight:850!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632 .stock-level-value.stock-zero,
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632 .stock-level-value.stock-low {
    color:#b42318!important;
    background:#fee4e2!important;
    border:1px solid #fda29b!important;
    border-radius:6px!important;
    padding:1px 5px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632 .stock-level-value.stock-normal {
    color:#334a63!important;
    background:transparent!important;
    border-color:transparent!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-controls-v1632 {
    grid-area:controls!important;
    display:grid!important;
    grid-template-columns:minmax(105px,.9fr) minmax(135px,1.1fr) 36px!important;
    gap:9px!important;
    align-items:end!important;
    min-width:0!important;
  }
  body.mobile-app-body #erpProductPicker :is(.picker-mobile-qty-v1632,.picker-mobile-mode-v1632,.picker-mobile-cost-v1632) {
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    min-width:0!important;
    margin:0!important;
  }
  body.mobile-app-body #erpProductPicker :is(.picker-mobile-qty-v1632,.picker-mobile-mode-v1632,.picker-mobile-cost-v1632)>span {
    color:#5b6f86!important;
    font-size:.66rem!important;
    line-height:1!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-controls-v1632 :is(.picker-qty,.picker-mode,.picker-unit-cost) {
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:5px 9px!important;
    border-radius:10px!important;
    font-size:16px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-check-v1632 {
    display:flex!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
    min-width:0!important;
    height:42px!important;
    margin:0!important;
    padding:0 0 7px!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-check-v1632 .picker-check {
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
    margin:0!important;
    accent-color:#202B63!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-check-label-v1632 {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    white-space:nowrap!important;
  }
  body.mobile-app-body #erpProductPicker .picker-mobile-cost-v1632 {
    grid-column:1/3!important;
    margin-top:3px!important;
  }
}


/* v3.1.3 — approved Staff PWA picker layout. */
body.mobile-app-body #erpProductPicker .picker-mobile-card-v1632{
  grid-template-columns:84px minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  grid-template-areas:
    "name name"
    "photo info"
    "photo controls"!important;
  column-gap:10px!important;
  row-gap:7px!important;
  align-items:start!important;
  min-height:0!important;
}
body.mobile-app-body #erpProductPicker .picker-mobile-name-v313{
  grid-area:name!important;
  min-width:0!important;
  width:100%!important;
}
body.mobile-app-body #erpProductPicker .picker-mobile-name-v313 .product-name{
  display:block!important;
  width:100%!important;
  margin:0!important;
  font-size:.92rem!important;
  line-height:1.2!important;
  font-weight:900!important;
  color:#19324f!important;
  overflow-wrap:anywhere!important;
}
body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632{
  min-height:0!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
}
body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632 .picker-product-thumb{
  width:82px!important;
  height:82px!important;
  min-height:82px!important;
  max-height:82px!important;
  flex:0 0 82px!important;
  border-radius:12px!important;
}
body.mobile-app-body #erpProductPicker .picker-mobile-info-v1632{padding-top:0!important}
body.mobile-app-body #erpProductPicker .picker-mobile-meta-v1632{margin-top:0!important}
body.mobile-app-body #erpProductPicker .picker-page-actions [data-page-prev],
body.mobile-app-body #erpProductPicker .picker-page-actions [data-page-next]{display:none!important}
body.mobile-app-body #erpProductPicker .picker-page-actions{justify-content:flex-end!important;min-height:22px!important}
body.mobile-app-body #erpProductPicker .picker-selection-actions{width:100%!important}
body.mobile-app-body #erpProductPicker .picker-clear-selection{display:inline-flex!important}
@media(max-width:390px){
  body.mobile-app-body #erpProductPicker .picker-mobile-card-v1632{grid-template-columns:78px minmax(0,1fr)!important;column-gap:8px!important}
  body.mobile-app-body #erpProductPicker .picker-mobile-photo-v1632 .picker-product-thumb{width:76px!important;height:76px!important;min-height:76px!important;max-height:76px!important;flex-basis:76px!important}
}

/* ===== SOURCE: product-picker-desktop-final.css ===== */
/* Desktop/backend Select Multiple Products geometry.
   Presentation only: do not change picker state, filters, selection, or add logic. */
body:not(.mobile-app-body) #erpProductPicker.modal-overlay{
  align-items:flex-start!important;
  justify-items:center!important;
  padding:10px 14px!important;
  overflow:hidden!important;
}
body:not(.mobile-app-body) #erpProductPicker>.modal-card.wide{
  width:min(1500px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  height:calc(100dvh - 20px)!important;
  max-height:calc(100dvh - 20px)!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
body:not(.mobile-app-body) #erpProductPicker .modal-head{
  position:relative!important;
  top:auto!important;
  flex:0 0 auto!important;
  padding:12px 14px!important;
}

/* Search is its own clean row. Desktop does not need the compact PWA
   Filters/Refresh controls because the full filter row is already visible. */
body:not(.mobile-app-body) #erpProductPicker .picker-query-row{
  flex:0 0 auto!important;
  display:block!important;
  padding:9px 12px 5px!important;
  border-bottom:0!important;
  background:#fff!important;
}
body:not(.mobile-app-body) #erpProductPicker .picker-query-row>.input{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
}
body:not(.mobile-app-body) #erpProductPicker .picker-filter-toggle,
body:not(.mobile-app-body) #erpProductPicker .picker-refresh-button,
body:not(.mobile-app-body) #erpProductPicker .picker-filter-mobile-head,
body:not(.mobile-app-body) #erpProductPicker .picker-filter-scrim{
  display:none!important;
}

/* One aligned desktop filter row. */
body:not(.mobile-app-body) #erpProductPicker .picker-filter-panel{
  flex:0 0 auto!important;
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(150px,1fr)) auto!important;
  gap:9px!important;
  align-items:end!important;
  width:100%!important;
  max-width:none!important;
  max-height:none!important;
  overflow:visible!important;
  padding:5px 12px 10px!important;
  border:0!important;
  border-bottom:1px solid var(--border)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
body:not(.mobile-app-body) #erpProductPicker .picker-filter-field{
  display:grid!important;
  grid-template-rows:auto 40px!important;
  gap:4px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
body:not(.mobile-app-body) #erpProductPicker .picker-filter-label{
  display:block!important;
  margin:0!important;
  color:#51657c!important;
  font-size:.72rem!important;
  line-height:1.1!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}
body:not(.mobile-app-body) #erpProductPicker .picker-filter-field>.input{
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
}
body:not(.mobile-app-body) #erpProductPicker .picker-filter-mobile-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  min-width:max-content!important;
  margin:0!important;
  padding:0!important;
}
body:not(.mobile-app-body) #erpProductPicker .picker-filter-mobile-actions>.btn{
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  white-space:nowrap!important;
}

body:not(.mobile-app-body) #erpProductPicker .modal-summary{
  flex:0 0 auto!important;
  padding:7px 12px!important;
  min-height:42px!important;
  background:#fff!important;
  border-bottom:1px solid var(--border)!important;
}

/* Critical geometry: the table is the only vertically scrolling region.
   This keeps the bottom actions visible without scrolling the whole modal. */
body:not(.mobile-app-body) #erpProductPicker .modal-table{
  flex:1 1 auto!important;
  min-height:160px!important;
  max-height:none!important;
  height:auto!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}
body:not(.mobile-app-body) #erpProductPicker .modal-actions{
  position:relative!important;
  bottom:auto!important;
  flex:0 0 auto!important;
  min-height:56px!important;
  padding:9px 12px!important;
  margin:0!important;
  background:#fff!important;
  border-top:1px solid var(--border)!important;
  box-shadow:0 -5px 16px rgba(31,51,75,.08)!important;
  z-index:8!important;
}
body:not(.mobile-app-body) #erpProductPicker .modal-actions>.btn{
  min-width:150px!important;
}

/* Backend opened on a phone/tablet: keep the same safe action visibility,
   but stack filters into two columns. Staff PWA is intentionally untouched. */
@media(max-width:760px){
  body:not(.mobile-app-body) #erpProductPicker.modal-overlay{padding:6px!important}
  body:not(.mobile-app-body) #erpProductPicker>.modal-card.wide{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    height:calc(100dvh - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
  }
  body:not(.mobile-app-body) #erpProductPicker .picker-filter-panel{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body:not(.mobile-app-body) #erpProductPicker .picker-filter-mobile-actions{
    grid-column:1/-1!important;
    justify-content:stretch!important;
  }
  body:not(.mobile-app-body) #erpProductPicker .picker-filter-mobile-actions>.btn{flex:1 1 0!important}
  body:not(.mobile-app-body) #erpProductPicker .modal-actions>.btn{min-width:0!important;flex:1 1 0!important}
}

/* ===== SOURCE: backend-modal-unified-v3116.css ===== */
/* Toko ERP v3.1.16 — backend modal viewport + unified header layer.
   Backend only. Mobile PWA sheets keep their dedicated presentation rules. */

@media (min-width: 801px) {
  body:not(.mobile-app-body) .modal-overlay:not(.erp-drawer-backdrop) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2141000000 !important;
    display: grid !important;
    place-items: start center !important;
    padding: clamp(18px, 5vh, 56px) 18px 28px !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    background: rgba(15, 23, 42, .52) !important;
    isolation: isolate !important;
  }
  body:not(.mobile-app-body) .modal-overlay[hidden] { display: none !important; }

  body:not(.mobile-app-body) .modal-overlay:not(.erp-drawer-backdrop) > :is(.modal-card,.erp-modal-card) {
    position: relative !important;
    inset: auto !important;
    margin: 0 auto !important;
    max-width: calc(100vw - 36px) !important;
    max-height: calc(100dvh - clamp(46px, 10vh, 112px)) !important;
    min-width: 0 !important;
    overflow: auto !important;
    isolation: isolate !important;
    background: #fff !important;
  }

  body:not(.mobile-app-body) .modal-overlay > .modal-card.wide {
    width: min(1450px, calc(100vw - 36px)) !important;
  }

  /* Same header language as the Filters drawer: pale-blue band, title/subtitle,
     bordered square close control, clear separation from the body. */
  body:not(.mobile-app-body) .modal-overlay .modal-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    background: #edf6ff !important;
    border-bottom: 1px solid #c9def4 !important;
    border-radius: 0 !important;
    color: #20364f !important;
  }
  body:not(.mobile-app-body) .modal-head > :first-child { min-width: 0 !important; }
  body:not(.mobile-app-body) .modal-head h2 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: #20364f !important;
  }
  body:not(.mobile-app-body) .modal-head p {
    margin: 5px 0 0 !important;
    font-size: .82rem !important;
    line-height: 1.35 !important;
    color: #58708c !important;
  }
  body:not(.mobile-app-body) .modal-head > .icon-btn,
  body:not(.mobile-app-body) .modal-head button[data-close] {
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid #b9d4ef !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #284967 !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
  }

  /* Every table inside a backend modal owns its horizontal scroll area. */
  body:not(.mobile-app-body) .modal-card .table-wrap,
  body:not(.mobile-app-body) .erp-modal-card .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    scrollbar-gutter: stable !important;
  }
  body:not(.mobile-app-body) .modal-card.wide .table-wrap > table.data-table,
  body:not(.mobile-app-body) .erp-modal-card.wide .table-wrap > table.data-table {
    width: max-content !important;
    min-width: 100% !important;
  }
  body:not(.mobile-app-body) #receiveGoodsModal .receive-modal-table {
    max-height: min(52vh, 560px) !important;
    border-top: 1px solid #dbe7f3 !important;
    border-bottom: 1px solid #dbe7f3 !important;
  }
  body:not(.mobile-app-body) #receiveGoodsModal .receive-modal-table > table {
    min-width: 1120px !important;
  }
  body:not(.mobile-app-body) #receiveGoodsModal .receive-modal-table th:first-child,
  body:not(.mobile-app-body) #receiveGoodsModal .receive-modal-table td:first-child {
    min-width: 58px !important;
  }
  body:not(.mobile-app-body) #receiveGoodsModal .receive-modal-table th:nth-child(2),
  body:not(.mobile-app-body) #receiveGoodsModal .receive-modal-table td:nth-child(2) {
    min-width: 270px !important;
  }
}

/* Small backend screens still get the same header style and explicit
   two-axis scrolling, while preserving the existing mobile-backend sizing. */
@media (max-width: 800px) {
  body:not(.mobile-app-body) .modal-head {
    background: #edf6ff !important;
    border-bottom: 1px solid #c9def4 !important;
  }
  body:not(.mobile-app-body) .modal-card .table-wrap,
  body:not(.mobile-app-body) .erp-modal-card .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }
  body:not(.mobile-app-body) #receiveGoodsModal .receive-modal-table > table {
    min-width: 1060px !important;
  }
}

/* ===== SOURCE: mobile-footer-actions-v1648.css ===== */
/* v1.6.48 Mobile/PWA modal footer alignment ---------------------------------
   Keep footer actions compact, right-aligned, and easier to tap. This is
   presentation-only and is intentionally scoped to Staff Mobile/PWA pages. */
@media (max-width: 800px) {
  body.mobile-app-body .modal-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  /* Do not let older mobile rules stretch footer controls edge-to-edge. */
  body.mobile-app-body .modal-actions > :is(.btn, button, a.btn) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 108px !important;
    min-height: 40px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Shared warning/error/info dialog shown by erpNotify(). */
  body.mobile-app-body #erpNoticeDialog .modal-actions {
    justify-content: flex-end !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.mobile-app-body #erpNoticeDialog [data-notice-ok] {
    min-width: 104px !important;
  }

  /* Details sheets: PO, Transfer and Stock Adjustment use the same footer rule. */
  body.mobile-app-body :is(#mobilePoDetails,#mobileTransferDetails,#mobileAdjustmentDetails) .modal-actions {
    justify-content: flex-end !important;
  }
  body.mobile-app-body :is(#mobilePoDetails,#mobileTransferDetails,#mobileAdjustmentDetails) .modal-actions > .btn {
    min-width: 118px !important;
  }

  /* Preserve useful non-button footer content (for example viewer counters)
     on the left while all action buttons stay grouped on the right. */
  body.mobile-app-body .modal-actions > :not(.btn):not(button):not(a) {
    margin-right: auto !important;
  }
}

/* ===== SOURCE: ui-layout-polish-v1648.css ===== */
/* v1.6.48 — Report Centre action alignment + unified Staff Mobile/PWA toolbar.
   Presentation only: no route, filter, calculation, or transaction behaviour changes. */

/* Backend Report Centre: the search field owns the full row; all commands sit
   together at the right edge below it. */
body:not(.mobile-app-body) .report-filter-form{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:7px!important;
}
body:not(.mobile-app-body) .report-filter-form > .field.grow{
  flex:1 1 100%!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
body:not(.mobile-app-body) .report-filter-toolbar-actions{
  display:flex!important;
  flex:1 1 100%!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  margin-left:auto!important;
}

/* Every normalized backend filter drawer uses one deliberate footer row.
   If a very narrow viewport cannot hold three readable controls, the final
   action spans the full second row instead of sitting at half width. */
body:not(.mobile-app-body) .erp-filter-modal-actions,
body:not(.mobile-app-body) .erp-filter-drawer-actions,
body:not(.mobile-app-body) .report-filter-drawer .modal-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:7px!important;
  width:100%!important;
}
body:not(.mobile-app-body) .erp-filter-modal-actions > :is(.btn,button,a.btn),
body:not(.mobile-app-body) .erp-filter-drawer-actions > :is(.btn,button,a.btn),
body:not(.mobile-app-body) .report-filter-drawer .modal-actions > :is(.btn,button,a.btn){
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  justify-content:center!important;
  text-align:center!important;
}
@media(max-width:340px){
  body:not(.mobile-app-body) .erp-filter-modal-actions,
  body:not(.mobile-app-body) .erp-filter-drawer-actions,
  body:not(.mobile-app-body) .report-filter-drawer .modal-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body:not(.mobile-app-body) .erp-filter-modal-actions > :last-child,
  body:not(.mobile-app-body) .erp-filter-drawer-actions > :last-child,
  body:not(.mobile-app-body) .report-filter-drawer .modal-actions > :last-child{grid-column:1/-1!important}
}

/* Staff Mobile/PWA list/search modules: Scan, Refresh, Add New and Filter share
   one equal-width row. Search sits on its own row below, with the narrow info
   button immediately after the search field. */
@media(max-width:800px){
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-module-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
  }
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-module-actions.has-add{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-module-actions > .mobile-primary-action{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:40px!important;
    padding:5px 4px!important;
    margin:0!important;
    justify-content:center!important;
    text-align:center!important;
    font-size:.72rem!important;
    line-height:1.05!important;
    overflow:hidden!important;
  }
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-primary-action.filter{
    background:#eef3fb!important;
    border-color:#b8c9e2!important;
    color:#334e73!important;
  }
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-primary-action.filter .mobile-primary-icon{
    font-size:.9rem!important;
    line-height:1!important;
  }
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-live-search-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 34px!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    margin-top:7px!important;
  }
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-live-search-row .mobile-search-box{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-live-search-row .mobile-toolbar-info{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:34px!important;
    min-height:34px!important;
    margin:0!important;
    align-self:center!important;
  }
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-inline-filter-button{display:none!important}
}

/* v1.6.50 Staff PWA persistent command shell --------------------------------
   Keep the compact page/context header visible, then pin the page's primary
   actions/search immediately below it.  The top offset is measured by the
   lightweight PWA sticky-shell helper so variable header text never overlaps.
   Scope is mobile-app-body only: backend pages are untouched. */
body.mobile-app-body{
  --pwa-sticky-header-height:64px;
  --pwa-sticky-surface:#f8fafc;
}
body.mobile-app-body :is(.mobile-context-strip,.mobile-doc-list-head,.mobile-doc-view-head,.mobile-page-head){
  position:sticky!important;
  top:0!important;
  z-index:92!important;
  background:var(--pwa-sticky-surface)!important;
  transform:none!important;
  will-change:auto!important;
}
body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar,.mobile-list-tools,.mobile-workflow-bar,.mobile-sticky-entry-actions){
  position:sticky!important;
  top:var(--pwa-sticky-header-height,64px)!important;
  z-index:88!important;
  background:var(--pwa-sticky-surface)!important;
  transform:none!important;
  will-change:auto!important;
}
/* The product/transaction Details header and Back button stay in one row on
   phone screens instead of turning Back into a second full-width row. */
body.mobile-app-body .mobile-context-strip{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:nowrap!important;
}
body.mobile-app-body .mobile-context-strip>.mobile-context-button{
  grid-column:1!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  flex:none!important;
}
body.mobile-app-body .mobile-context-strip>.mobile-back-button{
  grid-column:2!important;
  grid-row:1!important;
  width:auto!important;
  min-width:78px!important;
  max-width:none!important;
  margin:0!important;
  justify-self:end!important;
  align-self:stretch!important;
}
body.mobile-app-body .mobile-context-strip>.mobile-context-actions{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:end!important;
  flex-wrap:nowrap!important;
}
/* Staff PWA opened on a desktop/tablet browser must still show the four main
   list actions in one row.  Permission-driven three-button toolbars remain
   three columns. */
body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-module-actions{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-module-actions.has-add{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
@media(max-width:600px){
  body.mobile-app-body .mobile-context-strip>.mobile-back-button{
    min-width:70px!important;
    min-height:40px!important;
    padding:6px 10px!important;
  }
  body.mobile-app-body .mobile-context-strip>.mobile-context-actions{
    gap:5px!important;
  }
}

/* Final PWA toolbar dedupe/phone density.  ui-layout-polish is the last loaded
   stylesheet, so these rules intentionally win over the generic action-filter
   pseudo icon and older PWA sizing layers. */
body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-primary-action.filter.action-filter::before,
body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-primary-action.filter.action-filter::after{
  content:none!important;
  display:none!important;
}
body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-primary-action.filter.action-filter>.erp-btn-icon{
  display:none!important;
}
@media(max-width:600px){
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-module-actions>.mobile-primary-action{
    height:41px!important;
    min-height:41px!important;
    padding:4px 3px!important;
    gap:4px!important;
    font-size:.62rem!important;
    border-radius:10px!important;
  }
  body.mobile-app-body :is(.mobile-list-live-toolbar,.mobile-product-toolbar) .mobile-module-actions>.mobile-primary-action .mobile-primary-icon{
    width:17px!important;
    height:17px!important;
    flex:0 0 17px!important;
  }
}