/* Select2 Farben für DLRG Theme */

/* Container Hintergrund */
.select2-container .select2-selection {
    background-color: var(--select2-surface) !important;
    border-color: var(--select2-border) !important;
    color: var(--select2-text) !important;
    font-weight: 300 !important;
    min-height: 39px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container .select2-selection .select2-selection__rendered {
    color: var(--select2-muted) !important;
}

.select2-container .select2-selection .select2-selection__rendered[title="Bitte wählen..."] {
    color: var(--select2-muted) !important;
}

/* Focus State */
.select2-container--focus .select2-selection {
    border-color: var(--dlrg-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 105, 180, 0.18) !important;
}

/* Dropdown Hintergrund */
.select2-dropdown {
    background-color: var(--select2-surface) !important;
    border-color: var(--select2-border) !important;
}

/* Search Input */
.select2-search--dropdown .select2-search__field {
    background-color: var(--select2-surface) !important;
    border-color: var(--select2-border) !important;
    color: var(--select2-text) !important;
    font-weight: 300 !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--dlrg-blue) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 105, 180, 0.18) !important;
}

/* Optionen */
.select2-results__option {
    background-color: var(--select2-surface) !important;
    color: var(--select2-text) !important;
    font-weight: 300 !important;
}

.select2-results__option--highlighted {
    background-color: var(--select2-surface-strong) !important;
    color: var(--select2-text) !important;
    font-weight: 300 !important;
}

.select2-results__option--selected {
    background-color: var(--select2-surface-strong) !important;
    color: var(--select2-text) !important;
    font-weight: 300 !important;
}

/* Selection Tags */
.select2-selection__choice {
    background-color: var(--select2-surface-strong) !important;
    border-color: var(--select2-border) !important;
    color: var(--select2-text) !important;
    font-weight: 300 !important;
}

.select2-selection__choice__remove {
    color: var(--select2-text) !important;
    font-weight: 300 !important;
}

.select2-selection__choice__remove:hover {
    color: var(--select2-muted) !important;
}

/* Placeholder */
.select2-selection__placeholder {
    color: var(--select2-muted) !important;
    font-weight: 300 !important;
}

/* Arrow */
.select2-selection__arrow b {
    border-color: var(--select2-muted) transparent transparent transparent !important;
}

/* Clear Button */
.select2-selection__clear {
    color: var(--select2-muted) !important;
    font-weight: 300 !important;
}

.select2-selection__clear:hover {
    color: var(--select2-text) !important;
}

/* Loading/Message */
.select2-results__option--loading {
    background-color: var(--select2-surface) !important;
    color: var(--select2-muted) !important;
    font-weight: 300 !important;
}

.select2-results__message {
    background-color: var(--select2-surface) !important;
    color: var(--select2-muted) !important;
    font-weight: 300 !important;
}

/* Readonly Input Fields für Dark Mode */
input[readonly] {
    background-color: var(--select2-surface) !important;
    border-color: var(--select2-border) !important;
    color: var(--select2-muted) !important;
    font-weight: 300 !important;
}

input[readonly]:focus {
    background-color: var(--select2-surface) !important;
    border-color: var(--dlrg-blue) !important;
    color: var(--select2-muted) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 105, 180, 0.18) !important;
}

/* SweetAlert Modal Styling - Bootstrap Modal Look */
.swal-modal-style {
    background-color: var(--swal-popup-bg) !important;
    border: 1px solid var(--swal-popup-border) !important;
    border-radius: 0.5rem !important;
    box-shadow: var(--shadow-md) !important;
    max-width: 800px !important;
}

.swal-header-style {
    background-color: var(--swal-popup-bg) !important;
    border-bottom: 1px solid var(--swal-popup-border) !important;
    padding: 1rem 1.5rem !important;
    margin: 0 !important;
}

.swal-title-style {
    color: var(--swal-title-color) !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.swal-content-style {
    background-color: var(--swal-popup-bg) !important;
    color: var(--swal-popup-color) !important;
    padding: 1.5rem !important;
}

.swal-modal-style .swal2-close {
    color: var(--swal-title-color) !important;
    font-size: 1.5rem !important;
}

.swal-modal-style .swal2-close:hover {
    color: var(--swal-content-color) !important;
}

.swal-modal-style .btn {
    margin: 0 0.25rem !important;
}

/* Custom Bootstrap Column für 5 gleichmäßige Spalten */
.col-lg-2-4 {
    flex: 0 0 20%;
    max-width: 20%;
}

@media (max-width: 991.98px) {
    .col-lg-2-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media (max-width: 767.98px) {
    .col-lg-2-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .col-lg-2-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}