/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Searchable Select styles */
.searchable-select { position: relative; }
.searchable-select-display { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 38px; padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 0.375rem; background: white; cursor: text; }
.searchable-select-input { flex: 1; min-width: 60px; border: none; outline: none; padding: 4px 0; background: transparent; }
.searchable-select-tag { display: inline-flex; align-items: center; background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 4px; font-size: 0.875rem; }
.searchable-select-tag-remove { margin-left: 4px; cursor: pointer; font-weight: bold; }
.searchable-select-tag-remove:hover { color: #dc2626; }
.searchable-select-dropdown { position: absolute; z-index: 50; width: 100%; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #d1d5db; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); margin-top: 4px; }
.searchable-select-option { padding: 8px 12px; cursor: pointer; }
.searchable-select-option:hover { background: #eff6ff; }
.searchable-select-option.selected { background: #dbeafe; }