/* ===== SOURCE: unified-ui.css ===== */
/* Toko ERP Product Sales inspired global UI layer
   Presentation only. Loaded after all module CSS so every desktop module shares
   the same table-first, low-noise workspace without touching routes or data. */

:root{
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fafc;
  --ui-surface-muted:#f3f6fa;
  --ui-line:#dbe3ec;
  --ui-line-strong:#c9d4e1;
  --ui-text:#1f2f43;
  --ui-muted:#6b7a8e;
  --ui-icon:#566579;
  --ui-hover:#f1f5f9;
  --ui-shadow:0 5px 16px rgba(15,23,42,.055);
  --ui-topbar:56px;
  --ui-radius:10px;
  --ui-danger:#b4232c;
  --ui-success:#167849;
  --ui-warning:#a16207;
}

/* App shell: prevent page-level horizontal overflow. Wide data belongs inside
   the table scroller only, matching Product Sales. */
html,body{max-width:100%;overflow-x:hidden}
.app-main,.content{min-width:0;max-width:none!important;width:auto}
.content{padding:11px 14px 18px!important}
.topbar{height:var(--ui-topbar)!important;min-height:var(--ui-topbar);background:#fff!important;border-color:var(--ui-line)!important;box-shadow:0 1px 0 rgba(15,23,42,.02)}
.topbar-title{font-size:.92rem;letter-spacing:-.01em;color:var(--ui-text)}

/* One page title only: the top application header owns the page name. Existing
   in-page title text is retained in the DOM for accessibility/help, but the
   duplicated visual heading is removed by unified-ui.js. */
.erp-page-intro-hidden{display:none!important}
.page-head,.ci-page-head,.page-heading{margin:0 0 7px!important;min-height:34px;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;overflow:visible!important}
.page-head>.actions,.page-head>.top-action-bar,.ci-page-head>.actions,.page-heading>.actions,.erp-page-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;flex-wrap:wrap!important;margin-left:auto!important;overflow:visible!important}

/* Compact neutral action language. Status / danger / approval colours remain
   semantic; ordinary navigation actions are intentionally monochrome. */
.btn{border-radius:8px!important;box-shadow:none!important;min-height:32px;padding:6px 9px;font-size:.76rem;gap:5px}
.btn.ghost,.btn.action-create,.btn.action-new,.btn.action-import,.btn.action-export,.btn.action-more,.btn.action-select,.btn.action-reset,
.btn.action-export-excel,.btn.action-export-pdf,.btn[data-erp-drawer-target],.action-menu>summary.btn{
  background:#fff!important;border:1px solid var(--ui-line-strong)!important;color:#334155!important
}
.btn.ghost:hover,.btn.action-create:hover,.btn.action-new:hover,.btn.action-import:hover,.btn.action-export:hover,.btn.action-more:hover,.btn.action-select:hover,.btn.action-reset:hover,
.btn.action-export-excel:hover,.btn.action-export-pdf:hover,.btn[data-erp-drawer-target]:hover,.action-menu>summary.btn:hover{background:var(--ui-hover)!important;border-color:#aebbc9!important;color:#1f2937!important}
.btn.primary{background:#315f93!important;border-color:#315f93!important;color:#fff!important}
.btn.success,.btn.action-save,.btn.action-apply{background:#eef8f2!important;border:1px solid #b8d9c4!important;color:#24613b!important}
.btn.warning{background:#fff8ea!important;border:1px solid #e5cf9d!important;color:#785719!important}
.btn.danger{background:#fff1f2!important;border:1px solid #efc0c5!important;color:#8c3038!important}

/* New/Create buttons are a single plus everywhere. The original wording is
   preserved in title/aria-label by JS. */
.erp-create-icon-only{width:33px!important;min-width:33px!important;height:33px!important;min-height:33px!important;padding:0!important;border-radius:8px!important;font-size:1.25rem!important;line-height:1!important;font-weight:700!important}
.erp-create-icon-only::before{content:none!important}

/* Small neutral icons for recurring actions. */
.btn.action-import::before{content:'⇧';font-size:.9em;color:var(--ui-icon)}
.btn.action-export::before,.btn.action-export-excel::before,.btn.action-export-pdf::before{content:'⇩';font-size:.9em;color:var(--ui-icon)}
.btn.action-save::before{content:'✓';font-size:.9em}
.btn.action-apply::before{content:'✓';font-size:.9em}
.btn.action-edit::before{content:'✎';font-size:.9em;color:var(--ui-icon)}
.btn.action-reset::before{content:'↺';font-size:.9em;color:var(--ui-icon)}
.btn.action-more::before,.action-menu>summary.action-more::before{content:'⋯';font-size:1em;color:var(--ui-icon)}
.btn[data-erp-drawer-target]::before{content:'☷';font-size:.88em;color:var(--ui-icon)}
/* Reusable filter action icon for modal/mobile/report filter buttons too. */
.action-filter::before{
  content:"";display:inline-block;width:13px;height:13px;flex:0 0 13px;background:currentColor;
  clip-path:polygon(0 0,100% 0,62% 43%,62% 82%,38% 100%,38% 43%);opacity:.82;font-size:0
}
/* Filter drawers use one funnel icon consistently across the application. */
.btn[data-erp-drawer-target*="Filter"]::before,.btn[data-erp-drawer-target*="filter"]::before{
  content:"";display:inline-block;width:13px;height:13px;flex:0 0 13px;background:currentColor;color:inherit;
  clip-path:polygon(0 0,100% 0,62% 43%,62% 82%,38% 100%,38% 43%);opacity:.82;font-size:0
}
.btn.erp-column-button::before{content:'▥';font-size:.88em;color:var(--ui-icon)}

/* Info is a corner utility, not another page title. */
.erp-info-icon,.erp-ui-help-button{display:inline-grid!important;place-items:center!important;width:30px;height:30px;min-width:30px;padding:0!important;border:1px solid var(--ui-line-strong)!important;border-radius:8px!important;background:#fff!important;color:var(--ui-icon)!important;font-size:.78rem!important;font-weight:850!important;cursor:pointer}
.erp-info-icon:hover,.erp-ui-help-button:hover{background:var(--ui-hover)!important}
.erp-ui-help-popover{position:fixed;z-index:22000;width:min(340px,calc(100vw - 24px));padding:10px 12px;border:1px solid var(--ui-line);border-radius:10px;background:#fff;color:#415166;font-size:.76rem;line-height:1.45;box-shadow:0 18px 45px rgba(15,23,42,.18)}

/* Product-Sales-style filter/search workspace used across list modules. */
.erp-unified-filterbar,.toolbar.erp-search-only-toolbar,.ci-campaign-listbar{
  position:sticky!important;top:var(--ui-topbar)!important;z-index:410!important;display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;
  padding:7px 9px!important;background:rgba(255,255,255,.985)!important;backdrop-filter:blur(9px);border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius) var(--ui-radius) 0 0!important;box-shadow:0 5px 13px rgba(15,23,42,.045)!important
}
.erp-unified-filterbar>.erp-unified-search,.toolbar.erp-search-only-toolbar>.field{flex:1 1 360px!important;min-width:220px!important;max-width:680px!important}
.erp-unified-filterbar>.erp-unified-search label,.toolbar.erp-search-only-toolbar>.field>label{display:none!important}
.erp-unified-filterbar .input,.toolbar.erp-search-only-toolbar .input,.erp-search-box input,.ci-table-search{height:34px!important;min-height:34px!important;padding:6px 9px!important;border-radius:8px!important;border-color:var(--ui-line-strong)!important;background:#fff!important}
.erp-filterbar-actions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:5px!important}
.erp-filter-count{background:#eef2f6!important;color:#596779!important;border:1px solid #d8e0e8!important;min-width:18px;height:18px;padding:0 5px}
.erp-active-filter-chips{padding:4px 9px 6px!important;background:#fff!important;border:1px solid var(--ui-line)!important;border-top:0!important;gap:5px!important}
.erp-filter-chip{padding:3px 7px!important;background:#f7f9fb!important;border-color:#dbe3eb!important;color:#536174!important;font-size:.66rem!important}

/* Drawers and menus always float above table/panel clipping. */
.erp-drawer-backdrop{position:fixed!important;inset:0!important;z-index:18000!important;background:rgba(15,23,42,.20)!important;overflow:visible!important}
.erp-drawer-backdrop[hidden]{display:none!important}
.erp-side-drawer{position:absolute!important;top:0!important;right:0!important;height:100dvh!important;width:min(390px,94vw)!important;max-width:94vw!important;background:#fff!important;overflow:auto!important;border-left:1px solid var(--ui-line)!important;box-shadow:-18px 0 44px rgba(15,23,42,.16)!important}
.erp-drawer-head{position:sticky!important;top:0!important;z-index:3!important;background:#fff!important;padding:11px 13px!important;border-bottom:1px solid var(--ui-line)!important}
.erp-drawer-head h2{font-size:.94rem!important;margin:0!important}.erp-drawer-head p{font-size:.7rem!important;margin:2px 0 0!important;color:var(--ui-muted)!important}
.action-menu{position:relative!important;overflow:visible!important}.action-menu[open]{z-index:19000!important}
.action-menu-pop{z-index:19010!important;min-width:190px!important;padding:5px!important;border:1px solid var(--ui-line)!important;border-radius:9px!important;background:#fff!important;box-shadow:0 18px 40px rgba(15,23,42,.18)!important}
.action-menu-pop a,.action-menu-pop button{min-height:32px!important;padding:6px 8px!important;border-radius:6px!important;background:#fff!important;color:#334155!important;font-size:.75rem!important}
.action-menu-pop a:hover,.action-menu-pop button:hover{background:var(--ui-hover)!important}

/* Panels, cards and dashboards use the same restrained Product Sales visual
   language. */
.panel{border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important;margin-bottom:8px!important;background:#fff!important;min-width:0}
.panel-head{min-height:40px!important;padding:8px 10px!important;border-color:var(--ui-line)!important;background:#fff!important;overflow:visible!important}
.panel-head h2{font-size:.88rem!important}.panel-head p{font-size:.68rem!important;color:var(--ui-muted)!important}
.panel-body{padding:9px 10px!important}
.metrics,.ci-kpis,.ci-kpis.compact,.ci-product-sales-kpis,.erp-kpi-strip{gap:7px!important;margin-bottom:8px!important}
.metric,.ci-kpi,.erp-kpi{padding:9px 10px!important;border:1px solid var(--ui-line)!important;border-radius:9px!important;box-shadow:none!important;min-height:0!important;background:#fff}
.metric .value,.ci-kpi strong,.erp-kpi strong{font-size:1.12rem!important;margin-top:2px!important}
.metric .label,.ci-kpi span,.erp-kpi span{font-size:.68rem!important}.metric .hint,.ci-kpi small,.erp-kpi small{font-size:.65rem!important;line-height:1.25!important}

/* Table-first workspace: only the table body scrolls. Search/filters, active
   chips, selection tools and pagination stay above it. */
.erp-global-table-workspace{overflow:visible!important;min-width:0!important}
.erp-global-table-workspace>.table-wrap,.erp-global-table-scroll{max-height:calc(100dvh - 250px)!important;min-height:170px;overflow:auto!important;overscroll-behavior:contain;scrollbar-width:thin;background:#fff}
.erp-global-table-workspace .data-table th,.erp-global-table-scroll .data-table th{position:sticky!important;top:0!important;z-index:8!important;background:#eaf1f7!important}
.data-table{width:100%!important;max-width:none!important}.data-table th{padding:7px 8px!important;font-size:.64rem!important}.data-table td{padding:7px 8px!important}
.data-table[data-density='comfortable'] th,.data-table[data-density='comfortable'] td{padding:7px 8px!important}

/* Generic local table commandbar, visually matching Product Sales. */
.table-tools,.erp-table-commandbar,.erp-sticky-table-toolbar,.report-table-toolbar{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:7px!important;flex-wrap:wrap!important;padding:6px 9px!important;background:#fff!important;border-bottom:1px solid var(--ui-line)!important;min-height:38px!important
}
.table-tools{position:relative!important;z-index:20!important}
.compact-search,.erp-search-box{display:flex!important;align-items:center!important;gap:6px!important;flex:1 1 260px!important;min-width:190px!important;max-width:520px!important}
.compact-search>span,.erp-search-box>span{color:var(--ui-icon)!important}
.table-tool-actions,.erp-command-actions,.ci-actions{display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:wrap!important}
.table-live-summary,.ci-selection-count,.ci-export-count{font-size:.66rem!important;color:var(--ui-muted)!important}
.table-tools.erp-tools-empty{display:none!important}

/* Pagination is the single home for Rows, Page and Columns. */
.pager,.erp-table-pager{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:6px 9px!important;min-height:38px!important;color:var(--ui-muted)!important;background:#fff!important;border-top:0!important;font-size:.72rem!important}
.erp-pager-controls{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.erp-column-slot{display:inline-flex;align-items:center}
.erp-column-slot:empty{display:none}
.erp-column-slot .btn{min-height:31px!important;padding:5px 8px!important}
.erp-pager-size{display:flex!important;align-items:center!important;gap:5px!important;white-space:nowrap!important}
.erp-pager-size .input,.erp-page-size{width:auto!important;min-width:58px!important;min-height:31px!important;height:31px!important;padding:4px 22px 4px 7px!important}
.erp-pager-nav{display:flex;align-items:center;gap:5px}.erp-pager-arrow{width:29px!important;height:29px!important;display:grid!important;place-items:center!important;border:1px solid var(--ui-line)!important;border-radius:7px!important;background:#fff!important;color:#475569!important}.erp-pager-arrow.disabled{opacity:.38}

/* Selection rows remain contextual and small. */
.erp-table-selection.erp-selection-empty{display:none!important}.erp-context-selection{padding:4px 7px!important;margin:4px 8px!important;background:#f4f8fc!important;border:1px solid #d8e4ef!important;border-radius:7px!important}

/* Transaction editors: same surface rhythm as Product Sales while preserving
   original form ids, fields, workflow and backend semantics. */
form.erp-transaction-workspace{gap:7px!important}
form.erp-transaction-workspace>.panel,form.erp-transaction-workspace>details.panel{margin:0!important}
form.erp-transaction-workspace .panel-head{min-height:39px!important;padding:8px 10px!important}
form.erp-transaction-workspace .panel-body{padding:9px 10px!important}
form.erp-transaction-workspace .form-grid{gap:8px!important}
form.erp-transaction-workspace .field{gap:3px!important}form.erp-transaction-workspace .field label{font-size:.66rem!important}
form.erp-transaction-workspace .input{min-height:34px!important;padding:6px 8px!important}form.erp-transaction-workspace textarea.input{min-height:54px!important}
form.erp-transaction-workspace .table-wrap{max-height:calc(100dvh - 265px)!important}

/* Inline long explanatory text is secondary. Existing JS exposes page/panel
   explanations through info buttons; keep the main workspace visually quiet. */
.erp-auto-help-source,.erp-panel-help-source{display:none!important}
.small.muted,.muted.small{line-height:1.3}

/* Mobile keeps its purpose-built touch UI. Only shared colour/overflow safety
   applies; desktop table-workspace rules do not force mobile layouts. */
@media(max-width:800px){
  .content{padding:8px!important}.page-head,.ci-page-head,.page-heading{min-height:30px!important}
  .erp-global-table-workspace>.table-wrap,.erp-global-table-scroll{max-height:68dvh!important}
  .erp-unified-filterbar,.toolbar.erp-search-only-toolbar,.ci-campaign-listbar{top:var(--ui-topbar)!important}
  .erp-unified-filterbar>.erp-unified-search,.toolbar.erp-search-only-toolbar>.field{flex-basis:100%!important;max-width:none!important}
  .erp-filterbar-actions{width:100%;justify-content:flex-end!important}
  .erp-pager-controls{width:100%;justify-content:flex-end}
  .erp-side-drawer{width:100vw!important;max-width:100vw!important}
}


/* V91 filter drawer refinement: flat drawer, full-width controls and actions. */
.erp-drawer-backdrop{
  background:transparent!important;
  backdrop-filter:none!important;
}
.erp-side-drawer{
  box-shadow:none!important;
}
.erp-filter-drawer-body{
  width:100%!important;
  padding:12px 14px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:10px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.erp-filter-drawer-body>.field{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
}
.erp-filter-drawer-body>.field .input,
.erp-filter-drawer-body>.field select,
.erp-filter-drawer-body>.field input,
.erp-filter-drawer-body>.field .multi-filter,
.erp-filter-drawer-body>.field .multi-filter-button{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.erp-filter-drawer-actions{
  position:sticky!important;
  bottom:0!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
  padding:12px 0 0!important;
  margin:2px 0 0!important;
  background:#fff!important;
  border:0!important;
  box-shadow:none!important;
}
.erp-filter-drawer-actions .btn{
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  padding:9px 12px!important;
  box-shadow:none!important;
}
.erp-unified-filterbar{
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* UI5 — unified filter/action row + overlap fixes ---------------- */
:root{
  --ui-blue-soft:#eef6ff;--ui-blue-line:#c7dff5;--ui-blue-text:#315f8f;
  --ui-mint-soft:#eef8f3;--ui-mint-line:#c7dfd1;--ui-mint-text:#37664b;
  --ui-amber-soft:#fff8ea;--ui-amber-line:#ead9ae;--ui-amber-text:#755b24;
  --ui-purple-soft:#f6f1fa;--ui-purple-line:#ddd0e7;--ui-purple-text:#665078;
  --ui-neutral-soft:#f5f7fa;--ui-neutral-line:#d9e0e8;--ui-neutral-text:#4b596a;
}

/* Search/filter rows are part of the fixed workspace above the scrolling table.
   They do not need viewport sticky positioning; removing it avoids overlap on
   PO, GRN, returns, barcode, users, activity and other list pages. */
.erp-unified-filterbar,.toolbar.erp-search-only-toolbar,.ci-campaign-listbar{
  position:relative!important;top:auto!important;z-index:35!important;
  backdrop-filter:none!important;box-shadow:none!important;
}
.erp-filter-host-panel{overflow:visible!important}
.erp-page-head-empty{display:none!important}

/* Page actions join the search/filter command row when that row exists. */
.erp-filterbar-actions,.erp-command-actions,.ci-actions{
  overflow:visible!important;flex-wrap:wrap!important
}
.erp-filterbar-actions .erp-ui-help-button,.erp-command-actions .erp-ui-help-button,.ci-actions .erp-ui-help-button{
  order:99
}

/* Light, calm action palette. Colour distinguishes intent without becoming loud. */
.btn.primary,.erp-create-icon-only,.erp-action-blue{
  background:var(--ui-blue-soft)!important;border-color:var(--ui-blue-line)!important;color:var(--ui-blue-text)!important
}
.btn.primary:hover,.erp-create-icon-only:hover,.erp-action-blue:hover{background:#e4f0fb!important;border-color:#b6d3ee!important;color:#284f79!important}
.erp-action-import,.btn.action-import{background:var(--ui-mint-soft)!important;border-color:var(--ui-mint-line)!important;color:var(--ui-mint-text)!important}
.erp-action-export,.btn.action-export,.btn.action-export-excel,.btn.action-export-pdf{background:var(--ui-amber-soft)!important;border-color:var(--ui-amber-line)!important;color:var(--ui-amber-text)!important}
.erp-action-purple,.btn.action-more,.action-menu>summary.action-more{background:var(--ui-purple-soft)!important;border-color:var(--ui-purple-line)!important;color:var(--ui-purple-text)!important}
.erp-action-neutral,.btn.ghost,.btn[data-erp-drawer-target],.erp-info-icon,.erp-ui-help-button{background:var(--ui-neutral-soft)!important;border-color:var(--ui-neutral-line)!important;color:var(--ui-neutral-text)!important}
.btn.success,.btn.action-save,.btn.action-apply,.erp-action-success{background:#edf8f1!important;border-color:#c4dfcd!important;color:#356448!important}
.btn.warning{background:#fff8e9!important;border-color:#ead8a8!important;color:#735820!important}
.btn.danger{background:#fff1f2!important;border-color:#ecc8cc!important;color:#87424a!important}

/* Keep one clean search affordance. Chrome/Safari built-in search decorations
   and old explicit glyphs are hidden so Commercial/Sales/Campaign search boxes
   do not show repeated magnifier icons on focus. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{display:none!important;-webkit-appearance:none!important}
.erp-search-box>span{display:none!important}
.erp-search-box{position:relative!important}
.erp-search-box .erp-search-input,.ci-table-search.erp-search-input{padding-left:36px!important}

/* Drawers are viewport utilities, not children of a card. They remain above all
   invoice/table content and never clip at a panel boundary. */
.erp-drawer-backdrop{position:fixed!important;inset:0!important;z-index:18000!important;overflow:visible!important}
.erp-side-drawer{position:fixed!important;top:0!important;right:0!important;bottom:0!important;height:100dvh!important;z-index:18010!important}

/* Keep the scrolling region inside the table only. */
.erp-global-table-workspace>.table-wrap,.erp-global-table-scroll{position:relative!important;z-index:1!important}

@media(max-width:800px){
  .erp-unified-filterbar,.toolbar.erp-search-only-toolbar,.ci-campaign-listbar{top:auto!important}
}

/* V-91: Commercial navigation/actions share one compact row. */
.commercial-nav-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 8px;min-width:0}
.commercial-nav-main{min-width:0;flex:1 1 auto}
.commercial-nav-row .commercial-group-nav{margin:0!important}
.commercial-nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto;margin-left:auto}
.commercial-nav-actions .btn,.commercial-nav-actions .erp-info-icon,.commercial-nav-actions .ci-info-icon{min-height:32px;height:32px}
.commercial-nav-actions .erp-create-icon-only{width:34px;min-width:34px;padding:0!important;font-size:1.15rem!important;justify-content:center}
.commercial-nav-actions .erp-info-icon,.commercial-nav-actions .ci-info-icon{width:32px;min-width:32px;padding:0;display:inline-grid;place-items:center}

/* Reports: keep Filters and Export / Share together in the main filter bar. */
.report-filter-form{align-items:end!important}
.report-filter-form>.report-selected-inline{align-self:center;white-space:nowrap;color:#64748b;font-size:.72rem;padding:0 2px}
.report-filter-form>.action-menu{align-self:end;position:relative}
.report-filter-form>.action-menu>summary{white-space:nowrap}
.report-filter-form .action-menu-pop{z-index:1800}

@media(max-width:900px){
  .commercial-nav-row{align-items:flex-start}
  .commercial-nav-main{flex-basis:100%}
  .commercial-nav-actions{width:100%;justify-content:flex-end;margin-left:0}
}

/* V-91: compact action/search rows + drawer list alignment ---------------- */
/* When a page already has a Search toolbar, page-level actions share that row.
   This removes the otherwise-empty strip between the topbar and the table/KPI. */
.toolbar.erp-search-only-toolbar,
.toolbar.erp-unified-filterbar{
  min-width:0!important;
}
.toolbar.erp-search-only-toolbar>.erp-filterbar-actions,
.toolbar.erp-unified-filterbar>.erp-filterbar-actions{
  margin-left:auto!important;
  flex:0 0 auto!important;
}
.erp-inline-page-actions{display:flex!important;align-items:center!important;gap:5px!important;overflow:visible!important}
.page-head.erp-page-head-empty,.ci-page-head.erp-page-head-empty,.page-heading.erp-page-head-empty{display:none!important;margin:0!important;padding:0!important;min-height:0!important;height:0!important}

/* Side-drawer multi-selects use the drawer width. Lists grow naturally and
   start scrolling only when viewport height would otherwise be exceeded. */
.erp-side-drawer .multi-filter,
.erp-side-drawer .ci-multi{width:100%!important;max-width:none!important;min-width:0!important}
.erp-side-drawer .multi-filter-panel,
.erp-side-drawer .ci-multi-pop{
  position:static!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-top:5px!important;
  box-sizing:border-box!important;
  box-shadow:none!important;
}
.erp-side-drawer .multi-filter-options,
.erp-side-drawer .ci-multi-list{
  height:auto!important;
  max-height:min(360px,calc(100dvh - 300px))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin;
}
.erp-side-drawer .multi-filter-option,
.erp-side-drawer .ci-multi-list label{
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  align-items:start!important;
  justify-content:start!important;
  column-gap:8px!important;
  width:100%!important;
  min-width:0!important;
  padding:7px 5px!important;
  text-align:left!important;
  box-sizing:border-box!important;
}
.erp-side-drawer .multi-filter-option input[type='checkbox'],
.erp-side-drawer .ci-multi-list input[type='checkbox']{
  width:15px!important;
  min-width:15px!important;
  height:15px!important;
  min-height:15px!important;
  margin:1px 0 0!important;
  padding:0!important;
  justify-self:start!important;
  align-self:start!important;
}
.erp-side-drawer .multi-filter-option span,
.erp-side-drawer .ci-multi-list label span{
  display:block!important;
  min-width:0!important;
  width:auto!important;
  margin:0!important;
  text-align:left!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.3!important;
}

/* Commercial Intelligence: nav and page utilities share one single compact
   row. No dead header band is left between navigation and report content. */
.ci-shell>.commercial-nav-row:first-child{margin-bottom:6px!important}
.commercial-nav-actions .ci-view-switch{display:flex!important;align-items:center!important;gap:5px!important;width:auto!important}
.commercial-nav-actions .ci-view-switch .btn{flex:0 0 auto!important}

/* Target Performance intentionally keeps two column tools: the report-specific
   chooser beside the showing range on the left, generic table columns on right. */
.erp-pager-left{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;flex-wrap:wrap!important}
.erp-pager-left .erp-column-button{min-height:31px!important;padding:5px 8px!important}

@media(max-width:800px){
  .toolbar.erp-search-only-toolbar>.erp-filterbar-actions,
  .toolbar.erp-unified-filterbar>.erp-filterbar-actions{width:auto!important;margin-left:auto!important;justify-content:flex-end!important}
  .erp-side-drawer .multi-filter-options,.erp-side-drawer .ci-multi-list{max-height:min(300px,calc(100dvh - 250px))!important}
}

/* page-head compaction, inline actions, drawer alignment ------- */
.page-head>.actions:empty,
.page-head>.top-action-bar:empty,
.page-head>.erp-page-actions:empty,
.ci-page-head>.actions:empty,
.ci-page-head>.top-action-bar:empty,
.ci-page-head>.erp-page-actions:empty,
.page-heading>.actions:empty,
.page-heading>.top-action-bar:empty,
.page-heading>.erp-page-actions:empty{display:none!important}

.toolbar.compact-filter-bar,
.toolbar.erp-search-only-toolbar,
.toolbar.erp-unified-filterbar{
  align-items:center!important;
  row-gap:8px!important;
}
.toolbar.compact-filter-bar>.field.grow,
.toolbar.erp-search-only-toolbar>.field.grow,
.toolbar.erp-unified-filterbar>.field.grow{
  flex:1 1 340px!important;
  min-width:260px!important;
}
.toolbar.compact-filter-bar>.erp-filterbar-actions,
.toolbar.erp-search-only-toolbar>.erp-filterbar-actions,
.toolbar.erp-unified-filterbar>.erp-filterbar-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
.toolbar.compact-filter-bar>.erp-filterbar-actions .btn,
.toolbar.erp-search-only-toolbar>.erp-filterbar-actions .btn,
.toolbar.erp-unified-filterbar>.erp-filterbar-actions .btn{
  min-height:32px!important;
}

.panel-head.erp-table-commandbar,
.table-tools,
.report-table-toolbar{
  align-items:flex-start!important;
  row-gap:8px!important;
  min-height:auto!important;
}
.panel-head.erp-table-commandbar>div,
.table-tools>div,
.report-table-toolbar>div{min-width:0!important}
.panel-head.erp-table-commandbar .erp-command-actions,
.panel-head.erp-table-commandbar .ci-actions,
.panel-head.erp-table-commandbar .actions,
.table-tools .table-tool-actions,
.report-table-toolbar .actions{
  margin-left:auto!important;
  flex:1 1 320px!important;
  justify-content:flex-end!important;
  min-width:min(100%,260px)!important;
}
.panel-head.erp-table-commandbar .erp-search-box,
.table-tools .compact-search,
.report-table-toolbar .erp-search-box{
  flex:1 1 280px!important;
  width:min(100%,420px)!important;
  max-width:100%!important;
}
.panel-head.erp-table-commandbar .erp-search-box .erp-search-input,
.table-tools .compact-search .erp-search-input,
.report-table-toolbar .erp-search-box .erp-search-input{
  min-width:0!important;
}

.erp-side-drawer .multi-filter-options,
.erp-side-drawer .ci-multi-list,
.erp-side-drawer .ci-check-list{padding-left:0!important}
.erp-side-drawer .multi-filter-option,
.erp-side-drawer .ci-multi-list label,
.erp-side-drawer .ci-check-list label{
  justify-content:flex-start!important;
  align-items:flex-start!important;
  text-align:left!important;
}
.erp-side-drawer .multi-filter-option input[type='checkbox'],
.erp-side-drawer .ci-multi-list input[type='checkbox'],
.erp-side-drawer .ci-check-list input[type='checkbox']{
  margin:2px 0 0 0!important;
  align-self:flex-start!important;
}
.erp-side-drawer .multi-filter-option span,
.erp-side-drawer .ci-multi-list label span,
.erp-side-drawer .ci-check-list label span,
.erp-side-drawer .ci-multi-list label small,
.erp-side-drawer .ci-check-list label small{
  margin-left:0!important;
  text-align:left!important;
  justify-self:start!important;
}
@media(max-width:900px){
  .toolbar.compact-filter-bar>.field.grow,
  .toolbar.erp-search-only-toolbar>.field.grow,
  .toolbar.erp-unified-filterbar>.field.grow,
  .panel-head.erp-table-commandbar .erp-command-actions,
  .panel-head.erp-table-commandbar .ci-actions,
  .panel-head.erp-table-commandbar .actions,
  .table-tools .table-tool-actions,
  .report-table-toolbar .actions{flex-basis:100%!important;min-width:0!important}
  .panel-head.erp-table-commandbar .erp-search-box,
  .table-tools .compact-search,
  .report-table-toolbar .erp-search-box{width:100%!important}
}


/* V-91 hotfixes --------------------------------------------------------- */
/* Search inputs must stay clean on focus. Some Chromium builds were painting
   repeated search decorations inside CI/table search fields. Use plain inputs. */
.erp-search-input,
.ci-table-search,
.ci-search-input,
input[type='search']{
  background-image:none!important;
  background-repeat:no-repeat!important;
  background-position:0 0!important;
  padding-left:11px!important;
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration,
input[type='search']::-webkit-search-results-icon,
input[type='search']::-webkit-search-cancel-button:after{display:none!important;-webkit-appearance:none!important;appearance:none!important}

/* Generated fallback panel toolbars let pages without a native search row keep
   their action buttons without leaving an empty band under the top bar. */
.erp-panel-inline-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  padding:8px 10px!important;
}
.erp-panel-inline-toolbar .erp-panel-inline-title{flex:1 1 auto;min-width:0}
.erp-panel-inline-toolbar .erp-panel-inline-actions,
.panel-head .erp-panel-inline-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  margin-left:auto!important;
}

/* Search/action bars should never overlap the next table tools row. */
.panel-head.erp-table-commandbar,
.erp-panel-inline-toolbar{margin-bottom:0!important}
.panel-head.erp-table-commandbar + .table-tools,
.panel-head.erp-table-commandbar + .table-wrap,
.erp-panel-inline-toolbar + .table-wrap,
.erp-panel-inline-toolbar + .table-tools{
  margin-top:0!important;
}

/* Filter / checkbox labels align from the left inside drawer and popovers. */
.multi-filter-panel .multi-filter-option,
.ci-multi-pop .ci-multi-list label,
.erp-side-drawer .ci-check-list label{
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  align-items:start!important;
  justify-content:start!important;
  column-gap:8px!important;
  text-align:left!important;
}
.multi-filter-panel .multi-filter-option input[type='checkbox'],
.ci-multi-pop .ci-multi-list label input[type='checkbox'],
.erp-side-drawer .ci-check-list label input[type='checkbox']{
  margin:2px 0 0 0!important;
  justify-self:start!important;
  align-self:start!important;
}
.multi-filter-panel .multi-filter-option span,
.ci-multi-pop .ci-multi-list label span,
.erp-side-drawer .ci-check-list label span,
.ci-multi-pop .ci-multi-list label small,
.erp-side-drawer .ci-check-list label small{
  text-align:left!important;
  margin:0!important;
}

/* Compact the generated filter/search row so list pages no longer keep a dead
   empty band between the title/topbar and the actual controls. */
.toolbar.compact-filter-bar,
.toolbar.dense-filters,
.toolbar.erp-search-only-toolbar,
.toolbar.erp-unified-filterbar{
  margin-top:0!important;
}

/* V-91 toolbar button sizing/alignment ---------------------------------- */
:root{--erp-toolbar-control-height:36px}

/* All controls sharing a search/filter/action row use one visual height. */
.toolbar.compact-filter-bar,
.toolbar.dense-filters,
.toolbar.erp-search-only-toolbar,
.toolbar.erp-unified-filterbar,
.erp-filterbar-actions,
.erp-inline-page-actions,
.erp-command-actions,
.ci-actions,
.erp-panel-inline-actions{
  align-items:center!important;
}

.toolbar.compact-filter-bar > .btn,
.toolbar.compact-filter-bar > a.btn,
.toolbar.compact-filter-bar > button,
.toolbar.compact-filter-bar > details.action-menu > summary.btn,
.toolbar.dense-filters > .btn,
.toolbar.dense-filters > a.btn,
.toolbar.dense-filters > button,
.toolbar.dense-filters > details.action-menu > summary.btn,
.toolbar.erp-search-only-toolbar > .btn,
.toolbar.erp-search-only-toolbar > a.btn,
.toolbar.erp-search-only-toolbar > button,
.toolbar.erp-search-only-toolbar > details.action-menu > summary.btn,
.toolbar.erp-unified-filterbar > .btn,
.toolbar.erp-unified-filterbar > a.btn,
.toolbar.erp-unified-filterbar > button,
.toolbar.erp-unified-filterbar > details.action-menu > summary.btn,
.erp-filterbar-actions > .btn,
.erp-filterbar-actions > a.btn,
.erp-filterbar-actions > button,
.erp-filterbar-actions > details.action-menu > summary.btn,
.erp-command-actions > .btn,
.erp-command-actions > a.btn,
.erp-command-actions > button,
.erp-command-actions > details.action-menu > summary.btn,
.ci-actions > .btn,
.ci-actions > a.btn,
.ci-actions > button,
.ci-actions > details.action-menu > summary.btn,
.erp-panel-inline-actions > .btn,
.erp-panel-inline-actions > a.btn,
.erp-panel-inline-actions > button,
.erp-panel-inline-actions > details.action-menu > summary.btn{
  height:var(--erp-toolbar-control-height)!important;
  min-height:var(--erp-toolbar-control-height)!important;
  padding-top:0!important;
  padding-bottom:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  vertical-align:middle!important;
  margin-top:0!important;
  margin-bottom:0!important;
}

/* Icon-only controls remain square, but share the same height/baseline. */
.erp-create-icon-only,
.erp-ui-help-button,
.erp-info-icon,
.erp-title-info,
.erp-filterbar-actions > .icon-btn,
.erp-command-actions > .icon-btn,
.ci-actions > .icon-btn,
.erp-panel-inline-actions > .icon-btn{
  width:var(--erp-toolbar-control-height)!important;
  min-width:var(--erp-toolbar-control-height)!important;
  height:var(--erp-toolbar-control-height)!important;
  min-height:var(--erp-toolbar-control-height)!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  line-height:1!important;
}

/* Details wrappers themselves must not add a different baseline/height. */
.erp-filterbar-actions > details.action-menu,
.erp-command-actions > details.action-menu,
.ci-actions > details.action-menu,
.erp-panel-inline-actions > details.action-menu,
.toolbar > details.action-menu{
  display:inline-flex!important;
  align-items:center!important;
  height:var(--erp-toolbar-control-height)!important;
  margin:0!important;
}

/* Search input matches the same control height for a clean single row. */
.toolbar.compact-filter-bar .input,
.toolbar.dense-filters .input,
.toolbar.erp-search-only-toolbar .input,
.toolbar.erp-unified-filterbar .input,
.erp-search-box input,
.ci-table-search{
  height:var(--erp-toolbar-control-height)!important;
  min-height:var(--erp-toolbar-control-height)!important;
}

/* V-91 unified search icon + zero dead page-head space ------------------ */
.erp-search-control{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  flex:1 1 auto!important;
}
.erp-search-control-icon{
  position:absolute!important;
  left:11px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:2!important;
  pointer-events:none!important;
  color:#718096!important;
  font-size:15px!important;
  line-height:1!important;
  width:16px!important;
  text-align:center!important;
}
.erp-search-control .erp-search-decorated-input{
  width:100%!important;
  padding-left:36px!important;
  background-image:none!important;
}
.erp-search-control .erp-search-decorated-input:focus{
  padding-left:36px!important;
  background-image:none!important;
}
.erp-search-box>.erp-search-control{max-width:none!important}
.erp-search-box>.erp-search-control+.erp-search-control-icon{display:none!important}

.page-head.erp-page-head-empty,
.ci-page-head.erp-page-head-empty,
.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;
}

/* A transaction form should start at its first real panel, with Back/info
   living in that panel header instead of consuming an empty band above it. */
form.erp-transaction-workspace>.panel:first-of-type>.panel-head,
form#transferForm>.panel:first-of-type>.panel-head,
form#poForm>.panel:first-of-type>.panel-head,
form#adjustmentForm>.panel:first-of-type>.panel-head,
form#disposalForm>.panel:first-of-type>.panel-head,
form#returnForm>.panel:first-of-type>.panel-head{
  align-items:center!important;
}
.erp-panel-inline-actions{margin-left:auto!important;display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}

/* V-91 invoice/filter drawer refinements -------------------------------- */
.erp-unified-filterbar>.erp-unified-search,
.toolbar.erp-search-only-toolbar>.field,
.invoice-finance-filters .invoice-finance-search{
  flex:1 1 auto!important;
  max-width:none!important;
  min-width:260px!important;
}
.erp-unified-filterbar>.erp-filterbar-actions,
.toolbar.erp-search-only-toolbar>.erp-filterbar-actions,
.invoice-finance-filters>.erp-filterbar-actions{
  margin-left:auto!important;
  justify-content:flex-end!important;
  flex:0 0 auto!important;
}

/* In drawer multi-selects, do not force a short 300/360px list. JS sizes the
   option list to the actual remaining viewport and only enables scrolling when
   the complete list cannot fit. */
.erp-side-drawer .multi-filter-options{
  max-height:none!important;
  overflow-y:visible!important;
}

@media(max-width:800px){
  .erp-unified-filterbar>.erp-unified-search,
  .toolbar.erp-search-only-toolbar>.field,
  .invoice-finance-filters .invoice-finance-search{min-width:0!important;flex-basis:100%!important}
  .erp-side-drawer .multi-filter-options{max-height:none!important}
}

/* V-91 Location Items & Replenishment header alignment ---------------- */
.smart-replenishment-head{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.smart-replenishment-title{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex:1 1 420px!important;
  min-width:0!important;
  flex-wrap:wrap!important;
}
.smart-replenishment-title h2{margin:0!important}
.smart-replenishment-title>p{
  flex:1 1 100%!important;
  margin:0!important;
}
.smart-demand-inline{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
}
.smart-demand-label{
  font-size:.72rem!important;
  font-weight:800!important;
  color:var(--ui-muted,#64748b)!important;
  white-space:nowrap!important;
}
.smart-demand-inline .input{
  width:116px!important;
  min-width:116px!important;
  height:34px!important;
  min-height:34px!important;
  padding:6px 28px 6px 9px!important;
}
.smart-replenishment-actions{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-left:auto!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
}
@media(max-width:900px){
  .smart-replenishment-title{flex-basis:100%!important}
  .smart-replenishment-actions{width:100%!important;margin-left:0!important;justify-content:flex-start!important}
}

/* V-91 — one global search pattern ------------------------------------- */
.erp-search-label-hidden{display:none!important}
.erp-search-field{position:relative!important}
.erp-global-search-shell{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  flex:1 1 auto!important;
}
.erp-global-search-shell>.erp-search-leading-icon{
  position:absolute!important;
  left:11px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:16px!important;
  height:16px!important;
  display:grid!important;
  place-items:center!important;
  color:#65758a!important;
  pointer-events:none!important;
  z-index:2!important;
}
.erp-global-search-shell>.erp-search-leading-icon svg{
  width:16px!important;
  height:16px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.erp-global-search-shell>.erp-global-search-input{
  width:100%!important;
  min-width:0!important;
  padding-left:36px!important;
  background-image:none!important;
  background-repeat:no-repeat!important;
}
.erp-global-search-input::-webkit-search-decoration,
.erp-global-search-input::-webkit-search-cancel-button,
.erp-global-search-input::-webkit-search-results-button,
.erp-global-search-input::-webkit-search-results-decoration{display:none!important;-webkit-appearance:none!important}


/* V-91 — compact global vertical rhythm + larger Product KPIs ---------- */
.erp-layout-strip-empty{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important}
.content>.page-head.erp-page-head-empty,
.content>.ci-page-head.erp-page-head-empty,
.content>.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}

/* Pages that only had an invisible/relocated heading should start at their
   first useful module element without a dead gray band. */
.content{padding-top:7px!important}
.content>.panel:first-of-type,
.content>section.panel:first-of-type,
.content>.product-overview-line:first-of-type,
.content>.commercial-nav-row:first-of-type,
.content>.report-centre-shell:first-of-type,
.content>form.erp-transaction-workspace:first-of-type{margin-top:0!important}
.content>.panel+.panel,
.content>section.panel+section.panel{margin-top:0!important}
.panel{margin-bottom:7px!important}

/* Product Master KPI strip: use the existing four data spans as real KPI cards
   without changing any calculation or backend value. */
.product-overview-line{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  padding:0!important;
  margin:0 0 8px!important;
  background:transparent!important;
  border:0!important;
  min-height:0!important;
}
.product-overview-line>span{
  min-width:0!important;
  white-space:normal!important;
  border:1px solid #d7e2ee!important;
  border-radius:11px!important;
  padding:11px 13px!important;
  min-height:72px!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-content:center!important;
  align-items:baseline!important;
  gap:4px 6px!important;
  color:#546579!important;
  box-shadow:0 2px 7px rgba(15,23,42,.035)!important;
}
.product-overview-line>span:nth-child(1){background:#f1f7ff!important;border-color:#cfe0f5!important}
.product-overview-line>span:nth-child(2){background:#eef9f3!important;border-color:#cbe7d7!important}
.product-overview-line>span:nth-child(3){background:#f5f1ff!important;border-color:#ddd1f4!important}
.product-overview-line>span:nth-child(4){background:#fff8ed!important;border-color:#ead7b8!important}
.product-overview-line strong{
  display:block!important;
  width:100%!important;
  font-size:1.28rem!important;
  line-height:1!important;
  color:#21354d!important;
  font-weight:900!important;
}
.product-overview-line>span:nth-child(2) strong{color:#176443!important}
.product-overview-line>span:nth-child(3) strong{color:#5a3ea0!important}
.product-overview-line>span:nth-child(4) strong{color:#9b6510!important}
.product-overview-line #marginMetricLabel,
.product-overview-line .muted{
  font-size:.72rem!important;
  line-height:1.28!important;
  color:#617187!important;
}

/* Keep list/table workspaces vertically tight after the command row. */
.erp-unified-filterbar,.toolbar.erp-search-only-toolbar,.ci-campaign-listbar{margin-top:0!important;margin-bottom:0!important}
.erp-active-filter-chips{margin:0!important}
.pager,.erp-table-pager{margin:0!important}

/* Import Sales: navigation + info row is immediately followed by upload panel. */
.ci-import-nav-row{margin-bottom:7px!important}
.ci-import-upload-panel{margin-top:0!important}
.ci-import-upload-panel .panel-head{padding-top:8px!important;padding-bottom:8px!important}

@media(max-width:1100px){
  .product-overview-line{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .product-overview-line{grid-template-columns:1fr!important}
  .product-overview-line>span{min-height:62px!important;padding:9px 11px!important}
}

/* V-91: use exactly one icon per action button. app.js owns SVG icons. */
.btn.with-icon::before,summary.btn.with-icon::before,[data-erp-drawer-target].with-icon::before{content:none!important;display:none!important}
.erp-create-icon-only{color:#285f97!important;font-size:1.35rem!important;font-weight:900!important;text-indent:0!important}

/* V-91 · Stock Transfer Adjustment */
.status-review{background:#fff1cc!important;color:#8a5a00!important}
.status-adjusted{background:#dff7e8!important;color:#0f6a3b!important}
.sta-transfer-card .panel-body{padding:14px 16px}
.sta-transfer-picker{max-width:640px;margin-bottom:14px}
.sta-transfer-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border:1px solid #e0e9f3;border-radius:12px;overflow:hidden;background:#fff}
.sta-transfer-grid>div{padding:13px 15px;border-right:1px solid #e5ecf4;min-width:0}
.sta-transfer-grid>div:last-child{border-right:0}
.sta-transfer-grid span,.sta-audit-grid span{display:block;color:#66758b;font-size:.72rem;margin-bottom:5px}
.sta-transfer-grid strong,.sta-audit-grid strong{display:block;color:#112a49;font-size:.9rem;line-height:1.25}
.sta-transfer-grid small{display:block;color:#6d7e94;font-size:.7rem;margin-top:3px}
.sta-transfer-grid.with-picker{grid-template-columns:repeat(6,minmax(0,1fr))}
.sta-empty-transfer{margin:0}
.sta-product-search-panel .panel-body{padding:12px 16px}
.sta-product-search{max-width:none}
.sta-search-input{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.sta-search-results{top:calc(100% + 6px);left:0;right:145px;width:auto;z-index:80}
.sta-search-results .search-result strong,.sta-search-results .search-result small{display:block}
.sta-info-note{margin-top:9px;padding:9px 11px;border-radius:8px;background:#eaf5ff;color:#34536f;font-size:.78rem}
.sta-items-table{min-width:980px}
.sta-items-table th:nth-child(1){width:54px}.sta-items-table th:nth-child(2){min-width:220px}.sta-items-table th:nth-child(3){width:130px}.sta-items-table th:nth-child(4){width:90px}.sta-items-table th:nth-child(5){min-width:180px}.sta-items-table th:nth-child(6){min-width:260px}.sta-items-table th:nth-child(7){width:105px}.sta-items-table th:nth-child(8){width:90px}
.sta-items-table .input{padding-top:7px;padding-bottom:7px}
.sta-unit{font-weight:700;color:#40516a}
.sta-under-table{display:grid;grid-template-columns:auto minmax(320px,1fr);gap:16px;align-items:start;border-top:1px solid #e8edf4}
.sta-general-notes{justify-self:end;width:min(620px,100%)}
.sta-general-notes textarea{min-height:62px}
.sta-read-note{margin-top:7px;padding:10px 12px;border-radius:8px;background:#f7f9fc;color:#40516a;white-space:pre-wrap}
.sta-bottom-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.sta-bottom-grid .panel{margin-bottom:0}
.sta-stepper{display:grid;grid-template-columns:auto minmax(30px,1fr) auto minmax(30px,1fr) auto minmax(30px,1fr) auto;align-items:start;gap:7px}
.sta-step{text-align:center;min-width:95px;color:#718096}
.sta-step b{width:28px;height:28px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;background:#e9eff6;border:1px solid #bfd0e2;color:#50647d;font-size:.78rem}
.sta-step span{display:block;font-weight:800;color:#42536b;font-size:.78rem}
.sta-step small{display:block;margin-top:3px;font-size:.68rem;color:#78879b;line-height:1.2}
.sta-step.active b{background:#2563eb;border-color:#2563eb;color:#fff}.sta-step.done b{background:#2563eb;border-color:#2563eb;color:#fff}.sta-step.done span{color:#174da6}
.sta-line{height:2px;background:#cfdae7;margin-top:13px}.sta-line.done{background:#2563eb}
.sta-audit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.sta-audit-grid>div{display:grid;grid-template-columns:120px 1fr;align-items:baseline;gap:8px;border-bottom:1px solid #edf1f6;padding-bottom:7px}
.sta-audit-grid span{margin:0}.sta-audit-grid strong{font-size:.82rem}
.sta-form-actions{display:flex;justify-content:flex-end;gap:9px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}.sta-form-actions>a:first-child{margin-right:auto}
.sta-workflow-actions form{margin:0}

@media(max-width:1200px){.sta-transfer-grid,.sta-transfer-grid.with-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.sta-transfer-grid>div:nth-child(3n){border-right:0}.sta-transfer-grid>div:nth-child(n+4){border-top:1px solid #e5ecf4}.sta-bottom-grid{grid-template-columns:1fr}}
@media(max-width:760px){.sta-transfer-grid,.sta-transfer-grid.with-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.sta-transfer-grid>div{border-right:1px solid #e5ecf4!important;border-top:1px solid #e5ecf4}.sta-transfer-grid>div:nth-child(-n+2){border-top:0}.sta-transfer-grid>div:nth-child(2n){border-right:0!important}.sta-search-input{grid-template-columns:1fr}.sta-search-results{right:0}.sta-under-table{grid-template-columns:1fr}.sta-general-notes{justify-self:stretch;width:100%}.sta-stepper{grid-template-columns:1fr 1fr;gap:10px}.sta-line{display:none}.sta-step{border:1px solid #e1e9f2;border-radius:10px;padding:9px;min-width:0}.sta-audit-grid{grid-template-columns:1fr}.sta-audit-grid>div{grid-template-columns:105px 1fr}.sta-form-actions{position:sticky;bottom:0;background:rgba(244,247,251,.96);padding:9px 0;z-index:20}}

/* Report Centre uses explicit Apply/Enter only. Keep its search control
   stable while the actions alongside it wrap at narrower widths. */
.report-centre-v91 .report-filter-form > .field.grow{
  flex:1 1 360px!important;
  min-width:min(280px,100%)!important;
  max-width:100%;
}
.report-centre-v91 .report-filter-form > .field.grow > input{
  display:block;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* v1.6.18 — BCRS Producer/PTM compact layout ----------------------------- */
.bcrs-page .bcrs-switchbar{position:relative!important;overflow:visible!important}
.bcrs-page .bcrs-switchbar>.panel-head.erp-panel-inline-toolbar{
  position:absolute!important;right:10px!important;top:9px!important;z-index:4!important;
  width:auto!important;min-width:0!important;min-height:0!important;height:auto!important;
  padding:0!important;margin:0!important;border:0!important;background:transparent!important;
  box-shadow:none!important;display:block!important
}
.bcrs-page .bcrs-switchbar>.panel-head.erp-panel-inline-toolbar>.erp-panel-inline-title{display:none!important}
.bcrs-page .bcrs-switchbar>.panel-head.erp-panel-inline-toolbar .erp-panel-inline-actions{
  display:flex!important;width:auto!important;min-width:0!important;margin:0!important;padding:0!important;gap:0!important
}
.bcrs-page .bcrs-switchbar>.panel-head.erp-panel-inline-toolbar .erp-info-icon{
  flex:0 0 32px!important;width:32px!important;min-width:32px!important;max-width:32px!important;height:32px!important;margin:0!important
}
.bcrs-page .bcrs-switchbar>.panel-body{padding:8px 52px 8px 10px!important}
.bcrs-page .bcrs-switchbar>.panel-body>.toolbar{
  min-height:38px!important;padding:0!important;border:0!important;background:transparent!important;align-items:center!important
}
.bcrs-page .bcrs-switchbar>.panel-body>.toolbar>.toolbar{padding:0!important;border:0!important;background:transparent!important}

.bcrs-page .bcrs-filter-grid{
  display:grid!important;align-items:end!important;gap:9px!important;padding:10px 12px!important
}
.bcrs-page .bcrs-stock-filter{grid-template-columns:minmax(320px,2.2fr) minmax(180px,1fr) minmax(170px,.9fr) minmax(145px,.75fr) auto!important}
.bcrs-page .bcrs-ptm-filter{grid-template-columns:minmax(150px,.75fr) minmax(150px,.75fr) minmax(320px,2fr) auto!important}
.bcrs-page .bcrs-filter-grid .field,
.bcrs-page .bcrs-filter-grid .field.span-2{grid-column:auto!important;min-width:0!important}
.bcrs-page .bcrs-filter-actions{
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;
  gap:6px!important;min-width:max-content!important;align-self:end!important
}
.bcrs-page .bcrs-filter-actions .btn{width:auto!important;min-width:78px!important;white-space:nowrap!important}

.bcrs-page .bcrs-metric-grid{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;
  gap:8px!important;padding:0 12px 12px!important;margin:0!important
}
.bcrs-page .bcrs-metric-grid .metric-card{
  min-width:0!important;border:1px solid var(--ui-line,#dbe3ec)!important;border-radius:9px!important;
  background:#fbfdff!important;padding:9px 11px!important;display:flex!important;flex-direction:column!important;
  justify-content:center!important;gap:2px!important;box-shadow:none!important
}
.bcrs-page .bcrs-metric-grid .metric-card span{
  display:block!important;color:var(--ui-muted,#64748b)!important;font-size:.67rem!important;font-weight:750!important;
  text-transform:uppercase!important;letter-spacing:.035em!important;line-height:1.25!important
}
.bcrs-page .bcrs-metric-grid .metric-card strong{
  display:block!important;font-size:1.03rem!important;line-height:1.25!important;color:var(--ui-text,#162235)!important;white-space:nowrap!important
}
.bcrs-page .bcrs-metric-grid .metric-card small{
  display:block!important;margin-top:1px!important;font-size:.64rem!important;line-height:1.25!important;color:var(--ui-muted,#64748b)!important
}

@media(max-width:1180px){
  .bcrs-page .bcrs-stock-filter{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bcrs-page .bcrs-ptm-filter{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bcrs-page .bcrs-filter-actions{justify-content:flex-start!important}
}
@media(max-width:700px){
  .bcrs-page .bcrs-switchbar>.panel-body{padding-right:48px!important}
  .bcrs-page .bcrs-stock-filter,.bcrs-page .bcrs-ptm-filter{grid-template-columns:1fr!important}
  .bcrs-page .bcrs-filter-actions{display:grid!important;grid-template-columns:1fr 1fr!important;min-width:0!important}
  .bcrs-page .bcrs-filter-actions .btn{width:100%!important}
  .bcrs-page .bcrs-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:430px){.bcrs-page .bcrs-metric-grid{grid-template-columns:1fr!important}}


/* Backend searchable filter suggestions ------------------------------------
   Several filter option labels intentionally use display:grid!important for
   checkbox alignment. That rule is more specific than the generic [hidden]
   rule, so a searched-out option could remain visible even though JS marked
   it hidden. Use a dedicated backend-only hide class so search suggestions
   reliably narrow without touching Staff Mobile/PWA behaviour. */
body:not(.mobile-app-body) .multi-filter-panel .multi-filter-option.erp-filter-search-hidden,
body:not(.mobile-app-body) .ci-multi-pop .ci-multi-list label.erp-filter-search-hidden{
  display:none!important;
}


/* v1.6.50 global backend filter search: one modal Apply/Reset workflow only. */
body:not(.mobile-app-body) .ci-multi-pop .ci-multi-actions{display:none!important}

/* ===== SOURCE: redesign.css ===== */
/* Toko ERP V-91 — unified visual system
   Presentation only. No route, form, permission, calculation or workflow logic. */
:root{
  --toko-bg:#f4f7fb;
  --toko-surface:#ffffff;
  --toko-surface-soft:#f8fafc;
  --toko-line:#dfe7f0;
  --toko-line-strong:#cbd7e4;
  --toko-text:#17243a;
  --toko-muted:#6f7f93;
  --toko-blue:#2463a8;
  --toko-blue-soft:#edf5ff;
  --toko-blue-line:#c9def5;
  --toko-green:#2f7654;
  --toko-green-soft:#eef8f2;
  --toko-green-line:#c8e3d1;
  --toko-purple:#6b5393;
  --toko-purple-soft:#f5f0fa;
  --toko-purple-line:#ded1eb;
  --toko-amber:#806020;
  --toko-amber-soft:#fff8e8;
  --toko-amber-line:#edd9aa;
  --toko-red:#9a4650;
  --toko-red-soft:#fff1f2;
  --toko-red-line:#eccdd1;
  --toko-radius:12px;
  --toko-radius-sm:9px;
  --toko-shadow:0 4px 16px rgba(33,51,76,.055);
  --toko-control-h:36px;
  --toko-sidebar:250px;
}

html{background:var(--toko-bg)}
body{background:var(--toko-bg)!important;color:var(--toko-text)!important;font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:14px!important;line-height:1.42!important}
.app-shell{background:var(--toko-bg)!important}
.app-main{margin-left:var(--toko-sidebar)!important;transition:margin-left .18s ease}
.content{max-width:none!important;margin:0!important;padding:12px 16px 18px!important;background:var(--toko-bg)!important}

/* Sidebar */
.sidebar{width:var(--toko-sidebar)!important;background:#202B63!important;background-image:none!important;padding:12px 9px!important;box-shadow:8px 0 28px rgba(16,37,60,.09)!important}
.brand{padding:7px 8px 15px!important;gap:10px!important;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:8px!important}
.brand-logo-wrap,.brand-mark{width:40px!important;height:40px!important;min-width:40px!important;border-radius:11px!important;background:#fff!important;display:grid!important;place-items:center!important;overflow:hidden!important;box-shadow:0 3px 12px rgba(0,0,0,.12)}
.brand-logo{width:100%!important;height:100%!important;object-fit:contain!important;padding:3px!important}
.brand strong{font-size:.9rem!important;line-height:1.15!important;color:#fff!important}.brand small{font-size:.67rem!important;color:#aebed0!important;margin-top:3px!important}
.sidebar nav>a,.sidebar summary,.sidebar details div a{border-radius:8px!important;padding:7px 9px!important;margin:2px 0!important;transition:background .14s ease,color .14s ease!important}
.sidebar nav>a,.sidebar summary{font-size:.8rem!important;font-weight:760!important}.sidebar details div a{font-size:.75rem!important;color:#c7d4e1!important;padding-left:11px!important}
.sidebar nav>a:hover,.sidebar details div a:hover,.sidebar summary:hover{background:rgba(255,255,255,.08)!important}
.sidebar nav>a.active,.sidebar details div a.active{background:rgba(255,255,255,.13)!important;color:#fff!important}

/* Top bar */
.topbar{height:58px!important;padding:0 16px!important;background:rgba(255,255,255,.98)!important;border-bottom:1px solid var(--toko-line)!important;box-shadow:0 1px 7px rgba(34,52,73,.035)!important;gap:9px!important;z-index:900!important}
.topbar-title{font-size:1.05rem!important;font-weight:820!important;letter-spacing:-.015em!important;color:#203249!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.topbar .user-chip{padding:0 8px!important}.topbar .user-chip span{font-size:.78rem!important;font-weight:800!important}.topbar .user-chip small{font-size:.64rem!important;color:var(--toko-muted)!important}
#sidebarToggle{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;min-width:34px!important;border:1px solid var(--toko-line)!important;border-radius:9px!important;background:#f8fafc!important;color:#546579!important;font-size:0!important}
#sidebarToggle::before{content:'☰';font-size:16px!important}
body.toko-sidebar-collapsed .sidebar{transform:translateX(-100%)!important}
body.toko-sidebar-collapsed .app-main{margin-left:0!important}

/* Suppress duplicate in-page title blocks when topbar already carries page name. */
.page-head.toko-duplicate-page-head,.ci-page-head.toko-duplicate-page-head,.page-heading.toko-duplicate-page-head{display:none!important;margin:0!important;padding:0!important;height:0!important;min-height:0!important}
.page-head.erp-page-head-empty,.ci-page-head.erp-page-head-empty,.page-heading.erp-page-head-empty{display:none!important;margin:0!important;padding:0!important;height:0!important;min-height:0!important}
.content>.page-head:not(.document-page-head),.content>.ci-page-head,.content>.page-heading{margin:0 0 8px!important}

/* Surfaces */
.panel,.metric,.ci-kpi,.erp-kpi,.mobile-card{background:var(--toko-surface)!important;border:1px solid var(--toko-line)!important;border-radius:var(--toko-radius)!important;box-shadow:var(--toko-shadow)!important}
.panel{overflow:visible!important;margin-bottom:9px!important}
.panel-head{min-height:42px!important;padding:8px 11px!important;background:#fff!important;border-bottom:1px solid var(--toko-line)!important;border-radius:var(--toko-radius) var(--toko-radius) 0 0!important}
.panel-head h2,.panel-head h3{margin:0!important;font-size:.9rem!important;font-weight:820!important;color:#23364e!important}.panel-head p{margin:2px 0 0!important;font-size:.68rem!important;color:var(--toko-muted)!important}
.panel-body{padding:10px 11px!important}

/* KPI / summary cards */
.product-overview-line,.metrics,.ci-kpis,.ci-product-sales-kpis,.erp-kpi-strip,.report-summary-strip{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important;margin:0 0 10px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important
}
.product-overview-line>span,.metric,.ci-kpi,.erp-kpi,.report-summary-metric{
  min-height:76px!important;padding:12px 13px!important;border-radius:12px!important;border:1px solid var(--toko-line)!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:3px!important;background:#fff!important
}
.product-overview-line>span:nth-child(4n+1),.metrics>*:nth-child(4n+1),.ci-kpis>*:nth-child(4n+1),.erp-kpi-strip>*:nth-child(4n+1),.report-summary-strip>*:nth-child(4n+1){background:var(--toko-blue-soft)!important;border-color:var(--toko-blue-line)!important}
.product-overview-line>span:nth-child(4n+2),.metrics>*:nth-child(4n+2),.ci-kpis>*:nth-child(4n+2),.erp-kpi-strip>*:nth-child(4n+2),.report-summary-strip>*:nth-child(4n+2){background:var(--toko-green-soft)!important;border-color:var(--toko-green-line)!important}
.product-overview-line>span:nth-child(4n+3),.metrics>*:nth-child(4n+3),.ci-kpis>*:nth-child(4n+3),.erp-kpi-strip>*:nth-child(4n+3),.report-summary-strip>*:nth-child(4n+3){background:var(--toko-purple-soft)!important;border-color:var(--toko-purple-line)!important}
.product-overview-line>span:nth-child(4n+4),.metrics>*:nth-child(4n+4),.ci-kpis>*:nth-child(4n+4),.erp-kpi-strip>*:nth-child(4n+4),.report-summary-strip>*:nth-child(4n+4){background:var(--toko-amber-soft)!important;border-color:var(--toko-amber-line)!important}
.product-overview-line strong,.metric .value,.ci-kpi strong,.erp-kpi strong,.report-summary-metric strong{font-size:1.28rem!important;font-weight:900!important;line-height:1.05!important;color:#20344d!important}
.product-overview-line>span,.metric .label,.ci-kpi span,.erp-kpi span,.report-summary-metric span{font-size:.72rem!important;color:#617289!important}.product-overview-line .muted{font-size:.67rem!important;line-height:1.28!important}

/* Forms and search */
.toolbar,.erp-unified-filterbar,.erp-search-only-toolbar,.compact-filter-bar,.dense-filters,.report-filter-form{
  display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important;padding:8px 10px!important;background:#fff!important;border-bottom:1px solid var(--toko-line)!important;border-radius:var(--toko-radius) var(--toko-radius) 0 0!important;min-height:52px!important
}
.field{gap:4px!important}.field label{font-size:.66rem!important;font-weight:800!important;color:#607086!important;letter-spacing:.015em!important;text-transform:none!important}.field.grow{flex:1 1 320px!important;min-width:240px!important}
.input,select.input,input.input,textarea.input,.multi-filter-button,.searchable-select-input{
  min-height:var(--toko-control-h)!important;height:var(--toko-control-h)!important;padding:7px 10px!important;border:1px solid var(--toko-line-strong)!important;border-radius:9px!important;background:#fff!important;color:var(--toko-text)!important;box-shadow:none!important
}
textarea.input{height:auto!important;min-height:62px!important}
.input:hover,select.input:hover{border-color:#b5c5d6!important}.input:focus,select.input:focus{outline:none!important;border-color:#86acd2!important;box-shadow:0 0 0 3px rgba(48,112,177,.10)!important}
select.input,.multi-filter-button{background-image:linear-gradient(45deg,transparent 50%,#7c8ca0 50%),linear-gradient(135deg,#7c8ca0 50%,transparent 50%)!important;background-position:calc(100% - 15px) 15px,calc(100% - 11px) 15px!important;background-size:4px 4px,4px 4px!important;background-repeat:no-repeat!important;padding-right:28px!important}

/* Exactly one search icon. JS converts browser search inputs to text/role=searchbox. */
.toko-search{background-color:#fff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23718499' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:11px 50%!important;background-size:17px 17px!important;padding-left:38px!important}
.toko-search:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233b6fa6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")!important}
.toko-search-field>label,.toko-search-label-hidden{display:none!important}.erp-search-box>span,.compact-search>span.toko-search-glyph-hidden{display:none!important}

/* Buttons */
.btn,.action-menu>summary.btn,.erp-info-icon,.erp-ui-help-button,.icon-btn{
  min-height:var(--toko-control-h)!important;height:var(--toko-control-h)!important;padding:0 11px!important;border-radius:9px!important;border:1px solid var(--toko-line-strong)!important;background:#f8fafc!important;color:#42546a!important;box-shadow:none!important;font-size:.76rem!important;font-weight:800!important;gap:6px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important
}
.btn:hover,.action-menu>summary.btn:hover{filter:none!important;transform:none!important;background:#f1f5f9!important;border-color:#b9c6d4!important}
.btn.primary,.action-create,.erp-create-icon-only{background:var(--toko-blue-soft)!important;border-color:var(--toko-blue-line)!important;color:#285f97!important}
.btn.success,.action-apply{background:var(--toko-green-soft)!important;border-color:var(--toko-green-line)!important;color:var(--toko-green)!important}
.action-import{background:var(--toko-green-soft)!important;border-color:var(--toko-green-line)!important;color:var(--toko-green)!important}
.action-export,.btn.action-export-excel,.btn.action-export-pdf{background:var(--toko-amber-soft)!important;border-color:var(--toko-amber-line)!important;color:var(--toko-amber)!important}
.action-more{background:var(--toko-purple-soft)!important;border-color:var(--toko-purple-line)!important;color:var(--toko-purple)!important}
.btn.danger{background:var(--toko-red-soft)!important;border-color:var(--toko-red-line)!important;color:var(--toko-red)!important}
.erp-info-icon,.erp-ui-help-button,.erp-title-info{width:var(--toko-control-h)!important;min-width:var(--toko-control-h)!important;padding:0!important;background:var(--toko-blue-soft)!important;border-color:var(--toko-blue-line)!important;color:#416d9d!important;border-radius:9px!important}
.erp-create-icon-only{width:var(--toko-control-h)!important;min-width:var(--toko-control-h)!important;padding:0!important;font-size:1.15rem!important}
.btn.sm,.action-menu>summary.btn.sm{min-height:32px!important;height:32px!important;padding:0 9px!important;font-size:.72rem!important}

/* Shared toolbar action alignment */
.erp-filterbar-actions,.erp-command-actions,.ci-actions,.top-action-bar,.actions,.erp-panel-inline-actions,.commercial-nav-actions{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important;margin-left:auto!important;justify-content:flex-end!important}
.erp-filterbar-actions [data-erp-drawer-target],.erp-command-actions [data-erp-drawer-target],.commercial-nav-actions [data-erp-drawer-target]{order:80}.erp-filterbar-actions .erp-ui-help-button,.erp-command-actions .erp-ui-help-button,.commercial-nav-actions .erp-info-icon{order:90}

/* Filter drawer */
.erp-drawer-backdrop{background:rgba(26,39,55,.12)!important;backdrop-filter:none!important}
.erp-side-drawer{width:min(410px,96vw)!important;max-width:96vw!important;background:#fff!important;border-left:1px solid var(--toko-line)!important;box-shadow:-14px 0 34px rgba(33,48,68,.11)!important}
.erp-drawer-head{padding:13px 14px!important;background:#fbfdff!important;border-bottom:1px solid var(--toko-line)!important}.erp-drawer-head h2{font-size:1rem!important}.erp-drawer-head p{font-size:.69rem!important;color:var(--toko-muted)!important}
.erp-filter-drawer-body{padding:12px 14px 14px!important;gap:11px!important;background:#fff!important}
.erp-filter-drawer-body>.field{padding:9px!important;border:1px solid #e8edf3!important;border-radius:10px!important;background:#fbfcfe!important}
.erp-filter-drawer-actions{grid-template-columns:1fr 1fr!important;gap:9px!important;padding-top:11px!important;background:#fff!important}.erp-filter-drawer-actions .btn{height:40px!important}
.multi-filter-panel,.ci-multi-pop,.searchable-select-menu{border:1px solid var(--toko-line)!important;border-radius:10px!important;box-shadow:0 14px 34px rgba(32,47,67,.12)!important;background:#fff!important}
.multi-filter-option,.ci-multi-list label{padding:7px 8px!important;border-radius:7px!important}.multi-filter-option:hover,.ci-multi-list label:hover{background:#f4f7fb!important}
input[type='checkbox'],input[type='radio']{accent-color:#3f78ad!important;width:15px!important;height:15px!important}

/* Table / list */
.erp-global-table-workspace>.table-wrap,.erp-global-table-scroll,.table-wrap{background:#fff!important;scrollbar-width:thin!important}
.data-table{border-collapse:separate!important;border-spacing:0!important;font-size:.77rem!important}.data-table th{background:#edf3f8!important;color:#506279!important;font-size:.65rem!important;font-weight:850!important;letter-spacing:.025em!important;padding:8px 9px!important;border-bottom:1px solid var(--toko-line-strong)!important}.data-table td{padding:8px 9px!important;border-bottom:1px solid #edf1f5!important;color:#263950!important}.data-table tbody tr:hover{background:#f8fbfe!important}.data-table tbody tr:last-child td{border-bottom:0!important}.product-name{font-weight:820!important;color:#21364e!important}.barcode{font-size:.68rem!important;color:#7b899a!important}
.status{border-radius:999px!important;padding:4px 8px!important;font-size:.64rem!important;font-weight:850!important}
.row-actions,.item-actions{display:flex!important;gap:5px!important;align-items:center!important;flex-wrap:wrap!important}

/* Pagination */
.pager,.erp-table-pager{min-height:42px!important;padding:7px 10px!important;background:#fff!important;border-top:1px solid var(--toko-line)!important;color:var(--toko-muted)!important;font-size:.72rem!important}.erp-pager-controls{gap:7px!important}.erp-pager-arrow{width:31px!important;height:31px!important;border-radius:8px!important;background:#f8fafc!important;border-color:var(--toko-line)!important}.erp-column-button{background:#f8fafc!important}

/* Commercial / reports */
.commercial-nav-row{padding:6px 8px!important;margin:0 0 8px!important;border:1px solid var(--toko-line)!important;border-radius:11px!important;background:#fff!important;box-shadow:var(--toko-shadow)!important}.commercial-group-nav{gap:4px!important}.commercial-group-nav a{border-radius:8px!important;padding:6px 9px!important;font-size:.72rem!important}.ci-chart-card,.chart-box{border:1px solid var(--toko-line)!important;border-radius:12px!important;background:#fff!important;box-shadow:var(--toko-shadow)!important}

/* Transaction forms */
.erp-transaction-workspace>.panel,.erp-transaction-workspace>details.panel{margin-bottom:8px!important}.erp-transaction-workspace .form-grid{gap:9px!important}.erp-transaction-workspace .panel-head{background:#fbfdff!important}.document-page-head{padding:8px 10px!important;border:1px solid var(--toko-line)!important;border-radius:11px!important;background:#fff!important;box-shadow:var(--toko-shadow)!important}

/* Dashboard / cards */
.grid{gap:10px!important}.two-col,.three-col{gap:10px!important}.bar-list{padding:10px!important}.chart-box{height:250px!important}

/* Mobile / PWA */
@media(max-width:800px){
  :root{--toko-control-h:42px}
  body.mobile-app-body,.mobile-app-body .content{background:#f3f6fa!important}
  .mobile-app-body .sidebar,.mobile-app-body .topbar{display:none!important}
  .mobile-app-body .app-main{margin-left:0!important}.mobile-app-body .content{padding:8px!important}
  .mobile-workspace{max-width:720px!important;margin:0 auto!important;padding-bottom:80px!important}
  .mobile-page-head,.mobile-doc-list-head,.mobile-doc-view-head{background:#fff!important;border:1px solid var(--toko-line)!important;border-radius:16px!important;box-shadow:var(--toko-shadow)!important;padding:10px 11px!important}
  .mobile-cards{grid-template-columns:1fr!important;gap:9px!important}.mobile-card{padding:13px!important;border-radius:16px!important;text-align:left!important;display:grid!important;grid-template-columns:46px minmax(0,1fr) auto!important;align-items:center!important;gap:11px!important}.mobile-card .icon{width:44px!important;height:44px!important;border-radius:12px!important;display:grid!important;place-items:center!important;font-size:1.25rem!important;background:var(--toko-blue-soft)!important;border:1px solid var(--toko-blue-line)!important;color:#35699c!important}.mobile-card h2{margin:0 0 3px!important;font-size:.92rem!important}.mobile-card p{margin:0!important;min-height:0!important;font-size:.69rem!important;line-height:1.3!important;color:var(--toko-muted)!important}
  .mobile-search-box{border:1px solid var(--toko-line-strong)!important;border-radius:13px!important;background:#fff!important;box-shadow:none!important}.mobile-search-box .input{min-height:46px!important;font-size:16px!important}
  .mobile-line,.mobile-doc-item{border-radius:14px!important;box-shadow:0 2px 10px rgba(35,53,75,.045)!important}
  .mobile-context-strip{position:sticky!important;top:0!important;z-index:80!important;background:#f3f6fa!important;padding:6px 0!important;margin-bottom:7px!important}
  .mobile-back-button,.backend-switch,.mobile-primary-action,.mobile-workflow-btn{border-radius:12px!important;min-height:44px!important}
  .mobile-entry-modal,.modal-overlay.mobile-entry-modal{display:flex!important;align-items:center!important;justify-content:center!important;padding:16px!important}
  .mobile-entry-modal[hidden]{display:none!important}
  .mobile-entry-modal .mobile-sheet-card,.mobile-entry-modal .modal-card{position:relative!important;inset:auto!important;margin:auto!important;width:min(92vw,520px)!important;max-height:88dvh!important;border-radius:18px!important;overflow:auto!important;box-shadow:0 22px 60px rgba(19,33,49,.22)!important}
  #mobileProductContext .mobile-sheet-card{border-radius:18px!important}
}

@media(max-width:1100px){
  .product-overview-line,.metrics,.ci-kpis,.ci-product-sales-kpis,.erp-kpi-strip,.report-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  .product-overview-line,.metrics,.ci-kpis,.ci-product-sales-kpis,.erp-kpi-strip,.report-summary-strip{grid-template-columns:1fr 1fr!important}
}

/* Mobile card accent rotation — restrained, consistent with desktop KPIs. */
@media(max-width:800px){
  .mobile-cards .mobile-card:nth-child(4n+1) .icon{background:var(--toko-blue-soft)!important;border-color:var(--toko-blue-line)!important;color:#35699c!important}
  .mobile-cards .mobile-card:nth-child(4n+2) .icon{background:var(--toko-green-soft)!important;border-color:var(--toko-green-line)!important;color:#397457!important}
  .mobile-cards .mobile-card:nth-child(4n+3) .icon{background:var(--toko-purple-soft)!important;border-color:var(--toko-purple-line)!important;color:#70588e!important}
  .mobile-cards .mobile-card:nth-child(4n+4) .icon{background:var(--toko-amber-soft)!important;border-color:var(--toko-amber-line)!important;color:#806020!important}
  .mobile-home-brand{display:flex!important;align-items:center!important;gap:10px!important}.mobile-home-brand img{width:48px!important;height:48px!important;object-fit:contain!important;border-radius:12px!important;background:#fff!important;border:1px solid var(--toko-line)!important;padding:3px!important}.mobile-home-brand h1{font-size:1.08rem!important;margin:0!important}.mobile-home-brand p{font-size:.7rem!important;margin:2px 0 0!important;color:var(--toko-muted)!important}
  .mobile-home-screen>.mobile-page-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:9px!important;flex-wrap:wrap!important}
  .mobile-home-screen>.mobile-page-head .actions{margin-left:auto!important}
  .mobile-sheet-card .modal-head{background:#fbfdff!important;border-bottom:1px solid var(--toko-line)!important;padding:12px 13px!important}.mobile-sheet-card .modal-head h2{font-size:1rem!important;margin:0!important}.mobile-sheet-card .modal-head p{font-size:.68rem!important;color:var(--toko-muted)!important;margin:3px 0 0!important}.mobile-sheet-card .erp-modal-body{padding:12px 13px!important}.mobile-sheet-card .modal-actions{padding:10px 12px!important;border-top:1px solid var(--toko-line)!important;background:#fbfdff!important}
}

/* --------------------------------------------------------------------------
   V-91 Stage 2 — deep module-by-module polish
   Presentation only. Existing forms, routes, permissions and JS workflows are
   intentionally left in place; selectors below only normalize their surfaces.
   -------------------------------------------------------------------------- */

/* One continuous workspace: the first useful control sits directly below the
   application header. This removes residual dead strips on list/report pages. */
.content > .toko-primary-workspace:first-of-type,
.content > .commercial-nav-row + .toko-primary-workspace{margin-top:0!important}
.content > .toko-primary-workspace.panel{border-radius:12px!important;overflow:visible!important}
.content > .toko-primary-workspace.panel > .toolbar:first-child,
.content > .toko-primary-workspace.panel > form.toolbar:first-child{border-radius:12px 12px 0 0!important}
.erp-layout-strip-empty,.erp-tools-empty{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important}

/* Module identity is set from the URL by redesign.js. It lets the same visual
   system accommodate table-heavy masters, transactions and read-only reports. */
body.toko-module-masters .content,
body.toko-module-inventory .content,
body.toko-module-purchasing .content,
body.toko-module-users .content,
body.toko-module-reports .content,
body.toko-module-commercial .content,
body.toko-module-smart-ordering .content{padding-top:10px!important}

/* Unified command/search bar. Search owns the available space; commands stay
   aligned at the right and wrap only when the viewport actually requires it. */
.toko-command-surface{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important}
.toko-command-surface .toko-search-field,
.toko-command-surface .field.grow:has(.toko-search),
.toko-command-surface .erp-unified-search{flex:1 1 420px!important;min-width:260px!important}
.toko-command-surface .toko-search{width:100%!important;min-width:0!important}
.toko-command-surface > .btn,
.toko-command-surface > .action-menu,
.toko-command-surface > details,
.toko-command-surface > .erp-filterbar-actions{flex:0 0 auto!important}

/* Action vocabulary: one icon source only. Icons are pseudo-elements, so they
   never interfere with existing onclick/href/form semantics. */
.toko-action-filter::before{
  content:"";display:inline-block;width:13px;height:13px;flex:0 0 13px;background:currentColor;
  clip-path:polygon(0 0,100% 0,62% 43%,62% 82%,38% 100%,38% 43%);opacity:.82;font-size:0
}
.toko-action-apply::before{content:'✓';font-size:13px;line-height:1}
.toko-action-reset::before{content:'↺';font-size:14px;line-height:1}
.toko-action-edit::before{content:'✎';font-size:13px;line-height:1}
.toko-action-view::before{content:'↗';font-size:12px;line-height:1}
.toko-action-export::before{content:'⇩';font-size:13px;line-height:1}
.toko-action-import::before{content:'⇧';font-size:13px;line-height:1}
.toko-action-create::before{content:'+';font-size:16px;line-height:1;font-weight:900}
.toko-action-filter{background:#f7f9fc!important}
.toko-action-apply{background:var(--toko-blue-soft)!important;border-color:var(--toko-blue-line)!important;color:#285f97!important}
.toko-action-reset{background:#f8fafc!important;color:#5d6e82!important}
.toko-action-edit{background:var(--toko-blue-soft)!important;border-color:var(--toko-blue-line)!important;color:#315f8e!important}
.toko-action-view{background:var(--toko-purple-soft)!important;border-color:var(--toko-purple-line)!important;color:#665083!important}
.toko-action-export{background:var(--toko-amber-soft)!important;border-color:var(--toko-amber-line)!important;color:#7a5d24!important}
.toko-action-import{background:var(--toko-green-soft)!important;border-color:var(--toko-green-line)!important;color:#316f51!important}
.toko-action-create{background:var(--toko-blue-soft)!important;border-color:var(--toko-blue-line)!important;color:#285f97!important}

/* Tables: compact enterprise density, sticky header inside the table scroll
   region, clear numeric alignment and a calmer action column. */
.erp-global-table-workspace{overflow:hidden!important}
.erp-global-table-workspace .table-wrap{border-radius:0!important;margin:0!important;max-width:100%!important;overflow:auto!important;overscroll-behavior:contain}
.erp-global-table-workspace .data-table{min-width:max-content!important;width:100%!important}
.erp-global-table-workspace .data-table thead th{position:sticky!important;top:0!important;z-index:4!important;box-shadow:0 1px 0 var(--toko-line-strong)!important;white-space:nowrap!important}
.erp-global-table-workspace .data-table tbody td{vertical-align:middle!important}
.erp-global-table-workspace .data-table td:last-child,
.erp-global-table-workspace .data-table th:last-child{padding-right:11px!important}
.erp-global-table-workspace .actions,
.erp-global-table-workspace .row-actions{justify-content:flex-end!important;flex-wrap:nowrap!important}
.erp-global-table-workspace .btn.sm{min-width:32px!important}
.erp-table-selection{padding:7px 10px!important;border-bottom:1px solid var(--toko-line)!important;background:#fbfdff!important;display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}

/* Forms / transaction documents. Sections look related without becoming large
   cards; long workflows use compact two-column fields where templates allow. */
.toko-transaction-page .panel,
.toko-transaction-page details.panel{border-radius:12px!important}
.toko-transaction-page .panel-head{min-height:40px!important}
.toko-transaction-page .form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px 11px!important}
.toko-transaction-page .form-grid .field.grow,
.toko-transaction-page .form-grid .field.full,
.toko-transaction-page .form-grid .full-width{grid-column:1/-1!important}
.toko-transaction-page .document-page-head{margin-bottom:8px!important}
.toko-transaction-page .toolbar{min-height:46px!important;padding:7px 9px!important}
.toko-transaction-page .table-wrap{border-top:1px solid #edf1f5!important}

/* List pages: one command bar + one data surface. */
.toko-list-page .panel + .panel{margin-top:8px!important}
.toko-list-page .compact-panel + .panel{margin-top:8px!important}
.toko-list-page .compact-filter-bar,
.toko-list-page .dense-filters{padding:7px 9px!important;min-height:48px!important}
.toko-list-page .pager:first-child{border-top:0!important;border-bottom:1px solid var(--toko-line)!important}

/* Products/master data: summary cards and selection tools visually attach to
   the product table rather than floating as separate blocks. */
body.toko-page-products .product-overview-line{margin-bottom:8px!important}
body.toko-page-products #productFilters{border-radius:12px 12px 0 0!important}
body.toko-page-products #productSelectionTools{margin:0!important}
body.toko-page-products .panel > .pager{border-bottom:1px solid var(--toko-line)!important;border-top:0!important}

/* Stock balances / ledger / replenishment: prioritize query + data. */
body.toko-page-balances .content > .panel:first-of-type,
body.toko-page-ledger .content > .panel:first-of-type,
body.toko-page-replenishment .content > .panel:first-of-type{margin-top:0!important}
body.toko-page-balances .toolbar,
body.toko-page-ledger .toolbar,
body.toko-page-replenishment .toolbar{border-radius:12px 12px 0 0!important}

/* Purchasing and stock transaction status is deliberately compact. */
body.toko-module-purchasing .status,
body.toko-module-inventory .status{min-width:0!important;white-space:nowrap!important}
body.toko-module-purchasing .data-table td strong,
body.toko-module-inventory .data-table td strong{color:#20344d!important}

/* Users / permissions / audit are security surfaces: visually neutral and
   table-first. No action capability is added here. */
body.toko-module-users .data-table th{background:#eef2f7!important}
body.toko-page-activity .data-table td:first-child{white-space:nowrap!important;font-variant-numeric:tabular-nums}
body.toko-page-roles .status{margin-left:6px!important}

/* Commercial Intelligence and Reports: consistent tab row, KPI strip, charts,
   and report table. Read-only reports remain read-only. */
body.toko-module-commercial .commercial-nav-row,
body.toko-module-reports .commercial-nav-row{position:relative!important;z-index:5!important}
body.toko-module-commercial .ci-kpis,
body.toko-module-reports .metrics{margin-bottom:8px!important}
body.toko-module-commercial .ci-chart-card,
body.toko-module-reports .chart-box{min-height:220px!important}
body.toko-module-commercial .data-table,
body.toko-module-reports .data-table{font-variant-numeric:tabular-nums}

/* Empty states and alerts are quieter and more intentional. */
.empty{padding:28px 14px!important;color:#7c8999!important;text-align:center!important;background:#fbfcfe!important}
.alert{border-radius:10px!important;box-shadow:var(--toko-shadow)!important}

/* Desktop/tablet responsiveness. Horizontal movement belongs to the table,
   never the whole application page. */
html,body,.app-shell,.app-main,.content{max-width:100%!important;overflow-x:hidden!important}
@media(max-width:1180px){
  .toko-command-surface .toko-search-field,.toko-command-surface .field.grow:has(.toko-search){flex-basis:300px!important}
  .toko-transaction-page .form-grid{grid-template-columns:1fr!important}
  .toko-transaction-page .form-grid>*{grid-column:1!important}
}
@media(max-width:800px){
  /* Stage 2 keeps the existing mobile business workflows but removes desktop
     assumptions when a standard page is opened on a phone. */
  body:not(.mobile-app-body) .sidebar{transform:translateX(-100%)!important}
  body:not(.mobile-app-body) .app-main{margin-left:0!important}
  body:not(.mobile-app-body) .content{padding:8px!important}
  body:not(.mobile-app-body) .topbar{height:54px!important;padding:0 8px!important}
  body:not(.mobile-app-body) .topbar .user-chip{display:none!important}
  body:not(.mobile-app-body) .topbar-title{font-size:.92rem!important}
  .toko-command-surface{align-items:stretch!important}
  .toko-command-surface .toko-search-field,.toko-command-surface .field.grow:has(.toko-search){flex:1 1 100%!important;min-width:100%!important}
  .toolbar,.erp-unified-filterbar,.erp-search-only-toolbar,.compact-filter-bar,.dense-filters,.report-filter-form{padding:7px!important}
  .btn,.action-menu>summary.btn{min-height:40px!important;height:40px!important}
  .data-table th,.data-table td{padding:8px!important}
}

/* --------------------------------------------------------------------------
   V-91 Stage 4 — cross-app QA hardening, accessibility and responsive polish
   Presentation-only rules. No route, permission, data or transaction logic.
   -------------------------------------------------------------------------- */

/* Keep the useful workspace visually attached to the application header. */
.content > :first-child{scroll-margin-top:72px}
.content > .toko-duplicate-page-head{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important}
.content > .toko-duplicate-page-head + *{margin-top:0!important}

/* One predictable control rhythm across filters, forms and table commands. */
.content .btn,.content button.btn,.content summary.btn{
  min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  line-height:1.15;white-space:nowrap
}
.content .input,.content select.input,.content textarea.input{border-radius:9px}
.content select.input{padding-right:30px}
.toko-command-surface{min-width:0}
.toko-command-surface > *{max-width:100%}
.toko-command-surface .action-menu{min-width:0}

/* Search safety: icon comes from the normalized wrapper only. */
.toko-search-glyph-hidden{display:none!important}
.toko-search,.erp-global-search-input,.ci-table-search,.erp-search-input{
  background-image:none!important;background-repeat:no-repeat!important
}
.toko-search::-webkit-search-decoration,.toko-search::-webkit-search-cancel-button,
.toko-search::-webkit-search-results-button,.toko-search::-webkit-search-results-decoration{
  display:none!important;-webkit-appearance:none!important
}

/* Tables keep horizontal overflow inside their own surface, not the page. */
.erp-global-table-workspace{min-width:0!important;max-width:100%!important}
.erp-global-table-scroll{width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch}
.erp-global-table-scroll table{margin:0!important}
.erp-global-table-scroll th,.erp-global-table-scroll td{vertical-align:middle}
.erp-global-table-scroll thead th{position:sticky;top:0;z-index:3;background:#f7f9fc}
.erp-global-table-scroll tbody tr:hover{background:#f8fbff}
.erp-global-table-scroll td .btn{min-height:30px;padding:4px 8px;border-radius:8px}

/* Status chips remain readable without dominating dense tables. */
.status,.badge,.pill,.chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Keyboard/focus visibility for global desktop controls. */
.content :is(a,button,input,select,textarea,summary):focus-visible,
.sidebar :is(a,button):focus-visible,.topbar :is(a,button):focus-visible{
  outline:2px solid #6f9fd2!important;outline-offset:2px!important
}

/* Prevent legacy decorative glyphs from doubling the standardized icons. */
.toko-action-filter,.toko-action-apply,.toko-action-reset,.toko-action-edit,
.toko-action-view,.toko-action-export,.toko-action-import,.toko-action-create{position:relative}
.toko-action-filter > .legacy-action-icon,.toko-action-apply > .legacy-action-icon,
.toko-action-reset > .legacy-action-icon,.toko-action-edit > .legacy-action-icon,
.toko-action-view > .legacy-action-icon,.toko-action-export > .legacy-action-icon,
.toko-action-import > .legacy-action-icon,.toko-action-create > .legacy-action-icon{display:none!important}

/* Create/edit transaction pages: compact cards without squeezing data entry. */
body.toko-transaction-page .content{padding-top:8px!important}
body.toko-transaction-page .panel{border-radius:12px!important}
body.toko-transaction-page .panel-head{padding:9px 11px!important}
body.toko-transaction-page .panel-body{padding:10px 11px!important}
body.toko-transaction-page .form-grid{gap:9px 10px!important}
body.toko-transaction-page textarea.input{min-height:70px}

/* Reports: retain table/chart width while trimming decorative dead space. */
body.toko-module-reports .panel,body.toko-module-commercial .panel{margin-bottom:8px!important}
body.toko-module-reports .panel-head,body.toko-module-commercial .panel-head{padding-top:9px!important;padding-bottom:9px!important}

@media(max-width:1100px){
  .toko-command-surface .toko-search-field,
  .toko-command-surface .field.grow:has(.toko-search),
  .toko-command-surface .erp-unified-search{flex-basis:100%!important;min-width:0!important}
  .toko-command-surface > .btn,.toko-command-surface > details,.toko-command-surface > .action-menu{min-height:38px}
}

@media(max-width:800px){
  .content{overflow-x:hidden}
  .content .btn,.content button.btn,.content summary.btn{min-height:42px}
  .toko-command-surface{gap:6px!important}
  .toko-command-surface > .btn,.toko-command-surface > details,.toko-command-surface > .action-menu{flex:1 1 auto!important}
  .erp-global-table-scroll{border-radius:10px}
}

@media(max-width:560px){
  .toko-command-surface > .btn,.toko-command-surface > details,.toko-command-surface > .action-menu{flex:1 1 calc(50% - 6px)!important}
  body.toko-transaction-page .panel-body{padding:9px!important}
}

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


/* --------------------------------------------------------------------------
   V-91 final visual QA — single-icon search, control alignment and edge cases
   Presentation only. Business routes, forms, permissions and calculations stay
   untouched.
   -------------------------------------------------------------------------- */

/* The canonical desktop search icon is the SVG inserted by unified-ui.js.
   Never paint a second background icon on the input itself. */
.erp-global-search-shell > .erp-search-leading-icon{display:grid!important}
.erp-global-search-shell > .erp-search-control{display:contents!important}
.erp-global-search-shell > .erp-search-control-icon{display:none!important}
.erp-global-search-shell > input,
.erp-global-search-shell > .erp-search-control > input{
  width:100%!important;
  min-width:0!important;
  padding-left:36px!important;
  background-image:none!important;
}

/* Mobile search boxes already carry one explicit SVG icon. Keep normalized
   input decoration off there so there is never a second magnifier. */
.mobile-search-box .toko-search,
.mobile-search-box .erp-global-search-input,
.mobile-search-box input[role="searchbox"]{
  padding-left:0!important;
  background-image:none!important;
}
.mobile-search-box > .mobile-search-icon{display:grid!important}

/* Keep placeholders away from icons and prevent controls from pushing the page
   wider than the viewport on long translated/user-entered labels. */
.erp-global-search-shell input::placeholder,.mobile-search-box input::placeholder{opacity:.78}
.toko-command-surface .btn,.erp-command-actions .btn,.erp-filterbar-actions .btn{max-width:100%}
.toko-command-surface .field,.erp-command-actions,.erp-filterbar-actions{min-width:0}

/* Empty title/action remnants must never reserve the crossed-out title band. */
.content > :is(.page-head,.ci-page-head,.page-heading).erp-page-head-empty,
.content > :is(.page-head,.ci-page-head,.page-heading).toko-duplicate-page-head{
  display:none!important;margin:0!important;padding:0!important;border:0!important;
  height:0!important;min-height:0!important;
}

/* Row-action controls remain compact and aligned even when labels vary. */
.data-table td:last-child .actions,.data-table td .row-actions{
  display:flex;align-items:center;gap:5px;flex-wrap:nowrap;
}
.data-table td:last-child .btn,.data-table td .row-actions .btn{white-space:nowrap}

/* Safer compact tablet layout before the dedicated mobile/PWA breakpoint. */
@media (max-width:980px) and (min-width:801px){
  .product-overview-line,.metrics,.ci-kpis,.ci-product-sales-kpis,.erp-kpi-strip,.report-summary-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .erp-filterbar-actions,.erp-command-actions{flex-wrap:wrap!important}
}

@media (max-width:430px){
  .mobile-app-body .mobile-list-tools{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mobile-app-body .modal-card{max-width:calc(100vw - 18px)!important}
  .mobile-app-body .mobile-search-box{min-width:0!important}
}

/* --------------------------------------------------------------------------
   V-91 global single-icon / add-button / shortcut-nav cleanup
   -------------------------------------------------------------------------- */

/* app.js inserts the canonical SVG icon. When it exists, never also paint a
   CSS pseudo-icon for the same action. This is the global duplicate-icon fix. */
.btn.with-icon::before,
summary.btn.with-icon::before,
[data-erp-drawer-target].with-icon::before,
.toko-action-filter.with-icon::before,
.toko-action-apply.with-icon::before,
.toko-action-reset.with-icon::before,
.toko-action-edit.with-icon::before,
.toko-action-view.with-icon::before,
.toko-action-export.with-icon::before,
.toko-action-import.with-icon::before,
.toko-action-create.with-icon::before{
  content:none!important;
  display:none!important;
}

/* Icon-only Add/New controls must always visibly show one + sign. */
.erp-create-icon-only{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  font-size:1.35rem!important;
  line-height:1!important;
  font-weight:900!important;
  color:#285f97!important;
  text-indent:0!important;
  overflow:visible!important;
}
.erp-create-icon-only::before,.erp-create-icon-only::after{content:none!important;display:none!important}

/* Campaign command bar: search owns the width; + and info remain visible at
   the right without overlap at desktop/tablet widths. */
.ci-campaign-listbar .erp-command-actions{
  width:min(100%,calc(100% - 230px))!important;
  min-width:0!important;
  margin-left:auto!important;
  flex-wrap:nowrap!important;
}
.ci-campaign-listbar .erp-search-box{
  flex:1 1 auto!important;
  max-width:none!important;
  min-width:180px!important;
}
.ci-campaign-listbar .erp-create-icon-only,
.ci-campaign-listbar .ci-info-icon{flex:0 0 36px!important}

/* The global bottom shortcut dock was removed from base.html. Keep a defensive
   rule for stale cached markup and avoid reserving dead space for it. */
.mobile-pwa-nav{display:none!important}
.mobile-app-body .content{
  padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;
}
@media(max-width:800px){
  .mobile-app-body .content{padding-bottom:calc(12px + env(safe-area-inset-bottom))!important}
  .ci-campaign-listbar .panel-head{align-items:flex-start!important;flex-wrap:wrap!important}
  .ci-campaign-listbar .erp-command-actions{width:100%!important;flex-wrap:wrap!important}
  .ci-campaign-listbar .erp-search-box{flex-basis:calc(100% - 86px)!important;min-width:0!important}
}

/* Native select arrows + our shared CSS arrow created a doubled chevron on
   Rows/Page and other dropdowns in some browsers. Hide the native arrow and
   keep the one shared visual indicator. */
.content select.input,.content .ci-mini-select,.content select[name="page_size"]{
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  appearance:none!important;
}

/* V-91 FINAL SEARCH ICON HARDENING ------------------------------------
   One magnifier only. The canonical SVG in .erp-global-search-shell is the
   sole desktop search icon. Suppress legacy input background icons in every
   state, including :focus, where older rules had higher specificity. */
.erp-global-search-shell > input.toko-search,
.erp-global-search-shell > input.toko-search:focus,
.erp-global-search-shell > input.erp-search-input,
.erp-global-search-shell > input.erp-search-input:focus,
.erp-global-search-shell > input.erp-global-search-input,
.erp-global-search-shell > input.erp-global-search-input:focus,
.erp-global-search-shell > .erp-search-control > input.toko-search,
.erp-global-search-shell > .erp-search-control > input.toko-search:focus,
.erp-global-search-shell > .erp-search-control > input.erp-search-input,
.erp-global-search-shell > .erp-search-control > input.erp-search-input:focus{
  background-image:none!important;
  background-repeat:no-repeat!important;
  padding-left:36px!important;
}
/* Hide any legacy glyph/icon that survives inside a canonical shell. */
.erp-global-search-shell > .erp-search-control-icon,
.erp-global-search-shell > .toko-search-glyph-hidden{display:none!important}

/* V-91 FINAL UI CORRECTIONS -------------------------------------------
   1) One dropdown indicator in filter drawers.
   2) Search placeholders never sit under the magnifier.
   3) Commercial dropdown menus push content down instead of covering search.
   4) Data Quality heading stays left aligned as requested. */

/* Drawer selects: suppress the browser/native arrow everywhere the drawer is
   mounted (drawers live outside .content), then draw one shared chevron only. */
.erp-side-drawer select,
.erp-side-drawer select.input,
.erp-side-drawer .field select{
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  appearance:none!important;
  background-image:linear-gradient(45deg,transparent 50%,#718096 50%),linear-gradient(135deg,#718096 50%,transparent 50%)!important;
  background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%!important;
  background-size:4px 4px,4px 4px!important;
  background-repeat:no-repeat!important;
  padding-right:30px!important;
}

/* Canonical desktop search shell: exactly one SVG icon and permanent text
   clearance in normal, hover, focus, autofill and user/activity list states. */
.erp-global-search-shell{
  position:relative!important;
}
.erp-global-search-shell > .erp-search-leading-icon{
  left:12px!important;
  width:16px!important;
  height:16px!important;
  z-index:3!important;
}
.erp-global-search-shell > input,
.erp-global-search-shell > input:hover,
.erp-global-search-shell > input:focus,
.erp-global-search-shell > input:active,
.erp-global-search-shell > input.erp-global-search-input,
.erp-global-search-shell > input.erp-global-search-input:focus,
.erp-global-search-shell > input.toko-search,
.erp-global-search-shell > input.toko-search:focus,
.erp-global-search-shell > .erp-search-control > input,
.erp-global-search-shell > .erp-search-control > input:focus{
  padding-left:39px!important;
  background-image:none!important;
  text-indent:0!important;
}
.erp-global-search-shell > .erp-search-control-icon,
.erp-global-search-shell > .toko-search-glyph-hidden,
.erp-global-search-shell > span:not(.erp-search-leading-icon){display:none!important}
body.toko-page-users .erp-global-search-shell input,
body.toko-page-activity .erp-global-search-shell input{padding-left:39px!important}

/* Commercial navigation dropdowns must not float over the next search/table
   command bar. Opening a group expands the navigation row and pushes the
   following content down. This applies to Product Sales, Campaigns, Pareto,
   SKU Productivity, Targets, Outlet reports and matching CI pages. */
body.toko-module-commercial .commercial-group-nav > details[open],
body.toko-module-reports .commercial-group-nav > details[open]{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  position:relative!important;
}
body.toko-module-commercial .commercial-group-nav > details[open] > div,
body.toko-module-reports .commercial-group-nav > details[open] > div{
  position:static!important;
  inset:auto!important;
  margin-top:5px!important;
  min-width:230px!important;
  max-width:min(420px,92vw)!important;
  z-index:auto!important;
}
body.toko-module-commercial .commercial-nav-row,
body.toko-module-reports .commercial-nav-row{
  align-items:flex-start!important;
  overflow:visible!important;
}

/* Commercial Data Quality only: keep the explanatory title line visible and
   align it to the left. No other layout/content on this page is changed. */
.ci-data-quality-head{
  display:flex!important;
  justify-content:flex-start!important;
  align-items:baseline!important;
  gap:5px!important;
  width:100%!important;
  margin:0 0 8px!important;
  padding:0!important;
  min-height:0!important;
  text-align:left!important;
}
.ci-data-quality-head h1{margin:0!important;font-size:1rem!important;white-space:nowrap!important}
.ci-data-quality-head p{margin:0!important;text-align:left!important}


/* V-91 — Commercial Intelligence navigation stabilization.
   Keep Dashboard / Sales & Products / Outlets & Targets / Promotions & Data
   on one steady horizontal baseline. The opened menu is absolute below its
   trigger; the nav row reserves vertical room so it never covers the next
   search/content block. */
@media (min-width:901px){
  body.toko-module-commercial .commercial-nav-row,
  body.toko-module-reports .commercial-nav-row{
    align-items:center!important;
    overflow:visible!important;
  }
  body.toko-module-commercial .commercial-group-nav,
  body.toko-module-reports .commercial-group-nav{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    overflow:visible!important;
  }
  body.toko-module-commercial .commercial-group-nav > details,
  body.toko-module-reports .commercial-group-nav > details,
  body.toko-module-commercial .commercial-group-nav > details[open],
  body.toko-module-reports .commercial-group-nav > details[open]{
    display:block!important;
    position:relative!important;
    flex:0 0 auto!important;
  }
  body.toko-module-commercial .commercial-group-nav > details[open] > div,
  body.toko-module-reports .commercial-group-nav > details[open] > div{
    position:absolute!important;
    top:calc(100% + 5px)!important;
    left:0!important;
    right:auto!important;
    margin-top:0!important;
    min-width:230px!important;
    max-width:min(420px,92vw)!important;
    z-index:2500!important;
  }
  /* V-91: dropdowns float above the current page. Opening a menu must
     never enlarge the white navigation panel or push report/search content down. */
  body.toko-module-commercial .commercial-nav-row:has(.commercial-group-nav > details[open]),
  body.toko-module-reports .commercial-nav-row:has(.commercial-group-nav > details[open]){
    padding-bottom:6px!important;
    min-height:0!important;
  }
  body.toko-module-commercial .commercial-nav-main,
  body.toko-module-reports .commercial-nav-main{
    overflow:visible!important;
  }
  body.toko-module-commercial .commercial-group-nav > details[open] > div,
  body.toko-module-reports .commercial-group-nav > details[open] > div{
    box-shadow:0 10px 28px rgba(15,35,58,.16)!important;
    background:#fff!important;
  }
}

/* V-91 FINAL — icon hardening + one import language everywhere ---------
   Search: one real SVG element only. Selects: one shared chevron only.
   Import modals reuse the Product Master upload/map/import visual language. */
input.erp-search-input,
input.toko-search,
input.erp-global-search-input,
input.ci-table-search,
input.multi-filter-search,
.erp-global-search-shell > input,
.erp-global-search-shell > input:hover,
.erp-global-search-shell > input:focus,
.erp-global-search-shell > input:active,
.erp-global-search-shell > .erp-search-control > input,
.erp-global-search-shell > .erp-search-control > input:hover,
.erp-global-search-shell > .erp-search-control > input:focus{
  background-image:none!important;
  background-repeat:no-repeat!important;
}
.erp-global-search-shell{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
}
.erp-global-search-shell > .erp-search-leading-icon{
  position:absolute!important;
  left:11px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:grid!important;
  place-items:center!important;
  width:17px!important;
  height:17px!important;
  color:#65758a!important;
  pointer-events:none!important;
  z-index:5!important;
}
.erp-global-search-shell > .erp-search-leading-icon svg{
  width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;
  stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important
}
.erp-global-search-shell > input,
.erp-global-search-shell > .erp-search-control > input{
  padding-left:38px!important;
  text-indent:0!important;
}
.erp-global-search-shell > .erp-search-control-icon,
.erp-global-search-shell > .toko-search-glyph-hidden{display:none!important}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  display:none!important;-webkit-appearance:none!important
}
.modal-filters > .erp-modal-filter-search-shell{min-width:0!important}
@media(max-width:900px){.modal-filters > .erp-modal-filter-search-shell{grid-column:1/-1!important}}

/* Native arrows are suppressed globally, including modal/filter controls that
   live outside .content. The shared CSS chevron remains the only indicator. */
select.input,
select.ci-mini-select,
select[name="page_size"]{
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  appearance:none!important;
  background-image:linear-gradient(45deg,transparent 50%,#718096 50%),linear-gradient(135deg,#718096 50%,transparent 50%)!important;
  background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%!important;
  background-size:4px 4px,4px 4px!important;
  background-repeat:no-repeat!important;
  padding-right:30px!important;
}
select.input::-ms-expand,select.ci-mini-select::-ms-expand{display:none!important}
.multi-filter-button{
  background-image:linear-gradient(45deg,transparent 50%,#718096 50%),linear-gradient(135deg,#718096 50%,transparent 50%)!important;
  background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%!important;
  background-size:4px 4px,4px 4px!important;
  background-repeat:no-repeat!important;
  padding-right:30px!important;
}
.multi-filter-button::after{display:none!important;content:none!important}

/* Standard import modal — visually matches Product Master Import without
   changing any form endpoint, field name, validation or import logic. */
.erp-standard-import-modal .erp-standard-import-card{
  width:min(760px,96vw)!important;
  max-height:min(92vh,860px)!important;
  overflow:auto!important;
}
.erp-standard-import-modal .erp-import-stepper-modal{
  max-width:none!important;
  margin:14px 18px 6px!important;
  padding:0!important;
}
.erp-standard-import-form{padding:14px 18px 18px!important}
.erp-standard-import-form > .erp-standard-file-zone,
.erp-standard-import-form .erp-standard-file-zone{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  align-items:center!important;
  gap:6px 12px!important;
  padding:16px!important;
  margin:0 0 12px!important;
  border:1.5px dashed #aebed0!important;
  border-radius:13px!important;
  background:#f8fbff!important;
}
.erp-standard-file-zone > .erp-upload-icon{
  grid-column:1!important;grid-row:1/3!important;
  width:42px!important;height:42px!important;margin:0!important
}
.erp-standard-file-zone > label{grid-column:2!important;margin:0!important}
.erp-standard-file-zone > input[type="file"]{grid-column:2!important;width:100%!important;min-width:0!important}
.erp-standard-import-actions{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:8px!important;flex-wrap:wrap!important;margin-top:10px!important
}
.bulk-import-modal.erp-standard-import-modal{width:min(760px,96vw)!important}
.bulk-import-drop.erp-standard-file-zone{
  display:grid!important;
  grid-template-columns:48px minmax(180px,1fr) auto!important;
  align-items:center!important;text-align:left!important;justify-items:stretch!important;
  gap:12px!important;padding:16px!important
}
.bulk-import-drop.erp-standard-file-zone > .erp-upload-icon{grid-column:1!important;grid-row:1!important}
.bulk-import-drop.erp-standard-file-zone > .erp-standard-file-copy{grid-column:2!important}
.bulk-import-drop.erp-standard-file-zone > [data-bulk-choose]{grid-column:3!important}
.erp-standard-file-copy{display:grid!important;gap:2px!important;min-width:0!important}
.erp-standard-file-copy strong{overflow-wrap:anywhere!important}
.erp-standard-file-copy small{color:var(--muted)!important}
@media(max-width:640px){
  .erp-standard-import-modal .erp-import-stepper-modal{margin:12px!important}
  .erp-standard-import-form{padding:12px!important}
  .bulk-import-drop.erp-standard-file-zone{grid-template-columns:1fr!important;text-align:left!important}
  .bulk-import-drop.erp-standard-file-zone > *{grid-column:1!important;grid-row:auto!important}
  .bulk-import-drop.erp-standard-file-zone > .erp-upload-icon{display:grid!important}
  .bulk-import-drop.erp-standard-file-zone > [data-bulk-choose]{width:100%!important}
}
.ci-standard-import{display:grid!important;gap:10px!important;margin:0!important}
.ci-standard-import .erp-upload-zone{margin:0!important}
.ci-import-options{display:grid!important;gap:5px!important;padding:10px 12px!important;border:1px solid var(--toko-line,#d9e2ec)!important;border-radius:9px!important;background:#fbfcfe!important}
.ci-import-options label{display:flex!important;align-items:flex-start!important;gap:8px!important;font-weight:700!important}
/* Cover Commercial Intelligence and other legacy single-select controls that
   do not carry .input: one native arrow is removed and one shared chevron is drawn. */
.content select:not([multiple]),
.modal-overlay select:not([multiple]),
.erp-modal select:not([multiple]),
.ci-modal-backdrop select:not([multiple]){
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  appearance:none!important;
  background-image:linear-gradient(45deg,transparent 50%,#718096 50%),linear-gradient(135deg,#718096 50%,transparent 50%)!important;
  background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%!important;
  background-size:4px 4px,4px 4px!important;
  background-repeat:no-repeat!important;
  padding-right:30px!important;
}

/* V-91 focused UI fixes: Users, Campaign & Promotion, Roles & Permissions */
.toko-page-roles .roles-workspace{padding:0!important;overflow:hidden!important}
.toko-page-roles .roles-commandbar{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;min-height:48px!important;padding:9px 12px!important;
  border-bottom:1px solid var(--border,#d9e2ec)!important;background:#fff!important;
}
.toko-page-roles .roles-commandbar .roles-title{min-width:0!important}
.toko-page-roles .roles-commandbar .roles-title h2{margin:0!important;font-size:14px!important}
.toko-page-roles .roles-commandbar .roles-title p{margin:2px 0 0!important;font-size:11px!important;color:#718096!important}
.toko-page-roles .roles-commandbar .roles-actions{display:flex!important;align-items:center!important;gap:6px!important;margin-left:auto!important}
.toko-page-roles .roles-workspace>.table-wrap{margin-top:0!important}

.toko-module-commercial .campaign-workspace{overflow:visible!important}
.toko-module-commercial .campaign-workspace>.panel-head.erp-table-commandbar{
  padding:10px 12px!important;min-height:52px!important;align-items:center!important;
  gap:12px!important;border-bottom:1px solid var(--border,#d9e2ec)!important;
}
.toko-module-commercial .campaign-workspace .erp-command-actions.ci-actions{
  display:flex!important;align-items:center!important;gap:7px!important;flex:1 1 520px!important;
}
.toko-module-commercial .campaign-workspace .erp-search-box{position:relative!important;min-width:280px!important;max-width:none!important}
.toko-module-commercial .campaign-workspace .erp-search-box input.toko-search,
.toko-module-commercial .campaign-workspace .erp-search-box input.toko-search:focus{
  padding-left:40px!important;background-position:12px 50%!important;
}
.toko-module-commercial .campaign-workspace>.table-wrap{margin-top:0!important}

/* Stock Transfer Adjustment transfer number type-to-search picker */
.sta-transfer-search{position:relative;max-width:760px}
.sta-transfer-search-input{padding-left:12px!important}
.sta-transfer-options{position:absolute;z-index:1200;left:0;right:0;top:calc(100% + 4px);max-height:280px;overflow:auto;background:#fff;border:1px solid #cfd9e5;border-radius:8px;box-shadow:0 12px 30px rgba(15,23,42,.12)}
.sta-transfer-option{display:block;width:100%;padding:9px 11px;border:0;border-bottom:1px solid #edf1f5;background:#fff;text-align:left;cursor:pointer}
.sta-transfer-option:hover,.sta-transfer-option:focus{background:#f4f8fc;outline:none}
.sta-transfer-option strong{display:block;font-size:12px}
.sta-transfer-option small{display:block;margin-top:2px;color:#718096}

/* V-91 — Supplier-pattern corrections + completed Stock Transfer Adjustment */
/* Users / Roles / Campaigns now use the same compact page-head + toolbar rhythm
   as Supplier Master. Keep one real search icon with guaranteed text clearance. */
.toko-module-commercial .campaign-workspace .erp-global-search-shell > input,
.toko-module-commercial .campaign-workspace .erp-global-search-shell > input:focus{
  padding-left:40px!important;
  text-indent:0!important;
}
.toko-page-users .compact-panel>.toolbar,
.toko-page-roles .compact-panel>.toolbar,
.toko-module-commercial .campaign-workspace>.toolbar{
  margin:0!important;
  border-radius:10px 10px 0 0!important;
}
.toko-page-roles .compact-panel,
.toko-page-users .compact-panel,
.toko-module-commercial .campaign-workspace{overflow:visible!important}
.toko-page-roles .compact-panel>.table-wrap,
.toko-page-users .compact-panel>.table-wrap,
.toko-module-commercial .campaign-workspace>.table-wrap{margin-top:0!important}

.ci-campaign-toolbar{display:flex!important;align-items:center!important;gap:9px!important;flex-wrap:wrap!important}
.ci-campaign-toolbar>.field.grow{flex:1 1 520px!important;min-width:300px!important}
.ci-campaign-count{display:flex!important;align-items:baseline!important;gap:5px!important;margin-left:auto!important;white-space:nowrap!important;color:#718096!important;font-size:.72rem!important;padding:0 3px!important}
.ci-campaign-count strong{color:#20344d!important;font-size:.82rem!important}
@media(max-width:700px){
  .ci-campaign-toolbar>.field.grow{min-width:100%!important;flex-basis:100%!important}
  .ci-campaign-count{margin-left:0!important}
}

/* Stock Transfer Adjustment: real transfer picker and exact adjustment table. */
.sta-list-filterbar>.field:not(.grow){flex:0 1 165px!important;min-width:145px!important}
.sta-list-filterbar>.sta-date-field{flex-basis:150px!important}
.sta-transfer-picker{max-width:780px!important;margin-bottom:13px!important}
.sta-transfer-search{position:relative!important;max-width:780px!important}
.sta-transfer-options{position:absolute!important;z-index:1400!important;left:0!important;right:0!important;top:calc(100% + 5px)!important;max-height:320px!important;overflow:auto!important;background:#fff!important;border:1px solid #cfd9e5!important;border-radius:10px!important;box-shadow:0 16px 38px rgba(15,23,42,.16)!important}
.sta-transfer-option{display:block!important;width:100%!important;padding:10px 12px!important;border:0!important;border-bottom:1px solid #edf1f5!important;background:#fff!important;text-align:left!important;cursor:pointer!important;color:#223650!important}
.sta-transfer-option:last-child{border-bottom:0!important}
.sta-transfer-option:hover,.sta-transfer-option:focus{background:#f3f7fc!important;outline:none!important}
.sta-transfer-option strong{display:block!important;font-size:.82rem!important;color:#17375e!important}
.sta-transfer-option span{display:block!important;margin-top:2px!important;font-size:.74rem!important;color:#3f536d!important}
.sta-transfer-option small{display:block!important;margin-top:3px!important;font-size:.68rem!important;color:#718096!important}
.sta-transfer-loading{padding:12px!important;color:#718096!important;font-size:.75rem!important}

.sta-transfer-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.sta-items-table{min-width:900px!important}
.sta-items-table th:nth-child(1){width:52px!important}
.sta-items-table th:nth-child(2){min-width:260px!important}
.sta-items-table th:nth-child(3){width:145px!important}
.sta-items-table th:nth-child(4){width:90px!important}
.sta-items-table th:nth-child(5){min-width:180px!important}
.sta-items-table th:nth-child(6){min-width:250px!important}
.sta-items-table th:nth-child(7){width:92px!important}
.sta-items-readonly th:nth-child(6){min-width:280px!important}
.sta-empty-row td{height:58px!important}
.sta-audit-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;border:1px solid #e3eaf2!important;border-radius:10px!important;overflow:hidden!important}
.sta-audit-grid>div{display:block!important;padding:10px 12px!important;border:0!important;border-right:1px solid #e8edf3!important;min-width:0!important}
.sta-audit-grid>div:last-child{border-right:0!important}
.sta-audit-grid span{display:block!important;margin:0 0 4px!important;font-size:.68rem!important;color:#718096!important}
.sta-audit-grid strong{display:block!important;font-size:.79rem!important;color:#17375e!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.sta-audit-grid small{display:block!important;margin-top:3px!important;color:#75869b!important;font-size:.67rem!important}
@media(max-width:1050px){.sta-audit-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sta-audit-grid>div:nth-child(2){border-right:0!important}.sta-audit-grid>div:nth-child(-n+2){border-bottom:1px solid #e8edf3!important}}
@media(max-width:700px){.sta-list-filterbar>.field:not(.grow),.sta-list-filterbar>.sta-date-field{flex:1 1 100%!important;min-width:100%!important}.sta-audit-grid{grid-template-columns:1fr!important}.sta-audit-grid>div{border-right:0!important;border-bottom:1px solid #e8edf3!important}.sta-audit-grid>div:last-child{border-bottom:0!important}}


/* V-91 — Users + Roles search now follow the Outlets search control exactly.
   One canonical SVG magnifier, identical icon position and text clearance on all
   three pages. No page-specific search background/glyph is allowed. */
.outlet-search-pattern .erp-global-search-shell{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
}
.outlet-search-pattern .erp-global-search-shell > .erp-search-leading-icon{
  left:11px!important;
  width:17px!important;
  height:17px!important;
  z-index:3!important;
}
.outlet-search-pattern .erp-global-search-shell > input,
.outlet-search-pattern .erp-global-search-shell > input:hover,
.outlet-search-pattern .erp-global-search-shell > input:focus,
.outlet-search-pattern .erp-global-search-shell > input:active{
  padding-left:42px!important;
  text-indent:0!important;
  background-image:none!important;
  background-repeat:no-repeat!important;
}
.outlet-search-pattern .erp-global-search-shell > span:not(.erp-search-leading-icon),
.outlet-search-pattern .erp-global-search-shell > .erp-search-control-icon{
  display:none!important;
}


/* V-91 — Login logo fit -------------------------------------------------
   The Toko Warisan artwork has generous vertical canvas space.  A wide login
   frame with cover-fit trims only that empty canvas and keeps the full oval
   mark visually centred inside the login identity area. */
.login-logo {
  align-items: center !important;
}
.login-logo .login-brand-logo {
  width: 72px !important;
  height: 48px !important;
  min-width: 72px !important;
  flex: 0 0 72px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid var(--toko-line) !important;
  box-shadow: 0 2px 8px rgba(31, 51, 73, .06) !important;
}
.login-logo .login-brand-logo .brand-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #fff !important;
  transform: none !important;
}
@media(max-width:520px) {
  .login-logo .login-brand-logo {
    width: 66px !important;
    height: 44px !important;
    min-width: 66px !important;
    flex-basis: 66px !important;
  }
}

/* V-91 UI consistency pass — 2026-09-13 ---------------------------------
   Shared form help, compact filters, readable table headings and navigation.
   These rules are presentation-only and deliberately do not change ERP data. */
.field > label{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  min-height:18px;
  line-height:1.2!important;
}
.field > label > .erp-info-icon,
.field > label > .erp-title-info{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  border-radius:50%!important;
  padding:0!important;
  font-size:.65rem!important;
  line-height:1!important;
  text-transform:none!important;
  letter-spacing:0!important;
  flex:0 0 18px!important;
}
.erp-auto-help-source,
.erp-panel-help-source{display:none!important}
.erp-info-popover{
  width:max-content!important;
  max-width:min(500px,calc(100vw - 28px))!important;
  max-height:min(62vh,520px)!important;
  overflow:auto!important;
  padding:14px 16px!important;
  border:1px solid #cbd7e5!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#24364d!important;
  box-shadow:0 18px 48px rgba(15,23,42,.22)!important;
  font-size:.9rem!important;
  line-height:1.5!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:normal!important;
}
.form-grid .span-3{grid-column:span 3}
.product-master-form .product-identity-grid{align-items:start!important}
.product-master-form .product-identity-grid .field{min-width:0!important}
.product-master-form #productCostPanel .cost-sequence{
  width:100%!important;
  margin-left:0!important;
}
.product-master-form #productCostPanel .cost-sequence-row{
  grid-template-columns:28px minmax(260px,1fr) minmax(140px,190px)!important;
}
.product-master-form #productCostPanel .compact-price-fields{align-items:start!important}

/* Give command/search surfaces visible breathing room inside their card. */
.erp-filter-host-panel > .erp-unified-filterbar,
.filter-panel > .erp-unified-filterbar{
  width:calc(100% - 16px)!important;
  margin:8px!important;
  border:1px solid var(--toko-line)!important;
  border-radius:10px!important;
  box-shadow:0 2px 7px rgba(31,51,73,.04)!important;
}
.erp-filter-host-panel > .erp-active-filter-chips,
.filter-panel > .erp-active-filter-chips{
  margin:0 8px 8px!important;
  padding-left:2px!important;
  padding-right:2px!important;
}
.erp-filter-host-panel > .erp-table-pager,
.filter-panel > .erp-table-pager{border-top:1px solid var(--toko-line)!important}

/* Full table headings without widening columns: wrap to two/three lines and
   expose the full wording through the native title tooltip as well. */
.erp-global-table-workspace .data-table thead th,
.data-table thead th{
  white-space:normal!important;
  line-height:1.16!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  vertical-align:middle!important;
  min-height:38px!important;
}
.data-table th.sortable{padding-right:24px!important}
.data-table th.sortable::after{top:50%!important;transform:translateY(-50%)!important}

/* Meaningful desktop navigation toggle: arrow points toward the action. */
#sidebarToggle::before{content:'⇤'!important;font-size:18px!important;font-weight:900!important;line-height:1!important}
body.toko-sidebar-collapsed #sidebarToggle::before{content:'⇥'!important}
#sidebarToggle:hover{background:#eef4fb!important;border-color:#b9c8da!important;color:#244c77!important}

/* Bills, Accounting and GST workspaces use the same calm card/table rhythm. */
body.toko-module-accounting .panel,
.accounting-launch-panel{border-radius:11px!important}
body.toko-module-accounting .panel-head{padding:11px 13px!important}
body.toko-module-accounting .panel-body{padding:12px 13px!important}
body.toko-module-accounting .table-wrap{border-top:0!important}
body.toko-module-accounting .accounting-inline-search{min-width:min(360px,100%)!important}

@media(max-width:800px){
  .form-grid .span-3{grid-column:1/-1}
  .product-master-form #productCostPanel .cost-sequence-row{grid-template-columns:24px minmax(0,1fr) auto!important}
  .erp-filter-host-panel > .erp-unified-filterbar,
  .filter-panel > .erp-unified-filterbar{width:calc(100% - 12px)!important;margin:6px!important}
  #sidebarToggle::before,body.toko-sidebar-collapsed #sidebarToggle::before{content:'☰'!important;font-size:16px!important}
  .erp-info-popover{max-width:calc(100vw - 20px)!important;font-size:.9rem!important;padding:13px 14px!important}
}
@media(max-width:1200px) and (min-width:801px){
  .form-grid .span-3{grid-column:span 2}
}

/* V-91 final UI consistency: all information popovers use the same readable
   large format, including the generic UI controller and Commercial module. */
.erp-ui-help-popover,
.ci-info-pop{
  width:min(500px,calc(100vw - 28px))!important;
  max-width:min(500px,calc(100vw - 28px))!important;
  max-height:min(62vh,520px)!important;
  overflow:auto!important;
  padding:14px 16px!important;
  border-radius:11px!important;
  font-size:.9rem!important;
  line-height:1.5!important;
  box-shadow:0 18px 48px rgba(15,23,42,.22)!important;
}
@media(max-width:800px){
  .erp-ui-help-popover,.ci-info-pop{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;padding:13px 14px!important;font-size:.9rem!important}
}

/* Accounting detail tables use the same search/export command row as the
   register pages. */
body.toko-module-accounting .accounting-detail-panel>.erp-table-commandbar{
  padding:8px 10px!important;
  min-height:42px!important;
}
body.toko-module-accounting .accounting-detail-panel .erp-command-actions{
  margin-left:auto!important;
  flex:1 1 520px!important;
}
body.toko-module-accounting .accounting-detail-panel .accounting-inline-search{
  flex:1 1 300px!important;
  max-width:480px!important;
}

/* V91 UI pass — compact help for legacy label-wrapped controls. */
label.erp-label-help-host{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:6px;
}
label.erp-label-help-host > .input,
label.erp-label-help-host > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
label.erp-label-help-host > select,
label.erp-label-help-host > textarea,
label.erp-label-help-host > .ci-input-prefix,
label.erp-label-help-host > .relative,
label.erp-label-help-host > [class*="input"]{
  grid-column:1 / -1;
}
label.erp-label-help-host > .erp-info-icon{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  margin:0 0 2px 2px;
}
label.erp-label-help-host > .erp-auto-help-source{display:none!important;}


/* V-91 field-help alignment fix — field-level help must never change control
   height or input alignment. Page-level Info utilities keep their normal
   button treatment; help inside a form label is a tiny plain question mark. */
.field > label{position:relative!important;min-height:16px!important;line-height:16px!important;gap:3px!important}
.field > label .erp-info-icon,
.field > label .erp-ui-help-button,
label.erp-label-help-host > .erp-info-icon,
label.erp-label-help-host > .erp-ui-help-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0 0 0 2px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#607086!important;
  font-size:0!important;
  font-weight:800!important;
  line-height:1!important;
  vertical-align:baseline!important;
  flex:0 0 auto!important;
}
.field > label .erp-info-icon::before,
.field > label .erp-ui-help-button::before,
label.erp-label-help-host > .erp-info-icon::before,
label.erp-label-help-host > .erp-ui-help-button::before{
  content:'?'!important;
  display:inline!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:800!important;
  text-decoration:none!important;
}
.field > label .erp-info-icon:hover,
.field > label .erp-ui-help-button:hover,
label.erp-label-help-host > .erp-info-icon:hover,
label.erp-label-help-host > .erp-ui-help-button:hover{
  background:transparent!important;
  color:#244c77!important;
  text-decoration:underline!important;
}
.field > .erp-info-icon[data-erp-info],
.field > .erp-ui-help-button[data-erp-info]{display:none!important}

/* V-91 optional Accounting/GST integration switch.
   This is a true feature-state control, visually distinct from ordinary
   checkboxes while remaining keyboard/screen-reader accessible. */
.accounting-switch-field{padding-top:2px!important}
.erp-feature-switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer;user-select:none;max-width:100%}
.erp-feature-switch>input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.erp-feature-switch-track{position:relative;display:inline-flex;align-items:center;flex:0 0 48px;width:48px;height:26px;border-radius:999px;background:#cbd5e1;border:1px solid #b7c3d2;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.erp-feature-switch-knob{position:absolute;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.28);transition:transform .18s ease}
.erp-feature-switch>input:checked+.erp-feature-switch-track{background:#2563eb;border-color:#2563eb}
.erp-feature-switch>input:checked+.erp-feature-switch-track .erp-feature-switch-knob{transform:translateX(22px)}
.erp-feature-switch>input:focus-visible+.erp-feature-switch-track{box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.erp-feature-switch-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.erp-feature-switch-copy strong{font-size:.82rem;color:var(--text,#10213a)}
.erp-feature-switch-copy small{font-size:.72rem;color:var(--muted,#64748b);line-height:1.25}
@media(max-width:640px){.erp-feature-switch{align-items:flex-start}.erp-feature-switch-track{margin-top:2px}}


/* V-91.4 — Login identity: keep the complete Toko Warisan mark visible and
   aligned with the company name at the top of the card. */
.login-logo{align-items:flex-start!important;gap:14px!important;margin-bottom:22px!important}
.login-logo .login-brand-logo{
  width:96px!important;height:58px!important;min-width:96px!important;flex:0 0 96px!important;
  padding:4px!important;overflow:visible!important;border-radius:12px!important;background:#fff!important;
}
.login-logo .login-brand-logo .brand-logo{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
.login-logo>div{min-width:0;padding-top:2px}
.login-logo h1{line-height:1.12!important;margin:0!important}
.login-logo p{margin:6px 0 0!important;line-height:1.3!important}
@media(max-width:520px){
  .login-card{padding:24px 20px!important}
  .login-logo{display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;align-items:start!important;gap:12px!important}
  .login-logo .login-brand-logo{width:88px!important;height:54px!important;min-width:88px!important;flex-basis:88px!important}
  .login-logo h1{font-size:1.35rem!important}
}

/* V-91.5 Document Center */
.document-center-head{margin-bottom:12px}
.document-center-head p{max-width:900px}
.document-center-hero{overflow:hidden;background:linear-gradient(135deg,#f7fbff 0%,#eef6ff 55%,#f7fbff 100%);border-color:#cfe0f1}
.document-center-intro{display:flex;align-items:center;justify-content:space-between;gap:24px}
.document-center-intro>div{max-width:820px}
.document-center-kicker{display:block;color:#2f6596;font-size:.72rem;font-weight:800;letter-spacing:.09em;margin-bottom:6px}
.document-center-intro h2{margin:0 0 7px;color:#163b60;font-size:1.28rem}
.document-center-intro p{margin:0;color:#5d7086;line-height:1.5}
.document-center-tools{margin-top:14px}
.document-center-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.document-center-search-wrap{display:flex;flex-direction:column;gap:6px;min-width:min(100%,360px);font-weight:700;color:#334b65;font-size:.78rem}
.document-center-categories{display:flex;flex-wrap:wrap;gap:7px}
.document-center-categories .chip{border:1px solid #cfdbe8;background:#fff;color:#435c75;border-radius:999px;padding:7px 11px;font-size:.74rem;font-weight:700;cursor:pointer}
.document-center-categories .chip.active{background:#1f5f99;color:#fff;border-color:#1f5f99}
.document-center-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.document-center-card{display:flex;flex-direction:column;min-height:230px;background:#fff;border:1px solid #d9e4ef;border-radius:14px;padding:17px;box-shadow:0 4px 14px rgba(22,56,90,.045)}
.document-center-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.document-center-pdf-badge{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:5px 8px;border-radius:8px;background:#e8f2ff;color:#174f84;font-size:.7rem;font-weight:850;letter-spacing:.04em}
.document-center-category{color:#6b7d91;font-size:.72rem;font-weight:750}
.document-center-card h2{font-size:1rem;line-height:1.3;color:#183b5e;margin:0 0 8px}
.document-center-card p{font-size:.8rem;line-height:1.5;color:#627489;margin:0 0 15px;flex:1}
.document-center-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.document-center-empty{margin-top:14px}
@media(max-width:1000px){.document-center-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .document-center-intro{align-items:flex-start;flex-direction:column;gap:14px}
  .document-center-intro .btn{width:100%;justify-content:center}
  .document-center-toolbar{align-items:stretch;flex-direction:column}
  .document-center-search-wrap{min-width:100%;width:100%}
  .document-center-categories{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px;-webkit-overflow-scrolling:touch}
  .document-center-categories .chip{flex:0 0 auto}
  .document-center-grid{grid-template-columns:1fr}
  .document-center-card{min-height:0}
  .document-center-actions .btn{flex:1;justify-content:center}
}


/* V-91.7 master/inventory Add/Edit modal size only ------------------------
   Keep all V-91.7 fields, forms, buttons and logic unchanged.  The only
   desktop change is a smaller content-fitting editor card for common master
   data records (including Warehouse / Outlet and Picking Location). Import
   dialogs and Product Add/Edit are intentionally untouched. */
@media (min-width: 901px){
  #simpleEditorModal.modal-overlay,
  #subEditorModal.modal-overlay,
  #subSubEditorModal.modal-overlay,
  #rateModal.modal-overlay,
  #unitEditorModal.modal-overlay,
  #locationEditorModal.modal-overlay,
  #sourceEditorModal.modal-overlay{
    place-items:start center!important;
    padding:6vh 4vw 28px!important;
  }
  #simpleEditorModal>.erp-modal-card,
  #subEditorModal>.erp-modal-card,
  #subSubEditorModal>.erp-modal-card,
  #rateModal>.erp-modal-card,
  #unitEditorModal>.erp-modal-card,
  #locationEditorModal>.erp-modal-card,
  #sourceEditorModal>.erp-modal-card{
    width:min(840px,68vw)!important;
    min-height:0!important;
    height:auto!important;
    max-height:78vh!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #simpleEditorModal>.erp-modal-card>form,
  #subEditorModal>.erp-modal-card>form,
  #subSubEditorModal>.erp-modal-card>form,
  #rateModal>.erp-modal-card>form,
  #unitEditorModal>.erp-modal-card>form,
  #locationEditorModal>.erp-modal-card>form,
  #sourceEditorModal>.erp-modal-card>form{
    flex:0 1 auto!important;
    align-content:start!important;
  }
}

/* V-91.7.3 desktop modal position standard ---------------------------------
   Desktop/backend modals open in one consistent upper-middle position.
   Mobile PWA modal behavior is intentionally untouched. Filter side drawers
   are a separate component and are intentionally untouched. */
@media (min-width: 901px){
  body:not(.mobile-app-body) .modal-overlay:not(.erp-drawer-backdrop){
    place-items:start center!important;
    align-items:start!important;
    justify-content:center!important;
    padding-top:8vh!important;
    padding-bottom:28px!important;
    overflow:auto!important;
  }
  body:not(.mobile-app-body) .modal-overlay:not(.erp-drawer-backdrop) > .modal-card,
  body:not(.mobile-app-body) .modal-overlay:not(.erp-drawer-backdrop) > .erp-modal-card{
    margin:0 auto!important;
  }
  body:not(.mobile-app-body) .ci-modal-backdrop{
    padding-top:8vh!important;
    padding-bottom:28px!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:auto!important;
  }
  body:not(.mobile-app-body) .ci-modal-backdrop > .ci-modal-dialog{
    margin-top:0!important;
    margin-bottom:0!important;
  }
}


/* V-91.7.5 category hierarchy editor height ------------------------------
   Desktop only. Category, Sub Category and Sub-Sub Category Add/Edit cards
   use the same tall working height as the Supplier editor so searchable
   hierarchy pickers have room to open without compressing the dialog.
   Mobile PWA and side filter drawers are intentionally untouched. */
@media (min-width: 901px){
  body:not(.mobile-app-body) .erp-category-hierarchy-tall-modal > .erp-modal-card,
  body:not(.mobile-app-body) #subEditorModal > .erp-modal-card,
  body:not(.mobile-app-body) #subSubEditorModal > .erp-modal-card{
    height:78vh!important;
    min-height:78vh!important;
    max-height:78vh!important;
  }
}

/* Document Center searchable calculation index */
.document-center-search-hint{margin-top:10px;color:#6b7d91;font-size:.76rem;line-height:1.45}
.document-center-section-results{margin:0 0 14px;padding:10px;border:1px solid #d7e7f6;border-radius:10px;background:#f7fbff}
.document-center-section-label{font-size:.7rem;font-weight:850;letter-spacing:.035em;color:#456a8c;text-transform:uppercase;margin-bottom:6px}
.document-center-section-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px;border-radius:8px;color:#1f527f;text-decoration:none;font-size:.76rem;line-height:1.3}
.document-center-section-link:hover{background:#eaf4ff;text-decoration:none}
.document-center-section-link span{min-width:0}
.document-center-section-link strong{flex:0 0 auto;color:#5f7489;font-size:.7rem;white-space:nowrap}


/* V-91.7 — Login company identity: keep the full company name on one line
   at every supported width; scale the type down on narrow phones instead of wrapping. */
.login-card{width:min(520px,94vw)!important}
.login-logo>div{min-width:0;flex:1 1 auto}
.login-logo h1{white-space:nowrap!important;font-size:clamp(.94rem,4.1vw,1.28rem)!important;letter-spacing:-.015em}


/* V91.7.26: Reports filter drawer. Same interaction and spacing as the Products
   filter, never the old centered report modal. UI-only: original GET form and
   its selected values remain the source of truth. */
#reportFilterModal.report-filter-drawer{
  position:fixed!important;inset:0!important;z-index:18000!important;
  display:block!important;padding:0!important;margin:0!important;
  overflow:visible!important;background:rgba(24,39,60,.17)!important;
  backdrop-filter:none!important;
}
#reportFilterModal.report-filter-drawer[hidden]{display:none!important}
#reportFilterModal.report-filter-drawer>.erp-side-drawer{
  position:absolute!important;inset:0 0 0 auto!important;margin:0!important;
  width:min(410px,96vw)!important;max-width:96vw!important;
  height:100dvh!important;max-height:100dvh!important;
  display:flex!important;flex-direction:column!important;
  overflow:hidden!important;background:#fff!important;
  border-left:1px solid #d9e2ee!important;border-radius:0!important;
  box-shadow:-14px 0 34px rgba(33,48,68,.16)!important;
  transform:none!important;
}
#reportFilterModal .erp-drawer-head{
  flex:0 0 auto!important;display:flex!important;align-items:flex-start!important;
  justify-content:space-between!important;gap:12px!important;
  padding:15px 16px!important;background:#fbfdff!important;
  border-bottom:1px solid #d9e2ee!important;
}
#reportFilterModal .erp-drawer-head .icon-btn{
  flex:0 0 auto!important;display:grid!important;place-items:center!important;
  width:38px!important;height:38px!important;border:1px solid #cbd7e5!important;
  border-radius:10px!important;background:#fff!important;cursor:pointer;
}
#reportFilterModal .erp-drawer-head h2{margin:0!important;font-size:1rem!important}
#reportFilterModal .erp-drawer-head p{margin:4px 0 0!important;font-size:.73rem!important;color:#64748b!important}
#reportFilterModal .report-filter-modal-body{
  flex:1 1 auto!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  align-content:start!important;gap:11px!important;min-height:0!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior:contain!important;padding:14px 16px!important;
}
#reportFilterModal .report-filter-modal-body>.field,
#reportFilterModal .report-filter-modal-body>.field.span-2{grid-column:1/-1!important;min-width:0!important;width:100%!important}
#reportFilterModal .report-filter-modal-body .input,
#reportFilterModal .report-filter-modal-body .multi-filter-button{
  width:100%!important;min-height:40px!important;border-radius:9px!important;
  padding:9px 11px!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter{
  width:100%!important;min-width:0!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter-panel{
  position:static!important;top:auto!important;left:auto!important;
  width:100%!important;max-width:100%!important;max-height:none!important;
  margin-top:6px!important;box-shadow:none!important;z-index:auto!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter-panel[hidden]{display:none!important}
#reportFilterModal .report-filter-modal-body .multi-filter-options{
  max-height:min(220px,38dvh)!important;overflow-y:auto!important;
}
#reportFilterModal .modal-actions{
  flex:0 0 auto!important;position:sticky!important;bottom:0!important;z-index:5!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:8px!important;flex-wrap:wrap!important;padding:12px 16px!important;
  border-top:1px solid #d9e2ee!important;background:#fff!important;
  border-radius:0!important;margin:0!important;
}
#reportFilterModal .modal-actions .btn{min-height:38px!important;padding:8px 12px!important;border-radius:9px!important}
#reportFilterModal .modal-actions .btn.primary{background:#eff6ff!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important}
@media(max-width:480px){
  #reportFilterModal.report-filter-drawer>.erp-side-drawer{width:min(410px,100vw)!important;max-width:100vw!important}
  #reportFilterModal .modal-actions{gap:6px!important;padding:10px 12px!important}
  #reportFilterModal .modal-actions .btn{flex:1 1 auto!important;min-width:0!important;padding:8px 6px!important;font-size:.75rem!important}
}


/* V91.7.26: Report + Business Analytics filter field comfort.
   Matches the Products filter's padded field cards. Presentation only;
   no changes to form names, options, submission or calculation rules. */
#reportFilterModal .report-filter-modal-body > .field {
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  gap:5px!important;padding:10px!important;box-sizing:border-box!important;
  border:1px solid #e8edf3!important;border-radius:11px!important;
  background:#fbfcfe!important;margin:0!important;
}
#reportFilterModal .report-filter-modal-body > .field > label{
  display:block!important;margin:0 0 3px!important;font-size:.72rem!important;
  font-weight:800!important;color:#465c75!important;line-height:1.35!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter-button,
#reportFilterModal .report-filter-modal-body select.input,
#reportFilterModal .report-filter-modal-body input.input{
  min-height:42px!important;height:42px!important;box-sizing:border-box!important;
  padding:9px 32px 9px 11px!important;border:1px solid #cbd8ea!important;
  border-radius:10px!important;background-color:#fff!important;
}
#reportFilterModal .report-filter-modal-body input[type='date'].input{
  padding-right:11px!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter-panel{
  padding:9px!important;border:1px solid #dce5f0!important;
  border-radius:10px!important;background:#fff!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter-search{
  display:block!important;box-sizing:border-box!important;width:100%!important;
  min-height:40px!important;margin:0 0 9px!important;padding:8px 11px!important;
  border:1px solid #cbd8ea!important;border-radius:9px!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter-tools{
  display:flex!important;gap:7px!important;justify-content:flex-start!important;
  padding:0 0 9px!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter-tools button{
  min-height:34px!important;padding:6px 11px!important;
  border:1px solid #d3dfeb!important;border-radius:8px!important;
  background:#f8fafc!important;color:#37577c!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter-option{
  padding:9px 10px!important;column-gap:10px!important;
  border-bottom:1px solid #eef2f6!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter-options{
  padding:4px!important;box-sizing:border-box!important;
}
#reportFilterModal .report-filter-modal-body .multi-filter-option input[type=checkbox]{
  margin:2px 0 0!important;
}

/* Business Analytics: same Product Master field rhythm and sufficient room
   around the category/outlet/supplier search, option list and bulk controls. */
.ci-shell .erp-side-drawer .erp-drawer-form{
  padding:14px 15px 17px!important;gap:11px!important;min-width:0!important;
}
.ci-shell .erp-side-drawer .erp-drawer-form > label:not(.ci-inline-check),
.ci-shell .erp-side-drawer .erp-drawer-form > details.ci-multi,
.ci-shell .erp-side-drawer .ci-filter-group > label:not(.ci-inline-check),
.ci-shell .erp-side-drawer .ci-filter-group > details.ci-multi{
  box-sizing:border-box!important;min-width:0!important;width:100%!important;
  padding:10px!important;margin:0!important;
  border:1px solid #e8edf3!important;border-radius:11px!important;
  background:#fbfcfe!important;
}
.ci-shell .erp-side-drawer .ci-filter-group{
  min-width:0!important;gap:10px!important;
}
.ci-shell .erp-side-drawer details.ci-multi > summary{
  box-sizing:border-box!important;width:100%!important;min-height:42px!important;
  padding:10px 34px 10px 12px!important;border:1px solid #cbd8ea!important;
  border-radius:10px!important;background:#fff!important;
  color:#34465e!important;line-height:20px!important;
}
.ci-shell .erp-side-drawer details.ci-multi > summary:after{
  top:50%!important;transform:translateY(-50%)!important;right:12px!important;
}
.ci-shell .erp-side-drawer details.ci-multi[open] > summary{
  border-color:#7ca6d9!important;box-shadow:0 0 0 3px rgba(71,126,184,.09)!important;
}
.ci-shell .erp-side-drawer .ci-multi-pop{
  box-sizing:border-box!important;min-width:0!important;width:100%!important;
  max-width:100%!important;margin:8px 0 0!important;padding:11px!important;
  border:1px solid #dce5f0!important;border-radius:11px!important;
  background:#fff!important;box-shadow:none!important;
}
.ci-shell .erp-side-drawer .ci-multi-pop > input[type=search]{
  display:block!important;box-sizing:border-box!important;min-width:0!important;
  width:100%!important;min-height:42px!important;height:42px!important;
  margin:0 0 10px!important;padding:9px 12px!important;
  border:1px solid #cbd8ea!important;border-radius:10px!important;background:#fff!important;
  font-size:16px!important;
}
.ci-shell .erp-side-drawer .ci-multi-pop > input[type=search].toko-search{
  padding-left:38px!important;
}
.ci-shell .erp-side-drawer .ci-multi-actions{
  display:flex!important;justify-content:flex-start!important;align-items:center!important;
  gap:8px!important;flex-wrap:wrap!important;padding:0 0 10px!important;
  margin:0!important;
}
.ci-shell .erp-side-drawer .ci-multi-actions .btn{
  min-height:36px!important;height:36px!important;box-sizing:border-box!important;
  flex:0 1 auto!important;padding:0 12px!important;border-radius:9px!important;
  border:1px solid #d0deec!important;background:#f2f7fd!important;
  color:#375b82!important;white-space:nowrap!important;
}
.ci-shell .erp-side-drawer .ci-multi-list{
  box-sizing:border-box!important;min-width:0!important;width:100%!important;
  padding:6px 4px!important;border-top:1px solid #e8edf3!important;
}
.ci-shell .erp-side-drawer .ci-multi-list > label{
  box-sizing:border-box!important;display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;align-items:start!important;
  column-gap:10px!important;min-width:0!important;width:100%!important;
  padding:10px 11px!important;border-bottom:1px solid #eff3f7!important;
  border-radius:8px!important;line-height:1.35!important;
}
.ci-shell .erp-side-drawer .ci-multi-list > label input[type=checkbox]{
  margin:2px 0 0!important;padding:0!important;justify-self:start!important;
}
.ci-shell .erp-side-drawer .ci-multi-list > label span{
  min-width:0!important;overflow-wrap:anywhere!important;text-align:left!important;
}
.ci-shell .erp-side-drawer .ci-multi-list > label:last-child{border-bottom:0!important}
.ci-shell .erp-side-drawer .ci-multi-list > label:hover{background:#f2f7fd!important}
.ci-shell .erp-side-drawer .ci-filter-actions{
  display:flex!important;justify-content:flex-end!important;align-items:center!important;
  gap:9px!important;flex-wrap:wrap!important;padding:12px 1px 5px!important;
  box-sizing:border-box!important;
}
.ci-shell .erp-side-drawer .ci-filter-actions .btn{
  min-height:39px!important;padding:8px 14px!important;border-radius:9px!important;
}
@media(max-width:480px){
  .ci-shell .erp-side-drawer .erp-drawer-form{padding:11px!important}
  .ci-shell .erp-side-drawer .ci-multi-pop{padding:9px!important}
  .ci-shell .erp-side-drawer .ci-multi-list > label{padding:9px 8px!important}
}

/* Avoid a translucent frame in the Report Centre drawer on narrow screens:
   the inherited entrance animation began at opacity .75, briefly showing
   page controls through the filter panel. Keep this panel fully opaque. */
#reportFilterModal.report-filter-drawer > .erp-side-drawer{
  animation:none!important;opacity:1!important;
}

/* Keep Business Analytics side drawers aligned to the viewport immediately.
   The inherited animation moves them 24px past the right edge and momentarily
   exposes page controls through a semi-transparent panel. */
.ci-shell .erp-drawer-backdrop > .erp-side-drawer {
  animation:none!important;opacity:1!important;transform:none!important;
}

/* Volume v1.2: official horizontal logo, responsive company name. */
.sidebar .brand .brand-logo-wrap{width:60px!important;height:44px!important;min-width:60px!important;border-radius:8px!important;overflow:hidden!important;background:#263670!important}
.sidebar .brand .brand-logo{width:100%!important;height:100%!important;padding:1px!important;object-fit:contain!important;background:#263670!important}
.sidebar .brand{gap:8px!important}.sidebar .brand strong{font-size:.76rem!important;letter-spacing:-.012em!important;overflow-wrap:anywhere!important}
.login-logo .login-brand-logo{width:112px!important;min-width:112px!important;flex:0 0 112px!important;height:76px!important;border-radius:10px!important;background:#263670!important;padding:0!important}
.login-logo .login-brand-logo .brand-logo{background:#263670!important;padding:1px!important}
.login-logo h1{white-space:normal!important;font-size:clamp(.92rem,3.7vw,1.25rem)!important;overflow-wrap:anywhere!important}
@media(max-width:520px){.login-logo{grid-template-columns:94px minmax(0,1fr)!important}.login-logo .login-brand-logo{width:94px!important;height:65px!important;min-width:94px!important;flex-basis:94px!important}}
.mobile-home-brand h1{font-size:clamp(.88rem,3vw,1.18rem)!important;overflow-wrap:anywhere!important}


/* Volume v1.2 — Exact supplied logo: preserve alpha, aspect and source colours.
   The master PNG itself is byte-for-byte identical to the user's upload. */
.sidebar .brand .brand-logo-wrap{
  width:76px!important;height:64px!important;min-width:76px!important;
  display:grid!important;place-items:center!important;overflow:visible!important;
  padding:0!important;background:transparent!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;
}
.sidebar .brand .brand-logo,
.login-logo .login-brand-logo .brand-logo{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center center!important;
  background:transparent!important;padding:0!important;transform:none!important;
  border:0!important;box-shadow:none!important;
}
.login-logo{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;text-align:center!important;gap:4px!important;
}
.login-logo .login-brand-logo{
  display:grid!important;place-items:center!important;
  width:190px!important;height:152px!important;min-width:0!important;flex:0 0 auto!important;
  background:transparent!important;padding:0!important;overflow:visible!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
}
.login-logo>div{padding-top:0!important;text-align:center!important;}
.login-logo h1{white-space:normal!important;text-align:center!important;}
.mobile-home-brand img{
  display:block!important;width:72px!important;height:72px!important;
  object-fit:contain!important;object-position:center center!important;
  padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;filter:none!important;
}
@media(max-width:520px){
  .login-logo{display:flex!important;grid-template-columns:none!important;}
  .login-logo .login-brand-logo{width:160px!important;height:132px!important;min-width:0!important;flex:0 0 auto!important;}
}

/* ===== SOURCE: baten-tables.css ===== */
/* Baten Table Design V91.7.23 — display-only across every ERP module.
   No changes to underlying cell indices, saved selections, exports, form values or SQL.
   Sticky headers are confined to the table's own scrolling region. */
.table-wrap.erp-baten-long{max-height:min(74vh,780px);overflow-x:auto;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:760px){.table-wrap.erp-baten-long{max-height:min(68vh,650px)}}
.table-wrap .erp-baten-table{border-collapse:separate!important;border-spacing:0!important}
.table-wrap .erp-baten-table thead th{
  position:sticky!important;top:var(--baten-head-top,0px)!important;
  z-index:52!important;background:#ecf3fb!important;
  background-clip:padding-box!important;
  box-shadow:inset 0 -1px 0 #cbd8e6!important;
}
.table-wrap .erp-baten-table thead tr:nth-child(even) th{background:#f4f8fd!important}
.table-wrap .erp-baten-table tbody td[data-baten-pin="selector"],
.table-wrap .erp-baten-table tbody td[data-baten-pin="identity"],
.table-wrap .erp-baten-table tfoot td[data-baten-pin="selector"],
.table-wrap .erp-baten-table tfoot td[data-baten-pin="identity"]{
  position:sticky!important;left:var(--baten-left,0px)!important;
  z-index:37!important;background:#fff!important;background-clip:padding-box!important;
}
.table-wrap .erp-baten-table tbody td[data-baten-pin="identity"]{
  min-width:175px;max-width:min(360px,55vw);white-space:normal!important;
  overflow-wrap:anywhere;box-shadow:3px 0 7px rgba(24,47,80,.13)!important
}
.table-wrap .erp-baten-table tbody td[data-baten-pin="selector"]{box-shadow:1px 0 0 #d9e2ec!important}
.table-wrap .erp-baten-table thead th[data-baten-pin]{
  position:sticky!important;left:var(--baten-left,0px)!important;
  z-index:80!important;background:#e2edf9!important;
  box-shadow:inset 0 -1px 0 #b9ccdf,3px 0 6px rgba(24,47,80,.11)!important;
}
.table-wrap .erp-baten-table tfoot td[data-baten-pin]{z-index:60!important;background:#f2f7fd!important}
.table-wrap .erp-baten-table tbody tr:hover td[data-baten-pin]{background:#f4f9ff!important}
/* Keep data in the original Barcode column for existing sort/export/index scripts.
   Only its visual presentation is suppressed once copied into Product display. */
.table-wrap .erp-baten-table .erp-baten-merged-barcode{display:none!important}
.table-wrap .erp-baten-table td.erp-baten-combined-product::after{
  content:attr(data-baten-barcode);display:block;margin-top:3px;
  color:#64748b;font:500 .72rem/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.012em;overflow-wrap:anywhere;white-space:normal;
}
@media(max-width:700px){.table-wrap .erp-baten-table tbody td[data-baten-pin="identity"]{min-width:145px;max-width:53vw}}
@media print{
 .table-wrap.erp-baten-long{max-height:none!important;overflow:visible!important}
 .table-wrap .erp-baten-table thead th,.table-wrap .erp-baten-table [data-baten-pin]{position:static!important;box-shadow:none!important}
}

/* Respect alert backgrounds in the stock-balance table's frozen cells. */
.table-wrap .erp-baten-table tbody tr.stock-zero-row td[data-baten-pin]{background:#fff0f0!important}
.table-wrap .erp-baten-table tbody tr.stock-zero-row:hover td[data-baten-pin]{background:#ffe4e6!important}
.table-wrap .erp-baten-table tbody tr.stock-low-row td[data-baten-pin]{background:#fff0f0!important}
.table-wrap .erp-baten-table tbody tr.stock-low-row:hover td[data-baten-pin]{background:#ffe4e6!important}
/* Multi-row outlet headers must stack above every scrolling metric header. */
.toko-module-commercial .table-wrap .erp-baten-table.ci-freeze-two thead tr:first-child>th:first-child,
.toko-module-commercial .table-wrap .erp-baten-table.ci-freeze-two thead tr:first-child>th:nth-child(2),
.toko-module-commercial .table-wrap .erp-baten-table.ci-freeze-identity thead [data-ba-sticky]{z-index:90!important}

/* ===== SOURCE: semantic-actions.css ===== */
/* Toko ERP V91.7.26 — accessible pastel action palette. UI-only.
   Semantic actions are identified by existing classes or presentation-only classes;
   no event, form, route, business logic, or value is modified. Loaded after all
   other styles so the intention is uniform across ERP + Business Analytics. */
:root {
  --erp-filter-bg:#f2efff; --erp-filter-border:#d8caf7; --erp-filter-text:#51418a;
  --erp-ok-bg:#eaf7ef; --erp-ok-border:#b6ddc3; --erp-ok-text:#205b3a;
  --erp-reset-bg:#fff5e6; --erp-reset-border:#ebd29c; --erp-reset-text:#76531e;
  --erp-search-bg:#f7fbff; --erp-search-border:#bfd6ef; --erp-search-text:#304b66;
  --erp-blue-bg:#edf5ff; --erp-blue-border:#bbd3f1; --erp-blue-text:#25537f;
  --erp-danger-bg:#fff0f2; --erp-danger-border:#efbec7; --erp-danger-text:#8b2639;
}
/* Consistent spacing for textual commands; leave icon-only and dense pager
   controls at their existing carefully chosen dimensions. */
:where(.btn,.action-menu>summary.btn,button[data-erp-drawer-target]):not(.erp-create-icon-only):not(.erp-info-icon):not(.erp-ui-help-button):not(.icon-btn){
  border-radius:9px!important; border-style:solid!important; border-width:1px!important;
  align-items:center; justify-content:center; gap:7px;
}
/* FILTER = soft lavender. Explicit semantic filters override generic .ghost,
   .primary and the previous shared [data-erp-drawer-target] neutral style. */
.btn.action-filter,.btn.toko-action-filter,
button[data-erp-drawer-target*="filter" i],a[data-erp-drawer-target*="filter" i],
summary.btn.action-filter {
  background:var(--erp-filter-bg)!important;
  border-color:var(--erp-filter-border)!important;
  color:var(--erp-filter-text)!important;
}
.btn.action-filter:hover,.btn.toko-action-filter:hover,
button[data-erp-drawer-target*="filter" i]:hover,a[data-erp-drawer-target*="filter" i]:hover {
  background:#e8e1fb!important;border-color:#bba7ed!important;
}
/* APPLY / OK / SAVE / DONE = soft green. Preserve separate destructive/danger
   and warning semantics, even if the button text contains an affirmative verb. */
.btn.action-apply,.btn.action-save,.btn.toko-action-apply,.btn.success,
.erp-action-success,button.erp-action-success,
#reportFilterModal .modal-actions .btn.action-apply,
#reportFilterModal .modal-actions .btn.toko-action-apply {
  background:var(--erp-ok-bg)!important;border-color:var(--erp-ok-border)!important;
  color:var(--erp-ok-text)!important;
}
.btn.action-apply:hover,.btn.action-save:hover,.btn.toko-action-apply:hover,.btn.success:hover,
#reportFilterModal .modal-actions .btn.action-apply:hover {
  background:#daf0e2!important;border-color:#91caa7!important;
}
/* RESET / CLEAR = soft amber. A reset is different from a destructive Delete. */
.btn.action-reset,.btn.toko-action-reset,.btn.action-clear,
button[type="reset"],input[type="reset"],
.ci-multi-actions button[data-clear-all],.multi-filter-tools button[data-clear-all],
#reportFilterModal .modal-actions .btn.action-reset {
  background:var(--erp-reset-bg)!important;
  border:1px solid var(--erp-reset-border)!important;color:var(--erp-reset-text)!important;
}
.btn.action-reset:hover,.btn.toko-action-reset:hover,.btn.action-clear:hover,
button[type="reset"]:hover,.ci-multi-actions button[data-clear-all]:hover {
  background:#ffedce!important;border-color:#dbba78!important;
}
/* Search ACTION button = calm blue; actual SEARCH FIELD = one soft blue family. */
.btn.toko-action-search,.btn.action-search {
  background:var(--erp-blue-bg)!important;border-color:var(--erp-blue-border)!important;
  color:var(--erp-blue-text)!important;
}
/* Only known search controls, not product barcode / editable order fields. */
input[type="search"],input.erp-global-search-input,input.erp-search-input,
input.toko-search,input.ci-table-search,input.multi-filter-search,
input[data-multi-search],.erp-search-box input,.erp-global-search-shell > input,
.erp-global-search-shell > .erp-search-control > input,
#reportFilterModal .report-filter-modal-body .multi-filter-search,
.ci-shell .erp-side-drawer .ci-multi-pop > input[type="search"] {
  background-color:var(--erp-search-bg)!important;
  border-color:var(--erp-search-border)!important;color:var(--erp-search-text)!important;
}
input[type="search"]:focus,input.erp-global-search-input:focus,input.erp-search-input:focus,
input.toko-search:focus,input.ci-table-search:focus,input.multi-filter-search:focus,
input[data-multi-search]:focus,.erp-search-box input:focus,
.erp-global-search-shell > input:focus,
.erp-global-search-shell > .erp-search-control > input:focus,
#reportFilterModal .report-filter-modal-body .multi-filter-search:focus,
.ci-shell .erp-side-drawer .ci-multi-pop > input[type="search"]:focus {
  background-color:#fff!important;border-color:#78a8dd!important;
  box-shadow:0 0 0 3px rgba(79,137,195,.13)!important;outline:none;
}
/* Consistent actions within search and multi-select toolbars. */
.ci-shell .erp-side-drawer .ci-multi-actions button[data-select-all],
#reportFilterModal .report-filter-modal-body .multi-filter-tools button[data-select-all]{
  background:var(--erp-blue-bg)!important;border-color:var(--erp-blue-border)!important;
  color:var(--erp-blue-text)!important;
}
.ci-shell .erp-side-drawer .ci-multi-actions button[data-clear-all],
#reportFilterModal .report-filter-modal-body .multi-filter-tools button[data-clear-all]{
  background:var(--erp-reset-bg)!important;border-color:var(--erp-reset-border)!important;
  color:var(--erp-reset-text)!important;
}
/* Keep destructive actions clearly distinct from the pleasant reset palette. */
.btn.danger,.btn.action-delete,.btn.action-remove {
  background:var(--erp-danger-bg)!important;border-color:var(--erp-danger-border)!important;
  color:var(--erp-danger-text)!important;
}
/* Keyboard usability; do not remove visible focus from action buttons. */
:where(.btn,button[data-erp-drawer-target],.action-menu>summary.btn):focus-visible{
  outline:2px solid #528acb!important;outline-offset:2px!important;
}
:where(.btn,button[data-erp-drawer-target]):disabled,
:where(.btn,button[data-erp-drawer-target])[aria-disabled="true"]{
  opacity:.55!important;cursor:not-allowed!important;
}
@media(max-width:600px){
  /* 16px mobile field text prevents iPhone zoom, without increasing toolbar size. */
  input[type="search"],input.erp-global-search-input,input.erp-search-input,
  input.toko-search,input.ci-table-search,input.multi-filter-search,
  input[data-multi-search],.erp-search-box input{font-size:16px!important}
}
@media(prefers-reduced-motion:no-preference){
  .btn.action-filter,.btn.action-apply,.btn.action-reset,
  .btn.toko-action-filter,.btn.toko-action-apply,.btn.toko-action-reset,
  input.erp-global-search-input{transition:background-color .12s ease,border-color .12s ease,color .12s ease}
}

/* V91.7.27 — shared action and badge polish. PRESENTATION ONLY.
   Retain the existing lavender Filter / green Apply / amber Reset / blue Search
   system. Explicit danger/warning classes always outrank benign text-derived
   classes, so a 'Delete draft' control never inherits a Create or Edit palette. */
:root{
  --erp-export-bg:#e8f8f5; --erp-export-border:#a7dace; --erp-export-text:#155c53;
  --erp-create-bg:#eaf7ef; --erp-create-border:#b6ddc3; --erp-create-text:#205b3a;
  --erp-edit-bg:#edf5ff; --erp-edit-border:#b9d5f3; --erp-edit-text:#24547e;
  --erp-kpi-bg:#f4f8ff; --erp-kpi-border:#d0e0f4;
}
/* Export / Share / Download = light teal, including mobile and report menus.
   Match known export controls; never tint a generic Columns or navigation button. */
:where(.btn,.action-menu>summary.btn,button,a.btn):is(
  .action-export,.action-export-excel,.action-export-pdf,
  .toko-action-export,.erp-action-export,.share-action
):not(.danger,.action-delete,.action-remove,.warning){
  background:var(--erp-export-bg)!important;
  border:1px solid var(--erp-export-border)!important;
  color:var(--erp-export-text)!important;
}
:where(.btn,.action-menu>summary.btn,button,a.btn):is(
  .action-export,.action-export-excel,.action-export-pdf,
  .toko-action-export,.erp-action-export,.share-action
):not(.danger,.action-delete,.action-remove,.warning):hover{
  background:#d8f1eb!important;border-color:#80c9b9!important;color:#104c45!important;
}
/* Export menu file choices are actions too; the column chooser stays neutral. */
.action-menu-pop > :is(button,a):is([onclick*="Export("],[onclick*="export("],[onclick*="Download("],[onclick*="download("],[onclick*="Share("],[onclick*="share("],.toko-action-export,.erp-action-export):not(.danger,.action-delete,.action-remove){
  background:var(--erp-export-bg)!important;color:var(--erp-export-text)!important;
  border-color:var(--erp-export-border)!important;
}
/* Add / New / Create = green. The global + button has exactly the same tone.
   A generic .primary is NOT reassigned: it also marks unrelated actions. */
:where(.btn,button,a.btn):is(
  .action-create,.action-new,.toko-action-create,.erp-create-icon-only,
  .erp-action-create,.erp-action-add,.mobile-fab-new,.mobile-primary-action.add
):not(.danger,.action-delete,.action-remove,.warning){
  background:var(--erp-create-bg)!important;
  border:1px solid var(--erp-create-border)!important;
  color:var(--erp-create-text)!important;
}
:where(.btn,button,a.btn):is(
  .action-create,.action-new,.toko-action-create,.erp-create-icon-only,
  .erp-action-create,.erp-action-add,.mobile-fab-new,.mobile-primary-action.add
):not(.danger,.action-delete,.action-remove,.warning):hover{
  background:#dbf0e3!important;border-color:#8ecaa5!important;color:#174d30!important;
}
/* Edit = light blue. Preserve danger priority for Delete/Reverse. */
:where(.btn,button,a.btn):is(
  .action-edit,.toko-action-edit,.erp-action-edit,.mobile-workflow-btn.edit
):not(.danger,.action-delete,.action-remove,.warning){
  background:var(--erp-edit-bg)!important;
  border:1px solid var(--erp-edit-border)!important;
  color:var(--erp-edit-text)!important;
}
:where(.btn,button,a.btn):is(
  .action-edit,.toko-action-edit,.erp-action-edit,.mobile-workflow-btn.edit
):not(.danger,.action-delete,.action-remove,.warning):hover{
  background:#dfeeff!important;border-color:#91bce8!important;color:#19456c!important;
}
/* Delete is NOT Reset; preserve red on any explicit destructive action. */
:where(.btn,button,a.btn):is(
  .danger,.action-delete,.action-remove,.toko-action-delete,.erp-action-danger,
  .mobile-workflow-btn.delete,.mobile-workflow-btn.remove
){background:var(--erp-danger-bg)!important;border:1px solid var(--erp-danger-border)!important;color:var(--erp-danger-text)!important;}
:where(.btn,button,a.btn):is(
  .danger,.action-delete,.action-remove,.toko-action-delete,.erp-action-danger,
  .mobile-workflow-btn.delete,.mobile-workflow-btn.remove
):hover{background:#ffe0e6!important;border-color:#de9daa!important;color:#721b30!important;}
/* Icon decoration follows the semantic text of each button. */
:where(.btn,button,a.btn):is(.action-export,.toko-action-export,.erp-action-export,.action-create,.toko-action-create,.action-edit,.toko-action-edit,.danger) .erp-btn-icon,
:where(.btn,button,a.btn):is(.action-export,.toko-action-export,.erp-action-export,.action-create,.toko-action-create,.action-edit,.toko-action-edit,.danger)::before{color:inherit!important;}

/* KPI tiles: soft, consistent surfaces, legible numeric values and explanatory
   captions. Never change their text, financial signs or conditional tones. */
:is(.metric,.erp-kpi-card,.erp-result-card,.ci-kpi,.report-summary-metric,.product-overview-metric,.bill-finance-kpi):not(.traffic-green,.traffic-amber,.traffic-red,.traffic-blue){
  background:var(--erp-kpi-bg)!important;border-color:var(--erp-kpi-border)!important;
  box-shadow:0 2px 8px rgba(37,78,116,.035)!important;
}
:where(.metric,.erp-kpi-card,.erp-result-card,.ci-kpi,.report-summary-metric,.product-overview-metric,.bill-finance-kpi) :is(strong,.value){color:#1b3857;overflow-wrap:anywhere;}
:where(.metric,.erp-kpi-card,.erp-result-card,.ci-kpi,.report-summary-metric,.product-overview-metric,.bill-finance-kpi) :is(small,.hint){color:#536780;line-height:1.4;}
/* Existing report traffic-light classes must remain informative. */
:where(.ci-kpi,.erp-kpi-card,.erp-result-card,.metric).traffic-green{background:#eef9f1!important;border-color:#b8e1c4!important;}
:where(.ci-kpi,.erp-kpi-card,.erp-result-card,.metric).traffic-amber{background:#fff8eb!important;border-color:#eed7a7!important;}
:where(.ci-kpi,.erp-kpi-card,.erp-result-card,.metric).traffic-red{background:#fff0f2!important;border-color:#efbec7!important;}
:where(.ci-kpi,.erp-kpi-card,.erp-result-card,.metric).traffic-blue{background:#f0f6ff!important;border-color:#bfd8f8!important;}
:where(.ci-kpi,.erp-kpi-card,.erp-result-card,.metric).traffic-green :is(strong,.value){color:#205b3a;}
:where(.ci-kpi,.erp-kpi-card,.erp-result-card,.metric).traffic-amber :is(strong,.value){color:#76531e;}
:where(.ci-kpi,.erp-kpi-card,.erp-result-card,.metric).traffic-red :is(strong,.value){color:#8b2639;}

/* Only STATUS labels are recoloured by state: never make all .badge elements
   green, as neutral counts/permissions should not imply success. */
:where(.status,.mobile-status,.ci-status-pill,.ci-badge,.badge){
  border-radius:999px!important;font-weight:750!important;
  max-width:100%;
}
:where(.status,.mobile-status,.ci-status-pill,.ci-badge):is(
  .status-posted,.status-received,.status-closed,.status-completed,.status-complete,
  .status-confirmed,.status-approved,.status-paid,.status-active,.active,.completed,
  .complete,.good,.ok
),.badge:is(.success,.green,.good,.completed){
  background:#e6f6eb!important;border-color:#b6dec3!important;color:#205b3a!important;
}
:where(.status,.mobile-status,.ci-status-pill,.ci-badge):is(
  .status-pending,.status-review,.status-reviewed,.status-partially-received,
  .status-partially-paid,.status-scheduled,.status-paused,.status-dispatched,
  .pending,.review,.scheduled,.paused,.watch,.warn
),.badge:is(.warning,.amber,.pending,.watch){
  background:#fff5e5!important;border-color:#ecd29f!important;color:#76531e!important;
}
:where(.status,.mobile-status,.ci-status-pill,.ci-badge):is(
  .status-draft,.draft,.status-entered,.info
),.badge:is(.info,.blue,.draft){
  background:#eaf3ff!important;border-color:#bed6f4!important;color:#24547e!important;
}
:where(.status,.mobile-status,.ci-status-pill,.ci-badge):is(
  .status-error,.status-failed,.status-cancelled,.status-overdue,.status-rejected,
  .error,.failed,.cancelled,.danger,.action
),.badge:is(.danger,.red,.error,.failed){
  background:#fff0f2!important;border-color:#efbec7!important;color:#8b2639!important;
}
/* Neutral historical/reversal/archived states are not errors. */
:where(.status,.mobile-status,.ci-status-pill):is(.status-reversed,.status-archived,.status-inactive,.inactive,.ended){
  background:#f0f3f7!important;border-color:#d6dee8!important;color:#44546b!important;
}
/* Avoid native dark-on-dark badge text, including long state names in tables. */
:where(.status,.mobile-status,.ci-status-pill,.ci-badge,.badge){border:1px solid transparent;line-height:1.3;vertical-align:middle;}
/* Keep buttons legible and consistent on phone without widening tiny controls. */
@media(max-width:600px){
 :where(.btn,button,a.btn):is(.action-export,.toko-action-export,.action-create,.toko-action-create,.action-edit,.toko-action-edit,.danger){max-width:100%;}
}


/* V91.7.29 — targeted presentation-only UI repairs.
   No changes to filtering, selection, supplier PDFs, reporting or calculations. */
/* BI multi-selects: proportional action buttons with explicit space for labels,
   and one clean iconless mini-toolbar (no extra glyph consumes label width). */
.ci-shell .erp-side-drawer .ci-multi-actions {
  display:grid!important;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.8fr)!important;
  align-items:center!important;justify-content:start!important;
  width:100%!important;min-width:0!important;
  gap:6px!important;padding:0 0 11px!important;
  box-sizing:border-box!important;
}
.ci-shell .erp-side-drawer .ci-multi-actions > button.btn {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
  width:100%!important;height:36px!important;min-height:36px!important;
  flex:none!important;padding:0 6px!important;
  font-size:clamp(11px,2.5vw,12px)!important;line-height:1.2!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;
  border-radius:9px!important;
}
.ci-shell .erp-side-drawer .ci-multi-actions .erp-btn-icon {display:none!important}
.ci-shell .erp-side-drawer .ci-multi-pop {overflow:hidden!important}
.ci-shell .erp-side-drawer .ci-multi-pop > input[type=search] {
  width:100%!important;max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important;margin-bottom:10px!important;
}
.ci-shell .erp-side-drawer .ci-multi-list > label {
  padding:10px 9px!important;min-width:0!important;overflow-wrap:anywhere!important;
}
.ci-shell .erp-side-drawer .ci-filter-actions {
  position:static!important;min-width:0!important;width:100%!important;
  margin:13px 0 0!important;padding:13px 0 3px!important;
  background:#fff!important;
}
.ci-shell .erp-side-drawer .ci-filter-actions > .btn {
  box-sizing:border-box!important;min-width:0!important;
  padding-inline:13px!important;white-space:nowrap!important;
}
/* BI table command bar: Clear Selection must contain its entire label;
   give counters/export their own gap instead of overlapping its text. */
.toko-module-commercial .erp-table-commandbar .erp-command-actions,
.ci-shell .erp-table-commandbar .erp-command-actions {
  gap:8px!important;min-width:0!important;flex-wrap:wrap!important;
}
.toko-module-commercial .erp-table-commandbar .erp-command-actions > .btn.action-clear,
.toko-module-commercial .ci-selection-tools > .btn.action-clear,
.ci-shell .erp-command-actions > .btn.action-clear,
.ci-shell .ci-selection-tools > .btn.action-clear {
  display:inline-flex!important;box-sizing:border-box!important;
  align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:auto!important;max-width:none!important;
  min-width:max-content!important;height:36px!important;min-height:36px!important;
  padding:0 12px!important;white-space:nowrap!important;
  line-height:1.2!important;overflow:visible!important;
}
.ci-shell .erp-command-actions > .ci-selection-count,
.ci-shell .erp-command-actions > .ci-export-count,
.ci-shell .ci-selection-tools > .ci-selection-count {
  flex:0 0 auto!important;width:auto!important;white-space:nowrap!important;
  margin:0!important;
}
/* Report Centre search has an accessible aria label but no redundant visible
   'Search' caption; keep all command controls baseline-aligned. */
.report-filter-form.compact-filter-bar {
  display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;
}
.report-filter-form.compact-filter-bar > .field.grow {
  flex:1 1 260px!important;min-width:180px!important;
  margin:0!important;
}
.report-filter-form.compact-filter-bar > .field.grow > input[type=search] {
  box-sizing:border-box!important;height:36px!important;min-height:36px!important;
}
/* Product picker: its left-hand bulk selection controls may not inherit the
   app's generic margin-left:auto action rule. Pagination remains on the right. */
#erpProductPicker .modal-summary {
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  flex-wrap:wrap!important;gap:8px 12px!important;
}
#erpProductPicker .modal-summary > .picker-selection-actions {
  display:flex!important;justify-content:flex-start!important;align-items:center!important;
  flex:0 1 auto!important;min-width:0!important;
  margin-left:0!important;margin-right:auto!important;
  gap:9px!important;flex-wrap:wrap!important;
}
#erpProductPicker .modal-summary > .picker-selection-actions > label {
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  margin:0!important;white-space:nowrap!important;
}
#erpProductPicker .modal-summary > .picker-selection-actions > .btn {
  display:inline-flex!important;justify-content:center!important;align-items:center!important;
  min-width:max-content!important;padding:7px 12px!important;
  white-space:nowrap!important;
}
#erpProductPicker .modal-summary > .picker-page-actions {
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  flex:0 0 auto!important;margin-left:auto!important;gap:7px!important;
}
/* Mobile and narrow toolbar: search, Filter, Export and ? have one height.
   The info icon is square. Do not resize full-width filter drawer fields. */
@media(max-width:760px){
  .ci-shell .commercial-nav-actions > .btn,
  .ci-shell .commercial-nav-actions > .erp-info-icon,
  .ci-shell .commercial-nav-actions > .ci-info-icon,
  .ci-shell .commercial-nav-actions > .erp-ui-help-button,
  .ci-shell .erp-table-commandbar .erp-command-actions > .btn,
  .ci-shell .erp-table-commandbar .erp-command-actions > details.action-menu > summary.btn,
  .report-filter-form.compact-filter-bar > .btn,
  .report-filter-form.compact-filter-bar > details.action-menu > summary.btn {
    box-sizing:border-box!important;height:36px!important;min-height:36px!important;
    max-height:36px!important;line-height:1.1!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    padding-top:0!important;padding-bottom:0!important;
  }
  .ci-shell .commercial-nav-actions > .erp-info-icon,
  .ci-shell .commercial-nav-actions > .ci-info-icon,
  .ci-shell .commercial-nav-actions > .erp-ui-help-button {
    flex:0 0 36px!important;width:36px!important;min-width:36px!important;padding:0!important;
  }
  .ci-shell .erp-table-commandbar .ci-table-search,
  .report-filter-form.compact-filter-bar > .field.grow > input[type=search] {
    box-sizing:border-box!important;height:36px!important;min-height:36px!important;
  }
  #erpProductPicker .modal-summary > .picker-selection-actions {flex:1 1 100%!important}
  #erpProductPicker .modal-summary > .picker-page-actions {margin-left:auto!important}
}
@media(max-width:350px){
  .ci-shell .erp-side-drawer .ci-multi-actions{gap:4px!important}
  .ci-shell .erp-side-drawer .ci-multi-actions > button.btn{font-size:10.5px!important;padding:0 3px!important}
}


/* Volume v1.2 — Report Centre geometry repair 2.
   Global UI styles use multiple competing flex-basis rules on .field.grow.
   A dedicated grid places the search in its own explicit track so action
   labels, selection counts and generic toolbar flex rules cannot resize it. */
.report-centre-v91 #reportFilterForm{
  display:grid!important;
  grid-template-columns:max-content max-content max-content max-content minmax(0,1fr)!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  gap:8px!important;
}
.report-centre-v91 #reportFilterForm > .field.grow{
  grid-column:1/-1!important;
  grid-row:1!important;
  flex:none!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.report-centre-v91 #reportFilterForm .erp-global-search-shell{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
/* The normalizers change input[type=search] to input[type=text] at startup:
   use the stable name rather than a type-dependent selector. */
.report-centre-v91 #reportFilterForm input[name="q"]{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  box-sizing:border-box!important;
}
/* Keep page width independent of long report tables and responsive controls. */
.report-centre-v91{grid-template-columns:minmax(0,1fr)!important;min-width:0!important}
.report-centre-v91 .report-centre-main,
.report-centre-v91 .report-results-panel{min-width:0!important;max-width:100%!important}
@media(max-width:720px){
  .report-centre-v91 #reportFilterForm{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .report-centre-v91 #reportFilterForm > .btn,
  .report-centre-v91 #reportFilterForm > details.action-menu{
    min-width:0!important;max-width:100%!important;width:100%!important;
  }
}
@media(max-width:400px){
  .report-centre-v91 #reportFilterForm{grid-template-columns:minmax(0,1fr)!important}
}


/* Volume v1.2 — Report Export alignment: anchor the popover to its trigger,
   never to an expanding grid track. Selection count is separate, at the edge. */
.report-centre-v91 #reportFilterForm > details.action-menu {
  width:max-content!important;max-width:100%!important;min-width:0!important;
  justify-self:start!important;align-self:center!important;
}
.report-centre-v91 #reportFilterForm > .report-selected-inline {
  grid-column:5!important;grid-row:2!important;justify-self:end!important;
  width:max-content!important;max-width:100%!important;margin:0!important;
  align-self:center!important;text-align:right!important;
}
.report-filter-form > details.action-menu {flex:0 0 auto!important;width:max-content!important;max-width:100%!important;}
.report-filter-form > .report-selected-inline {margin-left:auto!important;flex:0 0 auto!important;text-align:right!important;}
.report-filter-form > details.action-menu > .action-menu-pop {
  position:absolute!important;left:0!important;right:auto!important;
  top:calc(100% + 6px)!important;max-width:min(300px,calc(100vw - 24px))!important;
  height:max-content!important;min-height:max-content!important;
}
@media(max-width:720px){
 .report-centre-v91 #reportFilterForm > details.action-menu{width:100%!important;grid-row:auto!important;}
 .report-centre-v91 #reportFilterForm > .report-selected-inline{
    grid-column:1/-1!important;grid-row:auto!important;justify-self:end!important;
    width:max-content!important;margin:0!important;text-align:right!important;
 }
}


/* Volume v1.3 business analytics multiselect spacing */
.ci-shell .erp-side-drawer .ci-multi-pop{
  padding:14px!important;box-sizing:border-box!important;
}
.ci-shell .erp-side-drawer .ci-multi-pop > input[type=search],
.ci-shell .erp-side-drawer .ci-multi-pop > input[data-multi-search]{
  display:block!important;width:100%!important;box-sizing:border-box!important;
  margin:0!important;margin-bottom:14px!important;padding:10px 13px 10px 40px!important;
}
/* The global search normalizer wraps the input in a div after page load.
   Give the wrapper (not merely its former input child) the bottom spacing. */
.ci-shell .erp-side-drawer .ci-multi-pop > .erp-global-search-shell{
  display:block!important;width:100%!important;max-width:100%!important;
  box-sizing:border-box!important;margin:0 0 14px!important;
}
.ci-shell .erp-side-drawer .ci-multi-pop > .erp-global-search-shell > input[data-multi-search]{
  display:block!important;width:100%!important;box-sizing:border-box!important;
  margin:0!important;padding-left:40px!important;
}
.ci-shell .erp-side-drawer .ci-multi-actions{
  display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.9fr)!important;
  column-gap:9px!important;row-gap:9px!important;
  /* Maintain at least 8px visual space after global button styling. */
  column-gap:13px!important;
  padding:0 2px 14px!important;margin:0!important;width:100%!important;box-sizing:border-box!important;
}
.ci-shell .erp-side-drawer .ci-multi-actions > button.btn{
  padding:0 10px!important;min-width:0!important;max-width:100%!important;
  width:100%!important;box-sizing:border-box!important;
}
@media(max-width:390px){
  .ci-shell .erp-side-drawer .ci-multi-pop{padding:12px!important}
  .ci-shell .erp-side-drawer .ci-multi-actions{column-gap:9px!important}
  .ci-shell .erp-side-drawer .ci-multi-actions{column-gap:13px!important}
  .ci-shell .erp-side-drawer .ci-multi-actions > button.btn{padding:0 10px!important;font-size:11px!important;}
}


/* Toko ERP v1.3 UI final standard: light semantic actions, readable summary
   headings, and centered, dynamic (Company Settings) brand presentation. */
:root{--erp-hover-soft:#e9f1fb;}
/* All interactive textual controls gain a visible light hover state; semantic
   actions below take precedence. Disabled controls never animate on hover. */
:where(.btn,.action-menu > summary.btn,button[data-erp-drawer-target],.erp-info-icon,.erp-ui-help-button,.icon-btn):not(:disabled):not([aria-disabled="true"]):hover{
  background-color:var(--erp-hover-soft)!important;border-color:#a8c4e7!important;
  color:#214c78!important;
}
:where(.btn,.action-menu > summary.btn,button[data-erp-drawer-target]):not(:disabled):not([aria-disabled="true"]):hover{
  box-shadow:0 2px 7px rgba(34,83,131,.09)!important;
}
/* Keep action semantics rather than forcing all hovered controls blue. */
:where(.btn,button,a.btn):is(.action-filter,.toko-action-filter):not(:disabled):hover,
:where(button,a)[data-erp-drawer-target*="filter" i]:not(:disabled):hover{
  background:#e6dcfb!important;border-color:#b6a1e8!important;color:#4c3684!important;
}
:where(.btn,button,a.btn):is(.action-apply,.action-save,.toko-action-apply,.success,.action-create,.action-new,.toko-action-create,.erp-action-add,.erp-action-create,.erp-create-icon-only):not(:disabled):hover{
  background:#d8f0e0!important;border-color:#8ecaa5!important;color:#174d30!important;
}
:where(.btn,button,a.btn):is(.action-reset,.toko-action-reset,.action-clear):not(:disabled):hover,
button[type="reset"]:not(:disabled):hover{
  background:#ffebcb!important;border-color:#d5b66f!important;color:#705017!important;
}
:where(.btn,button,a.btn,.action-menu > summary.btn):is(.action-export,.action-export-excel,.action-export-pdf,.toko-action-export,.erp-action-export,.share-action):not(:disabled):hover{
  background:#d5f1ea!important;border-color:#80c9b9!important;color:#155c53!important;
}
:where(.btn,button,a.btn):is(.action-edit,.toko-action-edit,.erp-action-edit):not(:disabled):hover{
  background:#dceafd!important;border-color:#88b5e6!important;color:#19456c!important;
}
:where(.btn,button,a.btn):is(.danger,.action-delete,.action-remove,.toko-action-delete,.erp-action-danger):not(:disabled):hover{
  background:#ffe1e8!important;border-color:#dda0ad!important;color:#721b30!important;
}
:where(.btn,button,a.btn):is(.action-search,.toko-action-search):not(:disabled):hover{
  background:#dceeff!important;border-color:#91bce8!important;color:#19456c!important;
}
.action-menu-pop > :is(button,a):not(:disabled):hover{background:#edf5ff!important;color:#254a74!important;}
.action-menu-pop > :is(button,a):is(.action-export,.toko-action-export,.erp-action-export):not(:disabled):hover{background:#d6f1e9!important;color:#155c53!important;}
/* Product Master: widen only S/N (checkbox remains column 1). */
body.toko-page-products #productTable th:nth-child(2),
body.toko-page-products #productTable td:nth-child(2){
  width:76px!important;min-width:76px!important;max-width:76px!important;
  text-align:center!important;box-sizing:border-box!important;white-space:nowrap!important;
}
/* Product KPI: labels always appear above their numeric values. */
body.toko-page-products .product-overview-line > span{
  min-height:105px!important;padding:16px 18px!important;justify-content:flex-start!important;
  align-items:flex-start!important;gap:7px!important;
}
.product-overview-line .metric-label{
  display:block!important;color:#405774!important;font-size:.84rem!important;
  font-weight:850!important;line-height:1.3!important;letter-spacing:.005em!important;
}
body.toko-page-products .product-overview-line > span > strong{
  display:block!important;font-size:1.5rem!important;line-height:1.15!important;
}
body.toko-page-products .product-overview-line > span > small{
  display:block!important;font-size:.73rem!important;line-height:1.35!important;
  color:#566b85!important;
}
body.toko-page-products .product-overview-line > .muted{
  color:#405774!important;font-size:.75rem!important;
}
/* Business Analytics names, not numbers: moderately larger and bold. */
.ci-shell .ci-kpi > span,.ci-shell .metric .label,
.ci-shell .erp-kpi > span,.ci-shell .report-summary-metric > span,
.ci-product-sales-kpis .ci-kpi > span{
  font-size:.86rem!important;font-weight:820!important;line-height:1.32!important;
  color:#344e6d!important;
}
/* Product identifier beneath product title: no scanner/barcode-print styling. */
body .data-table .barcode,body .product-name + .barcode,
body .mobile-line-title .barcode,body .mobile-product-master-main .barcode,
body .mobile-product-search-copy > .barcode{
  font-size:max(.9rem,13px)!important;font-weight:650!important;
  letter-spacing:.015em!important;line-height:1.4!important;color:#415a78!important;
  overflow-wrap:anywhere;
}
/* Keep help at the trailing edge of desktop filter and command toolbars.
   Do not change inline label-level tooltip icons inside form fields. */
:is(.erp-filterbar-actions,.erp-command-actions,.commercial-nav-actions,.report-filter-form,.compact-filter-bar,.top-action-bar) > :is(.erp-info-icon,.erp-ui-help-button,.ci-info-icon){
  order:999!important;margin-left:auto!important;flex:0 0 auto!important;
}
/* Sidebar logo always comes from Company Settings (the HTML src is dynamic).
   Center original artwork and give the long business name a dedicated line. */
.sidebar .brand{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;text-align:center!important;gap:6px!important;
  width:100%!important;box-sizing:border-box!important;padding:12px 4px 17px!important;
}
.sidebar .brand .brand-logo-wrap{
  display:grid!important;place-items:center!important;width:90px!important;height:76px!important;
  min-width:90px!important;max-width:100%!important;padding:0!important;margin-inline:auto!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;overflow:visible!important;
}
.sidebar .brand .brand-logo{
  display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;
  object-position:center!important;background:transparent!important;padding:0!important;
  border:0!important;box-shadow:none!important;
}
.sidebar .brand .brand-name-block{display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;min-width:0!important;gap:3px!important;}
.sidebar .brand .brand-name-block > strong{
  display:block!important;white-space:nowrap!important;overflow-wrap:normal!important;
  font-size:clamp(.69rem,.9vw,.82rem)!important;letter-spacing:-.024em!important;
  line-height:1.2!important;text-align:center!important;max-width:100%!important;
}
.sidebar .brand .brand-name-block > small{
  display:block!important;font-size:.67rem!important;line-height:1.32!important;
  max-width:100%!important;text-align:center!important;
}
/* Image surfaces: preserve original proportions/alpha/background for uploaded logos. */
:is(.login-logo .login-brand-logo,.mobile-home-brand,.mobile-brand-logo){place-items:center!important;}
:is(.login-logo .brand-logo,.mobile-home-brand img,.mobile-brand-logo img){
  object-fit:contain!important;object-position:center center!important;
}
@media(max-width:680px){
  body.toko-page-products .product-overview-line > span{min-height:95px!important;padding:12px 13px!important;}
  .sidebar .brand .brand-name-block > strong{font-size:.72rem!important;}
}

/* v1.3 mobile workflow and branding alignment */
.login-page .login-card{
  align-self:start!important;margin:clamp(18px,4vh,44px) auto!important;
  padding-top:18px!important;
}
.login-page .login-logo{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;text-align:center!important;gap:0!important;
  margin:-8px auto 15px!important;
}
.login-page .login-logo .login-brand-logo{
  display:grid!important;place-items:center!important;
  margin:0 auto!important;width:160px!important;height:118px!important;
  min-width:0!important;flex:0 0 auto!important;
}
.login-page .login-logo .brand-logo{
  object-fit:contain!important;object-position:center!important;
  background:transparent!important;
}
.login-page .login-logo>div{text-align:center!important;min-width:0!important;}
.login-page .login-logo h1{margin:0!important;line-height:1.2!important;}
.sidebar .brand{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;text-align:center!important;gap:7px!important;
}
.sidebar .brand .brand-logo-wrap{display:grid!important;place-items:center!important;margin:0 auto!important;}
.sidebar .brand .brand-name-block{display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;text-align:center!important;}
.sidebar .brand .brand-name-block>strong{white-space:nowrap!important;overflow-wrap:normal!important;text-align:center!important;}
.sidebar .brand .brand-name-block>small{text-align:center!important;}

/* ===== SOURCE: final-light-ui.css ===== */
/* Toko ERP v1.5.1 final light UI. Presentation-only layer, loaded LAST.
   Flat table rows; no DOM replacement, database changes or layout-heavy effects. */
:root{
  --toko-bg:#f5f9ff;--toko-surface:#fff;--toko-surface-soft:#f8fbff;
  --toko-line:#dbe7f5;--toko-line-strong:#bed4eb;--toko-text:#233b55;
  --erp-ui-button-height:36px;--erp-row-white:#fff;--erp-row-blue:#f0f7ff;
  --erp-table-head:#dceeff;--erp-table-head-border:#91bee9;
}
html,body,.app-shell,.content,.mobile-app-body,.mobile-app-body .content{
  background-color:var(--toko-bg)!important;color:var(--toko-text)!important;
}
/* Light navigation, including the company logo and existing permission-gated links. */
/* Dark-gray navigation panel for clearer mobile/desktop contrast. */
.sidebar{background:#202B63!important;border-right:1px solid #202B63!important;box-shadow:2px 0 14px rgba(15,23,42,.18)!important;}
.sidebar .brand{border-bottom-color:#4b515b!important;}
.sidebar .brand strong,.sidebar nav>a,.sidebar nav summary,.sidebar nav details div a{color:#f3f4f6!important;}
.sidebar .brand small{color:#c3c8cf!important;}
.sidebar nav>a:hover,.sidebar nav summary:hover,.sidebar nav details div a:hover{background:rgba(255,255,255,.12)!important;color:#fff!important;}
.sidebar nav>a.active,.sidebar nav details div a.active{background:rgba(255,255,255,.18)!important;color:#fff!important;}
.topbar,.panel,.toolbar,.toko-command-surface,.commercial-nav-row{background-color:#fff!important;border-color:#dbe7f5!important;}

/* Existing buttons remain buttons/links: only paint and typography change. */
:where(.btn,.action-menu>summary.btn,button[data-erp-drawer-target]){
  box-sizing:border-box!important;min-height:var(--erp-ui-button-height)!important;
  height:var(--erp-ui-button-height)!important;padding:0 11px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:6px!important;font-size:12px!important;line-height:1.15!important;
  font-weight:750!important;border-radius:8px!important;white-space:nowrap!important;
  box-shadow:none!important;
}
/* Same toolbar baseline without tampering with mobile workflow's larger touch targets. */
:is(.erp-filterbar-actions,.erp-command-actions,.commercial-nav-actions,.ci-actions,
    .top-action-bar,.modal-actions,.erp-filter-drawer-actions,.ci-filter-actions){gap:8px!important;align-items:center!important;}
:where(.btn,.action-menu>summary.btn,button[data-erp-drawer-target]) :is(svg,.erp-btn-icon){
  flex-shrink:0;vertical-align:middle;align-self:center;
}
/* '+' stays exactly the one existing glyph; i is slimmer than other controls. */
.erp-create-icon-only,.btn.erp-create-icon-only{width:36px!important;min-width:36px!important;
  height:36px!important;min-height:36px!important;padding:0!important;font-size:1.3rem!important;}
.erp-create-icon-only::before,.erp-create-icon-only::after{content:none!important;display:none!important;}
/* All full-size info buttons use the same narrow rectangle, including the
   page/panel headings inserted by app.js and modal headings in templates.
   Keep label-level help and compact table inline help untouched. */
:is(button.erp-info-icon,button.erp-ui-help-button,button.erp-title-info,button.ci-info-icon):not(.inline-info):not(.ci-inline-help):not(label button){
  box-sizing:border-box!important;display:inline-grid!important;place-items:center!important;
  width:28px!important;min-width:28px!important;max-width:28px!important;
  height:36px!important;min-height:36px!important;max-height:36px!important;
  flex:0 0 28px!important;padding:0!important;font-size:12px!important;
  line-height:1!important;background:#e9f4ff!important;border:1px solid #b8d3f0!important;
  color:#24527e!important;border-radius:8px!important;
}
/* Data-table and sales-matrix inline help must not make compact rows taller. */
button.erp-info-icon.ci-inline-help,button.ci-info-icon.ci-inline-help{
  box-sizing:border-box!important;display:inline-grid!important;place-items:center!important;
  width:22px!important;min-width:22px!important;max-width:22px!important;
  height:26px!important;min-height:26px!important;max-height:26px!important;
  flex:0 0 22px!important;padding:0!important;font-size:11px!important;
  background:#e9f4ff!important;border:1px solid #b8d3f0!important;color:#24527e!important;
  border-radius:7px!important;
}
/* Toolbar information icon only: don't resize the smaller, inline form-label i. */
:is(.erp-filterbar-actions,.erp-command-actions,.commercial-nav-actions,.ci-actions,
    .top-action-bar,.toolbar,.report-filter-form,.erp-panel-inline-actions)
  > :is(.erp-info-icon,.erp-ui-help-button,.ci-info-icon,.erp-title-info),
.ci-shell .commercial-nav-actions > :is(.erp-info-icon,.erp-ui-help-button,.ci-info-icon){
  box-sizing:border-box!important;display:inline-grid!important;place-items:center!important;
  width:28px!important;min-width:28px!important;max-width:28px!important;
  flex:0 0 28px!important;height:36px!important;min-height:36px!important;
  max-height:36px!important;padding:0!important;font-size:12px!important;
  background:#e9f4ff!important;border:1px solid #b8d3f0!important;color:#24527e!important;
  border-radius:8px!important;
}
/* v1.5.1: Mobile inline search uses its own grid, not a generic ERP toolbar.
   Keep the existing three-column search/filter/help layout and i popover handler. */
.mobile-app-body .mobile-live-search-row > .mobile-toolbar-info{
  box-sizing:border-box!important;display:inline-grid!important;place-items:center!important;
  width:28px!important;min-width:28px!important;max-width:28px!important;
  height:36px!important;min-height:36px!important;max-height:36px!important;
  justify-self:center!important;align-self:center!important;
  padding:0!important;font-size:12px!important;
  background:#e9f4ff!important;border:1px solid #b8d3f0!important;
  color:#24527e!important;border-radius:8px!important;
}
.mobile-app-body .mobile-live-search-row > .mobile-inline-filter-button{
  height:36px!important;min-height:36px!important;max-height:36px!important;
}
/* Accessible focus without gradients, transforms or expensive effects. */
:where(.btn,button,a.btn,summary.btn,.mobile-primary-action,.mobile-workflow-btn):focus-visible{
  outline:2px solid #327cbd!important;outline-offset:2px!important;
}

/* One action = one semantic colour. All selectors are action-specific: a generic
   .primary or .success never decides Confirm/Complete/Cancel by accident. */
:is(.btn,button,a.btn,summary.btn):is(.action-save,.toko-action-save):not(.danger){background:#e5f7eb!important;border-color:#a8dabc!important;color:#205b39!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-apply,.toko-action-apply):not(.toko-action-confirm):not(.toko-action-complete):not(.danger){background:#e6f5ef!important;border-color:#abd9c4!important;color:#1b6549!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-confirm,.toko-action-confirm):not(.danger){background:#e6eeff!important;border-color:#abc4f3!important;color:#234b9a!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-complete,.toko-action-complete):not(.danger){background:#dff6e6!important;border-color:#95d3a9!important;color:#17653c!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-close,.toko-action-close):not(.danger){background:#f1f2fb!important;border-color:#c8cee9!important;color:#4a527f!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-cancel,.toko-action-cancel):not(.danger){background:#f0f3f7!important;border-color:#cbd6e2!important;color:#485c72!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-reset,.toko-action-reset),button[type=reset],input[type=reset]{background:#fff3d9!important;border-color:#e5cc8c!important;color:#79551a!important;}
:is(.btn,button,a.btn,summary.btn):is(.danger,.action-delete,.action-remove,.toko-action-delete,.erp-action-danger){background:#ffebee!important;border-color:#e8b1bc!important;color:#962b44!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-search,.toko-action-search){background:#e8f3ff!important;border-color:#accff2!important;color:#265885!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-filter,.toko-action-filter),button[data-erp-drawer-target*="filter" i],a[data-erp-drawer-target*="filter" i]{background:#f0eaff!important;border-color:#d1c1ee!important;color:#5b4085!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-export,.toko-action-export,.erp-action-export){background:#e6f7f5!important;border-color:#a6d9d0!important;color:#155e59!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-csv,.toko-action-csv){background:#eaf8ed!important;border-color:#b0ddba!important;color:#26653b!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-excel,.toko-action-excel,.action-export-excel){background:#e1f4eb!important;border-color:#a2d4bb!important;color:#166144!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-pdf,.toko-action-pdf,.action-export-pdf){background:#fff0f1!important;border-color:#efc1c7!important;color:#973946!important;}
:is(.btn,button,a.btn,summary.btn):is(.action-epos-csv,.toko-action-epos-csv){background:#fff0d9!important;border-color:#e6c98e!important;color:#7d5316!important;}
/* Preserve existing add, edit, and upload actions, plus icon-only Add New. */
:is(.btn,button,a.btn):is(.erp-create-icon-only,.action-create,.toko-action-create,.erp-action-add,.mobile-fab-new):not(.danger){background:#e8f6ee!important;border-color:#a8dabe!important;color:#205e42!important;}
:is(.btn,button,a.btn):is(.action-edit,.toko-action-edit):not(.danger){background:#eaf3ff!important;border-color:#b9d4f2!important;color:#265886!important;}
/* Hover is a restrained border change, never a semantic colour override. */
:is(.btn,button,a.btn,summary.btn):hover:not(:disabled):not([aria-disabled=true]){filter:brightness(.96)!important;box-shadow:none!important;}

/* Consistent filters: retain existing drawer visibility, Apply/Reset wiring,
   multi-select state, dropdown positioning and scroll behaviour. */
.erp-side-drawer,.ci-shell .erp-side-drawer{background:#fff!important;border-color:#c9dcf1!important;}
.erp-drawer-head,.ci-filter-head{background:#eaf4ff!important;border-color:#c5dcf1!important;}
.erp-filter-drawer-body,.ci-filter-body,.erp-side-drawer .ci-filter-form{background:#fff!important;}
.erp-filter-drawer-body>.field,.erp-side-drawer .field{border-color:#e0ebf6!important;background:#f8fbff!important;}
.erp-filter-drawer-actions,.ci-filter-actions{background:#fff!important;border-top-color:#d9e8f6!important;}
.erp-filter-drawer-actions :is(.btn,button),.ci-filter-actions :is(.btn,button){
  min-height:36px!important;height:36px!important;font-size:12px!important;
}
.multi-filter-panel,.ci-multi-pop,.searchable-select-menu{background:#fff!important;border-color:#cee0f2!important;}
.multi-filter-option:hover,.ci-multi-list label:hover{background:#eaf4ff!important;}

/* Flat compact tables: never round rows/cells or turn their contents into cards.
   Keep existing scroll containers, table layout, sorter hooks and sticky top/left.
   Explicitly match pinned cells because they carry a pre-existing white background. */
:is(table.data-table,table.ci-lined-table,table.erp-baten-table,table.report-table,
    .report-table-wrap table,.mobile-workspace table){border-collapse:separate!important;border-spacing:0!important;}
:is(table.data-table,table.ci-lined-table,table.erp-baten-table,table.report-table,
    .report-table-wrap table,.mobile-workspace table) thead th{
  background:var(--erp-table-head)!important;color:#174b79!important;
  border-color:var(--erp-table-head-border)!important;
  font-size:11px!important;font-weight:800!important;line-height:1.25!important;
  padding:7px 8px!important;border-radius:0!important;
  overflow:visible!important;text-overflow:clip!important;
}
/* Preserve z-index and left offsets on frozen headers. */
.table-wrap .erp-baten-table thead th[data-baten-pin],
table.erp-identity-freeze thead th[data-erp-pin]{
  background:#cfe5fc!important;color:#174b79!important;
}
:is(table.data-table,table.ci-lined-table,table.erp-baten-table,table.report-table,
    .report-table-wrap table,.mobile-workspace table) tbody td{
  padding:6px 8px!important;border-radius:0!important;
  line-height:1.3!important;vertical-align:middle!important;
  box-shadow:none; /* pin identity keeps its existing divider through stronger selector */
}
:is(table.data-table,table.ci-lined-table,table.erp-baten-table,table.report-table,
    .report-table-wrap table,.mobile-workspace table) tbody tr:nth-child(odd) td{
  background:var(--erp-row-white)!important;
}
:is(table.data-table,table.ci-lined-table,table.erp-baten-table,table.report-table,
    .report-table-wrap table,.mobile-workspace table) tbody tr:nth-child(even) td{
  background:var(--erp-row-blue)!important;
}
:is(table.data-table,table.ci-lined-table,table.erp-baten-table,table.report-table,
    .report-table-wrap table,.mobile-workspace table) tbody tr:hover td{background:#e2f0ff!important;}
/* Pinned body cells must paint the same stripe while remaining position:sticky. */
body .table-wrap .erp-baten-table tbody tr:nth-child(odd) td[data-baten-pin],
body table.erp-identity-freeze tbody tr:nth-child(odd) td[data-erp-pin]{background:#fff!important;}
body .table-wrap .erp-baten-table tbody tr:nth-child(even) td[data-baten-pin],
body table.erp-identity-freeze tbody tr:nth-child(even) td[data-erp-pin]{background:#f0f7ff!important;}
body .table-wrap .erp-baten-table tbody tr:hover td[data-baten-pin],
body table.erp-identity-freeze tbody tr:hover td[data-erp-pin]{background:#e2f0ff!important;}
/* Existing alert meaning remains visible as a small left border, not a row badge. */
:is(table.data-table,table.erp-baten-table) tbody tr.stock-zero-row td:first-child{border-left:3px solid #cf6674!important;}
:is(table.data-table,table.erp-baten-table) tbody tr.stock-low-row td:first-child{border-left:3px solid #cf6674!important;}
/* Index headers retain baseline width and sorting controls / links. */
table.data-table thead th.erp-index-header,
table.erp-baten-table thead th.erp-ui-index-col{
  min-width:94px!important;width:auto!important;white-space:nowrap!important;
  overflow:visible!important;word-break:normal!important;text-overflow:clip!important;
}
table.data-table thead th.erp-index-header[data-erp-index-kind=rank]{min-width:105px!important;}
table.data-table thead th.erp-index-header .ci-sort-link{
  min-width:94px!important;white-space:nowrap!important;overflow:visible!important;
}
/* Only true status chips are rounded; ordinary table cells remain flat. */
:is(.status,.mobile-status,.ci-status-pill,.ci-badge,.badge):is(.status-draft,.draft){background:#eaf2ff!important;border-color:#b9d3f5!important;color:#275689!important;}
:is(.status,.mobile-status,.ci-status-pill,.ci-badge,.badge):is(.status-pending,.pending){background:#fff3dd!important;border-color:#e8cc92!important;color:#77531a!important;}
:is(.status,.mobile-status,.ci-status-pill,.ci-badge,.badge):is(.status-confirmed,.confirmed){background:#e7edff!important;border-color:#b8c6f3!important;color:#344e9e!important;}
:is(.status,.mobile-status,.ci-status-pill,.ci-badge,.badge):is(.status-completed,.status-complete,.completed,.complete){background:#e0f5e7!important;border-color:#a5d8b6!important;color:#22633f!important;}
:is(.status,.mobile-status,.ci-status-pill,.ci-badge,.badge):is(.status-closed,.closed){background:#edf1f5!important;border-color:#ccd6e0!important;color:#44586e!important;}
:is(.status,.mobile-status,.ci-status-pill,.ci-badge,.badge):is(.status-cancelled,.cancelled){background:#ffebef!important;border-color:#e9b7c1!important;color:#92374c!important;}

/* Mobile PWA: bright palette, unchanged 3-column product action layout and
   inline search; keep phone inputs >=16px to avoid iOS focus zoom. */
.mobile-workspace,.mobile-doc-list-head,.mobile-doc-view-head,.mobile-page-head{background-color:#f7fbff!important;}
.mobile-primary-action,.mobile-list-tool,.mobile-fab-new{
  background:#eaf3ff!important;border-color:#bed5ef!important;color:#275783!important;
  box-shadow:none!important;
}
.mobile-primary-action.save,.mobile-list-tool.primary{background:#e3f6eb!important;border-color:#a3d8b8!important;color:#1f6241!important;box-shadow:none!important;}
.mobile-primary-action.add,.mobile-fab-new{background:#e7f6eb!important;border-color:#a7d8b6!important;color:#205e3d!important;box-shadow:none!important;}
.mobile-primary-action.search,.mobile-primary-action.scan{background:#e8f3ff!important;border-color:#b5d1ee!important;color:#285981!important;box-shadow:none!important;}
.mobile-workflow-btn.confirm{background:#e6eeff!important;border-color:#abc4f3!important;color:#234b9a!important;}
.mobile-workflow-btn.receive,.mobile-workflow-btn.complete{background:#dff6e6!important;border-color:#95d3a9!important;color:#17653c!important;}
.mobile-workflow-btn.close{background:#f1f2fb!important;border-color:#c8cee9!important;color:#4a527f!important;}
.mobile-workflow-btn.cancel{background:#f0f3f7!important;border-color:#cbd6e2!important;color:#485c72!important;}
.mobile-workflow-btn.delete{background:#ffebee!important;border-color:#e8b1bc!important;color:#962b44!important;}
.mobile-workspace :is(input.input,select.input,textarea.input,input[type=search]){font-size:16px!important;}
@media(max-width:760px){
  .ci-shell .commercial-nav-actions > :is(.erp-info-icon,.erp-ui-help-button,.ci-info-icon){
    width:28px!important;min-width:28px!important;max-width:28px!important;flex:0 0 28px!important;
    height:36px!important;min-height:36px!important;
  }
  :is(.data-table,.ci-lined-table,.erp-baten-table) :is(th,td){padding-inline:7px!important;}
}
@media print{.sidebar{box-shadow:none!important} /* Existing print table position rules retained. */}

/* Pending v1.6.5: give Business Analytics report-table searches the long
   Product Sales proportions, while retaining the Search button and exports. */
.ci-shell .erp-table-commandbar .ci-actions > .erp-search-box{
  flex:1 1 585px!important;
  width:min(100%,585px)!important;
  min-width:0!important;
  max-width:585px!important;
}
.ci-shell .erp-table-commandbar .ci-actions > .erp-search-box > .ci-table-search{
  flex:1 1 0%!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}
.ci-shell .erp-table-commandbar .ci-actions > .erp-search-box > .btn{
  flex:0 0 auto!important;
}
.ci-shell .erp-table-commandbar .ci-actions > .ci-table-search{
  flex:1 1 520px!important;
  width:min(100%,520px)!important;
  min-width:0!important;
  max-width:520px!important;
}
@media(max-width:900px){
  .ci-shell .erp-table-commandbar .ci-actions > :is(.erp-search-box,.ci-table-search){
    flex:1 1 100%!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
}


/* Pending global search consistency: one SVG magnifier and unchanging text
   clearance for Activity Log, warehouse/outlet, Master Data, Users, reports and
   dynamically inserted search fields. Older rules varied inset by focus/page;
   this final loaded layer sets one geometry without changing search behavior. */
body .erp-global-search-shell > .erp-search-leading-icon{
  position:absolute!important;left:12px!important;top:50%!important;
  transform:translateY(-50%)!important;display:grid!important;place-items:center!important;
  width:17px!important;height:17px!important;pointer-events:none!important;z-index:3!important;
}
body .erp-global-search-shell > input,
body .erp-global-search-shell > input:hover,
body .erp-global-search-shell > input:focus,
body .erp-global-search-shell > input:active,
body .erp-global-search-shell > .erp-search-control > input,
body .erp-global-search-shell > .erp-search-control > input:focus{
  box-sizing:border-box!important;padding-left:42px!important;
  background-image:none!important;background-repeat:no-repeat!important;
  text-indent:0!important;
}
/* The legacy .toolbar.erp-search-only-toolbar .input shorthand outranks a plain
   shell selector after app.js runs. Match the normalized input class with
   greater specificity, so focus/blur can never revert the left text inset. */
:is(body,body .content) .erp-global-search-shell > input:is(.erp-search-input,.erp-global-search-input,.toko-search),
:is(body,body .content) .erp-global-search-shell > input:is(.erp-search-input,.erp-global-search-input,.toko-search):hover,
:is(body,body .content) .erp-global-search-shell > input:is(.erp-search-input,.erp-global-search-input,.toko-search):focus,
:is(body,body .content) .erp-global-search-shell > input:is(.erp-search-input,.erp-global-search-input,.toko-search):active{
  padding-left:42px!important;
  background-image:none!important;
  text-indent:0!important;
}
/* Business Analytics search width must survive app.js/unified-ui.js wrapping
   the input in the canonical icon shell. Match both pre/post-normalization DOM
   without letting the input extend beneath its adjacent Search button. */
.ci-shell .erp-table-commandbar .ci-actions > .erp-search-box > .erp-global-search-shell{
  flex:1 1 0%!important;box-sizing:border-box!important;
  width:auto!important;min-width:0!important;max-width:none!important;
}
.ci-shell .erp-table-commandbar .ci-actions > .erp-search-box > .erp-global-search-shell > input.ci-table-search,
.ci-shell .erp-table-commandbar .ci-actions > .erp-search-box > .erp-global-search-shell > input.ci-table-search:focus{
  box-sizing:border-box!important;display:block!important;
  width:100%!important;min-width:0!important;max-width:none!important;
  flex:1 1 auto!important;
  padding-left:42px!important;background-image:none!important;text-indent:0!important;
}

/* Pending v1.6.5: Commercial navigation controls occupy the same TOP row as
   report menus; the GST explanation spans the entire row below. Do not move
   controls via JS or change their existing click/permission handling. */
body.toko-module-commercial .ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key),
body.toko-module-reports .ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key){
  display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;
  grid-template-rows:auto auto!important;column-gap:10px!important;row-gap:6px!important;
  align-items:start!important;justify-content:stretch!important;
}
body.toko-module-commercial .ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key) > .commercial-nav-main,
body.toko-module-reports .ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key) > .commercial-nav-main{display:contents!important}
.ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key) .commercial-group-nav{
  grid-column:1!important;grid-row:1!important;min-width:0!important;align-self:start!important;
}
.ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key) > .commercial-nav-actions{
  grid-column:2!important;grid-row:1!important;align-self:start!important;justify-self:end!important;
  width:auto!important;max-width:100%!important;min-width:0!important;margin-left:0!important;
}
.ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key) .ci-gst-basis-key{
  grid-column:1/-1!important;grid-row:2!important;min-width:0!important;
  width:100%!important;box-sizing:border-box!important;margin:0!important;
}
@media(max-width:1199px){
  body.toko-module-commercial .ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key),
  body.toko-module-reports .ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key){
    grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;
  }
  .ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key) > .commercial-nav-actions{
    grid-column:1!important;grid-row:2!important;justify-self:end!important;
  }
  .ci-shell > .commercial-nav-row:has(> .commercial-nav-main > .ci-gst-basis-key) .ci-gst-basis-key{
    grid-column:1!important;grid-row:3!important;
  }
}


/* Small-data laptop test: keep company mark/name above independently scrolling nav. */
.sidebar{
  display:flex!important;flex-direction:column!important;overflow:hidden!important;
  height:100vh!important;height:100dvh!important;max-height:100dvh!important;
}
.sidebar > .brand{flex:0 0 auto!important;position:relative!important;z-index:1!important;}
.sidebar > nav{
  flex:1 1 auto!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
}
@media print{.sidebar{overflow:visible!important;height:auto!important;max-height:none!important;}}

/* Inline transaction tables: PO, Stock Transfer and Transfer Adjustment share
   one compact header. Search stays flexible while Columns, row count and the
   Hide/Show toggle remain a single aligned action group. */
.erp-inline-table-section>.erp-inline-table-heading,
.po-table-section>.po-table-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important}
.erp-inline-table-section>.erp-inline-table-heading>div:first-child,
.po-table-section>.po-table-heading>div:first-child{flex:1 1 280px;min-width:0}
.erp-inline-table-section .erp-inline-table-header-tools,
.po-table-section .po-table-header-tools{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex:0 1 auto;min-width:0;flex-wrap:wrap}
.erp-inline-table-section .erp-inline-table-header-tools>.table-tools,
.po-table-section .po-table-header-tools>.table-tools{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;width:auto!important;max-width:100%!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.erp-inline-table-section .erp-inline-table-header-tools .compact-search,
.po-table-section .po-table-header-tools .compact-search{flex:1 1 360px;min-width:220px;max-width:560px}
.erp-inline-table-section .erp-inline-table-header-tools .table-tool-actions,
.po-table-section .po-table-header-tools .table-tool-actions{display:flex!important;align-items:center!important;gap:6px!important;justify-content:flex-end!important;flex:0 0 auto;white-space:nowrap}
.erp-inline-table-section .erp-inline-table-body[hidden],
.po-table-section .po-table-body[hidden]{display:none!important}
@media(max-width:650px){
  .erp-inline-table-section>.erp-inline-table-heading,.po-table-section>.po-table-heading{align-items:flex-start!important}
  .erp-inline-table-section .erp-inline-table-header-tools,.po-table-section .po-table-header-tools{width:100%;justify-content:flex-end!important}
  .erp-inline-table-section .erp-inline-table-header-tools>.table-tools,.po-table-section .po-table-header-tools>.table-tools{width:100%!important;flex-wrap:wrap!important}
  .erp-inline-table-section .erp-inline-table-header-tools .compact-search,.po-table-section .po-table-header-tools .compact-search{flex:1 1 100%;max-width:none;min-width:0}
  .erp-inline-table-section .erp-inline-table-header-tools .table-tool-actions,.po-table-section .po-table-header-tools .table-tool-actions{margin-left:auto}
}

/* v1.6.5 Business Analytics: meaning-based, entire-cell backgrounds.
   The ordinary cells retain the light-blue striped design, including frozen identifiers.
   Source colours live in commercial/commercial.css and are shared by the classification chart. */
.ci-shell .ci-kpis > .ci-kpi:not(.traffic-green,.traffic-amber,.traffic-red,.traffic-blue),
.ci-shell .ci-product-sales-kpis > .ci-kpi:not(.traffic-green,.traffic-amber,.traffic-red,.traffic-blue){
  background:#fff!important;border-color:var(--toko-line)!important;
}
.ci-shell :is(.ci-kpis,.ci-product-sales-kpis) > .ci-kpi.traffic-green{background:#eef9f1!important;border-color:#b8e1c4!important;border-left:5px solid var(--ci-status-good)!important;}
.ci-shell :is(.ci-kpis,.ci-product-sales-kpis) > .ci-kpi.traffic-amber{background:#fff8eb!important;border-color:#eed7a7!important;border-left:5px solid var(--ci-status-amber)!important;}
.ci-shell :is(.ci-kpis,.ci-product-sales-kpis) > .ci-kpi.traffic-red{background:#fff0f2!important;border-color:#efbec7!important;border-left:5px solid var(--ci-status-red)!important;}
.ci-shell :is(.ci-kpis,.ci-product-sales-kpis) > .ci-kpi.traffic-blue{background:#f0f6ff!important;border-color:#bfd8f8!important;border-left:5px solid var(--ci-status-blue)!important;}
.ci-shell .ci-kpi.traffic-green strong{color:#205b3a!important;}
.ci-shell .ci-kpi.traffic-amber strong{color:#76531e!important;}
.ci-shell .ci-kpi.traffic-red strong{color:#8b2639!important;}
/* Use whole-cell tones, overriding global nth-child striping, hover and frozen-cell defaults. */
.ci-shell table.data-table tbody td.ci-tone-green,
.ci-shell table.data-table tbody tr:hover td.ci-tone-green{background:#eef9f1!important;color:#205b3a!important;}
.ci-shell table.data-table tbody td.ci-tone-amber,
.ci-shell table.data-table tbody tr:hover td.ci-tone-amber{background:#fff8eb!important;color:#76531e!important;}
.ci-shell table.data-table tbody td.ci-tone-red,
.ci-shell table.data-table tbody tr:hover td.ci-tone-red{background:#fff0f2!important;color:#8b2639!important;}
.ci-shell table.data-table tbody td.ci-tone-hero,
.ci-shell table.data-table tbody tr:hover td.ci-tone-hero{background:var(--ci-status-hero-bg)!important;color:var(--ci-status-hero-text)!important;}
.ci-shell table.data-table tbody td.ci-tone-grow,
.ci-shell table.data-table tbody tr:hover td.ci-tone-grow{background:var(--ci-status-grow-bg)!important;color:var(--ci-status-grow-text)!important;}
.ci-shell table.data-table tbody td.ci-tone-maintain,
.ci-shell table.data-table tbody tr:hover td.ci-tone-maintain{background:var(--ci-status-maintain-bg)!important;color:var(--ci-status-maintain-text)!important;}
.ci-shell table.data-table tbody td.ci-tone-fix,
.ci-shell table.data-table tbody tr:hover td.ci-tone-fix{background:var(--ci-status-fix-bg)!important;color:var(--ci-status-fix-text)!important;}
.ci-shell table.data-table tbody td.ci-tone-exit,
.ci-shell table.data-table tbody tr:hover td.ci-tone-exit{background:var(--ci-status-exit-bg)!important;color:var(--ci-status-exit-text)!important;}
/* Classification and growth are independent signals. Other SKU cells keep striped styling. */
/* Explicit Pareto A/B/C classification rows keep their existing intended pastel tones. */
.ci-shell table.data-table tbody tr.ci-pareto-a td,
.ci-shell table.data-table tbody tr.ci-pareto-a:hover td{background:#edf9f1!important;}
.ci-shell table.data-table tbody tr.ci-pareto-b td,
.ci-shell table.data-table tbody tr.ci-pareto-b:hover td{background:#fff8e8!important;}
.ci-shell table.data-table tbody tr.ci-pareto-c td,
.ci-shell table.data-table tbody tr.ci-pareto-c:hover td{background:#fff0f0!important;}
/* Whole dashboard scorecards rather than colour only the status badge or left border. */
.ci-shell .ci-score-grid > .ci-score-card.good{background:#eef9f1!important;border-color:#b8e1c4!important;}
.ci-shell .ci-score-grid > .ci-score-card.watch{background:#fff8eb!important;border-color:#eed7a7!important;}
.ci-shell .ci-score-grid > .ci-score-card.action{background:#fff0f2!important;border-color:#efbec7!important;}
.ci-shell .ci-score-grid > .ci-score-card.info{background:#f0f6ff!important;border-color:#bfd8f8!important;}
/* Existing Outlet status cards have a tone class on the card, not traffic-*. */
.ci-shell .ci-kpis > .ci-kpi.status-green{background:#eef9f1!important;border-color:#b8e1c4!important;border-left:5px solid var(--ci-status-good)!important;}
.ci-shell .ci-kpis > .ci-kpi.status-amber{background:#fff8eb!important;border-color:#eed7a7!important;border-left:5px solid var(--ci-status-amber)!important;}
.ci-shell .ci-kpis > .ci-kpi.status-red{background:#fff0f2!important;border-color:#efbec7!important;border-left:5px solid var(--ci-status-red)!important;}

/* Accounting overview: one aligned four-card dashboard with readable figures. */
.accounting-kpi-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:0 0 20px!important;align-items:stretch!important}
.accounting-kpi-grid>.accounting-kpi{min-width:0!important;min-height:112px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;gap:14px!important;background:#fff!important;border:1px solid #dce5ef!important;border-left:4px solid #4a83ba!important;border-radius:12px!important;padding:18px!important;box-shadow:0 2px 8px rgba(25,48,78,.045)!important}
.accounting-kpi-grid>.accounting-kpi>span{font-size:13px!important;font-weight:600!important;line-height:1.45!important;color:#516176!important;white-space:normal!important}
.accounting-kpi-grid>.accounting-kpi>strong{font-size:clamp(24px,2.2vw,34px)!important;font-weight:750!important;line-height:1.1!important;letter-spacing:-.025em!important;color:#16395c!important;font-variant-numeric:tabular-nums!important;overflow-wrap:anywhere!important}
.accounting-kpi-grid>.accounting-kpi.has-exceptions{background:#fff5f4!important;border-left-color:#b94848!important}
.accounting-kpi-grid>.accounting-kpi.has-exceptions>strong{color:#942f38!important}
@media(max-width:980px){.accounting-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:440px){.accounting-kpi-grid{grid-template-columns:minmax(0,1fr)!important}.accounting-kpi-grid>.accounting-kpi{min-height:88px!important}}

/* Priority patch: Business Analytics table search receives an actual usable
   full toolbar row.  Earlier 34px/420px rules in app.css and commercial.css
   were winning at laptop widths despite the previous nominal 585px width. */
.ci-shell .erp-table-commandbar{
  flex-wrap:wrap!important;
}
.ci-shell .erp-table-commandbar>.ci-table-heading,
.ci-shell .erp-table-commandbar>div:first-child{
  flex:1 1 100%!important;max-width:100%!important;
}
.ci-shell .erp-table-commandbar>.ci-actions{
  flex:1 1 100%!important;width:100%!important;max-width:100%!important;
  min-width:0!important;justify-content:flex-start!important;flex-wrap:wrap!important;
}
.ci-shell .erp-table-commandbar .ci-actions>.erp-search-box{
  flex:0 1 600px!important;width:min(100%,600px)!important;
  min-width:0!important;max-width:600px!important;
  min-height:44px!important;height:auto!important;
}
.ci-shell .erp-table-commandbar .ci-actions>.ci-table-search{
  flex:0 1 600px!important;width:min(100%,600px)!important;
  min-width:0!important;max-width:600px!important;
  min-height:44px!important;height:44px!important;
}
.ci-shell .erp-table-commandbar .ci-actions>.erp-search-box .erp-global-search-shell,
.ci-shell .erp-table-commandbar .ci-actions>.erp-search-box input.ci-table-search{
  min-height:44px!important;height:44px!important;
}
.ci-shell .erp-table-commandbar .ci-actions>.erp-search-box>.btn,
.ci-shell .erp-table-commandbar .ci-actions>.ci-table-search+.btn{
  min-height:44px!important;
}
@media(max-width:760px){
  .ci-shell .erp-table-commandbar .ci-actions>.erp-search-box,
  .ci-shell .erp-table-commandbar .ci-actions>.ci-table-search{
    flex:1 1 100%!important;width:100%!important;max-width:100%!important;
  }
}

/* Priority patch: PO receiving and final-after-returns are independently scrollable
   tables. Override the global 52ch Product column only inside these two panels. */
.po-table-section{min-width:0!important;max-width:100%!important;overflow:visible!important;}
.po-table-section>.po-table-body{min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:visible;overscroll-behavior-x:contain!important;}
.po-table-section>.po-table-body .erp-baten-table :is(th,td).erp-ui-product-col,
.po-table-section>.po-table-body .erp-baten-table td[data-baten-pin="identity"].erp-ui-product-col{
  min-width:230px!important;width:clamp(230px,24vw,310px)!important;max-width:310px!important;
  white-space:normal!important;overflow-wrap:anywhere!important;
}
.po-table-section>.po-table-body .erp-baten-table :is(th,td).erp-ui-index-col{
  min-width:42px!important;width:42px!important;max-width:50px!important;
  padding-inline:4px!important;white-space:nowrap!important;
}
@media(max-width:760px){
  .po-table-section>.po-table-body .erp-baten-table :is(th,td).erp-ui-product-col,
  .po-table-section>.po-table-body .erp-baten-table td[data-baten-pin="identity"].erp-ui-product-col{
    min-width:160px!important;width:185px!important;max-width:200px!important;
  }
}


/* v1.6.5 overlap follow-up: unified-ui.js wraps direct Business Analytics
   table searches in .erp-global-search-shell at runtime. Keep that normalized
   shell at the same long toolbar width as the pre-normalized input so the
   search field does not collapse after page load. */
.ci-shell .erp-table-commandbar .ci-actions > .erp-global-search-shell{
  flex:0 1 600px!important;
  width:min(100%,600px)!important;
  min-width:0!important;
  max-width:600px!important;
  min-height:44px!important;
  height:44px!important;
}
.ci-shell .erp-table-commandbar .ci-actions > .erp-global-search-shell > input.ci-table-search{
  min-height:44px!important;
  height:44px!important;
}
@media(max-width:760px){
  .ci-shell .erp-table-commandbar .ci-actions > .erp-global-search-shell{
    flex:1 1 100%!important;
    width:100%!important;
    max-width:100%!important;
  }
}
.ci-shell .erp-table-commandbar .ci-actions > .erp-global-search-shell > input.ci-table-search,
.ci-shell .erp-table-commandbar .ci-actions > .erp-global-search-shell > input.ci-table-search:focus{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  flex:1 1 auto!important;
}

/* v1.6.5 overlap follow-up: on desktop, an open Business Analytics report
   menu must take real layout space. The earlier absolute-position desktop rule
   let the menu float over the GST basis note, active period, and table toolbar. */
@media(min-width:901px){
  body.toko-module-commercial .commercial-group-nav:has(> details[open]),
  body.toko-module-reports .commercial-group-nav:has(> details[open]){
    align-items:flex-start!important;
  }
  body.toko-module-commercial .commercial-group-nav > details[open],
  body.toko-module-reports .commercial-group-nav > details[open]{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    position:relative!important;
  }
  body.toko-module-commercial .commercial-group-nav > details[open] > div,
  body.toko-module-reports .commercial-group-nav > details[open] > div{
    position:static!important;
    inset:auto!important;
    margin-top:5px!important;
    min-width:230px!important;
    max-width:min(420px,92vw)!important;
    z-index:auto!important;
  }
}


/* v1.6.5 focused patch: GST Working Paper top summary only. */
.gst-summary-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;margin:0 0 14px!important;align-items:stretch!important}
.gst-summary-card{min-width:0!important;display:flex!important;flex-direction:column!important;gap:5px!important;background:#fff!important;border:1px solid #dce5ef!important;border-radius:10px!important;padding:11px 13px!important;box-shadow:0 2px 7px rgba(25,48,78,.04)!important}
.gst-summary-card>span{font-size:.69rem!important;font-weight:750!important;line-height:1.25!important;color:#5f7084!important;white-space:nowrap!important}
.gst-summary-card>strong{font-size:clamp(1rem,1.45vw,1.32rem)!important;font-weight:800!important;line-height:1.18!important;color:#183a5c!important;font-variant-numeric:tabular-nums!important;white-space:nowrap!important}
@media(max-width:1050px){.gst-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:680px){.gst-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.gst-summary-card>span,.gst-summary-card>strong{white-space:normal!important}}

/* v1.6.5 focused patch: compact EPOS Import History. Diagnostics/downloads live under Details. */
.epos-import-history{width:100%!important;min-width:820px!important;border-collapse:collapse!important}
.epos-import-history th{background:#edf3fa!important;color:#34455d!important;font-size:.72rem!important;text-transform:uppercase!important;letter-spacing:.02em!important;text-align:left!important;white-space:nowrap!important;padding:9px 10px!important;border-bottom:1px solid #d9e2ee!important;position:sticky!important;top:0!important;z-index:2!important}
.epos-import-history td{padding:8px 10px!important;border-bottom:1px solid #e8edf4!important;vertical-align:middle!important}
.epos-import-history tbody tr:not(.epos-import-detail-row):hover{background:#f8faff!important}
.epos-import-date,.epos-import-period{white-space:nowrap!important}
.epos-import-file{max-width:260px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.epos-import-details-cell{width:1%!important;white-space:nowrap!important}
.epos-import-detail-row>td{padding:0 10px 10px!important;background:#f8fbfe!important}
.epos-import-detail-card{width:100%!important;background:#fff!important;border:1px solid #d8e2ec!important;border-radius:10px!important;padding:11px!important;box-shadow:0 4px 14px rgba(24,48,76,.07)!important}
.epos-import-detail-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
.epos-import-detail-grid>div{min-width:0!important;background:#f8fbfe!important;border:1px solid #e1e8ef!important;border-radius:8px!important;padding:8px 9px!important}
.epos-import-detail-grid span{display:block!important;font-size:.62rem!important;font-weight:750!important;color:#718096!important;text-transform:uppercase!important;letter-spacing:.025em!important;margin-bottom:2px!important}
.epos-import-detail-grid strong{display:block!important;font-size:.74rem!important;color:#263b52!important;overflow-wrap:anywhere!important}
.epos-import-diagnostic{margin-top:9px!important;padding:9px 10px!important;background:#fff8e8!important;border:1px solid #ecd9aa!important;border-radius:8px!important}
.epos-import-diagnostic strong{font-size:.7rem!important;color:#6f531f!important}
.epos-import-diagnostic p{margin:3px 0 0!important;font-size:.72rem!important;line-height:1.4!important;color:#5a4b2d!important}
.epos-import-downloads{display:flex!important;gap:7px!important;align-items:center!important;flex-wrap:wrap!important;margin-top:10px!important}
.epos-import-detail-note{margin-top:8px!important}
@media(max-width:720px){.epos-import-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}


/* v1.6.20 - compact Purchase Order / Stock Transfer entry layout.
   Scope is deliberately limited to the two transaction forms requested. */
@media (min-width:1100px){
  form#poForm .po-compact-form-grid,
  form#transferForm .transfer-compact-form-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px 12px!important;
    align-items:start!important;
  }
  form#poForm .po-compact-form-grid>.field,
  form#transferForm .transfer-compact-form-grid>.field{
    min-width:0!important;
  }
  form#poForm .po-compact-form-grid>.field.span-2,
  form#transferForm .transfer-compact-form-grid>.field.span-2{
    grid-column:span 2!important;
  }
}
@media (min-width:760px) and (max-width:1099px){
  form#poForm .po-compact-form-grid,
  form#transferForm .transfer-compact-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:759px){
  form#poForm .po-compact-form-grid,
  form#transferForm .transfer-compact-form-grid{
    grid-template-columns:1fr!important;
  }
  form#poForm .po-compact-form-grid>* ,
  form#transferForm .transfer-compact-form-grid>*{grid-column:1!important;}
}

/* Long live-search bars for items already added to the document. */
form#poForm .po-item-commandbar .po-live-search-field,
form#transferForm .transfer-search-toolbar .transfer-live-search-field{
  flex:1 1 100%!important;
  width:100%!important;
  max-width:none!important;
}
form#poForm .po-live-search-actions,
form#transferForm .transfer-live-search-actions{
  display:flex!important;
  width:100%!important;
  max-width:none!important;
}
form#poForm #poProductSearch,
form#transferForm #transferSearch{
  flex:1 1 auto!important;
  width:100%!important;
  max-width:none!important;
  min-width:min(620px,100%)!important;
}
@media(max-width:760px){
  form#poForm #poProductSearch,
  form#transferForm #transferSearch{min-width:0!important;}
}


/* v1.6.21 Update: filtered totals mirrored above on-screen tables only. */
.erp-top-total-row > th,.erp-top-total-row > td{background:var(--surface-soft,#f5f8fb)!important;border-bottom:2px solid var(--line,#d8e0e8)!important;font-weight:700}
.erp-top-total-row{box-shadow:inset 0 -1px 0 rgba(0,0,0,.04)}
.ci-report-header-card{display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(2,minmax(180px,1fr));gap:12px;margin:10px 0 14px;padding:12px 14px;border:1px solid var(--line,#d8e0e8);border-radius:12px;background:var(--surface,#fff)}
.ci-report-header-card>div{display:flex;flex-direction:column;gap:3px;min-width:0}.ci-report-header-card span{font-size:.78rem;color:var(--muted,#667085)}
.ci-target-table-flex{width:100%;min-width:1050px;table-layout:auto}.ci-target-table-flex th,.ci-target-table-flex td{padding:7px 8px;white-space:normal;min-width:72px;max-width:170px;line-height:1.25}.ci-target-table-flex [data-target-key="entity"]{min-width:150px;max-width:220px}.ci-target-table-flex .ci-action-col{width:116px;min-width:116px;max-width:116px}.ci-target-table-flex .ci-select-col{width:38px;min-width:38px;max-width:38px}
.erp-page-back-edge{margin-left:auto!important}
@media(max-width:900px){.ci-report-header-card{grid-template-columns:1fr}.ci-target-table-flex{min-width:900px}}


/* v1.6.21 mobile navigation + horizontal table scroll repair.
   Loaded last so older presentation layers cannot disable touch interaction. */
.sidebar-backdrop{display:none}
@media(max-width:800px){
  body.erp-sidebar-open{overflow:hidden!important;touch-action:none}
  .sidebar{
    background:#202B63!important;border-right-color:#202B63!important;
    width:min(86vw,320px)!important;max-width:320px!important;
    transform:translate3d(-105%,0,0)!important;
    transition:transform .2s ease,visibility .2s ease!important;
    visibility:hidden!important;pointer-events:none!important;
    z-index:1200!important;will-change:transform;
  }
  .sidebar.open{transform:translate3d(0,0,0)!important;visibility:visible!important;pointer-events:auto!important}
  .sidebar-backdrop{
    position:fixed;inset:0;z-index:1190;border:0;padding:0;margin:0;
    background:rgba(15,23,42,.34);display:block;opacity:1;
    touch-action:manipulation;
  }
  .sidebar-backdrop[hidden]{display:none!important}
  #sidebarToggle{display:inline-grid!important;place-items:center!important;position:relative!important;z-index:1!important;
    min-width:40px!important;width:40px!important;height:40px!important;pointer-events:auto!important;touch-action:manipulation!important}

  /* Every backend table wrapper must remain a real two-axis touch scroller. */
  :is(.table-wrap,.report-table-wrap,.po-planning-wrap,.adjustment-table-wrap,.po-table-body,.erp-table-scroll,.ci-table-wrap){
    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-x pan-y!important;overscroll-behavior-x:contain!important;
    scrollbar-gutter:stable;position:relative!important;
  }
  :is(.table-wrap,.report-table-wrap,.po-planning-wrap,.adjustment-table-wrap,.po-table-body,.erp-table-scroll,.ci-table-wrap)>table{
    width:max-content!important;min-width:100%!important;max-width:none!important;
  }
  .data-table{width:max-content!important;min-width:max(720px,100%)!important;max-width:none!important}
  .panel{min-width:0!important;max-width:100%!important}
}

/* v1.6.21 mobile sidebar hardening: body state is a second source of truth so
   mobile navigation still opens even if another stylesheet overrides .open. */
@media(max-width:900px){
  body:not(.mobile-app-body) #sidebar{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;
    height:100dvh!important;margin:0!important;
    transform:translate3d(-105%,0,0)!important;
    visibility:hidden!important;opacity:0!important;pointer-events:none!important;
    z-index:2147483000!important;
  }
  body:not(.mobile-app-body) #sidebar.open,
  body:not(.mobile-app-body).erp-sidebar-open #sidebar{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  }
  body:not(.mobile-app-body) #sidebarBackdrop{
    position:fixed!important;inset:0!important;z-index:2147482990!important;
    background:rgba(15,23,42,.46)!important;border:0!important;
  }
  body:not(.mobile-app-body) #sidebarBackdrop:not([hidden]){display:block!important}
  body:not(.mobile-app-body) #sidebarToggle{position:relative!important;z-index:2147483010!important;cursor:pointer!important}
}

/* v1.6.21 backend-mobile compact command bars + hard horizontal table scrolling.
   Scope excludes Staff Mobile PWA (.mobile-app-body). */
@media(max-width:800px){
  body:not(.mobile-app-body) .app-main,
  body:not(.mobile-app-body) .content,
  body:not(.mobile-app-body) .panel,
  body:not(.mobile-app-body) .panel-body,
  body:not(.mobile-app-body) .panel-head{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Backend actions should use only the space they need and wrap naturally. */
  body:not(.mobile-app-body) .actions,
  body:not(.mobile-app-body) .page-head .actions,
  body:not(.mobile-app-body) .panel-head .actions,
  body:not(.mobile-app-body) .toolbar .actions,
  body:not(.mobile-app-body) .table-tool-actions,
  body:not(.mobile-app-body) .top-action-bar,
  body:not(.mobile-app-body) .erp-filterbar-actions,
  body:not(.mobile-app-body) .document-actions,
  body:not(.mobile-app-body) .export-form-compact>.actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:auto!important;
    max-width:100%!important;
    gap:7px!important;
  }
  body:not(.mobile-app-body) .page-head .actions,
  body:not(.mobile-app-body) .document-actions{width:100%!important}

  body:not(.mobile-app-body) :is(.actions,.page-head .actions,.panel-head .actions,.toolbar,.table-tool-actions,.top-action-bar,.erp-filterbar-actions,.document-actions,.export-form-compact>.actions) > :is(.btn,a.btn,button.btn,details.action-menu),
  body:not(.mobile-app-body) :is(.actions,.page-head .actions,.panel-head .actions,.toolbar,.table-tool-actions,.top-action-bar,.erp-filterbar-actions,.document-actions,.export-form-compact>.actions) > details.action-menu > summary.btn{
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    flex:0 0 auto!important;
  }

  body:not(.mobile-app-body) .btn{
    width:auto!important;
    min-height:38px!important;
    padding:7px 10px!important;
    white-space:nowrap!important;
  }
  body:not(.mobile-app-body) .btn.sm{min-height:34px!important;padding:6px 9px!important}
  body:not(.mobile-app-body) .icon-btn,
  body:not(.mobile-app-body) .btn.action-info,
  body:not(.mobile-app-body) .btn.info-button{
    flex:0 0 auto!important;
  }

  /* Toolbars: fields may grow, command buttons stay compact. */
  body:not(.mobile-app-body) .toolbar{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:flex-end!important;
    grid-template-columns:none!important;
  }
  body:not(.mobile-app-body) .toolbar>.field{
    flex:1 1 155px!important;
    width:auto!important;
    min-width:130px!important;
  }
  body:not(.mobile-app-body) .toolbar>.field.grow,
  body:not(.mobile-app-body) .toolbar>.compact-search,
  body:not(.mobile-app-body) .toolbar>.erp-live-search,
  body:not(.mobile-app-body) .toolbar>.search-field{
    flex:1 1 100%!important;
    width:100%!important;
    max-width:none!important;
  }
  body:not(.mobile-app-body) .compact-search{min-width:0!important;max-width:none!important;width:100%!important}
  body:not(.mobile-app-body) .table-tools{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  body:not(.mobile-app-body) .table-tools .compact-search{flex:1 1 100%!important}
  body:not(.mobile-app-body) .table-tools .table-tool-actions{margin-left:auto!important}

  /* Never let a parent steal the horizontal gesture from backend tables. */
  body:not(.mobile-app-body) :is(.table-wrap,.report-table-wrap,.po-planning-wrap,.adjustment-table-wrap,.po-table-body,.erp-table-scroll,.ci-table-wrap,.modal-table){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:scroll!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x pan-y!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:auto!important;
    position:relative!important;
  }
  body:not(.mobile-app-body) :is(.table-wrap,.report-table-wrap,.po-planning-wrap,.adjustment-table-wrap,.po-table-body,.erp-table-scroll,.ci-table-wrap,.modal-table)>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;
  }
  body:not(.mobile-app-body) table.data-table th,
  body:not(.mobile-app-body) table.data-table td{
    max-width:none;
  }

  /* Row-level edit/archive controls remain compact and do not stretch rows. */
  body:not(.mobile-app-body) .item-actions,
  body:not(.mobile-app-body) td .actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:auto!important;
    gap:5px!important;
  }
  body:not(.mobile-app-body) .item-actions .btn,
  body:not(.mobile-app-body) td .actions .btn{width:auto!important;flex:0 0 auto!important}
}

@media(max-width:450px){
  body:not(.mobile-app-body) .btn{padding:6px 8px!important;font-size:.78rem!important}
  body:not(.mobile-app-body) .btn.sm{padding:5px 7px!important;font-size:.74rem!important}
  body:not(.mobile-app-body) .actions,
  body:not(.mobile-app-body) .toolbar,
  body:not(.mobile-app-body) .table-tool-actions{gap:6px!important}
}


/* v1.6.21 final backend-mobile hardening: black navigation, compact controls, safe modals and touch tables. */
/* Navigation colour applies to the normal ERP on desktop and mobile. */
.sidebar{
  background:#202B63!important;
  background-image:none!important;
  border-right:1px solid #202B63!important;
  color:#f8fafc!important;
}
.sidebar .brand strong{color:#fff!important}
.sidebar .brand small{color:#aeb7c3!important;opacity:1!important}
.sidebar nav>a,.sidebar summary{color:#f1f5f9!important}
.sidebar details div a{color:#c7ced8!important}
.sidebar nav>a:hover,.sidebar summary:hover,.sidebar details div a:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}
.sidebar nav>a.active,.sidebar details div a.active{background:rgba(255,255,255,.18)!important;color:#fff!important}
.sidebar details[open]>summary{background:rgba(255,255,255,.14)!important;color:#fff!important}

@media(max-width:800px){
  body:not(.mobile-app-body){overflow-x:hidden!important}
  body:not(.mobile-app-body) .app-shell,
  body:not(.mobile-app-body) .app-main{width:100%!important;max-width:100vw!important;min-width:0!important}
  body:not(.mobile-app-body) .app-main{margin-left:0!important}
  body:not(.mobile-app-body) .content{width:100%!important;max-width:100%!important;min-width:0!important;padding:9px!important;overflow-x:hidden!important}

  /* Header stays usable down to narrow phones without forcing a horizontal page. */
  body:not(.mobile-app-body) .topbar{
    width:100%!important;height:auto!important;min-height:58px!important;
    display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto auto!important;
    align-items:center!important;gap:6px!important;padding:7px 9px!important;
  }
  body:not(.mobile-app-body) .topbar-title{
    min-width:0!important;max-width:100%!important;overflow:hidden!important;
    text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.94rem!important;
  }
  body:not(.mobile-app-body) .topbar .user-chip{display:none!important}
  body:not(.mobile-app-body) .topbar form[data-erp-logout-form]{display:block!important;width:auto!important;margin:0!important}
  body:not(.mobile-app-body) .topbar :is(.btn,.icon-btn){flex:0 0 auto!important;width:auto!important;max-width:100%!important;margin:0!important}
  body:not(.mobile-app-body) #sidebarToggle{width:40px!important;min-width:40px!important;height:40px!important}

  /* Headings and panels may wrap, but command buttons remain content-width. */
  body:not(.mobile-app-body) .page-head{align-items:flex-start!important;gap:8px!important;margin-bottom:10px!important}
  body:not(.mobile-app-body) .page-head>div:first-child{width:100%!important;min-width:0!important;flex:1 1 100%!important}
  body:not(.mobile-app-body) .page-head :is(h1,h2,p),
  body:not(.mobile-app-body) .panel-head :is(h1,h2,h3,p),
  body:not(.mobile-app-body) .document-page-head :is(h1,h2,h3,p){max-width:100%!important;overflow-wrap:anywhere!important}
  body:not(.mobile-app-body) .page-head h1{font-size:1.18rem!important;line-height:1.2!important}
  body:not(.mobile-app-body) .page-head p{font-size:.76rem!important;line-height:1.4!important}
  body:not(.mobile-app-body) .panel{border-radius:11px!important}
  body:not(.mobile-app-body) .panel-head{flex-wrap:wrap!important;align-items:flex-start!important;padding:10px!important;gap:7px!important}
  body:not(.mobile-app-body) .panel-body{padding:10px!important;min-width:0!important}

  /* Global backend command surfaces: never force one action button per row. */
  body:not(.mobile-app-body) :is(
    .top-action-bar,.actions,.page-head .actions,.panel-head .actions,.toolbar .actions,
    .table-tool-actions,.erp-filterbar-actions,.document-actions,.modal-actions,
    .ci-filter-actions,.multi-filter-tools,.column-modal-tools,.inline-form,.workflow
  ){
    display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;
    align-items:center!important;justify-content:flex-start!important;
    width:auto!important;max-width:100%!important;gap:6px!important;
  }
  body:not(.mobile-app-body) :is(.top-action-bar,.page-head .actions,.document-actions){width:100%!important}
  body:not(.mobile-app-body) :is(
    .top-action-bar,.actions,.page-head .actions,.panel-head .actions,.toolbar,.table-tool-actions,
    .erp-filterbar-actions,.document-actions,.modal-actions,.ci-filter-actions,.multi-filter-tools,
    .column-modal-tools,.inline-form,.workflow
  ) :is(.btn,a.btn,button.btn,summary.btn){
    width:auto!important;min-width:0!important;max-width:100%!important;
    flex:0 0 auto!important;white-space:nowrap!important;
  }
  body:not(.mobile-app-body) :is(.erp-filterbar-actions,.modal-actions,.ci-filter-actions) .btn{flex:0 0 auto!important;width:auto!important}
  body:not(.mobile-app-body) details.action-menu{width:auto!important;max-width:100%!important;flex:0 0 auto!important}
  body:not(.mobile-app-body) details.action-menu>summary{width:auto!important;max-width:100%!important}

  /* Search / form fields keep useful width. Buttons next to them stay compact. */
  body:not(.mobile-app-body) .toolbar{
    display:flex!important;flex-flow:row wrap!important;align-items:flex-end!important;
    gap:7px!important;padding:8px!important;min-width:0!important;
  }
  body:not(.mobile-app-body) .toolbar>.field{flex:1 1 180px!important;width:auto!important;min-width:150px!important;max-width:100%!important}
  body:not(.mobile-app-body) .toolbar>.field.grow,
  body:not(.mobile-app-body) .toolbar>:is(.compact-search,.erp-live-search,.search-field){flex:1 1 100%!important;width:100%!important;min-width:0!important;max-width:none!important}
  body:not(.mobile-app-body) :is(input.input,select.input,textarea.input){max-width:100%!important;font-size:16px!important}
  body:not(.mobile-app-body) .form-grid{grid-template-columns:minmax(0,1fr)!important;gap:9px!important}
  body:not(.mobile-app-body) .form-grid>:is(.span-2,.span-3,.span-4){grid-column:1/-1!important}
  body:not(.mobile-app-body) :is(.two-col,.three-col){grid-template-columns:minmax(0,1fr)!important}

  /* KPI/chart layouts remain readable rather than overflowing the viewport. */
  body:not(.mobile-app-body) :is(.metrics,.ci-kpis,.ci-product-sales-kpis,.erp-kpi-strip,.report-summary-strip,.product-overview-line){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body:not(.mobile-app-body) :is(.chart-box,.ci-chart-card){width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
  body:not(.mobile-app-body) :is(.chart-box,.ci-chart-card) canvas{display:block!important;max-width:100%!important;width:100%!important}

  /* Generic backend modals fit the viewport and keep action buttons compact. */
  body:not(.mobile-app-body) .modal-overlay{padding:8px!important;overflow:auto!important;overscroll-behavior:contain!important}
  body:not(.mobile-app-body) :is(.modal-card,.modal-card.wide,.erp-modal-card){
    width:min(96vw,960px)!important;max-width:96vw!important;
    max-height:calc(100dvh - 16px)!important;min-width:0!important;
    overflow:auto!important;border-radius:12px!important;
  }
  body:not(.mobile-app-body) :is(.erp-modal-body,.modal-card .panel-body,.modal-card .form-grid){min-width:0!important;max-width:100%!important}
  body:not(.mobile-app-body) .modal-actions{position:sticky!important;bottom:0!important;z-index:8!important;background:#fff!important;border-top:1px solid #dbe3ec!important}
  body:not(.mobile-app-body) .modal-filters{grid-template-columns:minmax(0,1fr)!important;gap:7px!important}
  body:not(.mobile-app-body) .modal-filters>*{grid-column:1/-1!important;min-width:0!important}

  /* Action-menu popovers become a safe bottom sheet on phones. */
  body:not(.mobile-app-body) .action-menu-pop{
    position:fixed!important;left:10px!important;right:10px!important;top:auto!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    width:auto!important;min-width:0!important;max-width:none!important;max-height:60dvh!important;
    overflow-y:auto!important;overscroll-behavior:contain!important;z-index:2147483200!important;
  }

  /* Every known backend table wrapper is a genuine finger-scroll viewport. */
  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-x pan-y!important;overscroll-behavior-inline:contain!important;
    overscroll-behavior-x:contain!important;position:relative!important;
  }
  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;
  }
  body:not(.mobile-app-body) .data-table th,
  body:not(.mobile-app-body) .data-table td{max-width:none!important}

  /* Pagination can wrap without pushing the whole page sideways. */
  body:not(.mobile-app-body) :is(.pager,.erp-table-pager){
    display:flex!important;flex-flow:row wrap!important;align-items:center!important;
    justify-content:flex-start!important;gap:7px!important;max-width:100%!important;min-width:0!important;
    padding:8px!important;margin:0!important;
  }
  body:not(.mobile-app-body) .erp-table-pager .erp-pager-range{flex:1 1 100%!important;width:100%!important;margin:0!important}
  body:not(.mobile-app-body) .erp-pager-size{margin-left:0!important}

  /* Prevent long identifiers/labels from widening cards. Table cells remain scrollable. */
  body:not(.mobile-app-body) :is(.field label,.metric,.compact-details,.locked,.alert,.file-row,.document-summary-card){min-width:0!important;overflow-wrap:anywhere!important}
}

@media(max-width:520px){
  body:not(.mobile-app-body) .content{padding:7px!important}
  body:not(.mobile-app-body) .toolbar>.field{flex:1 1 100%!important;width:100%!important;min-width:0!important}
  body:not(.mobile-app-body) :is(.metrics,.ci-kpis,.ci-product-sales-kpis,.erp-kpi-strip,.report-summary-strip,.product-overview-line){gap:7px!important}
  body:not(.mobile-app-body) .topbar{padding:6px!important;gap:5px!important}
  body:not(.mobile-app-body) .topbar-title{font-size:.84rem!important}
  body:not(.mobile-app-body) #erpRefreshData,
  body:not(.mobile-app-body) .topbar form[data-erp-logout-form] .btn{
    width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;font-size:0!important;
  }
  body:not(.mobile-app-body) #erpRefreshData::before{content:'↻';font-size:18px!important;line-height:1!important}
  body:not(.mobile-app-body) .topbar form[data-erp-logout-form] .btn::before{content:'⎋';font-size:17px!important;line-height:1!important}
  body:not(.mobile-app-body) .pwa-install-shortcut{min-height:40px!important;padding:6px 8px!important;font-size:.72rem!important}
}

@media(max-width:340px){
  body:not(.mobile-app-body) :is(.metrics,.ci-kpis,.ci-product-sales-kpis,.erp-kpi-strip,.report-summary-strip,.product-overview-line){grid-template-columns:minmax(0,1fr)!important}
  body:not(.mobile-app-body) .topbar-title{font-size:.78rem!important}
}



/* V12 | Backend desktop + mobile viewport: one text-only Clear per search.
   PWA is explicitly excluded. The button is inside the existing search shell,
   never a flex/grid sibling that could wrap to the following line. */
body:not(.mobile-app-body) .content .erp-global-search-shell {
  position:relative!important;min-width:0!important;
}
body:not(.mobile-app-body) .content .erp-global-search-shell > input.erp-global-search-input:not(#invoiceSupplierName),
body:not(.mobile-app-body) .content .erp-global-search-shell > input.erp-global-search-input:not(#invoiceSupplierName):focus,
body:not(.mobile-app-body) .content .erp-global-search-shell > input.erp-global-search-input:not(#invoiceSupplierName):hover {
  box-sizing:border-box!important;min-width:0!important;width:100%!important;
  padding-right:72px!important;
}
body:not(.mobile-app-body) .content .erp-global-search-shell > input::-webkit-search-cancel-button {
  display:none!important;-webkit-appearance:none!important;
}
body:not(.mobile-app-body) .content .erp-global-search-shell > .erp-field-clear {
  position:absolute!important;right:5px!important;top:50%!important;
  transform:translateY(-50%)!important;z-index:5!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;width:53px!important;min-width:53px!important;
  height:27px!important;min-height:27px!important;margin:0!important;
  padding:0 7px!important;white-space:nowrap!important;line-height:1!important;
  border:1px solid #cfdaea!important;border-radius:6px!important;
  background:#f4f7fc!important;color:#29486d!important;
  font-size:11px!important;font-weight:700!important;font-family:inherit!important;cursor:pointer!important;
  box-shadow:none!important;float:none!important;
}
body:not(.mobile-app-body) .content .erp-global-search-shell > .erp-field-clear:hover {
  background:#e7f0fb!important;border-color:#a8bfde!important;
}
body:not(.mobile-app-body) .content .erp-global-search-shell > .erp-field-clear:focus-visible {
  outline:2px solid #4683d0!important;outline-offset:1px!important;
}
/* The original Invoice Submission Clear is an adjacent action. Align it with
   the supplier field only in backend view; staff PWA styling is unchanged. */
body:not(.mobile-app-body) .invoice-mobile-page .invoice-supplier-search-row {
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;gap:7px!important;min-width:0!important;width:100%!important;
}
body:not(.mobile-app-body) .invoice-mobile-page .invoice-supplier-search-row > :is(.input,.erp-global-search-shell) {
  min-width:0!important;width:100%!important;grid-column:1!important;grid-row:1!important;
}
body:not(.mobile-app-body) .invoice-mobile-page .invoice-supplier-search-row > .mobile-pwa-search-clear {
  grid-column:2!important;grid-row:1!important;display:inline-flex!important;
  justify-content:center!important;align-items:center!important;
  box-sizing:border-box!important;min-width:57px!important;width:57px!important;
  height:36px!important;min-height:36px!important;max-height:36px!important;
  margin:0!important;padding:0 9px!important;white-space:nowrap!important;
  border:1px solid #cfdaea!important;border-radius:7px!important;
  background:#f4f7fc!important;color:#29486d!important;
  font-size:11px!important;line-height:1!important;font-weight:700!important;
  box-shadow:none!important;
}
@media(max-width:480px){
  body:not(.mobile-app-body) .content .erp-global-search-shell > .erp-field-clear {
    width:49px!important;min-width:49px!important;right:4px!important;
    height:27px!important;padding:0 5px!important;
  }
  body:not(.mobile-app-body) .content .erp-global-search-shell > input.erp-global-search-input {
    padding-right:61px!important;
  }
}


/* V13 - Business Analytics compact Product Type. Keep the status column
   proportional to its ERP Product / Not ERP badge, not a large vacant panel.
   Explicit cell widths override auto-table and historical geometry defaults.
   Separate selectors cover the product, Pareto, SKU and outlet detail tables. */
body:not(.mobile-app-body) :is(
  #perfTable :is(th,td)[data-perf-key="status"],
  #perfTable :is(th,td)[data-perf-product-type],
  #paretoTable :is(th,td)[data-pareto-key="status"],
  #skuTable :is(th,td)[data-sku-key="status"]
){
  box-sizing:border-box!important;
  width:140px!important;
  min-width:140px!important;
  max-width:140px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
body:not(.mobile-app-body) :is(
  #perfTable td[data-perf-key="status"],
  #perfTable td[data-perf-product-type],
  #paretoTable td[data-pareto-key="status"],
  #skuTable td[data-sku-key="status"]
) :is(.ci-badge,.status){max-width:100%!important;white-space:normal!important;}