: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%;
}

.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 4px 14px rgb(15 23 42 / .24);
  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
):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
):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 28px 70px rgb(15 23 42 / .28),
    0 2px 8px rgb(15 23 42 / .12);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  text-align: center;
  overflow: auto;
  overscroll-behavior: contain;
}

.alfares-system-confirm::backdrop {
  background: rgb(15 23 42 / .58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.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 8px 22px rgb(24 89 169 / .18);
  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 8px 22px rgb(180 35 24 / .18);
}

.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 9px rgb(15 23 42 / .08);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.alfares-system-confirm__actions button:hover {
  filter: brightness(.98);
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgb(15 23 42 / .13);
}

.alfares-system-confirm__actions button:active {
  transform: translateY(0);
}

/* document-shared.css is installed on invoice/voucher/POS hosts and already
 * gives every focused button one local shadow. The dialog lives under body,
 * outside the document root, so bridge that host state explicitly. Other
 * pages retain the system outline fallback. */
body:has(:where(.erp-opr-invoice-shell, .erp-opr-sndat-shell))
  .alfares-system-confirm__actions button:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}

.alfares-system-confirm__confirm {
  border-color: #1859a9 !important;
  background: #1859a9 !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgb(24 89 169 / .24);
}

.alfares-system-confirm__confirm.is-danger {
  border-color: #b42318 !important;
  background: #b42318 !important;
  box-shadow: 0 7px 16px rgb(180 35 24 / .24);
}

@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;
  }
}

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