/* ======================================================================
   TRADER PREMIUM COMPONENTS — CYCLE 2/5

   Scope:
   - Navigation, buttons, form controls, search controls and toolbars.
   - Visual/cascade changes only. No workflow, URL or business-logic changes.
   - Uses the semantic --ui-* foundation from premium-foundation.css.
   - Legacy specificity is handled centrally here rather than per-screen patches.
====================================================================== */

/* ----------------------------------------------------------------------
   Navigation — compact executive / financial SaaS treatment
------------------------------------------------------------------------ */
html body .nav-bar {
  height: 68px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--ui-border-subtle) !important;
  background: color-mix(in srgb, var(--skin-nav-bg) 94%, var(--ui-surface-raised) 6%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.025), var(--ui-shadow-xs) !important;
}

html body .nav-container {
  width: min(100%, var(--ui-content-max)) !important;
  max-width: var(--ui-content-max) !important;
  height: 68px !important;
  margin: 0 auto !important;
  padding: 0 var(--ui-content-gutter) !important;
  box-sizing: border-box !important;
}

html body .brand {
  height: 68px !important;
  padding-left: var(--ui-space-2) !important;
  line-height: 68px !important;
}

html body .brand a {
  display: inline-flex !important;
  align-items: center !important;
  height: 68px !important;
  outline-offset: -2px !important;
}

html body .brand a img {
  display: block !important;
  max-height: 54px !important;
  width: auto !important;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.18));
}

html body .nav-list > li > a,
html body .nav-list > li > a:visited {
  min-height: 40px !important;
  margin: 14px 2px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--ui-space-2) !important;
  line-height: 40px !important;
  border: 1px solid transparent !important;
  border-radius: var(--ui-radius-md) !important;
  background: transparent !important;
  color: var(--skin-nav-text) !important;
  font-size: var(--ui-font-size-md) !important;
  font-weight: var(--ui-font-weight-medium) !important;
  letter-spacing: .005em !important;
  transition:
    background-color var(--ui-duration-base) var(--ui-ease-standard),
    border-color var(--ui-duration-base) var(--ui-ease-standard),
    color var(--ui-duration-base) var(--ui-ease-standard),
    transform var(--ui-duration-fast) var(--ui-ease-standard) !important;
}

html body .nav-list > li > a:hover,
html body .nav-list > li > a:focus,
html body .nav-list > li > a:visited:hover {
  border-color: var(--ui-border-subtle) !important;
  background: var(--ui-surface-hover) !important;
  color: var(--skin-nav-text) !important;
}

html body .nav-list > li > a:active {
  transform: translateY(1px) !important;
  background: var(--ui-surface-pressed) !important;
}

html body nav ul li a:not(:only-child)::after,
html body nav ul li a:visited:not(:only-child)::after {
  padding-left: 2px !important;
  content: "▾" !important;
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  transform: translateY(1px) !important;
}

html body .nav-dropdown {
  min-width: 224px !important;
  padding: var(--ui-space-2) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: var(--ui-shadow-lg) !important;
  overflow: hidden !important;
  z-index: var(--ui-z-dropdown) !important;
}

html body nav ul li ul li {
  min-width: 208px !important;
  float: none !important;
}

html body .nav-dropdown li a,
html body .nav-dropdown li a:visited {
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid transparent !important;
  border-radius: var(--ui-radius-sm) !important;
  background: transparent !important;
  color: var(--ui-text) !important;
  line-height: 20px !important;
  font-size: var(--ui-font-size-sm) !important;
  font-weight: var(--ui-font-weight-medium) !important;
}

html body .nav-dropdown li a:hover,
html body .nav-dropdown li a:focus,
html body .nav-dropdown li a:visited:hover {
  border-color: var(--ui-border-subtle) !important;
  background: var(--ui-surface-hover) !important;
  color: var(--ui-text-strong) !important;
}

html body .submenu-icon {
  width: 22px !important;
  display: inline-flex !important;
  justify-content: center !important;
  opacity: .88 !important;
  filter: saturate(.82) !important;
}

html body .nav-theme-item {
  height: 68px !important;
  display: flex !important;
  align-items: center !important;
}

html body .theme-toggle {
  min-width: 86px !important;
  height: 36px !important;
  margin: 16px 6px !important;
  padding: 0 12px !important;
  gap: 7px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius-pill) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--skin-nav-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  font-size: var(--ui-font-size-sm) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  transition:
    background-color var(--ui-duration-base) var(--ui-ease-standard),
    border-color var(--ui-duration-base) var(--ui-ease-standard),
    box-shadow var(--ui-duration-base) var(--ui-ease-standard),
    transform var(--ui-duration-fast) var(--ui-ease-standard) !important;
}

html body .theme-toggle:hover,
html body .theme-toggle:focus {
  border-color: var(--ui-accent-soft-border) !important;
  background: var(--ui-accent-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--ui-shadow-xs) !important;
}

html body .theme-toggle:active {
  transform: translateY(1px) !important;
}

/* ----------------------------------------------------------------------
   Form labels / field rhythm
------------------------------------------------------------------------ */
html body #MainCanvas label,
html body #MainCanvas .edit-label,
html body #MainCanvas .detail-edit-label,
html body #MainCanvas .field-label,
html body #MainCanvas .label-block,
html body #MainCanvas [class*="-field-label"] {
  color: var(--ui-text-secondary) !important;
  font-size: var(--ui-font-size-sm) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  letter-spacing: .006em !important;
}

html body #MainCanvas .req,
html body #MainCanvas .edit-required,
html body #MainCanvas [class*="-required"] {
  color: var(--ui-danger) !important;
  font-weight: var(--ui-font-weight-bold) !important;
}

html body #MainCanvas .edit-field-note,
html body #MainCanvas .help-block,
html body #MainCanvas .form-text,
html body #MainCanvas small.text-muted,
html body #MainCanvas [class*="-hint"],
html body #MainCanvas [class*="-note"] {
  color: var(--ui-text-muted) !important;
  font-size: var(--ui-font-size-xs) !important;
  line-height: var(--ui-leading-snug) !important;
}

/* ----------------------------------------------------------------------
   Inputs / selects / textareas
------------------------------------------------------------------------ */
html body #MainCanvas input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]),
html body #MainCanvas select,
html body #MainCanvas textarea,
html body #MainCanvas .form-control,
html body #MainCanvas .edit-input,
html body #MainCanvas .edit-select,
html body #MainCanvas .detail-edit-input,
html body #MainCanvas .detail-edit-select,
html body #MainCanvas [class*="-search-input"] {
  min-height: var(--ui-control-height-md) !important;
  padding: 8px 11px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  background: var(--ui-surface-input) !important;
  color: var(--ui-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
  font-size: var(--ui-font-size-md) !important;
  line-height: 20px !important;
  transition:
    border-color var(--ui-duration-base) var(--ui-ease-standard),
    background-color var(--ui-duration-base) var(--ui-ease-standard),
    box-shadow var(--ui-duration-base) var(--ui-ease-standard) !important;
}

html body #MainCanvas textarea,
html body #MainCanvas textarea.form-control {
  min-height: 92px !important;
  resize: vertical !important;
  line-height: var(--ui-leading-normal) !important;
}

html body #MainCanvas input::placeholder,
html body #MainCanvas textarea::placeholder,
html body #MainCanvas [class*="-search-input"]::placeholder {
  color: var(--ui-text-muted) !important;
  opacity: .82 !important;
}

html body #MainCanvas input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):hover,
html body #MainCanvas select:hover,
html body #MainCanvas textarea:hover,
html body #MainCanvas .form-control:hover {
  border-color: var(--ui-border-strong) !important;
}

html body #MainCanvas input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):focus,
html body #MainCanvas select:focus,
html body #MainCanvas textarea:focus,
html body #MainCanvas .form-control:focus,
html body #MainCanvas [class*="-search-input"]:focus {
  border-color: var(--ui-focus) !important;
  background: var(--ui-surface-input) !important;
  box-shadow: 0 0 0 3px var(--ui-focus-ring), inset 0 1px 0 rgba(255,255,255,.02) !important;
  outline: none !important;
}

html body #MainCanvas input[readonly],
html body #MainCanvas textarea[readonly],
html body #MainCanvas select[disabled],
html body #MainCanvas input[disabled],
html body #MainCanvas textarea[disabled],
html body #MainCanvas .edit-readonly-input {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-secondary) !important;
  border-color: var(--ui-border-subtle) !important;
  cursor: default !important;
}

html body #MainCanvas input[disabled],
html body #MainCanvas textarea[disabled],
html body #MainCanvas select[disabled],
html body #MainCanvas button[disabled],
html body #MainCanvas .btn[disabled],
html body #MainCanvas .disabled {
  opacity: .56 !important;
  cursor: not-allowed !important;
}

html body #MainCanvas input[type="checkbox"],
html body #MainCanvas input[type="radio"] {
  accent-color: var(--ui-accent) !important;
}

/* Bootstrap / legacy input groups */
html body #MainCanvas .input-group-addon,
html body #MainCanvas .edit-input-addon,
html body #MainCanvas .edit-input-group-addon,
html body #MainCanvas .detail-edit-addon,
html body #MainCanvas [class*="-addon"] {
  min-height: var(--ui-control-height-md) !important;
  padding: 8px 10px !important;
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-secondary) !important;
  font-size: var(--ui-font-size-sm) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
}

html body #MainCanvas .input-group > .form-control:first-child,
html body #MainCanvas .input-group > input:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html body #MainCanvas .input-group-addon:last-child,
html body #MainCanvas .edit-input-addon:last-child,
html body #MainCanvas .detail-edit-addon:last-child {
  border-top-right-radius: var(--ui-radius-md) !important;
  border-bottom-right-radius: var(--ui-radius-md) !important;
}

/* Validation states */
html body #MainCanvas .has-error input,
html body #MainCanvas .has-error select,
html body #MainCanvas .has-error textarea,
html body #MainCanvas input.is-invalid,
html body #MainCanvas select.is-invalid,
html body #MainCanvas textarea.is-invalid,
html body #MainCanvas [aria-invalid="true"] {
  border-color: var(--ui-danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 18%, transparent) !important;
}

html body #MainCanvas .has-success input,
html body #MainCanvas .has-success select,
html body #MainCanvas .has-success textarea,
html body #MainCanvas input.is-valid,
html body #MainCanvas select.is-valid,
html body #MainCanvas textarea.is-valid {
  border-color: var(--ui-success) !important;
}

/* ----------------------------------------------------------------------
   Buttons — one geometry, clear semantic hierarchy
------------------------------------------------------------------------ */
html body #MainCanvas button,
html body #MainCanvas .btn,
html body #MainCanvas [type="button"],
html body #MainCanvas [type="submit"],
html body #MainCanvas [type="reset"],
html body #MainCanvas .edit-btn,
html body #MainCanvas .detail-edit-btn,
html body #MainCanvas [class*="-btn"] {
  min-height: var(--ui-control-height-md) !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-md) !important;
  font-family: var(--ui-font-sans) !important;
  font-size: var(--ui-font-size-sm) !important;
  font-weight: var(--ui-font-weight-semibold) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: var(--ui-shadow-xs) !important;
  cursor: pointer !important;
  transition:
    background-color var(--ui-duration-base) var(--ui-ease-standard),
    border-color var(--ui-duration-base) var(--ui-ease-standard),
    color var(--ui-duration-base) var(--ui-ease-standard),
    box-shadow var(--ui-duration-base) var(--ui-ease-standard),
    transform var(--ui-duration-fast) var(--ui-ease-standard) !important;
}

html body #MainCanvas .btn-block {
  width: 100% !important;
}

html body #MainCanvas .btn-primary,
html body #MainCanvas .edit-btn-primary,
html body #MainCanvas .detail-edit-btn-primary,
html body #MainCanvas [type="submit"]:not(.btn-danger):not(.btn-success) {
  border-color: color-mix(in srgb, var(--ui-accent) 76%, var(--ui-border-strong)) !important;
  background: var(--ui-accent) !important;
  color: var(--ui-accent-contrast) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 4px 12px color-mix(in srgb, var(--ui-accent) 20%, transparent) !important;
}

html body #MainCanvas .btn-primary:hover,
html body #MainCanvas .btn-primary:focus,
html body #MainCanvas .edit-btn-primary:hover,
html body #MainCanvas .detail-edit-btn-primary:hover {
  border-color: var(--ui-accent-hover) !important;
  background: var(--ui-accent-hover) !important;
  color: var(--ui-accent-contrast) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 6px 16px color-mix(in srgb, var(--ui-accent) 24%, transparent) !important;
}

html body #MainCanvas .btn-primary:active,
html body #MainCanvas .edit-btn-primary:active,
html body #MainCanvas .detail-edit-btn-primary:active {
  transform: translateY(1px) !important;
  background: var(--ui-accent-pressed) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.18) inset !important;
}

html body #MainCanvas .btn-default,
html body #MainCanvas .btn-light,
html body #MainCanvas .btn-soft,
html body #MainCanvas .edit-btn-secondary,
html body #MainCanvas .detail-edit-btn-secondary,
html body #MainCanvas [class*="-clear-btn"] {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-raised) !important;
  color: var(--ui-text) !important;
}

html body #MainCanvas .btn-default:hover,
html body #MainCanvas .btn-light:hover,
html body #MainCanvas .btn-soft:hover,
html body #MainCanvas .edit-btn-secondary:hover,
html body #MainCanvas .detail-edit-btn-secondary:hover,
html body #MainCanvas [class*="-clear-btn"]:hover {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface-hover) !important;
  color: var(--ui-text-strong) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

html body #MainCanvas .btn-success,
html body #MainCanvas .detail-edit-btn-success {
  border-color: color-mix(in srgb, var(--ui-success) 75%, var(--ui-border)) !important;
  background: color-mix(in srgb, var(--ui-success) 16%, var(--ui-surface-raised)) !important;
  color: var(--ui-success) !important;
}

html body #MainCanvas .btn-success:hover,
html body #MainCanvas .detail-edit-btn-success:hover {
  background: color-mix(in srgb, var(--ui-success) 23%, var(--ui-surface-raised)) !important;
}

html body #MainCanvas .btn-danger,
html body #MainCanvas .detail-edit-btn-danger {
  border-color: color-mix(in srgb, var(--ui-danger) 68%, var(--ui-border)) !important;
  background: color-mix(in srgb, var(--ui-danger) 14%, var(--ui-surface-raised)) !important;
  color: var(--ui-danger) !important;
}

html body #MainCanvas .btn-danger:hover,
html body #MainCanvas .detail-edit-btn-danger:hover {
  background: color-mix(in srgb, var(--ui-danger) 22%, var(--ui-surface-raised)) !important;
}

html body #MainCanvas .btn-info {
  border-color: color-mix(in srgb, var(--ui-info) 58%, var(--ui-border)) !important;
  background: color-mix(in srgb, var(--ui-info) 13%, var(--ui-surface-raised)) !important;
  color: var(--ui-info) !important;
}

html body #MainCanvas button:hover:not([disabled]),
html body #MainCanvas .btn:hover:not([disabled]),
html body #MainCanvas [class*="-btn"]:hover:not([disabled]) {
  transform: translateY(-1px) !important;
}

html body #MainCanvas button:active:not([disabled]),
html body #MainCanvas .btn:active:not([disabled]),
html body #MainCanvas [class*="-btn"]:active:not([disabled]) {
  transform: translateY(0) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

/* Keep icon rhythm consistent without changing icon libraries. */
html body #MainCanvas .btn > .fa,
html body #MainCanvas [class*="-btn"] > .fa,
html body #MainCanvas button > .fa {
  line-height: 1 !important;
  opacity: .92 !important;
}

/* ----------------------------------------------------------------------
   Search / filter cards and toolbars
------------------------------------------------------------------------ */
html body #MainCanvas [class*="-search-card"],
html body #MainCanvas .search-style-card {
  padding: var(--ui-space-3) !important;
  border-color: var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface-card) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

html body #MainCanvas [class*="-search-input"],
html body #MainCanvas .search-style-input {
  min-height: var(--ui-control-height-lg) !important;
  padding-left: 13px !important;
  padding-right: 13px !important;
  font-size: var(--ui-font-size-md) !important;
}

html body #MainCanvas [class*="-toolbar"],
html body #MainCanvas .toolbar,
html body #MainCanvas .edit-toolbar,
html body #MainCanvas .edit-actions,
html body #MainCanvas .search-style-toolbar {
  gap: var(--ui-space-2) !important;
}

html body #MainCanvas [class*="-toolbar-left"],
html body #MainCanvas [class*="-toolbar-right"],
html body #MainCanvas .edit-toolbar-left,
html body #MainCanvas .edit-toolbar-right,
html body #MainCanvas .edit-actions-left,
html body #MainCanvas .edit-actions-right {
  gap: var(--ui-space-2) !important;
  align-items: center !important;
}

html body #MainCanvas .edit-toolbar-card,
html body #MainCanvas .edit-actions-card,
html body #MainCanvas [class*="-filters-card"] {
  border-color: var(--ui-border-subtle) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface-card) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

/* Search metadata / summary should recede visually from the controls. */
html body #MainCanvas [class*="-summary"],
html body #MainCanvas [class*="-subhint"],
html body #MainCanvas .search-style-meta,
html body #MainCanvas .search-style-note {
  color: var(--ui-text-muted) !important;
  font-size: var(--ui-font-size-xs) !important;
}

/* ----------------------------------------------------------------------
   Mobile navigation: preserve existing jQuery show/hide behavior
------------------------------------------------------------------------ */
@media only screen and (max-width: 798px) {
  html body .nav-bar,
  html body .nav-container {
    height: 64px !important;
  }

  html body .brand,
  html body .brand a {
    height: 64px !important;
    line-height: 64px !important;
  }

  html body .brand a img {
    max-height: 50px !important;
    margin-top: 0 !important;
  }

  html body .nav-mobile {
    width: 64px !important;
    height: 64px !important;
    background: transparent !important;
  }

  html body #nav-toggle {
    left: 15px !important;
    top: 19px !important;
  }

  html body nav {
    padding-top: 64px !important;
  }

  html body nav > ul.nav-list {
    padding: 8px !important;
    border-top: 1px solid var(--ui-border-subtle) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    background: var(--ui-surface-raised) !important;
    box-shadow: var(--ui-shadow-lg) !important;
  }

  html body .nav-list > li > a,
  html body .nav-list > li > a:visited {
    width: 100% !important;
    min-height: 42px !important;
    margin: 2px 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    line-height: 20px !important;
    justify-content: flex-start !important;
  }

  html body .nav-theme-item {
    display: block !important;
    height: auto !important;
  }

  html body .theme-toggle {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 2px 0 !important;
    padding: 0 14px !important;
    justify-content: flex-start !important;
    border-radius: var(--ui-radius-md) !important;
    background: transparent !important;
  }

  html body .nav-dropdown {
    position: static !important;
    margin: 2px 0 6px !important;
    padding: 5px !important;
    border-radius: var(--ui-radius-md) !important;
    box-shadow: none !important;
    background: var(--ui-surface-soft) !important;
  }

  html body .nav-dropdown li a,
  html body .nav-dropdown li a:visited {
    padding: 9px 14px !important;
  }
}

/* ----------------------------------------------------------------------
   Light-specific small optical corrections
------------------------------------------------------------------------ */
html[data-theme="light"] body .nav-bar {
  box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.035) !important;
}

html[data-theme="light"] body #MainCanvas button,
html[data-theme="light"] body #MainCanvas .btn,
html[data-theme="light"] body #MainCanvas [class*="-btn"] {
  box-shadow: 0 1px 2px rgba(15,23,42,.055) !important;
}

/* ----------------------------------------------------------------------
   Search controls — icon-aware geometry hotfix
   Keep the premium base from collapsing search/autocomplete components
   that reserve space for an embedded magnifier and clear action.
------------------------------------------------------------------------ */

/* Canonical live-list search fields: magnifier is the direct sibling. */
html body #MainCanvas .products-search-wrap,
html body #MainCanvas .suppliers-search-wrap,
html body #MainCanvas .purchase-docs-search-wrap,
html body #MainCanvas .sales-docs-search-wrap,
html body #MainCanvas .retail-clients-search-wrap,
html body #MainCanvas .payments-search-wrap,
html body #MainCanvas .receipts-search-wrap,
html body #MainCanvas .price-lists-search-wrap {
  position: relative !important;
}

html body #MainCanvas .products-search-wrap > .fa-search,
html body #MainCanvas .suppliers-search-wrap > .fa-search,
html body #MainCanvas .purchase-docs-search-wrap > .fa-search,
html body #MainCanvas .sales-docs-search-wrap > .fa-search,
html body #MainCanvas .retail-clients-search-wrap > .fa-search,
html body #MainCanvas .payments-search-wrap > .fa-search,
html body #MainCanvas .receipts-search-wrap > .fa-search,
html body #MainCanvas .price-lists-search-wrap > .fa-search {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  line-height: 1 !important;
  color: var(--ui-text-muted) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html body #MainCanvas .products-search-wrap > .products-search-input,
html body #MainCanvas .suppliers-search-wrap > .suppliers-search-input,
html body #MainCanvas .purchase-docs-search-wrap > .purchase-docs-search-input,
html body #MainCanvas .sales-docs-search-wrap > .sales-docs-search-input,
html body #MainCanvas .retail-clients-search-wrap > .retail-clients-search-input,
html body #MainCanvas .payments-search-wrap > .payments-search-input,
html body #MainCanvas .receipts-search-wrap > .receipts-search-input,
html body #MainCanvas .price-lists-search-wrap > .price-lists-search-input {
  min-height: var(--ui-control-height-lg) !important;
  height: var(--ui-control-height-lg) !important;
  padding-left: 40px !important;
  padding-right: 104px !important;
}

/* Entity autocomplete fields used inside ADDNEW/detail forms. */
html body #MainCanvas .search-style-field {
  position: relative !important;
}

html body #MainCanvas .search-style-field > .search-style-icon {
  position: absolute !important;
  left: 18px !important;
  top: 30px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  line-height: 1 !important;
  color: var(--ui-text-muted) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

html body #MainCanvas .search-style-field > .search-style-input {
  width: 100% !important;
  min-height: 60px !important;
  height: 60px !important;
  padding: 0 18px 0 52px !important;
  line-height: 60px !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  html body #MainCanvas .search-style-field > .search-style-input {
    min-height: 52px !important;
    height: 52px !important;
    padding-left: 46px !important;
    line-height: 52px !important;
  }

  html body #MainCanvas .search-style-field > .search-style-icon {
    left: 16px !important;
    top: 26px !important;
  }
}