/* Extracted from module/computer/group/printerFilter.phtml during audit Step 6c. */

/* ============================================
   CONSUMABLE SEARCH BAR - Modern Full-Width Design
   ============================================ */

#consumableSearchBar {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

#consumableSearchBar .search-bar-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 100%);
    color: #333;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e8e8e8;
}

#consumableSearchBar .search-bar-header i {
    font-size: 13px;
    color: var(--lb-brand);
}

#consumableSearchBar .search-bar-content {
    display: flex;
    align-items: stretch;
    padding: 24px;
    gap: 24px;
}

#consumableSearchBar .search-field {
    flex: 1;
    min-width: 0;
}

#consumableSearchBar .search-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

#consumableSearchBar .search-field label i {
    color: var(--lb-brand);
    font-size: 13px;
}

#consumableSearchBar .search-divider {
    display: flex;
    align-items: center;
    padding: 0 10px;
}

#consumableSearchBar .search-divider span {
    background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);
    color: #666;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Select2 Overrides for Search Bar */
#consumableSearchBar .select2-container {
    width: 100% !important;
}

#consumableSearchBar .select2-container .select2-selection--single {
    height: 48px;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#consumableSearchBar .select2-container .select2-selection--single:hover {
    border-color: var(--lb-brand);
}

#consumableSearchBar .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 16px;
    font-size: 15px;
    color: #555;
}

#consumableSearchBar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 8px;
}

#consumableSearchBar .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
}

/* Focus state */
#consumableSearchBar .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--lb-brand);
    box-shadow: 0 0 0 3px rgba(var(--lb-brand-rgb), 0.15);
    border-radius: 8px 8px 0 0;
}

/* Fix Select2 selection alignment */
#consumableSearchBar .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
}

#consumableSearchBar .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex;
    align-items: center;
    padding-right: 40px;
    line-height: normal;
    height: 100%;
}

/* Fix the custom template inside selection */
#consumableSearchBar .select2-selection__rendered > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

#consumableSearchBar .select2-selection__rendered img {
    vertical-align: middle;
    height: 28px;
    width: auto;
}

/* Responsive */
@media (max-width: 992px) {
    #consumableSearchBar .search-bar-content {
        flex-direction: column;
        gap: 16px;
    }
    
    #consumableSearchBar .search-divider {
        padding: 8px 0;
        justify-content: center;
    }
}

/* Select2 Dropdown Global Styles */
.select2-search__field:focus-visible {
    outline: 0px;
}

.select2-dropdown {
    z-index: 9999;
    border: 2px solid var(--lb-brand);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    margin-top: -2px;
}

/* Garantir que o container do Select2 também tem z-index alto quando aberto */
.select2-container--open {
    z-index: 9999 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--lb-brand);
    color: #fff;
}

/* Fix: Garantir que TODOS os elementos dentro do hover ficam brancos */
.select2-container--default .select2-results__option--highlighted[aria-selected] * {
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--lb-brand-tint);
}

.modelTemplateResultLine {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}