/*
 * NL-Dating Filament Admin - Enhanced Styling
 * Comprehensive CSS fixes for admin panel components
 * Version: 2.11.10
 * Last Updated: 2025-06-06
 */

/* Dark Mode Dropdown Styling */
.dark [role="listbox"],
.dark [role="combobox"] + div,
.dark .fi-dropdown-panel,
.dark .fi-select-dropdown,
.dark .choices__list--dropdown,
.dark .fi-fo-field-wrp [role="listbox"],
.dark .fi-fo-select .choices__list--dropdown,
.dark [x-data*="select"] [role="listbox"],
.dark [data-field-wrapper] [role="listbox"],
.dark .fi-fo-select-field [role="listbox"] {
    background: rgb(31 41 55) !important; /* gray-800 */
    border: 1px solid rgb(55 65 81) !important; /* gray-700 */
    color: rgb(243 244 246) !important; /* gray-100 */
    position: fixed !important;
    z-index: 9999 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 
                0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    min-width: 150px !important;
}

/* Dark Mode Option Items */
.dark [role="option"],
.dark .fi-dropdown-list-item,
.dark .fi-select-option,
.dark .choices__item--choice,
.dark [role="listbox"] > div,
.dark .fi-fo-select .choices__item,
.dark [data-field-wrapper] [role="option"] {
    color: rgb(243 244 246) !important; /* gray-100 */
    background: transparent !important;
    padding: 0.625rem 0.875rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    border: none !important;
    font-size: 0.875rem !important;
}
/* Dark Mode Hover & Focus States */
.dark [role="option"]:hover,
.dark [role="option"]:focus,
.dark .fi-dropdown-list-item:hover,
.dark .fi-select-option:hover,
.dark .choices__item--choice:hover,
.dark [role="listbox"] > div:hover,
.dark .fi-fo-select .choices__item:hover,
.dark [data-field-wrapper] [role="option"]:hover {
    background: rgb(55 65 81) !important; /* gray-700 */
    color: rgb(255 255 255) !important;
}

/* Dark Mode Selected/Active States */
.dark [role="option"][aria-selected="true"],
.dark [role="option"].is-highlighted,
.dark .choices__item--choice.is-highlighted,
.dark [role="option"][data-selected="true"] {
    background: rgb(59 130 246) !important; /* blue-500 */
    color: rgb(255 255 255) !important;
}

/* Light Mode Dropdown Styling */
[role="listbox"],
[role="combobox"] + div,
.fi-dropdown-panel,
.fi-select-dropdown,
.choices__list--dropdown,
.fi-fo-field-wrp [role="listbox"],
.fi-fo-select .choices__list--dropdown,
[x-data*="select"] [role="listbox"],
[data-field-wrapper] [role="listbox"],
.fi-fo-select-field [role="listbox"] {
    background: rgb(255 255 255) !important; /* white */
    border: 1px solid rgb(209 213 219) !important; /* gray-300 */
    color: rgb(17 24 39) !important; /* gray-900 */
    position: fixed !important;
    z-index: 9999 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    min-width: 150px !important;
}

/* Light Mode Option Items */
[role="option"],
.fi-dropdown-list-item,
.fi-select-option,
.choices__item--choice,
[role="listbox"] > div,
.fi-fo-select .choices__item,
[data-field-wrapper] [role="option"] {
    color: rgb(17 24 39) !important; /* gray-900 */
    background: transparent !important;
    padding: 0.625rem 0.875rem !important;
}
/* Container and accessibility fixes */
.fi-fo-field-wrp,
.fi-fo-tabs-content,
.fi-section-content-ctn,
.fi-form,
.fi-main,
.fi-page,
.fi-resource-page {
    overflow: visible !important;
}

/* Choice.js specific fixes */
.dark .fi-fo-select .choices,
.dark .fi-fo-select .choices__inner,
.dark .fi-fo-select-field .choices,
.dark .fi-fo-select-field .choices__inner {
    background: rgb(31 41 55) !important;
    color: rgb(243 244 246) !important;
    border-color: rgb(55 65 81) !important;
}

/* Alpine.js dropdown fixes */
[x-data] [x-show] [role="listbox"],
[x-data] div[style*="position: absolute"],
[x-data] [x-transition] [role="listbox"] {
    background: rgb(255 255 255) !important;
    border: 1px solid rgb(209 213 219) !important;
    color: rgb(17 24 39) !important;
    z-index: 9999 !important;
}

.dark [x-data] [x-show] [role="listbox"],
.dark [x-data] div[style*="position: absolute"],
.dark [x-data] [x-transition] [role="listbox"] {
    background: rgb(31 41 55) !important;
    border-color: rgb(55 65 81) !important;
    color: rgb(243 244 246) !important;
}

/* Force visibility for nested text elements */
.dark [role="option"] *,
.dark [role="listbox"] *,
.dark .choices__item *,
.dark .fi-dropdown-list-item * {
    color: inherit !important;
}

/* Responsive mobile adjustments */
@media (max-width: 640px) {
    [role="listbox"],
    .fi-dropdown-panel,
    .fi-select-dropdown,
    .choices__list--dropdown {
        max-height: 200px !important;
        min-width: 120px !important;
        font-size: 0.75rem !important;
    }
}