/**
 * Tom Select custom styling
 * Tilpasser Tom Select til prosjektets design og Bootstrap 5
 * Bruker CSS-variabler fra variables.css
 */

/* Tom Select wrapper - sørg for at border vises */
.ts-wrapper.form-select {
    padding: 0;
    border: 2px solid var(--color-gray-medium);
    border-radius: var(--border-radius);
    background-color: transparent;
}

/* Basis styling for input-feltet*/
.ts-control {
    border: 2px solid var(--color-gray-medium);
    border-radius: var(--border-radius);
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-white);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

/* Input-feltet inne i control (søkefeltet) */
.ts-control input {
    color: var(--color-text);
}

/* Focus-state */
.ts-control:focus-within {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 100, 177, 0.1);
}

/* Dropdown-valg */
.ts-dropdown .option {
    padding: var(--spacing-xs) var(--spacing-md);
    color: var(--color-text);
}

/* Hover på valg */
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: var(--color-gray-medium);
}

/* Valgt element */
.ts-dropdown .option.selected {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* "No results found" melding */
.ts-dropdown .no-results {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-light);
    text-align: center;
}

/* Dark mode support - control field */
.dashboard-container[data-theme="dark"] .ts-control {
    background-color: var(--color-gray-medium);
    border-color: var(--color-gray-light);
    color: var(--color-text);
}

/* Dark mode - input-feltet (søkefeltet) - hvit tekst */
.dashboard-container[data-theme="dark"] .ts-control input {
    color: var(--color-text) !important;
    background-color: transparent !important;
}

.dashboard-container[data-theme="dark"] .ts-control:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.25);
}

/* Dark mode - dropdown container - mørk bakgrunn */
.dashboard-container[data-theme="dark"] .ts-dropdown {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--border-radius);
}

/* Dark mode - dropdown content wrapper */
.dashboard-container[data-theme="dark"] .ts-dropdown-content {
    background-color: var(--color-white) !important;
}

/* Dark mode - dropdown options - sterk tekstfarge på mørk bakgrunn */
.dashboard-container[data-theme="dark"] .ts-dropdown .option {
    color: var(--color-text) !important;
    background-color: var(--color-white) !important;
}

/* Dark mode - hover på valg */
.dashboard-container[data-theme="dark"] .ts-dropdown .option:hover,
.dashboard-container[data-theme="dark"] .ts-dropdown .option.active {
    background-color: var(--color-gray-medium) !important;
    color: var(--color-text) !important;
}

/* Dark mode - valgt element */
.dashboard-container[data-theme="dark"] .ts-dropdown .option.selected {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* Dark mode - "No results found" melding - hvit tekst */
.dashboard-container[data-theme="dark"] .ts-dropdown .no-results {
    color: var(--color-text) !important;
}