/* Shared select fixes: ensure closed select text isn't visually overlapped
   by decorative pseudo-elements or parent overlays. Conservative, scoped
   rules using !important to ensure effectiveness across templates. */

select,
select.form-control,
.form-control select,
.form-select {
  position: relative !important;
  /* use a very large z-index so selects render above most decorative overlays */
  z-index: 10 !important;
  background-clip: padding-box !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding-right: 44px !important; /* reserve room for any caret */
  /* Fix vertical text clipping */
  line-height: 1.5 !important;
  min-height: 46px !important;
  height: 46px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 12px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  font-size: 1rem !important;
  color: #212529 !important;
  border: 1px solid #ced4da !important;
  border-radius: 6px !important;
}

/* When pages use a parent .form-group.select-arrow pseudo-element
   for a decorative arrow, make sure the pseudo-element sits beneath
   the select's content and doesn't intercept pointer events. */
.form-group.select-arrow::after {
  z-index: 1 !important;
  pointer-events: none !important;
}
.form-group.select-arrow select.form-control {
  position: relative !important;
  z-index: 2 !important;
}

/* Options when dropdown opens should remain readable */
select option,
.form-control select option,
.form-select option {
  background: #fff !important;
  color: #212529 !important;
  padding: 10px 12px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* Focus state for selects */
select:focus,
select.form-control:focus,
.form-select:focus {
  border-color: #21a9af !important;
  box-shadow: 0 0 0 0.2rem rgba(33, 169, 175, 0.25) !important;
  outline: none !important;
}

/* Small utility: make any select's inner text visible by default */
select::-ms-expand { display: none !important; }

/* Defensive: some pages add decorative pseudo-elements that can overlap
   form controls. Lower their stacking and disable pointer events so select
   content remains visible. This targets common patterns used in the app's
   templates and global CSS; it's reversible if you prefer a narrower change. */
.header-pro::after,
.header-blue::after,
.category-option::after,
.spec-panel::after,
.welcome-header::after,
.stat-card::after,
.card-header::after,
.dashboard-page *::after,
.container::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* If an ancestor applies overflow:hidden and is clipping, try to ensure
   the immediate .form-group keeps its stacking so the select can float above. */
.form-group,
.form-row,
.section-card,
.form-shell,
.service-card,
.spec-panel {
  position: relative !important;
  z-index: 1 !important;
}