/* Static merged css: feature-Shared-css-b29eed0266. Source order is preserved. */
/* source: cssjs/Shared/usability/system-usability.css; sha256: b3ea73b4e82e0f28cbfa9ba43a80960d6ae4dcf5d58d3e4ea4434d9ed0fd51d6 */
:root {
  --alfares-focus-ring: #0b63ce;
  --alfares-focus-ring-offset: #fff;
  --alfares-safe-area-top: env(safe-area-inset-top, 0px);
  --alfares-safe-area-right: env(safe-area-inset-right, 0px);
  --alfares-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --alfares-safe-area-left: env(safe-area-inset-left, 0px);
  --alfares-layout-viewport-height: 100vh;
  --alfares-visual-viewport-height: 100vh;
  --alfares-visual-viewport-extent-height: 100vh;
  --alfares-visual-viewport-width: 100vw;
  --alfares-visual-viewport-offset-top: 0px;
  --alfares-visual-viewport-offset-left: 0px;
  --alfares-visual-viewport-offset-right: 0px;
  --alfares-visual-viewport-offset-bottom: 0px;
  --alfares-keyboard-inset: 0px;
}

@supports (height: 100dvh) {
  :root {
    --alfares-layout-viewport-height: 100dvh;
    --alfares-visual-viewport-height: 100dvh;
    --alfares-visual-viewport-extent-height: 100dvh;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@layer alfares-search-hints {
  input[data-search-hint-kind]::placeholder {
    color: var(--alfares-search-hint-ink, #6b7280) !important;
    -webkit-text-fill-color: var(--alfares-search-hint-ink, #6b7280) !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  /* Gray hints remain readable on the sidebar's dark surface as well as the
   * light document and lookup fields. Entered text retains the native color. */
  .my-slider-sidebar input[data-search-hint-kind] {
    --alfares-search-hint-ink: #cbd5e1;
  }

  @media (forced-colors: active) {
    input[data-search-hint-kind]::placeholder {
      color: CanvasText !important;
      -webkit-text-fill-color: CanvasText !important;
    }
  }
}

/* Screen table headings keep their palette and column dividers without
 * decorative accent strips. The shared layer also covers later legacy skins.
 * Designer header cells retain their own selection and drag indicators. */
@layer alfares-table-header-lines {
  @media screen {
    table > thead,
    table > thead > tr,
    table > thead > tr > td,
    table th:not(:where(.MngRebortDesignerScope .preview-table-col-head-cell)),
    [role="columnheader"]:not(:where(.MngRebortDesignerScope .preview-table-col-head-cell)) {
      box-shadow: none !important;
    }
  }
}

/* Full pages own browser scrolling; legacy editor skins must not lock the
 * document to 100% height. Embedded quick-entry frames are not opted in. */
@media screen {
  html[data-page-scroll="document"] {
    height: auto !important;
    min-height: 100%;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
  }

  html[data-page-scroll="document"]:not(.is-slider-scroll-locked):not(.alfares-quick-entry-open):not(.is-dashboard-switcher-open):not(:has(body.modal-open, body.is-license-invoice-open)) {
    overflow-y: scroll !important;
  }

  html[data-page-scroll="document"] > body:not(.is-slider-scroll-locked):not(.alfares-quick-entry-open):not(.is-dashboard-switcher-open):not(.modal-open):not(.is-license-invoice-open) {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: clip;
    overflow-y: visible !important;
  }
}

.alfares-skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 2147483000;
  max-inline-size: calc(100vw - 16px);
  padding: 9px 12px;
  border: 2px solid #fff;
  border-radius: 6px;
  background: #0b3f91;
  color: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
  font: 700 13px/1.4 "Segoe UI", Tahoma, Arial, sans-serif;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
  transition: transform 120ms ease;
}

.alfares-skip-link:focus-visible {
  transform: translateY(0) !important;
  transition-duration: 0s !important;
}

:where(
  button,
  a[href],
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [role="button"],
  [role="tab"],
  [role="menuitem"],
  [role="menuitemradio"],
  [role="menuitemcheckbox"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  /* Keep a reliable fallback even when legacy screen CSS clears outline
   * without supplying a replacement. Explicit owners below opt out. */
  outline: 3px solid var(--alfares-focus-ring) !important;
  outline-offset: 2px !important;
}

/*
 * Fields inside a bordered composite control use that component's
 * :focus-within treatment as their single visible focus owner. The shared
 * outline remains enabled for standalone fields, while this explicit matrix
 * removes the second inner rectangle (and any broad document-field shadow)
 * from every current system family.
 */
:where(
  .auth-control,
  .auth-access-input,
  .register-control,
  .section-dashboard-filter__date-field,
  .my-report-date-field,
  .invoice-head-panel .my-document-inline-control,
  .invoice-head-panel .invoice-party-field-shell,
  .my-document-item-search-card .my-document-search-input-shell,
  .my-document-money-control,
  .invoice-party-search-input-shell,
  .erp-document-search-premium-input,
  .my-document-date-shell,
  .af-date-field-shell,
  .opr2-payment-party-field-shell,
  .opr2-payment-input-shell,
  .opr2-payment-due-date-card,
  .my-nav-global-search,
  .delivery-amount-field,
  .accounts-tree-search,
  .branch-account-transfer-field,
  .locations-control,
  .locations-search,
  .year-closing-input-wrap,
  .categories-control,
  .categories-search,
  .items-tree-search,
  .options-header-search,
  .sellers-control,
  .sellers-search,
  .sources-control,
  .sources-search,
  .activities-control,
  .activities-search,
  .permissions-search,
  .units-control,
  .units-search,
  .account-lookup-search,
  .voucher-account-menu-search,
  .report-item-search-input-shell,
  .invoice-item-alternatives-search
):focus-within :where(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select,
  textarea
):focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* An action embedded in the same bordered control must not add a second ring
 * over the component's :focus-within owner. Its local icon/background state
 * remains available to identify the active action. */
:where(
  .auth-control,
  .auth-access-input,
  .register-control,
  .section-dashboard-filter__date-field,
  .my-report-date-field,
  .invoice-head-panel .my-document-inline-control,
  .invoice-head-panel .invoice-party-field-shell,
  .my-document-item-search-card .my-document-search-input-shell,
  .my-document-money-control,
  .invoice-party-search-input-shell,
  .erp-document-search-premium-input,
  .my-document-date-shell,
  .af-date-field-shell,
  .opr2-payment-party-field-shell,
  .opr2-payment-input-shell,
  .opr2-payment-due-date-card,
  .my-nav-global-search,
  .delivery-amount-field,
  .accounts-tree-search,
  .branch-account-transfer-field,
  .locations-control,
  .locations-search,
  .year-closing-input-wrap,
  .categories-control,
  .categories-search,
  .items-tree-search,
  .options-header-search,
  .sellers-control,
  .sellers-search,
  .sources-control,
  .sources-search,
  .activities-control,
  .activities-search,
  .permissions-search,
  .units-control,
  .units-search,
  .account-lookup-search,
  .voucher-account-menu-search,
  .report-item-search-input-shell,
  .invoice-item-alternatives-search
):focus-within :where(button, [role="button"]):focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Invoice, voucher, and POS screens load document-shared.css after this
 * fallback. That established local shadow is their single focus mechanism;
 * do not compose the system outline over it. */
:where(.erp-opr-invoice-shell, .erp-opr-sndat-shell) :where(
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}

/* A locally styled standalone field keeps its own border/shadow and drops only
 * the shared outline. The runtime sets this opt-in after confirming that the
 * focused field already exposes a component-owned box-shadow. */
:where(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select,
  textarea
)[data-alfares-focus-managed="field"]:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}

:where(input, select, textarea)[aria-invalid="true"] {
  border-color: #b42318 !important;
  box-shadow: 0 0 0 3px rgb(180 35 24 / .15) !important;
}

/* A focused invalid field keeps one stronger red halo. Do not compose the
 * blue fallback outline over the validation state. */
:where(input, select, textarea)[aria-invalid="true"]:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 4px rgb(180 35 24 / .26) !important;
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

.alfares-system-confirm {
  inline-size: min(460px, calc(100vw - 32px));
  max-inline-size: 100%;
  max-block-size: calc(
    var(--alfares-visual-viewport-height)
    - var(--alfares-safe-area-top)
    - var(--alfares-safe-area-bottom)
    - 24px
  );
  margin: auto;
  padding: 0;
  border: 1px solid rgb(148 163 184 / .48);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .99), rgb(248 250 252 / .99));
  color: #172033;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, .08);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  text-align: center;
  overflow: auto;
  overscroll-behavior: contain;
}

.alfares-system-confirm::backdrop {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.alfares-system-confirm form {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 28px 24px;
}

.alfares-system-confirm__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: 2px;
  border: 1px solid #99c0ec;
  border-radius: 50%;
  background: linear-gradient(145deg, #edf6ff, #dbeafe);
  color: #1859a9;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
  font: 900 25px/1 "Segoe UI", Tahoma, Arial, sans-serif;
}

.alfares-system-confirm[data-tone="danger"] .alfares-system-confirm__icon {
  border-color: #f3aaa4;
  background: linear-gradient(145deg, #fff5f4, #fee4e2);
  color: #b42318;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}

.alfares-system-confirm h2 {
  margin: 0;
  color: #172033;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.alfares-system-confirm p {
  margin: 0;
  max-inline-size: 38ch;
  color: #475569;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
  overflow-wrap: anywhere;
}

.alfares-system-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  inline-size: 100%;
  padding-block-start: 8px;
}

.alfares-system-confirm__actions button {
  min-inline-size: 112px;
  min-block-size: 44px;
  padding: 10px 20px;
  border: 1px solid #94a3b8;
  border-radius: 11px;
  background: #fff;
  color: #263244;
  font: 700 14px/1.3 inherit;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

/* A crisp frame identifies the keyboard choice in every document host. */
.alfares-system-confirm__actions button:focus-visible {
  outline: 2px solid var(--my-shell-primary, #235b78) !important;
  outline-offset: 3px !important;
}

.alfares-system-confirm__confirm {
  border-color: #1859a9 !important;
  background: #1859a9 !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}

.alfares-system-confirm__confirm.is-danger {
  border-color: #b42318 !important;
  background: #b42318 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}

@media (max-width: 480px) {
  .alfares-system-confirm form {
    padding: 24px 18px 20px;
  }

  .alfares-system-confirm__actions button {
    flex: 1 1 120px;
  }
}

@media (pointer: coarse) {
  :where(
    button,
    [role="button"],
    [role="tab"],
    [role="menuitem"],
    [role="menuitemradio"],
    [role="menuitemcheckbox"]
  ) {
    min-inline-size: 36px !important;
    min-block-size: 36px !important;
    touch-action: manipulation;
  }

  :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ) {
    min-block-size: 36px !important;
  }

  :where(
    [data-alfares-mobile-close],
    [data-nav-menu-close],
    [data-bs-dismiss="modal"],
    [data-bs-dismiss="offcanvas"],
    .my-nav-menu [role="menuitem"],
    .my-slider-nav .my-nav-row
  ) {
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
  }

  .alfares-system-confirm__actions button {
    min-inline-size: 112px !important;
    min-block-size: 44px !important;
  }
}

/*
 * The runtime adds these semantic hooks to Bootstrap and custom dialogs. They
 * deliberately avoid changing a component's display/layout model: only the
 * visible bounds, scroll ownership and close-control reachability are shared.
 */
[data-alfares-mobile-overlay] {
  box-sizing: border-box;
  max-inline-size: calc(
    var(--alfares-visual-viewport-width)
    - var(--alfares-safe-area-right)
    - var(--alfares-safe-area-left)
  );
  max-block-size: calc(
    var(--alfares-visual-viewport-height)
    - var(--alfares-safe-area-top)
    - var(--alfares-safe-area-bottom)
  );
  overscroll-behavior: contain;
}

[data-alfares-overlay-scroll] {
  min-block-size: 0;
  max-block-size: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1199px) {
  [data-alfares-mobile-overlay]:is(dialog, [role="dialog"], [aria-modal="true"], .offcanvas) {
    max-block-size: calc(
      var(--alfares-visual-viewport-height)
      - var(--alfares-safe-area-top)
      - var(--alfares-safe-area-bottom)
      - 12px
    );
  }

  .modal[data-alfares-mobile-overlay] {
    position: fixed;
    top: var(--alfares-visual-viewport-offset-top, 0px);
    right: auto;
    bottom: auto;
    left: var(--alfares-visual-viewport-offset-left, 0px);
    inline-size: 100%;
    width: var(--alfares-visual-viewport-width, 100vw);
    block-size: var(--alfares-visual-viewport-height);
    max-inline-size: none;
    max-block-size: none;
    padding-block-start: var(--alfares-safe-area-top);
    padding-block-end: var(--alfares-safe-area-bottom);
  }

  .modal[data-alfares-mobile-overlay] .modal-dialog {
    max-block-size: calc(
      var(--alfares-visual-viewport-height)
      - var(--alfares-safe-area-top)
      - var(--alfares-safe-area-bottom)
      - 16px
    );
    margin-block: 8px;
  }

  .modal[data-alfares-mobile-overlay] .modal-content {
    max-block-size: inherit;
    overflow: hidden;
  }

  [data-alfares-mobile-overlay] [data-alfares-overlay-header] {
    position: sticky;
    inset-block-start: 0;
    z-index: 6;
  }

  [data-alfares-mobile-overlay] [data-alfares-overlay-footer] {
    position: sticky;
    inset-block-end: 0;
    z-index: 5;
    padding-block-end: max(8px, var(--alfares-safe-area-bottom));
  }

  [data-alfares-mobile-overlay] [data-alfares-mobile-close] {
    position: relative;
    z-index: 8;
    flex: 0 0 auto;
    min-inline-size: 44px !important;
    min-block-size: 44px !important;
    touch-action: manipulation;
  }

  html.alfares-keyboard-open,
  body.alfares-keyboard-open {
    overscroll-behavior-y: none;
  }

  .alfares-keyboard-open :where(
    [data-alfares-overlay-scroll],
    .my-slider-screen,
    .my-slider-content
  ) {
    scroll-padding-block-start: calc(var(--alfares-safe-area-top) + 12px);
    scroll-padding-block-end: calc(var(--alfares-safe-area-bottom) + 20px);
  }
}

/* iOS zooms the document when a focused text control renders below 16px.
 * Restrict the correction to touch-first compact viewports so dense desktop
 * screens keep their established typography. */
@media (max-width: 1199px) and (pointer: coarse) {
  :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea,
    [contenteditable="true"]
  ) {
    font-size: max(16px, 1em) !important;
  }
}

@media (forced-colors: active) {
  :where(
    button,
    a[href],
    input:not([type="hidden"]),
    select,
    textarea,
    summary,
    [role="button"],
    [role="tab"],
    [role="menuitem"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline-color: CanvasText !important;
  }

  :where(input, select, textarea)[aria-invalid="true"]:focus-visible {
    outline: 3px solid CanvasText !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
}

/* Keep operational feedback on the physical left in both Arabic and English. */
html body .alfares-notification-host,
html body .alfares-notification--floating {
  position: fixed !important;
  inset: auto !important;
  top: max(86px, env(safe-area-inset-top)) !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  width: min(380px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
  max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
  max-height: min(55vh, 360px) !important;
  z-index: 10030 !important;
}

html body .alfares-notification-host {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-content: start !important;
  gap: 8px !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html body .alfares-notification-host::backdrop,
html body .alfares-notification--floating::backdrop {
  background: transparent !important;
  pointer-events: none !important;
}

html body .alfares-notification {
  --notification-text: #17634d;
  --notification-soft: #edf9f2;
  --notification-line: #bfdccc;
  --toast-tone: var(--notification-text);
  --toast-soft: var(--notification-soft);
  --toast-line: var(--notification-line);
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: min(35vh, 240px) !important;
  padding: 11px 14px !important;
  border: 1px solid var(--notification-line) !important;
  border-radius: 12px !important;
  background: var(--notification-soft) !important;
  color: var(--notification-text) !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .08) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  text-align: start !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  overflow: auto !important;
  pointer-events: auto !important;
}

html body .alfares-notification-host > .alfares-notification {
  position: relative !important;
  inset: auto !important;
  align-self: stretch !important;
  width: 100% !important;
  transform: none !important;
}

html body .alfares-notification[data-alfares-notification-tone="error"] {
  --notification-text: #9f3a3a;
  --notification-soft: #fff2f1;
  --notification-line: #e8c4c1;
}

html body .alfares-notification[data-alfares-notification-tone="warning"] {
  --notification-text: #805322;
  --notification-soft: #fff8ec;
  --notification-line: #e8d5b6;
}

html body .alfares-notification[data-alfares-notification-tone="info"] {
  --notification-text: #234f70;
  --notification-soft: #f1f7fb;
  --notification-line: #c5d9e7;
}

html body .alfares-notification p,
html body .alfares-notification .my-document-toast-text {
  color: inherit !important;
}

html body .alfares-notification-host[hidden],
html body .alfares-notification-host:empty,
html body .alfares-notification[hidden] {
  display: none !important;
}

@media print {
  .alfares-notification-host,
  .alfares-notification { display: none !important; }
}

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


/* One swipeable action row on phones. The explicit HTML contract keeps row
   menus, field tools and navigation outside this layout. Important rules live
   in this early shared layer so later screen skins cannot split the row. */
@layer alfares-mobile-actionbars {
  /* Screen skins may set display on buttons. Explicitly retain the hidden
     state instead of relying on the browser's lower-priority [hidden] rule. */
  @media screen {
    [data-screen-actionbar][hidden],
    [data-screen-actionbar].d-none,
    [data-screen-actionbar] [hidden],
    [data-screen-actionbar] .d-none { display: none !important; }
  }

  @media screen and (max-width: 767px), screen and (max-width: 1100px) and (pointer: coarse) {
    /* A three-dot or row menu keeps its own vertical item list: only screen and dialog bars become a swipe row.
       Report toolbars keep the report band's own phone grid, which shows every action and the report menu. */
    [data-screen-actionbar]:not([hidden]):not(.d-none):not([aria-hidden="true"]):not([style*="display:none"]):not([style*="display: none"]):not(:where([role="menu"] *, [data-three-dot-menu] *, [data-report-owned-menu] *, .report-owned-menu *)):not(:where(.my-report-actions-band > .my-report-action-group)) {
      display: flex !important;
      flex-flow: row nowrap !important;
      align-items: center !important;
      justify-content: flex-start !important;
      justify-content: safe center !important;
      box-sizing: border-box !important;
      min-inline-size: 0 !important;
      max-inline-size: 100% !important;
      inline-size: 100% !important;
      block-size: auto !important;
      gap: 6px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      overscroll-behavior-inline: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--alfares-focus-ring, #0b63ce) transparent;
      scroll-padding-inline: 8px;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y;
    }

    [data-screen-actionbar]:is([data-screen-actionbar="primary"], [data-screen-actionbar="dialog"]):not(:where([role="menu"] *, [data-three-dot-menu] *, [data-report-owned-menu] *, .report-owned-menu *)) {
      flex-shrink: 0 !important;
      padding: 6px 8px !important;
    }

    /* Groups retain their visibility and handlers; only their row geometry
       changes. The outside strip owns scrolling, including the New buttons. */
    [data-screen-actionbar] :is(.items-command-actions, .items-create-actions, [data-screen-actionbar-group]):not([hidden]):not(.d-none):not([aria-hidden="true"]):not([style*="display:none"]):not([style*="display: none"]):not(:where([role="menu"] *, [data-three-dot-menu] *, [data-report-owned-menu] *, .report-owned-menu *)) {
      display: flex !important;
      flex-flow: row nowrap !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
      inline-size: auto !important;
      min-inline-size: 0 !important;
      max-inline-size: none !important;
      margin: 0 !important;
      gap: 6px !important;
      overflow: visible !important;
    }

    [data-screen-actionbar] :is(button, a, input[type="submit"], input[type="button"], [role="button"]):not(:where([data-report-owned-menu] *, .report-owned-menu *, [role="menu"] *, .my-report-actions-band > .my-report-action-group *)) {
      flex: 0 0 auto !important;
      inline-size: auto !important;
      width: auto !important;
      min-inline-size: 44px !important;
      max-inline-size: none !important;
      max-width: none !important;
      block-size: 44px !important;
      min-block-size: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      margin-block: 0 !important;
      padding-inline: 12px !important;
      align-self: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
      font-size: 12px !important;
      line-height: 1.2 !important;
      text-align: center !important;
      scroll-margin-inline: 8px;
    }

    [data-screen-actionbar] :is(button, a, [role="button"]):not(:where([data-report-owned-menu] *, .report-owned-menu *, [role="menu"] *, .my-report-actions-band > .my-report-action-group *)) :is(span, b) {
      white-space: nowrap !important;
      text-overflow: clip !important;
      overflow: visible !important;
    }

    [data-screen-actionbar] kbd:not(:where([data-report-owned-menu] *, .report-owned-menu *, [role="menu"] *)) { display: none !important; }
    [data-screen-actionbar] :focus-visible:not(:where([data-report-owned-menu] *, .report-owned-menu *, [role="menu"] *)) { outline-offset: -3px !important; }
    [data-screen-actionbar]::-webkit-scrollbar { height: 4px; }
    [data-screen-actionbar]::-webkit-scrollbar-thumb { background: var(--alfares-focus-ring, #0b63ce); border-radius: 4px; }

    [data-screen-actionbar-host] {
      min-inline-size: 0 !important;
      block-size: auto !important;
      min-block-size: 56px !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
    }
  }
}


/* source: cssjs/Shared/menus/three-dot-action-menu.css; sha256: c2016ece5234d416297e17883eb018b0b29aa76ffd5b7ee372619fea18b7ab49 */
/*
 * System three-dot action-menu contract (Task 183).
 *
 * An ellipsis already communicates "more actions". Its transient menu opens
 * beside that owner and closes on outside click or Escape, so a second title
 * strip and an X inside the menu duplicate the same affordance.  Keep dialog,
 * search and selection-sheet headers out of this list: this contract is only
 * for compact action menus opened by a three-dot control.
 */

/* Keep enough specificity to beat legacy screen rules that also use
   !important (notably the invoice shell header rule). The asset still loads
   last, while :is() makes that ordering effective inside real screen roots. */
html body :is(
  [data-three-dot-menu],
  .alfares-quick-entry-field-menu,
  .invoice-party-action-menu[data-party-menu],
  .erp-search-action-menu[data-search-options-menu],
  .my-document-context-menu[role="menu"],
  .accounts-reference-actions-menu[role="menu"],
  .opr-reference-actions-menu[role="menu"],
  .cost-centers-reference-menu[role="menu"],
  .report-owned-menu--row[data-report-owned-menu],
  .report-owned-menu--report[data-report-owned-menu],
  [data-report-owned-menu][data-report-menu-mode="row"],
  [data-report-owned-menu][data-report-menu-mode="report"]
) > :is(
  [data-three-dot-menu-header],
  .alfares-quick-entry-field-menu__header,
  .invoice-party-menu-header,
  .my-document-menu-header,
  .invoice-three-dot-menu-header,
  .accounts-reference-actions-head,
  .opr-unit-actions-head,
  .report-owned-menu__header,
  header
) {
  display: none !important;
  min-block-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* A hidden first grid row must not reserve any space in report action menus. */
:where(
  .report-owned-menu--row[data-report-owned-menu],
  .report-owned-menu--report[data-report-owned-menu],
  [data-report-owned-menu][data-report-menu-mode="row"],
  [data-report-owned-menu][data-report-menu-mode="report"]
) {
  grid-template-rows: minmax(0, 1fr) !important;
}

:where(
  .report-owned-menu--row[data-report-owned-menu],
  .report-owned-menu--report[data-report-owned-menu],
  [data-report-owned-menu][data-report-menu-mode="row"],
  [data-report-owned-menu][data-report-menu-mode="report"]
) > .report-owned-menu__items {
  padding-block-start: 0 !important;
}


/* source: cssjs/Myshar/css/document-mobile-usability.css; sha256: f195b28fdd9dbefce905d20442b4879f5927c25776bacbcfd2ec48be5b121c10 */
/* Physical phones/tablets only. Desktop sizing, permission visibility and
   native document events remain owned by their existing components. */
@media screen {
/* A wide iPad also scrolls rows, totals and checkout in the same page flow. */
html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]:has([data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) {
  height: auto;
  min-height: 100dvh;
  max-height: none;
  overflow: visible;
}

html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]:has([data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) .my-slider-workspace {
  height: auto;
  min-height: 0;
  max-height: none;
  grid-template-rows: max-content max-content;
  align-content: start;
  overflow: visible;
}

html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]:has([data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])) :is(.my-slider-content, .my-slider-screen) {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]
  [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]),
html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]
  [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"]) > .my-document-shell {
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
  overflow: visible;
}

html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]
  [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])
  :is(#tabContent, [data-erp-tab-exclusive], #divOpr, [data-erp-explicit-tab-pane], .sales-invoice-editor-surface,
    .my-document-main, #divOprInnerTabsContent, #divOprSalesTabPane, [data-document-pane="items"],
    [data-document-pane="accounts"], [data-document-pane="raw-materials"]) {
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
  overflow: visible;
}

html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]
  [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])
  .sales-invoice-editor-surface:is(.is-totals-bottom, .is-totals-side) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
}

html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]
  [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])
  .sales-invoice-editor-surface :is([data-document-pane="items"], [data-document-pane="accounts"], [data-document-pane="raw-materials"])
  > :is(.erp-invoice-detail-table-scroll-x, .entag11-table-frame) {
  flex: 0 0 auto;
  height: auto !important;
  min-height: 120px !important;
  max-height: none !important;
}

/* The absolute empty state cannot size its frame; reserve its message, hint and add action. */
html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]
  [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])
  .sales-invoice-editor-surface :is([data-document-pane="items"], [data-document-pane="accounts"]) > .invoice-lines-table.invoice-lines-is-empty {
  min-height: 168px !important;
}

html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])
  .invoice-lines-table .my-document-empty-lines:not([hidden]) {
  inset: 50px 8px 6px !important;
  gap: 6px !important;
  padding: 4px !important;
}

html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])
  .invoice-lines-table .my-document-empty-lines .invoice-empty-icon {
  display: none !important;
}

html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])
  .invoice-lines-table .my-document-empty-lines small {
  display: block !important;
}

html[data-mobile-document-device="true"] body .my-slider-shell[data-document-viewport="true"]
  [data-document-root].erp-opr-invoice-shell:not(.pos2-restaurant-document):not([data-kt-document-kind="tailoring-invoice"])
  :is(.my-document-totals-host, .my-document-totals) {
  height: auto !important;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document) {
  container: document-touch / inline-size;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-layout, .my-document-layout.is-totals-side, .my-document-main) {
  grid-template-columns: minmax(0, 1fr) !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-shell, .my-document-panel, .my-document-workspace-tools,
    .my-document-identity-grid, .my-document-item-search-card, #tabContent,
    #divOpr, #divOprInnerTabsContent, #divOprSalesTabPane, #divOprTotalsHost,
    .my-document-totals, .invoice-totals-card) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .sales-invoice-editor-surface.is-totals-side {
  height: auto !important;
  grid-template-rows: auto !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .sales-invoice-editor-surface.is-totals-side :is(.my-document-main, #divOprInnerTabsContent, .my-document-totals-host) {
  grid-column: 1 !important;
  grid-row: auto !important;
  height: auto !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .sales-invoice-editor-surface.is-totals-side > .my-document-main {
  display: grid !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .sales-invoice-editor-surface.is-totals-side .my-document-totals {
  height: auto !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .invoice-head-panel .my-document-identity-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
  gap: 8px !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-field-grid, .my-document-field-grid.is-compact, .my-document-payment-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-field, .my-document-inline-control, .invoice-party-field-shell,
    .my-document-workspace-tabs, .my-document-payment-methods) {
  min-width: 0 !important;
  max-width: 100%;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-field > span:first-child, .invoice-data-field > span:first-child) {
  white-space: normal;
  line-height: 1.4 !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([readonly]):not([disabled]),
    select:not([disabled]), textarea:not([readonly]):not([disabled])) {
  font-size: 16px !important;
  line-height: 1.35 !important;
  min-height: 44px !important;
  box-sizing: border-box;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-button, .my-document-icon-button, .my-document-workspace-tabs > button,
    .my-document-payment-methods > button, .opr-detail-quantity-step,
    .my-document-context-menu > button, .erp-search-action-menu > button, [data-delete-button]) {
  min-height: 44px !important;
  height: auto !important;
  line-height: 1.35;
  touch-action: manipulation;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-icon-button, .erp-document-search-button, .opr-detail-quantity-step, [data-delete-button]) {
  min-width: 44px !important;
  width: 44px !important;
  flex-shrink: 0;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .my-document-line-table td:has(> [data-delete-button]) {
  min-width: 52px !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-context-menu, .erp-search-action-menu) > button {
  font-size: 14px !important;
  white-space: normal;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-command-strip, .my-document-command-actions, .invoice-totals-actions-host) {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 6px;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .my-document-command-actions > .my-document-button {
  max-width: 100%;
  white-space: normal;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-inline-control:has(> #Ser), .voucher-identity-field .erp-document-number-shell,
    .invoice-head-panel .my-document-inline-control:has(> [data-erp-document-search])) {
  grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important;
  grid-template-rows: 44px !important;
  height: auto !important;
  min-height: 52px !important;
}

/* The saved-document report menu is the fifth control of every document number. */
html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-inline-control:has(> #Ser), .erp-document-number-shell):has(> .af-document-report-slot) {
  grid-template-columns: 44px 44px minmax(0, 1fr) 44px 44px !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .invoice-head-panel .invoice-party-field-shell {
  grid-template-columns: 44px 44px minmax(0, 1fr) 44px !important;
  grid-template-rows: 44px !important;
  height: auto !important;
  min-height: 52px !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-date-shell, .af-date-field-shell) {
  grid-template-columns: minmax(0, 1fr) 44px !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .my-document-item-search-card .my-document-search-input-shell {
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  grid-template-rows: 44px !important;
  min-height: 52px !important;
  height: auto !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .my-document-item-search-card .my-document-search-input-shell.barcode-camera-input-shell {
  grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(.my-document-table-wrap, .erp-invoice-detail-table-scroll-x) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: auto;
  touch-action: pan-x pan-y;
  overscroll-behavior-inline: contain;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  :is(#divOprInnerTabsContent, #divOprSalesTabPane:not([hidden]):not(.d-none).active) {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  #tblOprDetail .opr-detail-quantity-control {
  grid-template-columns: 44px minmax(76px, 1fr) 44px !important;
  min-width: 176px !important;
  gap: 4px;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  #tblOprDetail .opr-detail-quantity-control[data-quantity-step-editable="false"] {
  grid-template-columns: minmax(76px, 1fr) !important;
  min-width: 76px !important;
}

/* The shared row-number layer owns important sizes and grid order. Override
   its physical and logical tracks in that same layer, on mobile devices only. */
@layer alfares-row-number-more {
  html[data-mobile-document-device="true"] body [data-document-root]
    .my-document-line-table :is(.invoice-line-context-trigger[data-row-more-trigger], .voucher-line-context-button) {
    width: 44px !important;
    inline-size: 44px !important;
    min-width: 44px !important;
    min-inline-size: 44px !important;
    max-width: 44px !important;
    max-inline-size: 44px !important;
    height: 44px !important;
    block-size: 44px !important;
    min-height: 44px !important;
    min-block-size: 44px !important;
    max-height: 44px !important;
    max-block-size: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    touch-action: manipulation;
  }

  html[data-mobile-document-device="true"] body [data-document-root]
    .my-document-line-table :is(.erp-invoice-row-number-actions, .voucher-line-row-head):not([hidden]):not(.d-none):not([aria-hidden="true"]) {
    grid-template-columns: minmax(28px, 1fr) 44px !important;
    gap: 4px !important;
    min-width: 76px !important;
    min-inline-size: 76px !important;
    min-height: 44px !important;
    min-block-size: 44px !important;
    height: auto !important;
    block-size: auto !important;
    max-height: none !important;
    max-block-size: none !important;
  }

  html[data-mobile-document-device="true"] body [data-document-root]
    .my-document-line-table :is([data-row-number-more-cell], [data-column-key="idx"], .col-no) {
    min-width: 88px !important;
    min-inline-size: 88px !important;
  }

  /* The heading column-settings menu and row-number sort share the row touch tracks. */
  html[data-mobile-document-device="true"] body [data-document-root]
    .my-document-line-table thead .invoice-column-settings-header-button[data-header-more-trigger] {
    width: 44px !important;
    inline-size: 44px !important;
    min-width: 44px !important;
    min-inline-size: 44px !important;
    max-width: 44px !important;
    max-inline-size: 44px !important;
    height: 40px !important;
    block-size: 40px !important;
    min-height: 40px !important;
    min-block-size: 40px !important;
    flex: 0 0 44px !important;
    touch-action: manipulation;
  }

  html[data-mobile-document-device="true"] body [data-document-root]
    .my-document-line-table thead .alfares-row-number-more {
    grid-template-columns: minmax(28px, 1fr) 44px !important;
    gap: 4px !important;
    min-height: 40px !important;
    min-block-size: 40px !important;
  }

  html[data-mobile-document-device="true"] body [data-document-root]
    .my-document-line-table thead [data-row-number] {
    height: 40px !important;
    block-size: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
  }

  html[data-mobile-document-device="true"] body [data-document-root]
    .my-document-line-table thead [data-row-number] > button {
    min-width: 28px !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    touch-action: manipulation;
  }
}

/* Payment completion: the party buttons use the same 44px touch tracks, so the
   label takes its own row instead of floating over them. */
html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell[data-invoice-payment-ui="premium"]:not(.pos2-restaurant-document)
  .opr2-payment-dialog .opr2-payment-party-field {
  grid-template-rows: auto auto !important;
  row-gap: 3px !important;
}

html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell[data-invoice-payment-ui="premium"]:not(.pos2-restaurant-document)
  .opr2-payment-dialog .opr2-payment-party-field > span:first-child {
  position: static !important;
  padding-inline: 4px;
  font-size: 12px;
  line-height: 1.4;
}

html[data-mobile-document-device="true"] body [data-document-root].erp-opr-invoice-shell[data-invoice-payment-ui="premium"]:not(.pos2-restaurant-document)
  .opr2-payment-dialog .opr2-payment-party-field-shell {
  grid-template-columns: 44px 44px minmax(0, 1fr) 44px !important;
  grid-template-rows: 44px !important;
  padding-top: 3px !important;
}

html[data-mobile-document-device="true"] body [data-document-root]
  :is(.my-document-totals-host, [data-testid="totals-panel"], [data-testid="totals-card"], [data-testid="totals-card-peek"]) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
}

html[data-mobile-document-device="true"] body [data-document-root]
  :is([data-opr2-summary-placement], [data-testid="totals-placement-toggle-button"], .invoice-summary-pin-button) {
  display: none !important;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .my-document-totals .invoice-actions-grid:not([hidden]):not(.d-none) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
  gap: 6px;
  width: 100%;
}

html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
  .my-document-totals .invoice-actions-grid > .my-document-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 8px !important;
  white-space: normal;
  font-size: 13px;
}

html[data-mobile-document-device="true"] body [data-document-root]
  .my-document-totals .invoice-actions-grid > .my-document-button kbd { display: none; }

/* The same native search input is raised with its results, including wide iPad. */
html[data-mobile-document-device="true"] body :is([data-document-root], [data-report-root]) .is-mobile-lookup-source {
  position: fixed !important;
  inset: auto !important;
  left: var(--lookup-source-left, 10px) !important;
  top: var(--lookup-source-top, 10px) !important;
  width: var(--lookup-source-width, calc(100vw - 20px)) !important;
  inline-size: var(--lookup-source-width, calc(100vw - 20px)) !important;
  min-inline-size: 0 !important;
  max-inline-size: var(--lookup-source-width, calc(100vw - 20px)) !important;
  height: var(--lookup-source-height, 44px) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 1300 !important;
  background: var(--my-doc-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(20, 45, 80, .1);
}

html[data-mobile-document-device="true"] body :is([data-document-root], [data-report-root]) .is-mobile-lookup-source::backdrop {
  background: transparent !important;
  pointer-events: none !important;
}

html[data-mobile-document-device="true"] body :is([data-document-root], [data-report-root]) .document-lookup-source-slot {
  pointer-events: none;
  visibility: hidden;
}

html[data-mobile-document-device="true"] body [data-voucher-account-search-host].is-mobile-lookup-source {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  padding: 0 !important;
  border: 0 !important;
}

html[data-mobile-document-device="true"] body [data-voucher-account-search-host].is-mobile-lookup-source > .item-search-field {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

html[data-mobile-document-device="true"] body [data-voucher-account-search-host].is-mobile-lookup-source .my-document-search-input-shell {
  width: 100% !important;
  height: 100% !important;
  min-height: 44px !important;
  padding: 3px !important;
  box-sizing: border-box;
  align-items: center;
}

html[data-mobile-document-device="true"] body [data-voucher-account-search-host].is-mobile-lookup-source input[data-voucher-account-search-input] {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
}

/* A filtered ancestor shifts fixed descendants out of the visual viewport. */
html[data-mobile-document-device="true"] body #VoucherAccountSearchModal#VoucherAccountSearchModal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep the original raised input; its hidden mirror still drives native queries. */
html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source)
  #VoucherAccountSearchModal#VoucherAccountSearchModal .voucher-account-menu-search {
  display: none !important;
}

html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source)
  #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-voucher-account-search-premium-box {
  grid-template-rows: minmax(0, 1fr) !important;
}

html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source)
  #VoucherAccountSearchModal#VoucherAccountSearchModal .voucher-account-menu-toolbar {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 10px;
  z-index: 6;
  width: 44px;
  height: 44px;
  padding: 0 !important;
}

html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source)
  #VoucherAccountSearchModal#VoucherAccountSearchModal [data-voucher-account-search-close] {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  touch-action: manipulation;
}

html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source)
  #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-toolbar {
  padding-inline-end: 58px !important;
  grid-template-columns: 78px minmax(0, 1fr) 44px 96px !important;
}

html[data-mobile-document-device="true"] body #VoucherAccountSearchModal#VoucherAccountSearchModal
  :is(.erp-item-search-view-button, .erp-item-search-density-toggle) {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}

html[data-mobile-document-device="true"] body #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-view-switch {
  width: 96px !important;
  grid-template-columns: repeat(2, 44px) !important;
}

html[data-mobile-document-device="true"] body #VoucherAccountSearchModal#VoucherAccountSearchModal
  .erp-item-search-filter .my-report-select-combobox.my-document-select-combobox > button.my-report-select-button {
  min-height: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
}

html[data-mobile-document-device="true"] body #VoucherAccountSearchModal#VoucherAccountSearchModal
  .erp-item-search-filter .my-report-select-button > .my-report-select-value {
  display: block !important;
}

/* Native keyboard mode hides filters; reserve the close row above the table. */
html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source)
  #VoucherAccountSearchModal#VoucherAccountSearchModal[data-account-search-keyboard="true"] .erp-voucher-account-search-premium-box {
  grid-template-rows: 52px minmax(0, 1fr) !important;
}

html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source)
  #VoucherAccountSearchModal#VoucherAccountSearchModal[data-account-search-keyboard="true"] .voucher-account-menu-toolbar {
  position: static;
  inset: auto;
  width: 100%;
  height: 52px;
  padding: 4px 10px !important;
  box-sizing: border-box;
  justify-content: flex-end;
}

html[data-mobile-document-device="true"] body .pos2-restaurant-document
  .restaurant-categories-panel .category-strip button:is(.is-active, .myButton_custom_Cat_clicked) {
  background: var(--my-doc-chip-bg, #e8f1f5) !important;
  background-image: none !important;
  border-color: var(--my-doc-primary, #123f60) !important;
  color: var(--my-doc-primary, #123f60) !important;
}

html[data-mobile-document-device="true"] body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage
  :is(.cart-order-type-strip, .invoice-action-order-types) .workspace-order-type[data-pos2-order-type] {
  background: var(--my-doc-chip-bg, #e8f1f5) !important;
  background-image: none !important;
  border-color: var(--my-doc-primary, #123f60) !important;
  color: var(--my-doc-primary, #123f60) !important;
}

html[data-mobile-document-device="true"] body .erp-opr-invoice-shell.pos2-restaurant-document .pos2-legacy-stage
  :is(.cart-order-type-strip, .invoice-action-order-types) .workspace-order-type[data-pos2-order-type].is-active {
  background: var(--my-doc-primary, #123f60) !important;
  background-image: none !important;
  color: #fff !important;
}

@media (max-width: 620px) {
  html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source)
    #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-toolbar {
    padding-inline-end: 7px !important;
    grid-template-columns: minmax(68px, 1fr) 44px 96px !important;
  }

  html[data-mobile-document-device="true"] body:has([data-voucher-account-search-host].is-mobile-lookup-source)
    #VoucherAccountSearchModal#VoucherAccountSearchModal .erp-item-search-filter {
    padding-inline-end: 52px !important;
  }
}

/* Dialogs retain their native visibility and scroll owners while the keyboard opens. */
html[data-mobile-document-device="true"]:has([data-document-root]) [data-alfares-mobile-overlay],
html[data-mobile-document-device="true"] .alfares-quick-entry-frame [data-alfares-mobile-overlay] {
  max-block-size: calc(var(--alfares-visual-viewport-height) - var(--alfares-safe-area-top) - var(--alfares-safe-area-bottom) - 12px);
}

html[data-mobile-document-device="true"]:has([data-document-root]) [data-alfares-mobile-overlay] [data-alfares-overlay-header] {
  position: sticky;
  inset-block-start: 0;
  z-index: 6;
}

html[data-mobile-document-device="true"]:has([data-document-root]) [data-alfares-mobile-overlay] [data-alfares-overlay-footer] {
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  padding-block-end: max(8px, var(--alfares-safe-area-bottom));
}

html[data-mobile-document-device="true"]:has([data-document-root]) .modal[data-alfares-mobile-overlay] {
  position: fixed;
  top: var(--alfares-visual-viewport-offset-top, 0px);
  right: auto;
  bottom: auto;
  left: var(--alfares-visual-viewport-offset-left, 0px);
  width: var(--alfares-visual-viewport-width, 100vw);
  inline-size: var(--alfares-visual-viewport-width, 100vw);
  block-size: var(--alfares-visual-viewport-height);
  max-inline-size: none;
  max-block-size: none;
  padding-block-start: var(--alfares-safe-area-top);
  padding-block-end: var(--alfares-safe-area-bottom);
}

html[data-mobile-document-device="true"]:has([data-document-root]) .modal[data-alfares-mobile-overlay] .modal-dialog {
  max-block-size: calc(var(--alfares-visual-viewport-height) - var(--alfares-safe-area-top) - var(--alfares-safe-area-bottom) - 16px);
  margin-block: 8px;
}

html[data-mobile-document-device="true"]:has([data-document-root]) .modal[data-alfares-mobile-overlay] .modal-content {
  max-block-size: inherit;
  overflow: hidden;
}

html[data-mobile-document-device="true"] body.alfares-quick-entry-frame
  :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([readonly]):not([disabled]), select:not([disabled]), textarea:not([readonly]):not([disabled])),
html[data-mobile-document-device="true"] body.alfares-quick-entry-frame
  :is(#OprItems_Page, #OprAccounts_Page, #OprUnites_Page, #OprMsader_Page, #OprMrTklfa_Page, #OprBarcode_Page, [data-categories-root], [data-activities-root])
  :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([readonly]):not([disabled]), select:not([disabled]), textarea:not([readonly]):not([disabled])) {
  font-size: 16px !important;
  min-height: 44px !important;
}

html[data-mobile-document-device="true"] body.alfares-quick-entry-frame
  :is(#OprItems_Page, #OprAccounts_Page, #OprUnites_Page, #OprMsader_Page, #OprMrTklfa_Page, #OprBarcode_Page, [data-categories-root], [data-activities-root])
  :is(button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
  min-width: 44px !important;
  min-height: 44px !important;
  height: auto !important;
  touch-action: manipulation;
}

html[data-mobile-document-device="true"].alfares-keyboard-open:has([data-document-root])
  :is([data-alfares-overlay-scroll], .my-slider-screen, .my-slider-content) {
  scroll-padding-block-start: calc(var(--alfares-safe-area-top) + 12px);
  scroll-padding-block-end: calc(var(--alfares-safe-area-bottom) + 20px);
}

@container document-touch (max-width: 560px) {
  html[data-mobile-document-device="true"] body [data-document-root]:is(#OprDocumentRoot, #SndatDocumentRoot, [data-document-root]):not(.pos2-restaurant-document)
    :is(.invoice-head-panel .my-document-identity-grid, .my-document-workspace-tools) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
}