/* ========================================
 * SearchableSelect Component Styles
 * ========================================
 * 
 * Reusable searchable dropdown component CSS.
 * Uses CSS variables from app_ui.css for consistency.
 * 
 * @author FullRMC WebApp
 * @version 1.0.0
 */

/* ========================================
 * INPUT WRAPPER - Container for input + clear button
 * ======================================== */

.searchable-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* ========================================
 * INPUT FIELD - Searchable text input
 * ======================================== */

.searchable-select-input {
  width: 100%;
  /* min-width set dynamically via inline style (config.minWidth) */
}

.searchable-select-input.has-clear {
  padding-right: 30px; /* Make room for clear button */
}

/* ========================================
 * VALIDATION STATES
 * ======================================== */

.searchable-select-input.invalid {
  border-color: var(--color-error) !important;
  background-color: var(--bg-error-light) !important;
}

/* ========================================
 * CLEAR BUTTON POSITIONING
 * Button styling from app_ui.css .btn-icon
 * This class only handles positioning
 * ======================================== */

.searchable-select-clear-position {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  z-index: 10;
  font-size: 20px;
  line-height: 1;
}

.searchable-select-clear-position.hidden {
  display: none;
}

/* ========================================
 * CUSTOM DROPDOWN - Floating dropdown container
 * ======================================== */

.searchable-select-dropdown {
  position: fixed; /* Fixed positioning relative to viewport */
  /* top, left, width set dynamically via JavaScript based on input position */
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  max-height: 256px; /* 8 items × 32px */
  overflow-y: auto;
  z-index: 9999;
  margin-top: 2px;
}

.searchable-select-dropdown.hidden {
  display: none;
}

/* ========================================
 * DROPDOWN ITEMS - Individual selectable options
 * ======================================== */

.searchable-select-item {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.searchable-select-item:hover {
  background: var(--bg-light);
}

.searchable-select-item.empty {
  color: var(--text-muted);
  cursor: default;
  font-style: italic;
}

.searchable-select-item.empty:hover {
  background: transparent;
}

/* ========================================
 * LABEL TEXT - Clickable label for focusing input
 * ======================================== */

.searchable-select-label-text {
  cursor: pointer;
}

/* ========================================
 * CONTAINER POSITIONING
 * ======================================== */

.searchable-select-container {
  position: relative; /* For absolute positioning of dropdown (if needed) */
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 768px) {
  .searchable-select-dropdown {
    max-height: 200px; /* Shorter on mobile */
  }
}