.searchable-select-container input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

.searchable-select-container svg.dropdown-icon {
    transition: transform 0.2s;
}

/* Rotate icon when open (requires 'open' class on container or utilizing :focus-within if logic permits, 
   but simplistic approach is fixed icon or binding class. Let's rely on component logic to add class if we want rotation.
   For now, static icon is better than nothing.) */

.searchable-select-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
    /* Important for width control */
}

.searchable-select-grid th,
.searchable-select-grid td {
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--border);
}

.searchable-select-grid th {
    background: rgba(30, 41, 59, 1);
    color: var(--text-secondary);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.searchable-select-grid tr {
    cursor: pointer;
    transition: background-color 0.2s;
}

.searchable-select-grid tr.selected,
.searchable-select-grid tr:hover {
    background-color: rgba(139, 92, 246, 0.25) !important;
    /* Stronger highlight */
    color: #fff;
    font-weight: 500;
}

.dropdown-list {
    /* Ensure proper scrolling for grid */
    overflow-y: auto;
    max-height: 250px;
}

.dropdown-list.grid-view {
    padding: 0;
    /* Clear padding for table */
    min-width: 750px;
    /* Ensure wide enough for columns (Code+Name+Addr+Email ~730px) */
    overflow-x: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    /* Stronger shadow for floating element */
    border: 1px solid rgba(139, 92, 246, 0.3);
    /* Slight tint of primary in border */
}

/* Ensure no-results aligns well */
.no-results {
    padding: 12px;
    color: var(--text-secondary);
    text-align: center;
}