/* ==========================================================================
   TomSelect Integration & UIkit Small Style Overrides
   ========================================================================== */

/* --- Base Form Standards --- */
sportsportal-select .uk-form-small,
.dropdown-input.uk-input {
  /*  height: 26px;
    font-size: 0.875rem;*/
}

sportsportal-select select {
    font-size: 0.875rem;
    font-weight: bold;
}

/* --- TomSelect Wrapper --- */
sportsportal-select .ts-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* ZWINGEND: Entfernt den UIkit-Doppelpfeil vom Wrapper! */
sportsportal-select .ts-wrapper.uk-select,
sportsportal-select .ts-wrapper .ts-control {
    background-image: none !important;
}

sportsportal-select .ts-wrapper,
sportsportal-select .ts-wrapper.uk-form-small {
    min-height: 26px !important;
}

sportsportal-select .ts-wrapper.input {
    font-size: 0.875rem;
}

/* --- TomSelect Control (Input Bar) --- */
sportsportal-select .ts-control {
    /*min-height: 26px !important;*/
    padding: 2px 8px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.875rem;
}

sportsportal-select .ts-control.uk-form-small {
/*    min-height: 26px !important;*/
}

sportsportal-select .ts-wrapper .ts-control .item,
sportsportal-select .ts-control .item {
    display: inline-flex !important;
    align-items: center !important;
    max-width: calc(100% - 20px) !important;
    line-height: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    font-size: 0.875rem;
}

sportsportal-select .ts-item-content {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    line-height: normal !important;
    vertical-align: middle !important;
    gap: 6px !important;
}

sportsportal-select .ts-item-content .uk-text-truncate,
sportsportal-select .ts-dropdown-content .option .uk-text-truncate {
    display: inline-block !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}

/* Im Frontend keine ID-Badges in Select-Boxen anzeigen */
body:not(.admin) sportsportal-select:not([data-show-id="1"]) .ts-item-label,
body:not(.admin) sportsportal-select:not([data-show-id="1"]) .uk-label.ts-item-label,
body:not(.admin) sportsportal-select:not([data-show-id="1"]) .ts-item-badge {
    display: none !important;
}

/* Im Frontend bei Einzelauswahl keinen Remove-Button / Trennstrich anzeigen */
body:not(.admin) sportsportal-select:not([multiple]) .ts-wrapper .item .remove,
body:not(.admin) sportsportal-select:not([multiple]) .ts-control .remove,
body:not(.admin) sportsportal-select:not([multiple]) .remove {
    display: none !important;
    border-left: none !important;
    margin-left: 0 !important;
    padding: 0 !important;
}

sportsportal-select .ts-item-label,
sportsportal-select .uk-label.ts-item-label,
sportsportal-select .ts-item-badge {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    line-height: 15px !important;
    padding: 0 5px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    align-self: center !important;
    border-radius: 3px !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    flex-shrink: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

sportsportal-select .uk-form-small + .ts-wrapper .item {
  /*  line-height: 26px;*/
    font-size: 14px;
}

/* --- TomSelect Pfeil rechts (Single Select) --- */
sportsportal-select .ts-wrapper.single .ts-control {
    padding-right: 30px !important;
    position: relative !important;
    cursor: pointer !important;
}

/* ERZWINGT das eigene Dreieck gegen den Willen des dropdown_input Plugins */
sportsportal-select .ts-wrapper.single .ts-control::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    margin-top: -3px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 5px 4px 0 4px !important;
    border-color: #666 transparent transparent transparent !important;
    pointer-events: none !important;
    transition: transform 0.2s ease !important;
    z-index: 10 !important;
}

/* Dreieck umkehren, wenn das Dropdown geöffnet ist */
sportsportal-select .ts-wrapper.single.dropdown-active .ts-control::after {
    transform: rotate(180deg) !important;
}

/* Item remove button */
sportsportal-select .ts-control .remove {
    height: calc(100% - 8px);
    line-height: 0.5rem;
    z-index: 20;
    position: relative;
}

/* Multiple select items */
sportsportal-select[multiple] + .ts-wrapper .ts-control > .item {
    line-height: 16px !important;
    margin: 1px !important;
}

/* --- TomSelect Dropdown --- */
sportsportal-select .ts-dropdown {
    z-index: 10050 !important;
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    font-size: 0.875rem !important;
    box-sizing: border-box !important;
}

sportsportal-select .ts-wrapper .ts-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

/* Scroll-Container für virtual_scroll */
/* Scroll-Container für virtual_scroll zwingend mit fester Höhe */
sportsportal-select .ts-dropdown .ts-dropdown-content {
    max-height: 220px !important;
    overflow-y: auto !important;
}

/* Optionen im Dropdown (Feste Höhe zwingend für virtual_scroll) */
sportsportal-select .ts-dropdown-content .option {
    height: 28px !important;
    min-height: 28px !important;
    line-height: normal !important;
    padding: 0 10px !important;
    font-size: 0.875rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

sportsportal-select .ts-dropdown-content .option > div {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
}

/* Hover- & Focus-Zustand */
sportsportal-select .ts-dropdown .option.active,
sportsportal-select .ts-dropdown .option:hover {
    background-color: #f8f9fa;
    color: #1e87f0;
}

/* --- Custom Dropdown Input Wrap --- */
sportsportal-select .dropdown-input-wrap {
    background: #eee;
    padding: 2px 4px;
    cursor: text;
}

sportsportal-select .dropdown-input-wrap input {
    margin: 0 !important;
    width: 100% !important;
    padding: 2px !important;
}

/* --- Plugins --- */
sportsportal-select .plugin-clear_button .clear-button {
    top: 50% !important;
    transform: translateY(-50%);
    right: 22px !important;
}
/* ZWINGEND: UIkit-Doppelpfeil entfernen */
html body sportsportal-select .ts-wrapper.uk-select,
html body sportsportal-select .ts-wrapper .ts-control {
    background-image: none !important;
}

/* ERZWINGT das eigene Dreieck (überschreibt dropdown_input Plugin) */
html body sportsportal-select .ts-wrapper:not(.multi) .ts-control {
    padding-right: 30px !important;
    position: relative !important;
    cursor: pointer !important;
}

html body sportsportal-select .ts-wrapper:not(.multi) .ts-control::after {
    content: '' !important;
    display: block !important; /* Blockiert display:none vom Plugin */
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    margin-top: -3px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 6px 5px 0 5px !important;
    border-color: #666 transparent transparent transparent !important;
    pointer-events: none !important;
    transition: transform 0.2s ease !important;
    z-index: 10 !important;
}

/* Dreieck umkehren, wenn das Dropdown geöffnet ist */
html body sportsportal-select .ts-wrapper:not(.multi).dropdown-active .ts-control::after {
    transform: rotate(180deg) !important;
}

/* Versteckt das rohe, innere Select bedingungslos */
sportsportal-select > select {
    display: none !important;
}

sportsportal-select .ts-wrapper {
    width: 100%;
}

/* Neutralisiert UIkit-Klassen auf dem Host-Element */
sportsportal-select.uk-select {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Stellt sicher, dass TomSelect die volle Breite nutzt und sichtbar über anderen Layern liegt */
sportsportal-select {
    position: relative;
}

sportsportal-select:focus-within,
sportsportal-select:has(.dropdown-active),
sportsportal-select .ts-wrapper.dropdown-active,
sportsportal-select .ts-wrapper.focus {
    z-index: 10000 !important;
    position: relative !important;
}

sportsportal-select .ts-wrapper {
    width: 100% !important;
    position: relative;
}

sportsportal-select .ts-dropdown {
    z-index: 10050 !important; /* Über UIkit-Cards, Modals und benachbarten Zeilen/Elementen */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fallback: Sichtbarkeit erzwingen, falls Initialisierungs-Klasse hakt */
sportsportal-select {
    opacity: 1 !important;
    pointer-events: auto !important;
}