/* ============================================================================
   sobi-select — the OPEN list of every dropdown (2026-10-21, owner)

   One look for both engines: the list wwwroot/js/sobi-select.js opens for a
   plain <select>, and bootstrap-select's menu for the .dropquery/.selectpicker
   ones. A search band on top, flush to the edges; rows divided by a hairline;
   the row under the pointer or the keyboard in petrol with the terra bar (the
   sale page's client picker, made the standard); the chosen row in terra.

   A select's CLOSED look stays where it was (sobi-theme.css, the page's own
   .pl-select / .st-select …): only the list lives here. Every colour falls
   back to the palette's value, so a page without sobi-theme.css (the focus
   layout, the public pages, onboarding) shows the same list.
   ============================================================================ */

/* ---- the list sobi-select.js opens (on <body>, or inside the modal / dialog its select is in) ---- */
.sobi-select {
  position: fixed;
  z-index: 100000;              /* above modals (1050), jQuery UI dialogs and the datepicker */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--surface, #fff);
  color: var(--text, #1b2a31);
  border: 1px solid var(--border, #dce3e7);
  border-radius: 12px;
  box-shadow: var(--shadow-md, 0 6px 20px rgba(20, 40, 50, .10));
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.sobi-select__search {
  flex: none;
  border-bottom: 1px solid var(--border, #dce3e7);
  background: var(--surface, #fff);
}
/* (0,2,1) and after sobi-theme.css: outranks `.sobi-theme input[type="text"]`, which is !important too */
.sobi-select input.sobi-select__input {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 11px 14px 11px 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a999f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat 13px center / 15px 15px !important;
  color: var(--text, #1b2a31) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
.sobi-select input.sobi-select__input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.sobi-select input.sobi-select__input::placeholder { color: var(--text-subtle, #607078); opacity: 1; }
.sobi-select__list {
  position: relative;           /* the rows' offsetTop, for keeping the cursor in view */
  flex: 1 1 auto;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
}
.sobi-select__row {
  padding: 8px 12px;
  border-bottom: 1px solid var(--petrol-50, #f0f5f7);
  color: var(--text, #1b2a31);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.sobi-select__row:last-child { border-bottom: 0; }
.sobi-select__row.is-cursor {
  background: var(--petrol-50, #f0f5f7);
  box-shadow: inset 3px 0 0 var(--terra-500, #cd5417);
}
.sobi-select__row.is-selected {
  background: var(--terra-50, #fdeee6);
  color: var(--terra-700, #a8410f);
  font-weight: 600;
}
.sobi-select__row.is-selected.is-cursor { box-shadow: inset 3px 0 0 var(--terra-600, #bd4a12); }
.sobi-select__row.is-blank { color: var(--text-subtle, #607078); }
.sobi-select__row.is-disabled { color: var(--text-subtle, #607078); opacity: .5; cursor: not-allowed; }
.sobi-select__group {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-subtle, #607078);
}
.sobi-select__empty {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-subtle, #607078);
}
.sobi-select__row[hidden],
.sobi-select__group[hidden],
.sobi-select__empty[hidden] { display: none !important; }

/* the select keeps its focus look while its list is open (the focus itself is in the search) */
select.sobi-select-open {
  border-color: var(--petrol-500, #3a6e80);
  box-shadow: 0 0 0 3px rgba(37, 73, 88, .15);
  outline: none;
}
.sobi-theme select.sobi-select-open {
  border-color: var(--petrol-500, #3a6e80) !important;
  box-shadow: 0 0 0 3px rgba(37, 73, 88, .15) !important;
}

/* ---- bootstrap-select's menu (the .dropquery / .selectpicker selects): the same list ----
   bootstrap-select 1.13: .bootstrap-select > div.dropdown-menu > (.bs-searchbox, div.inner > ul.dropdown-menu.inner > li > a.dropdown-item).
   With container:'body' the menu sits in a .bs-container that carries .bootstrap-select too. */
.sobi-theme .bootstrap-select > .dropdown-menu {
  padding: 0 !important;
  min-width: 200px !important;
  overflow: hidden !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, #dce3e7) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-md, 0 6px 20px rgba(20, 40, 50, .10)) !important;
}
/* In FORM CARDS the open menu spans the field instead of shrinking to its content. Dense toolbar
   dropdowns keep their content-sized menus. */
.sobi-theme .shadow-body .bootstrap-select > .dropdown-menu,
.sobi-theme .cachedForm .bootstrap-select > .dropdown-menu,
.sobi-theme .sobi-wideform .bootstrap-select > .dropdown-menu { width: 100% !important; min-width: 100% !important; }
/* Cap the open list so a long one (every city) scrolls inside the menu rather than running off the
   page: the plugin's size:'auto' sets an inline max-height that can be taller than the viewport.
   div.inner is the plugin's scroller ($menuInner: its keyboard and virtual scroll move it); the
   ul.dropdown-menu.inner inside it never scrolls on its own. Its margin stays the plugin's: from 600
   options on, the virtual scroll draws only the rows in view and writes the height of the rest above
   and below them as the ul's inline margin-top / margin-bottom (a margin here would cut the list there). */
.sobi-theme .bootstrap-select > .dropdown-menu > .inner {
  max-height: 320px !important;
  overflow-y: auto !important;
}
.sobi-theme .bootstrap-select .dropdown-menu.inner {
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sobi-theme .bootstrap-select .bs-searchbox {
  padding: 0 !important;
  border-bottom: 1px solid var(--border, #dce3e7) !important;
  background: var(--surface, #fff) !important;
}
.sobi-theme .bootstrap-select .bs-searchbox input,
.sobi-theme .bootstrap-select .bs-searchbox input:focus {
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 11px 14px 11px 36px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a999f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat 13px center / 15px 15px !important;
  color: var(--text, #1b2a31) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
/* yourstyle.css gives every li a 1px margin the plugin's row measure (offsetHeight) leaves out: from 600
   options on, each drawn row then pushed the list 1px past the virtual scroll's sums, and the last rows
   stayed blank at the end of the scroll */
.sobi-theme .bootstrap-select .dropdown-menu li { margin: 0; }
.sobi-theme .bootstrap-select .dropdown-menu li a {
  padding: 8px 12px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--petrol-50, #f0f5f7);
  background: transparent !important;
  color: var(--text, #1b2a31) !important;
  font-size: 13.5px !important;
  font-weight: 500;
  line-height: 1.35 !important;
}
.sobi-theme .bootstrap-select .dropdown-menu li:last-child a { border-bottom: 0; }
.sobi-theme .bootstrap-select .dropdown-menu li a span.text { color: inherit !important; }
/* the row under the pointer / the keyboard (bootstrap's .active would paint it blue) */
.sobi-theme .bootstrap-select .dropdown-menu li a:hover,
.sobi-theme .bootstrap-select .dropdown-menu li a:focus,
.sobi-theme .bootstrap-select .dropdown-menu li a:active,
.sobi-theme .bootstrap-select .dropdown-menu li a.active,
.sobi-theme .bootstrap-select .dropdown-menu li.active > a {
  background: var(--petrol-50, #f0f5f7) !important;
  color: var(--text, #1b2a31) !important;
  box-shadow: inset 3px 0 0 var(--terra-500, #cd5417) !important;
  outline: none !important;
}
/* the chosen row reads in the accent */
.sobi-theme .bootstrap-select .dropdown-menu li.selected > a {
  background: var(--terra-50, #fdeee6) !important;
  color: var(--terra-700, #a8410f) !important;
  font-weight: 600 !important;
}
.sobi-theme .bootstrap-select .dropdown-menu li.selected > a:hover,
.sobi-theme .bootstrap-select .dropdown-menu li.selected > a.active,
.sobi-theme .bootstrap-select .dropdown-menu li.selected.active > a {
  background: var(--terra-50, #fdeee6) !important;
  color: var(--terra-700, #a8410f) !important;
  box-shadow: inset 3px 0 0 var(--terra-600, #bd4a12) !important;
}
.sobi-theme .bootstrap-select .dropdown-menu li.disabled > a,
.sobi-theme .bootstrap-select .dropdown-menu li.disabled > a:hover {
  background: transparent !important;
  color: var(--text-subtle, #607078) !important;
  box-shadow: none !important;
  opacity: .5;
  cursor: not-allowed;
}
.sobi-theme .bootstrap-select .dropdown-menu .dropdown-header {
  padding: 10px 12px 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-subtle, #607078) !important;
}
.sobi-theme .bootstrap-select .dropdown-menu .no-results {
  margin: 0 !important;
  padding: 12px 14px !important;
  background: transparent !important;
  font-size: 13px !important;
  color: var(--text-subtle, #607078) !important;
}