/**
 * Slim Select Custom Theme
 * Adapted for OpenMirror dark/light theme
 */

/* Wrapper around the select - ensure proper positioning context */
.ss-main-wrapper {
    position: relative !important;
    width: 100% !important;
}

/* Main container */
.ss-main {
    background-color: rgb(229 231 235) !important; /* gray-200 light mode */
    border: 1px solid transparent !important;
    border-radius: 0.375rem !important;
    color: rgb(31 41 55) !important; /* gray-800 light mode */
    min-height: 38px !important;
    padding: 0.375rem 0.75rem !important; /* Reduced padding */
    width: 100% !important;
    position: relative !important;
}

:root.dark .ss-main {
    background-color: rgb(31 41 55) !important; /* gray-800 dark mode */
    color: rgb(229 231 235) !important; /* gray-200 dark mode */
}

.ss-main:focus-within {
    outline: 2px solid rgb(59 130 246) !important;
    outline-offset: 2px !important;
}

/* Selected value */
.ss-single-selected {
    padding: 0 !important;
}

.ss-single-selected .placeholder {
    color: rgb(107 114 128) !important; /* gray-500 */
}

:root.dark .ss-single-selected .placeholder {
    color: rgb(156 163 175) !important; /* gray-400 */
}

/* Dropdown content */
.ss-content {
    background-color: rgb(255 255 255) !important; /* white light mode */
    border: 1px solid rgb(209 213 219) !important; /* gray-300 */
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    padding: 0.25rem !important; /* Reduced padding */
    z-index: 9999 !important;
    /* Let Slim Select handle position, top, left - don't override */
}

:root.dark .ss-content {
    background-color: rgb(31 41 55) !important; /* gray-800 dark mode */
    border-color: rgb(55 65 81) !important; /* gray-700 */
}

/* Search input */
.ss-search {
    padding: 0.25rem 0.5rem !important; /* Reduced padding */
}

.ss-search input {
    background-color: rgb(243 244 246) !important; /* gray-100 light mode */
    border: 1px solid rgb(229 231 235) !important; /* gray-200 */
    color: rgb(31 41 55) !important;
    padding: 0.375rem 0.5rem !important; /* Reduced padding */
    border-radius: 0.375rem !important;
}

:root.dark .ss-search input {
    background-color: rgb(55 65 81) !important; /* gray-700 dark mode */
    border-color: rgb(75 85 99) !important; /* gray-600 */
    color: rgb(229 231 235) !important;
}

.ss-search input:focus {
    outline: 2px solid rgb(59 130 246) !important;
    outline-offset: 0 !important;
}

.ss-search input::placeholder {
    color: rgb(156 163 175) !important; /* gray-400 */
}

/* Options list */
.ss-list {
    max-height: 300px !important;
}

/* Individual option */
.ss-option {
    color: rgb(31 41 55) !important; /* gray-800 light mode */
    padding: 0.375rem 0.5rem !important; /* Reduced padding */
    border-radius: 0.25rem !important;
    display: flex !important;
    align-items: center !important;
}

:root.dark .ss-option {
    color: rgb(229 231 235) !important; /* gray-200 dark mode */
}

.ss-option:hover {
    background-color: rgb(243 244 246) !important; /* gray-100 light mode */
}

:root.dark .ss-option:hover {
    background-color: rgb(55 65 81) !important; /* gray-700 dark mode */
}

.ss-option.ss-highlighted,
.ss-option:not(.ss-disabled).ss-selected {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

:root.dark .ss-option.ss-highlighted,
:root.dark .ss-option:not(.ss-disabled).ss-selected {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

.ss-option.ss-disabled {
    color: rgb(156 163 175) !important; /* gray-400 */
    cursor: not-allowed !important;
}

/* Count badge styling - Match owner text style (cyan, smaller) */
.ss-option-label {
    flex: 1 !important;
}

.ss-option-count {
    font-size: 0.75rem !important; /* Smaller text */
    font-weight: 500 !important;
    color: rgb(8 145 178) !important; /* cyan-600 light mode */
    margin-left: 0.25rem !important;
}

:root.dark .ss-option-count {
    color: rgb(34 211 238) !important; /* cyan-400 dark mode */
}

/* Arrow icon */
.ss-arrow {
    color: rgb(107 114 128) !important; /* gray-500 light mode */
}

:root.dark .ss-arrow {
    color: rgb(156 163 175) !important; /* gray-400 dark mode */
}

.ss-arrow path {
    stroke: currentColor !important;
}

/* Deselect button */
.ss-deselect {
    color: rgb(107 114 128) !important;
}

:root.dark .ss-deselect {
    color: rgb(156 163 175) !important;
}

.ss-deselect:hover {
    color: rgb(31 41 55) !important;
}

:root.dark .ss-deselect:hover {
    color: rgb(229 231 235) !important;
}