/* GSMVanta Select System — canonical source
   --------------------------------------------------------------------------
   This is the single visual contract for searchable dropdowns across public,
   customer and administration workspaces. Native <select> elements remain the
   form/validation source of truth; select-system.js owns only the picker UI.

   IMPORTANT: do not add page-specific dropdown skins. Change dropdown visuals
   here so every select stays consistent in light, dark and system themes. */

html body select.gv-select-field {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-inline-end: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 15px) 50%,
    calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
html[dir="rtl"] body select.gv-select-field {
  padding-inline: 34px 12px;
  background-position: 15px 50%, 10px 50%;
}
html body select.gv-select-field:disabled { cursor: not-allowed; }
html body select.gv-select-field.gv-select-open {
  border-color: var(--gv-text,#171717);
  box-shadow: 0 0 0 1px var(--gv-text,#171717);
}

.gv-select-popover {
  
  --gv-select-surface: var(--theme-control, var(--theme-surface, var(--ui-control, #ffffff)));
  --gv-select-surface-raised: var(--theme-surface, var(--ui-surface, #ffffff));
  --gv-select-text: var(--theme-text, var(--ui-text, #202223));
  --gv-select-muted: var(--theme-text-secondary, var(--ui-muted, #6d7175));
  --gv-select-border: var(--theme-border-strong, var(--ui-line-strong, #c9d1dc));
  --gv-select-action: var(--gv-primary,#171717);
  --gv-select-action-hover: var(--theme-action-hover, var(--theme-accent-hover, var(--gv-select-action)));
  --gv-select-action-text: var(--gv-primary-text,#ffffff);
  --gv-select-selected-bg: color-mix(in srgb, var(--gv-select-action) 11%, var(--gv-select-surface));
  --gv-select-selected-border: color-mix(in srgb, var(--gv-select-action) 36%, var(--gv-select-surface));
  --gv-select-shadow: var(--theme-shadow-float, var(--theme-shadow-overlay, 0 16px 38px rgba(0, 0, 0, .20)));

  position: fixed;
  z-index: 2147482500;
  min-width: 160px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--gv-select-border);
  border-radius: var(--p-radius, var(--gv-radius-lg, 8px));
  background: var(--gv-select-surface-raised);
  color: var(--gv-select-text);
  box-shadow: var(--gv-select-shadow);
  font-family: var(--gv-select-font-family, inherit);
  font-size: var(--gv-select-font-size, inherit);
  line-height: 1.35;
  color-scheme: inherit;
}
.gv-select-popover[hidden] { display: none; }

.gv-select-search {
  padding: 8px 9px 6px;
  background: var(--gv-select-surface-raised);
}
.gv-select-popover.gv-select-no-search {
  grid-template-rows: minmax(0, 1fr);
}
.gv-select-popover.gv-select-no-search .gv-select-search {
  display: none;
}
.gv-select-search input {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--gv-select-border);
  border-radius: 6px;
  outline: 0;
  background: var(--gv-select-surface);
  color: var(--gv-select-text);
  box-shadow: none;
  font: inherit;
}
.gv-select-search input::placeholder {
  color: var(--gv-select-muted);
  opacity: 1;
}
.gv-select-search input:focus {
  border-color: var(--gv-select-action);
  box-shadow: 0 0 0 1px var(--gv-select-action);
}

.gv-select-results {
  min-height: 0;
  max-height: 320px;
  margin: 0;
  padding: 4px 9px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.gv-select-group-label {
  margin: 2px 3px 1px;
  padding: 7px 7px 4px;
  color: var(--gv-select-muted);
  font-size: .86em;
  font-weight:600;
  line-height: 1.25;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gv-select-option {
  min-width: 0;
  min-height: 31px;
  margin: 2px 0;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--gv-select-text);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}
.gv-select-option > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A selected option must stay visibly selected when the pointer moves to a
   different row. The light surface fallback is deliberately absent: the
   tint is built from the active theme accent and can never turn white in dark
   mode. */
.gv-select-option.is-selected:not(.is-highlighted) {
  border-color: var(--gv-select-selected-border);
  background: var(--gv-select-selected-bg);
  color: var(--gv-select-text);
  font-weight:600;
}
.gv-select-option.is-highlighted,
.gv-select-option:hover {
  border-color: var(--gv-select-action);
  background: var(--gv-select-action);
  color: var(--gv-select-action-text);
}
.gv-select-option.is-highlighted:hover {
  border-color: var(--gv-select-action-hover);
  background: var(--gv-select-action-hover);
}
.gv-select-option.is-disabled {
  color: var(--gv-select-muted);
  cursor: not-allowed;
  opacity: .62;
}
.gv-select-option.is-disabled:hover,
.gv-select-option.is-disabled.is-highlighted {
  border-color: transparent;
  background: transparent;
  color: var(--gv-select-muted);
}
.gv-select-empty {
  margin: 2px 0;
  padding: 12px 9px;
  color: var(--gv-select-muted);
  text-align: center;
  font-size: .92em;
}

/* Dark/Premium Glass rule: the page may be glass, the dropdown itself may
   not. Searchable menus are deliberately opaque so labels never overlap with
   content beneath them. This applies equally to admin, customer and public
   workspaces because the popover is mounted under <body>. */
html[data-theme="premium-glass"] .gv-select-popover,
html[data-theme="dark"] .gv-select-popover {
  --gv-select-surface: #0b0b0b;
  --gv-select-surface-raised: #101010;
  --gv-select-text: #f7f8f8;
  --gv-select-muted: #a0a0a0;
  --gv-select-border: rgba(255,255,255,.15);
  --gv-select-selected-bg: color-mix(in srgb, var(--gv-select-action) 18%, #101010);
  --gv-select-selected-border: color-mix(in srgb, var(--gv-select-action) 42%, #101010);
  background: #101010;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="premium-glass"] .gv-select-search,
html[data-theme="dark"] .gv-select-search {
  background: #101010;
}
html[data-theme="premium-glass"] .gv-select-search input,
html[data-theme="dark"] .gv-select-search input {
  background: #0b0b0b;
}

/* Third-party editors own their menus and stay native. */
.jodit-container select,
.jodit-ui-container select,
.tox select,
[data-gv-native-select-scope] select,
select[data-gv-native-select] {
  background-image: none;
}

/* The touch proxy is the visible control; its native select still owns form
   submission and validation. Anchor that clipped source at the viewport
   origin, not its former inline position. Page field styles can size a select
   to 100%; an absolutely positioned source then overflows the mobile layout
   viewport in both directions and changes Chrome's page fit/zoom geometry.
   A fixed origin keeps the source out of document layout without reparenting
   it, hiding it from form validation, or changing visible control dimensions.
   iOS uses the native-select branch and never receives this class. */
select.gv-select-touch-source {
  position: fixed;
  inset: 0 auto auto 0;
  width: 1px ;
  height: 1px ;
  min-width: 1px ;
  min-height: 1px ;
  margin: 0 ;
  padding: 0 ;
  overflow: hidden ;
  clip-path: inset(50%) ;
  opacity: 0 ;
  pointer-events: none ;
}

.gv-select-touch-proxy {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: var(--p-control-height, var(--ui-control-height, 36px));
  margin: 0;
  padding: 0 36px 0 12px;
  display: flex;
  align-items: center;
  border: 1px solid var(--theme-border-strong, var(--ui-line-strong, #c9d1dc));
  border-radius: var(--p-radius, var(--gv-radius-lg, 8px));
  outline: 0;
  color: var(--theme-text, var(--ui-text, #202223));
  background: var(--theme-control, var(--theme-surface, #fff));
  box-shadow: none;
  font: inherit;
  line-height: 1.25;
  text-align: start;
}
.gv-select-touch-proxy:focus-visible,
.gv-select-touch-proxy[aria-expanded="true"] {
  border-color: var(--gv-text,#171717);
  box-shadow: 0 0 0 1px var(--gv-text,#171717);
}
.gv-select-touch-proxy:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.gv-select-touch-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gv-select-touch-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  opacity: .7;
  pointer-events: none;
}
html[dir="rtl"] .gv-select-touch-proxy { padding: 0 12px 0 36px; }
html[dir="rtl"] .gv-select-touch-chevron { right: auto; left: 14px; }

@media (max-width: 720px) {
  .gv-select-popover {
    max-width: calc(100vw - 16px);
    border-radius: var(--p-radius, var(--gv-radius-lg, 8px));
  }
  .gv-select-results { max-height: min(42vh, 320px); }
}