/*
 * customSelect — CMS-Theming (Tabler). Adaptiert aus _ref/customSelect.css:
 *   • --bs-*  → --tblr-* (theme-/dark-reaktiv)
 *   • Toggle-Button im .form-select-Look (Rahmen/BG/Radius/Höhe/Caret) statt btn-secondary
 *   • Caret = Tabler-SVG (statt FA-„Font Awesome 5 Pro") → identisch zu nativen Selects, keine FA-Abhängigkeit
 *   • fixed-label (hartes Weiß, dark-untauglich) entfernt — im CMS nicht genutzt (Label steht darüber)
 *
 * Struktur kommt aus customSelect.js: .custom-select-wrapper > (native .custom-select-native + .dropdown).
 */

/* FOUC vermeiden: ein noch nicht übernommenes data-cl-select-Select (vor cms_select.js-Init) ausblenden —
   sonst blitzt kurz das rohe <select multiple> als Listbox auf. Sobald die Engine .custom-select-native
   setzt, greift die Regel nicht mehr und der gestylte Toggle erscheint. (Hide-until-JS — wie cl-table-bereit.) */
select[data-cl-select]:not(.custom-select-native) { display: none !important; }

/* Natives Select unsichtbar, bleibt WERTQUELLE (FormData + Dirty-Guard). */
.custom-select-native {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 100%;
}
.custom-select-wrapper { position: relative; }

/* Toggle wie ein .form-select (Rahmen/BG/Radius/Höhe). Horizontales Padding kommt aus px-3 (Komponente);
   hier nur die vertikale Höhe. Der Caret ist ein FA-::after (s.u.), kein Hintergrund-SVG. */
.custom-select-wrapper .dropdown > button {
    width: 100%;
    min-height: 2.5rem;
    padding: .5625rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-forms);
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}
/* Caret = fa-light-Chevron wie der Filter-Toggle (Family „Font Awesome 7 Pro", Pro 7.2.0, weight 300).
   Über justify-content-between (Komponente) sitzt der ::after rechts; beim Öffnen → xmark (wie im Original). */
.custom-select-wrapper .dropdown > button::after {
    font-family: "Font Awesome 7 Pro";
    font-weight: 300;
    font-size: 0.75rem;
    min-width: 2rem;
    text-align: right;
}
.custom-select-wrapper .dropdown > button:not([aria-expanded="true"])::after { content: "\f078"; }  /* chevron-down */
.custom-select-wrapper .dropdown > button[aria-expanded="true"]::after  { content: "\f00d"; }   /* xmark (offen) */

/* Mengen-Badge-Slot: eigenes Flex-Kind NEBEN dem text-truncate-Label (nicht darin) → nie abgeschnitten,
   schrumpft nicht (nur das Label truncatet). */
.custom-select-wrapper .cl-select-count { flex: 0 0 auto; display: inline-flex; align-items: center; }

/* „Alles abwählen"-X (data-cl-select-clearable): rechts im Toggle, als GESCHWISTER neben dem Button (Klick
   togglet das Dropdown nicht). Sichtbar via JS (d-none-Toggle), sobald eine Auswahl existiert. */
.custom-select-wrapper .cl-select-clear {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 0.875rem;
    cursor: pointer;
    color: var(--tblr-tertiary);
    font-size: 0.75rem;
    z-index: 5;
}
.custom-select-wrapper .cl-select-clear:hover { color: var(--tblr-body-color); }
/* Bei Auswahl ersetzt das X den Caret: ::after-Caret entfernen + rechts Platz reservieren, sodass Inhalt
   (Text/Badge) deutlich Abstand zum X hat (ähnlich der Luft vor dem Caret). */
.custom-select-wrapper.cl-select-clearable .dropdown > button.has-selection::after { content: none; }
.custom-select-wrapper.cl-select-clearable .dropdown > button.has-selection { padding-right: 2.75rem; }
/* Fokus-Ring nur bei ECHTEM Tastatur-Fokus (:focus-visible), nicht bei maus-/programmgesteuertem Fokus.
   Sonst zeigt der Toggle die grüne Umrandung, wenn Bootstrap beim Schließen den Fokus an ihn zurückgibt
   (z.B. Kunde-Dropdown schließt, weil man direkt auf „Filtern" klickt). */
.custom-select-wrapper .dropdown > button:focus-visible {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.25);
    outline: 0;
}
/* Platzhalter (keine Auswahl) gedämpft. */
.custom-select-wrapper .dropdown > button:not(.has-selection) { color: var(--tblr-secondary); }
/* Deaktiviert. */
.custom-select-wrapper.is-disabled .dropdown > button,
.custom-select-wrapper .dropdown > button:disabled {
    background-color: var(--tblr-bg-surface-secondary);
    cursor: not-allowed;
}

/* Menü + Items im Tabler-Look (dark-aware über --tblr-*). */
.custom-select-wrapper .dropdown-menu-inner {
    scrollbar-width: thin;
    scrollbar-color: var(--tblr-border-color) transparent;
    /* Untere Ecken runden: das Menü hat (bewusst) kein overflow:hidden mehr, damit das Pfeilchen
       (dropdown-menu-arrow) nicht abgeschnitten wird. Beim Scrollen würden die Items sonst eckig über die
       runde Menü-Unterkante ragen. Nur unten nötig — oben deckt bei scrollenden Menüs das Suchfeld die Ecke. */
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
.custom-select-wrapper .dropdown-item {
    white-space: normal;
    font-size: 0.875rem;
    cursor: pointer;
}
.custom-select-wrapper .dropdown-item.disabled {
    color: var(--tblr-secondary);
}


.custom-select-wrapper .dropdown-item.active,
.custom-select-wrapper .dropdown-item:active {
    background-color: rgba(var(--tblr-secondary-rgb), 0.08);
    color: var(--tblr-body-color);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--tblr-primary);
}
.custom-select-wrapper .dropdown-item:hover:not(.active) {
    background-color: rgba(var(--tblr-secondary-rgb), 0.08);
}
/* Tastatur-Navigation: per Pfeiltaste hervorgehobene Option (kein DOM-Fokus, daher eigene Klasse statt :focus).
   Etwas kräftiger als Hover, damit der „virtuelle Fokus" klar erkennbar ist. */
.custom-select-wrapper .dropdown-item.cl-option-active {
    background-color: rgba(var(--tblr-secondary-rgb), 0.16);
}
.custom-select-wrapper .dropdown-item:focus:not(.active):not(:active) {
    background-color: transparent;
}
.custom-select-wrapper .dropdown-item-group:last-child { border-bottom: none !important; }
.custom-select-wrapper .dropdown-item-group-inner .dropdown-item-row { flex: 0 0 100%; }
.custom-select-wrapper .dropdown-item-group-inner.flex-3-col .dropdown-item-row { flex: 0 0 33.3333%; }
.custom-select-wrapper .dropdown-item-group-inner.flex-3-col .dropdown-item { white-space: nowrap; width: max-content; }

/* Gruppen-Label (Optgroup) im Multi-Modus. */
.custom-select-wrapper .dropdown-item-group-label { color: var(--tblr-secondary); }

/* Leerer Platzhalter (disabled + value="", von customSelect.js markiert) nicht in der Liste zeigen — er
   erscheint nur als Button-Text. ECHTE disabled-Optionen (mit Wert) bleiben sichtbar (grau, nicht klickbar). */
.custom-select-wrapper .dropdown-item-row.cl-select-placeholder { display: none; }

/* Menü auf INHALTSBREITE statt Toggle-Breite (opt-in via data-cl-select-menu-fit → Klasse cl-select-menu-fit):
   so breit wie das längste Item (max-content), mind. so breit wie der Toggle, gedeckelt; Items nicht umbrechen.
   `!important` schlägt das hart gesetzte w-100 der Engine am Menü. */
.custom-select-wrapper .dropdown-menu.cl-select-menu-fit {
    width: max-content !important;
    min-width: 100%;
    max-width: min(32rem, 90vw);
}
/* Truncation im fit-Menü kommt aus dem Markup (data-content: <strong .text-nowrap> + <div .text-truncate>),
   nicht aus einem display:block-Override — .dropdown-item bleibt Tablers Flex. Die truncatende Spalte
   (.text-truncate) ist ein Flex-Kind und braucht min-width:0, sonst schrumpft sie bei sehr langem Einzelwort nicht. */
.custom-select-wrapper .dropdown-menu.cl-select-menu-fit .dropdown-item .text-truncate { min-width: 0; }
/* Optgroups im fit-Menü: Gruppen-Inner als BLOCK statt d-flex. `.d-flex` ist `display:flex !important` →
   daher hier ebenfalls `!important`. Sonst legt `flex-wrap` bei `max-content` ALLE Items einer Gruppe in EINE
   Zeile (Summe der Breiten) → Menü schießt auf den Deckel. Block → max-content = breitestes echtes Item/Label.
   `flex-3-col` (data-flex-items) bleibt ausgenommen. */
.custom-select-wrapper .dropdown-menu.cl-select-menu-fit .dropdown-item-group-inner:not(.flex-3-col) { display: block !important; }
/* Suchfeld soll die fit-Breite NICHT treiben (sonst Menü = Input-Default-Breite statt breitestes Item):
   width:0 → kein Beitrag zur intrinsischen Breite; min-width:100% → füllt die vom Inhalt bestimmte Breite. */
.custom-select-wrapper .dropdown-menu.cl-select-menu-fit .cs-searchbox .form-control { width: 0; min-width: 100%; }
.custom-select-wrapper.isopen .dropdown .dropdown-menu { z-index: 1022 !important; }

/* Aktions-Icons rechts in Option-Zeilen (data-content, z.B. Kunden-Switcher: „arbeiten für" /
   „Kunden-Sicht"). Klick navigiert statt zu wählen (Engine: [data-cl-option-href]);
   leerer href = inert + ausgegraut (noch nicht gebaute Aktion). */
.custom-select-wrapper .cl-select-aktionen { margin-left: auto; display: inline-flex; gap: .25rem; flex: 0 0 auto; }
.custom-select-wrapper .cl-select-aktion {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: var(--tblr-border-radius);
    color: var(--tblr-secondary);
}
.custom-select-wrapper .cl-select-aktion:hover { background: rgba(var(--tblr-secondary-rgb), 0.16); color: var(--tblr-primary); }
.custom-select-wrapper .cl-select-aktion[data-cl-option-href=""] { opacity: .35; cursor: default; }
.custom-select-wrapper .cl-select-aktion[data-cl-option-href=""]:hover { background: none; color: var(--tblr-secondary); }