/**
 * Select Dropdown Fixes
 * Behebt das Problem mit doppelten Pfeilen und abgeschnittenen Inhalten
 */

/* ============================================
   1. CONTAINER OVERFLOW FIXES
   ============================================ */

/* Stelle sicher, dass alle Container Dropdowns nicht abschneiden */
/* Diese Regel muss sehr spezifisch sein, um andere overflow-Regeln zu überschreiben */
.content,
.content > *,
.card,
.card > *,
.card-body,
.card-body > *,
.modal,
.modal > *,
.modal-body,
.modal-body > *,
.form-group,
.form-group > *,
.input-group,
.input-group > *,
.row,
.row > *,
.col,
[class*="col-"],
[class*="col-"] > *,
.table-responsive,
.container,
.container > *,
.container-fluid,
.container-fluid > * {
    overflow: visible !important;
}

/* Spezifische Positionierung für Container */
.card-body {
    position: relative;
}

.form-group,
.input-group {
    position: relative;
}

/* Überschreibe inline-Styles */
.card-body[style*="overflow"],
.modal-body[style*="overflow"],
.form-group[style*="overflow"] {
    overflow: visible !important;
}

/* ============================================
   2. SELECT ARROW FIXES
   ============================================ */

/* Entferne Browser-Standard-Pfeil für alle Select-Elemente */
select,
select.form-control,
.form-control select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 12px;
    padding-right: 2.5rem !important;
}

/* Custom-Pfeil für Select-Elemente im Focus-Zustand */
select:focus,
select.form-control:focus,
.form-control select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23007bff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

/* Entferne Bootstrap-Select Standard-Pfeil */
.bootstrap-select .dropdown-toggle::after {
    display: none !important;
}

.bootstrap-select .dropdown-toggle {
    padding-right: 2.5rem !important;
}

/* ============================================
   3. DROPDOWN MENU FIXES
   ============================================ */

/* Basis-Styling für alle Dropdown-Menüs */
.dropdown-menu,
.bootstrap-select .dropdown-menu,
.selectpicker .dropdown-menu {
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9999 !important;
    position: absolute !important;
    transform: translateZ(0);
    will-change: transform;
}

/* Dynamic direction helpers (set by select-dropdown-fix.js) */
.dropdown-menu.md-dropdown-up {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

.dropdown-menu.md-dropdown-down {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* Sichtbarkeit für geöffnete Dropdowns */
.dropdown-menu.show,
.bootstrap-select.show .dropdown-menu.show,
.selectpicker.show .dropdown-menu.show,
.dropdown.show .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Spezifische Positionierung für Bootstrap-Select */
.bootstrap-select {
    position: relative !important;
}

.bootstrap-select .dropdown-menu {
    margin-top: 0 !important;
}

/* Spezifische Positionierung für normale Bootstrap Dropdowns */
.dropdown {
    position: relative !important;
}

/* Spezifische Positionierung für geöffnete Dropdowns */
.bootstrap-select.show .dropdown-menu,
.selectpicker.show .dropdown-menu,
.dropdown.show .dropdown-menu {
    position: absolute !important;
    z-index: 9999 !important;
    margin-top: 0 !important;
    top: 100% !important;
    left: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   4. SCROLLBAR STYLING
   ============================================ */

.dropdown-menu::-webkit-scrollbar,
.bootstrap-select .dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.dropdown-menu::-webkit-scrollbar-track,
.bootstrap-select .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb,
.bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover,
.bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   5. CONTEXT-SPECIFIC FIXES
   ============================================ */

/* Modals */
.modal .dropdown-menu,
.modal .bootstrap-select .dropdown-menu {
    z-index: 1060 !important;
    max-height: 300px !important;
}

/* Cards */
.card .dropdown-menu,
.card .bootstrap-select .dropdown-menu {
    z-index: 9999 !important;
}

/* Form Groups */
.form-group .dropdown-menu,
.form-group .bootstrap-select .dropdown-menu {
    z-index: 9999 !important;
}

/* Input Groups */
.input-group .dropdown-menu,
.input-group .bootstrap-select .dropdown-menu {
    z-index: 9999 !important;
}

/* Select-Elemente in Containern */
.form-group select,
.input-group select {
    position: relative;
    z-index: 1;
}