/**
 * bootstrap-select.css
 * 
 * Custom styles for BlazorBootstrapSelectSingle and BlazorBootstrapSelectMulti components
 * (Bootstrap-based dropdown controls). See README.md §7–§8 for the specification.
 * 
 * This stylesheet provides:
 * - Form-control-like input styling with dropdown arrow
 * - Dropdown list with Bootstrap-compatible borders, shadows, and spacing
 * - Right-aligned check-marks for selected items
 * - Blue highlight for hover and keyboard focus (per §7.2–§7.3)
 * - Focus ring remains on input while list is open (per §7.4)
 * 
 * Sizing and spacing use Bootstrap CSS variables (--bs-*) where available so that
 * global overrides (e.g. font-size, line-height, border-radius) scale correctly
 * for accessibility (e.g. visually impaired users) and theming.
 */

/* ==========================================================================
   Wrapper and Input Control
   ========================================================================== */

/* Main wrapper: relative positioning for absolute dropdown */
.bs-select {
  position: relative;
}

/* Input control: styled like Bootstrap form-select with flex layout */
/* Uses Bootstrap's form-control class to inherit defaults (font-size, line-height, border, border-radius, focus ring, etc.) */
/* Only override what's necessary for our custom layout and behavior */
.bs-select-input {
  position: relative; /* Required for absolute positioning of arrow and clear button */
  /* Override form-control's display: block to use flex for internal layout */
  display: flex !important;
  align-items: center;
  gap: var(--bs-border-radius-sm, 0.25rem);
  padding: 0.375rem 2rem 0.375rem 0.75rem; /* Reduced right padding to maximize text space */
  background-color: var(--bs-body-bg, #fff) !important; /* Use Bootstrap variable for dark mode support */
  cursor: pointer !important; /* Pointer cursor - override Bootstrap's default */
  min-height: calc(1em * var(--bs-body-line-height, 1.5) + 0.75rem + var(--bs-border-width, 1px) * 2);
  height: calc(1em * var(--bs-body-line-height, 1.5) + 0.75rem + var(--bs-border-width, 1px) * 2); /* Scale with line-height for accessibility */
  user-select: none; /* Prevent text selection */
  /* Inherit from Bootstrap form-control: width: 100%, font-size: 1rem, font-weight: 400, line-height: 1.5, 
     color: var(--bs-body-color), border: var(--bs-border-width) solid var(--bs-border-color), 
     border-radius: var(--bs-border-radius), transition, and focus ring styles */
}

/* When AutoExpandVertically is true, allow vertical growth for text wrapping */
.bs-select-input.bs-select-auto-expand {
  align-items: center; /* Match normal alignment to maintain same height when not wrapping */
  height: auto; /* Allow height to grow */
  min-height: calc(1em * var(--bs-body-line-height, 1.5) + 0.75rem + var(--bs-border-width, 1px) * 2); /* Scale with line-height */
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

/* Hover state: no background change, ensure cursor stays pointer */
.bs-select-input:hover:not(.disabled) {
  background-color: var(--bs-body-bg, #fff) !important; /* Use Bootstrap variable for dark mode support */
  cursor: pointer !important; /* Force pointer cursor on hover */
}

/* Active/clicked state: no background change */
.bs-select-input:active:not(.disabled) {
  background-color: var(--bs-body-bg, #fff) !important; /* Use Bootstrap variable for dark mode support */
}

/* Focus state: Let Bootstrap's default focus ring propagate (per §7.4: stays on input even when list is open) */
/* Bootstrap provides: border-color: #86b7fe, outline: 0, box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) */
.bs-select-input:focus,
.bs-select-input:focus-within {
  background-color: var(--bs-body-bg, #fff) !important; /* Use Bootstrap variable for dark mode support */
}

/* Invalid state: keep Bootstrap's invalid border, focus ring, and validation icon,
   but move our clear button and dropdown arrow left so the icon can sit on the far right. */
.bs-select-input.is-invalid .bs-select-arrow {
  right: 2.25rem; /* Leave room on the far right for the validation icon */
}

.bs-select-input.is-invalid .bs-select-clear {
  right: 3.75rem; /* Clear button to the left of the arrow in invalid state */
}

.bs-select-input.is-invalid .bs-select-text.has-clear-button {
  padding-right: 3.75rem; /* Reserve space for clear + arrow + icon */
}

.bs-select-input.is-invalid .bs-select-text:not(.has-clear-button) {
  padding-right: 2.25rem; /* Reserve space for arrow + icon */
}

/* Disabled state */
.bs-select-input:disabled,
.bs-select-input.disabled {
  background-color: var(--bs-secondary-bg);
  cursor: default !important; /* Override pointer cursor when disabled */
  opacity: 0.65;
}

/* Prevent focus ring when disabled */
.bs-select-input.disabled:focus,
.bs-select-input.disabled:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--bs-border-color) !important;
}

/* Disabled state: override pointer cursor on placeholder text */
.bs-select-input.disabled .bs-select-text.placeholder {
  cursor: default !important;
}

/* Text display: flex-1 to fill space; overflow truncated with ellipsis ("...") by default */
/* Input already has padding-right 2.25rem; arrow (right: 0.75rem) sits in that padding, so no text reserve needed */
.bs-select-text {
  flex: 1;
  min-width: 0; /* Critical for flex children: allow shrink so ellipsis can apply instead of widening parent */
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Inherit line-height from parent (.bs-select-input inherits Bootstrap's 1.5) */
  /* Parent has align-items: center, so this will be vertically centered */
  background-color: transparent !important; /* Ensure no background on text span */
  padding-right: 0; /* Arrow in input padding; reserve only when clear button visible */
}

/* Ensure templated inline-flex content can shrink inside the ellipsis container. */
.bs-select-text > * {
  min-width: 0;
}

/* When clear button is visible: reserve space for clear button; avoid over-truncating */
.bs-select-text.has-clear-button {
  padding-right: 1.75rem; /* Clear button at right 2rem, but we can reduce padding slightly; rem scales with root font-size */
}

/* When AutoExpandVertically is true, allow text to wrap and control to grow vertically */
.bs-select-input.bs-select-auto-expand .bs-select-text {
  white-space: normal; /* Allow text wrapping */
  overflow: visible; /* Show wrapped text */
  text-overflow: clip; /* No ellipsis when wrapping */
  padding-right: 1.75rem; /* When clear present; 0 when not (see :not(.has-clear-button)). rem scales. */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* When AutoExpandVertically is true but no clear button: arrow in input padding, no reserve */
.bs-select-input.bs-select-auto-expand .bs-select-text:not(.has-clear-button) {
  padding-right: 0;
}

/* When both invalid and auto-expand (no clear): invalid state wins — reserve space for arrow + validation icon */
.bs-select-input.is-invalid.bs-select-auto-expand .bs-select-text:not(.has-clear-button) {
  padding-right: 2.25rem;
}

/* Placeholder text color (when no value selected) */
.bs-select-text.placeholder {
  color: var(--bs-secondary-color, rgba(33, 37, 41, 0.75));
  background-color: transparent !important; /* No background on placeholder text */
  cursor: pointer !important; /* Ensure pointer cursor even when placeholder is shown */
  /* Inherit other text properties from parent */
}

/* ==========================================================================
   Dropdown Arrow
   ========================================================================== */

/* Arrow icon (§8.4: match native form-select chevron; em-based so it scales with font-size) */
.bs-select-arrow {
  position: absolute;
  right: 0.5rem; /* Reduced from 0.75rem to maximize text space */
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 0.75em;
  background-image: var(--bs-form-select-bg-img, 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='1.75' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1em 0.75em;
  pointer-events: none;
}

/* When AutoExpandVertically: keep arrow vertically centered (top: 50% + translateY already handles this) */
/* No override needed - default centering works for multi-line content */

/* ==========================================================================
   Clear Button
   ========================================================================== */

/* Clear button (×): shown when ShowClearButton=true and value is selected */
/* Text padding accounts for clear button to prevent overlap (see .bs-select-text.has-clear-button) */
/* SVG stroke glyph (mask) for crisp, font-like ×; text "×" is visually hidden (aria-label used for a11y) */
.bs-select-clear {
  position: absolute;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  width: 1.25em;
  height: 1.25em;
  font-size: 1em;
  line-height: 0;
  color: var(--bs-secondary-color, rgba(33, 37, 41, 0.75));
  cursor: pointer;
  display: block;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  border: none;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' d='M4 4 L12 12'/%3E%3Cpath fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' d='M12 4 L4 12'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 0.9em 0.9em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' d='M4 4 L12 12'/%3E%3Cpath fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' d='M12 4 L4 12'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 0.9em 0.9em;
}

.bs-select-clear:hover {
  color: var(--bs-body-color);
}

/* When AutoExpandVertically: keep clear button vertically centered (top: 50% + translateY already handles this) */
/* No override needed - default centering works for multi-line content */

/* Disabled clear button */
.bs-select-input.disabled .bs-select-clear,
.bs-select-clear:disabled {
  cursor: default;
  opacity: 0.65;
  pointer-events: none; /* Prevent interaction when disabled */
}

/* ==========================================================================
   Dropdown List
   ========================================================================== */

/* Dropdown container (§8.3: absolute, Bootstrap border/radius/shadow, offset) */
/* Default: size to content (largest item + padding + check-mark). Use .bs-select-dropdown-match-input to match input width. */
.bs-select-dropdown {
  position: absolute;
  z-index: 1060; /* Above Bootstrap modals */
  top: 100%;
  left: 0;
  width: max-content;
  min-width: var(--bs-dropdown-min-width, 10rem); /* Bootstrap default; avoid tiny dropdown */
  margin-top: var(--bs-focus-ring-width, 0.25rem); /* Offset for focus ring; scale with Bootstrap */
  max-height: 17.5rem; /* ~280px at 16px base; rem scales for accessibility */
  overflow-y: auto;
  /* Prevent dropdown from forcing a horizontal scrollbar for the page. */
  overflow-x: hidden;
  max-width: 100vw;
  background: var(--bs-body-bg, #fff);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-dropdown-box-shadow, var(--bs-box-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175)));
}

/* When DropdownMatchInputWidth=true: dropdown width matches input. Wrapper shrink only when Width is set (see markup). */
.bs-select.bs-select-match-input-width {
  display: inline-block;
  width: fit-content;
}
.bs-select-dropdown.bs-select-dropdown-match-input {
  width: 100%;
  min-width: 0;
}

/* ==========================================================================
   List Items
   ========================================================================== */

/* List item (§8.1: match native select option spacing; use Bootstrap dropdown vars where applicable) */
.bs-select-item {
  position: relative;
  padding: var(--bs-dropdown-item-padding-y, 0.25rem) 2.5rem var(--bs-dropdown-item-padding-y, 0.25rem) 0.75rem;
  cursor: pointer;
  outline: 0;
  white-space: nowrap; /* Keep each item on one line so dropdown width = longest item + check space */
  /* Inherit color, font-size, line-height from Bootstrap defaults */
}

.bs-select-item-text {
  display: block;
}

/* Optional semantic chip used by default rendering when SemanticField is provided. */
.status-chip {
  display: inline-block;
  /* Spacing from label/icon: parent uses flex gap (e.g. .gap-2); avoid extra margin or text–chip looks wider than icon–text */
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75em;
  line-height: 1.2;
  vertical-align: middle;
  border: 1px solid transparent;
}

.status-chip.status-chip-none {
  color: var(--bs-secondary-color, #6c757d);
  background-color: var(--bs-tertiary-bg, #f8f9fa);
  border-color: var(--bs-border-color, #dee2e6);
}

.status-chip.status-chip-pending {
  color: var(--bs-warning-text-emphasis, #664d03);
  background-color: var(--bs-warning-bg-subtle, #fff3cd);
  border-color: var(--bs-warning-border-subtle, #ffecb5);
}

.status-chip.status-chip-info {
  color: var(--bs-info-text-emphasis, #055160);
  background-color: var(--bs-info-bg-subtle, #cff4fc);
  border-color: var(--bs-info-border-subtle, #b6effb);
}

.status-chip.status-chip-success {
  color: var(--bs-success-text-emphasis, #0f5132);
  background-color: var(--bs-success-bg-subtle, #d1e7dd);
  border-color: var(--bs-success-border-subtle, #badbcc);
}

.status-chip.status-chip-warning {
  color: var(--bs-warning-text-emphasis, #664d03);
  background-color: var(--bs-warning-bg-subtle, #fff3cd);
  border-color: var(--bs-warning-border-subtle, #ffecb5);
}

.status-chip.status-chip-danger {
  color: var(--bs-danger-text-emphasis, #842029);
  background-color: var(--bs-danger-bg-subtle, #f8d7da);
  border-color: var(--bs-danger-border-subtle, #f5c2c7);
}

/* ==========================================================================
   Check-mark (Selection Indicator)
   ========================================================================== */

/* Check-mark (§7.1: right-aligned, rotate(45deg) border-based, currentColor) */
.bs-select-item .check-mark {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
}

.bs-select-item .check-mark::after {
  content: "";
  display: block;
  width: 0.5em;
  height: 1em;
  border-style: solid;
  border-width: 0 0.26em 0.26em 0;
  border-color: currentColor; /* Inherits text color */
  transform: rotate(45deg);
}

/* ==========================================================================
   Selection State
   ========================================================================== */

/* Selected item (§7.1: check-mark only, no background highlight) */
.bs-select-item[aria-selected="true"] {
  background: transparent;
  color: inherit;
  /* Inherit other properties from Bootstrap defaults */
}

/* ==========================================================================
   Hover and Keyboard Focus Highlight
   ========================================================================== */

/* Hover and keyboard focus (§7.2–§7.3: blue background, white text) */
.bs-select-item:hover,
.bs-select-item.bs-select-kbd-focus {
  background-color: var(--bs-primary, #0d6efd);
  color: var(--bs-dropdown-link-active-color, #fff); /* Use Bootstrap variable for consistency */
}

/* Selected + hover/focus: also blue with white text and white check-mark */
.bs-select-item[aria-selected="true"]:hover,
.bs-select-item[aria-selected="true"].bs-select-kbd-focus {
  background-color: var(--bs-primary, #0d6efd);
  color: var(--bs-dropdown-link-active-color, #fff); /* Use Bootstrap variable for consistency */
}

/* Check-mark becomes white when item is highlighted */
.bs-select-item[aria-selected="true"] .check-mark::after,
.bs-select-item:hover .check-mark::after,
.bs-select-item.bs-select-kbd-focus .check-mark::after {
  border-color: var(--bs-dropdown-link-active-color, #fff); /* Use Bootstrap variable for consistency */
}